/* === Velrano System · Modern UI overlay v3 (additive, light + dark) ===
   Layered on top of each dashboard's existing stylesheet. Introduces a real
   2-column asymmetric layout (main + right contextual rail), elevated card
   system, pill controls, high-contrast typography, and gentle hover
   micro-interactions. All original IDs and class names are preserved;
   nothing is removed. */

:root{
  --mo-radius-lg:18px;
  --mo-radius-md:12px;
  --mo-shadow-sm:0 1px 2px rgba(15,23,42,.04),0 2px 6px rgba(15,23,42,.04);
  --mo-shadow-md:0 6px 24px -4px rgba(15,23,42,.08),0 2px 6px rgba(15,23,42,.04);
  --mo-shadow-lg:0 14px 40px -8px rgba(15,23,42,.14),0 4px 10px rgba(15,23,42,.04);
  --mo-tint:rgba(15,23,42,.03);
  --mo-tint-strong:rgba(15,23,42,.07);
  --mo-focus:0 0 0 3px rgba(99,102,241,.18);
  --mo-rail-width:320px;
  --mo-content-max:1180px;

  /* High-contrast typography tokens (light mode)
     All values WCAG AA (≥4.5:1) against #FFFFFF card bg. */
  --mo-ink-strong:#0F172A;    /* headings, metric values           21.6:1 */
  --mo-ink:#1E293B;           /* body titles, card headings        16.1:1 */
  --mo-text:#334155;          /* table cells, paragraphs           10.9:1 */
  --mo-sub:#475569;           /* secondary labels, meta             7.5:1 */
  --mo-sub-strong:#334155;    /* eyebrows / KPI labels             10.9:1 */
}
.dark, :root[data-theme=dark]{
  --mo-shadow-sm:0 1px 2px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.2);
  --mo-shadow-md:0 6px 24px -4px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.25);
  --mo-shadow-lg:0 14px 40px -8px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.3);
  --mo-tint:rgba(255,255,255,.05);
  --mo-tint-strong:rgba(255,255,255,.09);

  /* High-contrast typography tokens (dark mode)
     All values WCAG AA against dark card bg. */
  --mo-ink-strong:#F8FAFC;
  --mo-ink:#E2E8F0;
  --mo-text:#CBD5E1;
  --mo-sub:#B6C2D1;           /* bumped from #94A3B8 for AA */
  --mo-sub-strong:#CBD5E1;
}

html,body{background:var(--bg)}

/* ========= Typography contrast: force headings and body text to high-contrast ========= */
body,.content,.card,.panel{color:var(--mo-text)}
h1,h2,h3,h4,.heading h1{color:var(--mo-ink-strong)!important;font-weight:800!important;letter-spacing:-.015em!important}
.card h2,.card h3,.card > b,.panel h2,.panel h3,.panel > b{color:var(--mo-ink)!important;font-weight:700!important}
.muted,small.muted,.rail-sub,.subtitle,.delta,.sub,.helper{color:var(--mo-sub)!important}
.eyebrow{color:var(--mo-sub-strong)!important;font-weight:700}

/* ========= Structural: 2-column asymmetric main + sticky right rail ========= */
.main-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--mo-rail-width);
  gap:22px;
  padding:22px 26px 48px;
  max-width:calc(var(--mo-content-max) + var(--mo-rail-width) + 48px);
  margin:0 auto;
  align-items:start;
}
.main-grid > #content.content{padding:0;max-width:100%;margin:0;min-width:0;box-sizing:border-box;overflow-x:hidden}
.main-grid > #content.content > *,
.main-grid > #content.content > * > *{min-width:0;max-width:100%;box-sizing:border-box}
.main-grid .grid.twocol,.main-grid .grid{min-width:0}
.main-grid .grid.twocol > *,.main-grid .grid > *{min-width:0;max-width:100%;box-sizing:border-box}
/* Only .table-wrap needs horizontal scroll for genuinely wide tables.
   Cards themselves must stay overflow:visible so that chart labels or
   tooltips positioned outside the content box are not clipped, AND so
   that the browser does not mount phantom scrollbars on tiles whose
   content barely exceeds the box (the main bug reported on NDIS KPI
   row and the "6개월 사용 추이" chart card). */
.main-grid #content .table-wrap{overflow-x:auto;max-width:100%}
.main-grid #content .card{box-sizing:border-box;max-width:100%;overflow:visible}
.main-grid #content table{max-width:100%}
/* KPI tiles DO need overflow:hidden so the decorative radial ::after
   accent is clipped to the rounded card. */
.card.kpi,.kpi{overflow:hidden!important}
.context-rail{min-width:0;max-width:100%;box-sizing:border-box}
.context-rail > *{min-width:0;max-width:100%;box-sizing:border-box}
.context-rail,aside.side-stack{
  position:sticky;top:92px;
  display:flex;flex-direction:column;gap:14px;
  max-height:calc(100vh - 110px);overflow-y:auto;overflow-x:hidden;
  padding-right:2px;
}
.context-rail::-webkit-scrollbar,aside.side-stack::-webkit-scrollbar{width:6px}
.context-rail::-webkit-scrollbar-thumb,aside.side-stack::-webkit-scrollbar-thumb{background:var(--mo-tint-strong);border-radius:999px}
@media(max-width:1200px){
  .main-grid{grid-template-columns:1fr;gap:16px;padding:18px 20px 40px}
  .context-rail,aside.side-stack{position:static;max-height:none;flex-direction:row;flex-wrap:wrap}
  .context-rail > *,aside.side-stack > *{flex:1 1 280px}
}

/* Shared surface alias — some dashboards use --panel, some --card, some --nav. */
:root{--mo-surface:var(--mo-surface)}

/* ========= Topbar: cleaner, flatter, pill search ========= */
.topbar{
  height:72px;padding:0 26px;
  background:var(--mo-surface);
  border-bottom:0!important;
  box-shadow:0 1px 0 rgba(15,23,42,.05)!important;
  position:sticky;top:0;z-index:40;
  color:var(--mo-ink);
}
.topbar .actions{gap:10px}
.topbar .search{
  width:min(360px,38vw);
  border-radius:999px!important;
  padding:10px 16px!important;
  background:var(--bg);
  border:1px solid transparent!important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.04);
  transition:box-shadow .18s ease,background .18s ease;
  color:var(--mo-ink);
}
.topbar .search::placeholder{color:var(--mo-sub)}
.topbar .search:focus{outline:none;box-shadow:inset 0 1px 2px rgba(15,23,42,.04),var(--mo-focus);background:var(--mo-surface)}
.topbar .icon-btn,.topbar .btn.ghost{
  width:38px;height:38px;padding:0;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--mo-tint);border:0!important;color:var(--mo-ink);
}
.topbar .icon-btn:hover,.topbar .btn.ghost:hover{background:var(--mo-tint-strong)}
.topbar #logoutBtn,.topbar .btn.soft{height:38px;padding:0 14px;border-radius:999px}
.dark .topbar,:root[data-theme=dark] .topbar{box-shadow:0 1px 0 rgba(0,0,0,.3)!important}

