/* ============================================================
   Timesheet (personal client) - Outlook-style calendar.
   Palette mirrors the main web app (navy + blue accent).
   ============================================================ */
:root {
  --bg: #eef1f7;
  --card: #ffffff;
  --surface: #f7f9fc;
  --muted: #eef2f8;
  --hover: #eef2f8;
  --ink: #0f172a;
  --ink-soft: #475569;
  --ink-faint: #94a3b8;
  --line: #e7ebf2;
  --line-strong: #dbe2ec;
  --accent: #2f6bff;
  --accent-ink: #1d4ed8;
  --accent-soft: #eef3ff;
  --accent-fg: #ffffff; /* legible text/icons on an accent fill; JS overrides for light accents */
  --ok: #10b981;
  --ok-soft: #dcfce7;
  --danger: #ef4444;
  --danger-soft: #fef2f2;
  --warn: #f59e0b;
  /* month/period status color coding (used in year grid + status pill) */
  --st-open: #f59e0b;
  --st-review: #3b82f6;
  --st-reject: #ef4444;
  --st-approve: #22c55e;
  --st-unknown: #94a3b8;
  --shadow: 0 24px 60px -24px rgba(15, 23, 42, .35);
  --radius: 16px;
  --radius-sm: 10px;
  /* Neutral glass tints - NOT the navy card colour, so frosted panels read as
     clean iOS-style glass. Alpha derives from a base + a user tint offset
     (--glass-tint-adj) so Personalization can make the glass more/less opaque;
     blur radius is --glass-blur (also user-adjustable). */
  --glass-blur: var(--glass-blur-user, 10px);
  --glass-a: calc(.64 + var(--glass-tint-adj, 0));          /* opacity (alpha) */
  --glass-neutral: #ffffff;
  --glass-color: color-mix(in srgb, var(--accent) var(--glass-tint-pct, 0%), var(--glass-neutral)); /* tint = accent mixed into neutral */
  --glass: color-mix(in srgb, var(--glass-color) calc(var(--glass-a) * 100%), transparent);
  --glass-strong: color-mix(in srgb, var(--glass-color) calc((var(--glass-a) + .12) * 100%), transparent);
  --glass-row: color-mix(in srgb, var(--glass-color) calc((var(--glass-a) - .08) * 100%), transparent);
  /* Background veil (whole-page tint) has its OWN alpha so it can be tuned apart
     from the panels. --veil-tint-adj is the background-opacity slider offset. */
  --veil-a: calc(.55 + var(--veil-tint-adj, 0));
  --glass-veil: color-mix(in srgb, var(--glass-color) calc(var(--veil-a) * 100%), transparent);
  --glass-border: rgba(15, 23, 42, .12);

  /* Category colors (consistent everywhere) */
  --cat-eng: #3b82f6;   /* Engagements  */
  --cat-tra: #f59e0b;   /* Training     */
  --cat-bd:  #8b5cf6;   /* Business Development */
  --cat-vac: #0d9488;   /* Vacation (deep teal so white chip text stays readable) */
  --cat-sick:#f472b6;   /* Sick Leave   */
  --cat-hol: #94a3b8;   /* Public Holidays */
  --cat-oth: #6366f1;   /* Other        */
}

:root[data-theme="dark"], :root:not([data-theme="light"]) {
  --bg: #0b1120;
  --card: #0f172a;
  --surface: #16213a;
  --muted: #1e293b;
  --hover: #1e293b;
  --ink: #e5e9f0;
  --ink-soft: #a3b1c6;
  --ink-faint: #6b7a90;
  --line: #1e293b;
  --line-strong: #334155;
  --accent: #3b82f6;
  --accent-ink: #93c5fd;
  --accent-soft: #1c2b4a;
  --ok: #34d399;
  --ok-soft: #06371f;
  --danger: #f87171;
  --danger-soft: #3a1622;
  --warn: #fbbf24;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, .6);
  /* Neutral charcoal glass (not navy) for dark mode. */
  --glass-blur: var(--glass-blur-user, 10px);
  --glass-a: calc(.55 + var(--glass-tint-adj, 0));          /* opacity (alpha) */
  --glass-neutral: #17191f;
  --glass-color: color-mix(in srgb, var(--accent) var(--glass-tint-pct, 0%), var(--glass-neutral)); /* tint = accent mixed into neutral */
  --glass: color-mix(in srgb, var(--glass-color) calc(var(--glass-a) * 100%), transparent);
  --glass-strong: color-mix(in srgb, var(--glass-color) calc((var(--glass-a) + .13) * 100%), transparent);
  --glass-row: color-mix(in srgb, var(--glass-color) calc((var(--glass-a) - .09) * 100%), transparent);
  --veil-a: calc(.42 + var(--veil-tint-adj, 0));
  --glass-veil: color-mix(in srgb, var(--glass-color) calc(var(--veil-a) * 100%), transparent);
  --glass-border: rgba(255, 255, 255, .10);
}

