/* Sysmologic Project Tracker — "Glass" layer.
   Loaded after app.css and only re-skins it: translucent materials over a soft ambient backdrop, layered depth,
   crisper type and responsive press/hover feedback. Delete the <link> to glass.css in index.html to return to the flat design.

   Principles used (Emil Kowalski / Apple HIG):
   - Material weight encodes hierarchy: sidebar = heavier frost, cards = medium glass, controls = light glass.
     Glass is never stacked on glass; anything inside a glass card is either transparent or a faint tint.
   - Only transform/opacity animate; custom ease-out curves; UI motion stays under ~250ms.
   - Hover effects are gated behind (hover: hover) so touch screens don't get sticky hovers.
   - Frequent actions (navigation, filtering, table rows) do not animate. Popovers, dialogs and toasts do.
   - prefers-reduced-motion / prefers-reduced-transparency / prefers-contrast and print all fall back to solid surfaces. */

:root {
  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* ambient backdrop */
  --canvas: #edf2f7;

  /* glass materials */
  --glass-heavy: rgba(255, 255, 255, .58);   /* sidebar */
  --glass: rgba(255, 255, 255, .64);         /* cards */
  --glass-bar: rgba(255, 255, 255, .60);     /* top bar */
  --glass-control: rgba(255, 255, 255, .74); /* buttons & inputs */
  --glass-pop: rgba(255, 255, 255, .84);     /* popovers & dialogs (need legibility over anything) */
  --glass-tint: rgba(241, 245, 250, .55);    /* sub-areas inside a card (headers, footers) */
  --glass-tint-strong: rgba(236, 241, 247, .82);
  --glass-edge: rgba(255, 255, 255, .78);    /* bright border = light catching the edge */
  --glass-line: rgba(15, 35, 60, .08);       /* hairline dividers on glass */
  --glass-line-strong: rgba(15, 35, 60, .13);
  --blur-heavy: blur(28px) saturate(180%);
  --blur: blur(18px) saturate(170%);
  --blur-light: blur(10px) saturate(160%);

  /* depth */
  --shadow: 0 1px 1px rgba(15, 35, 60, .03), 0 4px 12px -2px rgba(15, 35, 60, .06), 0 14px 32px -12px rgba(15, 35, 60, .10);
  --shadow-raised: 0 1px 1px rgba(15, 35, 60, .04), 0 8px 18px -4px rgba(15, 35, 60, .10), 0 24px 48px -16px rgba(15, 35, 60, .16);
  --shadow-pop: 0 2px 4px rgba(15, 35, 60, .05), 0 16px 40px -8px rgba(15, 35, 60, .22);
  --inner-light: inset 0 1px 0 rgba(255, 255, 255, .85);

  --radius: 1rem;
  --radius-sm: .625rem;
  --radius-xs: .45rem;

  /* re-point the shared tokens at the glass materials so every screen picks them up */
  --bg: var(--canvas);
  --card: var(--glass);
  --surface-lowest: var(--glass);
  --border: var(--glass-line);
  --border-strong: rgba(15, 35, 60, .16);
  --hairline: var(--glass-line);
  --divider: var(--glass-line);
  --outline-variant: var(--glass-line-strong);
}

