/* ==========================================================================
   NCOSHA — "Workspace" theme (v6)
   Loaded LAST on every page, after app.css / admin.css / portal.css, so it
   restyles the whole system without touching any page logic.
   Look: dark navy sidebar, white canvas, teal primary action, flat bordered
   surfaces, solid stage pills, quiet grey secondary text.

   To retune the whole system, change the tokens in the first block only.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  --ws-ink: #1B243F;          /* sidebar, headings, primary text */
  --ws-ink-2: #28304B;        /* active nav row, raised dark surfaces */
  --ws-nav-text: #8F93A2;     /* nav text on the dark sidebar */
  --ws-nav-group: #6F7794;    /* nav group labels */
  --ws-teal: #05807F;         /* primary action */
  --ws-teal-h: #046968;
  --ws-teal-soft: #E5F2F2;
  --ws-teal-light: #5CC8C2;   /* teal on dark backgrounds */
  --ws-text-2: #6A728A;       /* secondary text */
  --ws-text-3: #8D919F;       /* placeholders, table headings */
  --ws-border: #DFE3E8;
  --ws-border-soft: #EFF1F3;
  --ws-chip: #F6F7F8;
  --ws-blue: #395ECE;
  --ws-green: #2DB47D;
  --ws-green-text: #1E8F5F;
  --ws-green-soft: #E3F5EC;
  --ws-amber: #FFAC00;
  --ws-amber-soft: #FFF3D6;
  --ws-amber-text: #7A5200;
  --ws-red: #D6453D;
  --ws-red-h: #B8332C;
  --ws-red-soft: #FDECEB;
  --ws-radius: 8px;
  --ws-radius-lg: 12px;
  --ws-font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* map the old token names (app.css / admin.css) onto the new palette */
  --navy: #1B243F; --navy-2: #28304B;
  --safety: #05807F; --safety-2: #046968;
  --paper: #FFFFFF; --ink: #1B243F; --muted: #6A728A; --line: #DFE3E8;
  --danger: #C93B34; --amber: #FFAC00; --ok: #05807F;
  --radius: 8px; --radius-lg: 12px;
  --shadow: none; --shadow-hover: 0 8px 22px -10px rgba(27, 36, 63, .22);
  --font-display: var(--ws-font); --font-body: var(--ws-font);
  --sidebar-w: 264px; --topbar-h: 60px;
  --btn-green: #05807F; --btn-green-h: #046968; --btn-green-soft: #E5F2F2;
  --btn-red: #D6453D; --btn-red-h: #B8332C; --btn-red-soft: #FDECEB;

  /* map the portal token names (portal.css) */
  --pt-ink: #1B243F; --pt-navy: #1B243F; --pt-accent: #05807F; --pt-accent-hover: #046968; --pt-accent-soft: #E5F2F2;
  --pt-page: #FFFFFF; --pt-line: #DFE3E8; --pt-line-strong: #DFE3E8; --pt-text: #2B3345;
  --pt-muted: #6A728A; --pt-subtle: #8D919F;
  --pt-red: #C93B34; --pt-red-soft: #FDECEB; --pt-amber: #7A5200; --pt-amber-soft: #FFF3D6;
  --pt-green: #1E8F5F; --pt-green-soft: #E3F5EC;
  --pt-radius: 12px; --pt-shadow: none; --pt-side-w: 264px;
  --pt-font: var(--ws-font); --pt-display: var(--ws-font);
}

