/* ============================================================
   DMCRPulse+ — Shared Design System
   Imported by ALL pages: Dashboard, Quick Links, Announcement,
   Calendar, Forms, Directory, Admin, Profile
   ============================================================ */

:root {
  --sb-expanded:  220px;
  --sb-collapsed: 56px;
  --sb-w:         var(--sb-expanded);
  --header-h:     62px;

  --navy-900: #06152b;
  --navy-800: #0a1f3d;
  --navy-700: #0d2d55;
  --navy-600: #1a3e6e;
  --navy-500: #2a5080;
  --navy-text:   #c8d8ec;
  --navy-muted:  #7a9cbf;
  --navy-border: rgba(255,255,255,0.08);

  --accent:       #3b8fe8;
  --accent-dark:  #1f6bc0;
  --accent-light: #e8f2fd;
  --orange:       #f47b20;
  --orange-light: #fef0e4;
  --green:        #1d9e75;
  --green-light:  #e6faf0;
  --purple:       #7b5ea7;
  --red:          #d14b4b;

  --bg:      #f0f2f5;
  --surface: #ffffff;
  --t1:      #0d0d0d;
  --t2:      #0d0d0d;
  --t3:      #333333;
  --border:  #e2e8f0;
  --hover:   #f1f5f9;

  --r1: 4px; --r2: 8px; --r3: 12px; --r4: 16px; --r5: 20px; --rpill: 999px;
  --sh1: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh2: 0 4px 16px rgba(10,34,68,.10),0 1px 4px rgba(10,34,68,.06);
  --sh3: 0 12px 40px rgba(10,34,68,.18),0 2px 8px rgba(10,34,68,.08);
  --trans: .18s ease;
}

/* ── Reset ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--t1); font-size: 14px;
  line-height: 1.5; -webkit-font-smoothing: antialiased;
  display: flex; overflow: hidden;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; }
ul, ol { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; display: block; }
input, textarea, select { font-family: inherit; }
h1, h2, h3, h4 { margin: 0; }
.ti {
  display: inline-block;
  flex-shrink: 0;
  line-height: 1;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  width: var(--sb-w); flex-shrink: 0;
  background: var(--navy-800);
  height: 100vh; position: fixed; top: 0; left: 0;
  display: flex; flex-direction: column;
  z-index: 300;
  transition: width var(--trans), transform var(--trans);
  overflow: hidden; will-change: width;
}
body.sb-collapsed .sidebar { width: var(--sb-collapsed); }

.sb-brand {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 14px 8px; flex-shrink: 0;
  border-bottom: 1px solid var(--navy-border); overflow: hidden;
}
.sb-logo {
  width: 34px; height: 34px; min-width: 34px;
  background: var(--accent); border-radius: var(--r2);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff;
  letter-spacing: -.5px; flex-shrink: 0;
}
.sb-brand-text { overflow: hidden; min-width: 0; text-align: center; }
.sb-appname { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: -.3px; line-height: 1.1; white-space: nowrap; }
.sb-appname em { color: var(--accent); font-style: normal; }
.sb-tagline { font-size: 9.5px; color: var(--navy-muted); white-space: nowrap; margin-top: 1px; text-align: center; }
body.sb-collapsed .sb-brand-text { display: none; }

.sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px; scrollbar-width: none; }
.sb-nav::-webkit-scrollbar { display: none; }

.sb-section-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy-muted); padding: 10px 8px 4px; white-space: nowrap; overflow: hidden;
}
body.sb-collapsed .sb-section-label { opacity: 0; height: 0; padding: 0; margin: 0; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r2);
  color: var(--navy-text); font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap; overflow: hidden;
  transition: background var(--trans), color var(--trans);
  margin-bottom: 1px; position: relative;
}
.nav-item i {
  font-size: 21px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  color: #ffffff;
  opacity: .98;
  text-shadow: 0 0 12px rgba(59,143,232,.42);
}
.nav-item .nav-label { overflow: hidden; white-space: nowrap; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active { background: var(--accent); color: #fff; font-weight: 600; }
.nav-item .nav-badge {
  margin-left: auto; min-width: 18px; height: 18px;
  background: var(--orange); border-radius: var(--rpill);
  font-size: 10px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center; padding: 0 4px; flex-shrink: 0;
}
body.sb-collapsed .nav-item .nav-label,
body.sb-collapsed .nav-item .nav-badge { display: none; }
body.sb-collapsed .nav-item { justify-content: center; padding: 11px 0; color: #c8d8ec; }
body.sb-collapsed .nav-item i { width: auto; font-size: 23px; }

body.sb-collapsed .nav-item[title]:hover::after {
  content: attr(title);
  position: absolute; left: calc(var(--sb-collapsed) + 6px); top: 50%;
  transform: translateY(-50%);
  background: var(--navy-700); color: #fff;
  font-size: 12px; font-weight: 500;
  padding: 5px 10px; border-radius: var(--r2);
  white-space: nowrap; pointer-events: none;
  z-index: 400; box-shadow: var(--sh2);
}

.sb-quote {
  margin: 8px; border-radius: var(--r3);
  background: rgba(255,255,255,.05); border: 1px solid var(--navy-border);
  padding: 12px; flex-shrink: 0; overflow: hidden;
  transition: opacity var(--trans);
}
body.sb-collapsed .sb-quote { opacity: 0; height: 0; padding: 0; margin: 0; border: none; }

/* Sidebar dedicated collapse button */
.sb-collapse-btn {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 8px 12px; border-top: 1px solid var(--navy-border); flex-shrink: 0;
}
.sb-collapse-btn button {
  width: 28px; height: 28px; border-radius: var(--r2);
  background: rgba(255,255,255,.06); color: var(--navy-muted);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  transition: background var(--trans), color var(--trans);
}
.sb-collapse-btn button:hover { background: rgba(255,255,255,.14); color: #fff; }
body.sb-collapsed .sb-collapse-btn { justify-content: center; padding: 8px 0; }
.sb-quote-label { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-muted); margin-bottom: 7px; }
.sb-quote-mark { font-size: 28px; color: var(--accent); line-height: 1; font-family: Georgia, serif; }
.sb-quote-text { font-size: 11.5px; color: var(--navy-text); line-height: 1.55; font-style: italic; }
.sb-quote-author { font-size: 11px; color: var(--navy-muted); margin-top: 5px; }