* { box-sizing: border-box; }
:root { color-scheme: light; }
:root[data-theme="dark"], :root:not([data-theme="light"]) { color-scheme: dark; }
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; overflow: hidden; }
/* Three font tiers: page titles, headings/labels/bold, and body text. */
h1, .settings-title, .pane-title, .cal-title, .crumb-parent, .crumb-cur, .about-name, .big {
  font-family: var(--app-font-title, var(--app-font-head, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif));
}
h2, h3, h4, h5, h6, b, strong, th, .modal-title, .set-sec-title, .pz-name, .about-title, .settings-navitem, .navtab, .sr-label {
  font-family: var(--app-font-head, var(--app-font, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif));
}
/* Bold / Italic / Underline toggles per tier (added only when the class is set). */
body.f-title-bold :is(h1, .settings-title, .pane-title, .cal-title, .crumb-parent, .crumb-cur, .about-name, .big) { font-weight: 800; }
body.f-title-italic :is(h1, .settings-title, .pane-title, .cal-title, .crumb-parent, .crumb-cur, .about-name, .big) { font-style: italic; }
body.f-title-underline :is(h1, .settings-title, .pane-title, .cal-title, .crumb-parent, .crumb-cur, .about-name, .big) { text-decoration: underline; }
body.f-head-bold :is(h2, h3, h4, h5, h6, b, strong, .modal-title, .set-sec-title, .about-title, .settings-navitem, .navtab, .sr-label) { font-weight: 800; }
body.f-head-italic :is(h2, h3, h4, h5, h6, b, strong, .modal-title, .set-sec-title, .about-title, .settings-navitem, .navtab, .sr-label) { font-style: italic; }
body.f-head-underline :is(h2, h3, h4, h5, h6, b, strong, .modal-title, .set-sec-title, .about-title, .settings-navitem, .navtab, .sr-label) { text-decoration: underline; }
body.f-body-bold { font-weight: 600; }
body.f-body-italic :is(p, .sr-sub, .hint, td, .tpl-sub) { font-style: italic; }
body.f-body-underline :is(p, .sr-sub, .hint, td, .tpl-sub) { text-decoration: underline; }
body {
  font-family: var(--app-font, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
  color: var(--ink);
  background: var(--card);
  font-size: 13px;
}
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button { font-family: inherit; cursor: pointer; }

.app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* ===== Nav-bar action buttons (Refresh / bell / theme / Save / Submit) ===== */
.tb-icon { position: relative; width: 34px; height: 34px; border: 0; background: none; color: var(--ink-soft); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tb-icon:hover { background: var(--hover); color: var(--ink); }
/* Glass: brighten toolbar icons + avatar on hover with the same light overlay as nav tabs. */
body.glass .tb-icon:hover, body.has-app-bg .tb-icon:hover { background: rgba(255, 255, 255, .09); color: var(--ink); }
:root[data-theme="light"] body.glass .tb-icon:hover, :root[data-theme="light"] body.has-app-bg .tb-icon:hover { background: rgba(0, 0, 0, .06); }
.tb-icon .ic { width: 18px; height: 18px; }
.tb-avatar { width: 30px; height: 30px; border: 0; border-radius: 50%; margin-left: 4px; padding: 0; cursor: pointer; overflow: hidden; background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.tb-avatar:hover { background: color-mix(in srgb, var(--ink) 26%, transparent); }
.tb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tb-avatar .ic { width: 17px; height: 17px; color: var(--ink-soft); }
.tb-badge { position: absolute; top: 3px; right: 3px; background: var(--danger); color: #fff; font-size: 9px; font-weight: 700; min-width: 14px; height: 14px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.tb-refresh.spin .ic { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tb-divider { width: 1px; height: 22px; background: var(--line-strong); margin: 0 6px; }
.tb-submit.locked { background: var(--muted); color: var(--ink-faint); border-color: var(--line-strong); box-shadow: none; }

/* ===== Ribbon tabs (Home/View click + Settings/Help hover menus) ===== */
.ribbon-tabs { display: flex; align-items: stretch; gap: 2px; padding: 0 12px; background: var(--card); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.rtab { border: 0; background: none; color: var(--ink-soft); font-size: 13px; font-weight: 600; padding: 9px 14px 8px; border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.rtab:hover { color: var(--ink); }
.rtab.active { color: var(--ink); border-bottom-color: var(--accent); }
.rt-spacer { flex: 1; }
.rtab.menu-btn.active { border-bottom-color: var(--accent); }
.caret { font-size: 9px; color: var(--ink-faint); }

/* hover dropdown menus (Settings, Help) - same behavior as the web app */
.menu { position: relative; display: flex; }
.menu-pop {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 10px; box-shadow: var(--shadow);
  padding: 6px; min-width: 210px; z-index: 60;
  display: none; flex-direction: column; gap: 2px;
}
/* invisible bridge across the gap to the button, so moving the cursor from the
   button to the menu doesn't count as leaving and auto-close it */
.menu-pop::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.menu.open .menu-pop { display: flex; }
.menu-item {
  display: flex; align-items: center; gap: 10px;
  text-align: left; border: none; background: none; color: var(--ink);
  font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 7px;
  cursor: pointer; white-space: nowrap;
}
.menu-item .ic { width: 16px; height: 16px; color: var(--ink-faint); flex-shrink: 0; }
.menu-item:hover { background: var(--muted); color: var(--ink); font-weight: 600; }
.menu-item:hover .ic { color: var(--accent); }
.menu-div { height: 1px; background: var(--line); margin: 4px 6px; }

/* ===== Top navigation tabs (Dashboard/Timesheet/Absence + Settings/Help menus) ===== */
.topnav { display: flex; align-items: center; gap: 4px; padding: 8px 14px; background: var(--card); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.navtab { border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 14px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.navtab:hover { color: var(--ink); background: var(--hover); }
.navtab.active { color: var(--accent-ink); background: var(--accent-soft); }
.navtab.menu-btn { color: var(--ink-soft); }
.navtab.menu-btn.active { color: var(--accent-ink); background: var(--accent-soft); }
.navtab.menu-btn:hover { color: var(--ink); }
.navtab .ic { width: 16px; height: 16px; flex-shrink: 0; }
/* never show the black UA focus box on click; accent ring for keyboard only */
button:focus { outline: none; }
button:focus-visible { outline: 2px solid color-mix(in srgb, var(--ink) 32%, transparent); outline-offset: 1px; }
/* Drill-in list items shouldn't show a focus ring after a mouse click. */
.tpl-item:focus:not(:focus-visible) { outline: none; }

/* ===== Settings / Help full-page view (left vertical nav) ===== */
.settings-view { flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.settings-nav { border-right: 1px solid var(--line); padding: 16px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; background: var(--surface); }
.settings-nav-title { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); padding: 4px 12px 10px; }
.settings-navitem { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; width: 100%; padding: 9px 12px; border: none; border-radius: 8px; background: none; color: var(--ink-soft); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.settings-navitem:hover { background: var(--muted); color: var(--ink); }
.settings-navgroup { margin-top: 4px; }
.settings-navhead { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px 4px; background: none; border: 0; cursor: pointer; color: var(--ink-faint); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.settings-navhead:hover { color: var(--ink-soft); }
.snh-title { flex: 1; text-align: left; }
.snh-chev { width: 14px; height: 14px; flex-shrink: 0; transition: transform .15s; }
.settings-navgroup.collapsed .snh-chev { transform: rotate(-90deg); }
.settings-navgroup.collapsed .settings-navitems { display: none; }
.sn-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.set-ic { width: 17px; height: 17px; flex-shrink: 0; color: var(--ink-faint); }
.settings-navitem.active .set-ic { color: var(--accent); }
.settings-navitem:hover .set-ic { color: var(--ink-soft); }
.settings-navitem.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.settings-navitem.active:hover { background: var(--accent-soft); color: var(--accent); }
.settings-navitem.active:hover .set-ic { color: var(--accent); }
/* Glass mode: the selection uses a NEUTRAL highlight + bold text (not accent);
   only the pictogram takes the accent colour. */
body.glass .settings-navitem.active, body.has-app-bg .settings-navitem.active,
body.glass .settings-navitem.active:hover, body.has-app-bg .settings-navitem.active:hover {
  background: rgba(255, 255, 255, .2);
  color: var(--ink);
  font-weight: 700;
}
:root[data-theme="light"] body.glass .settings-navitem.active, :root[data-theme="light"] body.has-app-bg .settings-navitem.active,
:root[data-theme="light"] body.glass .settings-navitem.active:hover, :root[data-theme="light"] body.has-app-bg .settings-navitem.active:hover { background: rgba(255, 255, 255, .85); }
body.glass .settings-navitem.active .set-ic, body.has-app-bg .settings-navitem.active .set-ic,
body.glass .settings-navitem.active:hover .set-ic, body.has-app-bg .settings-navitem.active:hover .set-ic { color: var(--accent); }
/* Non-active hover brightens with a light overlay, matching the top-nav tabs. */
body.glass .settings-navitem:not(.active):hover, body.has-app-bg .settings-navitem:not(.active):hover { background: rgba(255, 255, 255, .09); color: var(--ink); }
/* Top nav tabs (glass mode): the CHOSEN tab gets a BRIGHT highlight, hover sits
   in between, and the base is the plain bar - so it's obvious which is selected. */
body.glass .navtab.active, body.has-app-bg .navtab.active,
body.glass .navtab.menu-btn.active, body.has-app-bg .navtab.menu-btn.active {
  background: rgba(255, 255, 255, .2);
  color: var(--ink);
  font-weight: 700;
}
body.glass .navtab.active .ic, body.has-app-bg .navtab.active .ic,
body.glass .navtab.menu-btn.active .ic, body.has-app-bg .navtab.menu-btn.active .ic { color: var(--accent); }
/* Hover: a mid-level brightening (between the base bar and the bright active). */
body.glass .navtab:hover, body.has-app-bg .navtab:hover,
body.glass .navtab.menu-btn:hover, body.has-app-bg .navtab.menu-btn:hover { background: rgba(255, 255, 255, .09); color: var(--ink); }
body.glass .navtab.active:hover, body.has-app-bg .navtab.active:hover,
body.glass .navtab.menu-btn.active:hover, body.has-app-bg .navtab.menu-btn.active:hover { background: rgba(255, 255, 255, .24); }
/* Light mode: resting tabs have NO background; only hover and the selected tab get a
   near-white pill (accent icon, dark label). */
:root[data-theme="light"] body.glass .navtab:not(.active):hover, :root[data-theme="light"] body.has-app-bg .navtab:not(.active):hover { background: rgba(255, 255, 255, .5); }
:root[data-theme="light"] body.glass .navtab.active, :root[data-theme="light"] body.has-app-bg .navtab.active,
:root[data-theme="light"] body.glass .navtab.menu-btn.active, :root[data-theme="light"] body.has-app-bg .navtab.menu-btn.active { background: rgba(255, 255, 255, .92); }
:root[data-theme="light"] body.glass .navtab.active:hover, :root[data-theme="light"] body.has-app-bg .navtab.active:hover,
:root[data-theme="light"] body.glass .navtab.menu-btn.active:hover, :root[data-theme="light"] body.has-app-bg .navtab.menu-btn.active:hover { background: rgba(255, 255, 255, 1); }
:root[data-theme="light"] body.glass .settings-navitem:not(.active):hover, :root[data-theme="light"] body.has-app-bg .settings-navitem:not(.active):hover { background: rgba(0, 0, 0, .06); }
.settings-content { min-width: 0; min-height: 0; overflow: hidden; padding: 18px 28px; display: flex; flex-direction: column; }
.settings-title-row { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; flex-shrink: 0; }
.settings-actions { display: flex; justify-content: flex-end; margin: -6px 0 4px; flex-shrink: 0; }
.settings-title { font-size: 24px; font-weight: 600; color: var(--ink); margin: 0; }
.settings-pane { flex: 1; min-height: 0; overflow-y: auto; padding-right: 20px; scrollbar-gutter: stable; } /* reserve the scrollbar space so expanding a section doesn't reflow the width */
.settings-view .set-sec-title { display: none; } /* the title row already names the section */

/* Connections / gateway design (mirrors the web app) */
.gw-status { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 14px; color: var(--ink-faint); }
.gw-status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.gw-status.ok { color: var(--ok); }
.gw-status.ok .dot { background: var(--ok); }
.gw-subhead { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); margin: 20px 0 10px; display: flex; align-items: center; justify-content: space-between; }
.gw-source-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.gw-source-title { font-weight: 600; font-size: 14px; color: var(--ink); }
.gw-source-title + .sub-note { margin-top: 2px; }
.gw-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; align-items: center; }
.gw-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.gw-toggle input { display: none; }
.gw-toggle .sw { width: 40px; height: 22px; border-radius: 12px; background: var(--line-strong); position: relative; transition: background .15s; flex-shrink: 0; }
.gw-toggle .sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.gw-toggle input:checked + .sw { background: var(--accent); }
.gw-toggle input:checked + .sw::after { transform: translateX(18px); }

/* mini in-app browser for KPMG sign-in (mirrors the web app) */
.minibrowser { display: flex; flex-direction: column; min-height: 0; gap: 0; }
.mb-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--muted); border: 1px solid var(--line-strong); border-radius: 10px 10px 0 0; }
.mb-url { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-soft); font-family: ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-frame { width: 100%; height: 52vh; min-height: 320px; border: 1px solid var(--line-strong); border-top: none; background: #fff; }
.mb-next { padding-top: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.mb-paste { padding-top: 14px; }
.mb-paste .gw-actions { display: flex; gap: 8px; align-items: center; }
.mb-paste #mbLink { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 12px; color: var(--ink); font-size: 13px; outline: none; }
.mb-paste #mbLink:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* onboarding wizard (mirrors the web app) */
.onb-choice { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.onb-choice .btn { width: 100%; padding: 14px; font-size: 15px; justify-content: center; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Floating-label fields (matches the record wizard's .ff style) */
.form-field { position: relative; display: block; }
.form-field.row2 { grid-column: span 2; }
.form-field label { position: absolute; left: 14px; top: 17px; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-faint); pointer-events: none; margin: 0; z-index: 1; transition: top .14s ease, font-size .14s ease; }
.form-field:focus-within > label, .form-field.filled > label { top: 8px; font-size: 11px; font-weight: 500; }
.form-field label .req { color: #e11d48; }
.form-field input, .form-field select, .form-field textarea { width: 100%; box-sizing: border-box; min-height: 54px; font: inherit; font-size: 14px; color: var(--ink); background: rgba(128,128,128,.10); border: 1px solid rgba(128,128,128,.16); border-radius: 12px; padding: 22px 13px 8px; outline: none; transition: border-color .12s, background .12s, box-shadow .12s; }
.form-field textarea { min-height: 92px; padding-top: 24px; line-height: 1.5; resize: vertical; }
.form-field select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; }
.form-field input::placeholder { color: transparent; }
.form-field input:focus::placeholder { color: var(--ink-faint); opacity: .55; }
.form-field input[readonly], .form-field input.locked-input { background: rgba(128,128,128,.06); color: var(--ink-soft); }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: rgba(128,128,128,.30); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
/* enhanced (pz-dd) selects inside form-fields — beat body.glass .pz-dd-trigger (0,2,1) */
.form-field > .pz-dd { display: block; width: 100%; position: relative; }
.form-field > .pz-dd > .pz-dd-trigger { display: block; position: relative; width: 100%; box-sizing: border-box; min-height: 54px; padding: 22px 34px 8px 13px; text-align: left; background: rgba(128,128,128,.10); border: 1px solid rgba(128,128,128,.16); border-radius: 12px; font-size: 14px; font-weight: 400; color: var(--ink); }
.form-field .pz-dd-trigger > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-field .pz-dd-trigger .ic { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.form-field .pz-dd-trigger.open .ic { transform: translateY(-50%) rotate(180deg); }
.locked-input { background: rgba(128,128,128,.06) !important; color: var(--ink-faint) !important; cursor: not-allowed; }
.about-title { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.wiz-nav { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 18px; }
/* onboarding guide wizard */
.help-pane { font-size: 14px; color: var(--ink); line-height: 1.6; }
.help-pane h4 { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.help-pane p { margin: 0 0 8px; }
.help-pane ul, .help-pane ol { margin: 8px 0 0; padding-left: 20px; }
.help-pane li { margin-bottom: 6px; }
.yn { display: flex; gap: 10px; margin: 14px 0; }
.yn .btn { min-width: 110px; justify-content: center; font-weight: 600; }
/* Onboarding choice buttons: neutral by default (ink text, not accent link-like),
   the selected one is the accent-filled primary. Consistent across all steps. */
.yn .btn.ghost { color: var(--ink); }
body.glass .yn .btn.ghost, body.has-app-bg .yn .btn.ghost { color: var(--ink); }
body.glass .yn .btn.ghost .ic, body.has-app-bg .yn .btn.ghost .ic { color: var(--ink-soft); }
.wiz-expand { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.btn.sm { padding: 6px 11px; font-size: 12px; }

/* ===== Ribbon action row ===== */
.ribbon { position: relative; display: flex; align-items: center; gap: 8px; padding: 18px 20px 12px; background: none; border-bottom: none; flex-shrink: 0; }
.rb-left { display: inline-flex; align-items: center; align-self: flex-start; gap: 10px; }
.rb-right { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.rb-sep { width: 1px; align-self: stretch; background: var(--line-strong); margin: 2px 6px; }
.rb-spacer { flex: 1; }
/* centered segmented toggle, independent of the side groups' widths */
.seg-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.rb-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; background: none; color: var(--ink); border-radius: 8px; padding: 7px 11px; font-size: 13px; font-weight: 500; }
.rb-btn:hover { background: var(--hover); }
.rb-btn .ic { width: 16px; height: 16px; color: var(--ink-soft); }
.rb-btn.primary { background: var(--accent); color: var(--accent-fg); font-weight: 600; box-shadow: 0 8px 20px -8px var(--accent); }
.rb-btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.rb-btn.primary .ic { color: currentColor; }
.rb-split { display: inline-flex; align-items: stretch; }
.rb-split .rb-btn.primary { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rb-split .rb-caret { background: var(--accent); color: var(--accent-fg); border: 0; border-left: 1px solid rgba(255,255,255,.25); border-radius: 0 8px 8px 0; padding: 0 8px; display: inline-flex; align-items: center; }
.rb-split .rb-caret:hover { filter: brightness(1.06); }

/* segmented toggle (Day/Work week/Week/Month, Week/Month/Year) */
.seg { display: inline-flex; background: var(--muted); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; color: var(--ink-soft); font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 7px; }
.seg button:hover { color: var(--ink); }
.seg button.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.1), inset 0 0 0 1px var(--line); }

/* ===== Body layout ===== */
.body { flex: 1; display: flex; min-height: 0; }
.sidebar { width: 240px; flex-shrink: 0; border-right: 1px solid var(--line); background: var(--card); overflow-y: auto; padding: 12px; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--card); }

/* ===== Sidebar: persistent Log hours (above the mini-calendar) ===== */
.side-log { margin-bottom: 14px; }
.side-log-split { display: flex; width: 100%; }
.side-log-split .rb-btn.primary { flex: 1; justify-content: center; padding: 9px 12px; border-radius: 9px 0 0 9px; }
.side-log-split .rb-caret { border-radius: 0 9px 9px 0; }

/* ===== Sidebar: mini calendar ===== */
.mini { margin-bottom: 14px; }
.mini-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mini-title { font-weight: 700; font-size: 13px; background: transparent; border: 0; color: inherit; font-family: inherit; padding: 3px 6px; margin-left: -6px; border-radius: 7px; cursor: pointer; }
.mini-title:hover { background: var(--hover); }
.mini-nav { display: flex; gap: 2px; }
.mini-nav button { width: 22px; height: 22px; border: 0; background: none; color: var(--ink-soft); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.mini-nav button:hover { background: var(--hover); color: var(--ink); }
.mini-nav svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.mini-grid .dow { text-align: center; font-size: 10px; color: var(--ink-faint); font-weight: 600; padding: 3px 0; }
.mini-day { text-align: center; font-size: 11px; padding: 4px 0; border-radius: 6px; color: var(--ink); cursor: pointer; }
.mini-day.out { color: var(--ink-faint); }
.mini-day:hover { background: var(--hover); }
.mini-day.today { background: var(--accent); color: var(--accent-fg); font-weight: 700; }
.mini-day.nonwork:not(.today) { color: color-mix(in srgb, var(--accent) 78%, var(--ink)); }
.mini-day.inmonth { background: var(--accent-soft); }
/* Glass hover: lighten (white overlay) instead of the dark --hover slate. */
body.glass .mini-title:hover, body.has-app-bg .mini-title:hover,
body.glass .mini-day:hover:not(.today), body.has-app-bg .mini-day:hover:not(.today),
body.glass .cp-day:hover:not(.sel):not(.today), body.has-app-bg .cp-day:hover:not(.sel):not(.today) { background: rgba(255, 255, 255, .14); }
:root[data-theme="light"] body.glass .mini-title:hover, :root[data-theme="light"] body.has-app-bg .mini-title:hover,
:root[data-theme="light"] body.glass .mini-day:hover:not(.today), :root[data-theme="light"] body.has-app-bg .mini-day:hover:not(.today),
:root[data-theme="light"] body.glass .cp-day:hover:not(.sel):not(.today), :root[data-theme="light"] body.has-app-bg .cp-day:hover:not(.sel):not(.today) { background: rgba(0, 0, 0, .05); }

/* ===== Sidebar: calendar/category list ===== */
.side-link { display: flex; align-items: center; gap: 8px; color: var(--accent-ink); font-weight: 600; font-size: 13px; padding: 7px 6px; border-radius: 8px; }
.side-link:hover { background: var(--hover); }
.side-group { margin-top: 12px; }
.side-group > .sg-head { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-faint); font-weight: 700; padding: 6px; }
.sg-head .tw { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .15s; }
.side-item { display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: 8px; cursor: pointer; }
.side-item:hover { background: var(--hover); }
.cat-check { position: relative; width: 16px; height: 16px; flex-shrink: 0; border-radius: 4px; border: 2px solid var(--cat, var(--ink-faint)); display: inline-flex; align-items: center; justify-content: center; }
.side-item.on .cat-check { background: var(--cat, var(--accent)); }
.side-item.on .cat-check::after { content: ""; box-sizing: border-box; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.side-item .si-label { font-size: 13px; color: var(--ink); }
.side-item.off .si-label { color: var(--ink-faint); }

.ts-cal { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 4px 20px 20px; }

/* ===== Calendar header (month nav) ===== */
.cal-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.today-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); border-radius: 8px; padding: 6px 12px; font-weight: 600; font-size: 12.5px; }
.today-btn:hover { background: var(--hover); }
.nav-chev { width: 30px; height: 30px; border: 0; background: none; color: var(--ink-soft); border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }
.nav-chev:hover { background: var(--hover); color: var(--ink); }
.nav-chev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
/* Month title styled like the "Dashboard" page heading (big, bold, plain). */
/* Fixed-width title box: reserves space so the chevrons stay at the SAME x
   position regardless of the month's name length (the button inside still sizes
   to its text, so the hover highlight isn't a huge pill). */
.cal-titlebox { display: inline-flex; align-items: center; align-self: flex-start; min-width: 250px; }
.cal-title { box-sizing: border-box; font: inherit; font-size: 24px; font-weight: 600; line-height: 1.1; color: var(--ink); background: none; border: 0; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; align-self: flex-start; gap: 5px; margin-left: -8px; margin-right: 2px; padding: 3px 10px; border-radius: 8px; }
.cal-title:hover { background: var(--hover); }
body.has-app-bg .cal-title:hover { background: color-mix(in srgb, var(--card) 55%, transparent); }
.ct-caret { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.4; color: var(--ink-soft); opacity: .7; flex-shrink: 0; }
/* month/year picker popover */
.month-pop { position: fixed; z-index: 200; background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); padding: 10px; width: 250px; }
.mp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding: 0 2px; }
.mp-year { font-size: 15px; font-weight: 800; color: var(--ink); }
.mp-chev { width: 28px; height: 28px; border: 0; background: none; color: var(--ink-soft); border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mp-chev:hover { background: var(--hover); color: var(--ink); }
.mp-chev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.mp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mp-month { border: 0; background: none; color: var(--ink-soft); font-size: 13px; font-weight: 600; padding: 10px 0; border-radius: 8px; cursor: pointer; }
.mp-month:hover { background: var(--hover); color: var(--ink); }
.mp-month.today { color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.mp-month.active { background: var(--accent); color: var(--accent-fg); }
.mp-month.active.today { box-shadow: none; }
/* week picker */
.week-pop { width: 280px; }
.wp-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 0 6px; margin-bottom: 2px; }
.wp-dow span { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--ink-faint); }
.wp-weeks { display: flex; flex-direction: column; gap: 2px; }
.wp-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; border: 0; background: none; border-radius: 8px; padding: 3px 6px; cursor: pointer; }
.wp-week:hover { background: var(--hover); }
.wp-week.sel { background: var(--accent); }
.wp-day { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ink); padding: 5px 0; border-radius: 5px; }
.wp-day.out { color: var(--ink-faint); opacity: .5; }
.wp-day.today { color: var(--accent-ink); }
.wp-week.sel .wp-day { color: #fff; }
.wp-week.sel .wp-day.out { color: rgba(255,255,255,.6); }

/* ===== Month grid ===== */
/* Calendar sits in a rounded card like the Dashboard items (consistent look). */
.cal-wrap { flex: 1; overflow: auto; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.cal-wrap .month-dow { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); overflow: hidden; }
.month { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.month-dow { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line); }
.month-dow div { padding: 13px 14px; font-size: 11px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .4px; }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; flex: 1; }
.cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 7px 9px; min-height: 92px; overflow: hidden; position: relative; cursor: pointer; }
.cell:hover { background: var(--muted); }
.cell.out { background: color-mix(in srgb, var(--card) 45%, transparent); }
.cell.weekend { background: color-mix(in srgb, var(--card) 30%, transparent); }
.cell.holiday { background: color-mix(in srgb, var(--cat-hol) 12%, transparent); }
.cell.under { background: color-mix(in srgb, var(--danger) 9%, transparent); }
.cell.today-cell { box-shadow: inset 0 0 0 2px var(--accent); }
.cell-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; gap: 4px; }
.cell-datewrap { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.cell-mon { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.cell-date { font-size: 12px; font-weight: 600; color: var(--ink-soft); width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.cell.out .cell-date { color: var(--ink-faint); }
.cell.today-cell .cell-date { background: var(--accent); color: var(--accent-fg); }
.cell-total { font-size: 10.5px; font-weight: 700; color: var(--ink-faint); }
.cell-total.under { color: var(--danger); }
.cell-total.full { color: var(--ok); }
.chips { display: flex; flex-direction: column; gap: 2px; }
.chip { position: relative; z-index: 1; font-size: 11px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); padding: 2px 7px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, var(--chip, var(--cat-oth)) 82%, #000); }
/* spanning (multi-day) bars: negative margins bridge the 9px cell padding + 1px
   border so consecutive-day segments merge into one continuous bar */
.chip.mid { border-radius: 0; margin: 0 -10px; }
.chip.start { border-radius: 5px 0 0 5px; margin-right: -10px; }
.chip.end { border-radius: 0 5px 5px 0; margin-left: -10px; }
.chip.ghost { background: transparent; color: transparent; }
.chip-more { font-size: 10.5px; color: var(--ink-faint); padding: 1px 6px; font-weight: 600; }

/* ===== Week / Day view ===== */
.week-grid { display: grid; flex: 1; overflow: auto; }
.week-col { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.week-colhead { padding: 13px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); }
.week-colhead .wd { font-size: 11px; color: var(--ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
/* Match the month header: frosted, translucent, same tone as the calendar panel. */
/* Match the Month header: same lighter calendar-surface tint (not a darker bar). */
body.glass .week-colhead, body.has-app-bg .week-colhead { background: color-mix(in srgb, var(--glass) 50%, transparent) !important; border-bottom-color: var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.week-colhead .wn { font-size: 18px; font-weight: 700; }
.week-colhead.today-cell .wn { color: var(--accent); }
.week-list { flex: 1; padding: 6px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.wk-entry { background: color-mix(in srgb, var(--chip, var(--cat-oth)) 82%, #000); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); border-radius: 7px; padding: 6px 9px; font-size: 12px; font-weight: 600; display: flex; justify-content: space-between; gap: 6px; }
.wk-entry .h { opacity: .85; font-weight: 700; }
.week-foot { padding: 7px 10px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; text-align: right; color: var(--ink-soft); }
.week-foot.under { color: var(--danger); }

/* ===== Year view ===== */
/* year view: transparent container so each month reads as its own card */
.cal-wrap.year-wrap { background: transparent; border: 0; border-radius: 0; }
.year-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 14px; padding: 4px 2px; }
@media (max-width: 1100px){ .year-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); } }
@media (max-width: 780px){ .year-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(6, 1fr); } }
.ym-card { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--ink); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ym-card:hover { background: var(--hover); }
.ym-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; flex-shrink: 0; }
.ym-name { font-weight: 700; font-size: 13px; }
.ym-badge { font-size: 11px; font-weight: 700; color: var(--ink-faint); }
.ym-badge.ok { color: var(--ok); } .ym-badge.bad { color: var(--danger); }
.ym-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); gap: 3px; }
.ym-d { border-radius: 2px; background: var(--muted); min-height: 0; }
/* On frosted cards --muted is translucent and vanishes; use a theme-aware neutral fill. */
body.glass .ym-d, body.has-app-bg .ym-d { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.ym-d.out { background: transparent !important; }
/* Year-view day dots follow the MONTH STATUS colour coding (Open=orange, Submitted/Review=blue, Approved/Closed=green, Unknown=grey, Rework/Rejected=red); red is also reserved for attention (under hours). Never the accent. */
.ym-d.full { background: var(--tint); }
.ym-d.part { background: color-mix(in srgb, var(--tint) 45%, transparent); }
.ym-d.under { background: var(--danger); }

/* ===== Settings ===== */
.set-wrap { display: flex; min-height: 420px; }
.set-nav { width: 190px; border-right: 1px solid var(--line); padding: 8px; flex-shrink: 0; }
.set-nav button { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--ink-soft); font-size: 13px; font-weight: 500; padding: 9px 12px; border-radius: 8px; }
.set-nav button:hover { background: var(--hover); color: var(--ink); }
.set-nav button.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.set-body { flex: 1; padding: 6px 20px 20px; overflow-y: auto; max-height: 62vh; }
.set-sec-title { font-size: 15px; font-weight: 700; margin: 10px 0 4px; }
.set-sec-note { font-size: 12px; color: var(--ink-faint); margin-bottom: 14px; }
.hol-add { display: flex; gap: 8px; align-items: stretch; }
.hol-add .datefield { flex: 1; }
.hol-add .btn { flex-shrink: 0; }
.hol-list { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.hol-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); border-radius: 999px; padding: 6px 8px 6px 12px; font-size: 13px; font-weight: 600; }
.hol-chip .hc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st-unknown); }
.hol-x { border: 0; background: none; color: var(--ink-faint); cursor: pointer; font-size: 12px; line-height: 1; padding: 3px 4px; border-radius: 6px; }
.hol-x:hover { background: var(--danger); color: #fff; }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-t { border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-soft); border-radius: 8px; padding: 6px 11px; font-weight: 600; font-size: 12.5px; }
.chip-t.on { border-color: var(--accent); color: var(--accent-fg); background: var(--accent); }
/* Windows 11-style setting rows (card per row, control on the right). */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; margin-bottom: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
/* Toggling a row shouldn't leave the label/note text selected (matches Windows). */
.set-row, .set-sec-note, .set-sec-title, .pz-check { user-select: none; -webkit-user-select: none; }
body.glass .set-row, body.has-app-bg .set-row { background: color-mix(in srgb, var(--glass) 60%, transparent); border-color: var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.set-row .sr-label { font-size: 14px; font-weight: 600; } .set-row .sr-sub { font-size: 12px; color: var(--ink-faint); }
.status-line { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.status-line .dot { width: 8px; height: 8px; border-radius: 50%; }
.status-line.ok { color: var(--ok); } .status-line.ok .dot { background: var(--ok); }
.status-line.off { color: var(--ink-faint); } .status-line.off .dot { background: var(--ink-faint); }

/* ===== Status bar (minimal, mirrors the web app: dot + line) ===== */
.statusbar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; border-top: 1px solid var(--line); background: var(--card); flex-shrink: 0; font-size: 12.5px; color: var(--ink-soft); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; }
.status-dot.open { background: var(--warn); }
.status-dot.submitted, .status-dot.review, .status-dot.approved { background: var(--ok); }
.status-dot.rework, .status-dot.rejected { background: var(--danger); }
.status-msg { font-weight: 600; color: var(--ink); }
.status-sep { color: var(--line-strong); }
.status-total b { color: var(--ink); font-weight: 700; }
.status-total .of { color: var(--ink-faint); }
.status-util b { color: var(--ink); font-weight: 700; }
.statusbar .spacer { flex: 1; }

/* buttons (shared) - matches the web app's design language */
.btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); transition: background .15s, box-shadow .15s, transform .05s; }
.btn:hover { background: var(--muted); }
.btn:active { transform: translateY(.5px); }
.btn:disabled, .btn[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; filter: grayscale(.3); }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--surface); transform: none; }
.btn.primary:disabled:hover, .btn.primary[disabled]:hover { background: var(--accent); }
.btn .ic { width: 15px; height: 15px; color: var(--ink-soft); }
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; box-shadow: 0 8px 20px -8px var(--accent); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); color: var(--accent-fg); }
.btn.primary .ic { color: currentColor; }
.btn.ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn.ghost:hover { background: var(--muted); }
.btn.ok { background: var(--ok); color: #04240f; border-color: transparent; }
.btn.danger { background: var(--danger-soft); border-color: var(--line-strong); color: var(--danger); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ===== Insights ===== */
.pane { flex: 1; overflow-y: auto; padding: 18px 20px; }
.pane-head { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.pane-title { font-size: 24px; font-weight: 600; align-self: flex-start; }
.cards2 { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px){ .cards2 { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card-title { font-size: 13px; font-weight: 700; }
.bal .card-head { justify-content: flex-start; gap: 8px; }
.bal-ic { display: inline-flex; flex-shrink: 0; }
.bal-ic .ic { width: 18px; height: 18px; }
.card-note { font-size: 11.5px; color: var(--ink-faint); }
.big-num { font-size: 40px; font-weight: 600; line-height: 1; }
.big-num .of { font-size: 15px; color: var(--ink-faint); font-weight: 600; margin-left: 6px; }
.progress { height: 8px; background: var(--muted); border-radius: 6px; overflow: hidden; margin: 14px 0 8px; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--danger), var(--warn), var(--ok)); /* utilization: red → yellow → green */ border-radius: 6px; }
.sub-note { font-size: 11.5px; color: var(--ink-faint); }
.util-big { font-size: 40px; font-weight: 600; color: var(--accent); }
.spark { width: 100%; height: 90px; }
.axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-faint); margin-top: 6px; }
.axis span { flex: 0 0 auto; }
.bycode .bc-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 14px; align-items: center; padding: 7px 0; }
.bc-name { font-size: 12.5px; font-weight: 600; }
.bc-track { height: 12px; background: var(--muted); border-radius: 7px; overflow: hidden; }
.bc-track > span { display: block; height: 100%; border-radius: 7px; background: var(--bar, var(--cat-eng)); }
/* Light mode: category colours are tuned for dark backgrounds; deepen them so a
   bright bar/dot doesn't glare against the pale panel. The legend dot and the bar
   share the same source colour, so use the IDENTICAL transform on both to match. */
