/* Premium Fluid Glass: Midnight Sapphire material and shared components. */
:root[data-theme="midnight-sapphire"]{--fluid-bg:#111522;--fluid-base:#1E263B;--fluid-surface:#303D59;--fluid-raised:#536684;--fluid-accent:#98A9C4;--fluid-ink:#DCE3EF}

:root[data-theme="midnight-sapphire"]{
  color-scheme:dark;
  --bg:var(--fluid-bg);--sidebar:var(--fluid-base);--card:var(--fluid-base);--card2:var(--fluid-surface);
  --line:color-mix(in srgb,var(--fluid-ink) 24%,transparent);--text:var(--fluid-ink);
  --muted:color-mix(in srgb,var(--fluid-ink) 80%,var(--fluid-base));
  --dim:color-mix(in srgb,var(--fluid-ink) 68%,var(--fluid-base));
  --accent:var(--fluid-accent);--accent-dark:var(--fluid-surface);
  --green:#8ee5b6;--red:#ff9f9b;--yellow:#f0d29c;--radius:20px;
  --topbar-bg:var(--fluid-base);--field-bg:var(--fluid-base);--field-border:color-mix(in srgb,var(--fluid-ink) 28%,transparent);
  --field-placeholder:var(--dim);--focus-ring:color-mix(in srgb,var(--fluid-accent) 28%,transparent);
  --primary-bg:var(--fluid-accent);--primary-text:var(--fluid-bg);--primary-hover:var(--fluid-ink);
  --brand-text:var(--fluid-bg);--nav-text:var(--muted);--nav-hover:var(--fluid-surface);
  --sidebar-foot:var(--muted);--breadcrumb-divider:var(--dim);--breadcrumb-text:var(--text);
  --secondary-bg:var(--fluid-surface);--secondary-border:var(--field-border);--secondary-text:var(--text);
  --metric-line:var(--line);--metric-symbol:var(--dim);--chart-grid:var(--line);--chart-label:var(--muted);
  --chart-zero:var(--dim);--chart-track:var(--fluid-surface);--chart-end:var(--fluid-ink);
  --neutral-dot:var(--muted);--table-head:var(--fluid-surface);--table-line:var(--line);
  --number-border:var(--field-border);--pill-bg:var(--fluid-surface);--pill-text:var(--text);
  --pill-no-bg:#472c32;--pill-no-text:#ffd1cc;--pill-partial-bg:#4b3b2b;--pill-partial-text:#ffe1ac;
  --pill-yes-bg:#26483a;--pill-yes-text:#c4f3d8;--bar-track:var(--fluid-surface);
  --callout-border:var(--field-border);--callout-bg:var(--fluid-surface);--callout-text:var(--text);
  --calendar-button:var(--fluid-surface);--day-bg:var(--fluid-base);--day-border:var(--field-border);
  --overlay-bg:#020504bf;--drawer-bg:var(--fluid-base);--drawer-border:var(--field-border);
  --close-bg:var(--fluid-surface);--detail-bg:var(--fluid-surface);--field-text:var(--text);
  --attachment-bg:var(--fluid-surface);--toast-bg:var(--fluid-surface);--toast-text:var(--text);
  --toast-border:var(--fluid-accent);--review-bg:var(--fluid-surface);--process-bg:var(--fluid-surface);
  --process-hover:var(--fluid-raised);--fluid-glass:color-mix(in srgb,var(--fluid-base) 82%,transparent);
  --fluid-glass-strong:color-mix(in srgb,var(--fluid-base) 91%,transparent);
  --fluid-glint:color-mix(in srgb,var(--fluid-ink) 19%,transparent);
  --fluid-glow:color-mix(in srgb,var(--fluid-accent) 15%,transparent);
  font-family:var(--font-ui);font-variant-numeric:tabular-nums;
}

:root[data-theme="midnight-sapphire"] body{
  background:radial-gradient(ellipse at 86% 3%,var(--fluid-glow),transparent 44%),
    radial-gradient(ellipse at 5% 95%,color-mix(in srgb,var(--fluid-raised) 15%,transparent),transparent 42%),var(--fluid-bg);
}
:root[data-theme="midnight-sapphire"] :is(button,a,input,select,textarea,summary){touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:root[data-theme="midnight-sapphire"] :is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--fluid-ink);outline-offset:3px;box-shadow:0 0 0 5px var(--focus-ring)}

