/* =========================================================================
   OSCMS — shared design tokens & components
   Bespoke design system (no CSS framework), the same approach the AccessHRM
   reference project uses for its own UI, so the whole app — staff console and
   (later) the Student/Customer Portal — shares one consistent visual system.
   ========================================================================= */

:root {
  --osc-primary: #145C7A;
  --osc-primary-hover: #0F4A63;
  --osc-primary-tint: #E7F1F5;
  --osc-accent: #D97706;
  --osc-accent-tint: #FCF1DE;
  --osc-bg: #F4F6F8;
  --osc-surface: #FFFFFF;
  --osc-border: #E2E8ED;
  --osc-border-soft: #EEF2F5;
  --osc-text: #1A2332;
  --osc-text-muted: #5B6B7C;
  --osc-text-faint: #93A1AF;
  --osc-success: #1B9C63;
  --osc-success-tint: #E7F8EF;
  --osc-warning: #C2790A;
  --osc-warning-tint: #FCF1DE;
  --osc-danger: #D5372B;
  --osc-danger-tint: #FBE7E5;
  /* A third categorical hue for dashboard charts, alongside the existing
     --osc-primary/--osc-accent pair — used only for "Commissions Outstanding"
     bars so that value stays visually distinct from Invoices (primary) and
     Expenses (accent) wherever all three appear in the same chart. Not used
     anywhere outside chart fills, so it lives here rather than getting its own
     "status" meaning. */
  --osc-viz-violet: #4A3AA7;
  --osc-radius-lg: 14px;
  --osc-radius-md: 10px;
  --osc-radius-sm: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--osc-bg);
  color: var(--osc-text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
}

h1, h2, h3, .osc-brand {
  font-family: 'Poppins', system-ui, sans-serif;
}

a { color: var(--osc-primary); text-decoration: none; }
a:hover { color: var(--osc-primary-hover); }

/* ---- App shell (staff console) --------------------------------------- */

.osc-app {
  display: flex;
  min-height: 100vh;
}

.osc-sidebar {
  width: 264px;
  min-width: 264px;
  background: var(--osc-surface);
  border-right: 1px solid var(--osc-border);
  display: flex;
  flex-direction: column;
  padding: 22px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.osc-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 24px 8px;
}

/* The company's own logo (Admin -> Business Settings), shown at its full
   width/aspect ratio rather than squeezed into the small square
   .osc-logo-mark box below — that box is sized for the generic fallback
   glyph only and would shrink a wide wordmark-style logo down to an
   unreadable sliver. No text is placed alongside it (see _Layout.cshtml's
   own remarks) since the logo already carries the company name. */
.osc-sidebar-logo-full {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
}

.osc-logo-mark {
  width: 34px;
  height: 34px;
  border-radius: var(--osc-radius-md);
  background: var(--osc-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}

.osc-nav-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--osc-text-faint);
  padding: 16px 12px 6px;
}
.osc-nav-label:first-child { padding-top: 6px; }

.osc-navitem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--osc-radius-md);
  color: var(--osc-text-muted);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
  min-height: 42px;
}
.osc-navitem:hover { background: var(--osc-primary-tint); color: var(--osc-text); }
.osc-navitem.active {
  background: var(--osc-primary-tint);
  color: var(--osc-primary);
  font-weight: 600;
}
.osc-navitem svg { flex-shrink: 0; }

.osc-sidebar-user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: #FAFBFC;
  border: 1px solid var(--osc-border-soft);
}

.osc-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--osc-primary);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.osc-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.osc-topbar {
  min-height: 72px;
  border-bottom: 1px solid var(--osc-border);
  display: flex;
  align-items: center;
  padding: 14px 32px;
  gap: 16px;
  background: var(--osc-surface);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 5;
}

.osc-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--osc-radius-md);
  border: 1px solid var(--osc-border);
  background: var(--osc-surface);
  align-items: center;
  justify-content: center;
  color: var(--osc-text-muted);
  cursor: pointer;
}

.osc-topbar-title h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
}

.osc-topbar-title .osc-subtitle {
  font-size: 12.5px;
  color: var(--osc-text-faint);
}

.osc-topbar-spacer { flex: 1; }

.osc-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--osc-bg);
  border: 1px solid var(--osc-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--osc-text-muted);
  position: relative;
  cursor: pointer;
}

.osc-content {
  flex: 1;
  padding: 26px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- Cards, KPIs & tables ---------------------------------------------- */

.osc-card {
  background: var(--osc-surface);
  border: 1px solid var(--osc-border);
  border-radius: var(--osc-radius-lg);
  padding: 22px;
}

.osc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.osc-card-header h2, .osc-card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.osc-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}