:root[data-theme="light"] .bc-track > span,
:root[data-theme="light"] .legend i { filter: brightness(0.78) saturate(1.08); }
.bc-val { font-size: 13px; font-weight: 700; min-width: 54px; text-align: right; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.legend i { width: 9px; height: 9px; border-radius: 50%; }

/* ===== Absence ===== */
.bal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 760px){ .bal-grid { grid-template-columns: 1fr; } }
.bal .bal-top { display: flex; align-items: baseline; justify-content: space-between; }
.bal-num { font-size: 30px; font-weight: 800; }
.bal-num .of { font-size: 14px; color: var(--ink-faint); font-weight: 600; }
.warn-box { display: flex; gap: 10px; background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; }
.warn-box .ic { color: var(--warn); flex-shrink: 0; }
.warn-box b { color: var(--ink); }
.warn-box.danger { background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.warn-box.danger .ic { color: var(--danger); }
.plan-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; }
.plan-item .pi-main { font-weight: 600; }
.plan-item .pi-sub { font-size: 11.5px; color: var(--ink-faint); }

/* ===== Modal ===== */
/* No page-wide scrim: the modal card carries its own backdrop-filter, so only the
   area behind the popup is frosted - the rest of the page keeps its normal tint. */
.modal-root { position: fixed; inset: 0; background: transparent; display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
/* Modal scrolls its BODY only - head/foot stay pinned so a vertical scrollbar
   never overlaps the footer buttons (was clipping "Close"). */
.modal { background: var(--card); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; animation: modal-in .16s ease both; }
/* Fade the dialog in so its backdrop-filter layer composites smoothly instead of
   flashing the whole viewport for one frame when it appears. */
@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }
.modal-root.minimized .modal { animation: none; }
.modal.wide { max-width: 720px; }
.modal.logmodal { max-width: 620px; }
/* Sign-in mini-browser is landscape/wide (matches the web app). */
.modal.signin-wide { max-width: min(1080px, 94vw); }
.modal-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 6px; }
.modal-title { font-size: 17px; font-weight: 700; }
.modal-head .modal-x, .modal-head .modal-min { width: 30px; height: 30px; padding: 0; border: 0; background: none; color: var(--ink-soft); border-radius: 7px; font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.modal-head .modal-x:hover, .modal-head .modal-min:hover { background: var(--hover); color: var(--ink); }
.modal-head .modal-min { font-size: 22px; line-height: 1; margin-left: auto; }
.modal-head .modal-min + .modal-x { margin-left: 2px; }
/* minimized: collapse to a small bar, let the app behind stay usable */
.modal-root.minimized { align-items: flex-end; justify-content: flex-end; background: transparent; padding: 0; pointer-events: none; }
.modal-root.minimized .modal { width: 300px; max-width: 300px; height: auto; max-height: none; margin: 0 18px 18px 0; pointer-events: auto; cursor: pointer; }
.modal-root.minimized .modal-head { padding: 12px 14px; }
.modal-root.minimized .modal-body, .modal-root.minimized .modal-foot { display: none; }
/* stacked discard-changes confirmation */
.confirm-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(15,23,42,.5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.confirm-card { background: var(--card); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); padding: 20px; width: 100%; max-width: 380px; }
.confirm-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.confirm-msg { color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; margin: 0 0 16px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 22px 20px; }
.modal-foot { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 14px 22px 20px; flex-wrap: wrap; }
.modal-foot .grow { flex: 1; font-size: 11.5px; color: var(--ink-faint); }

.fld { margin-bottom: 14px; }
.fld > label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-faint); margin-bottom: 6px; }
.fld input[type=text], .fld input[type=number], .fld input[type=date], .fld input[type=time], .fld input[type=email], .fld input[type=search], .fld input:not([type]), .fld select, .fld textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 8px 10px; color: var(--ink); font-size: 14px; font-family: inherit; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.fld select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center;
}

