/* Heart to Heart Accounting — app.css v3 · clean, calm accounting UI
   Purple brand, two themes only (light/dark). Class names unchanged. */
:root {
  --primary: #7C3AED; --primary-2: #6D28D9; --accent: #9333EA;
  --grad-1: #B794F4; --grad-2: #7C3AED; --grad-3: #5B21B6;
  --btn-text: #fff;
  --radius: 12px;
  --font: 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
}
body.light {
  --primary: #7C3AED; --primary-2: #6D28D9; --accent: #9333EA;
  --grad-1: #B794F4; --grad-2: #7C3AED; --grad-3: #5B21B6;
  --btn-text: #fff;
  --bg: #f6f5fb; --panel: #ffffff; --panel-2: #f3f1fa; --panel-3: #e9e4f7;
  --text: #201b2e; --muted: #6b6478; --border: #e6e1f2;
  --pos: #097a52; --neg: #c5304a; --warn: #b45309; --info: #2563eb; --chart-grid: #f0ecf9;
  --sheen: transparent;
  --elev-1: 0 1px 2px rgba(45,20,70,.05), 0 1px 3px rgba(45,20,70,.05);
  --elev-2: 0 6px 16px -8px rgba(45,20,70,.18), 0 2px 6px rgba(45,20,70,.06);
  --glow: 0 0 0 1px rgba(124,58,237,.18);
  /* form-field border — visibly stronger than the hairline --glass-border
     used for card edges, so an input/select/textarea always reads clearly
     as "this is a box you can type in", on every theme (v69). */
  --field-border: #cabfe0;
  color-scheme: light;   /* native date-pickers/scrollbars render light-appropriate */
}
body.dark {
  /* brighter, more luminous purple than the light theme's so it still reads
     clearly against a dark background */
  --primary: #A78BFA; --primary-2: #C4B5FD; --accent: #C084FC;
  --grad-1: #A78BFA; --grad-2: #7C3AED; --grad-3: #4C1D95;
  /* primary here is light enough that white button text fails contrast
     (was a real pre-existing bug across every theme — .btn-primary etc.
     hardcoded white text regardless of how light --primary was); a dark
     ink reads correctly against this brighter dark-theme primary instead. */
  --btn-text: #1e1930;
  --bg: #15121f; --panel: #1e1930; --panel-2: #262038; --panel-3: #302848;
  --text: #f1edfb; --muted: #a89fc0;
  /* v69: bumped lighter (was too close in luminance to --panel/--panel-2
     through the glass blur, making every divider/table-row/chip line nearly
     invisible in dark mode). */
  --border: #4a3f66;
  --pos: #34D399; --neg: #fb7185; --warn: #fbbf24; --info: #60a5fa; --chart-grid: #2e2640;
  --sheen: transparent;
  --elev-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.25);
  --elev-2: 0 10px 26px -12px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.4);
  --glow: 0 0 0 1px rgba(167,139,250,.3);
  /* v69: the old shared --glass-border made every input/textarea in every
     modal effectively invisible — a clearly visible border fixes every form
     on every screen at once. */
  --field-border: #5b4d80;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--text); font-size: 14px; line-height: 1.5;
  background: var(--bg); position: relative; }
/* ---------- glass tint (v58) ----------
   Whole-app glassmorphism pass: soft blurred colour blobs sit fixed behind
   everything (this layer), and the main surfaces — sidebar, topbar, cards,
   modals, inputs, buttons, toasts — are translucent with backdrop-filter
   blur so this shows through them, which is what actually reads as "glass"
   (a translucent panel over a flat single colour just looks grey/washed out,
   not glassy). Uses each theme's own --grad-1/2/3, so light/dark each get
   their own tint. Fixed + negative z-index so it never scrolls and never
   needs any other element to change its stacking
   context. Printed pages stay solid white (see @media print at the bottom). */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(640px circle at 6% 10%, color-mix(in srgb, var(--grad-1) 32%, transparent), transparent 62%),
    radial-gradient(600px circle at 96% 14%, color-mix(in srgb, var(--grad-3) 26%, transparent), transparent 60%),
    radial-gradient(720px circle at 40% 105%, color-mix(in srgb, var(--grad-2) 22%, transparent), transparent 65%),
    var(--bg);
}
/* shared glass recipe, reused via var() so every surface stays in sync —
   tune once here, not in a dozen places. --glass-a controls opacity (how
   much page tint bleeds through), --glass-blur controls the frost amount. */
:root { --glass-border: color-mix(in srgb, var(--text) 12%, transparent); --glass-sheen: inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent); }
h1, h2, h3, h4 { margin: 0 0 .6em; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
h3 { font-size: 1rem; display: flex; align-items: baseline; gap: 8px; }
h4 { font-size: .9rem; }
a { color: var(--primary); cursor: pointer; text-decoration: none; }
a:hover { text-decoration: underline; }
.see-all { font-size: .78rem; font-weight: 600; margin-left: auto; }
::selection { background: color-mix(in srgb, var(--primary) 22%, transparent); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
/* only while <main> carries .anim-in (set by route(), NOT by refresh()) —
   otherwise every sync tick replays the entrance on every card, which is what
   made the app feel like it was flickering. */
main.anim-in .card { animation: rise .22s ease both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- login ---------- */
/* soft mother-and-child photo behind the login card (v56) — a warm gradient
   wash keeps the card legible over the image; kept to the login screen only
   so the actual working screens (accounting/tasks) stay clean and functional. */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--grad-1) 88%, transparent), color-mix(in srgb, var(--bg) 92%, transparent) 60%),
    url('https://images.pexels.com/photos/7938236/pexels-photo-7938236.jpeg?auto=compress&cs=tinysrgb&w=1600') center/cover no-repeat;
}
.login-card { background: color-mix(in srgb, var(--panel) 78%, transparent);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border); border-radius: 16px;
  padding: 48px 40px; text-align: center; max-width: 380px; box-shadow: var(--elev-2), var(--glass-sheen); animation: rise .3s ease both; }
.login-card h1 { font-family: var(--font-display); font-size: 1.5rem; }
.login-card p { color: var(--muted); font-size: .9rem; }
.logo-big-img { width: 120px; height: 120px; object-fit: contain; margin-bottom: 12px; }
.splash-spin { width: 42px; height: 42px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-top-color: var(--primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- shell (v3: dark product sidebar with grouped nav) ---------- */
.shell { display: flex; min-height: 100vh; }
/* v97: dark purple side section (Risha's request) — was slate #191f2e */
.sidebar { width: 236px; background: #2a1258;
  border-right: 1px solid rgba(255,255,255,.10);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; flex-shrink: 0; overflow: hidden; }
body.dark .sidebar { background: #1a0f33; }
/* v120: the mother/child watermark is gone from the sidebar, per Risha. It sat
   behind the lower nav links and, however faint, put texture underneath text —
   the enemy of legibility. The sidebar is now a flat, opaque deep purple: no
   photo, no translucency, no backdrop blur (which also cost a repaint on every
   scroll). Solid ink behind solid text is the whole point. */
.sidebar > * { position: relative; z-index: 1; }
.brand { padding: 18px 16px; font-family: var(--font-display); font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 9px; font-size: 1.02rem; color: #fff; }
.logo-img { width: 28px; height: 28px; object-fit: contain; border-radius: 8px; flex-shrink: 0; }
.sidebar nav { flex: 1; padding: 8px 10px 12px; overflow-y: auto; }
.sidebar nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }
.nav-group { margin: 14px 8px 5px; font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: rgba(255,255,255,.55); }
.nav-group:first-child { margin-top: 6px; }
/* v99: collapsible "Advanced" nav group — compact by default, expands on tap */
.nav-adv { margin: 0; }
.nav-adv-sum { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px;
  user-select: none; -webkit-user-select: none; }
.nav-adv-sum::-webkit-details-marker { display: none; }
.nav-adv-sum::before { content: '▸'; font-size: .7em; transition: transform .15s; opacity: .7; }
.nav-adv[open] > .nav-adv-sum::before { transform: rotate(90deg); }
.nav-adv-sum:hover { color: rgba(255,255,255,.85); }
.nav-item { display: flex; gap: 11px; align-items: center; padding: 8px 12px; border-radius: 9px;
  color: rgba(255,255,255,.84); margin-bottom: 1px; font-weight: 500; font-size: .88rem; transition: background .14s, color .14s; }
.nav-item > span:first-of-type { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { background: rgba(255,255,255,.10); color: #fff; text-decoration: none; }
/* v161: notification-style count bubble on the count-badged nav items */
.nav-count { flex: 0 0 auto; margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
  background: #F43F5E; color: #fff; font-size: .72rem; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px color-mix(in srgb, #F43F5E 40%, transparent); }
.nav-item.active .nav-count { background: #fff; color: #b3243e; box-shadow: none; }
.nav-item.active { background: color-mix(in srgb, var(--primary) 85%, #000); color: #fff; font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent); }
/* v111: signed-in user + date, moved down here from the top bar */
.side-user { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.08); }
.side-user-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.22); }
.side-user-ph { display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); color: #fff; font-weight: 800; font-size: .82rem; }
.side-user-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.28; }
.side-user-lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .07em;
  color: rgba(255,255,255,.64); font-weight: 700; }
.side-user-name { font-size: .88rem; color: #fff; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-date { font-size: .73rem; color: rgba(255,255,255,.78); font-weight: 500; }
.sidebar-foot { padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid rgba(255,255,255,.10); }

/* ---------- sidebar meta strip: version + Admin (v120) ----------
   Sits directly above "Logged in as". The version is visible to EVERY user —
   it's the quickest way to tell whether an update actually reached a device,
   and staff can read it out without needing the Admin screen. */
.side-meta { display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-top: 1px solid rgba(255,255,255,.10); }
.side-ver { font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.09); border-radius: 999px; padding: 3px 9px; font-variant-numeric: tabular-nums; }
.side-admin { margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 600; color: #fff; text-decoration: none;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px; padding: 5px 10px; cursor: pointer; transition: background .12s, border-color .12s; }
.side-admin:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.30); }
.side-admin.active { background: var(--primary); border-color: var(--primary); }
.foot-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.90);
  font-size: .8rem; font-weight: 600; padding: 8px 6px; border-radius: 8px; cursor: pointer; }
.foot-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

/* two-line ledger entries (Debit account line + Credit account line per voucher) */
.tbl tr.led-top td { border-top: 1px solid var(--border); }
.tbl tr.led-bot td { border-top: none; padding-top: 0; }
.tbl td.ledcr { padding-left: 18px; color: var(--muted); }
.led-self { font-weight: 700; color: var(--text); }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 12px 22px;
  background: color-mix(in srgb, var(--panel) 66%, transparent);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--glass-border); position: sticky; top: 0; z-index: 5;
  /* v109: let the bar wrap onto extra rows instead of crushing the workspace
     tabs into a vertical stack when the window gets narrow. On wide screens
     everything still fits on one line, so this only kicks in when needed. */
  flex-wrap: wrap; row-gap: 8px; }
.topbar h2 { flex: 1 1 auto; min-width: 0; font-size: 1.18rem; margin: 0; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-label { color: var(--muted); font-size: .8rem; font-weight: 500; }
.menu-btn { display: none; }
.userchip { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); font-weight: 500; }
.userchip img { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); }
main { padding: 22px; flex: 1; max-width: 1280px; width: 100%; margin: 0 auto; }