.osc-kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--osc-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.osc-kpi-value {
  font-size: 28px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
}

.osc-kpi-label {
  font-size: 13px;
  color: var(--osc-text-muted);
  margin-top: 2px;
}

.osc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.osc-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--osc-text-faint);
  padding: 0 8px 10px;
  border-bottom: 1px solid var(--osc-border-soft);
  white-space: nowrap;
}

.osc-table td {
  padding: 13px 8px;
  border-bottom: 1px solid #F5F6F8;
  vertical-align: middle;
}

.osc-table tbody tr:hover { background: #FAFBFC; }
.osc-table tbody tr:last-child td { border-bottom: none; }

/* ---- Dashboard bar charts ---------------------------------------------
   Hand-rolled horizontal bar charts (no charting library/CDN dependency —
   this app is a self-hosted on-prem deployment, so every visual has to work
   with no internet access). One row per category: a fixed-width label, a
   flexible track, a right-aligned value. Fill grows from the left (the
   baseline) with a rounded far end only — see dataviz mark spec ("4px
   rounded data-end, square at the baseline"). Used on the operational
   Dashboard (Lead Status Breakdown, Finance Overview) and reused wherever
   else a simple single-series magnitude comparison is needed. */
.osc-barchart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.osc-barchart-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.osc-barchart-label {
  width: 140px;
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--osc-text-muted);
}

.osc-barchart-track {
  flex: 1;
  height: 18px;
  background: var(--osc-border-soft);
  border-radius: 5px;
  overflow: hidden;
}

.osc-barchart-fill {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
}

.osc-barchart-value {
  width: 84px;
  flex-shrink: 0;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.osc-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--osc-text-faint);
}

.osc-legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* ---- Dashboard column (trend) chart -------------------------------------
   Hand-rolled vertical/stacked bar chart — the same "no charting library"
   reasoning as the horizontal .osc-barchart above, used where the categories
   are a run of consecutive days (Dashboard's "Attendance Trend") rather than
   a handful of named statuses, so a column-per-day reads better than a row-
   per-day. Each column is a fixed-height flex box anchored to the bottom
   (justify-content: flex-end) so every day's stack sits on a shared baseline;
   each segment's own height is set inline in px (same InvariantCulture
   reasoning as .osc-barchart-fill's inline width — see Views/Home/Index's
   own Px() helper). */
.osc-colchart {
  display: flex;
  gap: 6px;
  height: 172px;
}

.osc-colchart-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.osc-colchart-stack {
  width: 100%;
  max-width: 22px;
  display: flex;
  flex-direction: column;
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.osc-colchart-seg { width: 100%; }

.osc-colchart-label {
  margin-top: 8px;
  font-size: 10px;
  color: var(--osc-text-faint);
  white-space: nowrap;
}

/* A miniature version of the same bar, embedded inline in a table cell — the
   Management Dashboard's "Branch Comparison" widget uses one per metric per
   branch so several branches' Leads/Customers/Student Files/Outstanding
   Invoices can be scanned at a glance in one table, each column normalized
   against its own column's highest value (not a shared scale — the metrics
   are different units). */
.osc-inline-bar {
  display: inline-block;
  width: 64px;
  height: 8px;
  background: var(--osc-border-soft);
  border-radius: 4px;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 8px;
}

.osc-inline-bar-fill {
  display: block;
  height: 100%;
  border-radius: 0 3px 3px 0;
}

.osc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: none;
  cursor: default;
}
.osc-badge-success { color: var(--osc-success); background: var(--osc-success-tint); }
.osc-badge-warning { color: var(--osc-warning); background: var(--osc-warning-tint); }
.osc-badge-danger { color: var(--osc-danger); background: var(--osc-danger-tint); }
.osc-badge-accent { color: var(--osc-accent); background: var(--osc-accent-tint); }
.osc-badge-neutral { color: var(--osc-text-muted); background: var(--osc-bg); }

select.osc-badge {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235B6B7C' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.osc-avatar-stack { display: flex; align-items: center; }
.osc-avatar-stack .osc-avatar {
  width: 26px;
  height: 26px;
  font-size: 10.5px;
  margin-left: -8px;
  border: 2px solid var(--osc-surface);
}
.osc-avatar-stack .osc-avatar:first-child { margin-left: 0; }

/* ---- Buttons ------------------------------------------------------------ */

.osc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--osc-radius-md);
  font-weight: 700;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}
.osc-btn:hover { text-decoration: none; }