/* Windows 11-style setting rows (Personalization > Themes + Background): icon + title/sub + control. */
.pz-rows { display: flex; flex-direction: column; gap: 10px; }
/* Round avatar used as the icon in Windows-style user rows. */
.user-avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; flex: none; }
/* Row labels aren't selectable text (matches Windows Settings); avoids the whole
   panel highlighting when a click re-renders the view under the cursor. */
.pz-rows, .pz-row, .pz-subrow, .pz-row-x > summary { user-select: none; -webkit-user-select: none; }
.pz-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.pz-row-ic { flex-shrink: 0; width: 22px; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); }
.pz-row-ic .ic { width: 20px; height: 20px; }
.pz-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.pz-row-main b { font-size: 14px; font-weight: 600; color: var(--ink); }
.pz-row-main .sr-sub { font-size: 12px; color: var(--ink-faint); }
.pz-row-ctl { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.pz-row-ctl .pz-val { font-size: 12px; font-weight: 700; color: var(--ink-soft); min-width: 40px; text-align: right; }
.pz-row-ctl input[type=range] { width: 150px; }
/* Windows 11-style sliders: thin track, accent fill (via --range-p set in JS),
   and a "donut" thumb = accent centre + a gap ring + a thin outline. */
input[type=range] { -webkit-appearance: none; appearance: none; height: 20px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(var(--accent), var(--accent)) left center / var(--range-p, 50%) 100% no-repeat, color-mix(in srgb, var(--ink) 22%, transparent); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--accent); border: 3px solid var(--card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent); box-sizing: border-box; transition: transform .1s ease; }
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type=range]:disabled::-webkit-slider-thumb { background: var(--ink-faint); }
input[type=range]:disabled::-webkit-slider-runnable-track { background: color-mix(in srgb, var(--ink) 18%, transparent); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid var(--card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent); box-sizing: border-box; }
.pz-sel { appearance: none; -webkit-appearance: none; cursor: pointer; background: var(--muted); border: 1px solid var(--line-strong); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; padding: 8px 32px 8px 12px; border-radius: 8px; min-width: 130px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center; }
/* Custom dropdown (replaces native <select> for .pz-sel): styled trigger + frosted popup. */
.pz-dd { display: inline-block; }
.pz-dd-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 150px; padding: 8px 12px; background: var(--muted); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.pz-dd-trigger .ic { width: 15px; height: 15px; color: var(--ink-faint); transition: transform .18s; flex-shrink: 0; }
.pz-dd-trigger span.ph { color: var(--ink-faint); font-weight: 400; }
.pz-dd-trigger.open .ic { transform: rotate(180deg); }
body.glass .pz-dd-trigger, body.has-app-bg .pz-dd-trigger { background: color-mix(in srgb, var(--ink) 12%, transparent); border-color: var(--glass-border); }
.pz-dd-pop { position: fixed; z-index: 200; display: flex; flex-direction: column; gap: 2px; padding: 6px; min-width: 180px; max-height: 320px; overflow-y: auto; background: var(--card); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.4); transform-origin: top center; animation: pz-dd-in .15s cubic-bezier(.16,1,.3,1); }
@keyframes pz-dd-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pz-dd-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px) scale(.97); } }
/* Command palette (search icon / Ctrl+K). */
.cmd-overlay { position: fixed; inset: 0; z-index: 340; background: rgba(0,0,0,.4); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.cmd-box { width: min(620px, 92vw); background: var(--card); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 28px 70px rgba(0,0,0,.55); overflow: hidden; animation: pz-dd-in .16s cubic-bezier(.16,1,.3,1); }
body.glass .cmd-box, body.has-app-bg .cmd-box { background: color-mix(in srgb, var(--glass) 94%, transparent); border-color: var(--glass-border); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); }
.cmd-search { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.cmd-search .ic { width: 20px; height: 20px; color: var(--ink-faint); flex-shrink: 0; }
.cmd-search input { flex: 1; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; outline: none; }
.cmd-x { border: 0; background: none; color: var(--ink-faint); font-size: 15px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.cmd-x:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); }
.cmd-list { max-height: 56vh; overflow-y: auto; padding: 6px; }
.cmd-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; padding: 11px 12px; border-radius: 9px; cursor: pointer; position: relative; }
.cmd-opt .ic { width: 19px; height: 19px; color: var(--ink-soft); flex-shrink: 0; }
.cmd-opt-label { flex: 1; }
.cmd-opt-sub { font-size: 12px; color: var(--ink-faint); }
.cmd-opt.sel { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.cmd-opt.sel::before { content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 2px; background: var(--accent); }
.cmd-empty { padding: 22px; text-align: center; color: var(--ink-faint); font-size: 13px; }
/* Font row: Bold/Italic/Underline toggles + family dropdown. */
.pz-font-ctl { display: flex; align-items: center; gap: 10px; }
.pz-biu { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
body.glass .pz-biu, body.has-app-bg .pz-biu { border-color: var(--glass-border); }
.pz-biu-btn { width: 32px; height: 32px; border: 0; background: transparent; color: var(--ink-soft); font-size: 14px; cursor: pointer; }
/* Divider between segments = same colour as the group border (so it reads as one control). */
.pz-biu-btn + .pz-biu-btn { border-left: 1px solid var(--line-strong); }
body.glass .pz-biu-btn + .pz-biu-btn, body.has-app-bg .pz-biu-btn + .pz-biu-btn { border-left-color: var(--glass-border); }
.pz-biu-btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
/* Active segment: solid accent fill (stands out cleanly against the transparent siblings). */
.pz-biu-btn.on { background: var(--accent); color: var(--accent-fg); font-weight: 800; }
/* Sub-rows inside an expandable row's panel (e.g. Transparency effects > Blur/Opacity/Tint). */
.pz-subrow { display: flex; align-items: center; gap: 14px; padding: 11px 0; }
.pz-subrow + .pz-subrow { border-top: 1px solid var(--glass-border); }
/* Control cell that may hold several chips - wrap and stay right-aligned. */
.pz-ctl-wrap { flex-shrink: 1; flex-wrap: wrap; justify-content: flex-end; }
/* Inline subrow: label keeps its natural width so the control sits right after it
   (left-aligned) instead of being pushed to the far right edge. */
.pz-subrow-inline .pz-row-main { flex: 0 0 auto; }
.pz-fx-reset { display: flex; justify-content: flex-end; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--glass-border); }
body.glass .pz-dd-pop, body.has-app-bg .pz-dd-pop { background: color-mix(in srgb, var(--glass) 92%, transparent); border-color: var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.pz-dd-opt { position: relative; display: block; width: 100%; text-align: left; padding: 9px 14px 9px 16px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13.5px; border-radius: 7px; cursor: pointer; }
.pz-dd-opt:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.pz-dd-opt.sel { background: color-mix(in srgb, var(--ink) 9%, transparent); font-weight: 600; }
.pz-dd-opt.sel::before { content: ''; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 3px; height: 16px; border-radius: 2px; background: var(--accent); }
.pz-dd-search { position: sticky; top: -6px; z-index: 1; margin: -6px -6px 4px; padding: 8px 8px 6px; background: var(--card); border-bottom: 1px solid var(--line); }
body.glass .pz-dd-search, body.has-app-bg .pz-dd-search { background: color-mix(in srgb, var(--glass) 96%, transparent); border-bottom-color: var(--glass-border); }
.pz-dd-search-in { width: 100%; box-sizing: border-box; padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; outline: none; }
.pz-dd-search-in:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pz-dd-list { display: flex; flex-direction: column; gap: 2px; }
/* Windows 11-style time field: one box with hour/minute/AM-PM segments (no colon). */
.pz-time { display: inline-flex; }
.pz-time-field { display: inline-flex; align-items: stretch; padding: 0; margin: 0; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: var(--muted); color: var(--ink); font: inherit; }
body.glass .pz-time-field, body.has-app-bg .pz-time-field { background: color-mix(in srgb, var(--ink) 12%, transparent); border-color: var(--glass-border); }
.pz-time-seg { padding: 8px 0; min-width: 50px; text-align: center; font-size: 13px; font-weight: 600; }
.pz-time-seg + .pz-time-seg { border-left: 1px solid var(--glass-border); }
.pz-time-field:focus-within { border-color: var(--accent); }
/* Typeable segments: strip native input/select chrome so they read as plain segments. */
input.pz-time-seg, select.pz-time-seg { border: 0; outline: none; background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 600; text-align: center; padding: 8px 0; width: 50px; min-width: 0; box-sizing: border-box; -webkit-appearance: none; appearance: none; cursor: text; }
input.pz-time-seg:focus { background: color-mix(in srgb, var(--accent) 16%, transparent); }
/* AM/PM uses the app's modern custom dropdown, styled to sit flush as a segment. */
.pz-time-field .pz-dd { display: inline-flex; }
.pz-time-field .pz-dd-trigger { min-width: 0; width: 62px; padding: 8px 9px; border: 0; border-left: 1px solid var(--glass-border); border-radius: 0; background: transparent; color: var(--ink); font-size: 13px; font-weight: 600; gap: 3px; }
.pz-time-field .pz-dd-trigger:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pz-time-field .pz-dd-trigger .ic { width: 13px; height: 13px; }
/* The scroll picker popup. */
.pz-tp { position: fixed; z-index: 320; background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.5); overflow: hidden; animation: pz-dd-in .16s cubic-bezier(.16,1,.3,1); }
body.glass .pz-tp, body.has-app-bg .pz-tp { background: color-mix(in srgb, var(--glass) 94%, transparent); border-color: var(--glass-border); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.pz-tp-cols { position: relative; display: flex; }
.pz-tp-band { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--accent) 30%, transparent); pointer-events: none; }
.pz-tp-col { height: 280px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
.pz-tp-col::-webkit-scrollbar { display: none; }
.pz-tp-col + .pz-tp-col { border-left: 1px solid var(--glass-border); }
.pz-tp-item { height: 40px; min-width: 68px; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; font-size: 13px; font-weight: 600; color: var(--ink-faint); cursor: pointer; }
.pz-tp-item.on { color: var(--ink); font-weight: 700; }
.pz-tp-item:hover { color: var(--ink); }
.pz-tp-actions { display: flex; border-top: 1px solid var(--glass-border); }
.pz-tp-actions button { flex: 1; padding: 11px; border: 0; background: none; color: var(--ink); font-size: 15px; cursor: pointer; }
.pz-tp-actions button:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.pz-tp-actions .pz-tp-ok { color: var(--accent); }
.pz-row-sub { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; padding: 2px 16px 6px 52px; font-size: 13px; color: var(--ink-soft); }
.pz-row-sub input[type=time] { margin-left: 6px; }
/* Expandable row (Accent / Background): summary is the row, panel reveals below. */
.pz-row-x { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pz-row-x > summary { list-style: none; cursor: pointer; background: none; border: 0; outline: none; }
.pz-row-x > summary::-webkit-details-marker { display: none; }
.pz-row-x > summary.pz-row { background: none; border: 0; border-radius: 0; }
.pz-row-chev { flex-shrink: 0; color: var(--ink-soft); display: flex; transition: transform .18s; }
.pz-row-chev .ic { width: 20px; height: 20px; }
.pz-row-x[open] .pz-row-chev { transform: rotate(180deg); }
.pz-row-panel { padding: 6px 16px 18px 52px; }
/* When a panel ends with a sub-row, its own bottom padding stacks on the sub-row's
   padding and pushes the last row visually high. Trim it so the last row sits balanced
   near the card's rounded bottom (the sub-row's own padding is the breathing room). */
.pz-row-panel:has(> .pz-subrow:last-child) { padding-bottom: 2px !important; }
.pz-row-panel .pz-bg-preview { width: 100%; max-width: 320px; height: 120px; border-radius: 10px; background-size: cover; background-position: center; border: 1px solid var(--line); }
/* Carousel: square preview (zoomed to fill) on the left, controls stacked on the right. */
.pz-bg-carousel { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.pz-bg-carousel .pz-bg-preview.square { width: 168px; height: 168px; aspect-ratio: 1 / 1; flex-shrink: 0; max-width: none; background-size: cover; background-position: center; }
/* Opaque placeholder under the thumbnail so a slow/failed photo shows neutral grey,
   never the (possibly bright) wallpaper bleeding through the translucent panel. */
.pz-row-panel .pz-bg-preview { background-color: #10151f; }
.pz-bg-carousel-ctl { flex: 1; min-width: 200px; }
/* Glass mode: rows become frosted panels. */
body.glass .pz-row, body.has-app-bg .pz-row,
body.glass .pz-row-x, body.has-app-bg .pz-row-x { background: color-mix(in srgb, var(--glass) 60%, transparent); border-color: var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
body.glass .pz-row-x > summary.pz-row, body.has-app-bg .pz-row-x > summary.pz-row { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.glass .pz-sel, body.has-app-bg .pz-sel { background-color: color-mix(in srgb, var(--ink) 12%, transparent); border-color: var(--glass-border); }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fld input[readonly] { background: var(--muted); color: var(--ink-soft); }
.fld textarea { min-height: 64px; resize: vertical; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .grid3 { grid-template-columns: 1fr; } }

/* All native selects match the app (custom chevron + focus ring) */
select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--ink);
  background-color: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 7px 32px 7px 11px; outline: none;
  transition: border-color .15s, box-shadow .15s;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
select:hover { border-color: var(--ink-faint); }
select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
select option { background: var(--card); color: var(--ink); }

/* code combo */
.combo { position: relative; }
.combo input { width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 12px; outline: none; }
.combo input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* suggestion list overlays the content below instead of pushing it down */
.combo-pop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; max-height: 260px; overflow-y: auto; background: var(--card); box-shadow: 0 16px 40px -16px rgba(0,0,0,.6); }
/* Frosted-glass suggestions (matches the command palette + custom dropdowns). */
body.glass .combo-pop, body.has-app-bg .combo-pop { background: color-mix(in srgb, var(--glass) 92%, transparent); border-color: var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.combo-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; color: var(--ink); padding: 10px 12px; font-size: 13px; }
.combo-item:hover, .combo-item.sel { background: var(--accent-soft); }
.combo-item .dotc { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.combo-item .cmain { flex: 1; }
.combo-item .cmain b { font-weight: 700; }
.combo-item .cmain .cdesc { color: var(--ink-soft); }
.combo-item .star { color: var(--ink-faint); font-size: 15px; }
.combo-item .star.on { color: var(--warn); }
.combo-empty { padding: 14px 12px; color: var(--ink-faint); font-size: 13px; line-height: 1.5; }
.log-existing { display: flex; flex-direction: column; gap: 6px; }
.log-existing .lx-del { background: none; border: 0; color: #fff; opacity: .8; margin-left: 8px; cursor: pointer; font-size: 12px; }
.log-existing .lx-del:hover { opacity: 1; }

/* hours chips + toggles */
/* modern date field + calendar popover */
.datefield { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 12px; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s; }
.datefield:hover { border-color: var(--accent); }
.datefield:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.datefield .df-val.empty { color: var(--ink-faint); }
.datefield .df-ic { width: 17px; height: 17px; fill: none; stroke: var(--ink-soft); stroke-width: 2; flex-shrink: 0; }
.cal-pop { position: fixed; z-index: 300; background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); padding: 10px; width: 272px; }
/* Frosted glass on the date picker, matching the other dropdowns/overlays. */
body.glass .cal-pop, body.has-app-bg .cal-pop { background: color-mix(in srgb, var(--glass) 92%, transparent); border-color: var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.cp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cp-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.cp-chev { width: 28px; height: 28px; border: 0; background: none; color: var(--ink-soft); border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cp-chev:hover { background: var(--hover); color: var(--ink); }
.cp-chev svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.cp-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 2px; }
.cp-dow span { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--ink-faint); padding: 4px 0; }
.cp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cp-day { border: 0; background: none; color: var(--ink); font-size: 12.5px; font-weight: 600; padding: 7px 0; border-radius: 7px; cursor: pointer; }
.cp-day:hover { background: var(--hover); }
.cp-day.out { color: var(--ink-faint); opacity: .55; }
.cp-day.nonwork:not(.sel):not(.today) { color: color-mix(in srgb, var(--accent) 78%, var(--ink)); }
.cp-day.today { box-shadow: inset 0 0 0 1px var(--accent-soft); }
.cp-day.sel { background: var(--accent); color: var(--accent-fg); }
.cp-foot { display: flex; justify-content: flex-end; margin-top: 6px; }
.cp-today { border: 0; background: none; color: var(--accent-ink); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.cp-today:hover { background: var(--accent-soft); }
.hpd-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hpd-row #hpd { max-width: 90px; }
.hpd-row .hchips { margin-right: 10px; }
.hpd-row .tgl { flex-shrink: 0; }
.hchips { display: inline-flex; gap: 6px; }
.hchip { border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-soft); border-radius: 8px; padding: 8px 14px; font-weight: 700; font-size: 13px; }
.hchip.on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.toggles { display: flex; flex-wrap: wrap; gap: 18px; margin: 14px 0; }
.tgl { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.tgl input { display: none; }
/* Solid track fill (no outline) so it reads as a toggle in both themes - iOS style. */
.tgl .sw { width: 34px; height: 20px; border-radius: 12px; background: var(--line-strong); position: relative; transition: background .15s; flex-shrink: 0; }
/* Light mode: a slightly darker OFF track so the off-state reads clearly on light panels. */
:root[data-theme="light"] .tgl input:not(:checked) + .sw,
:root[data-theme="light"] .gw-toggle input:not(:checked) + .sw { background: color-mix(in srgb, var(--ink) 20%, transparent); }
.tgl .sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.tgl input:checked + .sw { background: var(--accent); }
.tgl input:checked + .sw::after { transform: translateX(14px); }
.fill-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.fill-row .tgl { flex-shrink: 0; }
.fill-combo { flex: 1; min-width: 200px; }
.fill-combo.is-disabled { opacity: .5; pointer-events: none; }
.preview { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 12.5px; }
.preview .pv-bar { flex: 1; height: 8px; background: var(--muted); border-radius: 6px; overflow: hidden; }
.preview .pv-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--danger), var(--warn), var(--ok)); /* utilization: red → yellow → green */ }
.preview b { color: var(--ink); }

/* ===== Bell alerts popover ===== */
.bell-pop { position: fixed; z-index: 120; width: 330px; max-width: 92vw; background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
body.glass .bell-pop, body.has-app-bg .bell-pop { background: var(--glass-strong); border-color: var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.bell-head { padding: 12px 14px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--line); }
.bell-list { padding: 6px; display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
.bell-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 8px; font-size: 13px; }
.bell-item:hover { background: var(--hover); }
.bell-item .bi-ic { font-size: 15px; line-height: 1.3; color: var(--ink-soft); flex-shrink: 0; display: inline-flex; padding-top: 1px; }
.bell-item .bi-ic .ic { width: 18px; height: 18px; }
.bell-item .bi-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }

/* ===== Toast ===== */
.toast { position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%) translateY(20px); background: #0b1120; color: #fff; border: 1px solid var(--line-strong); padding: 11px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transition: all .2s; z-index: 200; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: #b42318; color: #fff; border-color: #912018; }

/* mobile-app pane (QR) - mirrors the web app */
.mobile-pane { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.qr { border-radius: 12px; background: #fff; padding: 8px; }
.mobile-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mono-link { font-size: 12px; color: var(--ink-faint); word-break: break-all; margin: 0; }
.hint { color: var(--ink-faint); font-size: 12.5px; line-height: 1.6; margin: 4px 0 0; }

code { background: var(--muted); padding: 1px 5px; border-radius: 5px; font-size: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; }
textarea:focus, input:focus, select:focus { outline: none; }
.set-body textarea:focus, #diagOut:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* scrollbars - hidden until you scroll, then auto-hide when idle (.sb-show added by JS) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; transition: background .25s; }
.sb-show::-webkit-scrollbar-thumb { background: var(--line-strong); background-clip: padding-box; }
.sb-show::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: padding-box; }

/* ===== Personalization ===== */
.pz-combos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 6px; }
.pz-combo { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); cursor: pointer; color: var(--ink); font: inherit; font-size: 13px; text-align: left; }
.pz-combo:hover { border-color: var(--accent); }
.pz-combo.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pz-preview { width: 42px; height: 34px; border-radius: 7px; border: 1px solid; flex-shrink: 0; display: flex; align-items: flex-end; padding: 5px; gap: 4px; }
.pz-preview .pz-dot { width: 10px; height: 10px; border-radius: 50%; }
.pz-preview .pz-bar { flex: 1; height: 8px; border-radius: 3px; }
.pz-name { font-weight: 600; }
/* Windows 11-style accent swatch grid: filled colour squares, selected one ticked. */
.pz-accents { display: grid; grid-template-columns: repeat(auto-fill, 48px); gap: 10px; }
.pz-accent { position: relative; width: 48px; height: 48px; border-radius: 6px; border: 2px solid transparent; background: none; cursor: pointer; padding: 2px; }
.pz-accent .pz-sw { display: block; width: 100%; height: 100%; border-radius: 4px; }
.pz-accent:hover { border-color: var(--glass-border); }
.pz-accent.active { border-color: var(--accent); }
.pz-accent.active::after { content: ''; position: absolute; top: 4px; right: 4px; width: 15px; height: 15px; border-radius: 3px; background: rgba(0, 0, 0, .55); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 6'/></svg>"); background-repeat: no-repeat; background-position: center; }
.pz-accents { grid-template-columns: repeat(auto-fill, 44px); }
.pz-accent { width: 44px; height: 44px; }
/* Custom-colour row under the preset grid (opens the OS colour picker). */
.pz-custom-row { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--glass-border); }
.pz-custom-row .pz-row-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pz-custom-btn { position: relative; overflow: hidden; }
.pz-custom-btn .pz-custom-dot { width: 16px; height: 16px; border-radius: 4px; display: inline-block; }
.pz-custom-btn input[type=color] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; }
.pz-sw-custom { background: conic-gradient(from 0deg, #ff5470, #ffb020, #10d98f, #22d3ee, #4d94ff, #a175ff, #ff5470); }
.pz-custom-btn.active { border-color: var(--accent); }
/* "Automatic" accent row (wallpaper-derived, default) above the preset grid. */
.pz-auto-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
body.glass .pz-auto-row, body.has-app-bg .pz-auto-row { background: var(--glass-row); border-color: var(--glass-border); }
.pz-auto-row:hover { border-color: var(--accent); }
.pz-auto-row.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pz-auto-row .pz-row-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pz-auto-dot { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.pz-auto-check { width: 20px; height: 20px; color: var(--accent); flex: none; }
/* Selected dark/light accent pair: two overridable tiles */
.pz-pair { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--glass-border); }
.pz-pair-t { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.pz-pair-row { display: flex; gap: 10px; }
.pz-pair-sw { flex: 1; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--glass-row, var(--muted)); cursor: pointer; text-align: left; }
.pz-pair-sw:hover { border-color: var(--accent); background: var(--hover); }
.pz-pair-sw .pz-sw { width: 26px; height: 26px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.pz-pair-tx { display: flex; flex-direction: column; line-height: 1.25; }
.pz-pair-tx b { font-size: 13px; font-weight: 600; }
.pz-pair-tx i { font-size: 11px; font-style: normal; opacity: .6; letter-spacing: .3px; }
/* Sub-heading inside an expandable panel, separating grouped controls. */
.pz-sub-h { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-faint); margin: 16px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); }
body.glass .pz-sub-h, body.has-app-bg .pz-sub-h { border-top-color: var(--glass-border); }
/* Windows-style checkbox list (flat rows with dividers, checkbox on the left). */
.pz-checks { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
body.glass .pz-checks, body.has-app-bg .pz-checks { background: var(--glass); border-color: var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
/* Inside an expandable panel the list is already carded by the panel - go flat. */
.pz-row-panel .pz-checks, body.glass .pz-row-panel .pz-checks, body.has-app-bg .pz-row-panel .pz-checks { background: transparent; border: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; margin: 0 -16px; } /* full-bleed so the hover tint reaches both edges */
.pz-row-panel .pz-check { padding-left: 16px; padding-right: 16px; } /* restore inset so content still aligns with the fields above */
/* When a panel ends with the checkbox list, drop its bottom padding so the last
   row's hover tint reaches the card's bottom edge (clipped by the card's radius). */
.pz-row-panel:has(> .pz-checks:last-child) { padding-bottom: 0 !important; }
.pz-check { display: flex; align-items: center; gap: 14px; padding: 13px 16px; cursor: pointer; border-top: 1px solid var(--line); }
body.glass .pz-check, body.has-app-bg .pz-check { border-top-color: var(--glass-border); }
.pz-check:first-child { border-top: none; }
.pz-check:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.pz-check > input { position: absolute; opacity: 0; width: 0; height: 0; }
.pz-chk { flex: none; width: 22px; height: 22px; border-radius: 5px; border: 2px solid var(--line-strong); background: transparent; position: relative; transition: background .12s, border-color .12s; }
.pz-check:hover .pz-chk { border-color: var(--accent); }
.pz-check > input:checked + .pz-chk { background: var(--accent); border-color: var(--accent); }
.pz-check > input:checked + .pz-chk::after { content: ''; position: absolute; inset: 0; background: var(--accent-fg); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 6'/></svg>") center no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 6'/></svg>") center no-repeat; }
.pz-check > input:focus-visible + .pz-chk { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.pz-check-main { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.pz-check-main b { font-size: 14px; font-weight: 600; }
.pz-check-main i { font-size: 12px; font-style: normal; color: var(--ink-faint); }
/* In-app custom colour picker. */
.cp-overlay { position: fixed; inset: 0; z-index: 360; background: rgba(0,0,0,.42); display: flex; align-items: center; justify-content: center; }
.cp-box { width: 300px; padding: 18px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 26px 66px rgba(0,0,0,.55); animation: pz-dd-in .16s cubic-bezier(.16,1,.3,1); }
body.glass .cp-box, body.has-app-bg .cp-box { background: color-mix(in srgb, var(--glass) 95%, transparent); border-color: var(--glass-border); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); }
.cp-title { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.cp-sv { position: relative; width: 100%; height: 168px; border-radius: 10px; cursor: crosshair; touch-action: none; }
.cp-sv-handle { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45); transform: translate(-50%, -50%); pointer-events: none; }
.cp-hue { width: 100%; margin: 16px 0 14px; -webkit-appearance: none; appearance: none; height: 14px; border-radius: 7px; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.cp-hue::-webkit-slider-runnable-track { height: 14px; border-radius: 7px; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.cp-hue::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -1px; border-radius: 50%; background: #fff; border: 2px solid rgba(0,0,0,.35); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.cp-row { display: flex; align-items: flex-end; gap: 8px; }
.cp-prev { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--glass-border); flex-shrink: 0; }
.cp-f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ink-faint); flex: 1; min-width: 0; }
.cp-f input { width: 100%; background: var(--muted); border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink); font: inherit; font-size: 12px; padding: 6px; }
body.glass .cp-f input, body.has-app-bg .cp-f input { background: color-mix(in srgb, var(--ink) 12%, transparent); border-color: var(--glass-border); }
.cp-actions { display: flex; gap: 8px; margin-top: 16px; }
.cp-actions .btn { flex: 1; justify-content: center; }

/* ===== Global loading overlay ===== */
.loading-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(15,23,42,.35); display: flex; align-items: center; justify-content: center; }
.loading-card { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px 18px; box-shadow: var(--shadow); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.loading-spin { width: 18px; height: 18px; border: 2.5px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; }

/* ===== Day editor (openDay) rows ===== */
.de-list { display: flex; flex-direction: column; gap: 6px; }
.de-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
.de-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.de-code { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.de-hrs { width: 76px; flex-shrink: 0; font: inherit; font-size: 14px; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 9px; text-align: right; }
.de-del { background: none; border: 0; cursor: pointer; font-size: 13px; opacity: .75; flex-shrink: 0; padding: 2px 4px; }
.de-del:hover { opacity: 1; }
.de-total { margin-top: 12px; font-weight: 700; font-size: 13px; color: var(--ink-soft); }
.de-addrow { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.de-combo { flex: 1; min-width: 0; }

/* ===== Code mapping rows (old → new) ===== */
.map-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.map-old, .map-new { font: inherit; font-size: 13px; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px; min-width: 0; flex: 1; }
.map-old { background: var(--surface); color: var(--ink-soft); }
.map-arrow { color: var(--ink-faint); font-weight: 700; flex-shrink: 0; }
.map-row .de-del { flex-shrink: 0; }
.paste-prev { margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); max-height: 180px; overflow-y: auto; }

/* Region-holiday label input sits inline with the date picker */
.hol-add .reg-hol-label { flex: 1; min-width: 0; font: inherit; font-size: 13px; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px; }

/* ===== Account screen: sign-in banner + cards ===== */
.acct-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); margin-bottom: 18px; flex-wrap: wrap; }
.acct-banner.is-in { border-color: var(--ok); background: var(--ok-soft); }
.acct-banner-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.acct-avatar { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; background: var(--muted); color: var(--ink-faint); flex-shrink: 0; }
.acct-banner.is-in .acct-avatar { background: var(--ok); color: #fff; }
.acct-avatar.photo-btn { position: relative; overflow: hidden; border: 0; padding: 0; cursor: pointer; }
.acct-avatar.photo-btn img { width: 100%; height: 100%; object-fit: cover; }
.acct-avatar .photo-cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .12s; }
.acct-avatar.photo-btn:hover .photo-cam { opacity: 1; }
.acct-avatar .photo-cam svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acct-banner-txt { min-width: 0; }
.acct-avatar.lg { width: 56px; height: 56px; font-size: 19px; }
.acct-banner-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.acct-banner.is-in .acct-banner-title { font-size: 17px; }
.acct-banner-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.acct-banner-role { font-size: 12px; color: var(--ink-faint); margin-top: 1px; }
.acct-banner .btn { flex-shrink: 0; }
.acct-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 6px; margin-bottom: 16px; background: var(--card); }
.acct-card-head { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.acct-card.collapsible > .acct-card-head { width: 100%; background: none; border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); text-align: left; }
.acct-card.collapsible > .acct-card-head:hover { color: var(--ink-soft); }
.acch-title { display: flex; align-items: center; gap: 10px; flex: 1; }
.acch-chev { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-faint); transition: transform .15s; transform: rotate(180deg); }
.acct-card.collapsed { padding-top: 14px; padding-bottom: 14px; }
.acct-card.collapsed > .acct-card-head { margin-bottom: 0; }
.acct-card.collapsed .acch-chev { transform: rotate(0); }
.acct-card.collapsed > .acct-card-body { display: none; }
.acct-badge { text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-ink); }
.acct-badge.muted { background: var(--muted); color: var(--ink-soft); }

