/* ============================================================================
   Digital Space — glass.css  (v096)
   "Glassy Dashboard" look: frosted, see-through panels floating over a soft,
   blurred room photo — like the CRM pipeline reference.

   • Loads LAST, after fresh.css + calendar-clean.css.
   • Everything is scoped to body.glass, so turning Glass off in the sidebar
     (Appearance → Glass) returns the app to the exact v095 look.
   • Colours still come from the chosen accent theme (Bloom, Forest, Ocean…).
     js/glass.js swaps the solid surface colours (--card, --panel …) for
     see-through ones; the rules here add the blur, white edges and shine.
   • Only the sidebar, top bar, dialogs and pop-ups use real backdrop blur.
     The photo itself is pre-blurred, so cards stay light on phones.
   ========================================================================== */

/* ── The backdrop ───────────────────────────────────────────────────────── */
html:has(body.glass){ background:#E9E1D6; }
html body.glass{ background:transparent!important; }
html body.glass::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 55% at 92% 4%,  color-mix(in srgb, var(--tint2) 16%, transparent), transparent 70%),
    radial-gradient(55% 60% at 0% 100%, color-mix(in srgb, var(--brand2) 20%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 40%),
    url("../icons/glass-bg.jpg?v=096") center/cover no-repeat;
}
html:has(body.glass.dark){ background:#120D0F; }
html body.glass.dark::before{
  background:
    radial-gradient(60% 55% at 92% 4%,  color-mix(in srgb, var(--tint2) 14%, transparent), transparent 70%),
    radial-gradient(55% 60% at 0% 100%, color-mix(in srgb, var(--brand2) 30%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(14,10,12,.70), rgba(14,10,12,.82)),
    url("../icons/glass-bg.jpg?v=096") center/cover no-repeat;
}

/* Shared glass recipe */
html body.glass.glass{
  --glass-edge: rgba(255,255,255,.62);
  --glass-edge-soft: rgba(255,255,255,.38);
  --glass-shine: inset 0 1px 0 rgba(255,255,255,.75);
  --glass-shadow: 0 10px 30px -12px rgba(70,40,30,.18), 0 2px 6px -2px rgba(70,40,30,.06);
  --glass-blur: blur(24px) saturate(170%);
}
html body.glass.glass.dark{
  --glass-edge: rgba(255,255,255,.14);
  --glass-edge-soft: rgba(255,255,255,.08);
  --glass-shine: inset 0 1px 0 rgba(255,255,255,.08);
  --glass-shadow: 0 14px 34px -14px rgba(0,0,0,.6);
}

/* ── Frame: sidebar, top bar, page panel ────────────────────────────────── */
html body.glass.glass .sidebar,
html body.glass.glass:not(.dark) .topbar,
html body.glass.glass.dark .topbar{
  background:var(--side)!important;
  border:1px solid var(--glass-edge)!important;
  box-shadow:var(--glass-shine), var(--glass-shadow)!important;
  backdrop-filter:var(--glass-blur)!important; -webkit-backdrop-filter:var(--glass-blur)!important;
}
html body.glass.glass .content{
  background:var(--panel)!important;
  border:1px solid var(--glass-edge-soft)!important;
  box-shadow:var(--glass-shine)!important;
}

/* ── Cards: translucent white panes with a bright edge ──────────────────── */
html body.glass.glass :is(.panel, .kpi, .wo-card, .cc-card, .cc-side-card, .adm-panel, .fig, .clk-t, .wc-card, .pf-stat, .table-wrapper, .year-month){
  border:1px solid var(--glass-edge)!important;
  box-shadow:var(--glass-shine), var(--glass-shadow)!important;
}
html body.glass.glass :is(.panel, .kpi):not(.md-plan){
  transition:transform .35s var(--ease,ease), box-shadow .35s var(--ease,ease)!important;
}
@media (hover:hover){
  html body.glass.glass :is(.kpi, .wo-card):hover{
    transform:translateY(-4px);
    box-shadow:var(--glass-shine), 0 18px 40px -16px rgba(70,40,30,.28)!important;
  }
}

/* Accent "hero" tiles stay rich but get the glass edge + shine */
html body.glass.glass .kpis > .kpi:first-child,
html body.glass.glass :is(.wo-primary, .md-plan, .studio-card, .pay-net){
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 16px 34px -14px color-mix(in srgb, var(--brand) 70%, transparent)!important;
}

/* Tables sit directly on the glass: no white cell blocks */
html body.glass.glass table{ background:transparent!important; }
html body.glass.glass th{ background:rgba(255,255,255,.30)!important; }
html body.glass.glass.dark th{ background:rgba(255,255,255,.05)!important; }
html body.glass.glass tbody tr:hover td{ background:rgba(255,255,255,.35)!important; }
html body.glass.glass.dark tbody tr:hover td{ background:rgba(255,255,255,.05)!important; }

/* ── Inputs, pills, segmented controls ──────────────────────────────────── */
html body.glass.glass :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea, .search, .ws-select){
  background:rgba(255,255,255,.55)!important;
  border:1px solid var(--glass-edge)!important;
}
html body.glass.glass.dark :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea, .search, .ws-select){
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.12)!important;
}
html body.glass.glass :is(.search, .cc-search) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]){ background:transparent!important; border:none!important; box-shadow:none!important; }
html body.glass.glass .cc-search{ background:rgba(255,255,255,.55)!important; border:1px solid var(--glass-edge)!important; }
html body.glass.glass.dark .cc-search{ background:rgba(255,255,255,.06)!important; border-color:rgba(255,255,255,.12)!important; }
html body.glass.glass :is(input, select, textarea):focus{
  background:rgba(255,255,255,.82)!important;
  border-color:color-mix(in srgb, var(--brand2) 55%, white)!important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand2) 18%, transparent)!important;
}
html body.glass.glass.dark :is(input, select, textarea):focus{ background:rgba(255,255,255,.10)!important; }
html body.glass.glass option{ background:#fff; color:#1A1414; }
html body.glass.glass.dark option{ background:#241B1E; color:#F4ECEE; }

html body.glass.glass :is(.appearance-picker, .wo-tabs, .pf-seg-btns, .cc-seg, .an-range, .adm-tabs, .wo-filter, .pf-chip, .cc-today, .cc-addday, .pay-day, .pay-doc, .btn-line, .top-pill, .sync-pill){
  background:rgba(255,255,255,.45)!important;
  border:1px solid var(--glass-edge)!important;
  backdrop-filter:none!important;
}
html body.glass.glass.dark :is(.appearance-picker, .wo-tabs, .pf-seg-btns, .cc-seg, .an-range, .adm-tabs, .wo-filter, .pf-chip, .cc-today, .cc-addday, .pay-day, .pay-doc, .btn-line, .top-pill, .sync-pill){
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.12)!important;
}

/* Brand buttons: a little gloss */
html body.glass.glass :is(.btn-brand, .btn-accent){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 20px -8px color-mix(in srgb, var(--brand) 75%, transparent)!important;
}

/* Bar tracks / rings read as etched glass */
html body.glass.glass .bar-tr{ background:rgba(255,255,255,.45)!important; box-shadow:inset 0 1px 2px rgba(70,40,30,.08); }
html body.glass.glass.dark .bar-tr{ background:rgba(255,255,255,.07)!important; }
html body.glass.glass .ring .ri{ background:rgba(255,255,255,.75)!important; }
html body.glass.glass.dark .ring .ri{ background:rgba(30,22,25,.85)!important; }

/* Calendar day cells */
html body.glass.glass :is(.day:not(.empty), .cc-day){
  background:rgba(255,255,255,.34)!important;
  border-color:rgba(255,255,255,.5)!important;
}
html body.glass.glass.dark :is(.day:not(.empty), .cc-day){
  background:rgba(255,255,255,.04)!important;
  border-color:rgba(255,255,255,.07)!important;
}
html body.glass.glass :is(.cc-day.is-today, .day.today){ background:rgba(255,255,255,.72)!important; }
html body.glass.glass.dark :is(.cc-day.is-today, .day.today){ background:rgba(255,255,255,.12)!important; }

/* ── Dialogs, pop-ups, toasts: real frosted glass ───────────────────────── */
html body.glass.glass .overlay{
  background:color-mix(in srgb, var(--brand) 14%, rgba(30,20,18,.28))!important;
  backdrop-filter:blur(10px) saturate(120%)!important; -webkit-backdrop-filter:blur(10px) saturate(120%)!important;
}
html body.glass.glass .modal,
html body.glass.glass:not(.dark) .modal{
  background:rgba(255,255,255,.80)!important;
  border:1px solid rgba(255,255,255,.8)!important;
  box-shadow:inset 0 1px 0 #fff, 0 40px 80px -30px rgba(40,20,15,.45)!important;
  backdrop-filter:blur(30px) saturate(180%)!important; -webkit-backdrop-filter:blur(30px) saturate(180%)!important;
}
html body.glass.glass.dark .modal{
  background:rgba(30,22,25,.82)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 40px 80px -30px rgba(0,0,0,.7)!important;
}
html body.glass.glass .modal :is(.panel, .kpi){ box-shadow:none!important; }
html body.glass.glass :is(.toast, #mdRemStack > *, .qa-menu, .crm-menu){
  backdrop-filter:blur(20px) saturate(160%)!important; -webkit-backdrop-filter:blur(20px) saturate(160%)!important;
}

/* Login screen sits on the same backdrop */
html body.glass.glass .login-card{
  background:rgba(255,255,255,.14)!important;
  border:1px solid rgba(255,255,255,.35)!important;
  backdrop-filter:blur(26px) saturate(160%)!important; -webkit-backdrop-filter:blur(26px) saturate(160%)!important;
}

/* ── The Glass switch in the sidebar ────────────────────────────────────── */
html body .glass-switch{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:calc(100% - 28px); box-sizing:border-box; margin:6px 14px 4px; padding:9px 12px; min-height:40px;
  border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink);
  font:500 12.5px/1 var(--font); cursor:pointer;
}
html body.glass .glass-switch{ border-color:var(--glass-edge); background:rgba(255,255,255,.5); }
html body.glass.dark .glass-switch{ background:rgba(255,255,255,.07); }
html body .glass-switch .gs-t{ display:inline-flex; align-items:center; gap:8px; }
html body .glass-switch .gs-k{
  position:relative; width:34px; height:20px; border-radius:999px; flex-shrink:0;
  background:color-mix(in srgb, var(--ink) 18%, transparent); transition:background .2s;
}
html body .glass-switch .gs-k::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s var(--ease,ease);
}
html body .glass-switch[aria-pressed="true"] .gs-k{ background:var(--brand2); }
html body .glass-switch[aria-pressed="true"] .gs-k::after{ transform:translateX(14px); }
html body .glass-switch:focus-visible{ outline:2px solid var(--brand2); outline-offset:2px; }

/* Low-power / reduced-transparency: keep the look but drop live blur */
@media (prefers-reduced-transparency:reduce){
  html body.glass.glass *{ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
  html body.glass.glass .modal{ background:var(--card-solid,#fff)!important; }
}