/* ========= Sidebar: wider, breathable, high-contrast nav ========= */
.sidebar{
  background:var(--mo-surface);
  border-right:0!important;
  box-shadow:1px 0 0 rgba(15,23,42,.04);
}
.sidebar .nav{padding:4px 10px;display:flex;flex-direction:column;gap:2px}
.sidebar .nav button,.sidebar .nav a{
  border-radius:12px!important;
  padding:11px 14px!important;
  margin:0!important;
  display:flex;align-items:center;gap:12px;
  background:transparent;border:0!important;
  color:var(--mo-ink)!important;
  font-weight:600;
  transition:background .14s ease,color .14s ease;
  width:100%;text-align:left;
}
.sidebar .nav button .ico,.sidebar .nav a .ico{
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;opacity:.8;flex:none;
}
.sidebar .nav button:hover,.sidebar .nav a:hover{background:var(--mo-tint)}
.sidebar .nav button.active,.sidebar .nav a.active{
  background:var(--brand2,var(--mo-tint-strong));
  color:var(--brand,var(--teal,#6366f1))!important;
}
.sidebar .nav button.active .ico,.sidebar .nav a.active .ico{opacity:1}
.sidebar .brand{padding:18px 16px;margin-bottom:4px}
.sidebar .brand-company{color:var(--mo-ink-strong)!important;font-weight:800}
.sidebar .brand-system{color:var(--mo-sub)!important}
.sidebar .side-foot{padding:14px 16px;font-size:11px;color:var(--mo-sub)!important;border-top:1px solid var(--line);opacity:.85}

/* ========= Cards: elevated, rounded, no hard border ========= */
.card,.panel,article.card,.site-card,
.workflow-step,.onboarding-banner,.status-legend,
.standby-panel,.notification,.alert,.board-col,
.resource,.standby-card,.modal-card,.review-card{
  border-radius:var(--mo-radius-lg)!important;
  box-shadow:var(--mo-shadow-md)!important;
  border:0!important;
  background:var(--mo-surface)!important;
  transition:transform .18s ease,box-shadow .18s ease;
  color:var(--mo-text);
}
.card:hover,.site-card:hover,.workflow-step:hover,
.review-card:hover,.notification:hover{
  transform:translateY(-2px);
  box-shadow:var(--mo-shadow-lg)!important;
}

/* ========= KPIs: taller, bolder, high-contrast values ========= */
.grid.kpis{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;gap:16px!important}
.card.kpi,.kpi{
  padding:22px 22px 20px!important;
  border-radius:var(--mo-radius-lg)!important;
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--mo-surface) 0%,var(--mo-surface) 65%,var(--mo-tint) 100%)!important;
  min-height:132px;
  display:flex;flex-direction:column;justify-content:space-between;gap:8px;
}
.card.kpi::after,.kpi::after{
  content:"";position:absolute;top:-30px;right:-30px;width:100px;height:100px;
  border-radius:50%;background:radial-gradient(circle,var(--brand2,var(--mo-tint-strong)) 0%,transparent 70%);
  opacity:.6;pointer-events:none;
}
.card.kpi > span.muted,.kpi > span.muted,.kpi .kpi-label,.card.kpi > span:first-child{
  font-size:11px!important;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mo-sub-strong)!important;font-weight:700!important;
}
.card.kpi > b,.kpi b,.kpi .kpi-value{
  font-size:30px!important;line-height:1!important;
  letter-spacing:-.02em!important;font-weight:800!important;
  display:block;margin:0!important;color:var(--mo-ink-strong)!important;
}
.kpi .delta{font-size:11px;font-weight:650;color:var(--mo-sub)!important}
.kpi b.red,.card.kpi > b.red{color:var(--red)!important}
.kpi b.amber,.card.kpi > b.amber{color:var(--amber)!important}
.kpi b.green,.card.kpi > b.green{color:var(--green)!important}