/* ── Page shell ──────────────────────────────────────────── */
.page-shell {
  margin-left: var(--sb-w); flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  height: 100vh; overflow: hidden;
  transition: margin-left var(--trans);
}
body.sb-collapsed .page-shell { margin-left: var(--sb-collapsed); }

/* ── Topbar ──────────────────────────────────────────────── */
.topbar {
  height: var(--header-h); background: var(--surface);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 100;
}
.tb-toggle {
  width: 36px; height: 36px; border-radius: var(--r2);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 22px; flex-shrink: 0;
  border: 1.5px solid var(--border); background: var(--bg);
  transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.tb-toggle:hover { background: var(--border); color: var(--t1); }
.tb-greeting {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  gap: 0; padding: 0; margin: 0 4px;
}
.tb-greeting h2 {
  font-size: 15px; font-weight: 700; color: var(--t1);
  line-height: 1.3; margin: 2px 0 0 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-greeting p {
  font-size: 11.5px; color: var(--t2);
  line-height: 1.3; margin: 2px 0 0 0;
}
/* Theme toggle (left of user avatar) */
.tb-theme-btn {
  width: 34px; height: 34px; border-radius: var(--r2);
  background: var(--bg); color: var(--t1);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
  border: 1.5px solid var(--border);
  transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.tb-theme-btn:hover { background: var(--border); color: var(--t1); }

/* Quick nav (SOPs / RACIs / Therapeutics) */
.tb-quick-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.tb-qn-btn {
  height: 28px; padding: 0 10px; border-radius: var(--rpill);
  background: var(--bg); color: var(--t1);
  border: 1.5px solid var(--border);
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  display: flex; align-items: center; gap: 5px;
  transition: background var(--trans), color var(--trans), border-color var(--trans); flex-shrink: 0;
  text-decoration: none;
}
.tb-qn-btn:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
@media(max-width:1100px) {
  .tb-quick-nav .tb-qn-btn span { display: none; }
  .tb-qn-btn { padding: 0 8px; min-width: 30px; justify-content: center; }
}
/* At 900px: hide quick-nav (sidebar is accessible via hamburger) */
@media(max-width:900px) {
  .tb-quick-nav { display: none; }
}

.tb-search { position: relative; flex-shrink: 0; width: clamp(200px, 28vw, 420px); }
.tb-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--t3); font-size: 15px; pointer-events: none; }
.tb-search input {
  width: 100%; height: 34px; border-radius: var(--rpill);
  border: 1.5px solid var(--border);
  background: var(--bg);
  padding: 0 12px 0 34px; font-size: 12.5px; color: var(--t1);
  transition: border-color var(--trans), box-shadow var(--trans);
}
.tb-search input::placeholder { color: var(--t3); }
.tb-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,143,232,.25); }

