/* ============================================================================
   theme-mypso.css — the "MyPSO" look for the Training Division Portal.
   Measured from my.psoapps.com (see design/mypso-theme-spec.md). Activated by
   body.theme-mypso (light) / body.theme-mypso.dark (night). Loads AFTER
   styles.css so its rules win over the body.dark overrides at equal !important.
   Every colour lives in a --mp-* token; utilities below only map to tokens.
   ========================================================================== */

/* ── Open Sans (variable 300–800), self-hosted: CSP font-src 'self' ─────────── */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('fonts/OpenSans-Variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('fonts/OpenSans-Variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── Tokens ─────────────────────────────────────────────────────────────────── */
body.theme-mypso {
  /* surfaces + text (light) */
  --mp-bg: #EEF1F0;  --mp-fg: #1E2421;  --mp-fg-2: #2E3733;  --mp-fg-3: #465049;
  --mp-card: #FCFDFC;  --mp-popover: #FCFDFC;  --mp-surface-2: #F4F6F5;
  --mp-secondary: #E9EDEB;  --mp-muted: #E6EAE8;  --mp-muted-fg: #5B6761;  --mp-muted-fg-2: #7E8A84;
  --mp-border: #D6DCD9;  --mp-border-strong: #C9D1CD;  --mp-border-soft: #E3E8E5;
  --mp-input: #DEE3E0;  --mp-input-bg: #FCFDFC;
  /* brand green */
  --mp-primary: #28714C;  --mp-primary-hover: #215E3F;  --mp-primary-text: #28714C;  --mp-primary-text-hover: #1B4D33;
  --mp-primary-soft: rgba(40,113,76,.10);  --mp-primary-soft-2: rgba(40,113,76,.16);  --mp-primary-border: rgba(40,113,76,.30);
  --mp-accent: #46916C;  --mp-ring: #46916C;  --mp-selection: rgba(70,145,108,.30);
  /* chrome (identical in both modes) */
  --mp-chrome: #121C17;  --mp-panel: #213129;  --mp-chrome-line: rgba(255,255,255,.06);
  --mp-nav-fg: rgba(231,238,235,.85);  --mp-nav-hover-bg: rgba(86,179,134,.12);  --mp-nav-hover-fg: #6BC496;
  font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
  background-color: var(--mp-bg) !important;
  color: var(--mp-fg);
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
}
body.theme-mypso.dark {
  --mp-bg: #131614;  --mp-fg: #E9ECEB;  --mp-fg-2: #CBD3CF;  --mp-fg-3: #A9B3AE;
  --mp-card: #1E2421;  --mp-popover: #232926;  --mp-surface-2: #191E1C;
  --mp-secondary: #2A322E;  --mp-muted: #323936;  --mp-muted-fg: #98A49E;  --mp-muted-fg-2: #7E8A84;
  --mp-border: #2F3733;  --mp-border-strong: #343D38;  --mp-border-soft: #262D2A;
  --mp-input: #343D38;  --mp-input-bg: #131614;
  --mp-primary: #39AC73;  --mp-primary-hover: #2F8F60;  --mp-primary-text: #56B386;  --mp-primary-text-hover: #7ACCA3;
  --mp-primary-soft: rgba(57,172,115,.12);  --mp-primary-soft-2: rgba(57,172,115,.18);  --mp-primary-border: rgba(57,172,115,.35);
  --mp-accent: #56B386;  --mp-ring: #39AC73;  --mp-selection: rgba(86,179,134,.30);
  color-scheme: dark;
}
html body.theme-mypso ::selection { background-color: var(--mp-selection); color: var(--mp-fg); }

/* ── Neutral surfaces ───────────────────────────────────────────────────────── */
html body.theme-mypso .bg-white      { background-color: var(--mp-card) !important; }
html body.theme-mypso .bg-slate-50,
html body.theme-mypso .bg-slate-50\/60 { background-color: var(--mp-surface-2) !important; }
html body.theme-mypso .bg-slate-100,
html body.theme-mypso .bg-slate-100\/70 { background-color: var(--mp-secondary) !important; }
html body.theme-mypso .bg-slate-200  { background-color: var(--mp-muted) !important; }
html body.theme-mypso .bg-slate-300  { background-color: var(--mp-border-strong) !important; }
html body.theme-mypso .bg-slate-700  { background-color: #343D38 !important; }
html body.theme-mypso .bg-slate-800,
html body.theme-mypso .bg-slate-800\/60 { background-color: #1E2421 !important; }
html body.theme-mypso .bg-slate-900  { background-color: #121C17 !important; }
html body.theme-mypso .bg-slate-950  { background-color: #0E1210 !important; }
html body.theme-mypso .modal-box     { background-color: var(--mp-popover) !important; }
html body.theme-mypso .hover\:bg-slate-50:hover  { background-color: var(--mp-secondary) !important; }
html body.theme-mypso .hover\:bg-slate-100:hover,
html body.theme-mypso .hover\:bg-slate-100\/60:hover { background-color: var(--mp-muted) !important; }
html body.theme-mypso .hover\:bg-slate-200:hover { background-color: var(--mp-border) !important; }
html body.theme-mypso .hover\:bg-slate-700:hover,
html body.theme-mypso .hover\:bg-slate-700\/60:hover { background-color: #2A322E !important; }
html body.theme-mypso .hover\:bg-slate-800:hover,
html body.theme-mypso .hover\:bg-slate-800\/40:hover { background-color: #1A2420 !important; }

/* ── Neutral text ───────────────────────────────────────────────────────────── */
html body.theme-mypso .text-slate-900,
html body.theme-mypso .text-slate-800 { color: var(--mp-fg) !important; }
html body.theme-mypso .text-slate-700 { color: var(--mp-fg-2) !important; }
html body.theme-mypso .text-slate-600 { color: var(--mp-fg-3) !important; }
html body.theme-mypso .text-slate-500 { color: var(--mp-muted-fg) !important; }
html body.theme-mypso .text-slate-400 { color: var(--mp-muted-fg-2) !important; }
html body.theme-mypso .text-slate-300 { color: #C5CDC9 !important; }
html body.theme-mypso .text-slate-200,
html body.theme-mypso .text-slate-100 { color: #E3E7E5 !important; }
html body.theme-mypso .hover\:text-slate-900:hover,
html body.theme-mypso .hover\:text-slate-800:hover,
html body.theme-mypso .hover\:text-slate-700:hover { color: var(--mp-fg) !important; }
html body.theme-mypso .hover\:text-slate-600:hover { color: var(--mp-fg-2) !important; }
html body.theme-mypso .placeholder-slate-400::placeholder { color: var(--mp-muted-fg-2) !important; }

/* ── Neutral borders ────────────────────────────────────────────────────────── */
html body.theme-mypso .border-slate-100 { border-color: var(--mp-border-soft) !important; }
html body.theme-mypso .border-slate-200 { border-color: var(--mp-border) !important; }
html body.theme-mypso .border-slate-300 { border-color: var(--mp-border-strong) !important; }
html body.theme-mypso .border-slate-600,
html body.theme-mypso .border-slate-700,
html body.theme-mypso .border-slate-700\/50,
html body.theme-mypso .border-slate-700\/60 { border-color: #2F3733 !important; }
html body.theme-mypso .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--mp-border-soft) !important; }
html body.theme-mypso .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--mp-border) !important; }
html body.theme-mypso.dark [class*="divide-"] > * + * { border-color: var(--mp-border) !important; }
html body.theme-mypso .ring-slate-200 { --tw-ring-color: var(--mp-border) !important; }

/* ── Brand: indigo + emerald actions become the MyPSO green ─────────────────── */
html body.theme-mypso .bg-indigo-600,
html body.theme-mypso .bg-indigo-500,
html body.theme-mypso .bg-emerald-600,
html body.theme-mypso .bg-emerald-500 { background-color: var(--mp-primary) !important; color: #fff; }
html body.theme-mypso .hover\:bg-indigo-700:hover,
html body.theme-mypso .hover\:bg-indigo-600:hover,
html body.theme-mypso .hover\:bg-emerald-700:hover,
html body.theme-mypso .hover\:bg-emerald-600:hover { background-color: var(--mp-primary-hover) !important; }
html body.theme-mypso .bg-indigo-50,
html body.theme-mypso .bg-indigo-50\/60,
html body.theme-mypso .bg-emerald-50,
html body.theme-mypso .bg-indigo-500\/10 { background-color: var(--mp-primary-soft) !important; }
html body.theme-mypso .bg-indigo-100,
html body.theme-mypso .bg-emerald-100 { background-color: var(--mp-primary-soft-2) !important; }
html body.theme-mypso .hover\:bg-indigo-50:hover,
html body.theme-mypso .hover\:bg-indigo-50\/60:hover,
html body.theme-mypso .hover\:bg-emerald-50:hover,
html body.theme-mypso .hover\:bg-indigo-500\/10:hover { background-color: var(--mp-primary-soft) !important; }
html body.theme-mypso .hover\:bg-indigo-100:hover,
html body.theme-mypso .hover\:bg-emerald-100:hover { background-color: var(--mp-primary-soft-2) !important; }
html body.theme-mypso .text-indigo-500,
html body.theme-mypso .text-indigo-600,
html body.theme-mypso .text-indigo-700,
html body.theme-mypso .text-indigo-800,
html body.theme-mypso .text-emerald-600,
html body.theme-mypso .text-emerald-700,
html body.theme-mypso .text-emerald-800 { color: var(--mp-primary-text) !important; }
html body.theme-mypso .text-indigo-400,
html body.theme-mypso .text-indigo-300,
html body.theme-mypso .text-emerald-400 { color: #56B386 !important; }
html body.theme-mypso .hover\:text-indigo-700:hover,
html body.theme-mypso .hover\:text-indigo-800:hover,
html body.theme-mypso .hover\:text-indigo-600:hover,
html body.theme-mypso .hover\:text-emerald-800:hover,
html body.theme-mypso .hover\:text-emerald-700:hover { color: var(--mp-primary-text-hover) !important; }
html body.theme-mypso .hover\:text-indigo-200:hover { color: #A7F3D0 !important; }
html body.theme-mypso .border-indigo-200,
html body.theme-mypso .border-indigo-300,
html body.theme-mypso .border-emerald-200,
html body.theme-mypso .border-emerald-300 { border-color: var(--mp-primary-border) !important; }
html body.theme-mypso .border-indigo-500,
html body.theme-mypso .border-indigo-600,
html body.theme-mypso .border-emerald-500,
html body.theme-mypso .border-emerald-600,
html body.theme-mypso .hover\:border-indigo-500\/60:hover { border-color: var(--mp-primary) !important; }
html body.theme-mypso .from-indigo-600 { --tw-gradient-from: var(--mp-primary) !important; }
html body.theme-mypso .to-indigo-700,
html body.theme-mypso .to-indigo-600 { --tw-gradient-to: var(--mp-primary-hover) !important; }
html body.theme-mypso .from-indigo-50,
html body.theme-mypso .from-indigo-50\/40 { --tw-gradient-from: var(--mp-primary-soft) !important; }
html body.theme-mypso .peer:checked ~ .peer-checked\:bg-indigo-600,
html body.theme-mypso .peer:checked ~ .peer-checked\:bg-emerald-600 { background-color: var(--mp-primary) !important; }
html body.theme-mypso .peer:checked ~ .peer-checked\:border-indigo-600 { border-color: var(--mp-primary) !important; }
html body.theme-mypso .accent-indigo-600 { accent-color: var(--mp-primary) !important; }
/* focus rings: every input ring converges on the brand ring */
html body.theme-mypso .focus\:ring-indigo-500:focus,
html body.theme-mypso .focus\:ring-indigo-400:focus,
html body.theme-mypso .focus\:ring-emerald-500:focus,
html body.theme-mypso .focus\:ring-sky-400:focus,
html body.theme-mypso .focus\:ring-sky-500:focus,
html body.theme-mypso .focus\:ring-blue-400:focus,
html body.theme-mypso .focus\:ring-blue-500:focus { --tw-ring-color: var(--mp-ring) !important; }
html body.theme-mypso .focus\:border-indigo-500:focus,
html body.theme-mypso .focus\:border-blue-400:focus,
html body.theme-mypso .focus\:border-sky-400:focus { border-color: var(--mp-ring) !important; }
html body.theme-mypso .hover\:ring-indigo-400:hover { --tw-ring-color: var(--mp-ring) !important; }

/* ── Form controls ──────────────────────────────────────────────────────────── */
html body.theme-mypso input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
html body.theme-mypso textarea,
html body.theme-mypso select {
  background-color: var(--mp-input-bg) !important; border-color: var(--mp-input) !important; color: var(--mp-fg) !important;
}
html body.theme-mypso input::placeholder,
html body.theme-mypso textarea::placeholder { color: var(--mp-muted-fg-2) !important; }
html body.theme-mypso input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html body.theme-mypso textarea:focus,
html body.theme-mypso select:focus { border-color: var(--mp-ring) !important; }
html body.theme-mypso kbd { background: var(--mp-secondary); border-color: var(--mp-border-strong); color: var(--mp-fg-2); box-shadow: 0 1px 0 var(--mp-border-strong); }
html body.theme-mypso .toggle-knob { background-color: #fff !important; }

/* ── Chrome: sidebar (fixed dark green in both modes) ───────────────────────── */
html body.theme-mypso #sidebar { background-color: var(--mp-chrome) !important; }
html body.theme-mypso #sb-header { background-color: var(--mp-chrome) !important; border-color: var(--mp-chrome-line) !important; }
html body.theme-mypso #sb-toggle { background-color: var(--mp-chrome) !important; border-color: var(--mp-chrome-line) !important; color: rgba(255,255,255,.35); }
html body.theme-mypso #sb-toggle:hover { color: #fff; }
html body.theme-mypso #sb-header-text p:nth-child(2) { color: #6BC496 !important; }   /* "Command Portal" amber → green */
html body.theme-mypso #sb-header-text p:nth-child(3) { color: rgba(255,255,255,.45) !important; }
html body.theme-mypso #sidebar p.uppercase { color: rgba(255,255,255,.38) !important; font-size: 10px; letter-spacing: .16em; }
html body.theme-mypso #sidebar .nav-item {
  color: var(--mp-nav-fg) !important; border-left-width: 0; margin: 1px 10px; padding-left: 10px !important; padding-right: 10px !important;
  border-radius: 6px; transition: background-color .2s ease-out, color .2s ease-out, transform .2s ease-out;
}
html body.theme-mypso #sidebar .nav-item span.text-sm { font-size: 13px; font-weight: 500; }
html body.theme-mypso #sidebar .nav-item:hover { background-color: var(--mp-nav-hover-bg) !important; color: var(--mp-nav-hover-fg) !important; transform: translateX(2px); }
html body.theme-mypso #sidebar .nav-item.nav-active { background-color: rgba(255,255,255,.12) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(0,0,0,.05); border-left-color: transparent !important; }
html body.theme-mypso #sidebar.sb-collapsed .nav-item { margin: 1px 8px; padding-left: 0 !important; padding-right: 0 !important; }
html body.theme-mypso #sidebar.sb-collapsed .nav-item:hover { transform: none; }
html body.theme-mypso #sb-footer { border-color: var(--mp-chrome-line) !important; }
html body.theme-mypso #sb-footer .text-slate-400,
html body.theme-mypso #sb-footer .text-slate-500 { color: rgba(255,255,255,.45) !important; }
html body.theme-mypso #sb-footer .hover\:text-slate-300:hover { color: #fff !important; }
html body.theme-mypso #sb-footer .hover\:bg-slate-800:hover { background-color: rgba(255,255,255,.08) !important; }
html body.theme-mypso #auth-avatar,
html body.theme-mypso #topbar-avatar-initials { background-color: rgba(6,78,59,.6) !important; }
html body.theme-mypso #auth-initials,
html body.theme-mypso #topbar-initials-text { color: #A7F3D0 !important; }
html body.theme-mypso #sb-footer-user button:hover { --tw-ring-color: var(--mp-accent) !important; }
html body.theme-mypso #sidebar .bg-cyan-500 { background-color: var(--mp-primary) !important; }   /* unread bubbles on the rail */

/* ── Chrome: top bar (fixed dark green, MyPSO shadow) ───────────────────────── */
html body.theme-mypso #topbar {
  background-color: var(--mp-chrome) !important; border-bottom: 0 !important;
  box-shadow: 0 10px 28px -4px rgba(0,0,0,.45), 0 3px 8px rgba(0,0,0,.3); color-scheme: dark;
}
html body.theme-mypso #page-title { color: #fff !important; letter-spacing: -0.01em; }
html body.theme-mypso #page-subtitle { color: rgba(255,255,255,.5) !important; }
html body.theme-mypso #sync-label { color: rgba(255,255,255,.45) !important; }
html body.theme-mypso #topbar > div > div > button,
html body.theme-mypso #notif-btn,
html body.theme-mypso #mobile-actions-btn { color: rgba(255,255,255,.7) !important; }
html body.theme-mypso #topbar > div > div > button:hover,
html body.theme-mypso #notif-btn:hover,
html body.theme-mypso #mobile-actions-btn:hover { color: #fff !important; background-color: rgba(255,255,255,.10) !important; }
html body.theme-mypso #global-search-wrap > div > svg { color: rgba(255,255,255,.5) !important; }
html body.theme-mypso #global-search-input {
  background-color: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.20) !important; color: #fff !important; border-radius: 6px;
}
html body.theme-mypso #global-search-input::placeholder { color: rgba(255,255,255,.5) !important; }
html body.theme-mypso #global-search-input:focus { background-color: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.35) !important; --tw-ring-color: rgba(86,179,134,.5) !important; }
html body.theme-mypso #btn-email,
html body.theme-mypso #btn-export { background-color: rgba(255,255,255,.05) !important; color: rgba(255,255,255,.85) !important; border: 1px solid rgba(255,255,255,.12); }
html body.theme-mypso #btn-email:hover,
html body.theme-mypso #btn-export:hover { background-color: rgba(255,255,255,.12) !important; color: #fff !important; }
html body.theme-mypso #topbar-profile-btn:hover { --tw-ring-color: var(--mp-accent) !important; }
/* HUD clock → MyPSO clock block (white/5 pill, plain type) */
html body.theme-mypso #pasco-clock { background: rgba(255,255,255,.05) !important; border-color: transparent !important; box-shadow: none !important; border-radius: 12px; }
html body.theme-mypso #pasco-clock > span:first-child { background-color: var(--mp-accent) !important; box-shadow: none !important; animation: none !important; }
html body.theme-mypso #clock-time { color: #fff !important; text-shadow: none !important; font-family: inherit !important; font-weight: 600; letter-spacing: 0; }
html body.theme-mypso #clock-ampm { color: rgba(255,255,255,.7) !important; font-family: inherit !important; }
html body.theme-mypso #clock-date { color: rgba(255,255,255,.5) !important; font-family: inherit !important; text-transform: uppercase; letter-spacing: .04em; }
html body.theme-mypso #pasco-clock span[style*="color:#22d3ee"],
html body.theme-mypso #pasco-clock span[style*="color:#475569"] { color: rgba(255,255,255,.5) !important; }

/* ── Content typography accents ─────────────────────────────────────────────── */
html body.theme-mypso h1, html body.theme-mypso h2 { letter-spacing: -0.02em; }
html body.theme-mypso .tracking-widest { letter-spacing: .18em; }
html body.theme-mypso .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
html body.theme-mypso.dark .shadow-sm,
html body.theme-mypso.dark .shadow,
html body.theme-mypso.dark .shadow-md { box-shadow: none; }
html body.theme-mypso .mp-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--mp-muted-fg); }

/* ── Dark-mode custom components that styles.css paints in slate-blue ───────── */
html body.theme-mypso.dark #offline-banner { background-color: rgba(245,158,11,.10) !important; }
html body.theme-mypso.dark .pri-summary { background-color: var(--mp-card); border-color: var(--mp-border); }
html body.theme-mypso.dark .um-hier-node { background-color: var(--mp-card); border-color: var(--mp-border); }

/* ── Sidebar shell: 60px icon rail + 240px context panel (built by _mpBuild) ─── */
html body.theme-mypso #sidebar.mp-shell { display: flex; flex-direction: row; width: auto !important; min-width: 0 !important; overflow: visible; }
@media (min-width: 1024px) { html body.theme-mypso #sidebar.mp-shell + #main-wrapper { transition: margin-left .2s ease; } }
html body.theme-mypso #sidebar.mp-shell > #sb-header,
html body.theme-mypso #sidebar.mp-shell > #sb-toggle,
html body.theme-mypso #sidebar.mp-shell > nav,
html body.theme-mypso #sidebar.mp-shell p.sb-hide { display: none !important; }
.mp-rail { width: 60px; flex: 0 0 60px; background: #121C17; display: flex; flex-direction: column; align-items: center; padding: 8px 0 10px; height: 100%; position: relative; z-index: 2; }
.mp-rail-logo { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 6px; cursor: pointer; }
.mp-rail-logo img { width: 36px; height: 36px; object-fit: contain; }
.mp-rail-groups { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; width: 100%; overflow-y: auto; scrollbar-width: none; }
.mp-rail-groups::-webkit-scrollbar { display: none; }
.mp-rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; }
.mp-rail-btn { position: relative; width: 36px; height: 36px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); background: transparent; border: 0; cursor: pointer; transition: background-color .2s ease-out, color .2s ease-out; flex-shrink: 0; }
.mp-rail-btn:hover { color: rgba(255,255,255,.8); background: rgba(255,255,255,.05); }
.mp-rail-btn.active { background: rgba(255,255,255,.12); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.mp-rail-btn.hidden { display: none; }
.mp-rail-btn svg { width: 18px; height: 18px; }
.mp-rail-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; border-radius: 9999px; background: #39AC73; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; padding: 0 4px; text-align: center; box-shadow: 0 0 0 2px #121C17; }
.mp-rail-badge.hidden { display: none; }
.mp-rail-avatar { width: 28px; height: 28px; border-radius: 9999px; overflow: hidden; background: rgba(6,78,59,.6); color: #A7F3D0; font-size: 10px; font-weight: 600; text-transform: uppercase; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; transition: box-shadow .2s; }
.mp-rail-avatar:hover { box-shadow: 0 0 0 2px #56B386; }
.mp-rail-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mp-rail-avatar img.hidden { display: none; }
.mp-panel { width: 240px; flex: 0 0 240px; background: #213129; display: flex; flex-direction: column; height: 100%; overflow: hidden; box-shadow: 6px 0 28px -2px rgba(0,0,0,.4), 2px 0 8px -1px rgba(0,0,0,.3); transition: width .2s ease, flex-basis .2s ease; position: relative; z-index: 1; }
#sidebar.mp-panel-collapsed .mp-panel { width: 0; flex-basis: 0; box-shadow: none; }
.mp-panel-head { height: 47px; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 16px; width: 240px; }
.mp-panel-title { font-size: 15px; font-weight: 700; color: #EAF0ED; white-space: nowrap; }
.mp-panel-collapse { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.3); background: transparent; border: 0; cursor: pointer; }
.mp-panel-collapse:hover { color: rgba(255,255,255,.8); background: rgba(255,255,255,.06); }
.mp-panel-tools { display: flex; align-items: center; gap: 2px; }
.mp-panel-collapse.active { color: #6BC496; background: rgba(86,179,134,.14); }
.mp-panel-collapse svg { width: 14px; height: 14px; }
.mp-panel-body { flex: 1; overflow-y: auto; padding: 8px 0; width: 240px; }
.mp-group { display: none; }
.mp-group.active { display: block; }
html body.theme-mypso #sidebar.mp-shell #sb-admin-section { display: block; }
html body.theme-mypso #sidebar.mp-shell .nav-item { margin: 1px 10px; padding: 5px 10px !important; gap: 8px; border-radius: 6px; }
html body.theme-mypso #sidebar.mp-shell .nav-item > svg { width: 14px; height: 14px; color: inherit !important; opacity: .85; }
html body.theme-mypso #sidebar.mp-shell .nav-item > img { width: 16px; height: 16px; }
html body.theme-mypso #sidebar.mp-shell .nav-item span.text-sm,
html body.theme-mypso #sidebar.mp-shell .nav-item span.text-\[13px\] { font-size: 12.5px; font-weight: 500; }
html body.theme-mypso #sidebar.mp-shell .nav-item.pl-11 { margin-left: 30px; }
html body.theme-mypso #sidebar.mp-shell #sb-footer { width: 240px; flex-shrink: 0; padding: 12px 14px; }
html body.theme-mypso #sidebar.mp-shell #sb-footer-user { margin-bottom: 8px; }
html body.theme-mypso #sidebar.mp-shell #sb-footer-user > button:first-child { display: none; }   /* avatar lives on the rail */
html body.theme-mypso #sidebar.mp-shell #sb-footer-meta { flex-wrap: wrap; gap: 4px; }
/* top bar matches the rail: 48px, compact title */
html body.theme-mypso #topbar { height: 48px !important; }
html body.theme-mypso #page-title { font-size: 15px; }
html body.theme-mypso #page-subtitle { font-size: 11px; }
@media (max-width: 1023px) {
  #sidebar.mp-panel-collapsed .mp-panel { width: 240px; flex-basis: 240px; }   /* the mobile drawer always shows the panel */
  html body.theme-mypso #sidebar.mp-shell .mp-panel-tools { display: none; }
  html body.theme-mypso #topbar { height: auto !important; }
}

/* ── Sign-in screen: same dark-green chrome instead of the navy radial ──────── */
html body.theme-mypso .auth-screen { background: radial-gradient(ellipse at top, #1B2E24 0%, #121C17 55%, #0B110E 100%); }
html body.theme-mypso .auth-screen .text-amber-400 { color: #6BC496 !important; }
html body.theme-mypso #msft-signin-btn { border-radius: 8px; }

/* ── Audit follow-ups (design/theme-audit.js on the preview, 2026-09-17) ──────── */
/* utilities the first pass missed */
html body.theme-mypso .bg-slate-400 { background-color: var(--mp-muted-fg-2) !important; }
html body.theme-mypso .bg-slate-500 { background-color: var(--mp-muted-fg) !important; }
html body.theme-mypso .bg-slate-600 { background-color: var(--mp-fg-3) !important; }
html body.theme-mypso .border-slate-50 { border-color: var(--mp-border-soft) !important; }
html body.theme-mypso .bg-green-600 { background-color: var(--mp-primary) !important; }
html body.theme-mypso .hover\:bg-green-700:hover { background-color: var(--mp-primary-hover) !important; }
/* inline colours written by the day/night JS (`isDark ? … : …`) — matched on the style attribute.
   app.js writes `background:#…` (never background-color), so `color:#…` is unambiguous. */
html body.theme-mypso:not(.dark) [style*="color:#0f172a"], html body.theme-mypso:not(.dark) [style*="color:#1e293b"], html body.theme-mypso:not(.dark) [style*="color: #1e293b"] { color: var(--mp-fg) !important; }
html body.theme-mypso:not(.dark) [style*="color:#334155"] { color: var(--mp-fg-2) !important; }
html body.theme-mypso:not(.dark) [style*="color:#475569"] { color: var(--mp-fg-3) !important; }
html body.theme-mypso:not(.dark) [style*="color:#64748b"] { color: var(--mp-muted-fg) !important; }
html body.theme-mypso:not(.dark) [style*="color:#94a3b8"] { color: var(--mp-muted-fg-2) !important; }
html body.theme-mypso:not(.dark) [style*="background:#f8fafc"] { background-color: var(--mp-surface-2) !important; }
html body.theme-mypso:not(.dark) [style*="background:#f1f5f9"] { background-color: var(--mp-secondary) !important; }
html body.theme-mypso:not(.dark) [style*="background:#e2e8f0"] { background-color: var(--mp-muted) !important; }
html body.theme-mypso:not(.dark) [style*="background:#1e293b"] { background-color: #1E2421 !important; }
html body.theme-mypso:not(.dark) [style*="background:#0f172a"] { background-color: #131614 !important; }
html body.theme-mypso:not(.dark) [style*="background:#334155"] { background-color: #343D38 !important; }
html body.theme-mypso:not(.dark) [style*="solid #e2e8f0"], html body.theme-mypso:not(.dark) [style*="border-color:#e2e8f0"] { border-color: var(--mp-border) !important; }
html body.theme-mypso:not(.dark) [style*="solid #cbd5e1"], html body.theme-mypso:not(.dark) [style*="border-color:#cbd5e1"] { border-color: var(--mp-border-strong) !important; }
html body.theme-mypso.dark [style*="color:#e2e8f0"], html body.theme-mypso.dark [style*="color:#f1f5f9"], html body.theme-mypso.dark [style*="color:#f8fafc"] { color: var(--mp-fg) !important; }
html body.theme-mypso.dark [style*="color:#cbd5e1"] { color: var(--mp-fg-2) !important; }
html body.theme-mypso.dark [style*="color:#94a3b8"] { color: var(--mp-fg-3) !important; }
html body.theme-mypso.dark [style*="color:#64748b"] { color: var(--mp-muted-fg) !important; }
html body.theme-mypso.dark [style*="color:#475569"] { color: var(--mp-muted-fg-2) !important; }
html body.theme-mypso.dark [style*="background:#0f172a"] { background-color: var(--mp-bg) !important; }
html body.theme-mypso.dark [style*="background:#1e293b"] { background-color: var(--mp-card) !important; }
html body.theme-mypso.dark [style*="background:#162032"] { background-color: var(--mp-surface-2) !important; }
html body.theme-mypso.dark [style*="background:#253347"] { background-color: var(--mp-secondary) !important; }
html body.theme-mypso.dark [style*="background:#334155"] { background-color: var(--mp-muted) !important; }
html body.theme-mypso.dark [style*="solid #334155"], html body.theme-mypso.dark [style*="border-color:#334155"] { border-color: var(--mp-border) !important; }
html body.theme-mypso.dark [style*="solid #475569"], html body.theme-mypso.dark [style*="border-color:#475569"] { border-color: var(--mp-border-strong) !important; }
/* contrast: muted text meets AA on cards in both modes; rail badge uses dark-on-green */
html body.theme-mypso { --mp-muted-fg-2: #6A7671; }
html body.theme-mypso.dark { --mp-muted-fg-2: #8A968F; }
html body.theme-mypso #sb-footer .text-slate-400, html body.theme-mypso #sb-footer .text-slate-500,
html body.theme-mypso #sb-header-text p:nth-child(3) { color: rgba(255,255,255,.58) !important; }
.mp-rail-badge { background: #56B386; color: #0B1A12; }
/* Member Dashboard HUD: its own --mbd-* palette, retinted from cyan/navy to the MyPSO green chrome */
html body.theme-mypso .mbd-root {
  --mbd-bg: var(--mp-bg); --mbd-card-bg: rgba(30,36,33,0.96); --mbd-card-border: rgba(86,179,134,0.20); --mbd-scan: rgba(86,179,134,0.012);
  --mbd-accent: rgba(107,196,150,0.8); --mbd-faint: rgba(86,179,134,0.05); --mbd-cell-bg: rgba(86,179,134,0.03); --mbd-cell-bdr: rgba(86,179,134,0.09);
  --mbd-cell-div: rgba(86,179,134,0.08); --mbd-today-bdr: rgba(86,179,134,0.35); --mbd-today-bg: rgba(86,179,134,0.07); --mbd-today-date: #6BC496;
  --mbd-glow: 0 0 22px rgba(86,179,134,0.35), 0 0 8px rgba(86,179,134,0.18); --mbd-dot: rgba(107,196,150,0.85); --mbd-badge-bg: rgba(86,179,134,0.10);
  --mbd-badge-fg: rgba(107,196,150,0.85); --mbd-prog: rgba(86,179,134,0.6);
  font-family: inherit; font-variant-numeric: tabular-nums;
}
html body.theme-mypso:not(.dark) .mbd-root { --mbd-card-bg: rgba(33,49,41,0.97); --mbd-card-border: rgba(86,179,134,0.25); }
html body.theme-mypso .mbd-card { box-shadow: 0 6px 24px rgba(0,0,0,.35); }
html body.theme-mypso .mbd-pers-badge { background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.75) !important; }
html body.theme-mypso .mbd-twm-date { color: rgba(255,255,255,.9) !important; }
html body.theme-mypso .mbd-mywork-count { background: rgba(255,255,255,.08) !important; }
html body.theme-mypso .mbd-ol-empty { color: rgba(255,255,255,.7) !important; }

/* ── Audit pass 2 ─────────────────────────────────────────────────────────────── */
html body.theme-mypso:not(.dark) [style*="background:#94a3b8"], html body.theme-mypso:not(.dark) [style*="rgba(148,163,184"] { background-color: var(--mp-muted-fg-2) !important; }
html body.theme-mypso:not(.dark) [style*="background:#64748b"], html body.theme-mypso:not(.dark) [style*="rgba(100,116,139"] { background-color: var(--mp-muted-fg) !important; }
html body.theme-mypso.dark [style*="background:#94a3b8"], html body.theme-mypso.dark [style*="rgba(148,163,184"] { background-color: var(--mp-muted-fg-2) !important; }
html body.theme-mypso.dark [style*="background:#64748b"], html body.theme-mypso.dark [style*="rgba(100,116,139"] { background-color: var(--mp-border-strong) !important; }
html body.theme-mypso .priority-badge, html body.theme-mypso .mbd-twm-pill-label { color: #131614 !important; }   /* dark text on bright chips: de-blued, never lightened */
html body.theme-mypso .mbd-pers-label { color: rgba(255,255,255,.9) !important; }
html body.theme-mypso .ql-drag-indicator { background-color: var(--mp-accent) !important; }
html body.theme-mypso { --mp-muted-fg-2: #667370; }        /* "Weekend" labels on the tinted surface reach AA */
html body.theme-mypso.dark .bg-slate-500 { background-color: #4F5A55 !important; }   /* initials circles keep white text readable */

/* ── GENERATED from styles.css by design/gen-theme-twins.py — do not hand-edit ── */
html body.theme-mypso:not(.dark) ::-webkit-scrollbar-track { background-color: var(--mp-secondary) !important; }
html body.theme-mypso:not(.dark) ::-webkit-scrollbar-thumb { background-color: var(--mp-muted-fg-2) !important; }
html body.theme-mypso.dark { background-color: var(--mp-bg) !important; color: var(--mp-fg) !important; }
html body.theme-mypso.dark .bg-white { background-color: var(--mp-card) !important; }
html body.theme-mypso.dark .bg-slate-50 { background-color: var(--mp-surface-2) !important; }
html body.theme-mypso.dark .bg-slate-100 { background-color: var(--mp-secondary) !important; }
html body.theme-mypso.dark .bg-slate-200 { background-color: var(--mp-muted) !important; }
html body.theme-mypso.dark .text-slate-900 { color: var(--mp-fg) !important; }
html body.theme-mypso.dark .text-slate-800 { color: var(--mp-fg) !important; }
html body.theme-mypso.dark .text-slate-700 { color: var(--mp-fg-2) !important; }
html body.theme-mypso.dark .text-slate-600 { color: var(--mp-fg-3) !important; }
html body.theme-mypso.dark .text-slate-500 { color: var(--mp-muted-fg) !important; }
html body.theme-mypso.dark .border-slate-100 { border-color: var(--mp-border-soft) !important; }
html body.theme-mypso.dark .border-slate-200 { border-color: var(--mp-border) !important; }
html body.theme-mypso.dark .border-slate-300 { border-color: var(--mp-border-strong) !important; }
html body.theme-mypso.dark [class*="divide-"] > * + * { border-color: var(--mp-border) !important; }
html body.theme-mypso.dark .hover\:bg-slate-50:hover { background-color: var(--mp-secondary) !important; }
html body.theme-mypso.dark .hover\:bg-slate-100:hover { background-color: var(--mp-muted) !important; }
html body.theme-mypso.dark .hover\:bg-slate-200:hover { background-color: var(--mp-border-strong) !important; }
html body.theme-mypso.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), html body.theme-mypso.dark textarea, html body.theme-mypso.dark select { background-color: var(--mp-bg) !important; border-color: var(--mp-border-strong) !important; color: var(--mp-fg) !important; }
html body.theme-mypso.dark input::placeholder, html body.theme-mypso.dark textarea::placeholder { color: var(--mp-muted-fg) !important; }
html body.theme-mypso.dark .bg-slate-50\/60 { background-color: var(--mp-surface-2) !important; }
html body.theme-mypso.dark .bg-slate-300 { background-color: var(--mp-border-strong) !important; }
html body.theme-mypso.dark ::-webkit-scrollbar-track { background-color: var(--mp-bg) !important; }
html body.theme-mypso.dark ::-webkit-scrollbar-thumb { background-color: var(--mp-muted) !important; }
html body.theme-mypso.dark ::-webkit-scrollbar-thumb:hover { background-color: var(--mp-border-strong) !important; }
html body.theme-mypso:not(.dark) .cal-card { border-color: var(--mp-border) !important; }
html body.theme-mypso:not(.dark) .cal-day-hdr-row { background-color: var(--mp-surface-2) !important; }
html body.theme-mypso:not(.dark) .cal-wkday-hdr-txt { color: var(--mp-fg-3) !important; }
html body.theme-mypso:not(.dark) .cal-wknd-hdr-txt { color: var(--mp-muted-fg-2) !important; }
html body.theme-mypso:not(.dark) .cal-grid-body { border-left-color: var(--mp-border-soft) !important; border-top-color: var(--mp-border-soft) !important; }
html body.theme-mypso:not(.dark) .cal-cell-border { border-color: var(--mp-border-soft) !important; }
html body.theme-mypso:not(.dark) .cal-legend-strip { border-color: var(--mp-border) !important; }
html body.theme-mypso:not(.dark) .cal-legend-label { color: var(--mp-muted-fg-2) !important; }
html body.theme-mypso.dark .cal-card { background-color: var(--mp-card) !important; border-color: var(--mp-border) !important; }
html body.theme-mypso.dark .cal-day-hdr-row { background-color: var(--mp-bg) !important; }
html body.theme-mypso.dark .cal-wkday-hdr-txt { color: var(--mp-muted-fg) !important; }
html body.theme-mypso.dark .cal-day-num { color: var(--mp-fg-2) !important; }
html body.theme-mypso.dark .cal-legend-strip { background-color: var(--mp-card) !important; border-color: var(--mp-border) !important; }
html body.theme-mypso.dark .cal-legend-label { color: var(--mp-muted-fg-2) !important; }
html body.theme-mypso:not(.dark) .cal-pill-notes { color: var(--mp-fg-2) !important; }
html body.theme-mypso:not(.dark) .cal-filter-bar { background-color: var(--mp-secondary) !important; }
html body.theme-mypso.dark .cal-filter-bar { background-color: var(--mp-bg) !important; }
html body.theme-mypso:not(.dark) .ct-table-wrap { border-color: var(--mp-border) !important; }
html body.theme-mypso.dark .ct-table-wrap { border-color: var(--mp-border) !important; }
html body.theme-mypso:not(.dark) .ct-cat-hdr { background-color: #343D38 !important; border-color: #343D38 !important; }
html body.theme-mypso.dark .ct-cat-hdr { background-color: var(--mp-card) !important; border-color: var(--mp-border) !important; }
html body.theme-mypso:not(.dark) .ct-cert-hdr { color: var(--mp-muted-fg) !important; background-color: var(--mp-surface-2) !important; border-color: var(--mp-border) !important; }
html body.theme-mypso.dark .ct-cert-hdr { background-color: var(--mp-bg) !important; color: var(--mp-fg-3) !important; border-color: var(--mp-border) !important; }
html body.theme-mypso:not(.dark) .ct-corner, html body.theme-mypso:not(.dark) .ct-corner-name { background-color: var(--mp-surface-2) !important; border-color: var(--mp-border) !important; color: var(--mp-muted-fg) !important; }
html body.theme-mypso:not(.dark) .ct-corner { background-color: #343D38 !important; border-color: #343D38 !important; }
html body.theme-mypso.dark .ct-corner { background-color: var(--mp-card) !important; border-color: var(--mp-border) !important; }
html body.theme-mypso.dark .ct-corner-name { background-color: var(--mp-bg) !important; color: var(--mp-fg-3) !important; border-color: var(--mp-border) !important; }
html body.theme-mypso:not(.dark) .ct-name-cell { border-color: var(--mp-border) !important; }
html body.theme-mypso.dark .ct-name-cell { background-color: var(--mp-card) !important; border-color: var(--mp-border) !important; }
html body.theme-mypso:not(.dark) .ct-name { color: var(--mp-fg) !important; }
html body.theme-mypso.dark .ct-name { color: var(--mp-fg) !important; }
html body.theme-mypso:not(.dark) .ct-role { color: var(--mp-muted-fg-2) !important; }
html body.theme-mypso:not(.dark) .ct-cell { border-color: var(--mp-border) !important; }
html body.theme-mypso.dark .ct-cell { border-color: var(--mp-border) !important; }
html body.theme-mypso:not(.dark) .ct-panel-wrap { border-color: var(--mp-border) !important; }
html body.theme-mypso.dark .ct-panel-wrap { border-color: var(--mp-border) !important; }
html body.theme-mypso:not(.dark) tr.ct-member-row td { border-bottom-color: var(--mp-border-strong) !important; }
html body.theme-mypso.dark tr.ct-member-row td { border-bottom-color: var(--mp-border-strong) !important; }
html body.theme-mypso:not(.dark) .thumbtip { background-color: #1E2421 !important; }
html body.theme-mypso:not(.dark) .thumbtip::after { border-top-color: #2F3733 !important; }
html body.theme-mypso:not(.dark) .inv-wcard { border-color: var(--mp-border) !important; }
html body.theme-mypso.dark .inv-wcard { color: var(--mp-fg) !important; }
html body.theme-mypso.dark .inv-wcard .text-slate-900 { color: var(--mp-fg) !important; }
html body.theme-mypso.dark .inv-wcard .text-slate-500 { color: var(--mp-fg-3) !important; }
html body.theme-mypso.dark .inv-wcard .text-slate-400 { color: var(--mp-fg-3) !important; }
html body.theme-mypso.dark .inv-wcard input[type="text"], html body.theme-mypso.dark .inv-wcard input[type="number"], html body.theme-mypso.dark .inv-wcard input[type="date"], html body.theme-mypso.dark .inv-wcard select, html body.theme-mypso.dark .inv-wcard textarea { background-color: var(--mp-bg) !important; border-color: var(--mp-border) !important; color: var(--mp-fg) !important; }
html body.theme-mypso:not(.dark) .lp-rte-area h2, html body.theme-mypso:not(.dark) #lp-view-outline h2, html body.theme-mypso:not(.dark) .lp-render h2 { color: var(--mp-fg) !important; }
html body.theme-mypso:not(.dark) .lp-rte-area h3, html body.theme-mypso:not(.dark) #lp-view-outline h3, html body.theme-mypso:not(.dark) .lp-render h3 { color: var(--mp-fg) !important; }
html body.theme-mypso:not(.dark) .lp-rte-area blockquote, html body.theme-mypso:not(.dark) .lp-render blockquote { border-left-color: var(--mp-border-strong) !important; color: var(--mp-fg-3) !important; }
html body.theme-mypso:not(.dark) .lp-rte-area pre, html body.theme-mypso:not(.dark) .lp-render pre { background-color: var(--mp-secondary) !important; }
html body.theme-mypso.dark .lp-rte-area h2, html body.theme-mypso.dark #lp-view-outline h2, html body.theme-mypso.dark .lp-render h2, html body.theme-mypso.dark .lp-rte-area h3, html body.theme-mypso.dark #lp-view-outline h3, html body.theme-mypso.dark .lp-render h3 { color: var(--mp-fg) !important; }
html body.theme-mypso.dark .lp-rte-area blockquote, html body.theme-mypso.dark .lp-render blockquote { color: var(--mp-fg-3) !important; border-left-color: var(--mp-border-strong) !important; }
html body.theme-mypso.dark .lp-rte-area pre, html body.theme-mypso.dark .lp-render pre { background-color: var(--mp-bg) !important; color: var(--mp-fg) !important; }
html body.theme-mypso:not(.dark) .help-tip-btn { background-color: var(--mp-muted) !important; color: var(--mp-fg-3) !important; }
html body.theme-mypso:not(.dark) .help-tip-btn:hover { background-color: var(--mp-border-strong) !important; }
html body.theme-mypso:not(.dark) .help-tip-body { background-color: #1E2421 !important; }
html body.theme-mypso.dark .help-tip-btn { background-color: var(--mp-muted) !important; color: var(--mp-fg-2) !important; }
html body.theme-mypso.dark .help-tip-btn:hover { background-color: var(--mp-border-strong) !important; }
html body.theme-mypso.dark .help-tip-body { background-color: var(--mp-bg) !important; color: var(--mp-fg) !important; border-color: var(--mp-border) !important; }
html body.theme-mypso:not(.dark) .pri-wrap { border-color: var(--mp-border) !important; }
html body.theme-mypso.dark .pri-wrap { border-color: var(--mp-border) !important; background-color: var(--mp-card) !important; }
html body.theme-mypso:not(.dark) .pri-wrap[open] > .pri-summary { border-bottom-color: var(--mp-border) !important; }
html body.theme-mypso.dark .pri-wrap[open] > .pri-summary { border-bottom-color: var(--mp-border) !important; }
html body.theme-mypso:not(.dark) .pri-title { color: var(--mp-fg) !important; }
html body.theme-mypso.dark .pri-title { color: var(--mp-fg) !important; }
html body.theme-mypso:not(.dark) .pri-count { color: var(--mp-fg-3) !important; }
html body.theme-mypso.dark .pri-count { color: var(--mp-fg-2) !important; }
html body.theme-mypso:not(.dark) .pri-hint { color: var(--mp-muted-fg-2) !important; }
html body.theme-mypso.dark .pm-cursive { color: var(--mp-fg) !important; }
/* ── END GENERATED ── */