/* A floating navigation surface with one moving, elastic selection. */
.fluid-nav-indicator{display:none}
:root[data-theme="midnight-sapphire"] .shell{gap:var(--space-12)}
:root[data-theme="midnight-sapphire"] .sidebar{
  width:250px;height:calc(100vh - 28px);margin:var(--space-frame) 0 var(--space-frame) var(--space-frame);top:14px;padding:var(--space-24) var(--space-16) var(--space-20);
  border:1px solid var(--line);border-radius:24px;background:var(--fluid-glass-strong);
  box-shadow:inset 0 1px 0 var(--fluid-glint),0 20px 50px #0004;
  backdrop-filter:blur(22px) saturate(132%);-webkit-backdrop-filter:blur(22px) saturate(132%);
}
:root[data-theme="midnight-sapphire"] .brandmark{
  border-radius:12px;background:var(--fluid-accent);color:var(--fluid-bg);box-shadow:inset 0 1px 0 #fff5,0 8px 22px var(--fluid-glow);
}
:root[data-theme="midnight-sapphire"] .sidebar nav{position:relative;isolation:isolate;gap:var(--space-4)}
:root[data-theme="midnight-sapphire"] .fluid-nav-indicator{
  display:block;position:absolute;left:0;top:0;z-index:-1;width:100%;height:0;border:1px solid var(--line);border-radius:13px;
  background:color-mix(in srgb,var(--fluid-raised) 43%,var(--fluid-base));
  box-shadow:inset 0 1px 0 var(--fluid-glint),0 7px 20px var(--fluid-glow);
  transform:translateY(0);transition:transform .36s cubic-bezier(.22,1,.36,1),background-color .24s ease;
  pointer-events:none;
}
:root[data-theme="midnight-sapphire"] .sidebar nav button{
  position:relative;z-index:1;min-height:43px;border:1px solid transparent;border-radius:13px;padding:var(--space-12) var(--space-12);
  color:var(--nav-text);background:transparent;transition:color .2s ease,transform .25s cubic-bezier(.2,1.5,.4,1);
}
:root[data-theme="midnight-sapphire"] .sidebar nav button:hover{color:var(--text);background:transparent;transform:translateX(2px)}
:root[data-theme="midnight-sapphire"] .sidebar nav button:active{transform:scale(.97)}
:root[data-theme="midnight-sapphire"] .sidebar nav button.active{color:var(--text);background:transparent}

