/* =====================================================================
   shahab-theme.css — Shahab Health identity for Shahab Nursing
   Loaded after app-shell.css (injected by app-shell.js). It remaps the
   token names every page already uses onto the Shahab design system:
   navy #0B2B4A · gold #C2A063 · ivory #F4F6F8 · platform #1B4F8A,
   IBM Plex Sans / IBM Plex Sans Arabic served locally.
   Rules: primary buttons use `action` (never the platform colour);
   the platform colour marks identity only (stripe, lockup dot, active item);
   the sidebar is dark in both themes.
   ===================================================================== */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/plex-latin-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/plex-latin-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/plex-latin-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:700 900;font-style:normal;font-display:swap;src:url(fonts/plex-latin-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400 500;font-style:normal;font-display:swap;src:url(fonts/plex-arabic-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/plex-arabic-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:700 900;font-style:normal;font-display:swap;src:url(fonts/plex-arabic-700.woff2) format("woff2")}

/* ---- LIGHT (نهاري) ---- */
:root, body[data-theme="light"]{
  --sh-bg:#f4f6f8; --sh-surface:#ffffff; --sh-sunken:#edf1f5; --sh-raised:#ffffff;
  --sh-ink:#0b2b4a; --sh-ink-muted:#566a7f; --sh-border:#d8dfe7; --sh-border-strong:#74879b;
  --sh-action:#0b2b4a; --sh-on-action:#ffffff; --sh-action-hover:#14395f;
  --sh-gold:#c2a063; --sh-gold-ink:#8a6420; --sh-focus:#8a6420;
  --sh-pc:#1B4F8A; --sh-pc-tint:#e8edf3;
  --sh-success:#1d7a4a; --sh-warning:#8f5d10; --sh-danger:#b42318; --sh-info:#1f5fa8;

  /* mapped onto the platform's existing token names */
  --ink:var(--sh-bg); --panel:var(--sh-surface); --panel-2:var(--sh-surface); --panel-3:var(--sh-sunken);
  --line:var(--sh-border); --line-strong:#b6c3d0;
  --mist:var(--sh-ink-muted); --mist-dim:#6f8295; --paper:var(--sh-ink); --paper-dim:#3a5470;
  --teal:var(--sh-pc); --teal-dim:rgba(27,79,138,.10); --teal-glow:rgba(27,79,138,.28);
  --red:var(--sh-danger); --amber:var(--sh-warning); --green:var(--sh-success); --blue:var(--sh-info); --violet:#2c5d96;
  --sidebar:#071d33; --card-grad:var(--sh-surface);
  --card-shadow:0 1px 2px rgba(11,43,74,.06),0 1px 3px rgba(11,43,74,.08);
  --glow:none; --silk:none;
  --grid:linear-gradient(rgba(11,43,74,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(11,43,74,.035) 1px,transparent 1px);
  --font-head:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
  --font-body:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
  --radius:10px;
}
/* ---- DARK (ليلي) — also the base for the "night" veil ---- */
body[data-theme="dark"], body[data-theme="night"]{
  --sh-bg:#071d33; --sh-surface:#0e2a47; --sh-sunken:#0a2139; --sh-raised:#13355a;
  --sh-ink:#e9eef3; --sh-ink-muted:#9fb2c6; --sh-border:#24476b; --sh-border-strong:#5a7ea3;
  --sh-action:#e9eef3; --sh-on-action:#0b2b4a; --sh-action-hover:#ffffff;
  --sh-gold:#c2a063; --sh-gold-ink:#c2a063; --sh-focus:#c2a063;
  --sh-pc:#5295e1; --sh-pc-tint:#1c3f66;
  --sh-success:#4cc38a; --sh-warning:#e9b86a; --sh-danger:#f97066; --sh-info:#7cb4f0;

  --ink:var(--sh-bg); --panel:var(--sh-surface); --panel-2:var(--sh-surface); --panel-3:var(--sh-raised);
  --line:var(--sh-border); --line-strong:#33587e;
  --mist:var(--sh-ink-muted); --mist-dim:#7890a8; --paper:var(--sh-ink); --paper-dim:#c4d0dc;
  --teal:var(--sh-pc); --teal-dim:rgba(82,149,225,.14); --teal-glow:rgba(82,149,225,.36);
  --red:var(--sh-danger); --amber:var(--sh-warning); --green:var(--sh-success); --blue:var(--sh-info); --violet:#8fb8ea;
  --sidebar:#05172a; --card-grad:var(--sh-surface);
  --card-shadow:0 1px 2px rgba(0,0,0,.35);
  --glow:none; --silk:none;
  --grid:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
}

html,body{font-family:var(--font-body);font-variant-numeric:tabular-nums;}
body{background-color:var(--sh-bg) !important;background-image:none !important;color:var(--sh-ink);}
body::before{display:none !important;}
h1,h2,h3,h4,.brandname,.brand .name,.brand .ar,.ttl{font-family:var(--font-head) !important;letter-spacing:-.005em;}

/* ---- platform stripe (identity) ---- */
body.has-shell::after{content:'';position:fixed;top:0;left:0;right:0;height:3px;background:var(--sh-pc);z-index:9000;pointer-events:none;}

/* ---- sidebar: always dark, with its own readable tokens ---- */
.side{
  --paper:#e9eef3; --paper-dim:#c4d0dc; --mist:#9fb2c6; --mist-dim:#9fb2c6;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  --panel:rgba(255,255,255,.05); --panel-2:rgba(255,255,255,.06); --panel-3:rgba(255,255,255,.10);
  --teal:#5295e1; --teal-dim:rgba(255,255,255,.10);
  background:var(--sidebar) !important; color:#e9eef3; border-right:1px solid rgba(255,255,255,.06) !important;
}
.side a.nav{color:#c9d5e1;}
.side a.nav:hover{background:rgba(255,255,255,.06);color:#fff;}
.side a.nav.active{background:rgba(255,255,255,.10) !important;color:#fff;}
.side a.nav.active::before{background:var(--sh-pc) !important;}
.side .me .av{background:#c2a063 !important;color:#0b2b4a !important;}

/* ---- Shahab lockup (sidebar head, login, hub) ---- */
.sh-lockup{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;}
.sh-lockup svg{width:30px;height:30px;flex:none;color:var(--sh-gold);}
.sh-lockup .brand{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif;font-weight:700;font-size:17px;line-height:1;}
.sh-lockup .sep{width:1px;height:26px;background:var(--sh-gold);}
.sh-lockup .plat{display:flex;flex-direction:column;gap:3px;line-height:1.1;}
.sh-lockup .plat b{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13.5px;white-space:nowrap;}
.sh-lockup .plat b::before{content:"";width:8px;height:8px;border-radius:99px;background:var(--sh-pc);flex:none;}
.sh-lockup .plat small{font-size:10.5px;letter-spacing:.02em;opacity:.72;white-space:nowrap;}
.side .sh-lockup .plat b::before{background:#5295e1;}
.side .logo{padding:6px 8px 18px !important;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px;}

/* ---- buttons: one primary style everywhere (action), never the platform colour ---- */
.btn{border-radius:6px !important;font-family:var(--font-body) !important;letter-spacing:0;}
.btn:not(.ghost):not(.warn):not(.danger):not(.sec):not(.secondary),
.btn.solid, .btn.primary, button.primary{
  background:var(--sh-action) !important;color:var(--sh-on-action) !important;border-color:transparent !important;
  background-image:none !important;box-shadow:none !important;
}
.btn:not(.ghost):not(.warn):not(.danger):not(.sec):not(.secondary):hover,.btn.solid:hover,.btn.primary:hover{background:var(--sh-action-hover) !important;}
.btn.ghost{background:var(--sh-surface) !important;color:var(--sh-ink) !important;border:1px solid var(--sh-border-strong) !important;}
.btn.ghost:hover{background:var(--sh-sunken) !important;}
.side .btn.ghost{background:transparent !important;color:#e9eef3 !important;border-color:rgba(255,255,255,.18) !important;}
.btn.warn,.btn.danger{background:var(--sh-danger) !important;color:#fff !important;border-color:transparent !important;}
.btn:hover{transform:none !important;}

/* ---- inputs, focus ---- */
input,select,textarea{font-family:var(--font-body);}
input:focus,select:focus,textarea:focus{border-color:var(--sh-pc) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--sh-pc) 18%,transparent) !important;outline:none;}
*:focus-visible{outline:2px solid var(--sh-focus) !important;outline-offset:2px;}

/* ---- tables ---- */
thead tr.cols th,thead th{background:var(--sh-sunken) !important;color:var(--sh-ink-muted) !important;}
tbody tr:hover{background:color-mix(in srgb,var(--sh-sunken) 70%,transparent) !important;}

/* ---- tabs ---- */
.tab.active{color:var(--sh-ink) !important;box-shadow:inset 0 -2px 0 var(--sh-pc);}

/* ---- cards ---- */
.panel,.card,.summary .card{box-shadow:var(--card-shadow) !important;}

/* ---- scrollbars ---- */
*{scrollbar-color:color-mix(in srgb,var(--sh-ink-muted) 45%,transparent) transparent;}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--sh-ink-muted) 45%,transparent);background-clip:content-box;}
::selection{background:color-mix(in srgb,var(--sh-pc) 25%,transparent);}

/* ---- demo banner (demo-nursing only) ---- */
#shDemoBar{position:fixed;left:0;right:0;bottom:0;z-index:9500;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:7px 14px;background:#0b2b4a;color:#f4f6f8;font:600 12.5px/1.4 "IBM Plex Sans Arabic","IBM Plex Sans",sans-serif;
  border-top:2px solid #c2a063;}
#shDemoBar b{color:#c2a063;font-weight:700;}
#shDemoBar button{background:transparent;border:1px solid rgba(244,246,248,.35);color:#f4f6f8;border-radius:6px;padding:3px 10px;font:inherit;cursor:pointer;}
body.sh-demo{padding-bottom:36px;}
@media print{#shDemoBar,body.has-shell::after{display:none !important;}}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important;}}

/* ---- login + hub (index) ---- */
.login-brand .sh-login-lock{display:flex;justify-content:center;margin-bottom:6px;}
.login-brand .sh-lockup svg{width:40px;height:40px;}
.login-brand .sh-lockup .brand{font-size:22px;}
.login-brand .name{font-size:18px !important;font-weight:700 !important;}
.login-brand .sub{text-transform:none !important;letter-spacing:.01em !important;}
.login-box{background:var(--sh-surface) !important;border-color:var(--sh-border) !important;box-shadow:var(--card-shadow) !important;}
.login-box::before{background:var(--sh-pc) !important;height:3px !important;}
.login-box input{background:var(--sh-surface) !important;border-color:var(--sh-border-strong) !important;color:var(--sh-ink) !important;border-radius:6px !important;}
.hub-header{background:var(--sh-surface) !important;border-color:var(--sh-border) !important;}
.hub-header::before{background:var(--sh-pc) !important;height:3px !important;}
.hub-brand .sh-lockup svg{width:34px;height:34px;}
.hub-brand .sub{text-transform:none !important;letter-spacing:.01em !important;}
.portal-card,.qt{background:var(--sh-surface) !important;border-color:var(--sh-border) !important;box-shadow:var(--card-shadow);}
.qt .qi{background:var(--sh-pc-tint) !important;color:var(--sh-pc) !important;border-color:transparent !important;}
.qt:hover,.portal-card.available:hover{border-color:var(--sh-pc) !important;box-shadow:0 12px 32px -12px rgba(11,43,74,.28) !important;}
.portal-card::after{display:none !important;}

/* ---- section sub-navigation (injected by app-shell.js) ---- */
.rc-subnav{background:var(--sh-surface) !important;border-bottom:1px solid var(--sh-border) !important;backdrop-filter:none !important;border-radius:10px;}
.rc-subnav .rc-hublbl{color:var(--sh-ink-muted) !important;font-family:var(--font-body) !important;}
.rc-subnav .rc-tab{color:var(--sh-ink-muted) !important;font-family:var(--font-body) !important;}
.rc-subnav .rc-tab:hover{color:var(--sh-ink) !important;background:var(--sh-sunken) !important;}
.rc-subnav .rc-tab.active{background:var(--sh-pc-tint) !important;color:var(--sh-ink) !important;border-color:transparent !important;box-shadow:inset 0 -2px 0 var(--sh-pc);}
.topbar::before{background:var(--sh-pc) !important;opacity:1 !important;}

/* ---- default field surfaces (page styles still win where they set their own) ---- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{background-color:var(--sh-surface);color:var(--sh-ink);border-color:var(--sh-border-strong);}

/* information notices: readable ink in both themes (pages hard-coded a pale teal meant for dark only) */
.notice{color:var(--paper-dim) !important;}
.notice b{color:var(--paper) !important;}