/* Search results dropdown */
.tb-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); border-radius: var(--r3);
  border: 1px solid var(--border); box-shadow: var(--sh3);
  z-index: 500; overflow: hidden; display: none; max-height: 380px; overflow-y: auto;
}
.tb-search-results.open { display: block; }
.tb-sr-section { padding: 4px 0; }
.tb-sr-section + .tb-sr-section { border-top: 1px solid var(--border); }
.tb-sr-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); padding: 8px 14px 4px; }
.tb-sr-item { display: flex; align-items: center; gap: 10px; padding: 7px 14px; cursor: pointer; transition: background var(--trans); }
.tb-sr-item:hover { background: var(--hover); }
.tb-sr-item-icon { width: 28px; height: 28px; border-radius: var(--r2); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; overflow: hidden; }
.tb-sr-item-text { font-size: 12.5px; font-weight: 500; color: var(--t1); }
.tb-sr-item-sub { font-size: 11px; color: var(--t3); }
.tb-sr-empty { padding: 16px; text-align: center; font-size: 12px; color: var(--t3); }

.tb-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.tb-icon-btn {
  position: relative; width: 34px; height: 34px; border-radius: var(--r2);
  background: var(--bg); color: var(--accent);
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.tb-icon-btn:hover { background: var(--border); color: var(--t1); border-color: var(--t3); }
.tb-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px; border-radius: var(--rpill);
  font-size: 9.5px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; border: 2px solid var(--surface);
}
.tb-user {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: var(--r2);
  cursor: pointer; margin-left: 4px;
  transition: background var(--trans); flex-shrink: 0;
}
.tb-user:hover { background: var(--hover); }
.tb-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border: 2px solid rgba(59,143,232,.3); overflow: hidden;
}
.tb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tb-uname { font-size: 12.5px; font-weight: 600; color: var(--t1); line-height: 1.2; }
.tb-urole { font-size: 11px; color: var(--t2); }

/* ── Main scroll area ────────────────────────────────────── */
.main-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }
.main-scroll::-webkit-scrollbar { width: 6px; }
.main-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ── Page view ───────────────────────────────────────────── */
.page-content { padding: 20px; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Page header ─────────────────────────────────────────── */
.page-hdr {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 0;
  margin-bottom: 20px;
}
.page-hdr h1 {
  font-size: 20px; font-weight: 800; color: var(--t1);
  letter-spacing: -.3px; line-height: 1.3;
  margin: 2px 0 0 0;
}
.page-hdr p {
  font-size: 13px; color: var(--t2);
  line-height: 1.3; margin: 2px 0 0 0;
}

/* ── Card ────────────────────────────────────────────────── */
.card { background: var(--surface); border-radius: var(--r3); box-shadow: var(--sh1); overflow: hidden; }
.card-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px 11px; border-bottom: 1px solid var(--border); gap: 8px;
}
.card-hd-title { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--t1); min-width: 0; }
.card-hd-title i { font-size: 16px; color: var(--accent); flex-shrink: 0; }
.card-hd-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-link { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; flex-shrink: 0; }
.card-link:hover { color: var(--accent-dark); }

/* ── Grid helpers ────────────────────────────────────────── */
.g3 { display: grid; grid-template-columns: repeat(3,1fr); column-gap: 16px; row-gap: 20px; align-items: start; }
.g2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; align-items: start; }
@media(max-width:1200px) { .g3 { grid-template-columns: repeat(2,1fr); } }
@media(max-width:780px)  { .g3, .g2 { grid-template-columns: 1fr; } }