/* ========= Right rail components (new .rail-* classes + existing .side-stack) ========= */
.rail-card,aside.side-stack > .panel,aside.side-stack > .card{padding:16px!important;background:var(--mo-surface)!important}
.rail-h,aside.side-stack .panel-head h2{margin:0 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mo-sub-strong)!important;font-weight:700}
.rail-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.rail-head .rail-h{margin:0}
.rail-sub{margin:12px 0 0;font-size:12px;color:var(--mo-sub)!important}
.rail-list{display:flex;flex-direction:column;gap:6px}
.rail-row{
  all:unset;cursor:pointer;
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border-radius:12px;
  background:var(--mo-tint);
  transition:background .14s ease,transform .14s ease;
}
.rail-row:hover{background:var(--mo-tint-strong);transform:translateX(2px)}
.rail-row > div{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.rail-row b{font-size:12.5px;line-height:1.3;color:var(--mo-ink)!important;font-weight:650}
.rail-row small{font-size:11px;color:var(--mo-sub)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-dot{width:8px;height:8px;border-radius:50%;margin-top:7px;background:var(--amber,#f59e0b);flex:none}
.rail-row.red .rail-dot{background:var(--red)}
.rail-row.green .rail-dot{background:var(--green)}
.rail-row.amber .rail-dot{background:var(--amber)}
.rail-empty{margin:0;padding:16px 0;text-align:center;font-size:12px;color:var(--mo-sub)!important}

/* ========= Progress ring (CSS-only via conic-gradient) ========= */
.ring{
  width:120px;height:120px;border-radius:50%;
  margin:4px auto 2px;
  display:grid;place-items:center;
  transition:transform .18s ease;
}
.ring:hover{transform:scale(1.04)}
.ring-inner{
  width:92px;height:92px;border-radius:50%;
  background:var(--mo-surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  box-shadow:inset 0 2px 6px rgba(15,23,42,.04);
}
.ring-inner b{font-size:26px;line-height:1;font-weight:800;letter-spacing:-.02em;color:var(--mo-ink-strong)!important}
.ring-inner small{font-size:11px;color:var(--mo-sub)!important;margin-top:2px}

/* ========= Tables: breathable, soft dividers, hover tint, high-contrast cells ========= */
.card table,.table-wrap table{border-collapse:separate!important;border-spacing:0}
.card table th,.table-wrap table th{
  padding:12px 14px!important;
  background:transparent!important;
  font-size:10px!important;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mo-sub-strong)!important;font-weight:700!important;
  border-bottom:1px solid var(--line)!important;
}
.card table td,.table-wrap table td{
  padding:14px 14px!important;
  color:var(--mo-text)!important;
  border-bottom:1px solid var(--line)!important;
}
.card table tbody tr,.table-wrap table tbody tr{transition:background .14s ease}
.card table tbody tr:hover,.table-wrap table tbody tr:hover{background:var(--mo-tint)}
.card table tbody tr:last-child td{border-bottom:0!important}

/* ========= Pills, chips, status tags: high-contrast backgrounds ========= */
.pill,.status-chip,.risk-badge,.mini-chip,.standby-count,.kanban-count,.board-col-count{
  border-radius:999px!important;
  padding:4px 11px!important;
  font-weight:700!important;letter-spacing:.01em;font-size:11px;
}

/* ========= Buttons: softer, pill primaries ========= */
.btn,.icon-btn{transition:transform .14s ease,box-shadow .14s ease,background .14s ease,color .14s ease}
.btn:hover,.icon-btn:hover{transform:translateY(-1px)}
.btn.primary{border-radius:999px!important;padding:10px 18px!important;font-weight:700}
.btn.primary:hover{box-shadow:var(--mo-shadow-md)}
.btn.soft{border-radius:999px!important;padding:9px 16px!important;font-weight:650}
.btn.ghost{border:0!important;background:var(--mo-tint);color:var(--mo-ink)}
.btn.ghost:hover{background:var(--mo-tint-strong)}
.btn.danger{border-radius:999px!important}

/* ========= Tab toggles: pill-shaped ========= */
.board-view-toggle,.view-toggle,.filter-row{gap:6px}
.board-view-toggle button,.view-toggle button,.filter-row > button{
  border-radius:999px!important;
  padding:8px 16px!important;
  border:0!important;
  background:var(--mo-tint);color:var(--mo-ink)!important;
  transition:background .14s ease,color .14s ease,box-shadow .14s ease;
  font-weight:650;
}
.board-view-toggle button:hover,.view-toggle button:hover,.filter-row > button:hover{background:var(--mo-tint-strong)}
.board-view-toggle button.active,.view-toggle button.active,.filter-row > button.active{
  background:var(--brand,var(--teal,#6366f1))!important;color:#fff!important;
  box-shadow:var(--mo-shadow-sm);
}

/* ========= Inputs & selects in modals/forms: high-contrast text ========= */
.field input,.field select,.field textarea,
.setting-row input,.setting-row select,.setting-row textarea,
.compact-select,.filter-row select{
  border-radius:12px!important;
  border:1px solid transparent!important;
  background:var(--mo-tint);
  color:var(--mo-ink)!important;
  padding:11px 14px!important;
  transition:box-shadow .18s ease,background .18s ease;
}
.field input::placeholder,.field textarea::placeholder{color:var(--mo-sub)!important}
.field input:focus,.field select:focus,.field textarea:focus,
.setting-row input:focus,.setting-row select:focus,.setting-row textarea:focus,
.compact-select:focus,.filter-row select:focus{
  outline:none;box-shadow:var(--mo-focus);background:var(--mo-surface);
}
.field > label,.field{color:var(--mo-ink)}

/* ========= Headings: tighter, bolder, high-contrast ========= */
.heading h1{font-size:30px!important;letter-spacing:-.02em!important;font-weight:800!important;color:var(--mo-ink-strong)!important}
.heading{margin-bottom:22px!important}
.eyebrow{font-size:11px;letter-spacing:.12em;color:var(--mo-sub-strong)!important}

/* ========= Modals: elevated, high-contrast title ========= */
.modal,.modal-backdrop{backdrop-filter:blur(4px);background:rgba(15,23,42,.4)!important}
.modal-card{box-shadow:var(--mo-shadow-lg)!important;border-radius:var(--mo-radius-lg)!important;padding:24px!important;color:var(--mo-text)}
.modal-head{padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.modal-head h2{color:var(--mo-ink-strong)!important}

/* ========= Attention row ========= */
.atn-row{
  display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.atn-row:last-child{border-bottom:0}
.atn-row .actions{display:flex;gap:8px;align-items:center}
.atn-row b{color:var(--mo-ink)!important;font-weight:650}
.atn-row small.muted{color:var(--mo-sub)!important}

/* ========= Reduced motion ========= */
@media(prefers-reduced-motion:reduce){
  .card,.kpi,.site-card,.workflow-step,.review-card,.resident,.notification,
  .btn,.icon-btn,.board-view-toggle button,.filter-row > button,
  .ring,.rail-row,.search,input[type="search"],.field input,.field select{
    transition:none!important;
  }
  .card:hover,.site-card:hover,.workflow-step:hover,
  .review-card:hover,.notification:hover,.ring:hover,
  .rail-row:hover,.btn:hover,.icon-btn:hover{transform:none!important}
}

/* ========= Per-dashboard brand sub-label contrast fixes =========
   Care Signal uses .logo b / .logo small with hardcoded colors (#fff and
   #9a8caf) that only read on its original purple sidebar background. The
   overlay keeps the sidebar on the canonical --nav color in dark mode but
   can land on --card in light mode, so we normalise sub-brand text here. */
.sidebar .logo b,
#sidebarCompanyName{color:var(--mo-ink-strong)!important}
.sidebar .logo small,
#sidebarSystemName,
.brand-text .brand-system,
.brand-text small.brand-ver{color:var(--mo-sub)!important}

/* ========= Dark mode: force all elevated surfaces off white =========
   Some dashboards hardcode #fff on .card / .panel in their main stylesheet.
   This safety net flips them to the darkest token available in dark mode. */
.dark .card,.dark .panel,.dark article.card,.dark .site-card,
.dark .workflow-step,.dark .onboarding-banner,.dark .status-legend,
.dark .standby-panel,.dark .notification,.dark .alert,.dark .board-col,
.dark .resource,.dark .standby-card,.dark .modal-card,.dark .review-card,
.dark .rail-card,.dark .ring-inner,
:root[data-theme=dark] .card,:root[data-theme=dark] .panel,
:root[data-theme=dark] article.card,:root[data-theme=dark] .site-card,
:root[data-theme=dark] .workflow-step,:root[data-theme=dark] .onboarding-banner,
:root[data-theme=dark] .status-legend,:root[data-theme=dark] .standby-panel,
:root[data-theme=dark] .notification,:root[data-theme=dark] .alert,
:root[data-theme=dark] .board-col,:root[data-theme=dark] .resource,
:root[data-theme=dark] .standby-card,:root[data-theme=dark] .modal-card,
:root[data-theme=dark] .review-card,:root[data-theme=dark] .rail-card,
:root[data-theme=dark] .ring-inner{
  background:var(--card,var(--panel,#1E293B))!important;
  color:var(--mo-text)!important;
}

/* KPI gradient in dark: keep the diagonal but keyed off the dark surface */
.dark .card.kpi,.dark .kpi,
:root[data-theme=dark] .card.kpi,:root[data-theme=dark] .kpi{
  background:linear-gradient(135deg,
    var(--card,var(--panel,#1E293B)) 0%,
    var(--card,var(--panel,#1E293B)) 65%,
    var(--mo-tint) 100%)!important;
}

/* Topbar in dark */
.dark .topbar,:root[data-theme=dark] .topbar{background:var(--card,var(--panel,#1E293B))!important}

/* Sidebar in dark — keep whichever bg the dashboard set, but ensure text is readable */
.dark .sidebar,:root[data-theme=dark] .sidebar{color:var(--mo-ink)}
.dark .sidebar .logo b,.dark #sidebarCompanyName,
:root[data-theme=dark] .sidebar .logo b,:root[data-theme=dark] #sidebarCompanyName{color:#F8FAFC!important}
.dark .sidebar .logo small,.dark #sidebarSystemName,
:root[data-theme=dark] .sidebar .logo small,:root[data-theme=dark] #sidebarSystemName{color:#CBD5E1!important}

/* ========= Topbar actions: prevent compressed/wrapped buttons =========
   Reported bug: #logoutBtn was collapsing to a 1-character-wide column
   because the topbar flex row didn't protect it from shrinking and the
   button text was allowed to wrap. */
.topbar{overflow:visible!important;padding-right:16px!important}
.topbar .actions,.topbar .top-actions,.topbar > *{
  flex-shrink:0!important;
  min-width:0;
}
.topbar .top-actions{gap:8px!important;padding-right:4px}
.topbar .btn,.topbar .icon-btn,.topbar #logoutBtn,
.topbar .btn.soft,.topbar .btn.primary,.topbar .btn.ghost{
  white-space:nowrap!important;
  flex-shrink:0!important;
  overflow:visible!important;
  min-width:fit-content;
  word-break:keep-all;
}
.topbar #logoutBtn{
  display:inline-flex;align-items:center;justify-content:center;
  height:38px;padding:0 16px!important;
  border-radius:999px!important;
  font-size:13px;font-weight:650;
  margin-left:4px;
}
/* On very narrow viewports, let the sidebar drawer handle it — allow the
   topbar to scroll horizontally rather than crush its buttons. */
@media(max-width:900px){
  .topbar{overflow-x:auto!important}
  .topbar::-webkit-scrollbar{height:0}
}

/* ========= Notification modal & rows: theme-aware surface + legible text =========
   Reported bug: Care Signal / Patient Flow notification dialog stayed white in dark
   mode. Root cause: those dashboards use <section class="modal"> as the dialog
   (not .modal-card like Construction/NDIS), so my dark-mode .modal-card override
   never matched. Also .notif-row / .notification have hardcoded light fills
   (#fffaf0, var(--soft)) that read fine in light mode but trap light text on light
   background in dark mode. */

/* Light-mode text contrast inside the notification modal (both styles) */
.modal-card .notif-row b,.modal-card .notification b,
#modalRoot .modal .notif-row b,#modalRoot .modal .notification b,
.modal-card .notif-row > div > b,.modal-card .notification > div > b{
  color:var(--mo-ink-strong)!important;font-weight:700;
}
.modal-card .notif-row .muted,.modal-card .notification .muted,
#modalRoot .modal .notif-row .muted,#modalRoot .modal .notification .muted{
  color:var(--mo-sub)!important;
}
.modal-head h2,#modalRoot .modal .modal-head h2,
.modal-card .modal-head h2{color:var(--mo-ink-strong)!important}

/* Dark-mode dialog surface — covers Construction/NDIS (.modal-card) AND
   Care Signal/Patient Flow (<section class="modal"> inside #modalRoot) */
.dark .modal-card,:root[data-theme=dark] .modal-card,
.dark #modalRoot .modal,:root[data-theme=dark] #modalRoot .modal,
.dark #modalRoot .modal-backdrop > .modal,
:root[data-theme=dark] #modalRoot .modal-backdrop > .modal{
  background:var(--card,var(--panel,#1E293B))!important;
  color:var(--mo-text)!important;
  border-color:var(--line)!important;
}
.dark #modalRoot .modal-backdrop,
:root[data-theme=dark] #modalRoot .modal-backdrop{
  background:rgba(0,0,0,.55)!important;backdrop-filter:blur(4px);
}

/* Notification rows — kill hardcoded light fills in dark mode and
   restore theme-aware tint. Keep severity accent via left border. */
.dark .notif-row,.dark .notification,
:root[data-theme=dark] .notif-row,:root[data-theme=dark] .notification{
  background:var(--card,var(--panel,#1E293B))!important;
  color:var(--mo-text)!important;
  border-color:var(--line)!important;
}
.dark .notif-row.unread,.dark .notification.unread,
:root[data-theme=dark] .notif-row.unread,:root[data-theme=dark] .notification.unread{
  background:rgba(245,158,11,.12)!important;
}
.dark .notif-row b,.dark .notification b,
:root[data-theme=dark] .notif-row b,:root[data-theme=dark] .notification b{
  color:var(--mo-ink-strong)!important;
}
.dark .notif-row .muted,.dark .notification .muted,
:root[data-theme=dark] .notif-row .muted,:root[data-theme=dark] .notification .muted{
  color:var(--mo-sub)!important;
}

/* Severity left-border for consistency across all themes */
.notif-row,.notification{border-left-width:4px!important;border-left-style:solid!important}
.notif-row.sev-red,.notification.sev-red{border-left-color:var(--red,#dc2626)!important}
.notif-row.sev-amber,.notification.sev-amber{border-left-color:var(--amber,#f59e0b)!important}
.notif-row.sev-green,.notification.sev-green{border-left-color:var(--green,#16a34a)!important}

/* ============================================================
   v3.6 — NUCLEAR OVERRIDE for notification modal / rows / cards
   Appears LAST so it beats every earlier rule and inline style.
   Uses html-rooted selectors (highest reasonable specificity for
   theme attributes/classes), hardcoded hex values rather than var
   chains, background-image:none to kill any gradient, and * sweep
   to force descendant text to a legible color regardless of
   inline style="color:..." (per user directive).
   ============================================================ */

/* --- Dark theme: notification modal surface --- */
html[data-theme="dark"] #modalRoot .modal,
html[data-theme="dark"] #modalRoot .modal-backdrop > .modal,
html[data-theme="dark"] .modal-card,
html.dark #modalRoot .modal,
html.dark .modal-card,
body.dark #modalRoot .modal,
body.dark .modal-card{
  background-color:#1E293B!important;
  background-image:none!important;
  color:#F8FAFC!important;
  border-color:#334155!important;
}
html[data-theme="dark"] #modalRoot .modal-backdrop,
html.dark #modalRoot .modal-backdrop,
body.dark #modalRoot .modal-backdrop{
  background-color:rgba(0,0,0,.55)!important;
  backdrop-filter:blur(4px);
}

/* Modal header, body, foot inside the dark dialog */
html[data-theme="dark"] #modalRoot .modal .modal-head,
html[data-theme="dark"] #modalRoot .modal .modal-body,
html[data-theme="dark"] #modalRoot .modal .modal-foot,
html[data-theme="dark"] .modal-card .modal-head,
html.dark .modal-card .modal-head,
body.dark .modal-card .modal-head{
  background-color:transparent!important;
  background-image:none!important;
  border-color:#334155!important;
  color:#F8FAFC!important;
}
html[data-theme="dark"] #modalRoot .modal h2,
html[data-theme="dark"] .modal-card h2,
html.dark .modal-card h2,
body.dark .modal-card h2{color:#F8FAFC!important}

/* --- Dark theme: notification rows + any descendant text --- */
html[data-theme="dark"] .notif-row,
html[data-theme="dark"] .notification,
html.dark .notif-row,
html.dark .notification,
body.dark .notif-row,
body.dark .notification{
  background-color:#1E293B!important;
  background-image:none!important;
  color:#F8FAFC!important;
  border-color:#334155!important;
}
html[data-theme="dark"] .notif-row.unread,
html[data-theme="dark"] .notification.unread,
html.dark .notif-row.unread,
html.dark .notification.unread,
body.dark .notif-row.unread,
body.dark .notification.unread{
  background-color:rgba(245,158,11,.14)!important;
  background-image:none!important;
}
html[data-theme="dark"] .notif-row *,
html[data-theme="dark"] .notification *,
html.dark .notif-row *,
html.dark .notification *,
body.dark .notif-row *,
body.dark .notification *{
  color:#F8FAFC!important;
}
html[data-theme="dark"] .notif-row .muted,
html[data-theme="dark"] .notification .muted,
html.dark .notif-row .muted,
html.dark .notification .muted,
body.dark .notif-row .muted,
body.dark .notification .muted{color:#CBD5E1!important}

/* --- Light theme hardening (per user directive): no faint grays --- */
html:not([data-theme="dark"]):not(.dark) body:not(.dark) .notif-row b,
html:not([data-theme="dark"]):not(.dark) body:not(.dark) .notification b,
html:not([data-theme="dark"]):not(.dark) body:not(.dark) .modal-card .modal-head h2,
html:not([data-theme="dark"]):not(.dark) body:not(.dark) #modalRoot .modal .modal-head h2{
  color:#0F172A!important;font-weight:700;
}
html:not([data-theme="dark"]):not(.dark) body:not(.dark) .notif-row .muted,
html:not([data-theme="dark"]):not(.dark) body:not(.dark) .notification .muted{
  color:#475569!important;
}

/* --- Light theme sub-brand (Care Signal "Care Signal Board", etc.) --- */
html:not([data-theme="dark"]):not(.dark) body:not(.dark) #sidebarCompanyName,
html:not([data-theme="dark"]):not(.dark) body:not(.dark) .sidebar .logo b,
html:not([data-theme="dark"]):not(.dark) body:not(.dark) .brand-text .brand-company{
  color:#0F172A!important;
}
html:not([data-theme="dark"]):not(.dark) body:not(.dark) #sidebarSystemName,
html:not([data-theme="dark"]):not(.dark) body:not(.dark) .sidebar .logo small,
html:not([data-theme="dark"]):not(.dark) body:not(.dark) .brand-text .brand-system{
  color:#334155!important;
}

/* ============================================================
   v3.7 — notification-module.js custom popover (.vn-*)
   REAL root cause of the "modal stays white in dark mode / text
   invisible" bug on Care Signal and Patient Flow.

   notification-module.js injects its own inline stylesheet with:
     .vn-popover { background: var(--panel, #fff) }
     .vn-item    { background: var(--soft,  #f8fafc) }
     .vn-item.unread { background: rgba(37,99,235,.08) }
     .vn-body .vn-msg { color: var(--muted, #64748b) }

   CS and PF use --card (not --panel) and don't define --soft, so
   those vars fall through to the hardcoded light fallbacks and the
   popover stays stark white regardless of theme. This block
   overrides the vn-* classes with solid hex values keyed to the
   theme root selector.
   ============================================================ */

/* --- Light-mode defaults (solid, no transparency / blur bleed) --- */
.vn-popover{
  background-color:#FFFFFF!important;
  background-image:none!important;
  color:#0F172A!important;
  border:1px solid #E2E8F0!important;
  box-shadow:0 24px 60px rgba(15,23,42,.18)!important;
}
.vn-backdrop{background-color:rgba(15,23,42,.55)!important;backdrop-filter:blur(2px)}
.vn-head{border-bottom:1px solid #E2E8F0!important}
.vn-head strong{color:#0F172A!important;font-weight:700}
.vn-close{color:#475569!important}
.vn-close:hover{background:#F1F5F9!important}
.vn-mark{color:#1E293B!important;border:1px solid #CBD5E1!important;background:#FFFFFF!important}
.vn-mark:hover{background:#F1F5F9!important}
.vn-item{background-color:#F8FAFC!important;background-image:none!important;color:#0F172A!important}
.vn-item.unread{background-color:#EFF3FB!important;color:#0F172A!important}
.vn-item.read{opacity:.7}
.vn-body strong{color:#0F172A!important;font-weight:700}
.vn-body .vn-msg{color:#475569!important}
.vn-empty{color:#475569!important}
.vn-go{background:#2563EB!important;color:#FFFFFF!important}
.vn-sev-red{border-left-color:#DC2626!important}
.vn-sev-amber{border-left-color:#F59E0B!important}

/* --- Dark-mode overrides (highest-specificity theme selectors) --- */
html[data-theme="dark"] .vn-popover,
html.dark .vn-popover,
body.dark .vn-popover{
  background-color:#1E293B!important;
  background-image:none!important;
  color:#F8FAFC!important;
  border:1px solid #334155!important;
  box-shadow:0 24px 60px rgba(0,0,0,.5)!important;
}
html[data-theme="dark"] .vn-backdrop,
html.dark .vn-backdrop,
body.dark .vn-backdrop{background-color:rgba(0,0,0,.65)!important}
html[data-theme="dark"] .vn-head,
html.dark .vn-head,
body.dark .vn-head{border-bottom-color:#334155!important}
html[data-theme="dark"] .vn-head strong,
html.dark .vn-head strong,
body.dark .vn-head strong{color:#F8FAFC!important}
html[data-theme="dark"] .vn-close,
html.dark .vn-close,
body.dark .vn-close{color:#CBD5E1!important}
html[data-theme="dark"] .vn-close:hover,
html.dark .vn-close:hover,
body.dark .vn-close:hover{background:#273548!important}
html[data-theme="dark"] .vn-mark,
html.dark .vn-mark,
body.dark .vn-mark{
  color:#F8FAFC!important;background:#1E293B!important;border:1px solid #334155!important;
}
html[data-theme="dark"] .vn-mark:hover,
html.dark .vn-mark:hover,
body.dark .vn-mark:hover{background:#273548!important}
html[data-theme="dark"] .vn-item,
html.dark .vn-item,
body.dark .vn-item{
  background-color:#273548!important;
  background-image:none!important;
  color:#F8FAFC!important;
}
html[data-theme="dark"] .vn-item.unread,
html.dark .vn-item.unread,
body.dark .vn-item.unread{
  background-color:rgba(99,102,241,.22)!important;
  color:#F8FAFC!important;
}
html[data-theme="dark"] .vn-body strong,
html.dark .vn-body strong,
body.dark .vn-body strong{color:#F8FAFC!important}
html[data-theme="dark"] .vn-body .vn-msg,
html.dark .vn-body .vn-msg,
body.dark .vn-body .vn-msg{color:#CBD5E1!important}
html[data-theme="dark"] .vn-empty,
html.dark .vn-empty,
body.dark .vn-empty{color:#CBD5E1!important}
html[data-theme="dark"] .vn-go,
html.dark .vn-go,
body.dark .vn-go{background:#6366F1!important;color:#FFFFFF!important}

/* ============================================================
   v3.8 — Opaque modal dialog + solid dim backdrop
   User reports Construction/NDIS popover looked translucent with
   charts/sidebar bleeding through. Root cause: my earlier rule
     .modal,.modal-backdrop{backdrop-filter:blur(4px);background:rgba(...)}
   applied blur to the backdrop (correctly) but ALSO let frosted
   glass show the content underneath. Removing the blur AND
   ensuring every dialog surface + every row is 100% opaque.
   ============================================================ */

/* --- Reset: no backdrop-filter blur anywhere, solid dim only --- */
.modal,.modal-backdrop,
#modalRoot .modal-backdrop{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* --- Backdrop (fullscreen dim) solid dark overlay, no blur --- */
#modal.modal,#modalRoot .modal-backdrop{
  background-color:rgba(15,23,42,.60)!important;
  background-image:none!important;
}
html[data-theme="dark"] #modal.modal,
html[data-theme="dark"] #modalRoot .modal-backdrop,
html.dark #modal.modal,
html.dark #modalRoot .modal-backdrop,
body.dark #modal.modal,
body.dark #modalRoot .modal-backdrop{
  background-color:rgba(0,0,0,.70)!important;
}

/* --- Dialog surface: 100% opaque solid, light + dark hex literals --- */
/* Light mode */
#modal .modal-card,
#modalRoot .modal-backdrop > .modal,
#modalRoot .modal{
  background-color:#FFFFFF!important;
  background-image:none!important;
  opacity:1!important;
  color:#0F172A!important;
  border:1px solid #E2E8F0!important;
  box-shadow:0 24px 60px rgba(15,23,42,.18)!important;
}
/* Dark mode */
html[data-theme="dark"] #modal .modal-card,
html[data-theme="dark"] #modalRoot .modal-backdrop > .modal,
html[data-theme="dark"] #modalRoot .modal,
html.dark #modal .modal-card,
html.dark #modalRoot .modal-backdrop > .modal,
html.dark #modalRoot .modal,
body.dark #modal .modal-card,
body.dark #modalRoot .modal-backdrop > .modal,
body.dark #modalRoot .modal{
  background-color:#1E293B!important;
  background-image:none!important;
  opacity:1!important;
  color:#F8FAFC!important;
  border:1px solid #334155!important;
  box-shadow:0 24px 60px rgba(0,0,0,.5)!important;
}

/* --- Notification rows inside the dialog: 100% opaque --- */
/* Light */
#modal .modal-card .notif-row,#modal .modal-card .notification,
#modalRoot .modal .notif-row,#modalRoot .modal .notification{
  background-color:#F8FAFC!important;
  background-image:none!important;
  opacity:1!important;
  color:#0F172A!important;
}
#modal .modal-card .notif-row.unread,#modal .modal-card .notification.unread,
#modalRoot .modal .notif-row.unread,#modalRoot .modal .notification.unread{
  background-color:#FFFBEB!important;
  background-image:none!important;
}
/* Dark */
html[data-theme="dark"] #modal .modal-card .notif-row,
html[data-theme="dark"] #modal .modal-card .notification,
html[data-theme="dark"] #modalRoot .modal .notif-row,
html[data-theme="dark"] #modalRoot .modal .notification,
html.dark #modal .modal-card .notif-row,
html.dark #modal .modal-card .notification,
body.dark #modal .modal-card .notif-row,
body.dark #modal .modal-card .notification{
  background-color:#273548!important;
  background-image:none!important;
  color:#F8FAFC!important;
}
html[data-theme="dark"] #modal .modal-card .notif-row.unread,
html[data-theme="dark"] #modal .modal-card .notification.unread,
html.dark #modal .modal-card .notif-row.unread,
body.dark #modal .modal-card .notif-row.unread{
  background-color:rgba(245,158,11,.14)!important;
}

/* --- Also harden the custom .vn-* popover (CS/PF) --- */
.vn-popover{opacity:1!important;background-image:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.vn-item{opacity:1!important;background-image:none!important}
html[data-theme="dark"] .vn-popover,
html.dark .vn-popover,
body.dark .vn-popover{opacity:1!important;background-image:none!important}

/* ============================================================
   v3.9 — Dark-mode contrast refinement inside notification modal
   - .btn.soft was unreadable (muddy brand2 bg + dark brand text)
   - Secondary metadata inside .notif-row / .notification was too dim
   - Sub-brand (#sidebarSystemName / .brand-system) in dark mode
     needed a brighter light-slate color
   Light mode untouched.
   ============================================================ */

/* --- Modal action buttons (.btn.soft inside modal + .modal-head .btn.soft) --- */
html[data-theme="dark"] #modal .btn.soft,
html[data-theme="dark"] #modal .modal-card .btn.soft,
html[data-theme="dark"] #modalRoot .modal .btn.soft,
html.dark #modal .btn.soft,
html.dark #modal .modal-card .btn.soft,
body.dark #modal .btn.soft,
body.dark #modal .modal-card .btn.soft{
  background-color:rgba(96,165,250,.18)!important;
  background-image:none!important;
  color:#93C5FD!important;
  border:1px solid rgba(96,165,250,.35)!important;
  font-weight:650!important;
}
html[data-theme="dark"] #modal .btn.soft:hover,
html[data-theme="dark"] #modal .modal-card .btn.soft:hover,
html.dark #modal .btn.soft:hover,
body.dark #modal .btn.soft:hover{
  background-color:rgba(96,165,250,.28)!important;
  color:#DBEAFE!important;
}

/* Also any plain .btn (not primary/ghost/danger) inside the dark modal */
html[data-theme="dark"] #modal .modal-card .btn:not(.primary):not(.danger):not(.ghost),
html.dark #modal .modal-card .btn:not(.primary):not(.danger):not(.ghost),
body.dark #modal .modal-card .btn:not(.primary):not(.danger):not(.ghost){
  background-color:rgba(96,165,250,.18)!important;
  color:#93C5FD!important;
  border:1px solid rgba(96,165,250,.35)!important;
}

/* "Mark all read" / primary secondary action in the modal head */
html[data-theme="dark"] #modal .modal-card > p > .btn.soft,
html[data-theme="dark"] #modal .modal-card .modal-head + p .btn.soft,
html.dark #modal .modal-card > p > .btn.soft,
body.dark #modal .modal-card > p > .btn.soft{
  background-color:rgba(52,211,153,.18)!important;
  color:#6EE7B7!important;
  border:1px solid rgba(52,211,153,.35)!important;
}

/* --- Secondary metadata inside notification rows (dark) --- */
html[data-theme="dark"] #modal .modal-card .notif-row .muted,
html[data-theme="dark"] #modal .modal-card .notification .muted,
html[data-theme="dark"] #modal .modal-card .notif-row > div > div,
html[data-theme="dark"] #modal .modal-card .notification > div,
html.dark #modal .modal-card .notif-row .muted,
html.dark #modal .modal-card .notification .muted,
body.dark #modal .modal-card .notif-row .muted,
body.dark #modal .modal-card .notification .muted{
  color:#CBD5E1!important;
}

/* --- Sub-brand ("건설 현장", "NDIS 운영") in dark sidebar --- */
html[data-theme="dark"] .sidebar .brand-text .brand-system,
html[data-theme="dark"] .sidebar .brand-system,
html[data-theme="dark"] #sidebarSystemName,
html[data-theme="dark"] .sidebar .logo small,
html.dark .sidebar .brand-text .brand-system,
html.dark .sidebar .brand-system,
html.dark #sidebarSystemName,
html.dark .sidebar .logo small,
body.dark .sidebar .brand-text .brand-system,
body.dark .sidebar .brand-system,
body.dark #sidebarSystemName,
body.dark .sidebar .logo small{color:#CBD5E1!important;font-weight:600}
html[data-theme="dark"] .sidebar .brand-text .brand-company,
html[data-theme="dark"] .sidebar #sidebarCompanyName,
html[data-theme="dark"] .sidebar .logo b,
html.dark .sidebar .brand-text .brand-company,
html.dark .sidebar #sidebarCompanyName,
html.dark .sidebar .logo b,
body.dark .sidebar .brand-text .brand-company,
body.dark .sidebar #sidebarCompanyName,
body.dark .sidebar .logo b{color:#F8FAFC!important;font-weight:800}
html[data-theme="dark"] .sidebar .brand-text .brand-ver,
html.dark .sidebar .brand-text .brand-ver,
body.dark .sidebar .brand-text .brand-ver{color:#94A3B8!important}

/* ============================================================
   v4.0 — SYSTEM-WIDE modal / dialog / popover / tooltip audit
   Covers every popup surface: .modal, .modal-card, .modal-body,
   .modal-head, .modal-foot, .dialog, .popover, .tooltip-box,
   .vn-popover, .glossary-item, .help-modal, .detail-modal,
   [role=dialog]. Light + Dark, hex literals, descendant text
   sweep (excluding buttons/pills/svg so interactive controls
   keep their themed colors).
   ============================================================ */

/* === LIGHT MODE === */
.modal, .modal-card, .dialog, .popover, .tooltip-box,
#modalRoot .modal, #modalRoot .modal-backdrop > .modal,
.help-modal, .detail-modal, .site-card-modal, [role="dialog"] {
  background-color:#FFFFFF !important;
  background-image:none !important;
  color:#0F172A !important;
}
.modal :not(button):not(.btn):not(.btn *):not(.pill):not(.pill *):not(.status-chip):not(.risk-badge):not(svg):not(svg *),
.modal-card :not(button):not(.btn):not(.btn *):not(.pill):not(.pill *):not(.status-chip):not(.risk-badge):not(svg):not(svg *),
#modalRoot .modal :not(button):not(.btn):not(.btn *):not(.pill):not(.pill *):not(.status-chip):not(.risk-badge):not(svg):not(svg *),
.dialog :not(button):not(.btn):not(.btn *):not(.pill):not(.pill *):not(.status-chip):not(.risk-badge):not(svg):not(svg *) {
  color:#1E293B;
}
.modal .muted, .modal small.muted, .modal .secondary, .modal .desc,
.modal-card .muted, .modal-card small.muted, .modal-card .secondary, .modal-card .desc,
#modalRoot .modal .muted, #modalRoot .modal small.muted,
.dialog .muted, .dialog .secondary, .dialog .desc,
.modal-head p, .modal-card .modal-head p, #modalRoot .modal .modal-head p {
  color:#475569 !important;
}
.modal p, .modal-card p, #modalRoot .modal p, .dialog p { color:#334155 !important; }
.modal h1, .modal h2, .modal h3,
.modal-card h1, .modal-card h2, .modal-card h3,
#modalRoot .modal h1, #modalRoot .modal h2, #modalRoot .modal h3,
.dialog h1, .dialog h2, .dialog h3 { color:#0F172A !important; font-weight:700; }

/* Inner info / explanation / glossary boxes — light */
.modal .info-box, .modal .explanation-box, .modal .glossary-item,
.modal-card .info-box, .modal-card .explanation-box, .modal-card .glossary-item,
#modalRoot .modal .info-box, #modalRoot .modal .glossary-item {
  background-color:#F8FAFC !important;
  border:1px solid #E2E8F0 !important;
  color:#0F172A !important;
  border-radius:12px; padding:14px;
}
.modal .glossary-item b, .modal-card .glossary-item b,
#modalRoot .modal .glossary-item b { color:#0F172A !important; }
.modal .glossary-item p, .modal-card .glossary-item p,
#modalRoot .modal .glossary-item p { color:#334155 !important; }

/* Form inputs inside modals — light */
.modal input, .modal select, .modal textarea,
.modal-card input, .modal-card select, .modal-card textarea,
#modalRoot .modal input, #modalRoot .modal select, #modalRoot .modal textarea {
  background-color:#F8FAFC !important;
  color:#0F172A !important;
  border:1px solid #E2E8F0 !important;
}
.modal input::placeholder, .modal textarea::placeholder,
.modal-card input::placeholder, .modal-card textarea::placeholder { color:#64748B !important; }

/* === DARK MODE === */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .dialog,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .tooltip-box,
html[data-theme="dark"] #modalRoot .modal,
html[data-theme="dark"] #modalRoot .modal-backdrop > .modal,
html[data-theme="dark"] .help-modal,
html[data-theme="dark"] .detail-modal,
html[data-theme="dark"] [role="dialog"],
html.dark .modal, html.dark .modal-card, html.dark .dialog,
html.dark .popover, html.dark .tooltip-box,
html.dark #modalRoot .modal, html.dark [role="dialog"],
body.dark .modal, body.dark .modal-card, body.dark .dialog,
body.dark .popover, body.dark .tooltip-box,
body.dark #modalRoot .modal, body.dark [role="dialog"] {
  background-color:#1E293B !important;
  background-image:none !important;
  color:#F8FAFC !important;
  border-color:#334155 !important;
}

html[data-theme="dark"] .modal :not(button):not(.btn):not(.btn *):not(.pill):not(.pill *):not(.status-chip):not(.risk-badge):not(svg):not(svg *),
html[data-theme="dark"] .modal-card :not(button):not(.btn):not(.btn *):not(.pill):not(.pill *):not(.status-chip):not(.risk-badge):not(svg):not(svg *),
html[data-theme="dark"] #modalRoot .modal :not(button):not(.btn):not(.btn *):not(.pill):not(.pill *):not(.status-chip):not(.risk-badge):not(svg):not(svg *),
html.dark .modal :not(button):not(.btn):not(.btn *):not(.pill):not(.pill *):not(.status-chip):not(.risk-badge):not(svg):not(svg *),
body.dark .modal :not(button):not(.btn):not(.btn *):not(.pill):not(.pill *):not(.status-chip):not(.risk-badge):not(svg):not(svg *) {
  color:#F8FAFC;
}

html[data-theme="dark"] .modal h1, html[data-theme="dark"] .modal h2, html[data-theme="dark"] .modal h3,
html[data-theme="dark"] .modal-card h1, html[data-theme="dark"] .modal-card h2, html[data-theme="dark"] .modal-card h3,
html[data-theme="dark"] #modalRoot .modal h1, html[data-theme="dark"] #modalRoot .modal h2, html[data-theme="dark"] #modalRoot .modal h3,
html.dark .modal h2, html.dark .modal-card h2, body.dark .modal h2, body.dark .modal-card h2 { color:#F8FAFC !important; }

html[data-theme="dark"] .modal .muted,
html[data-theme="dark"] .modal .secondary,
html[data-theme="dark"] .modal .desc,
html[data-theme="dark"] .modal p,
html[data-theme="dark"] .modal small.muted,
html[data-theme="dark"] .modal-card .muted,
html[data-theme="dark"] .modal-card p,
html[data-theme="dark"] #modalRoot .modal .muted,
html[data-theme="dark"] #modalRoot .modal p,
html[data-theme="dark"] .modal-head p,
html.dark .modal .muted, html.dark .modal-card .muted,
body.dark .modal .muted, body.dark .modal-card .muted,
html.dark .modal p, html.dark .modal-card p,
body.dark .modal p, body.dark .modal-card p { color:#CBD5E1 !important; }

/* Dark inner info / glossary box */
html[data-theme="dark"] .modal .info-box,
html[data-theme="dark"] .modal .explanation-box,
html[data-theme="dark"] .modal .glossary-item,
html[data-theme="dark"] .modal-card .info-box,
html[data-theme="dark"] .modal-card .explanation-box,
html[data-theme="dark"] .modal-card .glossary-item,
html[data-theme="dark"] #modalRoot .modal .info-box,
html[data-theme="dark"] #modalRoot .modal .glossary-item,
html.dark .modal .glossary-item, html.dark .modal-card .glossary-item,
html.dark #modalRoot .modal .glossary-item,
body.dark .modal .glossary-item, body.dark .modal-card .glossary-item {
  background-color:#0F172A !important;
  border:1px solid #334155 !important;
  color:#F8FAFC !important;
}
html[data-theme="dark"] .modal .glossary-item b,
html[data-theme="dark"] .modal-card .glossary-item b,
html[data-theme="dark"] #modalRoot .modal .glossary-item b,
html.dark .modal .glossary-item b, body.dark .modal-card .glossary-item b { color:#F8FAFC !important; }
html[data-theme="dark"] .modal .glossary-item p,
html[data-theme="dark"] .modal-card .glossary-item p,
html[data-theme="dark"] #modalRoot .modal .glossary-item p,
html.dark .modal .glossary-item p, body.dark .modal-card .glossary-item p { color:#CBD5E1 !important; }

/* Dark form inputs inside modals */
html[data-theme="dark"] .modal input,
html[data-theme="dark"] .modal select,
html[data-theme="dark"] .modal textarea,
html[data-theme="dark"] .modal-card input,
html[data-theme="dark"] .modal-card select,
html[data-theme="dark"] .modal-card textarea,
html[data-theme="dark"] #modalRoot .modal input,
html[data-theme="dark"] #modalRoot .modal select,
html[data-theme="dark"] #modalRoot .modal textarea,
html.dark .modal input, html.dark .modal-card input, html.dark .modal-card select, html.dark .modal-card textarea,
body.dark .modal input, body.dark .modal-card input, body.dark .modal-card select, body.dark .modal-card textarea {
  background-color:#0F172A !important;
  color:#F8FAFC !important;
  border:1px solid #334155 !important;
}
html[data-theme="dark"] .modal input::placeholder,
html[data-theme="dark"] .modal textarea::placeholder,
html[data-theme="dark"] .modal-card input::placeholder,
html[data-theme="dark"] .modal-card textarea::placeholder,
html[data-theme="dark"] #modalRoot .modal input::placeholder,
html[data-theme="dark"] #modalRoot .modal textarea::placeholder,
html.dark .modal input::placeholder, body.dark .modal input::placeholder { color:#94A3B8 !important; }

/* Floating popovers / dropdowns (language picker, filter dropdown, kebab menu) */
.lang-picker-menu, .language-picker-menu, .filter-dropdown,
.user-menu, .card-more-menu, .more-menu {
  background-color:#FFFFFF !important;
  color:#0F172A !important;
  border:1px solid #E2E8F0 !important;
  box-shadow:0 12px 32px rgba(15,23,42,.14) !important;
}
html[data-theme="dark"] .lang-picker-menu,
html[data-theme="dark"] .language-picker-menu,
html[data-theme="dark"] .filter-dropdown,
html[data-theme="dark"] .user-menu,
html[data-theme="dark"] .card-more-menu,
html[data-theme="dark"] .more-menu,
html.dark .lang-picker-menu, html.dark .language-picker-menu, html.dark .filter-dropdown, html.dark .card-more-menu, html.dark .more-menu,
body.dark .lang-picker-menu, body.dark .language-picker-menu, body.dark .filter-dropdown, body.dark .card-more-menu, body.dark .more-menu {
  background-color:#1E293B !important;
  color:#F8FAFC !important;
  border:1px solid #334155 !important;
  box-shadow:0 12px 32px rgba(0,0,0,.5) !important;
}
html[data-theme="dark"] .lang-picker-menu button:hover,
html[data-theme="dark"] .card-more-menu button:hover,
html[data-theme="dark"] .more-menu button:hover,
html.dark .card-more-menu button:hover,
body.dark .card-more-menu button:hover {
  background-color:#273548 !important; color:#F8FAFC !important;
}