.osc-btn-primary { background: var(--osc-primary); color: #fff; }
.osc-btn-primary:hover { background: var(--osc-primary-hover); color: #fff; }

.osc-btn-ghost { background: var(--osc-surface); color: var(--osc-text); border-color: var(--osc-border); }
.osc-btn-ghost:hover { background: var(--osc-bg); color: var(--osc-text); }

.osc-btn-danger { background: var(--osc-danger); color: #fff; }
.osc-btn-danger:hover { background: #B92E24; color: #fff; }

.osc-btn-sm { height: 34px; padding: 0 12px; font-size: 12.5px; }

/* ---- Forms --------------------------------------------------------------- */

.osc-form-row { margin-bottom: 18px; }

.osc-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.osc-input,
.osc-select,
textarea.osc-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #DCE2E8;
  border-radius: var(--osc-radius-md);
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--osc-text);
  background: var(--osc-surface);
}

textarea.osc-input { min-height: 90px; padding: 10px 14px; resize: vertical; }

.osc-input:focus, .osc-select:focus, textarea.osc-input:focus {
  outline: none;
  border-color: var(--osc-primary);
  box-shadow: 0 0 0 3px var(--osc-primary-tint);
}

.osc-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--osc-text-muted);
}

.osc-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 18px;
}

/* Dashboard summary cards (Customer/Student File/Tasks/Invoice-Payment-
   Expense/Immigration Case) — a wider minimum than .osc-form-grid's 220px so
   a card with several rows of "long label + right-aligned value" content
   (see .osc-table usage in Views/Home/Index.cshtml) has enough room for both
   without wrapping awkwardly or the value crowding the card's edge. At
   typical desktop widths this settles into about 3 cards per row rather than
   5, same as .osc-form-grid would give at 220px. */
.osc-dashboard-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.osc-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 14px;
  border: 1px solid var(--osc-border);
  border-radius: var(--osc-radius-md);
  padding: 14px;
  max-height: 220px;
  overflow-y: auto;
}

.osc-field-error {
  color: var(--osc-danger);
  font-size: 12.5px;
  margin-top: 4px;
}

.osc-validation-summary {
  background: var(--osc-danger-tint);
  color: var(--osc-danger);
  border: 1px solid #F3C7C2;
  border-radius: var(--osc-radius-md);
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 18px;
}

.osc-alert-success {
  background: var(--osc-success-tint);
  color: var(--osc-success);
  border: 1px solid #BFE9D3;
  border-radius: var(--osc-radius-md);
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 18px;
}

.osc-alert-error {
  background: var(--osc-danger-tint);
  color: var(--osc-danger);
  border: 1px solid #F3C6C1;
  border-radius: var(--osc-radius-md);
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 18px;
}

.osc-alert-info {
  background: var(--osc-primary-tint);
  color: var(--osc-primary);
  border: 1px solid #C9DFE8;
  border-radius: var(--osc-radius-md);
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 18px;
}

/* ---- Toolbars, filters, empty states ------------------------------------ */

.osc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.osc-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 18px;
}

.osc-filter-bar .osc-form-row { margin-bottom: 0; min-width: 170px; }

.osc-empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--osc-text-faint);
  font-size: 14px;
}

.osc-search-input {
  min-width: 220px;
}

/* ---- Login page ----------------------------------------------------- */

.osc-login-shell {
  display: flex;
  min-height: 100vh;
  background: #FFFFFF;
}

.osc-login-brand-panel {
  width: 480px;
  min-width: 320px;
  background: #0B3B4F;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  position: relative;
  overflow: hidden;
}

.osc-login-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 400px at 85% 10%, rgba(255,255,255,0.08), transparent),
    radial-gradient(500px 500px at 10% 90%, rgba(255,255,255,0.06), transparent);
}

.osc-login-form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FBFBFD;
  padding: 32px;
}

.osc-login-form {
  width: 100%;
  max-width: 380px;
}

.osc-login-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.85);
}

.osc-login-feature-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--osc-radius-sm);
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.osc-login-headline { font-size: 32px; }
.osc-login-subtext { font-size: 15px; }

@media (max-width: 860px) {
  .osc-login-shell { flex-direction: column; min-height: 0; }
  .osc-login-brand-panel { width: 100%; min-width: 0; padding: 32px 24px; gap: 24px; }
  .osc-login-headline, .osc-login-subtext, .osc-login-feature-list { display: none !important; }
  .osc-login-copyright { display: none; }
  .osc-login-form-panel { padding: 28px 20px 12px; }
}

/* ---- Responsive: collapse sidebar to an off-canvas drawer on mobile ---- */

@media (max-width: 960px) {
  .osc-sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0);
  }
  .osc-sidebar.osc-open {
    transform: translateX(0);
    box-shadow: 0 0 0 9999px rgba(15,23,33,0.35);
  }
  .osc-menu-toggle { display: flex; }
  .osc-content { padding: 18px; }
  .osc-topbar { padding: 12px 18px; }
}