/* ── Modal ───────────────────────────────────────────────── */
.modal-ov { display: none; position: fixed; inset: 0; background: rgba(6,21,43,.6); z-index: 600; align-items: center; justify-content: center; padding: 16px; }
.modal-ov.open { display: flex; }
.modal { background: var(--surface); border-radius: var(--r4); width: 100%; max-width: 900px; max-height: 90vh; overflow-y: auto; box-shadow: var(--sh3); }
.modal-hd { display: flex; align-items: center; justify-content: space-between; padding: 20px 26px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.modal-hd h3 { font-size: 18px; font-weight: 700; color: var(--t1); }
.modal-x { width: 32px; height: 32px; border-radius: var(--r2); background: var(--bg); color: var(--t2); font-size: 17px; display: flex; align-items: center; justify-content: center; transition: background var(--trans); }
.modal-x:hover { background: var(--border); }
.modal-bd { padding: 24px 28px 30px; font-size: 15px; line-height: 1.8; color: var(--t1); }
.modal-bd p { margin: 0 0 12px; }
.modal-bd strong { color: var(--t1); }
/* Rich-text bodies need their lists back. The global reset on line 58
   (ul, ol { list-style: none }) is right for nav and card lists, but this
   container renders admin-authored HTML from an editor whose toolbar has
   Bullet list and Numbered list buttons — without this, those buttons
   produce output that renders as plain unindented lines. */
.modal-bd ul { list-style: disc;    padding-left: 22px; margin: 0 0 12px; }
.modal-bd ol { list-style: decimal; padding-left: 22px; margin: 0 0 12px; }
.modal-bd li { margin: 0 0 4px; }

/* ── Mobile backdrop ─────────────────────────────────────── */
.sb-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 299; }

/* ── Responsive ──────────────────────────────────────────── */
/* 1200px: slightly compress greeting */
@media(max-width:1200px) {
  .tb-greeting h2 { font-size: 14px; }
  .tb-greeting p  { font-size: 11px; }
}
/* 900px: sidebar becomes mobile overlay, topbar compresses */
@media(max-width:900px) {
  :root { --sb-w: var(--sb-expanded); }
  body:not(.sb-mobile-open) .sidebar { transform: translateX(-100%); }
  body.sb-mobile-open .sidebar { transform: translateX(0); }
  body.sb-mobile-open .sb-backdrop { display: block; }
  .page-shell { margin-left: 0 !important; }
  .tb-greeting p, .tb-urole { display: none; }
  .tb-uname { font-size: 12px; }
  .tb-greeting h2 { font-size: 13.5px; }
  .tb-search { width: 160px; }
}
/* 720px: hide greeting text, keep avatar+icons */
@media(max-width:720px) {
  .tb-greeting { display: none; }
  .tb-search { width: 140px; }
  .topbar { gap: 8px; }
}
/* 540px: very compact */
@media(max-width:540px) {
  .topbar { padding: 0 10px; gap: 6px; }
  .tb-search { width: 110px; }
  .tb-search input { font-size: 11px; padding-left: 28px; }
  .tb-user .tb-uname { display: none; }
  .page-content { padding: 12px; }
}
/* 400px: minimal topbar */
@media(max-width:400px) {
  .tb-search { width: 90px; }
  .tb-actions .tb-icon-btn:last-child { display: none; }
}

/* ── Dark Mode ───────────────────────────────────────────── */
body.dark {
  --bg:           #091929;
  --surface:      #0d2040;
  --t1:           #ffffff;
  --t2:           #ffffff;
  --t3:           rgba(255,255,255,0.75);
  --border:       rgba(255,255,255,0.09);
  --hover:        rgba(255,255,255,0.04);
  --accent-light: rgba(59,143,232,0.15);
  --green-light:  rgba(29,158,117,0.15);
  --orange-light: rgba(244,123,32,0.15);
  color-scheme:   dark;
  /* Cascade white to all elements that inherit color */
  color: #ffffff;
}

/* Card border for visual separation in dark mode */
body.dark .card { border: 1px solid var(--border); box-shadow: 0 2px 12px rgba(0,0,0,.4); }