/* ---------- ambient backdrop: soft colour fields that the glass refracts ---------- */
html { background: var(--canvas); }
body { background: transparent; text-rendering: optimizeLegibility; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(44rem 34rem at 2% 0%, rgba(0, 131, 120, .30), transparent 62%),
    radial-gradient(40rem 32rem at 98% 0%, rgba(56, 150, 230, .24), transparent 60%),
    radial-gradient(40rem 30rem at 55% 45%, rgba(45, 212, 191, .10), transparent 65%),
    radial-gradient(48rem 36rem at 82% 100%, rgba(16, 185, 129, .20), transparent 62%),
    radial-gradient(38rem 30rem at 12% 96%, rgba(99, 102, 241, .16), transparent 60%),
    linear-gradient(180deg, #f2f6fb 0%, #e6edf5 100%);
}

/* ---------- typography: size-specific tracking, tight leading on large text ---------- */
h1 { letter-spacing: -.028em; line-height: 1.15; }
h2 { letter-spacing: -.018em; line-height: 1.25; }
.title-row h1 { letter-spacing: -.032em; }
.dash-head h1 { letter-spacing: -.03em; }
::selection { background: rgba(0, 131, 120, .2); }
code { background: rgba(0, 104, 95, .07); }
:focus-visible { outline: 2px solid rgba(0, 131, 120, .55); outline-offset: 2px; border-radius: .35rem; }

/* ---------- the glass recipe, applied to every card-like surface ---------- */
.card, .kpi, .stat-card, .dash-kpi, .dash-card, .grand-total, .version-chip, .dash-scope,
.list-card-sections .list-section .table-wrap, .table-wrap:not(.card .table-wrap):not(.dash-card .table-wrap) {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--inner-light), var(--shadow);
}
.card, .stat-card, .dash-card, .card.filter-card, .card.list-card, .card.tt-bar, .card.derived-card,
.card.settings-section, .card.bank-card, .grand-total { border-radius: var(--radius); }
.kpi, .dash-kpi { border-radius: var(--radius-sm); }
.version-chip, .dash-scope { border-radius: var(--radius-sm); }
/* A card that holds a popover must sit above the cards after it (backdrop-filter creates a stacking context). */
.card.tt-bar { position: relative; z-index: 5; }
.page-head, .dash-head { position: relative; z-index: 6; }
/* Sections-mode list card is only a wrapper: no material of its own. */
.card.list-card.list-card-sections { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- sidebar: the heaviest material ---------- */
.sidebar {
  background: var(--glass-heavy);
  -webkit-backdrop-filter: var(--blur-heavy); backdrop-filter: var(--blur-heavy);
  border-right: 1px solid var(--glass-edge);
  box-shadow: inset -1px 0 0 rgba(15, 35, 60, .05), 8px 0 32px -16px rgba(15, 35, 60, .12);
  padding: 1.1rem .85rem;
  scrollbar-width: thin; scrollbar-color: rgba(15, 35, 60, .15) transparent;
}
.brand { padding: .35rem .45rem .15rem; border-radius: var(--radius-sm); }
.brand-mark { filter: drop-shadow(0 2px 6px rgba(0, 104, 95, .25)); }
.nav-group { padding: 1rem .8rem .35rem; font-size: .7143rem; letter-spacing: .1em; color: rgba(86, 94, 116, .85); }
.nav-link {
  position: relative; padding: .5rem .8rem; border-radius: var(--radius-xs);
  color: #33413f; font-weight: 500;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 120ms var(--ease-out);
}
.nav-link:active { transform: scale(.98); }
.nav-link[aria-current="page"] {
  color: #fff;
  background: linear-gradient(135deg, #008a7e 0%, #00685f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 16px -6px rgba(0, 104, 95, .55), 0 1px 2px rgba(0, 60, 55, .2);
}
.nav-link-sub { padding-left: 1.85rem; }
.nav-count { background: rgba(0, 104, 95, .09); color: var(--primary-dark); border-radius: 999px; padding: .1rem .45rem; }
.nav-link[aria-current="page"] .nav-count { background: rgba(255, 255, 255, .22); }
.sidefoot { border-top: 1px solid var(--glass-line); }

/* ---------- top bar: translucent, content scrolls underneath ---------- */
.topbar {
  background: var(--glass-bar);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-bottom: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 1px 0 rgba(15, 35, 60, .06), 0 8px 24px -18px rgba(15, 35, 60, .25);
}
.topbar .btn { border-radius: var(--radius-xs); }
.topbar .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 60, 55, .25), 0 6px 14px -6px rgba(0, 104, 95, .55); }
.header-result {
  border: 1px solid rgba(0, 104, 95, .18); border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(227, 243, 240, .9), rgba(255, 255, 255, .7));
  box-shadow: var(--inner-light), 0 4px 14px -6px rgba(0, 104, 95, .3);
  transition: border-color 150ms ease, box-shadow 200ms ease, transform 120ms var(--ease-out);
}
.header-result:active { transform: scale(.98); }
.banner { -webkit-backdrop-filter: var(--blur-light); backdrop-filter: var(--blur-light); border-bottom-color: rgba(15, 35, 60, .06); }
.banner-demo { background: rgba(255, 244, 224, .78); }
.banner-warn { background: rgba(255, 246, 224, .8); }
.banner-error { background: rgba(253, 236, 234, .82); }