/* ---- Tabs (Customer/Student 360° detail views) --------------------------- */

.osc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--osc-border);
  margin-bottom: 20px;
}

.osc-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 4px;
  margin-right: 22px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--osc-text-faint);
  cursor: pointer;
}

.osc-tab:hover { color: var(--osc-text); }

.osc-tab.active {
  color: var(--osc-primary);
  border-bottom-color: var(--osc-primary);
}

.osc-tab[disabled] {
  cursor: default;
  opacity: .55;
}
.osc-tab[disabled]:hover { color: var(--osc-text-faint); }

/* ---- Repeatable form rows (Education / English Proficiency / Job Exp.) --- */

.osc-repeat-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}

.osc-repeat-table th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--osc-text-faint);
  padding: 0 8px 8px;
}

.osc-repeat-table td {
  padding: 4px 8px 12px;
  vertical-align: top;
}

.osc-repeat-remove {
  width: 34px;
  height: 34px;
  border-radius: var(--osc-radius-sm);
  border: 1px solid var(--osc-border);
  background: var(--osc-surface);
  color: var(--osc-danger);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
}
.osc-repeat-remove:hover { background: var(--osc-danger-tint); }

/* ---- "Developed by" credit line ---------------------------------------- */

.osc-credit-footer {
  text-align: center;
  font-size: 12px;
  color: var(--osc-text-faint);
  padding: 14px 20px 18px;
}

.osc-credit-footer a {
  color: var(--osc-text-muted);
  font-weight: 600;
  text-decoration: none;
}

/* ---- Task Kanban board (Views/Tasks/Index.cshtml) ---------------------- */

.osc-kanban {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  align-items: flex-start;
}

.osc-kanban-col {
  flex: 0 0 280px;
  background: var(--osc-bg);
  border: 1px solid var(--osc-border-soft);
  border-radius: var(--osc-radius-lg);
  padding: 12px;
  min-height: 120px;
}

.osc-kanban-col.osc-kanban-col-over {
  border-color: var(--osc-primary);
  background: var(--osc-primary-tint);
}

.osc-kanban-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 13px;
  padding: 2px 4px 12px;
}

.osc-kanban-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--osc-text-faint);
  background: var(--osc-surface);
  border: 1px solid var(--osc-border);
  border-radius: 999px;
  padding: 1px 8px;
}

.osc-kanban-card {
  background: var(--osc-surface);
  border: 1px solid var(--osc-border);
  border-radius: var(--osc-radius-md);
  padding: 10px 12px;
  margin-bottom: 10px;
  cursor: grab;
  font-size: 13px;
}

.osc-kanban-card:active { cursor: grabbing; }
.osc-kanban-card.osc-kanban-dragging { opacity: .4; }

.osc-kanban-card-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.osc-kanban-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--osc-text-faint);
  font-size: 11.5px;
}

.osc-kanban-empty {
  color: var(--osc-text-faint);
  font-size: 12px;
  text-align: center;
  padding: 14px 0;
}

.osc-credit-footer a:hover { text-decoration: underline; }

/* ---- Notification bell (SRS Section 3.3, FR-NOTIF-01) ------------------- */

.osc-notif-bell { position: relative; }

.osc-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--osc-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.osc-notif-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--osc-surface);
  border: 1px solid var(--osc-border);
  border-radius: var(--osc-radius-md);
  box-shadow: 0 12px 32px rgba(20, 30, 45, .14);
  z-index: 60;
  overflow: hidden;
}

.osc-notif-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--osc-border-soft);
  font-size: 13px;
}

.osc-notif-dropdown-header a { font-size: 12px; }

[data-osc-notif-list] { max-height: 360px; overflow-y: auto; }

.osc-notif-item {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--osc-border-soft);
  color: var(--osc-text);
}

.osc-notif-item:hover { background: var(--osc-bg); text-decoration: none; }

.osc-notif-item.unread { background: var(--osc-primary-tint); }

.osc-notif-item-title { font-size: 13px; font-weight: 600; }

.osc-notif-item-message { font-size: 12px; color: var(--osc-text-muted); margin-top: 2px; }

.osc-notif-item-time { font-size: 11px; color: var(--osc-text-faint); margin-top: 4px; }

.osc-notif-empty {
  padding: 20px 14px;
  text-align: center;
  color: var(--osc-text-faint);
  font-size: 12.5px;
}

/* ---- Announcement banner (SRS FR-NOTIF-04) ------------------------------ */

.osc-announcement {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--osc-accent-tint);
  color: var(--osc-text);
  border: 1px solid var(--osc-accent);
  border-radius: var(--osc-radius-md);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
}

.osc-announcement button {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--osc-text-muted);
}