/* Day editor: inline add rows */
.de-addhead { margin: 16px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
#deAddRows .de-addrow { margin-top: 0; margin-bottom: 8px; }
.de-addmore { flex-shrink: 0; width: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.de-addmore .ic { width: 16px; height: 16px; }

/* ===== KPMG sign-in step (email → request link → paste) ===== */
.signin-step .gw-actions { display: flex; gap: 8px; align-items: stretch; }
.signin-step .gw-actions input { flex: 1; min-width: 0; font: inherit; font-size: 13.5px; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 11px; }
.signin-step .gw-actions .btn { flex-shrink: 0; }
.signin-step .gw-status { margin-bottom: 10px; }

/* Combo suggestion list rendered as a fixed layer on <body> (escapes modal clipping) */
.combo-pop.portal { position: fixed; top: auto; left: auto; right: auto; z-index: 300; }

/* Save button while a server save is in flight: diskette swaps to a spinning ring */
.tb-save.saving { pointer-events: none; opacity: .9; }
.tb-save.saving .ic { animation: spin .8s linear infinite; }
/* Fixed widths so the caption swap (Save/Saving/Saved, Submit/Submitted) never resizes the button. */
.tb-save { min-width: 112px; justify-content: center; }
.tb-submit { min-width: 134px; justify-content: center; }

/* Code mapping: category → code rows */
.map-cat { width: 190px; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--ink); }
.map-combo { flex: 1; min-width: 0; }
.map-combo input { font-size: 13px; padding: 8px 10px; }

/* ===== Settings › Shortcuts ===== */
.sc-right { display: flex; align-items: center; gap: 10px; }
.kbd { display: inline-block; min-width: 44px; text-align: center; padding: 5px 10px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 7px; background: var(--surface); color: var(--ink); font: 600 12px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.kbd.rec { border-color: var(--accent); color: var(--accent-ink); }

/* ===== Right-click menu ===== */
.ctx-menu { position: fixed; z-index: 400; min-width: 220px; padding: 6px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow); }
.ctx-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.ctx-item:hover { background: var(--accent-soft); color: var(--accent-ink); }
.ctx-item .ic { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-soft); }
.ctx-item:hover .ic { color: var(--accent-ink); }
.ctx-item.danger { color: var(--danger); } .ctx-item.danger .ic { color: var(--danger); }
.ctx-item:disabled { opacity: .45; cursor: default; } .ctx-item:disabled:hover { background: none; color: var(--ink); }
.ctx-sep { height: 1px; background: var(--line); margin: 4px 6px; }