/* Dark mode topbar: dark navy, white icons */
body.dark .topbar { background: var(--navy-800); border-bottom-color: var(--navy-border); }
body.dark .tb-toggle { color: var(--navy-text); }
body.dark .tb-toggle:hover { background: rgba(255,255,255,.08); color: #fff; }
body.dark .tb-greeting h2 { color: #ffffff; }
body.dark .tb-greeting p  { color: #ffffff; }
body.dark .tb-theme-btn { background: rgba(255,255,255,.10); color: var(--navy-text); border-color: transparent; }
body.dark .tb-theme-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
body.dark .tb-qn-btn { background: rgba(255,255,255,.08); color: var(--navy-text); }
body.dark .tb-qn-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
body.dark .tb-icon-btn { background: rgba(255,255,255,.08); color: var(--navy-text); border-color: transparent; }
body.dark .tb-icon-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
body.dark .tb-toggle { background: rgba(255,255,255,.06); color: var(--navy-text); border-color: transparent; }
body.dark .tb-badge { border-color: var(--navy-800); }
body.dark .tb-user:hover { background: rgba(255,255,255,.07); }
body.dark .tb-uname { color: #ffffff; }
body.dark .tb-urole { color: #ffffff; }

/* Topbar search input */
body.dark .tb-search input {
  background: rgba(255,255,255,.08);
  color: var(--t1);
  border-color: rgba(255,255,255,.12);
}
body.dark .tb-search input::placeholder { color: var(--t3); }
body.dark .tb-search input:focus { border-color: var(--accent); background: rgba(255,255,255,.11); }

/* Generic form controls */
body.dark input[type="text"],
body.dark input[type="email"],
body.dark input[type="search"],
body.dark input[type="password"],
body.dark select,
body.dark textarea {
  /* background-COLOR, not the `background` shorthand.
     The shorthand resets background-image, -repeat and -position, and
     several selects in both apps draw their own dropdown chevron as a
     background-image with `appearance: none`. So in dark mode:
       - the portal's .ws-sort / .kpi-filter lost the chevron entirely,
         leaving a select with no affordance at all;
       - admin's .fg-select re-declared the image afterwards and got it
         back WITHOUT repeat/position, so it tiled across the control
         from the top-left corner.
     One cause, two symptoms. Only the colour was ever meant to change. */
  background-color: rgba(255,255,255,.07);
  color: var(--t1);
  border-color: var(--border);
}
body.dark input::placeholder,
body.dark textarea::placeholder { color: var(--t3); }
body.dark select option { background: #0d2040; color: var(--t1); }

/* Modal */
body.dark .modal { background: var(--surface); }
body.dark .modal-hd { background: var(--surface); border-bottom-color: var(--border); }
body.dark .modal-x { background: rgba(255,255,255,.07); color: var(--t2); }
body.dark .modal-x:hover { background: rgba(255,255,255,.12); }
body.dark .modal-ov { background: rgba(0,0,0,.65); }

/* Scrollbar */
body.dark .main-scroll::-webkit-scrollbar-thumb { background: #1e3a5f; }

/* ── Global text override — catch any hardcoded colors in page CSS files ── */
/* Light mode: all readable text → black */
body h1, body h2, body h3, body h4, body h5, body h6 { color: var(--t1); }
body p  { color: var(--t2); }
body .page-hdr h1  { color: var(--t1); }
body .page-hdr p   { color: var(--t2); }
body .card-hd-title span { color: var(--t1); }

/* Dark mode: all readable text → white */
body.dark h1, body.dark h2, body.dark h3,
body.dark h4, body.dark h5, body.dark h6 { color: #ffffff; }
body.dark p  { color: #ffffff; }
body.dark span { color: inherit; }
body.dark label { color: #ffffff; }
body.dark td, body.dark th { color: #ffffff; }
body.dark li { color: inherit; }
body.dark .page-hdr h1, body.dark .page-hdr p { color: #ffffff; }
body.dark .card-hd-title span { color: #ffffff; }
body.dark .card-hd-title i   { color: var(--accent); }
body.dark .card-link  { color: #ffffff; }
body.dark .page-hdr   { color: #ffffff; }

/* ══ Secondary Bar (Core Values + Timezone Clocks) ══════════ */
.subbar {
  background: var(--navy-800);
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--navy-border);
  position: relative;
  gap: 10px;
  overflow: hidden;
}

/* ── Left: Core Values ─────────────────────────────────────── */
.subbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  flex: 1;
}
.subbar-cv-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.subbar-cv-btns {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
  flex-shrink: 1;
}
.subbar-cv-btns::-webkit-scrollbar { display: none; }
.cv-pill {
  height: 25px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  background: transparent;
  color: rgba(200,216,236,.9);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  flex-shrink: 0;
  font-family: inherit;
}
.cv-pill:hover {
  background: rgba(59,143,232,.25);
  color: #ffffff;
  border-color: rgba(59,143,232,.65);
}

/* Core-value tooltip */
.cv-tooltip {
  position: fixed;
  background: #0d2d55;
  color: #e8eef6;
  font-size: 12px;
  font-weight: 400;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 28px rgba(0,0,0,.40);
  max-width: 270px;
  line-height: 1.5;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity .15s ease;
  white-space: normal;
}
.cv-tooltip::before {
  content: '';
  position: absolute;
  top: -6px; left: 18px;
  width: 10px; height: 10px;
  background: #0d2d55;
  border-left: 1px solid rgba(255,255,255,.12);
  border-top: 1px solid rgba(255,255,255,.12);
  transform: rotate(45deg);
}
.cv-tooltip.show { opacity: 1; }

/* ── Right: Timezone clocks ────────────────────────────────── */
.subbar-right {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.tz-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
  gap: 1px;
}
.tz-time {
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
  text-shadow: 0 0 18px rgba(59,143,232,.45);
}
.tz-label {
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7a9cbf;
  line-height: 1;
}
.tz-sep {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,.1);
  flex-shrink: 0;
}

/* ── Subbar responsive ─────────────────────────────────────── */
@media(max-width:1200px) {
  .tz-item { padding: 0 7px; }
  .tz-time { font-size: 15px; letter-spacing: .4px; }
  .tz-label { font-size: 9.5px; }
}
@media(max-width:1040px) {
  .subbar-right { display: none; }
}
@media(max-width:780px) {
  .subbar-cv-label { display: none; }
  .subbar { padding: 0 12px; }
}
@media(max-width:500px) {
  .subbar { min-height: auto; padding: 5px 12px; flex-wrap: wrap; }
  .subbar-cv-btns { flex-wrap: nowrap; }
  .cv-pill { font-size: 10.5px; height: 20px; padding: 0 10px; }
}

/* ── Sign In button (public index page) ─────────────────────── */
.tb-signin-btn {
  display: flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px;
  background: var(--accent); color: #fff;
  border-radius: var(--r2);
  font-size: 13px; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
  transition: background var(--trans), box-shadow var(--trans);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(59,143,232,.35);
}
.tb-signin-btn:hover { background: var(--accent-dark); box-shadow: 0 4px 14px rgba(59,143,232,.45); }
.tb-signin-btn i { font-size: 17px; }
@media(max-width:540px) { .tb-signin-btn span { display: none; } .tb-signin-btn { padding: 0 10px; } }

/* ── User Dropdown ─────────────────────────────────────────── */
.tb-user { position: relative; }

.tb-user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 264px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  box-shadow: var(--sh3);
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
}
.tb-user-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: all;
}
#tbChevron { display: inline-block; }
#tbChevron.rotated { transform: rotate(180deg); }

.tb-dd-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px;
}
.tb-dd-av {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
  border: 2px solid rgba(59,143,232,.3);
}
.tb-dd-info { min-width: 0; flex: 1; }
.tb-dd-name  { font-size: 13.5px; font-weight: 700; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-dd-email { font-size: 11.5px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.tb-dd-role  {
  display: inline-block; margin-top: 5px;
  padding: 2px 8px;
  background: var(--accent-light); color: var(--accent);
  border-radius: var(--rpill);
  font-size: 10.5px; font-weight: 700;
  text-transform: capitalize; letter-spacing: .04em;
}
.tb-dd-sep     { height: 1px; background: var(--border); }
.tb-dd-signout {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 12px 16px;
  font-size: 13px; font-weight: 500; color: var(--red);
  transition: background var(--trans);
  border-radius: 0 0 var(--r3) var(--r3);
}
.tb-dd-signout:hover { background: rgba(209,75,75,.07); }
.tb-dd-signout i { font-size: 16px; }

body.dark .tb-user-dropdown { background: var(--navy-700); border-color: var(--navy-border); }
body.dark .tb-dd-name        { color: #fff; }
body.dark .tb-dd-email       { color: var(--navy-text); }
body.dark .tb-dd-role        { background: rgba(59,143,232,.15); color: var(--accent); }
body.dark .tb-dd-sep         { background: var(--navy-border); }
body.dark .tb-dd-signout     { color: #ff6b6b; }
body.dark .tb-dd-signout:hover { background: rgba(209,75,75,.12); }