/* Dashboard, filters, forms and details share the same material. */
:root[data-theme="midnight-sapphire"] .topbar{
  height:auto;min-height:68px;margin:var(--space-frame) var(--space-frame) 0 0;padding:var(--space-12) var(--space-24);gap:var(--space-12);flex-wrap:wrap;
  border:1px solid var(--line);border-radius:20px;background:var(--fluid-glass-strong);
  box-shadow:inset 0 1px 0 var(--fluid-glint),0 10px 34px #0002;
  backdrop-filter:blur(20px) saturate(132%);-webkit-backdrop-filter:blur(20px) saturate(132%);
}
:root[data-theme="midnight-sapphire"] .content{padding:var(--space-24) var(--space-24) var(--space-72)}
:root[data-theme="midnight-sapphire"] .pagehead h1{font-family:var(--font-heading);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-heading)}
:root[data-theme="midnight-sapphire"] .card{
  background:var(--fluid-glass);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:inset 0 1px 0 var(--fluid-glint),0 16px 42px #0002;
  backdrop-filter:blur(15px) saturate(120%);-webkit-backdrop-filter:blur(15px) saturate(120%);
  transition:background-color .3s ease,border-color .3s ease,transform .3s ease;
}
:root[data-theme="midnight-sapphire"] :is(.card,.drawer,.topbar,.sidebar):hover{border-color:color-mix(in srgb,var(--fluid-ink) 34%,transparent)}
:root[data-theme="midnight-sapphire"] :is(input,select,textarea){
  background:var(--fluid-glass-strong);color:var(--text);border:1px solid var(--field-border);border-radius:12px;
}
:root[data-theme="midnight-sapphire"] select option{background:var(--fluid-base);color:var(--text)}
:root[data-theme="midnight-sapphire"] :is(input,textarea)::placeholder{color:var(--dim)}
:root[data-theme="midnight-sapphire"] :is(input,select,textarea):focus{border-color:var(--accent)}
:root[data-theme="midnight-sapphire"] :is(.primary,.secondary,.datechip,.theme-picker,.scope-picker select,.close,.drawer-expand,.filter-toggle){border-radius:999px}
:root[data-theme="midnight-sapphire"] .primary{
  color:var(--primary-text);background:var(--accent);border:1px solid var(--accent);
  box-shadow:inset 0 1px 0 #fff5,0 8px 22px var(--fluid-glow);
  transition:transform .24s cubic-bezier(.2,1.5,.4,1),background-color .22s ease,box-shadow .22s ease;
}
:root[data-theme="midnight-sapphire"] .primary:hover{background:var(--primary-hover);transform:translateY(-2px)}
:root[data-theme="midnight-sapphire"] .primary:active{transform:scale(.96)}
:root[data-theme="midnight-sapphire"] .secondary{background:var(--secondary-bg);border-color:var(--secondary-border);color:var(--text);transition:transform .24s cubic-bezier(.2,1.5,.4,1),border-color .22s ease}
:root[data-theme="midnight-sapphire"] .secondary:hover{transform:translateY(-2px);border-color:var(--accent)}
:root[data-theme="midnight-sapphire"] .secondary:active{transform:scale(.97)}
:root[data-theme="midnight-sapphire"] .metric:before{background:var(--line)}
:root[data-theme="midnight-sapphire"] .metric.featured:before{background:var(--accent)}
:root[data-theme="midnight-sapphire"] :is(.table th,.table td){border-color:var(--line)}
:root[data-theme="midnight-sapphire"] .table th{background:var(--fluid-glass-strong);color:var(--muted)}
:root[data-theme="midnight-sapphire"] .table tbody tr:hover{background:var(--fluid-glow)}
:root[data-theme="midnight-sapphire"] .day{background:var(--fluid-glass-strong);border-color:var(--line);color:var(--text)}
:root[data-theme="midnight-sapphire"] .day:hover{background:var(--fluid-surface)}
:root[data-theme="midnight-sapphire"] .day.hastrade{border-color:var(--accent)}
:root[data-theme="midnight-sapphire"] :is(.detailbox,.reviewitem,.attachment,.numberpill,.callout){background:var(--fluid-glass-strong);border-color:var(--line);color:var(--text)}
:root[data-theme="midnight-sapphire"] .overlay{background:var(--overlay-bg)}
:root[data-theme="midnight-sapphire"] .drawer{background:var(--fluid-glass-strong);border-color:var(--line);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}
:root[data-theme="midnight-sapphire"] .form-actions{background:var(--fluid-glass-strong)}
:root[data-theme="midnight-sapphire"] .toast{background:var(--fluid-glass-strong);color:var(--text);border-color:var(--accent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

/* Desktop host: the shell is a controlled scrim; cards keep data readable over wallpaper. */
:root[data-desktop-glass="true"][data-theme="midnight-sapphire"]{background:transparent!important}
:root[data-desktop-glass="true"][data-theme="midnight-sapphire"] body{background:transparent!important}
:root[data-desktop-glass="true"][data-theme="midnight-sapphire"] .shell{background:color-mix(in srgb,var(--fluid-bg) 82%,transparent)}
.desktop-window-controls{display:flex;align-items:center;gap:var(--space-4)}.desktop-window-controls[hidden],.desktop-window-controls button[hidden]{display:none!important}.desktop-window-controls button{width:30px;height:30px;border:1px solid var(--line);border-radius:9px;background:var(--card2);color:var(--text);font-size:var(--icon-18);line-height:1}.desktop-window-controls button:hover{border-color:var(--accent);background:var(--nav-hover)}.desktop-window-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.desktop-drag-bar[hidden]{display:none!important}
:root[data-desktop-app="true"] .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"drag controls" "breadcrumb breadcrumb" "actions actions";align-items:center;min-height:145px;height:auto;row-gap:var(--space-4)}
:root[data-desktop-app="true"] .desktop-drag-bar{grid-area:drag;display:flex;align-items:center;gap:var(--space-8);width:100%;height:38px;min-width:0;padding:0 var(--space-12);border-radius:11px;background:var(--card2);color:var(--muted);font-size:var(--type-caption);letter-spacing:var(--tracking-small);user-select:none;-webkit-user-select:none;cursor:move;-webkit-app-region:drag;app-region:drag}
:root[data-desktop-app="true"] .desktop-drag-bar strong{color:var(--text);letter-spacing:var(--tracking-label)}
:root[data-desktop-app="true"] .desktop-drag-grip{font-size:var(--icon-18);line-height:1;color:var(--accent)}
:root[data-desktop-app="true"] .breadcrumbs{grid-area:breadcrumb}
:root[data-desktop-app="true"] .topactions{grid-area:actions;justify-content:flex-end;flex-wrap:wrap;gap:var(--space-12)}
:root[data-desktop-app="true"] .desktop-window-controls{grid-area:controls}
:root[data-desktop-app="true"] .breadcrumbs{-webkit-app-region:drag;app-region:drag;cursor:grab;flex:1;min-height:38px;display:flex;align-items:center}
:root[data-desktop-app="true"] .topactions,:root[data-desktop-app="true"] .desktop-window-controls{-webkit-app-region:no-drag;app-region:no-drag}

@media(max-width:1050px){
  :root[data-theme="midnight-sapphire"] .sidebar{width:74px;padding:var(--space-24) var(--space-8)}
  :root[data-theme="midnight-sapphire"] .topbar{margin-right:var(--space-12)}
  :root[data-theme="midnight-sapphire"] .content{padding:var(--space-24) var(--space-16) var(--space-64)}
}
@media(max-width:600px){
  :root[data-theme="midnight-sapphire"] .sidebar{width:53px;margin:var(--space-8) 0 var(--space-8) var(--space-8);height:calc(100vh - 16px);border-radius:14px}
  :root[data-theme="midnight-sapphire"] .sidebar :is(.brand strong,.brand small,.navlabel,.sidebar-bottom span){display:none}
  :root[data-theme="midnight-sapphire"] .sidebar .brand{padding:0 0 var(--space-20);justify-content:center}
  :root[data-theme="midnight-sapphire"] .sidebar nav button{font-size:0;justify-content:center;padding:var(--space-12) var(--space-4)}
  :root[data-theme="midnight-sapphire"] .sidebar .navicon{font-size:var(--icon-20)}
  :root[data-theme="midnight-sapphire"] .topbar{margin:var(--space-8) var(--space-8) 0 0;padding:var(--space-8);border-radius:14px}
  :root[data-theme="midnight-sapphire"] .breadcrumbs{display:none}
  :root[data-theme="midnight-sapphire"] .topactions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;gap:var(--space-8)}
  :root[data-theme="midnight-sapphire"] .topactions .scope-picker:first-of-type{grid-column:1/-1}
  :root[data-theme="midnight-sapphire"] .topactions :is(.scope-picker,.theme-picker){min-width:0;width:100%}
  :root[data-theme="midnight-sapphire"] .topactions :is(.scope-picker select,.theme-picker select){width:100%;max-width:none}
  :root[data-theme="midnight-sapphire"] .theme-picker>span{display:none}
  :root[data-theme="midnight-sapphire"] .topbar .primary.small{grid-column:1/-1}
  :root[data-theme="midnight-sapphire"] .content{padding:var(--space-16) var(--space-8) 45px}
}
@media(prefers-reduced-motion:reduce){
  :root[data-theme="midnight-sapphire"] .fluid-nav-indicator,
  :root[data-theme="midnight-sapphire"] :is(.sidebar nav button,.primary,.secondary,.card){transition-duration:.01ms!important;animation-duration:.01ms!important}
  :root[data-theme="midnight-sapphire"] :is(.sidebar nav button,.primary,.secondary):is(:hover,:active){transform:none!important}
}