/* ===== Submitted-month lock banner ===== */
.lock-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding: 9px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-strong); font-size: 12.5px; color: var(--ink-soft); }
.lock-banner .lb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st-review); flex-shrink: 0; }
.lock-banner b { color: var(--ink); }
.lock-banner .grow { flex: 1; }
.lock-banner.local .lb-dot { background: var(--warn); }

/* Picker header label as a drill-up button (month → year → years) */
.mp-year.mp-link, .cp-title.mp-link { background: none; border: 0; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; padding: 3px 10px; border-radius: 7px; }
.mp-year.mp-link:hover, .cp-title.mp-link:hover { background: var(--accent-soft); color: var(--accent-ink); }

/* Neutral (not "signed in") status line, e.g. "sign-in link requested" */
.gw-status.info .dot { background: var(--accent); }
.gw-status.info .sub-note { margin-left: 6px; }

/* Log hours: "already logged" rows open the code's editor; Clear hours arms on first click */
.wk-entry.clickable { cursor: pointer; }
.wk-entry.clickable:hover { filter: brightness(1.12); }
.lx-clear { color: var(--danger); border-color: transparent; }
.lx-clear:hover { background: var(--danger-soft); border-color: transparent; }
.lx-clear.armed { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ===== Custom calendar background (Settings › Personalization) ===== */
:root { --cal-veil-rgb: 255, 255, 255; }
:root[data-theme="dark"], :root:not([data-theme="light"]) { --cal-veil-rgb: 11, 17, 32; }
.ts-cal.has-bg { background-image: linear-gradient(rgba(var(--cal-veil-rgb), var(--cal-dim, .55)), rgba(var(--cal-veil-rgb), var(--cal-dim, .55))), var(--cal-bg-url); background-size: cover; background-position: center; border-radius: var(--radius); }
/* Calendar-only background: use the SAME glass tokens as whole-app so the
   Personalization Blur / Opacity / Tint sliders apply here too. */
.ts-cal.has-bg .cal-wrap { background: color-mix(in srgb, var(--glass) 50%, transparent); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.ts-cal.has-bg .cal-wrap.year-wrap { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ts-cal.has-bg .ym-card { background: var(--glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.ts-cal.has-bg .cell:hover { background: rgba(0, 0, 0, .22); } /* darken over the wallpaper, not a solid fill */
/* Whole-interface background (Personalization → Background → Apply to: Whole app)
   Every surface becomes ONE consistent frosted glass: same translucency, a real
   backdrop-blur (so text stays readable over any wallpaper), and the original
   full-bleed layout + borders (no floating rounded panels, no opacity jumps). */
/* Two levels of frost. The wallpaper layer carries a MODERATE base blur so open
   areas are softened + readable; cards then blur it FURTHER on top for a strong
   frost. #appBg sits BEHIND everything (z-index:-1) and .app must NOT create an
   isolating stacking context, or panel backdrop-filter can't sample it. */
/* contrast()/brightness() flatten the wallpaper's tonal range so bright (sky) and
   dark (mountain) regions converge - the translucent glass then reads consistently
   over any part of the photo, without making the panels opaque. */
#appBg { position: fixed; inset: 0; z-index: -2; background-size: cover; background-position: center; filter: blur(var(--wall-blur, 7px)) contrast(.62) brightness(.88); }
/* One single uniform tint across the WHOLE viewport (behind all UI), so there are
   no untinted wallpaper "cuts" in the margins around the floating nav pill. The
   chrome surfaces (nav/sidebar/main) stay transparent and just show this one veil. */
body.has-app-bg::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--glass-veil); pointer-events: none; }
body.has-app-bg .app { background: transparent; }
/* Base veil over the whole content area: a moderate TINT so text is readable on
   bare wallpaper. Cards/panels add a stronger tint + stronger blur on top. */
body.has-app-bg .main { background: transparent; }
/* Year view: month cards float on the single page-wide veil (defined on body::before). */
body.has-app-bg[data-page="timesheet"][data-view="year"] .main {
  background: transparent;
}

/* Kill the navy at the source: in glass / whole-app mode, remap the solid fill
   tokens (--surface, --muted) to translucent glass tints so EVERY field, input,
   preset button, chip and control becomes frosted glass instead of dark blue. */
body.glass, body.has-app-bg {
  --surface: var(--glass-row);
  --muted: var(--glass-row);
}
/* Dark + glass: --card is navy (#0f172a) and still leaks through every
   color-mix(--card ...) (calendar cells, hovers, etc). Remap it to a NEUTRAL
   charcoal so nothing reads as blue. (Light --card is already white = neutral.) */
:root[data-theme="dark"] body.glass,
:root[data-theme="dark"] body.has-app-bg {
  --card: #1b1d23;
  /* Translucent panels wash out the dim greys, so lift the faint/soft ink tokens
     for readable labels + hints (CODE, START, "Min 8h ...", etc). */
  --ink-soft: #c2cddd;
  --ink-faint: #9aa7bd;
}
/* Light + glass: the frosted panels are pale, so the faint greys wash out.
   Darken the muted/faint ink tokens here so labels + hints stay readable. */
:root[data-theme="light"] body.glass,
:root[data-theme="light"] body.has-app-bg {
  --ink-soft: #33415a;
  --ink-faint: #4b5a70;
}

/* Shared frosted-glass surface used by all chrome + panels in whole-app mode.
   Neutral --glass-strong tint (not navy) keeps it consistent over any wallpaper. */
body.has-app-bg .topnav,
body.has-app-bg .statusbar,
body.has-app-bg .settings-nav,
body.has-app-bg .settings-content {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
/* Sidebar shares the MAIN content plane: same veil tint, same (no own) blur, so
   the sidebar|main divider is a clean line, not a tint/blur jump. */
body.glass .sidebar, body.has-app-bg .sidebar {
  background: transparent;
  border-color: var(--glass-border);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* The content wrapper carries the frost (so it sits behind the page title too);
   the scroll area inside stays transparent to avoid a double tint. */
body.has-app-bg .settings-pane { background: transparent; }
/* Slightly lighter left column so it reads as a distinct but matching surface. */
body.has-app-bg .settings-nav { background: var(--glass); }
/* Keep the top bar (and its dropdowns) painting above the frosted body content. */
body.has-app-bg .topnav { position: relative; z-index: 5; }
/* List rows (Personalization / Calendar / Budgeting drill-ins) become glass too,
   so they don't sit as solid navy blocks against the frosted panel. */
body.has-app-bg .tpl-item { background: var(--glass-row); border-color: var(--glass-border); }
body.glass .tpl-item:hover, body.has-app-bg .tpl-item:hover { background: color-mix(in srgb, var(--ink) 12%, var(--glass-strong)) !important; border-color: color-mix(in srgb, var(--ink) 22%, transparent) !important; }
/* Content cards carry the STRONG frost: they blur the (crisp) wallpaper behind
   them, while bare gaps between cards stay sharp with only the light veil tint. */
body.has-app-bg .card,
body.has-app-bg .acct-card,
body.has-app-bg .proj-card,
body.has-app-bg .alloc-card,
body.has-app-bg .user-card,
body.has-app-bg .emp-panel,
body.has-app-bg .modal,
body.has-app-bg .menu-pop {
  background: var(--glass-strong);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

/* Modals use the same frosted tint as the dropdown menus (glass + blur). */
/* Dialogs use a FIXED, high opacity (base 0.55 + 0.20 = 0.75), independent of the
   personalization opacity slider, so their content always stays readable. */
body.glass .modal, body.has-app-bg .modal { background: color-mix(in srgb, var(--glass-color) 75%, transparent) !important; -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }

/* Calendar grid: lighter frosted surface so more wallpaper shows through the
   month/week/day grid (the Glass theme also forces --glass, hence !important). */
body.has-app-bg .cal-wrap { background: var(--glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border-radius: var(--radius); }
body.glass .cal-wrap:not(.year-wrap), body.has-app-bg .cal-wrap:not(.year-wrap) { background: color-mix(in srgb, var(--glass) 50%, transparent) !important; }
/* Content cards + settings panels share the calendar's lighter tint so all
   frosted surfaces match across Dashboard, Timesheet and Settings. */
body.glass .card, body.has-app-bg .card,
body.glass .acct-card, body.has-app-bg .acct-card,
body.glass .emp-panel, body.has-app-bg .emp-panel,
body.glass .settings-content, body.has-app-bg .settings-content,
body.glass .settings-nav, body.has-app-bg .settings-nav { background: color-mix(in srgb, var(--glass) 50%, transparent) !important; }
body.has-app-bg .cal-wrap.year-wrap, body.glass .cal-wrap.year-wrap { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-color: transparent !important; }
/* Year view: each month is its own frosted glass card (gaps show the wallpaper). */
body.glass .ym-card, body.has-app-bg .ym-card { background: var(--glass); border-color: var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
body.has-app-bg .cell:hover { background: rgba(0, 0, 0, .22); }
/* A dropdown can only blur the page below it if no ANCESTOR is a backdrop root.
   The topnav's own backdrop-filter would make it one, so the top bar is a solid
   tint (no blur) - and the dropdown then gets a real frosted-glass blur. */
/* Top bar is a translucent tint with NO backdrop-filter of its own: it shows the
   wallpaper's base blur + tint (so the frost reads across the whole top edge), and
   because it isn't a backdrop root, the dropdown menus below it can still blur. */
/* Floating rounded top bar (a glass pill). A full-width dark-tint band sits behind
   it (body::before) so the whole top strip reads as one tinted background. The bar
   has NO backdrop-filter, so the dropdown menus below it can still blur. */
body.glass .topnav, body.has-app-bg .topnav {
  position: relative; z-index: 5;
  margin: 9px 12px 8px; border-radius: 16px;
  border: 1px solid var(--glass-border);
  /* A wash sets the floating bar apart from the veil (no backdrop-filter, so the
     dropdown menus can still blur): darker in dark mode, brighter/white in light. */
  background: rgba(0, 0, 0, .28) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
:root[data-theme="light"] body.glass .topnav, :root[data-theme="light"] body.has-app-bg .topnav { background: rgba(255, 255, 255, .5) !important; }
/* No full-width band behind the nav: the floating pill carries its own glass
   background, so a band only pokes out below/around the inset pill as a strip. */
body.glass .menu-pop, body.has-app-bg .menu-pop {
  background: color-mix(in srgb, var(--glass) 75%, transparent) !important;
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
/* ===== Glass theme (iOS-style frosted translucent panels) ===== */
body.glass .card, body.glass .acct-card, body.glass .cal-wrap, body.glass .proj-card,
body.glass .tpl-item, body.glass .settings-content, body.glass .settings-nav,
body.glass .statusbar,
body.glass .emp-panel, body.glass .alloc-card, body.glass .user-card {
  background: color-mix(in srgb, var(--glass) 75%, transparent) !important;
  border-color: var(--glass-border) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
body.glass .settings-pane { background: transparent !important; }
/* Settings + Help share the .settings-view layout: keep their nav/content/pane
   transparent (and no own blur) so they show the single page-wide veil, matching
   every other page instead of painting a darker solid glass. */
body.glass .settings-nav, body.has-app-bg .settings-nav,
body.glass .settings-content, body.has-app-bg .settings-content,
body.glass .settings-pane, body.has-app-bg .settings-pane {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.glass .tpl-item { background: var(--glass-row) !important; }
body.glass .card, body.glass .acct-card, body.glass .proj-card, body.glass .tpl-item { border-color: color-mix(in srgb, var(--ink) 14%, transparent); }

/* ===== Readability over glass / whole-app wallpaper =====
   Translucent panels lower effective contrast, so lift faint text + icons and
   add a subtle shadow so labels stay legible over any tint or wallpaper. */
body.glass .settings-nav-title,
body.has-app-bg .settings-nav-title { color: var(--ink-soft); }
body.glass .settings-navitem,
body.has-app-bg .settings-navitem { color: var(--ink); }
body.glass .set-ic,
body.has-app-bg .set-ic { color: var(--ink-soft); }
body.glass .tpl-sub,
body.has-app-bg .tpl-sub { color: var(--ink-soft); }
/* Icon chips shouldn't be solid navy blocks on glass rows. */
body.glass .tpl-ic,
body.has-app-bg .tpl-ic { background: var(--glass-row); color: var(--ink); }
/* Gentle legibility shadow for labels/headings sitting on translucent surfaces. */
body.glass .settings-navitem,
body.glass .settings-nav-title,
body.glass .tpl-title,
body.has-app-bg .settings-navitem,
body.has-app-bg .settings-nav-title,
body.has-app-bg .tpl-title { text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
:root[data-theme="light"] body.glass .settings-nav-title,
:root[data-theme="light"] body.has-app-bg .settings-nav-title,
:root[data-theme="light"] body.glass .tpl-title,
:root[data-theme="light"] body.has-app-bg .tpl-title { text-shadow: 0 1px 2px rgba(255, 255, 255, .55); }
/* Settings-nav labels sit on their own light panel, so drop the washing halo and
   use a crisp near-black in light mode. */
:root[data-theme="light"] body.glass .settings-navitem,
:root[data-theme="light"] body.has-app-bg .settings-navitem { color: #0b1220; text-shadow: none; }

/* ===== Inner rows, banners and segmented controls become glass too =====
   Anything that is normally a solid navy/surface fill turns into a frosted tint
   so it reads as glass, not an accent-coloured block, over the wallpaper. */
body.glass .plan-item, body.has-app-bg .plan-item,
body.glass .de-row, body.has-app-bg .de-row,
body.glass .acct-banner, body.has-app-bg .acct-banner,
body.glass .seg, body.has-app-bg .seg,
body.glass .hol-chip, body.has-app-bg .hol-chip {
  background: var(--glass-row);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
/* Active segment: a lighter glass tint (not a solid card) marks the selection. */
/* Chosen segment: a bright raised pill (bold + shadow) so it's clearly selected.
   Theme-aware brightness: a light overlay in dark mode, a near-white pill in light. */
body.glass .seg button.active, body.has-app-bg .seg button.active { background: rgba(255,255,255,.16) !important; color: var(--ink); font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.28), inset 0 0 0 1px var(--glass-border); }
:root[data-theme="light"] body.glass .seg button.active, :root[data-theme="light"] body.has-app-bg .seg button.active { background: rgba(255,255,255,.95) !important; box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.06); }
/* Semantic banners: a warm/danger tint over the translucent glass + a real blur,
   so they read as a frosted coloured panel (you can see the blurred wallpaper). */
body.glass .warn-box, body.has-app-bg .warn-box {
  background: color-mix(in srgb, var(--warn) 26%, var(--glass));
  border-color: color-mix(in srgb, var(--warn) 50%, var(--glass-border));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
body.glass .warn-box.danger, body.has-app-bg .warn-box.danger {
  background: color-mix(in srgb, var(--danger) 26%, var(--glass));
  border-color: color-mix(in srgb, var(--danger) 50%, var(--glass-border));
}
body.glass .lock-banner, body.has-app-bg .lock-banner { background: var(--glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
/* Liquid-glass buttons: a theme-matched frosted fill (light in light mode, dark
   in dark mode) with the label + icon in the chosen accent colour. Primary / ok /
   danger keep their solid semantic fill so the main call-to-action stays prominent. */
body.glass .btn:not(.primary):not(.ok):not(.danger),
body.has-app-bg .btn:not(.primary):not(.ok):not(.danger) {
  background: var(--glass);
  border-color: var(--glass-border);
  color: var(--ink);
}
body.glass .btn:not(.primary):not(.ok):not(.danger):hover,
body.has-app-bg .btn:not(.primary):not(.ok):not(.danger):hover { background: var(--glass-strong); }
body.glass .btn:not(.primary):not(.ok):not(.danger) .ic,
body.has-app-bg .btn:not(.primary):not(.ok):not(.danger) .ic { color: var(--ink-soft); }

/* ===== Performance: cap the number of backdrop-filter passes =====
   backdrop-filter is the single most expensive thing in glass mode: every frosted
   element is its own GPU blur pass that re-reads the framebuffer whenever anything
   behind it moves (i.e. on every scroll frame). The wallpaper (#appBg) is ALREADY
   blurred once as a fixed layer, so a translucent panel drawn over it looks frosted
   WITHOUT needing a second live blur of its own. We therefore strip backdrop-filter
   from all in-flow panels/cards/rows/chrome and keep it ONLY on the few true
   overlays that float over live, un-blurred content (modal, menus, dropdown popups,
   the time/colour pickers, the command palette, the alerts popover). Measured: this
   removes the persistent per-frame blur cost that dropped scroll to ~40fps. */
body.glass .tpl-item, body.has-app-bg .tpl-item,
body.glass .tpl-ic, body.has-app-bg .tpl-ic,
body.glass .plan-item, body.has-app-bg .plan-item,
body.glass .de-row, body.has-app-bg .de-row,
body.glass .acct-banner, body.has-app-bg .acct-banner,
body.glass .seg, body.has-app-bg .seg,
body.glass .hol-chip, body.has-app-bg .hol-chip,
body.glass .btn, body.has-app-bg .btn,
body.glass .card, body.has-app-bg .card,
body.glass .acct-card, body.has-app-bg .acct-card,
body.glass .proj-card, body.has-app-bg .proj-card,
body.glass .user-card, body.has-app-bg .user-card,
body.glass .alloc-card, body.has-app-bg .alloc-card,
body.glass .emp-panel, body.has-app-bg .emp-panel,
body.glass .cal-wrap, body.has-app-bg .cal-wrap,
body.glass .ym-card, body.has-app-bg .ym-card,
body.glass .week-colhead, body.has-app-bg .week-colhead,
body.glass .statusbar, body.has-app-bg .statusbar,
body.glass .set-row, body.has-app-bg .set-row,
body.glass .pz-row-x, body.has-app-bg .pz-row-x,
body.glass .pz-checks, body.has-app-bg .pz-checks,
body.glass .warn-box, body.has-app-bg .warn-box,
body.glass .lock-banner, body.has-app-bg .lock-banner,
body.glass .settings-content, body.has-app-bg .settings-content,
body.glass .settings-nav, body.has-app-bg .settings-nav {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Perf: instant hover in glass mode. Animating a background over a frosted region
   re-blurs the backdrop every frame of the transition; one instant repaint is cheap. */
body.glass .btn, body.has-app-bg .btn,
body.glass .settings-navitem, body.has-app-bg .settings-navitem,
body.glass .tpl-item, body.has-app-bg .tpl-item,
body.glass .nav-chev, body.has-app-bg .nav-chev,
body.glass .cell, body.has-app-bg .cell,
body.glass .cal-title, body.has-app-bg .cal-title,
body.glass .menu-item, body.has-app-bg .menu-item,
body.glass .user-card, body.has-app-bg .user-card,
body.glass .proj-card, body.has-app-bg .proj-card,
body.glass .plan-item, body.has-app-bg .plan-item {
  transition: none !important;
}

.pz-bg { display: flex; gap: 16px; align-items: flex-start; }
.pz-bg-preview { width: 180px; height: 110px; flex-shrink: 0; border-radius: 10px; border: 1px dashed var(--line-strong); background: var(--surface) center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 12px; }
.pz-bg-preview.has { border-style: solid; }
.pz-bg-ctl { flex: 1; min-width: 0; }
.pz-range { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); max-width: 360px; }
.pz-range input[type=range] { accent-color: var(--accent); width: 100%; }

/* Combo suggestion group headers (Starred / Recent) */
.combo-group { padding: 10px 12px 5px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
/* Even rhythm: every section header gets the same spacing above (no special-casing
   the first vs the rest, no divider) so the item rows read as evenly spaced. */

/* ===== Absence e-mail preview (Book → request by e-mail) ===== */
.em-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.em-att { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line-strong); font-size: 12.5px; }
.em-att .em-x { background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-size: 13px; padding: 0 2px; }
.em-att .em-x:hover { color: var(--danger); }
.fld textarea.em-body, textarea.em-body { min-height: 300px; font: inherit; font-size: 13.5px; line-height: 1.5; resize: none; overflow: hidden; }
.tpl-vars { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
/* Email-templates list (Windows-settings style drill-in) */
.tpl-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.tpl-item { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 13px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font: inherit; color: var(--ink); transition: border-color .12s, background .12s; }
.tpl-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.tpl-ic { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; background: var(--muted); color: var(--ink-soft); flex-shrink: 0; }
.tpl-ic .ic { width: 19px; height: 19px; }
.tpl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tpl-title { font-weight: 600; font-size: 14px; }
.tpl-sub { font-size: 12px; color: var(--ink-faint); }
.tpl-chev { width: 18px; height: 18px; color: var(--ink-faint); flex-shrink: 0; }
.tpl-back { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; color: var(--accent-ink); font: inherit; font-size: 13px; font-weight: 600; padding: 0 0 12px; }
.tpl-back:hover { text-decoration: underline; }
.tpl-back .ic { width: 16px; height: 16px; }
/* Settings breadcrumb title (parent › current), Windows-style: neutral grey parent +
   thin chevron, full-strength current. */
.crumb-parent { background: none; border: 0; cursor: pointer; font: inherit; font-weight: 400; color: color-mix(in srgb, var(--ink) 52%, transparent); padding: 0; transition: color .12s; }
.crumb-parent:hover { color: var(--ink); }
.crumb-sep { color: color-mix(in srgb, var(--ink) 38%, transparent); margin: 0 12px; font-weight: 400; }
.crumb-cur { color: var(--ink); font-weight: 600; }
.sr-val { font-size: 13px; color: var(--ink-soft); }
.about-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.about-logo { width: 52px; height: 52px; border-radius: 13px; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; flex-shrink: 0; }
.about-name { font-size: 18px; font-weight: 800; color: var(--ink); }
.about-ver { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
/* Settings pane drill in/out slide animation */
@keyframes paneFwd { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes paneBack { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.pane-anim-fwd { animation: paneFwd .18s ease; }
.pane-anim-back { animation: paneBack .18s ease; }
/* Calendar navigation animations - TRANSFORM-ONLY so the frosted calendar does
   not blink (opacity < 1 would make it a backdrop root and drop the wallpaper). */
@keyframes calSlideL { from { transform: translate3d(28px, 0, 0); } to { transform: none; } }
@keyframes calSlideR { from { transform: translate3d(-28px, 0, 0); } to { transform: none; } }
@keyframes calZoom { from { transform: scale(.975); } to { transform: none; } }
.cal-slide-left { animation: calSlideL .18s ease-out; will-change: transform; }
.cal-slide-right { animation: calSlideR .18s ease-out; will-change: transform; }
.cal-zoom { animation: calZoom .14s ease-out; will-change: transform; }
@keyframes pickZoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.pick-zoom { animation: pickZoom .15s ease; }
/* Night light warm overlay */
#nightLightOverlay { position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: #ff8a2b; mix-blend-mode: multiply; opacity: 0; transition: opacity .3s ease; }
/* Personalization toggle rows + schedule */
.pz-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.pz-tt { display: flex; flex-direction: column; gap: 2px; }
.pz-sched { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 8px; }
.pz-sched label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.pz-range-in { width: 100%; max-width: 340px; }
.tpl-vars code { font-size: 11.5px; padding: 2px 7px; border-radius: 6px; background: var(--muted); color: var(--ink-soft); }

/* ============================================================
   DESKTOP - Allocations tab, Users/Employees, role gating
   ============================================================ */
/* role gating: hide poster/manager-only UI when the server says so */
body.nopost   .cap-post   { display: none !important; }
body.nomanage .cap-manage { display: none !important; }
.menu-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; margin-left: 6px; }

/* ---- Allocations page ---- */
.alloc-view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 14px 20px 18px; }
.alloc-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; flex-shrink: 0; }
.alloc-filters .ff { display: flex; flex-direction: column; gap: 4px; }
.alloc-filters label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.alloc-filters select { font: inherit; font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 7px 10px; min-width: 120px; }
.alloc-filters .ff-spacer { flex: 1; }
.alloc-lastposted { font-size: 12px; color: var(--ink-faint); align-self: center; }
.alloc-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; }

/* employees panel */
.emp-panel { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.emp-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; }
.emp-panel-head h3 { margin: 0; font-size: 14px; font-weight: 800; color: var(--ink); }
.emp-panel-head .count { font-size: 12px; font-weight: 700; color: var(--ink-faint); background: var(--muted); border-radius: 10px; padding: 1px 8px; }
.emp-search { margin: 0 12px 8px; }
.emp-search input { width: 100%; font: inherit; font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 10px; outline: none; }
.emp-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Directory-search results dropdown inside the Add employee modal */
.emp-results { margin-top: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card); box-shadow: var(--shadow); max-height: 220px; overflow-y: auto; }
.emp-result { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 8px 12px; cursor: pointer; font: inherit; color: var(--ink); }
.emp-result:last-child { border-bottom: 0; }
.emp-result:hover:not(.muted) { background: var(--accent-soft); }
.emp-result.muted { color: var(--ink-faint); cursor: default; }
.emp-result .er-name { font-size: 14px; font-weight: 600; }
.emp-result .er-sub { font-size: 12px; color: var(--ink-faint); }
.emp-list { list-style: none; margin: 0; padding: 4px 6px 8px; overflow-y: auto; flex: 1; min-height: 0; }
.emp-item { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 10px; cursor: pointer; }
.emp-item:hover { background: var(--hover); }
.emp-item.active { background: var(--accent-soft); }
.emp-item.idle .emp-main { opacity: .72; }
.avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; position: relative; }
.avatar.avatar-lg { width: 46px; height: 46px; font-size: 16px; }
.emp-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--card); }
.dot-draft { background: var(--warn); } .dot-posted { background: var(--st-review); } .dot-downloaded { background: var(--ok); }
.emp-main { flex: 1; min-width: 0; }
.emp-name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-role { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-metrics { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.emp-hours { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.emp-util { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 8px; }
.util-hi { background: var(--ok-soft); color: var(--ok); } .util-mid { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); } .util-lo { background: var(--danger-soft); color: var(--danger); }
.list-empty { text-align: center; color: var(--ink-faint); font-size: 13px; padding: 24px 12px; }
.list-empty .btn { margin-top: 10px; }

/* detail column */
.alloc-detail-col { display: flex; flex-direction: column; min-height: 0; gap: 12px; }
.alloc-detail { flex: 1; min-height: 0; overflow-y: auto; }
.alloc-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink-faint); gap: 10px; }
.alloc-empty .big { font-size: 40px; opacity: .5; }
.detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.detail-person { display: flex; align-items: center; gap: 12px; }
.detail-person h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); }
.detail-person p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-faint); }
.status-pill { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: var(--muted); color: var(--ink-soft); }
.status-pill.pill-ok { background: var(--ok-soft); color: var(--ok); }
.status-pill.pill-info { background: var(--accent-soft); color: var(--accent-ink); }
.status-pill.pill-warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.alloc-card { padding: 14px 16px; }
.alloc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.alloc-head h3 { margin: 0; font-size: 14px; font-weight: 800; color: var(--ink); }
.alloc-head .total { font-size: 12.5px; color: var(--ink-soft); }
.alloc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.alloc-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.alloc-table th.num, .alloc-table td.num { text-align: right; }
.alloc-table td { padding: 8px 8px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.alloc-table .code-cell { font-weight: 600; }
.client-cell { display: inline-flex; align-items: center; gap: 7px; }
.client-cell.client-muted { color: var(--ink-faint); }
.client-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.row-del { background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 6px; }
.row-del:hover { color: var(--danger); background: var(--danger-soft); }
.alloc-empty-row td { color: var(--ink-faint); text-align: center; padding: 16px; }
.add-row { display: grid; grid-template-columns: minmax(0,1fr) 90px 150px 150px 40px; gap: 8px; align-items: center; margin-top: 12px; }
.add-row .combo { min-width: 0; }
.add-row input[type=number] { font: inherit; font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 10px; }
.btn-add { width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--accent); color: var(--accent-fg); font-size: 20px; line-height: 1; cursor: pointer; }
.btn-add:hover { background: var(--accent-ink); }
.alloc-actions { display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0; }

/* ---- Users / Employees settings ---- */
.users-topbar, .emps-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
.users-topbar .sub-note, .emps-topbar .sub-note { margin: 0; }
.user-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); margin-bottom: 8px; cursor: pointer; }
.user-card:hover { background: var(--hover); }
.user-card .u-main { flex: 1; min-width: 0; }
.user-card .u-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.user-card .u-meta { font-size: 11.5px; color: var(--ink-faint); }
.urole { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-ink); flex-shrink: 0; }
.ustatus { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; flex-shrink: 0; }
.us-pending { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.us-rejected { background: var(--danger-soft); color: var(--danger); }
.us-verified { background: var(--ok-soft); color: var(--ok); }

/* ===== Charge-out rates ===== */
.rate-head { display: grid; grid-template-columns: 1fr 160px 40px; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-faint); margin: 14px 0 6px; }
.rate-row { display: grid; grid-template-columns: 1fr 160px 40px; gap: 10px; align-items: center; margin-bottom: 8px; }
.rate-row input { width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 10px; outline: none; }
.rate-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input-sm { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 10px; outline: none; }
.input-sm:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rate-usd { display: flex; align-items: center; gap: 6px; }
.rate-usd > span { color: var(--ink-faint); font-weight: 600; }
.rate-del { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; line-height: 1; font-size: 13px; }

/* ===== My Projects (settings) ===== */
.proj-card { display: flex; flex-direction: column; gap: 7px; padding: 11px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; }
.proj-grid { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-items: baseline; }
.proj-card.clickable { cursor: pointer; transition: border-color .12s, background .12s; }
.proj-card.clickable:hover { border-color: var(--accent); background: var(--accent-soft); }
.proj-code { font-weight: 700; font-size: 14px; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-name { font-size: 12.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pf-bal { font-weight: 800; font-size: 15px; line-height: 1.1; color: var(--ok); text-align: right; white-space: nowrap; }
.pf-bal.neg { color: var(--danger); }
.proj-stats { font-size: 12px; color: var(--ink-faint); text-align: right; white-space: nowrap; }
.pf-k { color: var(--ink-faint); }

/* ===== Utilization target + auto-allocate (allocations) ===== */
.util-target { display: flex; align-items: center; gap: 18px; padding: 14px 16px; margin-bottom: 14px; }
.ut-metric { display: flex; flex-direction: column; gap: 2px; }
.ut-label { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-faint); }
.ut-val { font-size: 22px; font-weight: 800; line-height: 1; }
.ut-val.util-hi { color: var(--ok); } .ut-val.util-mid { color: var(--warn); } .ut-val.util-lo { color: var(--danger); }
.ut-sub { font-size: 11.5px; color: var(--ink-faint); }
.ut-set { display: flex; flex-direction: column; gap: 4px; margin-left: auto; }
.ut-set label { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-faint); }
.ut-set input { width: 90px; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 7px 9px; outline: none; }
.ut-set input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ===== Dashboard My Projects card ===== */
.dash-projects { margin-top: 14px; }
.proj-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.proj-row:last-child { border-bottom: 0; }
.pr-head { display: flex; align-items: baseline; gap: 8px; }
.pr-code { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.pr-name { font-size: 12.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.pr-left { font-weight: 700; font-size: 13.5px; color: var(--ok); flex-shrink: 0; }
.pr-left.neg { color: var(--danger); }
.pr-track { height: 7px; border-radius: 5px; background: var(--muted); overflow: hidden; margin: 6px 0 4px; }
.pr-track > span { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.pr-track.hot > span { background: var(--warn); }
.pr-track.over > span { background: var(--danger); width: 100% !important; }
.pr-sub { font-size: 11.5px; color: var(--ink-faint); }

/* Hide the native number-input spinners (they clash with the app's field styling). */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* ===== Dashboard view modes ===== */
.dash-segs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pr-track span.bar-util-hi { background: var(--ok); }
.pr-track span.bar-util-mid { background: var(--warn); }
.pr-track span.bar-util-lo { background: var(--danger); }
.team-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.team-row:last-child { border-bottom: 0; }
.tr-main { min-width: 0; width: 190px; flex-shrink: 0; }
.tr-name { font-weight: 600; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-sub { font-size: 11.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-bar { flex: 1; min-width: 60px; }
.tr-util { width: 84px; text-align: right; flex-shrink: 0; font-weight: 700; font-size: 13.5px; }
.tr-util.util-hi { color: var(--ok); } .tr-util.util-mid { color: var(--warn); } .tr-util.util-lo { color: var(--danger); }
.tr-target { color: var(--ink-faint); font-weight: 500; font-size: 12px; }