/* ---------- sync chip ---------- */
.sync-chip { font-size: .72rem; padding: 4px 10px; border-radius: 99px; font-weight: 600; letter-spacing: .02em; }
.sync-chip.live { background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos); }
.sync-chip.pending { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.sync-chip.offline { background: color-mix(in srgb, var(--neg) 14%, transparent); color: var(--neg); }
.sync-chip.local { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }

/* ---------- cards / KPIs ---------- */
.card { background: color-mix(in srgb, var(--panel) 68%, transparent);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--glass-border); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--elev-1), var(--glass-sheen); }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { display: flex; gap: 12px; align-items: center; margin-bottom: 0; padding: 16px; transition: box-shadow .15s; }
.kpi:hover { box-shadow: var(--elev-2); }
.kpi-icon { font-size: 1.1rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-label { color: var(--muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi-value { font-size: 1.32rem; font-weight: 700; margin-top: 2px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-sub { color: var(--muted); font-size: .74rem; margin-top: 2px; }
.kpi-inline b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
/* v99: compact secondary KPI strip (receivables / payables / liabilities) */
.kpi-mini-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
.kpi-mini { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  box-shadow: inset 3px 0 0 var(--tk, var(--primary)); transition: box-shadow .15s, background .15s; }
.kpi-mini:hover { box-shadow: inset 3px 0 0 var(--tk, var(--primary)), var(--elev-2); }
.kpi-mini-ic { font-size: .95rem; }
.kpi-mini-lbl { color: var(--muted); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.kpi-mini-val { font-size: .95rem; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .kpi-mini { flex: 1 1 100%; justify-content: space-between; border-radius: 12px; } }
.dash-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; }
.dash-grid .card { margin-bottom: 16px; min-width: 0; }
.pos { color: var(--pos); } .neg { color: var(--neg); } .muted { color: var(--muted); }
.r { text-align: right; } .spacer { flex: 1; }
.empty { padding: 26px 0; text-align: center; }
.stat-strip { display: flex; gap: 22px; padding-top: 12px; border-top: 1px solid var(--border);
  margin-top: 6px; font-size: .84rem; color: var(--muted); flex-wrap: wrap; }
.stat-strip b { font-variant-numeric: tabular-nums; }

/* ---------- charts ---------- */
.chart { width: 100%; height: auto; }
.bar-in { fill: url(#gIn); } .bar-out { fill: url(#gOut); }
.gridline { stroke: var(--chart-grid); stroke-width: 1; stroke-dasharray: 3 4; }
.axisline { stroke: var(--border); stroke-width: 1.25; }
.ax { fill: var(--muted); font-size: 10.5px; font-family: var(--font); }
.legend { display: flex; gap: 18px; font-size: .78rem; color: var(--muted); margin-top: 4px; }
.legend-col { display: flex; flex-direction: column; gap: 7px; font-size: .8rem; color: var(--muted); min-width: 0; }
.legend-col b { color: var(--text); font-variant-numeric: tabular-nums; }
.dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 6px; }
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut { width: 168px; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,.12)); }
.seg { fill: none; stroke-width: 22; stroke-linecap: round; transition: stroke-dasharray .5s ease; }
.donut-total { fill: var(--text); font-size: 15px; font-weight: 700; font-family: var(--font); }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  scroll-snap-type: none; border-radius: 8px; }
.tbl-wrap::-webkit-scrollbar { height: 8px; }
.tbl-wrap::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 99px; }
.tbl { width: 100%; border-collapse: collapse; font-size: .87rem; }
.tbl th { text-align: left; color: var(--muted); font-weight: 600; padding: 10px 12px;
  border-bottom: 1px solid var(--border); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap; position: sticky; top: 0;
  background: color-mix(in srgb, var(--panel-2) 82%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tbl th.r { text-align: right; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; vertical-align: top; }
.tbl tbody tr:nth-child(even):not(.subrow) td { background: color-mix(in srgb, var(--panel-2) 50%, transparent); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tfoot th { background: var(--panel-2); border-top: 2px solid var(--border); border-bottom: none;
  text-transform: none; font-size: .85rem; color: var(--text); padding: 10px 12px; font-variant-numeric: tabular-nums; }
.tbl tr.click { cursor: pointer; transition: background .12s; }
.tbl tr.click:hover td { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.tbl.half { max-width: 540px; } .tbl.inner { margin: 8px 0; }
.tbl.inner th { background: transparent; }
.subrow > td { background: var(--panel-2); }

/* ---------- badges ---------- */
.badge { font-size: .7rem; padding: 3px 9px; border-radius: 6px; font-weight: 600;
  text-transform: capitalize; white-space: nowrap; display: inline-block; }
.badge.income, .badge.paid, .badge.received, .badge.active, .badge.settled { background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos); }
.badge.partial, .badge.open { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.badge.expense, .badge.payment, .badge.overdue, .badge.left, .badge.transfer { background: color-mix(in srgb, var(--neg) 14%, transparent); color: var(--neg); }
.badge.pending, .badge.today, .badge.paused, .badge.salary { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.badge.owner, .badge.admin, .badge.partner { background: color-mix(in srgb, var(--primary) 13%, transparent); color: var(--primary); }
.badge.accountant, .badge.ended { background: var(--panel-3); color: var(--muted); }
.badge.staff, .badge.task { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.badge.content { background: color-mix(in srgb, var(--primary) 13%, transparent); color: var(--primary); }
.badge.review { background: color-mix(in srgb, #8b5cf6 14%, transparent); color: #8b5cf6; }
.badge.redo { background: color-mix(in srgb, var(--neg) 12%, transparent); color: var(--neg); }
.badge.cancelled { background: var(--panel-3); color: var(--muted); }

/* ---------- topbar clock widget + workspace tabs ---------- */
.clock-widget { display: inline-flex; align-items: center; gap: 6px; }
/* v121: one pill in the top bar, matching the big punch card. The pill IS the
   action — colour says what tapping it does (green = start/resume, amber =
   pause), and the running time lives inside it rather than in a separate
   readout. Clock out keeps its own small ⏹ so ending the day can't be a
   mis-tap. */
/* v122: the two actions live in ONE joined control — pause/resume on the left,
   clock out as a red segment on the right, split by a hairline. They read as a
   single object, but the red says plainly that the right-hand end is the
   different, day-ending one. */
.cw-group { display: inline-flex; align-items: stretch; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 8px -3px rgba(0,0,0,.4); }
.cw-one { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .82rem; color: #fff;
  padding: 7px 14px; border-radius: 0; line-height: 1;
  transition: filter .12s, transform .08s; }
.cw-one:hover { filter: brightness(1.07); }
.cw-one:active { transform: scale(.97); }
.cw-one.go { background: linear-gradient(135deg, #16a34a, #0f8a45); }
.cw-one.pause { background: linear-gradient(135deg, #E8A13C, #d1852a); }
.cw-ic { font-size: .95rem; line-height: 1; }
.cw-word { white-space: nowrap; }
.cw-time { font-weight: 800; font-variant-numeric: tabular-nums; font-size: .84rem;
  background: rgba(0,0,0,.20); padding: 3px 8px; border-radius: 7px; letter-spacing: .01em; }
.cw-stop { display: inline-flex; align-items: center; gap: 7px; border: 0;
  border-left: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(135deg, #dc2626, #b91c1c); color: #fff;
  font: inherit; font-weight: 700; font-size: .82rem; padding: 7px 13px; border-radius: 0;
  cursor: pointer; line-height: 1; transition: filter .12s, transform .08s; }
.cw-stop:hover { filter: brightness(1.08); }
.cw-stop:active, .cw-one:active { transform: scale(.97); }
.cw-one.solo { border-radius: 10px; }
.ws-tabs { margin-bottom: 0; flex-shrink: 0; }   /* v109: keep the 3 workspace buttons on one row */
@media (max-width: 820px) { .ws-tabs .seg { padding: 6px 9px; font-size: .76rem; } }

/* ---------- time clock ---------- */
.punch-card { text-align: center; padding: 22px 16px; }
.punch-status { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.punch-elapsed { font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.punch-elapsed.paused { color: var(--warn); opacity: .8; }
/* v96: one big, obvious primary action + a smaller clock-out under it.
   (The button colour/size rules live in the buttons section below, AFTER the
   base .btn rules, so they reliably win the cascade.) */
.punch-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; }

/* ---------- buttons & forms ---------- */
.btn { background: color-mix(in srgb, var(--panel) 72%, transparent); color: var(--text);
  border: 1px solid var(--glass-border); border-radius: 9px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 8px 14px; cursor: pointer; font-size: .85rem; font-family: var(--font); font-weight: 500;
  transition: background .12s, border-color .12s; }
.btn:hover { background: color-mix(in srgb, var(--panel-2) 82%, transparent); }
.btn:active { background: color-mix(in srgb, var(--panel-3) 88%, transparent); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--btn-text); font-weight: 600;
  transition: background .12s, border-color .12s, transform .12s ease, box-shadow .12s ease; }
.btn-primary:hover { background: var(--primary-2); border-color: var(--primary-2); transform: translateY(-1px);
  box-shadow: 0 5px 12px -5px color-mix(in srgb, var(--primary) 55%, transparent); }
.btn-primary:active { transform: translateY(0); box-shadow: none; }
.btn-danger { background: transparent; border-color: var(--neg); color: var(--neg); }
.btn-danger:hover { background: color-mix(in srgb, var(--neg) 10%, transparent); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--panel-2); }
.btn-income { background: color-mix(in srgb, var(--pos) 12%, transparent); border-color: color-mix(in srgb, var(--pos) 35%, transparent); color: var(--pos); font-weight: 600; }
.btn-expense { background: color-mix(in srgb, var(--neg) 12%, transparent); border-color: color-mix(in srgb, var(--neg) 35%, transparent); color: var(--neg); font-weight: 600; }
.btn-sm { padding: 4px 10px; font-size: .76rem; border-radius: 7px; }
/* v96: big punch button + smaller clock-out (declared here, after .btn, so
   these override the base button size/colour regardless of source order) */
.punch-mega { width: 100%; max-width: 360px; font-size: 1.35rem; font-weight: 800; padding: 20px 24px;
  border-radius: 16px; letter-spacing: .01em; box-shadow: var(--elev-1);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease; }
.punch-mega:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
.punch-mega:active { transform: translateY(0); box-shadow: var(--elev-1); }
.punch-mega-pause { background: color-mix(in srgb, var(--warn) 18%, transparent);
  border-color: color-mix(in srgb, var(--warn) 48%, transparent); color: var(--warn); }
.punch-mega-pause:hover { background: color-mix(in srgb, var(--warn) 24%, transparent); }
.punch-out { width: 100%; max-width: 360px; font-size: .96rem; font-weight: 700; padding: 12px 18px;
  border-radius: 12px; color: var(--neg); }
.punch-out:hover { background: color-mix(in srgb, var(--neg) 10%, transparent); }
/* (the old separate .cw-btn / .cw-pause / .cw-out trio was replaced in v121 by
   the single .cw-one pill defined with the topbar widget above) */
/* v97: checkbox rows (transaction Income-Tax / books membership) */
.chk-group { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 4px 0 2px; background: color-mix(in srgb, var(--panel-2) 40%, transparent); }
.chk-group-lbl { font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
/* override the base `label { flex-direction: column }` — checkbox sits INLINE
   to the left of its wrapping label text */
.chk { display: flex; flex-direction: row; align-items: flex-start; gap: 9px; padding: 5px 0; cursor: pointer; font-size: .9rem; color: var(--text); font-weight: 500; }
.chk input[type="checkbox"] { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--primary); }
.chk span { flex: 1; line-height: 1.35; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar h3 { margin: 0; }
/* v69: was --panel at 82% with the hairline --glass-border — on a glass modal
   sitting over the same --panel colour, that made every input/select/textarea
   nearly blend into its own container (worst in dark mode: Notes/Remark boxes
   had no visible outline at all). --panel-2 gives real separation from the
   modal's --panel background, and --field-border (defined per-theme above)
   is a deliberately stronger line than the card-edge hairline. */
input, select, textarea { background: color-mix(in srgb, var(--panel-2) 90%, transparent); color: var(--text);
  border: 1px solid var(--field-border, var(--glass-border));
  border-radius: 10px; padding: 10px 12px; font-size: .9rem; font-family: var(--font); transition: border-color .12s, box-shadow .12s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
/* browsers default placeholder text to a fixed light-mode grey regardless of
   page colours — invisible against a dark input (the "dd/mm/yyyy" in the Add
   Task date field). Force it to follow the theme instead. */
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .95; }
input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
label { display: flex; flex-direction: column; gap: 7px; font-size: .78rem; color: var(--muted); flex: 1; font-weight: 600; letter-spacing: .01em; }
.frow { display: flex; gap: 14px; margin-bottom: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip { background: var(--panel-2); border: 1px solid var(--border); padding: 5px 11px; border-radius: 7px; font-size: .8rem; }
.chip a { color: var(--neg); margin-left: 5px; }
.chip a.chip-edit { color: var(--text); margin-left: 0; }
.chip a.chip-edit:hover { color: var(--primary); }

/* ---------- modal ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(15,18,28,.42); backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); display: flex;
  align-items: center; justify-content: center; z-index: 50; padding: 16px; animation: fadein .14s; }
.modal { background: color-mix(in srgb, var(--panel) 80%, transparent);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-border); border-radius: 16px; width: 100%; max-width: 600px;
  max-height: 92vh; overflow-y: auto; box-shadow: var(--elev-2), var(--glass-sheen); animation: pop .16s ease; }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } }
@keyframes fadein { from { opacity: 0; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px 14px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 1.08rem; }
.modal-body { padding: 20px 24px 8px; }
.modal-body .frow:last-child { margin-bottom: 6px; }
.modal-foot { display: flex; gap: 8px; padding: 14px 24px 20px; align-items: center; border-top: 1px solid var(--border); margin-top: 4px; }
.audit { padding: 0 20px 4px; font-size: .73rem; color: var(--muted); }
.dayitem { padding: 9px 0; border-bottom: 1px solid var(--border); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dayitem:last-child { border-bottom: none; }

/* ---------- toasts ---------- */
#toastRoot { position: fixed; bottom: 18px; right: 18px; z-index: 99; display: flex; flex-direction: column; gap: 8px; }
.toast { background: color-mix(in srgb, var(--panel) 82%, transparent);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--glass-border); border-left: 4px solid var(--accent);
  padding: 11px 16px; border-radius: 10px; box-shadow: var(--elev-2); max-width: 340px;
  animation: slidein .2s ease; font-size: .87rem; }
.toast.error { border-left-color: var(--neg); } .toast.warn { border-left-color: var(--warn); }
.toast.info { border-left-color: var(--info); } .toast.ok { border-left-color: var(--pos); }
.toast.out { opacity: 0; transition: .4s; }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }

/* new-version banner (v69) — persistent (unlike .toast, which auto-dismisses
   too fast to act on), so "Update now" stays put until clicked or until the
   automatic reload fires. */
/* full-screen dimmed backdrop that centers the update popup — same layer idea
   as the modal, but above it (z 300) so an open modal can't hide the update */
.update-back { position: fixed; inset: 0; z-index: 300; display: flex;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.update-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  justify-content: center; text-align: left;
  background: var(--panel);
  border: 1px solid var(--field-border, var(--glass-border)); border-left: 4px solid var(--primary);
  border-radius: 16px; padding: 20px 24px; box-shadow: var(--elev-2);
  font-size: .95rem; color: var(--text); max-width: min(92vw, 440px);
  animation: slidein .2s ease; }

/* ---------- calendar ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-head { text-align: center; color: var(--muted); font-size: .72rem; padding: 4px; font-weight: 600; }
.cal-cell { min-height: 84px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px;
  padding: 7px; font-size: .73rem; overflow: hidden; transition: border-color .14s; }
.cal-cell.empty { background: transparent; border-color: transparent; }
.cal-cell.today { border-color: var(--primary); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent); }
.cal-cell.click:hover { border-color: var(--primary); cursor: pointer; }
.cal-day { font-weight: 700; margin-bottom: 4px; white-space: nowrap; }
.cal-dow { font-weight: 600; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); margin-right: 3px; }
.cal-cell.today .cal-dow { color: var(--primary); }
.cal-pill { border-radius: 5px; padding: 2px 6px; margin-bottom: 2px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-weight: 500; color: #fff; }
.cal-pill.payment { background: var(--neg); } .cal-pill.income { background: var(--pos); } .cal-pill.salary { background: var(--warn); }
.cal-pill.task { background: var(--info); text-shadow: 0 1px 1px rgba(0,0,0,.25); } .cal-pill.content { background: var(--primary); }
.cal-pill-who { opacity: .82; font-weight: 400; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: .78rem; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* ---------- misc ---------- */
.meter { background: var(--panel-2); border-radius: 99px; height: 9px; width: 160px; overflow: hidden; }
.meter div { background: var(--pos); height: 100%; border-radius: 99px; }
.meter div.danger { background: var(--neg); }

/* ---------- payslip ---------- */
.payslip { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--panel); }
.ps-head { background: var(--primary); color: var(--btn-text); padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ps-brand { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; }
.ps-sub { font-size: .74rem; opacity: .9; margin-top: 2px; }
.ps-title { text-align: right; font-weight: 700; letter-spacing: 3px; font-size: .95rem; }
.ps-title span { font-weight: 500; font-size: .76rem; letter-spacing: 0; opacity: .92; }
.ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; padding: 14px 18px; font-size: .83rem; border-bottom: 1px solid var(--border); }
.ps-grid div { display: flex; justify-content: space-between; gap: 10px; min-width: 0; }
.ps-grid span { color: var(--muted); flex-shrink: 0; }
.ps-grid b { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-body { padding: 6px 18px 0; }
.ps-net td { border-top: 2px solid var(--primary); font-size: .95rem; }
.ps-words { padding: 12px 18px 4px; font-size: .83rem; }
.ps-foot { padding: 6px 18px 14px; font-size: .71rem; color: var(--muted); }
/* info grid (Employee/Designation/ID/Join date/Pay period/Working days) */
.ps-info { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; padding: 14px 18px; font-size: .83rem; border-bottom: 1px solid var(--border); }
.ps-info div { display: flex; justify-content: space-between; gap: 10px; min-width: 0; }
.ps-info span { color: var(--muted); flex-shrink: 0; }
.ps-info b { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* side-by-side Attendance / Earnings cards */
.ps-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 18px; }
.ps-col { background: var(--panel-2); border-radius: 10px; padding: 12px 14px; }
.ps-col h5 { margin: 0 0 8px; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ps-col .row { display: flex; justify-content: space-between; font-size: .83rem; padding: 3px 0; gap: 8px; }
.ps-col .row.neg b { color: var(--neg); }
.ps-col .row.pos b { color: var(--pos); }
.ps-col .row.div { border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 8px; }
/* dashed formula strip */
.ps-formula { margin: 0 18px 14px; padding: 10px 14px; border: 1px dashed var(--border); border-radius: 8px; font-size: .72rem; color: var(--muted); text-align: center; }
/* full-width net-pay bar */
.ps-netbar { background: var(--primary); color: var(--btn-text); padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 18px 14px; border-radius: 10px; }
.ps-netbar-label { font-weight: 700; letter-spacing: 1px; font-size: .85rem; }
.ps-netbar-sub { font-size: .72rem; opacity: .92; margin-top: 3px; }
.ps-netbar-amt { font-size: 1.5rem; font-weight: 800; }
@media (max-width: 560px) {
  .ps-grid, .ps-info, .ps-cols { grid-template-columns: 1fr; }
  .ps-netbar { flex-direction: column; align-items: flex-start; }
}

/* ---------- salary calculator cards ---------- */
.calc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.calc-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.calc-head { display: flex; align-items: center; gap: 10px; }
.calc-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: var(--btn-text); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.calc-name { font-weight: 700; }
.calc-desig { font-size: .68rem; letter-spacing: .04em; color: var(--muted); }
.calc-rows { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border); font-size: .82rem; }
.calc-row { display: flex; justify-content: space-between; gap: 10px; }
.calc-row span { color: var(--muted); }
.calc-total { border-top: 1px solid var(--border); margin-top: 2px; padding-top: 6px; font-weight: 700; }
.calc-earned { border-top: 1px solid var(--border); padding-top: 8px; font-size: .82rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; color: var(--accent); }
.calc-earned b { font-size: .9rem; }
.calc-earned .kpi-sub { flex-basis: 100%; color: var(--muted); }
.calc-net { display: flex; justify-content: space-between; align-items: center; background: color-mix(in srgb, var(--primary) 12%, transparent); border-radius: 8px; padding: 10px 12px; }
.calc-net span { font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--primary); }
.calc-net b { font-size: 1.15rem; color: var(--primary); }
.calc-actions { gap: 6px; }

/* ---------- dashboard extras (trend + position bars) ---------- */
.trend-line { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.trend-fill { fill: color-mix(in srgb, var(--primary) 12%, transparent); }
.trend-dot { fill: var(--primary); }
.hbar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: .82rem; }
.hbar-label { width: 128px; flex-shrink: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar { flex: 1; background: var(--panel-2); height: 9px; border-radius: 99px; overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 99px; }
.hbar-fill.good { background: var(--pos); } .hbar-fill.bad { background: var(--neg); } .hbar-fill.acc { background: var(--primary); }
.hbar-val { font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; }
.hbar-h { margin: 14px 0 8px; font-size: .9rem; }

/* clickable KPI cards + account rows (dashboard → account / reconciliation) */
.kpi.clickable { cursor: pointer; }
.kpi.clickable:hover { box-shadow: var(--elev-2); border-color: var(--primary); transform: translateY(-1px); }
.kpi.clickable:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.acct-link { cursor: pointer; border-radius: 8px; padding: 6px 8px; margin: 0 -8px 3px; transition: background .12s; }
.acct-link:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.acct-link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.acct-go { color: var(--muted); font-weight: 700; font-size: 1.1rem; line-height: 1; }
.acct-link:hover .acct-go { color: var(--primary); }

/* segmented Income / Expenses / Transfers tabs (cash-book style) */
.seg-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; margin-bottom: 12px; max-width: 100%; }
.seg { border: none; background: transparent; color: var(--muted); font-family: var(--font); font-weight: 600; font-size: .82rem; padding: 6px 16px; border-radius: 7px; cursor: pointer; transition: all .12s; }
.seg:hover { color: var(--text); }
.seg.on { background: var(--panel); color: var(--primary); box-shadow: var(--elev-1); }

/* "More options" fold inside the entry form */
details.more { margin-top: 6px; border-top: 1px dashed var(--border); padding-top: 8px; }
details.more > summary { cursor: pointer; color: var(--muted); font-size: .82rem; font-weight: 600; list-style: none; padding: 4px 0; user-select: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: '▸ '; }
details.more[open] > summary::before { content: '▾ '; }
details.more[open] { padding-bottom: 4px; }

/* active filter chip (e.g. viewing one party's transactions) */
.active-flt { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px 8px; padding: 4px 10px;
  background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 99px; font-size: .8rem; }
.active-flt button { border: none; background: transparent; color: var(--primary); cursor: pointer; font-weight: 700; font-size: .9rem; padding: 0 2px; }

/* ---------- attendance register ---------- */
/* v112: "Daily attendance status" and "Time logged per day" are two SEPARATE
   <table> elements, each sizing its own columns from its own content ("P"/"H"
   vs "80.2"/"6.0"). Left unconstrained, the same day's column lands at a
   different x-position in each table, so the two grids don't line up when you
   read straight down — that's what Risha flagged. Forcing every day column
   (and the leading name column) to the SAME explicit width in both tables —
   regardless of what text happens to be in them — is what keeps date N
   directly under date N no matter which grid it's in. The trailing summary/
   total column is left free-width; it comes after every day column, so its
   width doesn't affect whether the date columns line up. */
.att-tbl th, .att-tbl td { padding: 5px 4px; text-align: center; }
.att-tbl td:first-child, .att-tbl th:first-child { text-align: left; white-space: nowrap;
  width: 128px; min-width: 128px; max-width: 128px; overflow: hidden; text-overflow: ellipsis; }
.att-tbl th:not(:first-child):not(:last-child),
.att-tbl td:not(:first-child):not(:last-child) { width: 32px; min-width: 32px; max-width: 32px; }
.att-tbl .sun { background: var(--panel-3); }
.att-tbl .dow { display: block; font-size: .62rem; font-weight: 600; color: var(--muted); line-height: 1; margin-top: 2px; text-transform: uppercase; }
.task-link { display: inline-block; margin: 2px 0 6px; font-size: .82rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.task-link:hover { text-decoration: underline; }
/* custom-repeat weekday chips (tasks.js recurDaysField) */
.rd-row { align-items: center; gap: 6px; flex-wrap: wrap; margin: -6px 0 14px; }
.rd-chip input { display: none; }
.rd-chip span { display: inline-block; min-width: 30px; text-align: center; padding: 5px 0;
  border: 1px solid var(--field-border, var(--glass-border)); border-radius: 9px;
  font-size: .85rem; font-weight: 700; color: var(--muted); cursor: pointer; user-select: none; }
.rd-chip input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--btn-text); }
/* performance-scoring quality-% preset chips (tasks.js perfField, v85) */
.perf-field { margin-bottom: 4px; }
.qc-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 8px; }
.qc-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px;
  border-radius: 9px; border: 1px solid var(--field-border, var(--glass-border)); background: var(--panel-2);
  color: var(--text); font-size: .74rem; font-weight: 700; cursor: pointer; line-height: 1.2; min-width: 66px; }
.qc-chip span { font-weight: 400; color: var(--muted); font-size: .64rem; text-align: center; }
.qc-chip:hover { border-color: var(--primary); }
.qc-chip.active { background: var(--primary); border-color: var(--primary); color: var(--btn-text); }
.qc-chip.active span { color: color-mix(in srgb, var(--btn-text) 85%, transparent); }
/* "Time logged per day" grid: admin-editable cells + manual-override flag */
.att-tbl td.click { cursor: pointer; }
.att-tbl td.click:hover { outline: 1px solid var(--primary); outline-offset: -1px; }
.att-tbl .hr-manual { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.hr-flag { font-size: .7rem; opacity: .75; }
.att-cell { cursor: pointer; min-width: 24px; font-weight: 600; color: var(--muted); user-select: none; }
.att-cell:hover { outline: 1px solid var(--primary); outline-offset: -1px; }
.att-P { background: color-mix(in srgb, var(--pos) 16%, transparent); color: var(--pos) !important; }
.att-A { background: color-mix(in srgb, var(--neg) 16%, transparent); color: var(--neg) !important; }
.att-H { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn) !important; }
.att-L { background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info) !important; }
.att-S { background: color-mix(in srgb, #8b5cf6 18%, transparent); color: #8b5cf6 !important; }
.att-sum { white-space: nowrap; font-size: .76rem; color: var(--muted); }
.att-legend { font-size: .74rem; color: var(--muted); }
.att-key { display: inline-block; min-width: 18px; text-align: center; border-radius: 4px; padding: 1px 4px; font-weight: 700; }
.att-hint { font-size: .8rem; margin: 2px 0 0; }

/* ---------- invoice document ---------- */
.inv-doc { background: #fff; color: #16202e; border: 1px solid var(--border); border-radius: 12px;
  max-width: 820px; margin: 0 auto; padding: 40px 44px; box-shadow: var(--elev-1); position: relative; overflow: hidden; }
body.dark .inv-doc { border-color: #444; }
.inv-top { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 26px; }
.inv-co { font-size: .85rem; color: #445; line-height: 1.6; }
.inv-co .inv-co-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: #16202e; }
.inv-title { text-align: right; }
.inv-title h2 { font-size: 1.7rem; letter-spacing: 4px; margin: 0 0 4px; color: var(--primary); }
.inv-title div { font-size: .84rem; color: #556; }
.inv-meta { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 22px;
  padding: 14px 16px; background: #f6f7fa; border-radius: 10px; font-size: .86rem; }
.inv-meta b { display: block; font-size: .95rem; }
.inv-meta .lbl { color: #778; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-bottom: 2px; }
.inv-items { width: 100%; border-collapse: collapse; font-size: .88rem; margin-bottom: 6px; }
.inv-items th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: #778; padding: 8px 10px; border-bottom: 2px solid #e3e6ec; }
.inv-items td { padding: 10px; border-bottom: 1px solid #edf0f4; vertical-align: top; font-variant-numeric: tabular-nums; }
.inv-items th.r, .inv-items td.r { text-align: right; }
.inv-totals { margin-left: auto; width: 290px; font-size: .9rem; margin-top: 10px; }
.inv-totals div { display: flex; justify-content: space-between; padding: 5px 10px; }
.inv-totals .grand { border-top: 2px solid #16202e; font-weight: 800; font-size: 1.05rem; margin-top: 4px; padding-top: 9px; }
.inv-notes { margin-top: 26px; font-size: .8rem; color: #556; border-top: 1px dashed #dde; padding-top: 12px; white-space: pre-line; }
.inv-stamp { position: absolute; top: 84px; right: 46px; transform: rotate(9deg); font-weight: 800; font-size: 1.5rem;
  letter-spacing: 3px; padding: 6px 18px; border: 3px solid; border-radius: 10px; opacity: .8; pointer-events: none; }
.inv-stamp.paid { color: #097a52; border-color: #097a52; }
.inv-stamp.overdue { color: #c5304a; border-color: #c5304a; }
.inv-stamp.partial { color: #b45309; border-color: #b45309; }

/* print ONLY the invoice when flagged */
@media print {
  body.print-invoice #app, body.print-invoice #toastRoot { display: none !important; }
  body.print-invoice #modalRoot .modal-back { position: static; background: #fff; padding: 0; }
  body.print-invoice #modalRoot .modal { max-width: none; max-height: none; border: none; box-shadow: none; overflow: visible; }
  body.print-invoice .modal-head, body.print-invoice .modal-foot, body.print-invoice .audit { display: none !important; }
  body.print-invoice .inv-doc { border: none; box-shadow: none; border-radius: 0; padding: 10px 0; max-width: none; }
}

/* ---------- print ---------- */
@media print {
  body, body.dark, body.light {
    --bg: #fff; --panel: #fff; --panel-2: #f4f4f4; --panel-3: #eee;
    --text: #111; --muted: #555; --border: #ccc; --pos: #166534; --neg: #b91c1c;
    background: #fff; color: #111;
  }
  /* glass tint is a screen-only effect (v58) — printed pages/PDFs stay flat
     solid white, no blur, no blob background behind everything. */
  body::before { display: none !important; }
  .sidebar, .topbar, .toolbar, #toastRoot, .btn { display: none !important; }
  main { padding: 0; max-width: none; }
  main .card { box-shadow: none; break-inside: avoid; animation: none; border: 1px solid #ddd;
    background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* ---------- Task dashboard (ITFTS-Hub style) ---------- */
.tk-hero { position: relative; margin: 0 0 16px; padding: 26px 24px; min-height: 120px; display: flex; align-items: flex-end;
  background-size: cover; background-position: center; border: none; }
.tk-hero-text { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.tk-hero-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; }
.tk-hero-sub { font-size: .85rem; opacity: .95; margin-top: 2px; max-width: 480px; }
.tk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tk-kpi { position: relative; margin: 0; padding: 15px 16px 13px; overflow: hidden;
  border-top: 3px solid var(--tk, var(--primary)); display: block; text-decoration: none !important;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--tk, var(--primary)) 12%, color-mix(in srgb, var(--panel) 66%, transparent)),
    color-mix(in srgb, var(--panel) 66%, transparent) 65%);
  transition: box-shadow .15s ease, transform .15s ease; }
.tk-kpi:hover { box-shadow: var(--elev-2); transform: translateY(-2px); }
.tk-kpi-icon { position: absolute; top: 12px; right: 14px; font-size: 1.2rem; opacity: .4; }
.tk-kpi-label { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .05em; }
.tk-kpi-value { font-size: 2.05rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 5px 0 2px;
  font-variant-numeric: tabular-nums; color: var(--tk, var(--text)); }
.tk-kpi-sub { color: var(--muted); font-size: .74rem; }
/* colour-coded accent dot used before a card's <h3> title — gives each
   section its own quick colour cue without adding a whole new component
   (v65 "clean & vibrant" dashboard pass, both dashboard.js and taskboard.js) */
.sec-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block;
  background: var(--tk, var(--primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tk, var(--primary)) 22%, transparent); }
/* accent variant of the plain .kpi card (Accounting dashboard only — other
   .kpi-grid screens like Payslips/Salaries/Points stay their original plain
   style so this doesn't ripple app-wide) — same coloured-top-border + soft
   tint recipe as .tk-kpi, so both dashboards read as one visual language. */
.kpi.kpi-accent { border-top: 3px solid var(--tk, var(--primary));
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--tk, var(--primary)) 9%, color-mix(in srgb, var(--panel) 68%, transparent)),
    color-mix(in srgb, var(--panel) 68%, transparent) 70%); }
.kpi.kpi-accent .kpi-icon { background: color-mix(in srgb, var(--tk, var(--primary)) 16%, transparent);
  border-color: color-mix(in srgb, var(--tk, var(--primary)) 38%, transparent); }
.tk-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.tk-2col > .card { margin-bottom: 16px; min-width: 0; }
.tk-h { font-size: .74rem; font-weight: 700; letter-spacing: .07em; color: var(--muted); text-transform: uppercase; margin-bottom: 14px; }
.tk-bars { display: flex; flex-direction: column; gap: 12px; }
.tk-bar-row { display: flex; align-items: center; gap: 12px; }
.tk-bar-label { width: 118px; flex-shrink: 0; font-size: .84rem; color: var(--text); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-bar-track { flex: 1; background: var(--panel-2); border-radius: 7px; height: 26px; overflow: hidden; }
.tk-bar-fill { height: 100%; border-radius: 7px; display: flex; align-items: center; justify-content: flex-end;
  padding: 0 9px; min-width: 3px; transition: width .5s ease;
  background: linear-gradient(90deg, var(--bar), color-mix(in srgb, var(--bar) 65%, white 30%)); }
.tk-bar-val { color: #fff; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.tk-item { border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; margin-bottom: 10px;
  background: var(--panel-2); border-left: 3px solid var(--info); }
.tk-item.over { border-left-color: var(--neg); }
.tk-item:last-child { margin-bottom: 0; }
.tk-item-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; }
.tk-item-date { font-size: .8rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.tk-item-title { font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.tk-item-foot { display: flex; gap: 16px; font-size: .8rem; color: var(--muted); }
.tk-item[data-open] { cursor: pointer; transition: box-shadow .12s, transform .12s; }
.tk-item[data-open]:hover { box-shadow: var(--elev-2); transform: translateY(-1px); }

/* ---------- team-right-now strip (task dashboard) ---------- */
.ts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ts-card { display: flex; align-items: center; gap: 10px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; }
.ts-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ts-dot.in { background: var(--pos); animation: punchpulse 1.8s ease-out infinite; }
.ts-dot.break { background: var(--warn); } .ts-dot.away { background: #f59e0b; } .ts-dot.out { background: var(--muted); }
.ts-main { flex: 1; min-width: 0; font-size: .86rem; }
.ts-main b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-stats { display: flex; flex-direction: column; gap: 3px; font-size: .76rem; color: var(--muted); text-align: right; white-space: nowrap; }
@media (max-width: 900px) {
  .tk-kpis { grid-template-columns: repeat(2, 1fr); }
  .tk-2col { grid-template-columns: 1fr; }
}

/* ---------- Kanban board ---------- */
.bd-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.bd-col { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; min-width: 0; }
.bd-col-head { font-weight: 700; font-size: .86rem; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.bd-count { background: var(--panel-3); color: var(--muted); font-size: .72rem; font-weight: 700;
  padding: 1px 8px; border-radius: 99px; margin-left: auto; }
.bd-col-body { display: flex; flex-direction: column; gap: 10px; max-height: 68vh; overflow-y: auto; }
.bd-card { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: 9px; padding: 10px 12px; cursor: pointer; transition: box-shadow .12s, transform .12s; }
.bd-card:hover { box-shadow: var(--elev-2); transform: translateY(-1px); }
.bd-card[draggable="true"] { cursor: grab; }
.bd-card.dragging { opacity: .35; cursor: grabbing; }
.bd-col-body.drag-over { background: color-mix(in srgb, var(--primary) 8%, transparent); outline: 2px dashed var(--primary); outline-offset: -4px; border-radius: 8px; }
.bd-card-top { display: flex; justify-content: space-between; align-items: center; font-size: .74rem; margin-bottom: 6px; }
.bd-card-title { font-weight: 600; font-size: .88rem; margin-bottom: 8px; }
.bd-card-foot { display: flex; gap: 10px; flex-wrap: wrap; font-size: .76rem; color: var(--muted); margin-bottom: 6px; }
.bd-move { display: flex; justify-content: space-between; border-top: 1px dashed var(--border); padding-top: 6px; margin-top: 2px; }
.bd-move .btn { padding: 2px 10px; }
.bd-col.review .bd-card { border-left-color: #8b5cf6; }
.bd-col.done .bd-card { border-left-color: var(--pos); opacity: .85; }
@media (max-width: 1100px) { .bd-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bd-cols { grid-template-columns: 1fr; } }

/* ---------- time clock hero (big attractive timer) ---------- */
.punch-card { text-align: center; padding: 30px 20px 22px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 13%, color-mix(in srgb, var(--panel) 66%, transparent)), color-mix(in srgb, var(--panel) 66%, transparent) 62%); }
.punch-card.punch-in { background: linear-gradient(150deg, color-mix(in srgb, var(--pos) 13%, color-mix(in srgb, var(--panel) 66%, transparent)), color-mix(in srgb, var(--panel) 66%, transparent) 62%); }
.punch-card.punch-break { background: linear-gradient(150deg, color-mix(in srgb, var(--warn) 14%, color-mix(in srgb, var(--panel) 66%, transparent)), color-mix(in srgb, var(--panel) 66%, transparent) 62%); }
.punch-elapsed { font-size: 3.4rem; letter-spacing: -.01em; }
.punch-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.punch-dot.in { background: var(--pos); animation: punchpulse 1.8s ease-out infinite; }
.punch-dot.break { background: var(--warn); }
.punch-dot.out { background: var(--muted); }
@keyframes punchpulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pos) 45%, transparent); }
  75% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.punch-frames { color: var(--muted); font-size: .84rem; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* v80: today's progress-toward-standard-day meter, under the punch card's
   time-frame text */
.day-meter { max-width: 320px; margin: 16px auto 0; }
.day-meter-track { height: 10px; background: var(--panel-2); border-radius: 99px; overflow: hidden; }
.day-meter-fill { height: 100%; border-radius: 99px; background: var(--primary); transition: width .4s ease; }
.day-meter-fill.over { background: var(--pos); }
.day-meter-lbl { display: block; margin-top: 6px; font-size: .78rem; color: var(--muted); font-weight: 600; }

/* v80: monthly hours sparkline (Time Clock → My Day, staff's "My hours this
   month" card) — one bar per calendar day, colour-coded against the standard
   day, so a whole month's rhythm reads in a glance instead of scrolling rows */
/* v81: fill height is set in JS as an explicit pixel value (sparkClsPx), not
   a CSS percentage — percentage heights nested inside flex boxes depend on
   the parent resolving a definite height, which doesn't always render
   reliably; a fixed px number removes that ambiguity entirely. .spark-bar
   just needs a fixed, definite height for the fill to sit inside. */
.spark-row { display: flex; align-items: flex-end; gap: 2px; height: 44px; margin: 14px 0 6px; }
.spark-bar { flex: 1; height: 44px; display: flex; align-items: flex-end; min-width: 2px; }
.spark-fill { width: 100%; border-radius: 3px 3px 1px 1px; transition: height .25s ease; }
.spark-fill.empty { background: var(--panel-2); }
.spark-fill.low { background: var(--neg); opacity: .65; }
.spark-fill.half { background: var(--warn); }
.spark-fill.full { background: var(--pos); }
.spark-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .74rem; color: var(--muted); align-items: center; }
.spark-legend span { display: inline-flex; align-items: center; gap: 5px; }
.spark-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.spark-dot.full { background: var(--pos); } .spark-dot.half { background: var(--warn); } .spark-dot.low { background: var(--neg); opacity: .65; }

/* v80: owner/partner's own hours, kept visually distinct from the staff
   payroll table right above it — this is the exact confusion v79 fixed, so
   this card is deliberately styled to never be mistaken for it again */
.owner-hours-card { border: 1px dashed var(--field-border, var(--glass-border)); background: color-mix(in srgb, var(--primary) 4%, transparent); }

/* v82: Recurring Tasks compliance view (recurring.js) */
.recur-card { padding: 16px 18px; }
.recur-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.recur-streak { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 10px; }
.recur-dot { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800; cursor: pointer; background: var(--panel-2); color: var(--muted); }
.recur-dot.done { background: color-mix(in srgb, var(--pos) 20%, transparent); color: var(--pos); }
.recur-dot.missed { background: color-mix(in srgb, var(--neg) 20%, transparent); color: var(--neg); }
.recur-dot.cancelled { opacity: .5; }
.recur-dot.pending { background: transparent; border: 1px dashed var(--field-border, var(--glass-border)); }
.recur-dot:hover { outline: 1px solid var(--primary); outline-offset: 1px; }
.recur-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: .84rem; }

/* working time-frame timeline bars (admin team view) */
.tl-bar { position: relative; height: 12px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 99px; overflow: hidden; }
.tl-seg { position: absolute; top: 0; bottom: 0; background: var(--pos); border-radius: 99px; opacity: .85; }
.tl-seg.live { animation: tlpulse 1.6s ease-in-out infinite; }
@keyframes tlpulse { 50% { opacity: .5; } }
/* v113: an unclosed segment on a PAST day (Team Live's date-picker view) —
   the punch record just stops here (forgot to clock out / forgot to resume
   after a break). Hazard-striped red instead of the "still live" pulse, so
   it reads as a flagged mistake rather than something happening right now. */
.tl-seg.stale { background: var(--neg); opacity: .8;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.3) 0 6px, transparent 6px 12px); }
.tl-frames { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--muted); white-space: nowrap; }

/* ---------- shared tooltip (data-tip="...", v60) ---------- */
.tip-pop { position: fixed; z-index: 999; background: rgba(15,18,28,.94); color: #fff; font-size: .76rem;
  line-height: 1.4; padding: 6px 10px; border-radius: 7px; max-width: 260px; white-space: pre-line;
  pointer-events: none; opacity: 0; transform: translateY(4px); box-shadow: var(--elev-2);
  transition: opacity .12s ease, transform .12s ease; }
.tip-pop.show { opacity: 1; transform: translateY(0); }
[data-tip] { cursor: help; }

/* ---------- admin: ITFTS-style health rows + staff activity ---------- */
.admin-tabs { margin-bottom: 16px; flex-wrap: wrap; display: inline-flex; }
.hl-row { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 2px; border-bottom: 1px solid var(--border); font-size: .88rem; }
.hl-row:last-of-type { border-bottom: none; }
.hl-label { color: var(--muted); font-weight: 500; }
.hl-val { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.hl-val.good { color: var(--pos); } .hl-val.bad { color: var(--neg); }
.hl-val.warn { color: var(--warn); } .hl-val.info { color: var(--info); }
.act-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.act-row:last-child { border-bottom: none; }
.act-avatar { width: 40px; height: 40px; border-radius: 11px; background: color-mix(in srgb, var(--primary) 22%, var(--panel-2));
  color: var(--primary); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.act-main { flex: 1; min-width: 0; }
.act-side { text-align: right; font-weight: 700; font-size: .84rem; }
.act-side.on { color: var(--pos); } .act-side.off { color: var(--neg); }
.act-side .kpi-sub { font-weight: 500; }

/* ---------- Tasks workspace: same baby-pink brand as Accounting (v56) ----------
   Used to carry its own teal accent so the two workspaces looked like separate
   apps; unified on request so the whole app (including every staff/non-owner
   view, which always lives in this workspace) reads as one consistent baby-pink
   product. No --primary/--accent/--grad overrides here anymore — it just
   inherits whatever body.light/body.dark already set. */
body.ws-team .nav-item.active { background: color-mix(in srgb, var(--primary) 80%, #000);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-2) 55%, transparent); }

/* ---------- custom arrow cursor + falling dust trail (v62) ----------
   Replaces the earlier heart cursor with a small stylised arrow (same two-
   zone colour idea kept: main app pink, sidebar a lighter pink so it still
   reads as its own space). The "bright dust falling" part is a JS-driven
   particle trail (see ui.js's initCursorDust()) — a cursor image alone can't
   animate a trailing effect, only the pointer glyph itself. Plain SVG data
   URIs (no image files to ship/cache), native `auto`/`pointer` fallback as
   the second value. Text inputs/textareas keep the native text-caret cursor. */
body {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%204l7.07%2017%202.51-7.39L21%2011.07z%27%20fill%3D%27%236D28D9%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271.2%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") 4 4, auto;
}
a, button, .btn, .nav-item, .click, [role="button"], .seg, .foot-btn, select,
input[type="checkbox"], .tk-kpi, .bd-card, .cal-cell.click, [data-tip],
.chip a, .acct-link, .kpi.clickable, label, summary {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2722%27%20height%3D%2722%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%204l7.07%2017%202.51-7.39L21%2011.07z%27%20fill%3D%27%236D28D9%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271.6%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") 4 4, pointer;
}
.sidebar {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%204l7.07%2017%202.51-7.39L21%2011.07z%27%20fill%3D%27%23A78BFA%27%20stroke%3D%27%23191f2e%27%20stroke-width%3D%271.2%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") 4 4, auto;
}
.sidebar a, .sidebar button, .sidebar .nav-item, .sidebar .foot-btn {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2722%27%20height%3D%2722%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%204l7.07%2017%202.51-7.39L21%2011.07z%27%20fill%3D%27%23A78BFA%27%20stroke%3D%27%23191f2e%27%20stroke-width%3D%271.6%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") 4 4, pointer;
}
input, textarea { cursor: text; }
input[type="checkbox"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2722%27%20height%3D%2722%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%204l7.07%2017%202.51-7.39L21%2011.07z%27%20fill%3D%27%236D28D9%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271.6%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") 4 4, pointer; }

/* falling dust particle — spawned by ui.js on mousemove, always removed from
   the DOM after its animation ends (see initCursorDust()) so these never
   accumulate. Warm gold/pink glow to read as "bright dust", not a hard dot. */
@keyframes dust-fall {
  0%   { transform: translate(0, 0) scale(1);   opacity: .9; }
  100% { transform: translate(var(--dx, 0px), 26px) scale(.3); opacity: 0; }
}
.dust-particle {
  position: fixed; top: 0; left: 0; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--dust-color, #A78BFA) 55%, transparent 75%);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--dust-color, #A78BFA) 70%, transparent);
  pointer-events: none; z-index: 998;
  animation: dust-fall .7s ease-out forwards;
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) { .dash-grid { grid-template-columns: 1fr; } }
/* v109: on the in-between band (sidebar still shown), slim the sidebar so wide
   tables and cards get more room before the sidebar collapses entirely. */
@media (min-width: 1025px) and (max-width: 1240px) {
  .sidebar { width: 208px; }
  .nav-item { font-size: .85rem; padding: 7px 10px; }
  main { padding: 18px; }
}
/* v109: collapse the sidebar into the ☰ menu earlier (was 820px). Mid-size
   desktop windows now hand their full width to the content — which is what made
   the wide tables feel cramped and cut off — and the top bar has room to lay
   out its controls instead of squeezing the workspace tabs into a stack. */
@media (max-width: 1024px) {
  .sidebar { position: fixed; left: -260px; z-index: 40; transition: left .2s; box-shadow: var(--elev-2); width: 250px; }
  .sidebar.open { left: 0; }
  .menu-btn { display: block; }
  .today-label, .userchip { display: none; }
  main { padding: 16px; }
}
@media (max-width: 820px) {
  main { padding: 13px; }
  .frow { flex-direction: column; gap: 12px; }
  .cal-cell { min-height: 58px; }
  .today-label, .userchip { display: none; }
  .kpi-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .donut-wrap { flex-direction: column; }
  .seg { padding: 6px 10px; font-size: .78rem; }
  .att-legend { display: block; margin-top: 6px; }
  /* invoice/payslip documents get real content instead of huge fixed
     padding once the viewport is tablet-width or narrower (v61) */
  .inv-doc { padding: 22px 18px; }
  .inv-stamp { top: 60px; right: 20px; font-size: 1.2rem; padding: 4px 12px; }
  .topbar h2 { font-size: 1.06rem; }
}
/* v96: phones/tablets — let the top bar WRAP instead of overflowing, and keep
   the (important) clock widget on screen. The page title truncates rather than
   shoving the punch controls off the edge. */
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; padding: 10px 12px; gap: 8px 10px; }
  .topbar h2 { font-size: 1.02rem; flex: 1 1 40%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ws-tabs .seg { padding: 5px 9px; font-size: .74rem; }
  #clockWidget { flex: 0 0 auto; }
}
@media (max-width: 480px) {
  .tk-kpis { grid-template-columns: 1fr; }
  .tk-kpi-value { font-size: 2rem; }
  .ts-grid { grid-template-columns: 1fr; }
  /* invoice header/meta rows stack instead of squeezing side by side, and
     the totals block goes full-width instead of a fixed 290px that could
     overflow a narrow phone screen (v61) */
  .inv-top, .inv-meta { flex-direction: column; gap: 10px; }
  .inv-title { text-align: left; }
  .inv-totals { width: 100%; }
  .ps-head { flex-wrap: wrap; }
  .hbar-label, .tk-bar-label { width: 84px; }
  .punch-elapsed { font-size: 2.6rem; }
  /* v96: the big punch button goes edge-to-edge on phones for an easy tap */
  .punch-card { padding: 22px 14px 18px; }
  .punch-mega, .punch-out, .day-meter { max-width: none; }
  .punch-mega { font-size: 1.22rem; padding: 18px 20px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
}
/* v96: very small phones — keep the timer + punch controls comfortably inside
   the viewport */
@media (max-width: 360px) {
  .punch-elapsed { font-size: 2.15rem; }
  .cw-time { font-size: .74rem; padding: 3px 6px; }
  .cw-one, .cw-stop { padding: 5px 9px; }
  .kpi-grid { grid-template-columns: 1fr; }
  main { padding: 11px; }
}

/* ---------- Cloud Sync & Backup panel (v108) ---------- */
.cloud-card .hl-row { padding: 8px 2px; }
.stor-total { margin: 14px 0 6px; }
.stor-total .stor-head { font-size: .92rem; color: var(--text); }
.stor-item { padding: 6px 0; }
.stor-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: .84rem; margin-bottom: 4px; color: var(--muted); }
.stor-head .stor-val { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sbar { background: var(--panel-2); border-radius: 99px; height: 9px; overflow: hidden; }
.sbar > div { background: var(--pos); height: 100%; border-radius: 99px; transition: width .3s ease; }
.sbar > div.danger { background: var(--neg); }
.sbar.wide { width: 100%; }
.sbar.wide.big { height: 12px; }

/* ---------- Task image attachments (v108) ---------- */
.task-img-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.task-img-grid:empty { display: none; }
.task-img { position: relative; display: inline-flex; }
/* :not(.ti-rm) throughout — the remove ✕ is also a direct child <a>, and
   without excluding it the tile rules below (min-width:74px, the placeholder
   ::after) override its own 20px circle styling and blow it up into a second
   full-size tile. */
.task-img > a:not(.ti-rm) { display: inline-flex; align-items: center; border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; background: var(--panel-2); text-decoration: none; }
/* keep a clickable 74px tile even if the image is hidden by an onerror (broken
   link / unsupported format) so it never collapses to nothing in the grid */
.task-img:not(.big) > a:not(.ti-rm) { min-width: 74px; min-height: 74px; justify-content: center; position: relative; }
.task-img:not(.big) > a:not(.ti-rm)::after { content: '🖼️'; opacity: .35; position: absolute; }
.task-img:not(.big) img { position: relative; z-index: 1; }
.task-img img { width: 74px; height: 74px; object-fit: cover; display: block; }
.task-img.big { max-width: 220px; }
.task-img.big > a:not(.ti-rm) { padding: 8px 12px; max-width: 220px; }
.ti-chip { font-size: .8rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- video attachments (v114) ----------
   A small video gets the same 74px tile as a photo, showing its first frame
   with a play badge over it, so a grid of mixed photos and clips still reads
   as one even row. Clicking still opens the file full-size in a new tab —
   the tile is a poster, not a player, so nothing streams until asked for. */
.task-img video { width: 74px; height: 74px; object-fit: cover; display: block;
  position: relative; z-index: 1; background: #000; }
.task-img.vid > a:not(.ti-rm) { position: relative; }
.ti-play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center;
  justify-content: center; font-size: 1.5rem; color: #fff; pointer-events: none;
  text-shadow: 0 1px 6px rgba(0,0,0,.85); }
.ti-rm { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--neg); color: #fff; font-size: .72rem; line-height: 20px; text-align: center;
  text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.35); }

/* ---------- Staff task statistics chart (v114, moved to Tasks in v116) ----------
   Mounted by js/taskstats.js on Tasks → Dashboard and on each person's
   Performance page (NOT the accounting dashboard). Chart chrome (grid, axis, labels) is
   deliberately recessive so the four status colours are the only saturated
   ink in the card. */
.sts-card h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sts-filters { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sts-sel { font: inherit; font-size: .82rem; padding: 5px 8px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }
.sts-range, .sts-seg-ctl { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.sts-rbtn { font: inherit; font-size: .78rem; padding: 5px 10px; border: 0; cursor: pointer;
  background: var(--panel-2); color: var(--muted); border-left: 1px solid var(--border); }
.sts-rbtn:first-child { border-left: 0; }
.sts-rbtn:hover { color: var(--text); }
.sts-rbtn.on { background: var(--primary); color: var(--btn-text); }

/* multi-select staff picker: toggle chips, not a <select multiple> — a native
   multi-select is close to unusable on a phone and hides the current selection
   behind a scroll. "All staff" is its own chip and clears the rest. */
.sts-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.sts-chip { font: inherit; font-size: .76rem; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--muted);
  transition: background .12s, color .12s, border-color .12s; }
.sts-chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.sts-chip.on { background: var(--primary); border-color: var(--primary); color: var(--btn-text); font-weight: 600; }

/* summary figures — these are the "visible labels" that let the light-mode
   fills sit just under 3:1 without colour ever carrying a value alone */
.sts-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.sts-stat { flex: 1 1 120px; min-width: 108px; padding: 8px 12px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border); }
.sts-stat-lbl { display: block; font-size: .72rem; color: var(--muted); letter-spacing: .01em; }
.sts-stat-val { display: block; font-size: 1.32rem; line-height: 1.25; font-weight: 700; color: var(--text); }
.sts-stat-val.neg { color: var(--neg); }
.sts-stat-val.pos { color: var(--pos); }

/* new in v118 --------------------------------------------------------- */
/* Saturday/Sunday get a faint band so a weekend dip reads as a weekend, not
   as a problem. Deliberately fainter than the gridlines. */
.sts-wknd { fill: color-mix(in srgb, var(--text) 4%, transparent); }
/* the period average — the reference the eye needs to judge "is this a busy
   day?", dashed so it never competes with the bars */
.sts-avg { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .75; }
.sts-avg-lbl { fill: var(--muted); font-size: .62rem; font-weight: 600; }
/* period-over-period movement under each stat */
.sts-delta { display: block; font-size: .68rem; margin-top: 2px; font-weight: 600; letter-spacing: .01em; }
.sts-delta.up { color: var(--pos); }
.sts-delta.down { color: var(--neg); }
.sts-delta.flat { color: var(--muted); font-weight: 500; }
/* "Who" divider inside the tooltip */
.sts-tip-sub { margin: 7px 0 3px; padding-top: 6px; border-top: 1px solid var(--border);
  font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.sts-plot { position: relative; }
.sts-svg { width: 100%; height: auto; display: block; overflow: visible; }
.sts-seg { transition: opacity .12s ease; }
.sts-zero { fill: var(--border); }
.sts-dow { opacity: .62; font-size: .68rem; }
.sts-today { font-weight: 700; fill: var(--primary); }
/* the hit target is the whole day column, not the painted bar — a reader aims
   at a date and should never have to find a 20px-wide rectangle */
.sts-hit { fill: transparent; cursor: pointer; }
.sts-hit.on { fill: color-mix(in srgb, var(--text) 7%, transparent); }

.sts-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px;
  font-size: .8rem; color: var(--muted); }
.sts-key { display: inline-flex; align-items: center; gap: 6px; }
.sts-key b { color: var(--text); font-variant-numeric: tabular-nums; }
.sts-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }

/* floating readout — values lead, series names follow */
.sts-tip { position: absolute; z-index: 20; pointer-events: none; min-width: 158px;
  padding: 9px 11px; border-radius: 10px; background: var(--panel);
  border: 1px solid var(--border); box-shadow: var(--elev-2);
  font-size: .78rem; color: var(--muted); }
.sts-tip[hidden] { display: none; }
.sts-tip-head { font-size: .74rem; font-weight: 700; color: var(--text);
  padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.sts-tip-row { display: flex; align-items: center; gap: 7px; line-height: 1.65; }
.sts-tip-key { width: 12px; height: 3px; border-radius: 2px; flex: none; }
.sts-tip-row b { color: var(--text); font-variant-numeric: tabular-nums;
  min-width: 20px; text-align: right; }

@media (max-width: 720px) {
  .sts-filters { margin-left: 0; width: 100%; }
  .sts-stat { flex: 1 1 44%; }
  .sts-stat-val { font-size: 1.14rem; }
}


/* ---------- Task attachments, tidied (v119) ----------
   Every file gets the SAME card whatever its type: a fixed preview square on
   top, name and size underneath. Uniform cards are what turn a mixed pile of
   photos, clips and documents into a grid you can scan; the size is always
   visible rather than hidden in a tooltip. */
.task-files { display: grid; gap: 10px; margin-top: 8px;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.task-files.ro { margin: 0 0 10px; }
.task-file { position: relative; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel-2); overflow: hidden; transition: border-color .12s, box-shadow .12s; }
.task-file:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow: var(--elev-1); }
.tf-prev { display: flex; align-items: center; justify-content: center; position: relative;
  height: 84px; background: color-mix(in srgb, var(--text) 5%, transparent); text-decoration: none; }
.tf-prev img, .tf-prev video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tf-prev video { background: #000; }
/* a broken/blocked image falls back to the type icon instead of a blank box */
.tf-prev.ph::after { content: '🖼️'; font-size: 1.5rem; opacity: .5; }
.tf-ic { font-size: 1.7rem; opacity: .85; line-height: 1; }
.tf-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff; pointer-events: none; text-shadow: 0 1px 6px rgba(0,0,0,.85); }
.tf-meta { display: block; padding: 7px 9px 8px; text-decoration: none; min-width: 0; }
.tf-name { display: block; font-size: .76rem; color: var(--text); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-size { display: block; font-size: .7rem; color: var(--muted); margin-top: 1px;
  font-variant-numeric: tabular-nums; }
.tf-rm { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: 0;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: .7rem; line-height: 1;
  cursor: pointer; opacity: 0; transition: opacity .12s; }
.task-file:hover .tf-rm, .tf-rm:focus-visible { opacity: 1; }
.tf-rm:hover { background: var(--neg); }
@media (hover: none) { .tf-rm { opacity: 1; } }   /* touch: no hover, so always show it */

/* the field's own header / actions row */
.ff-head { display: flex; align-items: baseline; gap: 10px; }
.ff-title { font-size: .78rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.ff-sum { font-size: .72rem; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.ff-empty { grid-column: 1 / -1; padding: 14px; text-align: center; font-size: .76rem;
  color: var(--muted); border: 1px dashed var(--border); border-radius: 10px; }
.ff-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.ff-pick { position: relative; overflow: hidden; cursor: pointer; margin: 0; display: inline-block; }
.ff-pick input[type=file] { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 0; }
.ff-hint { font-size: .72rem; color: var(--muted); }
.ff-status { font-size: .74rem; color: var(--primary); font-weight: 600; }

/* ---------- named section rule inside long modals (v119) ----------
   The task editor is a tall form; without grouping it reads as one endless
   column of controls. This is a label, not a field — it holds no input. */
.fsec { display: flex; align-items: center; gap: 10px; margin: 16px 0 2px; }
.fsec::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.fsec-t { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); white-space: nowrap; }
.fsec-n { font-size: .7rem; color: var(--muted); opacity: .8; white-space: nowrap; }
.fsec:first-child { margin-top: 0; }


/* ---------- one big punch button (v120) ----------
   Clock in / Pause / Resume were three controls that swapped places depending
   on state — the exact situation where a tired person taps the wrong one. Now
   ONE full-width button always does the obvious next thing, and Clock out (the
   only action that ENDS the day rather than continuing it) sits underneath,
   deliberately quieter so it can't be hit by accident. */
.punch-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; }
.punch-one { display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; max-width: 540px; min-height: 78px; padding: 14px 22px; border: 0; border-radius: 16px;
  cursor: pointer; color: #fff; font: inherit; text-align: left;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.45); transition: transform .1s ease, filter .12s ease; }
.punch-one:hover { filter: brightness(1.06); }
.punch-one:active { transform: scale(.985); }
.punch-one.in { background: linear-gradient(135deg, #16a34a, #0f8a45); }
.punch-one.pause { background: linear-gradient(135deg, #E8A13C, #d1852a); }
.po-ic { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
.po-txt { display: flex; flex-direction: column; line-height: 1.25; }
.po-lbl { font-size: 1.24rem; font-weight: 800; letter-spacing: .01em; }
.po-sub { font-size: .78rem; font-weight: 500; opacity: .88; }
/* Red, to match the clock-out segment in the top bar — but outlined rather
   than filled, so it stays visibly secondary to the big green/amber action
   above it. Ending the day should look distinct, not compete for the tap. */
.punch-end { align-self: center; background: color-mix(in srgb, var(--neg) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--neg) 45%, transparent);
  color: var(--neg); font: inherit; font-size: .82rem; font-weight: 700;
  padding: 8px 18px; border-radius: 10px; cursor: pointer; transition: background .12s, border-color .12s; }
.punch-end:hover { background: var(--neg); border-color: var(--neg); color: #fff; }
@media (max-width: 520px) { .punch-one { min-height: 88px; } .po-lbl { font-size: 1.32rem; } }


/* narrow top bars: drop the action word, keep the icon and the clock. The
   colour and icon still carry the action, so nothing is lost but width. */
@media (max-width: 900px) { .cw-word { display: none; } .cw-stop { padding: 7px 11px; } }

/* ================= combined Attendance & Hours grid (v123) ================= */
.att-legend2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 14px; }
.att-legend2 .al-item { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--text); font-weight: 500; }
.att-legend2 .att-key { min-width: 20px; height: 20px; line-height: 18px; }
.att-legend2 .al-note { color: var(--muted); font-size: .78rem; margin-left: auto; }
.att-banner { display: flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-left: 4px solid var(--primary); color: var(--text); border-radius: 8px; padding: 9px 14px; font-size: .84rem; margin: 0 0 14px; }
.att-grid td, .att-grid th { border-bottom: 1px solid var(--border); }
.att-grid .att-name { text-align: left; font-weight: 700; vertical-align: middle; padding-left: 10px; background: var(--panel); position: sticky; left: 0; z-index: 1; }
.att-grid thead .att-name { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.att-grid .att-rowlbl, .att-grid .att-rowlbl-h { font-size: .6rem; font-weight: 700; letter-spacing: .05em; color: var(--muted); text-transform: uppercase; text-align: left; padding-left: 6px; white-space: nowrap; }
.att-grid .att-r1 td { padding-top: 6px; }
.att-grid .att-r2 td { padding-bottom: 8px; }
.att-grid .att-r2 { border-bottom: 2px solid var(--border); }
.att-grid tbody tr:last-child { border-bottom: none; }
.att-hcell { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; }
.att-mtot { white-space: nowrap; font-weight: 700; text-align: center; }
.att-grid thead .att-mtot { font-size: .68rem; color: var(--muted); text-transform: uppercase; line-height: 1.1; }
.att-mtot-u { font-weight: 600; color: var(--muted); font-size: .78rem; }
.att-hin { width: 34px; border: 1px solid var(--primary); border-radius: 5px; background: var(--panel); color: var(--text); font: inherit; font-size: .8rem; text-align: center; padding: 1px 2px; }

/* ================= dashboard dual world clock (v123) ================= */
.wclock { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; }
.wc-face { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 14px; position: relative; overflow: hidden; }
.wc-india { background: linear-gradient(120deg, color-mix(in srgb, var(--warn) 20%, var(--panel-2)), var(--panel-2)); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.wc-other { background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 20%, var(--panel-2)), var(--panel-2)); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); }
.cface { width: 96px; height: 96px; flex: 0 0 auto; }
.cf-ring { fill: var(--panel); stroke: color-mix(in srgb, var(--text) 22%, transparent); stroke-width: 2; }
.cf-tick { stroke: color-mix(in srgb, var(--text) 30%, transparent); stroke-width: 1; }
.cf-tick.maj { stroke: var(--text); stroke-width: 2; }
.cf-hh { stroke: var(--text); stroke-width: 3.4; stroke-linecap: round; }
.cf-mh { stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; }
.cf-sh { stroke: #ef4444; stroke-width: 1.2; stroke-linecap: round; }
.cf-cap { fill: var(--text); }
.cf-dn { font-size: 11px; text-anchor: middle; }
.wc-info { min-width: 0; }
.wc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wc-name { font-weight: 800; font-size: 1.05rem; }
.wc-pill { background: var(--warn); color: #3a2600; font-weight: 800; font-size: .66rem; letter-spacing: .03em; padding: 2px 7px; border-radius: 20px; }
.wc-pill.alt { background: var(--primary); color: #fff; }
.wc-select { margin-left: auto; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: .78rem; padding: 3px 6px; max-width: 130px; cursor: pointer; }
.wc-time { display: flex; align-items: baseline; gap: 2px; margin: 4px 0 2px; line-height: 1; }
.wc-time b { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.wc-sec { font-size: 1rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.wc-ap { font-size: 1rem; color: var(--primary); font-weight: 700; margin-left: 4px; }
.wc-date { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); }
.wc-tod { background: var(--panel-3); color: var(--muted); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 5px; }
.wc-work { margin-top: 6px; font-size: .72rem; font-weight: 600; display: inline-block; padding: 2px 8px; border-radius: 20px; }
.wc-work.on { color: var(--pos); background: color-mix(in srgb, var(--pos) 15%, transparent); }
.wc-work.off { color: var(--muted); background: var(--panel-3); }
.wc-region { margin-top: 6px; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.wc-mid { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 6px; }
.wc-diff-lead { font-size: .78rem; color: var(--muted); }
.wc-diff { font-size: 1.15rem; font-weight: 800; color: var(--text); }
.wc-diff-sub { font-size: .72rem; color: var(--muted); max-width: 160px; }
.wc-convert { margin-top: 8px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.wc-convert:hover { border-color: var(--primary); color: var(--primary); }
.wc-converter { grid-column: 1 / -1; margin-top: 6px; border-top: 1px dashed var(--border); padding-top: 12px; }
.wc-conv-row { display: flex; align-items: flex-end; justify-content: center; gap: 14px; flex-wrap: wrap; }
.wc-conv-row label { display: flex; flex-direction: column; gap: 4px; font-size: .76rem; color: var(--muted); font-weight: 600; }
.wc-conv-row input[type=time] { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; font: inherit; }
.wc-conv-arrow { font-size: 1.1rem; color: var(--primary); padding-bottom: 6px; }
.wc-conv-note { text-align: center; color: var(--muted); font-size: .74rem; margin: 8px 0 0; }
@media (max-width: 820px) {
  .wclock { grid-template-columns: 1fr; gap: 12px; }
  .wc-mid { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 14px; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); padding: 10px 0; }
  .wc-convert { margin-top: 0; }
  .cface { width: 74px; height: 74px; }
  .wc-time b { font-size: 1.7rem; }
  .att-legend2 .al-note { margin-left: 0; width: 100%; }
}

/* ================= staff statistics — per-member detail table (v123) ======= */
.sts-detail { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.sts-detail-h { margin: 0 0 10px; font-size: .95rem; font-weight: 700; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sts-detail-sub { font-size: .74rem; font-weight: 500; color: var(--muted); }
.sts-table-wrap { overflow-x: auto; }
.sts-table { width: 100%; font-size: .84rem; }
.sts-table th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; padding: 6px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.sts-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.sts-table tbody tr:last-child td { border-bottom: none; }
.sts-table tbody tr:hover td { background: var(--panel-2); }
.sts-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.sts-rank { text-align: center; width: 34px; font-weight: 700; color: var(--muted); }
.sts-rk { display: inline-block; min-width: 20px; }
.sts-who { display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.sts-compcell { min-width: 130px; }
.sts-compcell .sts-pcell { display: inline-block; min-width: 34px; font-variant-numeric: tabular-nums; font-weight: 600; }
.sts-tbar { display: inline-block; vertical-align: middle; width: 84px; height: 6px; margin-left: 8px; background: var(--panel-3); border-radius: 4px; overflow: hidden; }
.sts-tbar > span { display: block; height: 100%; background: var(--primary); border-radius: 4px; }
.sts-table td.pos { color: var(--pos); font-weight: 700; }
.sts-table td.neg { color: var(--neg); font-weight: 700; }

/* ===== Attendance marks — solid reference palette (v124) =====
   Match the shared reference design: saturated status cells with a light
   letter, not faint tints. Colours read the same in light and dark. */
.att-legend2 .att-key, .att-grid .att-cell.att-P, .att-grid .att-cell.att-A,
.att-grid .att-cell.att-H, .att-grid .att-cell.att-L, .att-grid .att-cell.att-S { color: #fff !important; }
.att-legend2 .att-key { font-weight: 800; box-shadow: none; }
.att-P { background: #3C7A45 !important; color: #fff !important; }
.att-H { background: #B4791F !important; color: #fff !important; }
.att-L { background: #3D6A8E !important; color: #fff !important; }
.att-S { background: #6A34CE !important; color: #fff !important; }
.att-A { background: #A83329 !important; color: #fff !important; }
.att-grid .att-cell { color: var(--muted); font-weight: 700; border-radius: 5px; }
.att-grid .att-cell.att-P, .att-grid .att-cell.att-H, .att-grid .att-cell.att-L,
.att-grid .att-cell.att-S, .att-grid .att-cell.att-A { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
/* today column — purple highlight box like the reference */
.att-grid td.att-today, .att-grid th.att-today { box-shadow: inset 0 0 0 1.6px var(--primary); position: relative; }
.att-grid th.att-today { color: var(--primary); font-weight: 800; }
/* weekend columns a touch dimmer, per reference */
.att-grid .sun { background: color-mix(in srgb, var(--muted) 10%, transparent); }

/* ===== task approval workflow (v127) ===== */
.task-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.task-actions .btn { flex: 0 0 auto; }
.bd-appr { font-size: .72rem; color: var(--warn); margin-top: 4px; font-weight: 600; }

/* ===== v128: roles, team table, per-person colour, congrats popup ===== */
.badge.subadmin { background: color-mix(in srgb, #0d9488 16%, transparent); color: #0d9488; }
body.dark .badge.subadmin { color: #2dd4bf; }
/* team table — tidier rows, softer separators, aligned actions */
.team-tbl th { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; white-space: nowrap; }
.team-tbl td { padding: 10px 12px; vertical-align: middle; border-bottom: 1px solid var(--border); }
.team-tbl tbody tr:last-child td { border-bottom: none; }
.team-tbl tbody tr:hover td { background: var(--panel-2); }
.team-tbl .badge { font-size: .68rem; text-transform: capitalize; }
.team-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.pdot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 8%, transparent); }
.team-rm { color: var(--muted) !important; opacity: .7; font-weight: 500; }
.team-rm:hover { color: var(--neg) !important; opacity: 1; }
.act-avatar { color: #fff; font-weight: 700; }
/* centered congratulations popup */
.cg-back { display: flex; align-items: center; justify-content: center; }
.cg-card { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 30px 34px; max-width: 380px; width: calc(100% - 40px); text-align: center; box-shadow: var(--elev-1); border-top: 5px solid var(--primary); animation: cg-pop .28s ease; }
@keyframes cg-pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cg-emojis { font-size: 3rem; line-height: 1; margin-bottom: 10px; }
.cg-title { margin: 0 0 8px; font-size: 1.3rem; font-weight: 800; color: var(--primary); }
.cg-sub { margin: 0 0 20px; color: var(--text); font-size: .95rem; line-height: 1.5; }

/* ===== v129: stats chip colour dots (match Admin per-person colours) ===== */
.sts-chipdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 8%, transparent); }
.sts-chip { display: inline-flex; align-items: center; }

/* ===== v129: Admin section — neat, professional, easy to use ===== */
.admin-wrap { max-width: 1160px; }
.admin-wrap .admin-tabs { gap: 4px; padding: 5px; margin-bottom: 18px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; }
.admin-wrap .admin-tabs .seg { padding: 8px 18px; font-size: .85rem; border-radius: 9px; }
.admin-wrap .admin-tabs .seg.on { box-shadow: var(--elev-1); }
.admin-wrap .card { border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--elev-1); }
.admin-wrap .card > h3, .admin-wrap .toolbar h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.admin-wrap .toolbar { align-items: center; gap: 10px; margin-bottom: 14px; }
.admin-wrap .card > .muted { font-size: .85rem; line-height: 1.55; }
/* Lists tab — tidy removable tags */
.admin-wrap .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.admin-wrap .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px; padding: 5px 6px 5px 12px; font-size: .82rem; font-weight: 500; }
.admin-wrap .chip .chip-edit { cursor: pointer; }
.admin-wrap .chip a[data-rml] { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 50%; color: var(--muted); text-decoration: none; line-height: 1; }
.admin-wrap .chip a[data-rml]:hover { background: color-mix(in srgb, var(--neg) 15%, transparent); color: var(--neg); }
/* inputs across the admin screen (NOT modals — those live in #modalRoot) */
.admin-wrap .toolbar input[data-addl-inp] { min-width: 200px; }
.admin-wrap .frow { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.admin-wrap .frow label { flex: 1 1 220px; display: flex; flex-direction: column; gap: 5px; font-size: .8rem; color: var(--muted); font-weight: 600; }
.admin-wrap input, .admin-wrap select, .admin-wrap textarea { border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; background: var(--panel); color: var(--text); font: inherit; }
.admin-wrap input:focus, .admin-wrap select:focus, .admin-wrap textarea:focus { outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent); outline-offset: -1px; border-color: var(--primary); }
@media (max-width: 640px) { .admin-wrap .admin-tabs .seg { padding: 7px 12px; font-size: .78rem; } .admin-wrap .card { padding: 16px 15px; } }

/* ===== v130: Waiting for Approval screen ===== */
.ap-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ap-actions .btn { padding: 4px 9px; }

/* ===== v132: who-assigned + created/modified meta on task rows & cards ===== */
.task-meta { font-size: .72rem; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.task-meta b { color: var(--text); font-weight: 600; }
.bd-card .task-meta { font-size: .66rem; margin-top: 6px; }

/* v132: congrats popup action row */
.cg-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* v137: Waiting-for-Approval two-section board (Owner) */
.ap-board { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .ap-board { grid-template-columns: 1fr; } }
.ap-col { min-width: 0; }
.ap-col-h { display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: 1.02rem; padding: 8px 12px; border-radius: 10px 10px 0 0;
  color: #fff; margin-bottom: 0; }
.ap-col-approve { background: #3C7A45; }
.ap-col-review  { background: #3D6A8E; }
.ap-col .ap-count { background: rgba(255,255,255,.25); border-radius: 999px;
  min-width: 24px; text-align: center; padding: 1px 9px; font-size: .85rem; }
.ap-col .muted { padding: 0 2px; }
.ap-col > .card { border-top-left-radius: 0; border-top-right-radius: 0; }

/* v140: Flow canvas engine (Workflow diagram + Waiting-for-Approval canvas) */
.scr-head{margin-bottom:14px}
.flow-card{padding:0;overflow:hidden;position:relative}
.flow{position:relative;width:100%;border-radius:var(--radius);overflow:hidden}
.flow-vp{position:absolute;inset:0;overflow:hidden;cursor:default;touch-action:none;
  background:var(--panel-2)}
.flow-vp.grab{cursor:grabbing}
.flow-world{position:absolute;top:0;left:0;transform-origin:0 0;
  background-image:radial-gradient(color-mix(in srgb,var(--text) 15%,transparent) 1.3px,transparent 1.3px);
  background-size:26px 26px}
.flow-edges{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.flow-elabel{position:absolute;transform:translate(-50%,-50%);z-index:3;pointer-events:none;
  font-size:.66rem;font-weight:700;letter-spacing:.01em;white-space:nowrap;
  background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:2px 7px}
.flow-node{position:absolute;background:var(--panel);border:1px solid var(--border);
  border-radius:13px;box-shadow:var(--elev-2);cursor:grab;z-index:4;overflow:hidden;
  transition:border-color .12s,box-shadow .12s}
.flow-node:hover{border-color:var(--fc)}
.flow-node.drag{cursor:grabbing;transition:none;box-shadow:0 0 0 2px var(--fc),var(--elev-2)}
.flow-node.plain{cursor:default;box-shadow:none;background:transparent;border:0}
.flow-node .fl-bar{height:5px;background:var(--fc)}
.flow-node .fl-in{padding:11px 13px 13px}
.fl-top{display:flex;align-items:flex-start;gap:9px;margin-bottom:7px}
.fl-ic{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--fc);color:#fff;
  display:grid;place-items:center;font-size:15px}
.fl-tt{display:flex;flex-direction:column;min-width:0}
.fl-eye{font-size:.58rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--fc)}
.fl-h{font-family:var(--font-display);font-weight:700;font-size:.95rem;line-height:1.12;color:var(--text)}
.fl-sub{font-size:.75rem;line-height:1.34;color:var(--muted)}
.fl-chip{display:inline-block;margin-top:8px;font-size:.62rem;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:var(--fc);background:color-mix(in srgb,var(--fc) 14%,transparent);
  border-radius:999px;padding:2px 9px}
.flow-ctrls{position:absolute;right:12px;bottom:12px;z-index:12;display:flex;gap:5px;
  background:color-mix(in srgb,var(--panel) 90%,transparent);border:1px solid var(--border);
  border-radius:10px;padding:4px;backdrop-filter:blur(6px)}
.flow-ctrls button{font:inherit;font-size:.82rem;font-weight:600;background:transparent;color:var(--text);
  border:0;border-radius:7px;padding:5px 9px;cursor:pointer;line-height:1;min-width:30px}
.flow-ctrls button:hover{background:var(--panel-2)}
.flow-hint{position:absolute;left:12px;bottom:12px;z-index:11;font-size:.7rem;color:var(--muted);
  background:color-mix(in srgb,var(--panel) 86%,transparent);border:1px solid var(--border);
  border-radius:999px;padding:5px 12px;backdrop-filter:blur(6px)}
.flow-detail{font-size:.92rem;line-height:1.6}
.flow-detail p{margin:0 0 11px}.flow-detail b{color:var(--text)}
@media (max-width:640px){.flow-hint{display:none}}

/* task cards inside the Waiting-for-Approval canvas */
.apc{cursor:grab}
.apc .apc-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.apc .apc-id{font-size:.62rem;font-weight:700;letter-spacing:.04em;color:var(--fc);
  background:color-mix(in srgb,var(--fc) 14%,transparent);border-radius:6px;padding:2px 7px}
.apc .apc-title{font-family:var(--font-display);font-weight:700;font-size:.95rem;line-height:1.15;
  color:var(--text);margin-bottom:4px}
.apc .apc-meta{font-size:.72rem;color:var(--muted);line-height:1.4;margin-bottom:8px}
.apc .apc-meta b{color:var(--text)}
.apc .apc-wait{font-weight:700}.apc .apc-wait.late{color:var(--neg)}
.apc .apc-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.apc .apc-btns .btn{padding:5px 10px;font-size:.78rem}
.ap-viewtoggle{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.ap-viewtoggle button{font:inherit;font-size:.8rem;font-weight:600;background:var(--panel);color:var(--muted);
  border:0;padding:6px 12px;cursor:pointer}
.ap-viewtoggle button.on{background:var(--primary);color:var(--btn-text)}
.ap-lane-badge{font-family:var(--font-display)}

/* v143: Waiting-for-Approval — filter-by-admin + collapsible task rows */
.apx-filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 16px}
.apx-flabel{font-weight:700;font-size:.9rem;color:var(--text)}
.apx-select{font:inherit;font-size:.92rem;font-weight:600;color:var(--text);background:var(--panel);
  border:1.5px solid var(--field-border,var(--border));border-radius:10px;padding:9px 14px;min-width:260px;cursor:pointer}
.apx-select:focus{outline:2px solid var(--primary);outline-offset:1px}
.apx-hero{text-align:center;padding:38px 24px}
.apx-hero-ic{font-size:2rem;margin-bottom:8px}
.apx-hero h3{margin:0 0 6px;font-size:1.05rem}
.apx-hero p{max-width:52ch;margin:0 auto;font-size:.9rem;line-height:1.5}
.apx-sec{padding:0;overflow:hidden;margin-bottom:16px}
.apx-sec-h{display:flex;align-items:center;justify-content:space-between;color:#fff;font-weight:700;
  font-size:1rem;padding:11px 16px}
.apx-sec-h.is-approve{background:#3C7A45}
.apx-sec-h.is-review{background:#3D6A8E}
.apx-sec-h .ap-count{background:rgba(255,255,255,.25);border-radius:999px;min-width:24px;text-align:center;
  padding:1px 9px;font-size:.85rem}
.apx-sec-sub{margin:10px 16px 4px;font-size:.8rem}
.apx-list{padding:4px 10px 12px}
.apx-none{padding:16px;color:var(--muted);text-align:center;font-size:.9rem}
.apx-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;cursor:pointer;
  border:1px solid transparent;transition:background .12s}
.apx-row:hover{background:var(--panel-2)}
.apx-row.open{background:var(--panel-2)}
.apx-caret{flex:0 0 auto;color:var(--muted);font-size:.8rem;transition:transform .15s;width:14px;text-align:center}
.apx-row.open .apx-caret{transform:rotate(90deg)}
.apx-mid{flex:1 1 auto;min-width:0}
.apx-l1{display:flex;align-items:baseline;gap:8px;min-width:0}
.apx-id{flex:0 0 auto;font-size:.68rem;font-weight:700;letter-spacing:.03em;color:var(--primary);
  background:color-mix(in srgb,var(--primary) 14%,transparent);border-radius:6px;padding:2px 7px}
.apx-title{flex:1 1 auto;min-width:0;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-size:.9rem}
.apx-l2{display:flex;gap:12px;margin-top:3px;font-size:.74rem;color:var(--muted);flex-wrap:wrap}
.apx-wait{font-weight:700}.apx-wait.late{color:var(--neg)}
.apx-act{flex:0 0 auto;display:flex;gap:5px;align-items:center}
.apx-act .btn.btn-sm{padding:5px 8px;font-size:.8rem}
.apx-panel{margin:0 4px 8px 36px;padding:12px 14px;background:var(--panel-2);border:1px solid var(--border);
  border-radius:10px}
.apx-full{font-weight:600;color:var(--text);line-height:1.45;white-space:pre-wrap;font-size:.9rem;
  max-height:280px;overflow:auto}
.apx-notes{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);color:var(--muted);
  font-size:.85rem;line-height:1.5;white-space:pre-wrap;max-height:180px;overflow:auto}
.apx-panel .task-meta{margin-top:8px}
.apx-attach{margin-top:8px;font-size:.8rem;color:var(--muted)}
.apx-panel-act{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}

/* v146: Attendance — fit the whole month on screen (no horizontal drag) on
   desktop widths; narrow screens keep the scroll behaviour. */
@media (min-width: 980px) {
  .att-grid { table-layout: fixed; width: 100%; }
  .att-grid .tbl-wrap, .att-card .tbl-wrap { overflow-x: visible; }
  .att-grid th, .att-grid td { padding: 3px 1px; }
  .att-grid .att-name { width: 104px; white-space: normal; padding-left: 8px;
    font-size: .8rem; line-height: 1.12; }
  .att-grid .att-rowlbl, .att-grid .att-rowlbl-h { width: 32px; padding-left: 2px; font-size: .55rem; }
  .att-grid .att-mtot { width: 38px; text-align: center; padding: 3px 1px; }
  .att-grid thead th:not(.att-name):not(.att-rowlbl-h):not(.att-mtot) {
    font-size: .58rem; padding: 4px 0; text-align: center; white-space: normal; line-height: 1.05; }
  .att-grid thead th .dow { display: block; font-size: .9em; }
  .att-grid .att-cell, .att-grid .att-hcell { text-align: center; font-size: .68rem;
    min-width: 0; padding: 3px 0; overflow: hidden; }
  .att-grid .hr-flag { font-size: .7em; margin-left: 1px; opacity: .7; }
  .att-grid .att-hin { width: 100%; box-sizing: border-box; font-size: .68rem; padding: 1px 2px; text-align: center; }
}

/* v147: cleaner Attendance — separated rounded chips, calmer grid */
.att-grid .att-cell { padding: 2px 2px !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
.att-grid .att-cell .mk { display: flex; align-items: center; justify-content: center;
  height: 23px; border-radius: 6px; font-weight: 700; font-size: .7rem; line-height: 1;
  color: color-mix(in srgb, var(--muted) 42%, transparent); }
.att-grid .att-cell .mk.att-P { background: #3C7A45; color: #fff; }
.att-grid .att-cell .mk.att-H { background: #B4791F; color: #fff; }
.att-grid .att-cell .mk.att-L { background: #3D6A8E; color: #fff; }
.att-grid .att-cell .mk.att-S { background: #6A34CE; color: #fff; }
.att-grid .att-cell .mk.att-A { background: #A83329; color: #fff; }
.att-grid .att-cell:hover .mk { outline: 1.5px solid var(--primary); outline-offset: 0; }
/* full row labels, never clipped */
.att-grid .att-rowlbl, .att-grid .att-rowlbl-h { width: 52px !important; min-width: 52px;
  font-size: .58rem !important; letter-spacing: .02em; overflow: visible; text-overflow: clip;
  color: var(--muted); }
/* calmer weekend + today */
.att-grid .sun { background: color-mix(in srgb, var(--muted) 5%, transparent) !important; }
.att-grid td.att-today, .att-grid th.att-today { box-shadow: inset 0 0 0 1.4px color-mix(in srgb, var(--primary) 65%, transparent); }
/* lighter day headers */
.att-grid thead th .dow { color: var(--muted); font-weight: 500; }
/* breathing room between the two sub-rows */
.att-grid .att-r1 td { padding-top: 7px !important; }
.att-grid .att-r2 td { padding-bottom: 9px !important; }
.att-grid .att-hcell { color: var(--text); font-weight: 500; }
.att-grid .att-mtot { color: var(--text); }

/* v149: "send approval to" picker inside the review action row */
.apto-lbl { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; color:var(--muted); }
.apto-lbl select { font:inherit; font-weight:600; color:var(--text); background:var(--panel); border:1px solid var(--field-border,var(--border)); border-radius:8px; padding:5px 9px; }

/* v149: cleaner task add/edit pop-up */
.modal-body .fsec { margin: 20px 0 10px; }
.modal-body .fsec:first-of-type { margin-top: 6px; }
.modal-body .frow { margin-bottom: 14px; }
.modal-body label { gap: 6px; }
.modal-body > label { margin-bottom: 14px; }
/* collapsible "More options" */
.modal-adv { margin: 4px 0 6px; border: 1px solid var(--border); border-radius: 12px;
  background: color-mix(in srgb, var(--panel-2) 60%, transparent); overflow: hidden; }
.modal-adv > summary { list-style: none; cursor: pointer; padding: 12px 14px; font-size: .82rem;
  font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; user-select: none; }
.modal-adv > summary::-webkit-details-marker { display: none; }
.modal-adv > summary::before { content: '▸'; color: var(--muted); transition: transform .15s; font-size: .8rem; }
.modal-adv[open] > summary::before { transform: rotate(90deg); }
.modal-adv > summary:hover { background: var(--panel-2); }
.modal-adv-body { padding: 4px 14px 14px; border-top: 1px solid var(--border); }
.modal-adv-body .fsec:first-of-type { margin-top: 12px; }
/* the review action buttons at the top of an owner's edit */
.task-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.task-actions .btn { padding: 8px 14px; }

/* v153: mandatory "Final approval by" field */
.req-lbl .req-star { color: var(--neg); font-weight: 800; margin-left: 2px; }
.req-lbl .req-hint { font-weight: 500; color: var(--muted); font-size: .72rem; margin-top: 2px; text-transform: none; letter-spacing: 0; }
.req-lbl select:invalid { border-color: var(--neg); }

/* v154: request-deletion control */
.task-delreq { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.task-delreq .btn-ghost { color: var(--neg); }

/* v179: company chips / filter / dashboard-split CSS removed (single-company app) */

/* v156: compact, aligned Add/Edit task pop-up */
.modal-body { padding:16px 22px 6px; }
.modal-body .fsec { margin:14px 0 8px; }
.modal-body .fsec:first-of-type { margin-top:2px; }
.modal-body .frow { margin-bottom:11px; gap:12px; }
.modal-body > label { margin-bottom:11px; }
.modal-body label { gap:5px; font-size:.75rem; }
.modal-body input, .modal-body select, .modal-body textarea { padding:8px 11px; font-size:.88rem; }
.modal-body textarea { rows:2; min-height:44px; }
.req-lbl { display:flex; flex-direction:column; gap:5px; flex:1; font-size:.75rem; color:var(--muted); font-weight:600; }

/* ============================================================================
   v161 — task cards, calendar detail, daily-briefing popup, workflow guide,
   updates screen, task-ID bar, and a full responsive pass.
   ========================================================================== */

/* ---- task ID bar at the top of the add/edit pop-up ---- */
.task-idbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.task-idchip { font-family:var(--font-display, inherit); font-weight:800; font-size:.95rem; letter-spacing:.02em;
  color:var(--btn-text); background:var(--primary); padding:4px 12px; border-radius:9px; }
.task-idstatus { font-weight:700; }

/* ---- the box-style task list (replaces the wide table) ---- */
.tk-cards { display:flex; flex-direction:column; gap:12px; }
.tk-card { position:relative; background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:14px 16px 13px; border-left:5px solid var(--sc, var(--primary)); cursor:pointer;
  transition:box-shadow .14s, transform .08s, border-color .14s; }
.tk-card:hover { box-shadow:var(--elev-1, 0 4px 14px rgba(0,0,0,.08)); transform:translateY(-1px); }
.tk-card-top { display:flex; align-items:flex-start; gap:12px; }
.tk-card-id { flex:0 0 auto; font-weight:800; font-size:.82rem; color:var(--muted);
  background:var(--panel-2); border-radius:7px; padding:3px 8px; white-space:nowrap; }
.tk-card-mid { flex:1 1 auto; min-width:0; }
.tk-card-title { font-weight:700; font-size:.98rem; line-height:1.35; word-break:break-word; }
.tk-card-notes { margin-top:3px; }
.tk-card-stat { flex:0 0 auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.tk-card-score { font-size:.82rem; font-weight:700; color:var(--muted); }
.tk-card-facts { display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; margin:10px 0 2px;
  padding:9px 12px; background:var(--panel-2); border-radius:10px; font-size:.82rem; color:var(--muted); }
.tk-fact { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.tk-fact b { color:var(--text); font-weight:700; }
.tk-fact.neg b { color:#dc2626; }
.tk-card .task-meta { margin-top:9px; }
.tk-card-empty { background:var(--panel); border:1px dashed var(--border); border-radius:14px; padding:26px; text-align:center; }
.tk-bell { border:1px solid var(--border); background:var(--panel); border-radius:8px; cursor:pointer;
  padding:2px 7px; font-size:.9rem; line-height:1.3; transition:background .14s, transform .08s; }
.tk-bell:hover { background:color-mix(in srgb, #F43F5E 14%, transparent); border-color:#F43F5E; transform:scale(1.05); }

/* ---- calendar day-detail modal items ---- */
.cal-item { border:1px solid var(--border); border-radius:12px; padding:11px 13px; margin-bottom:10px; background:var(--panel); }
.cal-item-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cal-item-id { font-weight:800; font-size:.78rem; color:var(--muted); background:var(--panel-2); border-radius:6px; padding:2px 7px; }
.cal-item-title { font-size:.95rem; }
.cal-item-meta { margin:8px 0 0; }
.cal-item-meta .task-meta { margin:0; }
.cal-item-act { margin-top:10px; }
.cal-item-content .cal-item-act { margin-top:8px; }

/* ---- daily-briefing "pending work" popup ---- */
.pw-back { position:fixed; inset:0; z-index:120; background:rgba(20,10,40,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:16px; animation:pwFade .18s ease; }
@keyframes pwFade { from { opacity:0; } to { opacity:1; } }
.pw-card { width:min(680px, 100%); max-height:92vh; display:flex; flex-direction:column;
  background:var(--panel); border-radius:18px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.pw-head { padding:20px 22px 16px; background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 92%, #000), color-mix(in srgb, var(--primary-2, var(--primary)) 70%, #000)); color:#fff; }
.pw-hi { font-size:1.3rem; font-weight:800; font-family:var(--font-display, inherit); }
.pw-sub { font-size:.86rem; opacity:.92; margin-top:2px; }
.pw-stats { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.pw-stat { background:rgba(255,255,255,.16); border-radius:9px; padding:5px 11px; font-size:.8rem; font-weight:600; }
.pw-stat b { font-size:1rem; }
.pw-stat.neg { background:rgba(255,80,110,.32); }
.pw-body { padding:14px 18px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.pw-sec { margin-bottom:14px; }
.pw-sec-h { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px;
  font-weight:700; font-size:.9rem; padding-left:9px; border-left:4px solid var(--pw, var(--primary)); }
.pw-sec-n { background:var(--panel-2); color:var(--muted); border-radius:9px; padding:1px 9px; font-size:.78rem; font-weight:800; }
.pw-list { display:flex; flex-direction:column; gap:6px; }
.pw-row { display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:9px 11px; font:inherit; transition:background .12s, border-color .12s; }
.pw-row:hover { background:color-mix(in srgb, var(--primary) 9%, var(--panel-2)); border-color:color-mix(in srgb, var(--primary) 40%, var(--border)); }
.pw-id { flex:0 0 auto; font-weight:800; font-size:.74rem; color:var(--muted); }
.pw-title { flex:1 1 auto; min-width:0; font-size:.88rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pw-who { flex:0 0 auto; font-size:.78rem; color:var(--muted); display:inline-flex; align-items:center; }
.pw-due { flex:0 0 auto; font-size:.76rem; color:var(--muted); font-weight:600; white-space:nowrap; }
.pw-due.over { color:#dc2626; font-weight:800; }
.pw-empty { text-align:center; padding:34px 16px; font-size:1.05rem; color:var(--muted); }
.pw-empty > :first-child { font-size:2.4rem; display:block; margin-bottom:8px; }
.pw-foot { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between;
  padding:14px 18px; border-top:1px solid var(--border); background:var(--panel-2); }
.pw-ack { display:flex; align-items:center; gap:8px; font-size:.86rem; font-weight:600; cursor:pointer; }
.pw-ack input { width:17px; height:17px; }

/* ---- workflow onboarding guide ---- */
.wf-guide { margin-bottom:16px; }
.wf-guide-h { margin:0 0 4px; }
.wf-guide-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px; margin-top:12px; }
.wf-step { background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:13px 15px; }
.wf-step-h { display:flex; align-items:center; gap:9px; margin-bottom:6px; font-size:.94rem; }
.wf-step-ic { font-size:1.15rem; }
.wf-step p { margin:0; font-size:.85rem; line-height:1.5; color:var(--muted); }
.wf-step p b { color:var(--text); }

/* ---- latest updates screen ---- */
.upd-list { display:flex; flex-direction:column; gap:14px; }
.upd-card { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:15px 17px; }
.upd-latest { border-color:color-mix(in srgb, var(--primary) 55%, var(--border)); box-shadow:0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent); }
.upd-head { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:8px; }
.upd-ver { font-weight:800; font-size:.82rem; color:var(--btn-text); background:var(--primary); border-radius:7px; padding:3px 9px; }
.upd-title { font-weight:700; font-size:1rem; }
.upd-new { font-size:.68rem; }
.upd-date { font-size:.8rem; color:var(--muted); }
.upd-points { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:5px; }
.upd-points li { font-size:.87rem; line-height:1.5; }
.upd-flowlink { display:inline-block; margin-top:11px; font-size:.85rem; font-weight:700; }

/* ---- responsive pass (v161): adapt to any screen size ---- */
@media (max-width: 700px) {
  .tk-card-top { flex-wrap:wrap; }
  .tk-card-stat { width:100%; justify-content:flex-start; }
  .modal { width:min(96vw, 560px); }
}
@media (max-width: 560px) {
  .tk-card-facts { gap:6px 12px; padding:8px 10px; }
  .pw-card { width:100%; max-height:94vh; border-radius:14px; }
  .pw-hi { font-size:1.14rem; }
  .pw-foot { flex-direction:column; align-items:stretch; }
  .pw-foot .btn { width:100%; }
  .wf-guide-grid { grid-template-columns:1fr; }
  .task-idbar { gap:6px; }
}
@media (max-width: 420px) {
  .tk-card-title { font-size:.92rem; }
  .pw-who { display:none; }
  .upd-title { font-size:.92rem; }
}

/* v162 — workflow role-guide tabs */
.wf-tabs { display:flex; gap:7px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px 2px 10px; margin:0 -2px; }
.wf-tab { flex:0 0 auto; border:1px solid var(--border); background:var(--panel-2); color:var(--text);
  border-radius:999px; padding:7px 14px; font:inherit; font-size:.85rem; font-weight:700; cursor:pointer;
  white-space:nowrap; transition:background .14s, color .14s, border-color .14s; }
.wf-tab:hover { border-color:color-mix(in srgb, var(--primary) 45%, var(--border)); }
.wf-tab.on { background:var(--primary); color:var(--btn-text); border-color:var(--primary); }
.wf-panel { animation:pwFade .16s ease; }

/* v163 — calendar List (agenda) view + month/list toggle */
.cal-viewtog { display:inline-flex; border:1px solid var(--border); border-radius:9px; overflow:hidden; margin-left:8px; }
.cal-vbtn { font:inherit; font-size:.8rem; font-weight:700; background:var(--panel); color:var(--muted);
  border:0; border-right:1px solid var(--border); padding:6px 12px; cursor:pointer; }
.cal-vbtn:last-child { border-right:0; }
.cal-vbtn.on { background:var(--primary); color:var(--btn-text); }
.cal-agenda { display:flex; flex-direction:column; gap:16px; }
.cal-agenda-day { }
.cal-agenda-date { display:flex; align-items:center; gap:10px; font-weight:800; font-size:.92rem; margin:0 0 8px;
  padding-bottom:6px; border-bottom:2px solid var(--border); }
.cal-agenda-day.is-today .cal-agenda-date { border-bottom-color:var(--primary); }
.cal-agenda-n { margin-left:auto; font-size:.76rem; font-weight:700; color:var(--muted); background:var(--panel-2); border-radius:8px; padding:2px 9px; }
.cal-agenda .cal-item { margin-bottom:8px; }

/* v163 — "how to use it" tip inside Latest Updates entries */
.upd-how { display:flex; flex-direction:column; gap:3px; margin-top:11px; padding:10px 13px;
  background:color-mix(in srgb, var(--primary) 8%, var(--panel-2)); border:1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius:10px; font-size:.86rem; line-height:1.5; }
.upd-how-h { font-weight:800; font-size:.78rem; color:var(--primary); text-transform:uppercase; letter-spacing:.03em; }

/* v163 — calendar day count, nav NEW badge, daily-popup what's-new, content redesign */
.cal-count { display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px;
  padding:0 5px; margin-left:auto; border-radius:9px; background:var(--primary); color:var(--btn-text);
  font-size:.66rem; font-weight:800; }
.cal-day { display:flex; align-items:center; gap:5px; }

.nav-new { background:#34D399 !important; color:#083b2a !important; font-size:.6rem !important; box-shadow:none !important; letter-spacing:.03em; }

.pw-whatsnew { display:block; width:100%; margin-top:12px; text-align:left; cursor:pointer;
  background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.32); border-radius:10px;
  padding:9px 12px; font:inherit; font-size:.84rem; font-weight:700; }
.pw-whatsnew:hover { background:rgba(255,255,255,.28); }

/* content pipeline */
.cnt-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px; margin-bottom:16px; }
.cnt-stat { display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--border);
  border-left:4px solid var(--sc, var(--primary)); border-radius:12px; padding:11px 14px; }
.cnt-stat-ic { font-size:1.15rem; }
.cnt-stat-tx { display:flex; flex-direction:column; line-height:1.15; }
.cnt-stat-tx b { font-size:1.25rem; }
.cnt-stat-tx span { font-size:.74rem; color:var(--muted); font-weight:600; }
.cnt-board { display:flex; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px; }
.cnt-col { min-width:230px; flex:1 0 230px; background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:10px; }
.cnt-col-h { display:flex; align-items:center; gap:7px; margin:0 0 10px; font-weight:800; font-size:.9rem; }
.cnt-col-dot { width:10px; height:10px; border-radius:50%; background:var(--sc); flex:0 0 auto; }
.cnt-col-name { flex:1 1 auto; }
.cnt-col-n { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:1px 8px; font-size:.76rem; color:var(--muted); }
.cnt-col-body { display:flex; flex-direction:column; gap:9px; }
.cnt-card { background:var(--panel); border:1px solid var(--border); border-left:4px solid var(--sc, var(--primary));
  border-radius:10px; padding:10px 12px; cursor:pointer; transition:box-shadow .12s, transform .08s; }
.cnt-card:hover { box-shadow:var(--elev-1, 0 4px 12px rgba(0,0,0,.08)); transform:translateY(-1px); }
.cnt-card-title { font-weight:700; font-size:.9rem; margin-bottom:7px; word-break:break-word; }
.cnt-card-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.cnt-plat { font-size:.74rem; font-weight:700; background:var(--panel-2); border:1px solid var(--border); border-radius:7px; padding:2px 7px; }
.cnt-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:.78rem; color:var(--muted); }
.cnt-date.over { color:#dc2626; font-weight:800; }
.cnt-date.soon { color:var(--primary); font-weight:800; }
.cnt-who { display:inline-flex; align-items:center; gap:2px; }
.cnt-link { display:inline-block; margin-top:8px; font-size:.8rem; font-weight:700; color:var(--primary); }
.cnt-empty { padding:6px 2px; }
@media (max-width:560px){ .cnt-stats { grid-template-columns:repeat(2, 1fr); } .cnt-col { min-width:200px; flex-basis:200px; } }

/* v164 — calendar item facts row (type / start / due / priority) inside details */
.cal-item-facts { display:flex; align-items:center; gap:7px 14px; flex-wrap:wrap; margin:8px 0 0;
  padding:8px 11px; background:var(--panel-2); border-radius:9px; font-size:.8rem; color:var(--muted); }
.cal-fact { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.cal-fact b { color:var(--text); font-weight:700; }
.cal-fact.over b { color:#dc2626; }
.cal-details-card { margin-top:16px; }

/* v164 — full task detail cards INSIDE each calendar day cell */
.cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cal-cell { overflow: visible !important; display: flex; flex-direction: column; gap: 4px; min-height: 92px; }
.cal-task { text-align: left; background: var(--panel); border: 1px solid var(--border);
  border-left: 4px solid var(--sc, var(--primary)); border-radius: 8px; padding: 6px 7px; cursor: pointer;
  transition: box-shadow .12s, transform .06s; }
.cal-task:hover { box-shadow: 0 3px 10px rgba(0,0,0,.10); transform: translateY(-1px); }
.cal-task-h { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cal-task-id { font-weight: 800; font-size: .68rem; color: var(--muted); }
.cal-task-h .badge { font-size: .6rem; padding: 1px 5px; }
.cal-task-title { font-weight: 700; font-size: .76rem; line-height: 1.25; margin: 3px 0 2px;
  word-break: break-word; white-space: normal; color: var(--text); }
.cal-task-facts { display: flex; flex-direction: column; gap: 1px; font-size: .68rem; color: var(--muted); }
.cal-task-facts span { white-space: normal; line-height: 1.3; }
.cal-task-facts .over { color: #dc2626; font-weight: 700; }
.cal-cpill { background: var(--primary); color: #fff; border-radius: 6px; padding: 3px 7px; font-size: .7rem;
  font-weight: 600; white-space: normal; word-break: break-word; }
@media (max-width: 760px) {
  .cal-grid { min-width: 720px; }
}

/* v165 — All Tasks grouped into separate status sections */
.tk-status-sec { margin-bottom: 18px; }
.tk-status-sec:last-child { margin-bottom: 0; }
.tk-status-h { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; padding: 7px 12px;
  background: color-mix(in srgb, var(--sc) 12%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--sc) 30%, var(--border));
  border-left: 4px solid var(--sc); border-radius: 10px; font-weight: 800; }
.tk-status-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--sc); flex: 0 0 auto; }
.tk-status-name { font-size: .95rem; }
.tk-status-n { margin-left: auto; background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  border-radius: 9px; padding: 1px 10px; font-size: .8rem; font-weight: 800; }

/* ============================================================================
   v167 — compact task pop-ups: 3-col field grid, big Heading, Sub-tasks,
   compact Admin follow-up + Scoring, read-only staff detail view.
   ========================================================================== */
/* 3-column compact field grid */
.tk-mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 14px; margin-bottom: 14px; align-items: start; }
.tk-mgrid > label { margin: 0; font-size: .74rem; display: flex; flex-direction: column; gap: 5px; }
.tk-mgrid select, .tk-mgrid input { width: 100%; box-sizing: border-box; }
/* one-line header per cell, height reserved for up to 2 lines so every control
   in a row lines up whether its label is short or wraps ("Report to (…)") */
.rl-h { display: block; font-weight: 600; color: var(--muted); font-size: .74rem; line-height: 1.25; }
.tk-mgrid .rl-h { min-height: 2.4em; }
.req-star { color: #F43F5E; font-weight: 800; }
@media (max-width: 720px) { .tk-mgrid { grid-template-columns: repeat(2, 1fr); } .tk-mgrid .rl-h { min-height: 0; } }
@media (max-width: 460px) { .tk-mgrid { grid-template-columns: 1fr; } }

/* Admin follow-up: one bordered field holding the chips + the picker inside it,
   so it matches every other field (chips no longer dangle below). */
.flw-field { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; width: 100%; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 9px; background: var(--panel); padding: 4px 6px; height: 40px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.flw-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent); }
.flw-select { flex: 0 0 auto; width: 74px; min-width: 74px; border: 0; background: transparent; padding: 3px 2px; outline: none;
  font: inherit; color: var(--text); }
.flw-tag { flex: 0 0 auto; }
.flw-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 20px; padding: 2px 5px 2px 10px; font-size: .76rem; font-weight: 600; }
.flw-x { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: .78rem; line-height: 1;
  padding: 0 3px; border-radius: 50%; }
.flw-x:hover { color: #F43F5E; }

/* Main task block — Heading + Sub-tasks together as one section */
.tk-maintask { border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 12px;
  padding: 13px 14px; margin-bottom: 14px; background: var(--panel-2); }
.tk-maintask .tk-heading { margin-bottom: 10px; }
.subt-block { }
.subt-head { font-size: .74rem; font-weight: 700; color: var(--muted); margin: 2px 0 6px; }
.subt-hint { font-weight: 500; opacity: .8; }

/* big multi-line Heading — plenty of room to type and see the whole task */
.tk-heading textarea { min-height: 150px; resize: vertical; line-height: 1.5; font-size: .95rem; padding: 11px 13px; }
.tk-heading { margin-bottom: 12px; }
/* the Remark box gets a little more room too */
.modal-body textarea[name="remark"] { min-height: 70px; }

/* sub-tasks editor */
.subt-wrap { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.subt-row { display: flex; align-items: center; gap: 7px; }
.subt-bullet { color: var(--primary); font-weight: 800; flex: 0 0 auto; }
.subt-in { flex: 1 1 auto; padding: 7px 10px; }
.subt-rm { flex: 0 0 auto; border: 1px solid var(--border); background: var(--panel); color: var(--muted);
  border-radius: 7px; width: 28px; height: 28px; cursor: pointer; line-height: 1; }
.subt-rm:hover { border-color: #F43F5E; color: #F43F5E; }

/* Admin follow-up compact checkbox cell */
.flw-box { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; max-height: 132px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; background: var(--panel); }
.flw-chk { display: flex; align-items: center; gap: 7px; font-size: .78rem; cursor: pointer; font-weight: 500; }
.flw-chk input { width: 15px; height: 15px; flex: 0 0 auto; }
.flw-chk i { color: var(--muted); font-style: normal; font-size: .68rem; }

/* read-only detail block in the staff / reviewer view */
.tdr-info { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: .82rem;
  color: var(--muted); margin: 0 0 12px; padding: 10px 12px; background: var(--panel-2); border-radius: 10px; }
.tdr-info b { color: var(--text); }
.task-detail-ro { border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 10px;
  padding: 12px 14px; margin: 4px 0 12px; background: var(--panel); }
.tdr-h { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.tdr-heading { font-size: 1rem; font-weight: 700; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.subt-ro { margin-top: 10px; }
.subt-ro-h { font-size: .72rem; font-weight: 800; color: var(--muted); margin-bottom: 4px; }
.subt-ro ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; }
.subt-ro li { font-size: .88rem; line-height: 1.4; }
.tdr-remark { margin-top: 10px; padding: 8px 10px; background: var(--panel-2); border-radius: 8px; font-size: .86rem; }

/* v169 — clamp long task titles everywhere so a big heading doesn't flood
   lists / board / calendar / tables (the full text still opens on the task). */
.ttl-clip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: break-word; }
.tk-card-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.cal-task-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cal-item-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* the modal header never balloons: at most 2 lines, ellipsis */
.modal-head h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break: break-word; }
/* read-only detail: the short heading stays bold on top; the long "detail"
   text scrolls inside a capped box instead of pushing the pop-up down. */
.tdr-detail { margin-top: 8px; white-space: pre-wrap; word-break: break-word; line-height: 1.5; font-size: .9rem;
  max-height: 34vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 10px 12px; background: var(--panel-2); border-radius: 8px; }

/* v172 — Main task block sub-sections (Heading / Task in detail / Sub-tasks / Remark) */
.mt-title { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 10px; }
.tk-maintask > label { display: flex; flex-direction: column; gap: 5px; margin: 0 0 12px; }
.tk-maintask > label:last-child { margin-bottom: 0; }
.mt-detail textarea { min-height: 150px; resize: vertical; line-height: 1.5; font-size: .95rem; padding: 11px 13px; }
.mt-remark textarea { min-height: 60px; resize: vertical; }
.mt-sub { font-weight: 500; opacity: .8; }
.subt-block { margin-bottom: 12px; }

/* v173 — Repeats + its "Repeat on" days grouped as one cell */
.rep-group { position: relative; }
.rep-group.has-days { border: 1.5px solid var(--primary); border-radius: 11px; padding: 8px 9px;
  background: color-mix(in srgb, var(--primary) 6%, transparent); }
.rep-group.has-days > .rl-h { color: var(--primary); }
.rep-group .rd-row { margin: 8px 0 0; gap: 4px; }
.rep-group .rd-lbl { font-size: .68rem; font-weight: 700; color: var(--muted); width: 100%; margin-bottom: 2px; }
.rep-group .rd-chip span { min-width: 24px; padding: 4px 0; font-size: .74rem; }

/* v174 — Quality: grade dropdown + exact % box side by side */
.tk-mgrid .q-preset { width: 100%; }
.tk-mgrid .q-num { width: 100%; margin-top: 5px; }

/* ============================================================================
   v175 — device-class responsive pass. Four targets, one language:
     • Phone (≤600px): the task-workflow tables (In Review, Re-do, Pending,
       Waiting-for-Approval, Deletion Requests) stop scrolling sideways and
       stack into tappable cards — the biggest mobile pain Risha flagged.
     • Tablet: sidebar already collapses to ☰ at 1024px (above); here we just
       relax a couple of tight spots.
     • Laptop 13-16": the 1280px content column already fits comfortably.
     • Monitor 24-55": the content no longer strands in a narrow 1280px column
       on a huge display — it widens (and breathes) so the space is used.
   ========================================================================== */

/* ---- Phone: task tables → stacked cards (no horizontal scroll) ---- */
@media (max-width: 600px) {
  /* the wrapper no longer needs to scroll — the rows now fit the width */
  .tbl-task { min-width: 0; }
  .tbl-task, .tbl-task tbody { display: block; width: 100%; }
  .tbl-task thead { display: none; }              /* headers are redundant once stacked */
  .tbl-task tr { display: block; border: 1px solid var(--border); border-radius: 12px;
    padding: 10px 12px 9px; margin-bottom: 10px; box-shadow: inset 4px 0 var(--primary); }
  .tbl-task tr:last-child { margin-bottom: 0; }
  /* neutralise the desktop table cell rules — no borders, no zebra, no big pad */
  .tbl-task td { display: inline-block; border: none !important; padding: 2px 8px 2px 0 !important;
    background: none !important; font-size: .82rem; vertical-align: middle; }
  .tbl-task tbody tr:nth-child(even) td { background: none !important; }
  /* ID chip, then the task on its own full-width line, then the rest flow-wrap */
  .tbl-task td:nth-child(1) { font-weight: 800; font-size: .72rem; color: var(--muted);
    letter-spacing: .03em; padding-right: 6px !important; }
  .tbl-task td:nth-child(2) { display: block; padding: 3px 0 6px !important; }
  .tbl-task td:nth-child(2) .ttl-clip { -webkit-line-clamp: 3; font-size: .9rem; }
  .tbl-task td .badge { font-size: .68rem; }
  /* the "empty" row shouldn't look like a card */
  .tbl-task td.empty { display: block; border: none !important; text-align: center; }
  .tbl-task tr:has(td.empty) { box-shadow: none; border-style: dashed; }
}

/* ---- Phone: workflow toolbars & approval accordion breathe a little ---- */
@media (max-width: 600px) {
  .toolbar select { flex: 1 1 auto; }
  .apx-filter { gap: 8px; }
  .apx-select { flex: 1 1 auto; min-width: 0; }
  .apx-act .btn.btn-sm { padding: 6px 9px; }      /* easier tap targets */
  .apx-list { padding: 4px 6px 12px; }
  .apx-panel { margin-left: 12px; }               /* was 36px — reclaim width on phones */
}

/* ---- Tablet: a touch more room where it was tight ---- */
@media (min-width: 601px) and (max-width: 1024px) {
  .tk-kpis { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Monitor 24-55": use the width instead of a lonely 1280px column ----
   The reading/work column grows in steps so a big external display isn't
   mostly empty margin. Grids that auto-fill (KPIs, calc cards, team-now)
   pick up extra columns for free once main is wider. */
@media (min-width: 1600px) {
  main { max-width: 1480px; padding: 26px 34px; }
}
@media (min-width: 2000px) {
  main { max-width: 1720px; }
}
@media (min-width: 2560px) {
  main { max-width: 1960px; padding: 30px 44px; }
  /* nudge base type up a hair so it stays readable at monitor viewing distance */
  html { font-size: 17px; }
}

/* ---- v176: shared task-number search box (every task screen's toolbar) ---- */
.tk-search { flex: 0 1 210px; min-width: 130px; padding: 7px 12px; border-radius: 9px;
  font-size: .85rem; background: var(--panel); border: 1px solid var(--field-border, var(--border)); }
.tk-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
@media (max-width: 600px) { .tk-search { flex: 1 1 100%; } }
/* recurring: task-no chip + "open" button + details hint */
.recur-idbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.recur-id { font-weight: 800; font-size: .72rem; letter-spacing: .03em; color: var(--btn-text);
  background: var(--primary); border-radius: 7px; padding: 2px 9px; }
.recur-open { margin-left: auto; }
.recur-hint { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: .78rem;
  color: var(--muted); background: var(--panel-2); border: 1px dashed var(--border); border-radius: 8px; padding: 5px 10px; }
/* v177: monthly staff report card (Performance, Management only) */
.rpt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.rpt-top > div:first-child { flex: 1 1 320px; min-width: 0; }
.rpt-btns { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
@media (max-width: 560px) { .rpt-btns { width: 100%; } .rpt-btns .btn { flex: 1 1 auto; } }
/* v176: calendar drag-to-reschedule */
.cal-task[data-drag] { cursor: grab; }
.cal-task[data-drag]:active { cursor: grabbing; }
.cal-task.dragging { opacity: .4; }
.cal-cell.cal-drop { outline: 2px dashed var(--primary); outline-offset: -3px;
  background: color-mix(in srgb, var(--primary) 12%, transparent) !important; border-radius: 8px; }

/* v178: recurring search-match highlight + task activity trail */
.recur-match{margin:2px 0 10px;font-size:.85rem;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.recur-dot.match{outline:2px solid var(--primary,#7C3AED);outline-offset:1px;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary,#7C3AED) 25%,transparent)}
.task-activity{margin:14px 0 4px;padding:10px 12px;border:1px solid var(--border,#e6e1f2);border-radius:12px;background:color-mix(in srgb,var(--primary,#7C3AED) 4%,transparent)}
.task-activity .tdr-h{font-weight:700;margin-bottom:8px}
.tact-row{display:flex;align-items:flex-start;gap:8px;padding:3px 0;font-size:.88rem;color:var(--text,#222)}
.tact-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:0 0 auto}
.tact-dot.created{background:#16a34a}
.tact-dot.edited{background:var(--primary,#7C3AED)}
.tact-txt{flex:1}