/* ---------- buttons: light glass, press feedback on every one ---------- */
.btn {
  border-radius: var(--radius-xs);
  border: 1px solid rgba(15, 35, 60, .12);
  background: var(--glass-control);
  box-shadow: var(--inner-light), 0 1px 2px rgba(15, 35, 60, .06);
  font-weight: 500;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 140ms var(--ease-out);
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-primary {
  color: #fff; border-color: rgba(0, 80, 73, .55);
  background: linear-gradient(180deg, #00877b 0%, #00685f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 60, 55, .25), 0 6px 14px -6px rgba(0, 104, 95, .55);
  text-shadow: 0 1px 0 rgba(0, 50, 45, .2);
}
.btn-danger {
  color: #fff; border-color: rgba(140, 20, 20, .5);
  background: linear-gradient(180deg, #cf2b2b 0%, #b01818 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(120, 10, 10, .25), 0 6px 14px -6px rgba(186, 26, 26, .5);
}
.btn-danger-ghost { color: var(--neg); }
.btn-secondary-solid { background: rgba(227, 243, 240, .85); border-color: rgba(0, 104, 95, .2); }
.btn.btn-copy { background: rgba(204, 251, 241, .8); border-color: rgba(20, 184, 166, .35); }
.btn.btn-link-teal { border-color: rgba(20, 184, 166, .4); }
.btn-icon { border-radius: var(--radius-xs); transition: background-color 150ms ease, color 150ms ease, transform 140ms var(--ease-out); }
.btn-icon:active { transform: scale(.92); }

/* ---------- inputs ---------- */
input[type="text"], input[type="password"], input[type="search"], input[type="date"], select, textarea {
  background-color: var(--glass-control);
  border: 1px solid rgba(15, 35, 60, .14);
  border-radius: var(--radius-xs);
  box-shadow: inset 0 1px 2px rgba(15, 35, 60, .04);
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="date"]:focus, select:focus, textarea:focus {
  outline: none; border-color: rgba(0, 131, 120, .7); background-color: rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 3px rgba(0, 131, 120, .16), inset 0 1px 2px rgba(15, 35, 60, .03);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { background-color: rgba(255, 245, 245, .9); }
.filter-card select, .filter-card input[type="search"], .filter-card input[type="date"] { border-color: rgba(15, 35, 60, .12); border-radius: var(--radius-xs); }
.dash-scope select, .dash-scope input { border-color: rgba(15, 35, 60, .1); border-radius: var(--radius-xs); }
.tag { background: rgba(255, 255, 255, .6); border-color: rgba(15, 35, 60, .12); }
.file-pick input[type="file"] { background: rgba(255, 255, 255, .5); border-color: rgba(15, 35, 60, .12); border-radius: var(--radius-xs); }
.file-pick input[type="file"]::file-selector-button { background: rgba(255, 255, 255, .9); border-color: rgba(15, 35, 60, .14); border-radius: .4rem; transition: background-color 150ms ease; }

/* ---------- tables on glass: no second layer, faint tints only ---------- */
.card .table-wrap, .dash-card .table-wrap, .list-card > div > .table-wrap, .derived-card .table-wrap { background: transparent; border-color: var(--glass-line); }
.table-wrap { border-radius: var(--radius-sm); scrollbar-width: thin; scrollbar-color: rgba(15, 35, 60, .18) transparent; }
.report-sheet .table-wrap { background: #fff; }
table.data { color: #2f3d4f; }
table.data th, table.data td { border-bottom-color: rgba(15, 35, 60, .06); }
table.data thead th {
  background: rgba(244, 247, 251, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-line-strong);
  color: #5d6b80;
}
table.data tbody tr:hover td { background: rgba(0, 131, 120, .045); }
/* renewal rows keep their exact solid colours (the smoke test checks them) */
tfoot td, tr.row-total td, tr.row-subtotal td { background: rgba(240, 244, 249, .92) !important; border-top-color: var(--glass-line-strong); }
td.actions .btn-small {
  background: rgba(255, 255, 255, .7); border-color: rgba(15, 35, 60, .1); border-radius: var(--radius-xs);
  box-shadow: 0 1px 1px rgba(15, 35, 60, .04);
}
td.actions .btn-tinted { background: rgba(241, 245, 249, .85); }
.num-badge { background: rgba(15, 35, 60, .06); }
.list-foot, .derived-head, .settings-bar { background: var(--glass-tint); border-color: var(--glass-line); }
.dash-table th, .dash-pager, .dash-table tfoot td { background: var(--glass-tint); border-color: var(--glass-line); }
.dash-table td { border-bottom-color: rgba(15, 35, 60, .06); }
.dash-table tbody tr:hover td { background: rgba(0, 131, 120, .045); }
.dash-row-current td { background: rgba(0, 131, 120, .06); }
.dash-table-frame, .dash-card > .dash-table-wrap { border-color: var(--glass-line); border-radius: var(--radius-sm); }

/* Time entries */
.te-table thead th { background: var(--glass-tint); border-bottom-color: var(--glass-line); }
.te-week-row td { background: var(--glass-tint-strong); border-color: var(--glass-line); }
.te-day-row td { background: rgba(248, 250, 252, .5); border-bottom-color: rgba(15, 35, 60, .05); }
.te-row td { border-bottom-color: rgba(15, 35, 60, .05); }
.te-row:hover td { background: rgba(0, 131, 120, .045); }
.te-row.te-child { background: rgba(248, 250, 252, .45); }
.te-count { transition: background-color 150ms ease, color 150ms ease, transform 120ms var(--ease-out); }
.te-count:active { transform: scale(.94); }
.te-chevron .icon { transition: transform 200ms var(--ease-out); }

/* ---------- KPIs & stat cards ---------- */
.dash-kpi { padding: 1.05rem 1.1rem 1rem 1.3rem; transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.dash-kpi::before { inset: .9rem auto .9rem 0; width: 3px; border-radius: 0 3px 3px 0; }
.dash-kpi:hover { transform: none; }
.dash-kpi-value { font-size: 1.45rem; letter-spacing: -.025em; }
.stat-card { padding: 1.15rem 1.3rem; transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.stat-value { letter-spacing: -.03em; }
.stat-icon { border-radius: .8rem; box-shadow: var(--inner-light), 0 4px 10px -4px currentColor; }
.stat-card.stat-hl-pos { background: linear-gradient(135deg, var(--glass) 50%, rgba(209, 250, 229, .65)); }
.stat-card.stat-hl-neg { background: linear-gradient(135deg, var(--glass) 50%, rgba(254, 226, 226, .65)); }
.stat-card.stat-hl-warn { background: linear-gradient(135deg, var(--glass) 50%, rgba(254, 243, 199, .7)); }
.kpi { position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; inset: .7rem auto .7rem 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.kpi-neg::before { background: var(--neg); }
.wk-stat { background: var(--glass-tint); border-color: rgba(255, 255, 255, .7); border-radius: var(--radius-sm); }
.wk-share { background: var(--glass-tint); border-color: rgba(255, 255, 255, .7); border-radius: var(--radius-sm); }
.wk-bar { background: rgba(15, 35, 60, .08); }
.wk-seg { background: rgba(255, 255, 255, .6); border-color: rgba(15, 35, 60, .1); border-radius: var(--radius-xs); }
select.wk-metric { background-color: rgba(255, 255, 255, .6); }
.dash-seg { background: rgba(15, 35, 60, .05); border-color: rgba(15, 35, 60, .06); border-radius: var(--radius-xs); padding: 3px; }
.dash-seg-btn { border-radius: .35rem; transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; }
.dash-seg-btn[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgba(15, 35, 60, .1), 0 2px 6px -2px rgba(15, 35, 60, .12); }
.dash-head, .wk-head, .dash-card-head { border-bottom-color: var(--glass-line); }
.dash-plot .dot, .chart svg .dot { stroke: rgba(255, 255, 255, .95); }

/* chips, pills, badges get a touch of translucency so they sit in the glass */
.chip, .count-badge, .fs-count, .section-count { background: rgba(255, 255, 255, .55); border-color: rgba(15, 35, 60, .1); }
.title-badge { box-shadow: var(--inner-light); }
.title-icon { background: linear-gradient(135deg, #2a3d55, #16263a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 14px -6px rgba(15, 35, 60, .6); }

/* tooltips over charts: dark glass */
.dash-tip { background: rgba(23, 37, 55, .82); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-xs); box-shadow: var(--shadow-pop); opacity: 1; }
.chart-tip { background: var(--glass-pop); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-edge); border-radius: var(--radius-xs); box-shadow: var(--shadow-pop); }

/* reports: the sheet stays paper-white so it matches the printout */
.report-sheet { background: rgba(255, 255, 255, .96); border: 1px solid var(--glass-edge); border-radius: var(--radius); box-shadow: var(--shadow-raised); }
.report-card {
  background: var(--glass); -webkit-backdrop-filter: var(--blur-light); backdrop-filter: var(--blur-light);
  border: 1px solid var(--glass-edge); border-radius: var(--radius-sm); box-shadow: var(--inner-light), var(--shadow);
  transition: border-color 150ms ease, background-color 150ms ease, transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.report-card:active { transform: scale(.985); }

/* bank, settings, attachments, notes */
.stored-values.bank-stored, .preview-card, .stored-values { background: rgba(240, 253, 250, .7); border-color: rgba(20, 184, 166, .3); border-radius: var(--radius-sm); }
.bank-stored-row + .bank-stored-row { border-top-color: rgba(20, 184, 166, .18); }
.logo-frame, .logo-preview { background: rgba(255, 255, 255, .7); border-color: rgba(15, 35, 60, .1); }
.att-box { background: rgba(255, 255, 255, .4); border-color: rgba(15, 35, 60, .18); border-radius: var(--radius-sm); }
.att-box.drag { background: rgba(227, 243, 240, .8); }
.att-item { background: rgba(255, 255, 255, .75); border-color: var(--glass-line); border-radius: var(--radius-xs); }
.note, .form-banner { border-radius: var(--radius-xs); }
.replace-steps { border-color: rgba(15, 35, 60, .18); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .35); }
.tt-cell { border-left-color: rgba(15, 35, 60, .12); }
.tt-go { border-radius: var(--radius-xs); background: linear-gradient(180deg, #00877b, #00685f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 14px -6px rgba(0, 104, 95, .55); transition: background-color 150ms ease, transform 140ms var(--ease-out), box-shadow 150ms ease; }
.tt-go:active:not(:disabled) { transform: scale(.97); }
.tt-go.tt-stop { background: linear-gradient(180deg, #cf2b2b, #b01818); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 14px -6px rgba(186, 26, 26, .5); }
.tt-cancel { background: rgba(255, 255, 255, .7); border-color: rgba(15, 35, 60, .12); border-radius: var(--radius-xs); transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 140ms var(--ease-out); }
.tt-cancel:active { transform: scale(.97); }
input.tt-duration:hover, input.tt-duration:focus, input.tt-time:hover, input.tt-time:focus { background: rgba(255, 255, 255, .85); }
.tt-clock.running { text-shadow: 0 0 18px rgba(0, 131, 120, .25); }

/* ---------- popovers: origin-aware, materialise in (scale + opacity), close instantly ---------- */
.notif-panel, .tt-pop {
  background: var(--glass-pop);
  -webkit-backdrop-filter: var(--blur-heavy); backdrop-filter: var(--blur-heavy);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  box-shadow: var(--inner-light), var(--shadow-pop);
  opacity: 1; transform: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.notif-panel { transform-origin: top right; }
.tt-pop { transform-origin: top right; }
@starting-style { .notif-panel, .tt-pop { opacity: 0; transform: translateY(-4px) scale(.97); } }
.notif-head { background: rgba(250, 252, 254, .8); -webkit-backdrop-filter: var(--blur-light); backdrop-filter: var(--blur-light); border-bottom-color: var(--glass-line); }
.notif-item { border-bottom-color: var(--glass-line); }
.notif-item.unread { background: rgba(0, 131, 120, .07); }
.notif-open:hover, .notif-open:focus-visible { background: rgba(0, 131, 120, .06); }
.notif-badge { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 2px 6px rgba(186, 26, 26, .4); }
.tt-pop-item { border-radius: var(--radius-xs); }
.tt-pop-item:hover, .tt-pop-item:focus-visible { background: rgba(0, 131, 120, .07); }
.tt-pop-item[aria-selected="true"] { background: rgba(0, 131, 120, .12); }

/* ---------- dialogs: glass sheet over a dimmed, blurred page ---------- */
dialog.dialog {
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 1.25rem;
  box-shadow: var(--inner-light), 0 2px 6px rgba(11, 28, 48, .06), 0 32px 80px -20px rgba(11, 28, 48, .38);
}
dialog.dialog[open] { animation: glass-dialog-in 220ms var(--ease-out); }
dialog.dialog[open]::backdrop { animation: backdrop-in 220ms var(--ease-out); }
dialog::backdrop { background: rgba(15, 30, 48, .28); -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); }
@keyframes glass-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.dialog-head { background: linear-gradient(180deg, rgba(239, 244, 255, .7), rgba(239, 244, 255, .25)); border-bottom-color: var(--glass-line); }
.dialog-head::before { background: linear-gradient(180deg, #00a394, #00685f); }
.dialog-foot { background: rgba(246, 249, 252, .65); border-top-color: var(--glass-line); }
/* replace the old hover "lift" with press feedback */
.dialog-foot .btn { transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 140ms var(--ease-out); }
.dialog-foot .btn:hover:not(:disabled) { transform: none; }
.dialog-foot .btn:active:not(:disabled) { transform: scale(.97); }

/* ---------- toasts: dark glass, slide up from the corner they live in, leave the same way ---------- */
.toasts { right: 1.25rem; bottom: 1.25rem; gap: .6rem; }
.toast {
  display: flex; align-items: center; gap: .6rem;
  padding: .75rem 1rem .75rem .9rem;
  background: rgba(20, 32, 46, .82);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid rgba(255, 255, 255, .1); border-left: 0;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--shadow-pop);
  font-weight: 500;
  opacity: 1; transform: none;
  transition: opacity 260ms var(--ease-out), transform 360ms var(--ease-drawer);
}
.toast::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: #2dd4bf; box-shadow: 0 0 0 3px rgba(45, 212, 191, .2); }
.toast-error::before { background: #ff6b5e; box-shadow: 0 0 0 3px rgba(255, 107, 94, .22); }
.toast-warn::before { background: var(--yellow); box-shadow: 0 0 0 3px rgba(245, 197, 66, .22); }
.toast-info::before { background: #7cc3e8; box-shadow: 0 0 0 3px rgba(124, 195, 232, .22); }
@starting-style { .toast { opacity: 0; transform: translateY(100%) scale(.98); } }
.toast.toast-leaving { opacity: 0; transform: translateY(30%) scale(.98); transition-duration: 180ms; }

/* ---------- hover: only for real pointers ---------- */
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover:not([aria-current="page"]) { background: rgba(255, 255, 255, .6); color: var(--on-surface); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 1px 2px rgba(15, 35, 60, .05); }
  .btn:hover:not(:disabled) { background-color: rgba(255, 255, 255, .95); border-color: rgba(15, 35, 60, .18); }
  .btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #00796f 0%, #005b53 100%); border-color: rgba(0, 70, 64, .6); }
  .btn-danger:hover:not(:disabled) { background: linear-gradient(180deg, #b82424 0%, #961414 100%); }
  .btn-secondary-solid:hover:not(:disabled) { background: rgba(205, 235, 230, .95); }
  .header-result:hover { border-color: rgba(0, 104, 95, .4); box-shadow: var(--inner-light), 0 0 0 3px rgba(0, 131, 120, .1), 0 6px 18px -6px rgba(0, 104, 95, .35); }
  .dash-kpi:hover, .stat-card:hover { transform: translateY(-2px); box-shadow: var(--inner-light), var(--shadow-raised); }
  .report-card:hover { transform: translateY(-2px); border-color: rgba(0, 131, 120, .35); background: rgba(240, 250, 248, .8); box-shadow: var(--inner-light), var(--shadow-raised); }
  td.actions .btn-small:hover { background: rgba(255, 255, 255, .98); }
  .file-pick input[type="file"]::file-selector-button:hover { background: #fff; }
  .tt-go:hover:not(:disabled) { background: linear-gradient(180deg, #00796f, #005b53); }
  .tt-go.tt-stop:hover:not(:disabled) { background: linear-gradient(180deg, #b82424, #961414); }
  .wk-step:hover { background: rgba(15, 35, 60, .06); }
}
@media not ((hover: hover) and (pointer: fine)) {
  .dash-kpi:hover { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  body::before { background:
    radial-gradient(30rem 24rem at 0% 0%, rgba(0, 131, 120, .18), transparent 62%),
    radial-gradient(28rem 22rem at 100% 100%, rgba(56, 150, 230, .14), transparent 60%),
    linear-gradient(180deg, #f4f7fb 0%, #e9eff6 100%); }
}
@media (max-width: 640px) {
  .card, .stat-card, .dash-card { border-radius: .85rem; }
  .toasts { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; }
}

/* ---------- accessibility fallbacks ---------- */
@media (prefers-reduced-motion: reduce) {
  dialog.dialog[open] { animation: backdrop-in 160ms ease; }
  .toast, .notif-panel, .tt-pop { transition: opacity 160ms ease; transform: none !important; }
  @starting-style { .toast, .notif-panel, .tt-pop { transform: none; } }
  .dash-kpi:hover, .stat-card:hover, .report-card:hover { transform: none !important; }
  .btn:active, .nav-link:active, .tt-go:active, .btn-icon:active { transform: none !important; }
}
/* No backdrop-filter support, reduced transparency or high contrast: frosty solid surfaces. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255, 255, 255, .94); --glass-heavy: rgba(250, 252, 254, .97); --glass-bar: rgba(255, 255, 255, .96); --glass-pop: #fff; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: #fff; --glass-heavy: #fbfcfe; --glass-bar: #fff; --glass-pop: #fff; --glass-control: #fff; }
  .sidebar, .topbar, .card, .stat-card, .dash-kpi, .dash-card, .notif-panel, .tt-pop, dialog.dialog, .toast, .report-card, .kpi { -webkit-backdrop-filter: none; backdrop-filter: none; }
  dialog.dialog { background: #fff; }
  .toast { background: #17252b; }
}
@media (prefers-contrast: more) {
  :root { --glass: #fff; --glass-heavy: #fff; --glass-bar: #fff; --glass-pop: #fff; --glass-control: #fff; --glass-edge: rgba(15, 35, 60, .35); --glass-line: rgba(15, 35, 60, .25); --glass-line-strong: rgba(15, 35, 60, .35); }
  body::before { display: none; }
}

/* ---------- print: plain paper ---------- */
@media print {
  html, body { background: #fff !important; }
  body::before { display: none; }
  .card, .stat-card, .dash-kpi, .dash-card, .kpi, .report-sheet, .grand-total, .table-wrap, table.data thead th {
    background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important;
  }
  .card, .stat-card, .dash-kpi, .dash-card, .kpi { border-color: #d5dde3 !important; }
  table.data thead th { background: #eef4f5 !important; }
}

/* ---------- Time Entries focus layout ---------- */
.card.tt-bar { box-shadow: var(--inner-light), var(--shadow-raised); }
.card.tt-bar:focus-within { border-color: rgba(0, 131, 120, .35); box-shadow: var(--inner-light), 0 0 0 4px rgba(0, 131, 120, .08), var(--shadow-raised); }
.card.tt-bar.tt-running { background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(227, 243, 240, .72)); box-shadow: var(--inner-light), 0 0 0 4px rgba(0, 131, 120, .1), var(--shadow-raised); }
.list-toolbar { background: var(--glass-tint); }
/* Panels that unfold: materialise in (opacity + small lift), close instantly. */
.insights, .list-toolbar .filter { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@starting-style { .insights:not([hidden]), .list-toolbar:not(.collapsed) .filter:not(.filter-search) { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  @starting-style { .insights:not([hidden]), .list-toolbar:not(.collapsed) .filter:not(.filter-search) { transform: none; } }
  .btn-toggle .btn-chevron .icon { transition: none; }
}

/* ---------- Time Entries list: clear week > day > entry hierarchy ---------- */
.te-table { font-size: .875rem; }
.te-task { color: var(--on-surface); }
/* Week: a tinted band with a teal edge. */
.te-week-row td { padding: .8rem 1.1rem; background: linear-gradient(90deg, rgba(0, 131, 120, .09), rgba(0, 131, 120, .03)); border-top: 1px solid rgba(0, 104, 95, .16); border-bottom: 1px solid rgba(0, 104, 95, .12); font-size: .9rem; color: var(--on-surface); }
.te-week-icon { color: var(--primary); }
.te-week-row .te-group > span:last-child { font-size: .8rem; color: var(--secondary); }
/* Day: breathing room above, bold weekday + muted date, total as a chip; today gets a teal edge. */
.te-day-row td { padding: 1.1rem 1.1rem .5rem; background: transparent; border-bottom: 1px solid var(--glass-line-strong); font-size: .85rem; color: var(--secondary); }
.te-week-row + .te-day-row td { padding-top: .75rem; }
.te-day-title { display: inline-flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.te-day-name { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; color: var(--on-surface); }
.te-day-date { font-weight: 500; color: var(--secondary); }
.te-day-rel { align-self: center; padding: .14rem .5rem; border-radius: 999px; background: rgba(15, 35, 60, .07); color: var(--secondary); font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.te-day-rel.today { background: var(--primary); color: #fff; }
.te-day-today td { box-shadow: inset 3px 0 0 var(--primary); }
.te-group > .te-day-total { display: inline-flex; align-items: baseline; gap: .45rem; padding: .2rem .65rem; border-radius: 999px; background: rgba(15, 35, 60, .05); font-size: .85rem; }
.te-day-total-label { font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--secondary); }
.te-day-total strong { font-weight: 700; color: var(--on-surface); }
@media print { .te-week-row td { background: #eef4f5 !important; } .te-day-total, .te-day-rel { background: none !important; } }

/* ---------- side menu: collapsible sections ---------- */
.sidenav > ul { gap: 0; }
.nav-section { margin-top: .35rem; }
.nav-items { list-style: none; margin: 0; padding: 0 0 .25rem; display: flex; flex-direction: column; gap: 2px; }
.nav-items:not([hidden]) { transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); }
@starting-style { .nav-items:not([hidden]) { opacity: 0; transform: translateY(-3px); } }
/* Heading: a full-width button (or, for Clients, a link plus a chevron button). */
.nav-group { display: flex; align-items: center; gap: .5rem; width: 100%; margin: 0; padding: .55rem .8rem .4rem; border: 0; border-radius: var(--radius-xs); background: none; font: inherit; font-size: .7143rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(86, 94, 116, .85); text-align: left; text-decoration: none; cursor: pointer; transition: color 150ms ease, background-color 150ms ease; }
.nav-group-label { flex: 1 1 auto; min-width: 0; }
.nav-chevron { display: inline-flex; flex: none; color: rgba(86, 94, 116, .6); }
.nav-chevron .icon { width: .9rem; height: .9rem; transform: rotate(90deg); transition: transform 200ms var(--ease-out); }
.nav-section.collapsed .nav-chevron .icon { transform: rotate(0deg); }
.nav-group-head { display: flex; align-items: center; gap: 2px; }
.nav-group-head .nav-group-link { flex: 1 1 auto; }
.nav-group-link .nav-count { letter-spacing: 0; }
.nav-chevron-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; margin-top: .15rem; padding: 0; border: 0; border-radius: var(--radius-xs); background: none; cursor: pointer; }
/* Clients heading when the Clients screen is open. */
.nav-group-link[aria-current="page"] { color: #fff; background: linear-gradient(135deg, #008a7e 0%, #00685f 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 16px -6px rgba(0, 104, 95, .55); }
.nav-group-link[aria-current="page"] .nav-count { background: rgba(255, 255, 255, .22); color: #fff; }
/* Folded section holding the open screen: teal heading with a dot. */
.nav-section.collapsed.has-current > .nav-group, .nav-section.collapsed.has-current .nav-group-link:not([aria-current]) { color: var(--primary); }
.nav-section.collapsed.has-current > .nav-group .nav-group-label::after, .nav-section.collapsed.has-current .nav-group-link:not([aria-current]) .nav-group-label::after { content: ""; display: inline-block; width: .38rem; height: .38rem; margin-left: .45rem; border-radius: 50%; background: var(--primary); vertical-align: 1px; }
@media (hover: hover) and (pointer: fine) {
  .nav-group:hover, .nav-chevron-btn:hover { background: rgba(255, 255, 255, .55); color: var(--on-surface); }
  .nav-group-link[aria-current="page"]:hover { color: #fff; background: linear-gradient(135deg, #008a7e 0%, #00685f 100%); }
  .nav-chevron-btn:hover .nav-chevron { color: var(--on-surface); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-chevron .icon { transition: none; }
  @starting-style { .nav-items:not([hidden]) { transform: none; } }
}