@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ═══════════════════════════════════════════════════════════════════
   SpecialtyDox shared brand theme — sdx-brand.css
   Single source of truth for the navy→teal brand chrome across the
   satellite apps: RTM dashboard, Finance, Scribe, Scribe-Solo, DME,
   Billing. Served at https://sleepdox.com/sdx-brand.css and linked
   AFTER each app's inline <style>, so these rules win.

   The main EHR (cura-rtm public/index.html) carries its own inline
   theme block with the same values — keep the two in sync when
   changing colors. (Do NOT link this file from the EHR: its .topbar
   is a white page-title bar, not the header.)
   Added 2026-06-11.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* team.html palette (2026-06-27): slate-navy #0d2438 → #12314c (52%) → teal-deep #0e8a7d.
     Keep in sync with cura-rtm public/index.html .topnav and the login .login-brand panel. */
  --sdx-grad: linear-gradient(90deg,#0d2438 0%,#12314c 52%,#0e8a7d 100%);
  --sdx-grad-diag: linear-gradient(135deg,#0d2438 0%,#12314c 52%,#0e8a7d 100%);
  --sdx-navy:#0d2438;
  --sdx-teal:#14b8a6;
  --sdx-teal-dk:#0e8a7d;
  --sdx-teal-bright:#7fe7d8;
  --sdx-line: rgba(127,231,216,0.30);
  --sdx-shadow: 0 2px 12px rgba(13,36,56,0.30);
}

/* ── App headers ──
   .topnav  → RTM dashboard, Scribe, Scribe-Solo
   .topbar  → Finance, DME dashboard
   .app-header → Billing */
.topnav, .topbar, .app-header{
  background: var(--sdx-grad) !important;
  border-bottom: 1px solid var(--sdx-line) !important;
  box-shadow: var(--sdx-shadow) !important;
}

/* Brand text on the dark bar */
.topnav .brand, .topbar-brand, .app-logo-text, .brand-main{ color:#fff !important; }
.topbar-brand span, .brand-main span{ color: var(--sdx-teal-bright) !important; }

/* Nav links / items that live on the dark bar */
.topnav .nav-link, .topnav .nav-item, .topbar .nav-solo{ color: rgba(235,242,248,0.85) !important; }
.topnav .nav-link:hover, .topnav .nav-item:hover, .topbar .nav-solo:hover{ color:#fff !important; background: rgba(255,255,255,0.10) !important; }
.topnav .nav-link.active, .topnav .nav-item.active, .topbar .nav-solo.active{
  color: var(--sdx-teal-bright) !important;
  background: rgba(0,201,167,0.16) !important;
  box-shadow: inset 0 -2px 0 #00C9A7 !important;
}

/* ── Page wash (opt-in via <body class="sdx-wash">) — matches the EHR background */
body.sdx-wash{
  background:
    radial-gradient(1100px 520px at 85% -160px, rgba(0,184,148,0.08), transparent 60%),
    radial-gradient(900px 520px at -120px 30%, rgba(59,130,246,0.05), transparent 55%),
    #EDF2F1 !important;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
}

/* ── Palette remap: re-skin opted-in app bodies (cards, buttons, accents) to the
   EHR's exact palette by overriding their own CSS variables. Apps define these
   on :root; redefining on body wins for everything inside. */
body.sdx-wash{
  --primary:#14b8a6; --primary-light:#2bd0bd; --primary-dark:#0e8a7d;
  --teal:#14b8a6; --teal-dk:#0e8a7d; --teal-lt:#E1F4F1;
  --accent:#3B82F6;
  --bg:#EDF2F1; --card:#FFFFFF; --white:#FFFFFF;
  --text:#1A202C; --text-light:#5A6578;
  --border:#E2E8F0; --border-lt:#EEF1F5;
  --success:#22C55E; --green:#22C55E;
  --shadow:0 1px 3px rgba(0,0,0,0.04),0 1px 2px rgba(0,0,0,0.02);
}

/* ── Small polish to match the EHR */
body.sdx-wash::-webkit-scrollbar-thumb{ background:#BFD9D0; }
body.sdx-wash::-webkit-scrollbar-thumb:hover{ background: var(--sdx-teal); }

/* Wordmarks that use gradient-clipped text (Scribe/Solo .brand-main) — white→teal like the EHR */
.brand-main, .brand-sub{
  background: linear-gradient(135deg,#FFFFFF 0%,#CFF4E8 45%,#7fe7d8 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
}

/* ── SpecialtyDox star mark (2026-06-16) ──
   Lead every app's header with the same animated star the EHR nav + login use,
   injected from this one file so all programs share the identity element.
   Containers: .topnav .brand (RTM/Scribe/Solo) · .topbar-brand (Finance/DME) · .app-logo (Billing). */
@keyframes sdxStarPulse{0%,100%{opacity:.9;transform:scale(1);}50%{opacity:1;transform:scale(1.08);}}
.topnav .brand::before,
.topbar-brand::before,
.app-logo::before{
  content:'';
  display:inline-block;
  flex:none;
  width:20px;height:20px;
  margin-right:9px;
  vertical-align:middle;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%201.4%20L13.95%209.25%20C14.16%2010.08%2014.92%2010.84%2015.75%2011.05%20L22.6%2012%20L15.75%2012.95%20C14.92%2013.16%2014.16%2013.92%2013.95%2014.75%20L12%2022.6%20L10.05%2014.75%20C9.84%2013.92%209.08%2013.16%208.25%2012.95%20L1.4%2012%20L8.25%2011.05%20C9.08%2010.84%209.84%2010.08%2010.05%209.25%20Z'%20fill='%235FF0D2'/%3E%3C/svg%3E");
  filter:drop-shadow(0 0 4px rgba(95,240,210,0.7));
  animation:sdxStarPulse 4.5s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){
  .topnav .brand::before,.topbar-brand::before,.app-logo::before,.app-logo .app-logo-icon::before{animation:none !important;}
}
/* Billing: drop the generic "C" tile so the star mark leads instead */
.app-logo .app-logo-icon{display:none !important;}