/* ---------------------------------------------------------------- base */
html, body { font-family: var(--ws-font); color: var(--ws-ink); -webkit-font-smoothing: antialiased; }
body, body.portal, body.portal-login { background: #FFFFFF; }
h1, h2, h3, h4, legend { font-family: var(--ws-font); letter-spacing: -.01em; }
button, input, select, textarea { font-family: inherit; }
a { color: var(--ws-teal); }
::selection { background: rgba(5, 128, 127, .22); }
:focus-visible { outline: 2px solid var(--ws-teal); outline-offset: 2px; }
.hint, .section-hint, .panel-sub { color: var(--ws-text-2); }

/* ---------------------------------------------------------------- buttons */
.btn, button[type=submit], .pt-btn {
  border-radius: var(--ws-radius); font-weight: 600; font-size: 14px; letter-spacing: 0; box-shadow: none;
}
.btn, button.btn, a.btn, button[type=submit].btn, button[type=submit], .pt-btn, a.pt-btn, button.pt-btn {
  background: var(--ws-teal); border: 1px solid var(--ws-teal); color: #fff; padding: 11px 18px; min-height: 42px;
}
.btn:hover, button.btn:hover, a.btn:hover, button[type=submit].btn:hover, button[type=submit]:hover, .pt-btn:hover, a.pt-btn:hover, button.pt-btn:hover {
  background: var(--ws-teal-h); border-color: var(--ws-teal-h); color: #fff;
}
.btn-sm, .pt-btn.small { padding: 8px 14px; min-height: 36px; font-size: 13.5px; }
.pt-btn.small { min-height: 32px; padding: 6px 12px; font-size: 13px; }
.btn.btn-outline, button.btn-outline, a.btn.btn-outline, button[type=submit].btn-outline, .pt-btn.grey, a.pt-btn.grey, button.pt-btn.grey {
  background: #fff; color: var(--ws-teal); border: 1px solid var(--ws-teal);
}
.btn.btn-outline:hover, button.btn-outline:hover, a.btn.btn-outline:hover, button[type=submit].btn-outline:hover,
.pt-btn.grey:hover, a.pt-btn.grey:hover, button.pt-btn.grey:hover {
  background: var(--ws-teal-soft); color: var(--ws-teal-h); border-color: var(--ws-teal-h);
}
.btn.btn-danger, button.btn-danger, a.btn.btn-danger, button[type=submit].btn-danger, .pt-btn.danger, button.pt-btn.danger {
  background: var(--ws-red); border-color: var(--ws-red); color: #fff;
}
.btn.btn-danger:hover, button.btn-danger:hover, a.btn.btn-danger:hover, button[type=submit].btn-danger:hover, .pt-btn.danger:hover, button.pt-btn.danger:hover {
  background: var(--ws-red-h); border-color: var(--ws-red-h);
}
.btn.btn-ghost, a.btn.btn-ghost { background: #fff; color: var(--ws-red); border: 1px solid var(--ws-red); }
.btn.btn-ghost:hover, a.btn.btn-ghost:hover { background: var(--ws-red-soft); color: var(--ws-red-h); }
.btn-navy, .btn.btn-navy { background: var(--ws-ink); border-color: var(--ws-ink); }
.btn-navy:hover, .btn.btn-navy:hover { background: var(--ws-ink-2); border-color: var(--ws-ink-2); }
.link-btn { color: var(--ws-teal); }

/* icon buttons: neutral, like the reference toolbar controls */
.icon-btn, .pt-icon-btn {
  background: #fff; color: var(--ws-text-2); border: 1px solid var(--ws-border); border-radius: var(--ws-radius);
}
.icon-btn:hover, .pt-icon-btn:hover { background: var(--ws-chip); color: var(--ws-ink); border-color: var(--ws-border); }
.icon-btn.is-active { background: var(--ws-teal); border-color: var(--ws-teal); color: #fff; }
.pt-btn-outline { background: #fff; color: var(--ws-ink); border: 1px solid var(--ws-border); border-radius: var(--ws-radius); font-weight: 600; }
.pt-btn-outline .ic { color: var(--ws-text-2); }
.pt-btn-outline:hover { background: var(--ws-chip); border-color: var(--ws-border); }
.pt-power { background: #fff; color: var(--ws-red); border: 1px solid var(--ws-border); border-radius: var(--ws-radius); }
.pt-power:hover { background: var(--ws-red); border-color: var(--ws-red); color: #fff; }

/* ---------------------------------------------------------------- form controls */
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=password],
select, textarea, .pt-field input[type="text"], .pt-field input[type="password"], .pt-field input[type="email"],
.pt-field select, .pt-field textarea, .pt-field input[type="file"] {
  border: 1px solid var(--ws-border); border-radius: var(--ws-radius); background: #fff; color: var(--ws-ink);
}
input::placeholder, textarea::placeholder { color: var(--ws-text-3); }
input:focus, select:focus, textarea:focus, .pt-field input:focus, .pt-field select:focus, .pt-field textarea:focus {
  border-color: var(--ws-teal); box-shadow: 0 0 0 3px rgba(5, 128, 127, .16);
}
label, .pt-field label { color: var(--ws-ink); font-weight: 600; }
input[type=checkbox], input[type=radio] { accent-color: var(--ws-teal); }
.choice, .pay-method { border: 1px solid var(--ws-border); border-radius: var(--ws-radius); }
.choice:hover, .pay-method:hover { border-color: var(--ws-teal); background: var(--ws-chip); }
.choice:has(input:checked), .pay-method:has(input:checked) { border-color: var(--ws-teal); background: var(--ws-teal-soft); color: var(--ws-ink); box-shadow: inset 0 0 0 1px var(--ws-teal); }
.conditional { border-left-color: var(--ws-teal); }
.declaration { background: var(--ws-chip); border: 1px solid var(--ws-border); color: var(--ws-text-2); font-style: normal; }
.status-flash, .pt-flash { background: var(--ws-teal-soft); color: var(--ws-ink); border: 1px solid #BFDFDE; border-left: 3px solid var(--ws-teal); border-radius: var(--ws-radius); }
.pt-flash.notice { background: var(--ws-amber-soft); border-color: #F3DDA0; border-left-color: var(--ws-amber); color: var(--ws-amber-text); }
.error-flash, .pt-flash.error { background: var(--ws-red-soft); color: #8E2B1E; border: 1px solid #F3C9C6; border-left: 3px solid var(--ws-red); border-radius: var(--ws-radius); }

/* ---------------------------------------------------------------- stage pills (badges) */
.badge, .pt-badge, .pt-status, .pt-chip, .hd-prio, .hp-prio, .gateway-badge {
  border-radius: 6px; padding: 5px 12px; font-size: 13px; font-weight: 600; gap: 0; line-height: 1.3;
}
.badge::before, .pt-badge::before, .pt-status::before { display: none; }
.badge-blue, .pt-badge.blue { background: var(--ws-blue); color: #fff; }
.badge-green, .badge.badge-green, .pt-badge.green { background: var(--ws-green) !important; color: #fff !important; }
.badge-amber, .pt-badge.amber { background: var(--ws-amber); color: #3A2A00; }
.badge-red { background: var(--ws-red); color: #fff; }
.badge-slate, .pt-badge.slate { background: var(--ws-border); color: var(--ws-ink); }
.pt-status { background: var(--ws-amber); color: #3A2A00; }
.pt-status.ok { background: var(--ws-green); color: #fff; }
.pt-chip.pass { background: var(--ws-green); color: #fff; }
.pt-chip.fail { background: var(--ws-red); color: #fff; }
.pt-chip.wait { background: var(--ws-border); color: var(--ws-ink); }
.hd-prio, .hp-prio { background: var(--ws-border); color: var(--ws-ink); padding: 3px 9px; font-size: 12px; }
.hd-prio.high, .hp-prio.high { background: var(--ws-amber); color: #3A2A00; }
.hd-prio.urgent, .hp-prio.urgent { background: var(--ws-red); color: #fff; }
.hd-prio.low, .hp-prio.low { background: var(--ws-chip); color: var(--ws-text-2); }
.gateway-badge.connected { background: var(--ws-green); color: #fff; }
.gateway-badge.pending { background: var(--ws-amber); color: #3A2A00; }
.tab-count { border-radius: 6px; background: var(--ws-chip); color: var(--ws-text-2); font-weight: 700; }

/* ---------------------------------------------------------------- surfaces */
.panel, .pt-panel, .stat-card, .pt-kpi, .module-card, .account-card, .summary-card, .hd-stat, .dash-hero, .promo-panel,
.pt-tile, .pt-service-tile, .pt-cert, .hd-msg, .hp-msg, .svc-card, .form-card, fieldset, .progress-track, .success-panel, .pt-req {
  box-shadow: none;
}
.panel, .pt-panel, .promo-panel, .stat-card, .pt-kpi, .module-card, .account-card, .summary-card, .hd-stat, .dash-hero, fieldset, .progress-track {
  border: 1px solid var(--ws-border); border-radius: var(--ws-radius-lg); background: #fff;
}
.panel h2, .panel-head h2 { font-size: 16px; font-weight: 700; color: var(--ws-ink); }
fieldset:focus-within { border-color: var(--ws-teal); box-shadow: none; }
legend .num { background: var(--ws-teal); border-radius: 6px; }
.stat-card, .pt-kpi { padding: 18px 20px; min-width: 0; }
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.stat-card .value { white-space: normal; overflow-wrap: anywhere; }
.stat-ico, .pt-kpi .ico, .module-icon, .account-icon, .summary-icon, .act-ico, .avatar-sm, .meta-ico {
  background: var(--ws-teal-soft) !important; color: var(--ws-teal) !important;
}
.stat-card.warm .stat-ico, .pt-kpi.warm .ico { background: var(--ws-amber-soft) !important; color: var(--ws-amber-text) !important; }
.pt-kpi.due .ico, .act-ico.is-off { background: var(--ws-red-soft) !important; color: var(--ws-red) !important; }
.pt-kpi.dark .ico { background: var(--ws-teal) !important; color: #fff !important; }
.stat-ico, .pt-kpi .ico, .module-icon, .account-icon, .act-ico { border-radius: 10px; }
.stat-card .label, .pt-kpi .k { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ws-text-2); }
.stat-card .value, .pt-kpi .v { font-size: 24px; font-weight: 700; color: var(--ws-ink); letter-spacing: -.01em; }
.pt-kpi.due .v { color: var(--ws-red); }
.hd-stat .k { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; }
.hd-stat.is-current { border-color: var(--ws-teal); box-shadow: inset 0 0 0 1px var(--ws-teal); }
.module-card:hover, .account-card:hover { border-color: var(--ws-teal); background: #fff; box-shadow: none; transform: none; }
.module-title, .account-title { font-weight: 700; color: var(--ws-ink); }
.dash-hero::before { background: var(--ws-teal); }
.dash-hero-slide .eyebrow { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--ws-teal); font-weight: 600; }
.promo-badge { background: var(--ws-teal-soft); color: var(--ws-teal); text-transform: none; letter-spacing: 0; font-size: 12.5px; border-radius: 6px; }
.dist-fill { background: var(--ws-teal); }
.bar, .bar-navy { background: var(--ws-teal); }
.donut { background: conic-gradient(var(--ws-teal) calc(var(--p) * 1%), var(--ws-border-soft) 0); }
.dist-track, .pt-kpi-bar, .progress-track .bar { background: var(--ws-border-soft); }
.pt-kpi-bar i, .progress-track .bar > i { background: var(--ws-teal); }
.pt-bar i { background: #BFDFDE; } .pt-bar.dark i, .pt-progress .track.dark i { background: var(--ws-teal); }
.pt-progress .track i { background: #BFDFDE; }
.empty-state .stat-ico { background: var(--ws-chip) !important; color: var(--ws-text-2) !important; }

/* ---------------------------------------------------------------- tables */
table.data-table th, .pt-table th {
  text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; color: var(--ws-text-2);
  background: transparent; border-bottom: 1px solid var(--ws-border); padding: 14px 12px;
}
table.data-table td, .pt-table td { padding: 16px 12px; border-bottom: 1px solid var(--ws-border-soft); color: var(--ws-ink); }
table.data-table tr:hover td, .pt-table tbody tr.row:hover td { background: #FAFBFC; }
.person-name { font-weight: 700; color: var(--ws-ink); font-size: 14.5px; }
table.data-table td .hint { color: var(--ws-text-3); font-size: 13px; }
.avatar-sm { width: 36px; height: 36px; font-weight: 700; }
.reg-group { border: 1px solid var(--ws-border); border-radius: var(--ws-radius-lg); }
.reg-group-header { background: var(--ws-chip); border-bottom: 1px solid var(--ws-border); }
.reg-group-toggle { background: #fff; color: var(--ws-teal); border: 1px solid var(--ws-border); border-radius: 6px; }
.reg-group-title { font-weight: 700; color: var(--ws-ink); }
.reg-group table.data-table th { background: transparent; }
.pt-table tr.pt-group td, .pt-table th { background: transparent; }
.pt-table tr.pt-group td { background: var(--ws-chip); }
.pt-panel-head { font-size: 16px; font-weight: 700; border-bottom: 1px solid var(--ws-border); }
.pt-toolbar { background: #fff; border-bottom: 1px solid var(--ws-border); }
.pt-note, .pt-detail, .hp-contacts, .hp-meta, .hp-reply { background: var(--ws-chip); }

/* ---------------------------------------------------------------- tabs + filter row (list pages) */
.info-bar { background: transparent; border: 0; border-radius: 0; padding: 0 0 18px; color: var(--ws-text-2); }
.info-bar-left strong { color: var(--ws-ink); }
.info-bar-right { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13.5px; color: var(--ws-text-2); }
.info-bar-right strong { color: var(--ws-ink); font-size: 15px; }
.tab-strip { gap: 28px; padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--ws-border); }
.tab-strip .tab {
  padding: 12px 2px; border-radius: 0; font-size: 14.5px; font-weight: 500; color: var(--ws-text-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent;
}
.tab-strip .tab:hover { background: transparent; color: var(--ws-ink); }
.tab-strip .tab.active { background: transparent; color: var(--ws-ink); font-weight: 600; box-shadow: none; border-bottom-color: var(--ws-teal); }
.tab-strip .tab.active .tab-count { background: var(--ws-teal-soft); color: var(--ws-teal); }
.panel.panel-attached { border: 0; border-radius: 0; box-shadow: none; padding: 0; background: transparent; margin-top: 0; }
.table-toolbar { margin: 22px 0 18px; gap: 12px; align-items: stretch; }

/* one bordered search bar, search + filters + actions inside it */
.filter-bar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin: 0;
  border: 1px solid var(--ws-border); border-radius: var(--ws-radius); background: #fff; padding: 4px 6px;
}
.filter-bar input, .filter-bar select {
  border: 0; border-radius: 6px; background: transparent; box-shadow: none; min-height: 36px; font-size: 14px;
  width: auto; min-width: 140px; flex: 0 1 auto; padding: 8px 10px; color: var(--ws-ink);
}
.filter-bar input[type=text], .filter-bar input[type=search] {
  flex: 1 1 240px; min-width: 200px; padding-left: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238D919F' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center;
}
.filter-bar select { color: var(--ws-text-2); cursor: pointer; }
.filter-bar input:focus, .filter-bar select:focus { box-shadow: none; background-color: var(--ws-chip); }
.filter-bar:focus-within { border-color: var(--ws-teal); box-shadow: 0 0 0 3px rgba(5, 128, 127, .12); }
.filter-bar button.btn, .filter-bar button.btn[type=submit], .filter-bar button[type=submit] {
  background: transparent; border-color: transparent; color: var(--ws-teal); min-height: 36px; padding: 6px 12px;
}
.filter-bar button.btn:hover, .filter-bar button.btn[type=submit]:hover, .filter-bar button[type=submit]:hover { background: var(--ws-teal-soft); color: var(--ws-teal-h); border-color: transparent; }
.filter-bar > a.btn, .filter-bar a.btn.btn-outline { background: transparent; border-color: transparent; color: var(--ws-text-2); min-height: 36px; padding: 6px 12px; }
.filter-bar > a.btn:hover { background: var(--ws-chip); color: var(--ws-ink); border-color: transparent; }
@media (max-width: 700px) {
  .filter-bar { border: 0; padding: 0; background: transparent; gap: 8px; }
  .filter-bar input, .filter-bar select { border: 1px solid var(--ws-border); background-color: #fff; width: 100%; flex: none; }
  .filter-bar input[type=text] { background-position: 12px center; flex: none; min-width: 0; }
  .filter-bar button.btn, .filter-bar button.btn[type=submit], .filter-bar button[type=submit] { background: var(--ws-teal); color: #fff; width: 100%; justify-content: center; min-height: 44px; }
  .filter-bar button.btn:hover, .filter-bar button[type=submit]:hover { background: var(--ws-teal-h); color: #fff; }
  .filter-bar > a.btn { width: 100%; justify-content: center; border: 1px solid var(--ws-border); }
  table.data-table.responsive td::before { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; }
}

/* quick-filter chips (activity filters etc.) */
.seg { background: transparent; padding: 0; gap: 8px; border-radius: 0; }
.seg a { background: var(--ws-chip); color: var(--ws-ink); border-radius: var(--ws-radius); padding: 9px 14px; font-weight: 500; }
.seg a:hover { background: var(--ws-border-soft); color: var(--ws-ink); }
.seg a.on { background: var(--ws-ink); color: #fff; box-shadow: none; }

/* ---------------------------------------------------------------- admin shell */
.admin-shell, .admin-main { background: #fff; }
.admin-sidebar {
  width: var(--sidebar-w); background: var(--ws-ink); color: var(--ws-nav-text); border-right: 0; padding: 22px 14px 14px;
}
.admin-sidebar .brand { padding: 0 6px 18px; margin: 0; border-bottom: 0; gap: 12px; align-items: center; }
.admin-sidebar .brand img { height: 36px; width: auto; background: #fff; padding: 5px 10px; border-radius: 8px; box-sizing: content-box; }
.admin-sidebar .brand span { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.sb-search { position: relative; margin: 0 4px 12px; }
.sb-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: none; stroke: var(--ws-nav-text); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.sb-search input {
  width: 100%; background: transparent; border: 1px solid #3A4260; color: #fff; border-radius: var(--ws-radius);
  padding: 10px 44px 10px 36px; font-size: 14px; min-height: 40px;
}
.sb-search input::placeholder { color: var(--ws-nav-text); }
.sb-search input:focus { border-color: var(--ws-teal-light); box-shadow: none; background: transparent; }
.sb-search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 600 11px/1 var(--ws-font); color: var(--ws-nav-text); pointer-events: none; }
.admin-sidebar nav.nav-groups { gap: 0; flex: 1 1 auto; }
.nav-group + .nav-group { margin-top: 6px; }
.nav-group-head { color: var(--ws-nav-group); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; padding: 8px 12px 6px; }
.nav-group-head:hover, .nav-group.is-active .nav-group-head { color: #C9CDD9; }
.nav-group-head:focus-visible { outline-color: var(--ws-teal-light); }
.admin-sidebar nav a {
  color: var(--ws-nav-text); font-size: 14.5px; font-weight: 500; padding: 9px 14px; border-radius: var(--ws-radius); margin-bottom: 1px; gap: 14px;
}
.admin-sidebar nav a .nav-icon { color: var(--ws-nav-text); width: 20px; height: 20px; }
.admin-sidebar nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.admin-sidebar nav a:hover .nav-icon { color: #fff; }
.admin-sidebar nav a.active { background: var(--ws-ink-2); color: #fff; font-weight: 600; }
.admin-sidebar nav a.active::before { display: none; }
.admin-sidebar nav a.active .nav-icon { color: #fff; }
.admin-sidebar nav a:focus-visible { outline-color: var(--ws-teal-light); }
.nav-badge { background: var(--ws-amber); color: #3A2A00; border-radius: 6px; }
.sb-foot {
  margin-top: 14px; padding: 12px 0 2px; border-top: 1px solid #2C3552; display: flex; flex-direction: column; gap: 2px;
  position: sticky; bottom: 0; background: var(--ws-ink);
}
.sb-account {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--ws-radius); text-decoration: none; color: #fff;
  font-size: 14.5px; font-weight: 600; min-width: 0;
}
.sb-account:hover { background: rgba(255, 255, 255, .06); }
.sb-account .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ws-teal); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.sb-account .who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sb-account .who strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-account .who span { font-size: 12px; font-weight: 500; color: var(--ws-nav-text); }
.admin-sidebar .logout-form { margin: 0; padding: 0; }
.admin-sidebar .logout-form button, .admin-sidebar .logout-form button[type=submit] {
  width: 100%; justify-content: flex-start; background: transparent; color: #FF9B94; border: 0; padding: 10px 12px; font-size: 14.5px; font-weight: 500; min-height: 40px; gap: 14px;
}
.admin-sidebar .logout-form button:hover { background: rgba(255, 107, 98, .12); color: #FFB4AE; }
.admin-sidebar .logout-form .ic { width: 20px; height: 20px; }
.admin-sidebar-overlay { background: rgba(15, 20, 36, .55); }

.admin-topbar { background: #fff; border-bottom: 1px solid var(--ws-border-soft); padding: 10px 40px; min-height: var(--topbar-h); }
.admin-topbar h1 { font-size: 14.5px; font-weight: 600; color: var(--ws-ink); letter-spacing: 0; }
.admin-topbar .crumb { display: inline-flex; align-items: center; gap: 8px; color: var(--ws-text-2); font-size: 14.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.admin-topbar .crumb:hover { color: var(--ws-ink); }
.admin-topbar .crumb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.admin-topbar .crumb-sep { color: var(--ws-border); font-size: 16px; }
.admin-topbar .btn-outline { color: var(--ws-ink); border-color: var(--ws-border); }
.admin-topbar .btn-outline:hover { background: var(--ws-chip); border-color: var(--ws-border); color: var(--ws-ink); }
.admin-user-chip .avatar { background: var(--ws-ink); }
.admin-user-chip:hover .who strong { color: var(--ws-teal); }
.admin-content { padding: 36px 40px 64px; }
.page-intro { margin: 0 0 28px; align-items: center; }
.page-intro h2, .dash-intro h2 { font-size: 30px; font-weight: 700; color: var(--ws-ink); letter-spacing: -.02em; margin: 0 0 6px; }
.page-intro p, .dash-intro p { color: var(--ws-text-2); font-size: 14.5px; }
.page-intro-actions .btn { min-height: 44px; padding: 10px 20px; font-size: 14.5px; }
.page-intro-actions .btn-sm { min-height: 44px; padding: 10px 20px; font-size: 14.5px; }
.back-link { color: var(--ws-text-2); }
.back-link:hover { color: var(--ws-teal); }
.sticky-save { border-top: 1px solid var(--ws-border); background: rgba(255, 255, 255, .96); }
.danger-zone { background: var(--ws-red-soft); border-color: #F3C9C6; }
.danger-zone strong { color: #8E2B1E; }
.reg-when, .reg-when-ico { background: var(--ws-chip); border-color: var(--ws-border); }
.docsheet-stage { background: var(--ws-border-soft); }
table.mini-calendar td.is-today, table.mini-calendar.full-calendar td.is-today a { background: var(--ws-teal); }
.cal-count { background: var(--ws-ink); }
.sidebar-toggle { border-color: var(--ws-border); color: var(--ws-ink); }

@media (max-width: 900px) {
  .admin-sidebar { width: min(var(--sidebar-w), 86vw); }
  .admin-sidebar:not(.open) { box-shadow: none; }
  .admin-topbar { padding: 8px 16px; }
  .admin-topbar .crumb, .admin-topbar .crumb-sep { display: none; }
  .admin-content { padding: 22px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .page-intro h2, .dash-intro h2 { font-size: 24px; }
  .adm-tabbar a.active { color: var(--ws-teal); }
  .adm-tabbar b { background: var(--ws-red); }
}
@media (max-width: 560px) {
  .admin-content { padding-left: 14px; padding-right: 14px; }
  .page-intro h2, .dash-intro h2 { font-size: 22px; }
  .tab-strip { gap: 20px; }
}

/* ---------------------------------------------------------------- student portal shell */
body.portal { background: #fff; color: var(--ws-ink); }
.pt-side { background: var(--ws-ink); border-right: 0; color: var(--ws-nav-text); }
.pt-profile { border-bottom: 1px solid #2C3552; padding-bottom: 20px; }
.pt-avatar { background: var(--ws-ink-2); color: #fff; box-shadow: 0 0 0 3px var(--ws-ink), 0 0 0 5px var(--ws-teal); }
.pt-name { color: #fff; font-weight: 700; }
.pt-no { background: var(--ws-ink-2); color: #C9CDD9; border: 0; border-radius: 6px; font-weight: 600; }
.pt-nav { padding: 12px 12px 24px; }
.pt-nav-head { color: var(--ws-nav-group); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; }
.pt-nav-head:hover, .pt-nav-group.is-active .pt-nav-head { color: #C9CDD9; }
.pt-nav-head:focus-visible { outline-color: var(--ws-teal-light); }
.pt-nav a { color: var(--ws-nav-text); font-size: 14.5px; font-weight: 500; padding: 9px 14px; border-radius: var(--ws-radius); gap: 14px; }
.pt-nav a .ic { color: var(--ws-nav-text); width: 20px; height: 20px; }
.pt-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.pt-nav a:hover .ic { color: #fff; }
.pt-nav a.active { background: var(--ws-ink-2); color: #fff; font-weight: 600; }
.pt-nav a.active::before { display: none; }
.pt-nav a.active .ic { color: #fff; }
.pt-top { background: #fff; border-bottom: 1px solid var(--ws-border-soft); padding-left: 40px; padding-right: 40px; backdrop-filter: none; }
.pt-title { color: var(--ws-ink); font-weight: 700; border-left-color: var(--ws-border); }
.pt-account summary { background: #fff; border: 1px solid var(--ws-border); }
.pt-account[open] summary { background: var(--ws-chip); }
.pt-mini-avatar { background: var(--ws-ink); color: #fff; }
.pt-menu { border-radius: var(--ws-radius-lg); border-color: var(--ws-border); }
.pt-strip { background: #fff; border-bottom: 1px solid var(--ws-border-soft); padding-left: 40px; padding-right: 40px; }
.pt-content { padding: 32px 40px 56px; }
.pt-intro h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--ws-ink); }
.pt-intro p { color: var(--ws-text-2); font-size: 14.5px; }
.pt-service-tile { border: 1px solid var(--ws-border); border-radius: var(--ws-radius-lg); }
.pt-service-tile:hover { border-color: var(--ws-teal); box-shadow: none; }
.pt-service-tile.is-picked { border-color: var(--ws-teal); box-shadow: inset 0 0 0 1px var(--ws-teal); }
.pt-service-tile .ico { background: var(--ws-teal-soft) !important; color: var(--ws-teal) !important; }
.pt-cert { border: 1px solid var(--ws-border); border-top: 3px solid var(--ws-teal); }
.pt-cert .badge-ico { background: var(--ws-teal-soft); color: var(--ws-teal); }
.pt-tile { border: 1px solid var(--ws-border); }
.pt-tile.green .v, .pt-ok { color: var(--ws-green-text); }
.pt-steps li.done .dot { background: var(--ws-teal); border-color: var(--ws-teal); }
.hp-msg.staff { background: var(--ws-teal-soft); border-color: #BFDFDE; }
.hp-attach, .hd-attach { color: var(--ws-teal); border-color: var(--ws-border); }
.hp-ticket:hover, .hd-row:hover { background: #FAFBFC; }
.pt-tabbar a.active { color: var(--ws-teal); }
@media (max-width: 900px) {
  .pt-top { padding-left: 12px; padding-right: 12px; }
  .pt-strip { padding-left: 14px; padding-right: 14px; }
  .pt-content { padding: 20px 12px calc(92px + env(safe-area-inset-bottom, 0px)); }
  .pt-intro h1 { font-size: 24px; }
}

/* ---------------------------------------------------------------- sign-in / forgot / reset pages */
body.portal-login { background: var(--ws-chip); background-image: none; }
.lg-card { border: 1px solid var(--ws-border); border-radius: 16px; box-shadow: 0 24px 60px -30px rgba(27, 36, 63, .35); }
.lg-aside { background: var(--ws-ink); border-right: 0; color: #C9CDD9; }
.lg-logo { background: #fff; padding: 6px 14px; border-radius: 10px; height: 60px; width: auto; max-width: 80%; box-sizing: border-box; }
.lg-eyebrow { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--ws-teal-light); }
.lg-aside h1 { color: #fff; font-weight: 700; letter-spacing: -.02em; }
.lg-aside p.lead { color: var(--ws-nav-text); }
.lg-points li { color: #C9CDD9; }
.lg-points strong { color: #fff; }
.lg-points .ico { background: var(--ws-ink-2); border: 0; color: var(--ws-teal-light); }
.lg-aside .lg-foot { color: var(--ws-nav-group); }
.lg-main h2 { font-weight: 700; color: var(--ws-ink); letter-spacing: -.01em; }
.lg-main .sub { color: var(--ws-text-2); }
.lg-help-link, .lg-reveal { color: var(--ws-teal); }
.lg-reveal:hover { background: var(--ws-teal-soft); color: var(--ws-teal-h); }
.lg-help { background: var(--ws-chip); border-color: var(--ws-border); }
.lg-opt { border: 1px solid var(--ws-border); border-radius: var(--ws-radius); }
.lg-opt:has(input:checked) { border-color: var(--ws-teal); box-shadow: inset 0 0 0 1px var(--ws-teal); background: var(--ws-teal-soft); }
.lg-opt:has(input:checked) .ico { background: #fff; color: var(--ws-teal); border-color: #BFDFDE; }
.lg-logo-sm { background: transparent; padding: 0; }

/* ---------------------------------------------------------------- public registration form */
header.top { background: var(--ws-ink); border-bottom: 0; box-shadow: none; padding: 26px 0 30px; }
header.top::after { display: none; }
header.top .brand-mark { background: #fff; border-radius: 10px; padding: 7px 14px; }
header.top .logo-row img { height: 40px; }
header.top .eyebrow { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 600; color: var(--ws-teal-light); }
header.top h1 { color: #fff; font-weight: 700; letter-spacing: -.02em; }
header.top p { color: #C9CDD9; }
header.top .btn-outline { background: transparent; color: #fff; border-color: #4A5372; }
header.top .btn-outline:hover { background: rgba(255, 255, 255, .08); color: #fff; border-color: #6A7392; }
.progress-track { border-radius: var(--ws-radius-lg); }
.success-panel { border: 1px solid var(--ws-border); border-top: 3px solid var(--ws-teal); }
.success-panel .ring { background: var(--ws-teal); color: #fff; }
.success-panel .next-steps b { background: var(--ws-teal-soft); color: var(--ws-teal); }
.success-panel .student-number { border: 1px dashed var(--ws-teal); background: var(--ws-teal-soft); color: var(--ws-ink); }
.pay-logo { border-radius: 6px; }

/* welcome screen shown before the form */
.preamble { background: var(--ws-ink); background-image: none; color: #fff; }
.preamble-topbar .logo-chip { border: 0; box-shadow: none; border-radius: 10px; }
.preamble-card { background: #fff; border: 0; border-radius: 16px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .5); }
.preamble-card::before { background: var(--ws-teal); height: 4px; }
.preamble-card .eyebrow { text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--ws-teal); font-weight: 600; }
.preamble-card h1 { color: var(--ws-ink); font-weight: 700; }
.preamble-card p, .preamble-card ul { color: var(--ws-text-2); }
.preamble-card ul { list-style-type: disc; }
.preamble-card .meta-row span { background: var(--ws-chip); border: 0; color: var(--ws-ink); border-radius: 6px; }
#startRegistrationBtn { background: var(--ws-teal); border-radius: var(--ws-radius); box-shadow: none; }
#startRegistrationBtn:hover { background: var(--ws-teal-h); transform: none; box-shadow: none; }
.preamble-login-link a { color: var(--ws-teal); }
.preamble-card .timing { color: var(--ws-text-2); }
.modal-card, .ncx-box { border-radius: var(--ws-radius-lg); }

/* ---------------------------------------------------------------- dialogs, toasts, bell (their CSS is inline, so `body` wins the tie) */
body .ncx-box { border: 1px solid var(--ws-border); }
body .ncx-box h2 { color: var(--ws-ink); font-weight: 700; }
body .ncx-pop-ico, body .ncx-pop-ico.tone-success { background: var(--ws-teal-soft); color: var(--ws-teal); }
body .ncx-pop-ico.tone-danger, body .ncx-pop-ico.tone-error { background: var(--ws-red-soft); color: var(--ws-red); }
body .ncx-pop-ico.tone-warn { background: var(--ws-amber-soft); color: var(--ws-amber-text); }
body .ncx-pop-timer i { background: var(--ws-teal); }
body .ncx-spin { border-top-color: var(--ws-teal); }
body .ncx-box-danger { border-top-color: var(--ws-red); }
body .ncx-dialog .ncx-btn { border-radius: var(--ws-radius); font-weight: 600; }
body .ncx-dialog .ncx-btn.ncx-btn-primary { background: var(--ws-teal); border-color: var(--ws-teal); color: #fff; }
body .ncx-dialog .ncx-btn.ncx-btn-primary:hover { background: var(--ws-teal-h); border-color: var(--ws-teal-h); }
body .ncx-dialog .ncx-btn.ncx-btn-danger { background: var(--ws-red); border-color: var(--ws-red); color: #fff; }
body .ncx-dialog .ncx-btn.ncx-btn-danger:hover { background: var(--ws-red-h); border-color: var(--ws-red-h); }
body .ncx-dialog .ncx-btn:not(.ncx-btn-primary):not(.ncx-btn-danger) { background: #fff; color: var(--ws-ink); border-color: var(--ws-border); }
body .ncx-dialog .ncx-btn:not(.ncx-btn-primary):not(.ncx-btn-danger):hover { background: var(--ws-chip); color: var(--ws-ink); border-color: var(--ws-border); }
body .update-banner, .update-banner { background: var(--ws-ink); }
.update-banner [data-update-refresh] { background: var(--ws-teal); }

body .nb-btn { border-color: var(--ws-border); border-radius: var(--ws-radius); color: var(--ws-text-2); }
body .nb-btn:hover { background: var(--ws-chip); color: var(--ws-ink); }
body .nb-btn[aria-expanded="true"] { background: var(--ws-chip); color: var(--ws-ink); border-color: var(--ws-border); }
body .nb-panel { border: 1px solid var(--ws-border); border-radius: var(--ws-radius-lg); }
body .nb-link { color: var(--ws-teal); }
body .nb-tab { background: var(--ws-chip); border-radius: 6px; color: var(--ws-text-2); }
body .nb-tab[aria-pressed="true"] { background: var(--ws-ink); color: #fff; }
body .nb-item.unread { background: #F4FAFA; }
body .nb-item.unread:hover { background: #E9F4F4; }
body .nb-item.unread .nb-time { color: var(--ws-teal); }
body .nb-dot { background: var(--ws-teal); }
body .nb-k-registration { background: var(--ws-teal-soft); color: var(--ws-teal); }
body .nb-k-payment { background: var(--ws-green-soft); color: var(--ws-green-text); }
body .nb-k-support { background: var(--ws-amber-soft); color: var(--ws-amber-text); }
body .nb-k-results { background: #E8EDFB; color: var(--ws-blue); }

/* reports page — its colour variables are declared inline, so raise specificity */
body .rpt { --rpt-primary: #05807F; --rpt-sky: #7FC4C3; --rpt-green: #1B243F; --rpt-pink: #FFAC00; --rpt-tint: #E5F2F2; --rpt-ink: #1B243F; --rpt-line: #EFF1F3; --rpt-shadow: none; }
body .rpt .rpt-c-blue { --c: #05807F; } body .rpt .rpt-c-green { --c: #1B243F; } body .rpt .rpt-c-sky { --c: #7FC4C3; } body .rpt .rpt-c-pink { --c: #FFAC00; }

@media print {
  .sb-search, .sb-foot { display: none !important; }
  .admin-topbar, .admin-sidebar { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}