/* ============================================================================
   Sight Solutions Group — HR Suite
   Design system. Same bones as the CRM (Inter, navy, teal) but pushed further:
   the real SSG brand gradient (#1FE39A → #12C7BD → #1AA6EA) is the signature
   accent, surfaces are layered rings rather than hard borders, and display type
   runs at weight 300 with tight tracking — the SSG brand's actual voice.
   ========================================================================== */

:root {
  --brand-1: #1FE39A;
  --brand-2: #12C7BD;
  --brand-3: #1AA6EA;
  --brand: linear-gradient(135deg, var(--brand-1), var(--brand-2) 52%, var(--brand-3));
  --brand-soft: linear-gradient(135deg, rgba(31,227,154,.14), rgba(26,166,234,.10));

  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --line: #e6ecf4;
  --line-strong: #d5dfec;
  --ink: #0f1b2d;
  --ink-2: #475569;
  --ink-3: #8494a8;

  --shadow-sm: 0 1px 2px rgba(15,27,45,.05), 0 1px 3px rgba(15,27,45,.04);
  --shadow-md: 0 4px 14px rgba(15,27,45,.07), 0 2px 4px rgba(15,27,45,.04);
  --shadow-lg: 0 18px 48px rgba(15,27,45,.14), 0 4px 12px rgba(15,27,45,.06);
  --ring: 0 0 0 3px rgba(18,199,189,.20);
  --r: 14px;
}

.dark {
  --bg: #080d15;
  --surface: #101826;
  --surface-2: #16203112;
  --line: #1c2738;
  --line-strong: #26344a;
  --ink: #eaf1f8;
  --ink-2: #a3b2c4;
  --ink-3: #6c7d92;
  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  --ring: 0 0 0 3px rgba(34,211,238,.22);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-feature-settings: 'cv02','cv03','cv04','ss01';
}
.dark body { background: var(--bg); }

/* Ambient brand wash behind the app — barely there, but it stops the page
   reading as a flat grey admin panel. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 420px at 12% -8%, rgba(31,227,154,.10), transparent 62%),
    radial-gradient(760px 420px at 92% 4%, rgba(26,166,234,.09), transparent 60%);
}
.dark body::before {
  background:
    radial-gradient(900px 420px at 12% -8%, rgba(31,227,154,.09), transparent 62%),
    radial-gradient(760px 420px at 92% 4%, rgba(26,166,234,.10), transparent 60%);
}

/* ---------------------------------------------------------------- typography */
.display { font-weight: 300; letter-spacing: -.03em; }
.grad-text {
  background: var(--brand); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.eyebrow {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; color: var(--ink-3);
}

/* --------------------------------------------------------------- Arabic / RTL */
html[dir="rtl"] body { font-family: 'IBM Plex Sans Arabic', 'Inter', ui-sans-serif, system-ui, sans-serif; }
/* A figure has to read left-to-right even inside an Arabic layout. `.num` is carried by
   table cells as often as by spans, though, and making a <td> inline-block drops it out
   of the table box: the `width: 1%` shrink-to-content trick below then measures against
   the wrong containing block and every money column collapses to about 30px with the
   digits spilling over each other. Cells therefore keep their table display and take the
   LTR treatment on their own, right-aligned to match the English rendering. */
html[dir="rtl"] .num { direction: ltr; unicode-bidi: embed; display: inline-block; }
html[dir="rtl"] td.num, html[dir="rtl"] th.num { display: table-cell; text-align: right; }
html[dir="rtl"] table { text-align: right; }
html[dir="rtl"] .sidebar-item { text-align: right; }
html[dir="rtl"] .flip { transform: scaleX(-1); }

/* ------------------------------------------------------------------ scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #c8d4e3; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #a7b8cd; background-clip: content-box; }
.dark *::-webkit-scrollbar-thumb { background: #24324a; background-clip: content-box; }
.dark *::-webkit-scrollbar-thumb:hover { background: #33445f; background-clip: content-box; }

/* --------------------------------------------------- mobile / installed-app fit
   Never let the page itself scroll sideways — a single element wider than the screen
   (a table, or the off-canvas sidebar in RTL) is what forces a pinch-to-zoom-out on a
   phone. `clip` is preferred over `hidden` because it never turns the page into a
   scroll container and so cannot break the sticky top bar; tables and grids keep their
   own inner horizontal scroll. */
html, body { overflow-x: hidden; width: 100%; max-width: 100%; }
/* `hidden` on the page root turns <body> into its own scroll container, which silently
   breaks every position:sticky element — the sidebar scrolled away and left an empty
   strip under it. `clip` cuts the sideways overflow WITHOUT creating a scroll container,
   so sticky works. Every current browser supports it; `hidden` above stays as the
   fallback for the few that do not. */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

/* The desktop sidebar is pinned to the viewport and scrolls its own navigation, so it
   is always full height no matter how long the page is. */
@media (min-width: 1024px) {
  .app-sidebar { position: sticky !important; top: 0; height: 100vh; height: 100dvh; align-self: flex-start; }
}
/* Belt-and-suspenders: pin the layout viewport to the device width so iOS never
   zooms to fit a stray wide child. The shell scroller stays the page body, so the
   sticky top bar is unaffected. */
html { -webkit-text-size-adjust: 100%; }

/* Respect the iPhone notch / home indicator when installed to the home screen, so the
   top bar sits below the status bar and content clears the home bar. On desktop every
   inset is 0, so nothing changes there. */
@supports (padding: max(0px)) {
  .app-topbar  { padding-top: env(safe-area-inset-top); height: calc(4rem + env(safe-area-inset-top)) !important; }
  .app-sidebar { padding-top: env(safe-area-inset-top); }
  main         { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------ ownership watermark
   A quiet on-screen stamp of who is signed in, and a bold diagonal one on anything
   printed or saved to PDF — so a copy or a screenshot is traceable to the account that
   took it, and nobody can claim they did not know the system is confidential. */
.wm-screen {
  position: fixed; z-index: 6; bottom: 6px; inset-inline-end: 10px;
  font-size: 10px; line-height: 1; letter-spacing: .03em;
  color: var(--ink-3); opacity: .5; pointer-events: none; user-select: none;
  white-space: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis;
}
@media print {
  .wm-screen {
    inset: 0; bottom: auto; inset-inline-end: auto; opacity: .14;
    display: grid; place-items: center; font-size: 40px; font-weight: 700;
    transform: rotate(-28deg); color: #475569; max-width: none;
  }
}

/* ---------------------------------------------------------------- app chrome */
.app-sidebar {
  background: var(--surface);
  border-inline-end: 1px solid var(--line);
}
.dark .app-sidebar { background: linear-gradient(180deg, #0d1522, #0a111c); border-color: var(--line); }

.app-topbar {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

/* ---------------------------------------------------------------------- cards */
.card {
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--line-strong); }

/* KPI tile: a hairline of brand gradient across the top, revealed on hover */
.kpi { position: relative; overflow: hidden; }
.kpi::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: var(--brand); opacity: .5; transform: scaleX(.28);
  transform-origin: left center; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s;
}
html[dir="rtl"] .kpi::after { transform-origin: right center; }
.kpi:hover::after { transform: scaleX(1); opacity: 1; }
.kpi-value {
  font-size: 1.65rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.08;
  font-variant-numeric: tabular-nums;
}
/* A hairline trend UNDER the tile's text. It is a flex sibling in normal flow, never an
   overlay — an absolutely positioned sparkline draws over the caption the moment the
   tile's own bottom padding is overridden (Tailwind's `p-4` is injected after this
   sheet and wins on equal specificity), which is exactly what went wrong before. */
.kpi-trend { display: flex; flex-direction: column; padding-bottom: 0 !important; }
.kpi-trend > .kpi-head { flex: 1 1 auto; min-width: 0; }
.kpi-spark {
  display: block; flex: none; align-self: stretch;
  height: 30px; margin-top: .9rem; margin-inline: -1rem;
  opacity: .7; pointer-events: none;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--brand-2) 6%, transparent));
}
.kpi:hover .kpi-spark { opacity: 1; }
/* A country code that is printed on the field rather than typed into it. Always
   left-to-right, even in Arabic, because a phone number is not a sentence. */
.tel-wrap { display: flex; align-items: stretch; direction: ltr; }
.tel-cc {
  display: inline-flex; align-items: center; padding: 0 .7rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .01em;
  color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line-strong); border-inline-end: 0;
  border-start-start-radius: var(--r-sm, .75rem); border-end-start-radius: var(--r-sm, .75rem);
  white-space: nowrap; user-select: none; flex: none;
}
.tel-wrap > .inp {
  border-start-start-radius: 0 !important; border-end-start-radius: 0 !important;
  flex: 1 1 auto; min-width: 0;
}
/* the dark sign-in/activation screens use their own field styling */
.tel-dark .tel-cc { color: #94a3b8; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }

.delta { font-size: .6875rem; font-weight: 700; display: inline-flex; align-items: center; gap: .15rem; }
.delta-up { color: #15803d; } .dark .delta-up { color: #4ade80; }
.delta-down { color: #b91c1c; } .dark .delta-down { color: #f87171; }

.panel-title { font-size: .95rem; font-weight: 800; letter-spacing: -.015em; }

/* --------------------------------------------------------------------- tables
   The table is the product. Columns line up because alignment is decided per data
   type — text starts, numbers end with tabular figures so digits sit in columns,
   status and actions centre — and the header inherits whatever its column does
   (see alignTables() in app.js). */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8125rem; }
.tbl thead th {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(10px) saturate(160%);
  color: var(--ink-3); font-weight: 600; font-size: .6875rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .75rem .85rem; white-space: nowrap;
  border-bottom: 1px solid var(--line-strong);
  text-align: start; vertical-align: middle;
}
.dark .tbl thead th { background: rgba(14,23,37,.92); }
.tbl tbody td {
  padding: .7rem .85rem; border-bottom: 1px solid var(--line);
  vertical-align: middle; text-align: start;
}
.tbl tbody tr { transition: background .14s ease, box-shadow .14s ease; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--brand-2) 4%, transparent); }
.dark .tbl tbody tr:hover { background: rgba(18,199,189,.06); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tfoot td {
  padding: .75rem .85rem; border-top: 1px solid var(--line-strong);
  background: var(--surface-2); vertical-align: middle;
}
.dark .tbl tfoot td { background: rgba(255,255,255,.02); }
/* Numbers: right-aligned with fixed-width digits so magnitudes read down the column,
   and shrink-to-content so the header sits directly over its figures instead of drifting
   to the far side of an over-wide column. The first text column absorbs the slack. */
.tbl .num, .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.tbl td.num, .tbl th.num, .tbl tfoot td.num { text-align: end; width: 1%; white-space: nowrap; }
.tbl td.ctr, .tbl th.ctr, .tbl tfoot td.ctr { text-align: center; width: 1%; white-space: nowrap; }
.tbl thead th.num { padding-inline-end: .85rem; }
/* money columns get a touch more air between them than plain integers */
.tbl td.num + td.num, .tbl th.num + th.num { padding-inline-start: 1.15rem; }
/* the identity column: avatar and name locked to one baseline whatever the row height */
.tbl .who { display: flex; align-items: center; gap: .6rem; min-height: 2rem; }
.tbl .who > .avatar { flex: none; }
.tbl .who .who-text { min-width: 0; line-height: 1.25; }

/* ---------------------------------------------------------------------- pills */
.pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .17rem .55rem; border-radius: 999px;
  font-size: .6875rem; font-weight: 700; line-height: 1.45; white-space: nowrap;
  border: 1px solid transparent;
}
.pill-green { background: #e7f8ee; color: #10794a; border-color: #c9eeda; }
.pill-red   { background: #fdeaea; color: #b4232a; border-color: #f7cdcd; }
.pill-amber { background: #fdf3e0; color: #a25c07; border-color: #f6e0b8; }
.pill-blue  { background: #e8f0fe; color: #1a4fc4; border-color: #cddffb; }
.pill-teal  { background: #e2f8f7; color: #0b7a76; border-color: #c2eeeb; }
.pill-slate { background: #f0f4f9; color: #4a5b70; border-color: #e0e8f2; }
.pill-purple{ background: #f4ebfe; color: #6d28d9; border-color: #e5d5fb; }
.dark .pill-green { background: rgba(34,197,94,.13); color: #5ee39d; border-color: rgba(34,197,94,.22); }
.dark .pill-red   { background: rgba(239,68,68,.13); color: #fb8a8a; border-color: rgba(239,68,68,.22); }
.dark .pill-amber { background: rgba(245,158,11,.13); color: #fbbf24; border-color: rgba(245,158,11,.22); }
.dark .pill-blue  { background: rgba(59,130,246,.14); color: #7db1fb; border-color: rgba(59,130,246,.24); }
.dark .pill-teal  { background: rgba(18,199,189,.14); color: #3fdcd4; border-color: rgba(18,199,189,.24); }
.dark .pill-slate { background: rgba(148,163,184,.13); color: #b7c4d4; border-color: rgba(148,163,184,.2); }
.dark .pill-purple{ background: rgba(168,85,247,.14); color: #c99cfb; border-color: rgba(168,85,247,.24); }

/* --------------------------------------------------------------------- inputs */
.inp, .sel, .ta {
  width: 100%; border-radius: 11px;
  border: 1px solid var(--line-strong); background: var(--surface);
  padding: .55rem .75rem; font-size: .8125rem; color: var(--ink);
  outline: none; transition: box-shadow .16s, border-color .16s, background .16s;
}
.dark .inp, .dark .sel, .dark .ta { background: #0e1725; border-color: var(--line-strong); }
.inp::placeholder, .ta::placeholder { color: var(--ink-3); }
.inp:focus, .sel:focus, .ta:focus { border-color: var(--brand-2); box-shadow: var(--ring); }
.inp:disabled, .ta:disabled { opacity: .55; }
.lbl {
  display: block; font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-3); margin-bottom: .32rem;
}

/* -------------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .42rem;
  border-radius: 11px; padding: .52rem .9rem;
  font-size: .8125rem; font-weight: 700; white-space: nowrap;
  transition: transform .12s ease, filter .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
  background: var(--brand); color: #04241f;
  box-shadow: 0 6px 18px rgba(18,199,189,.30);
}
.btn-primary:hover { filter: brightness(1.06) saturate(1.05); box-shadow: 0 10px 26px rgba(18,199,189,.38); }
.dark .btn-primary { color: #03181d; }
.btn-ghost { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.btn-ghost:hover { background: #eef3f9; color: var(--ink); }
.dark .btn-ghost { background: #16213200; border-color: var(--line-strong); color: var(--ink-2); }
.dark .btn-ghost:hover { background: #16213a; color: #fff; }
.btn-outline { border: 1px solid var(--line-strong); color: var(--ink-2); background: transparent; }
.btn-outline:hover { border-color: var(--brand-2); color: var(--ink); }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* -------------------------------------------------------------------- sidebar */
.sidebar-item {
  position: relative; display: flex; align-items: center; gap: .68rem;
  padding: .52rem .7rem; border-radius: 11px;
  font-size: .8125rem; font-weight: 600; color: var(--ink-2);
  width: 100%; transition: background .16s, color .16s;
}
.sidebar-item:hover { background: var(--surface-2); color: var(--ink); }
.dark .sidebar-item:hover { background: #15203180; color: #fff; }
.sidebar-item.active { background: var(--brand-soft); color: #0b6f74; }
.dark .sidebar-item.active { color: #52e5da; background: rgba(18,199,189,.12); }
.sidebar-item.active::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 18%; bottom: 18%;
  width: 3px; border-radius: 999px; background: var(--brand);
}

/* ---------------------------------------------------------------------- misc */
.avatar {
  display: grid; place-items: center; border-radius: 999px;
  font-weight: 800; color: #fff; flex: none; letter-spacing: -.02em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.avatar-ring { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(18,199,189,.35); }

/* Segmented control rather than loose buttons — reads as one instrument, not five. */
.tab {
  position: relative; padding: .42rem .85rem; border-radius: 9px;
  font-size: .8125rem; font-weight: 600; color: var(--ink-3);
  transition: background .16s, color .16s, box-shadow .16s;
}
.tab:hover { color: var(--ink); }
.tab.active {
  background: var(--surface); color: var(--ink); font-weight: 700;
  box-shadow: 0 1px 2px rgba(15,27,45,.10), 0 0 0 1px var(--line-strong);
}
.dark .tab.active { background: #1b2739; color: #fff; box-shadow: 0 0 0 1px #2a3a53; }
/* the strip the segments sit in */
.card > .flex > .flex.gap-1:has(.tab),
.seg { background: var(--surface-2); border-radius: 11px; padding: 3px; gap: 2px; display: inline-flex; }
.dark .card > .flex > .flex.gap-1:has(.tab), .dark .seg { background: rgba(255,255,255,.04); }

.bar { height: 6px; border-radius: 999px; background: #e8eef6; overflow: hidden; }
.dark .bar { background: #1b2740; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--brand); transition: width .6s cubic-bezier(.2,.8,.2,1); }

.divider { height: 1px; background: var(--line); }

/* --------------------------------------------------------------- hierarchy map */
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree { display: flex; justify-content: center; gap: 1.1rem; }
.tree-scroll { overflow: auto; padding: 1.25rem .5rem 2rem; cursor: grab; --org-line: #94a3b8; }
.dark .tree-scroll { --org-line: #7185a3; }
.tree-scroll.is-panning { cursor: grabbing; user-select: none; }
.tree .node { cursor: pointer; }
.tree-zoom { transform-origin: top center; transition: transform .25s ease; display: inline-block; min-width: 100%; }
.tree ul { display: flex; gap: 1.1rem; justify-content: center; padding-top: 1.6rem; position: relative; }
.tree li { position: relative; display: flex; flex-direction: column; align-items: center; }
/* Connectors are drawn per-child: a vertical stem up to a sibling rail, and each child
   paints its own half of that rail reaching into the gap on both sides, so neighbours
   meet in the middle of the gap. There is no full-width rail and no background-coloured
   mask — the old mask showed as long overhanging stubs on the dark map and drew a stray
   rail over single children. Logical `inset-inline` keeps it correct in RTL. */
.tree ul > li::before {
  content: ""; position: absolute; top: -1.7rem; left: 50%;
  width: 2px; height: 1.75rem; margin-left: -1px; background: var(--org-line); border-radius: 1px;
}
.tree ul > li::after {
  content: ""; position: absolute; top: -1.6rem; height: 2px;
  inset-inline: -0.55rem; background: var(--org-line); border-radius: 1px;
}
.tree ul > li:first-child::after { inset-inline-start: 50%; }
.tree ul > li:last-child::after  { inset-inline-end: 50%; }
.tree ul > li:only-child::after  { display: none; }
/* stem from a parent down to its children's rail — extended a touch past the rail so the
   corner joins are solid with no hairline gap */
.tree .has-kids > .node-wrap::after {
  content: ""; position: absolute; bottom: -1.7rem; left: calc(50% + var(--pstem, 0px));
  width: 2px; height: 1.75rem; margin-left: -1px; background: var(--org-line); border-radius: 1px;
}
.node-wrap { position: relative; }

.node {
  width: 194px; border-radius: 13px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  padding: .6rem .7rem; text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.node:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-2); }
.node.is-me { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(18,199,189,.16); }
.node.is-hit { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.22); }
.node.dim { opacity: .34; }
/* Edit mode: the chart becomes the thing you change, not just the thing you read. */
.node.is-draggable { cursor: grab; }
.node.is-draggable:active { cursor: grabbing; }
.node.is-dragging { opacity: .45; transform: scale(.97); }
.node.is-droptarget {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(18,199,189,.28), var(--shadow-md);
  transform: translateY(-3px);
}
.tree-zoom.is-editing .node { user-select: none; }
.tree-zoom.is-editing .node-name::after { content: " ⠿"; color: var(--ink-3); font-size: .7em; }
.node-accent { height: 3px; border-radius: 999px; width: 34px; margin: 0 auto .45rem; }
.node-name { font-size: .78rem; font-weight: 800; letter-spacing: -.01em; }
.node-role { font-size: .66rem; color: var(--ink-3); line-height: 1.35; }
.node-count {
  position: absolute; top: -8px; inset-inline-end: -8px;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; font-size: .62rem; font-weight: 800;
  background: var(--ink); color: var(--surface); box-shadow: var(--shadow-sm);
}
.dark .node-count { background: var(--brand); color: #04241f; }

/* ------------------------------------------------------------- command palette */
.palette {
  width: min(640px, 94vw); border-radius: 18px; overflow: hidden;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px) saturate(180%);
}
.palette-row { display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem; cursor: pointer; }
.palette-row.sel { background: var(--brand-soft); }
.kbd {
  font-family: ui-monospace, SFMono-Regular, monospace; font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--ink-3);
}

/* ------------------------------------------------------------------ animation */
.fade-in { animation: rise .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sheet { animation: pop .2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.stagger > * { animation: rise .34s cubic-bezier(.2,.8,.2,1) both; }
.stagger > *:nth-child(1){animation-delay:.02s}.stagger > *:nth-child(2){animation-delay:.05s}
.stagger > *:nth-child(3){animation-delay:.08s}.stagger > *:nth-child(4){animation-delay:.11s}
.stagger > *:nth-child(5){animation-delay:.14s}.stagger > *:nth-child(6){animation-delay:.17s}
.stagger > *:nth-child(7){animation-delay:.20s}.stagger > *:nth-child(8){animation-delay:.23s}
/* Honouring reduced motion by collapsing the duration is not enough on its own: these
   animations use `both`, so a fill-mode that never advances pins the element on its
   opening frame — a panel left at scale(.985) translateY(12px), which reads as a
   misaligned sheet with a pale band above it. Cancel the animation outright instead. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-fill-mode: none !important;
    transition-duration: .01ms !important;
  }
  .sheet, .stagger > *, .fade-in { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------------- kanban */
.kanban-col { min-height: 150px; transition: background .18s, outline-color .18s; }
.drag-over { outline: 2px dashed var(--brand-2); outline-offset: -5px; background: rgba(18,199,189,.05); }
.dragging { opacity: .4; }

/* --------------------------------------------------------------------- print */
.print-only { display: none; }
@media print {
  .no-print, .app-sidebar, .app-topbar { display: none !important; }
  body::before { display: none; }
  .print-only { display: block; }
  body { background: #fff !important; }
  .card { box-shadow: none; border-color: #cbd5e1; }
}

/* Icon-only buttons that sit in a row with a text button. A line of text and an inline
   <svg> do not produce the same box height from the same padding, so the language
   toggle stood 3px taller than the bell beside it on every page. Fixing the square
   removes the guesswork: same height, same baseline, whichever it holds. */
.btn-icon {
  height: 2.375rem; width: 2.375rem;
  padding: 0 !important;
  display: inline-grid; place-items: center;
  line-height: 1;
  flex: 0 0 auto;
}
/* ================================================================ onboarding page
   What a new hire sees from their invitation email. Always light, whatever the
   device's saved theme, and laid out for a phone first. */
.onb {
  --ink: #0f172a; --ink-2: #334155; --ink-3: #64748b; --line: #e6ebf2; --line-strong: #d5dde8;
  --surface: #ffffff; --surface-2: #f3f6fa; --brand-2: #0d9488; --ring: 0 0 0 4px rgba(13,148,136,.14);
  min-height: 100vh; background: #f4f7fb; color: var(--ink); color-scheme: light;
}
.onb-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; max-width: 980px; margin: 0 auto; }
.onb-brand { display: flex; align-items: center; gap: .65rem; }
.onb-brand b { display: block; font-size: .95rem; font-weight: 800; letter-spacing: -.01em; }
.onb-brand small { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #0f766e; }
.onb-lang { font-size: .78rem; font-weight: 700; color: var(--ink-2); padding: .4rem .75rem; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; }
.onb-lang:hover { border-color: #0d9488; color: #0d9488; }
.onb-hero {
  background: radial-gradient(520px 260px at 12% 0%, rgba(31,227,154,.22), transparent 70%),
              radial-gradient(520px 260px at 92% 10%, rgba(26,166,234,.20), transparent 70%), #0b1424;
  color: #fff; padding: 2.25rem 1.25rem 5.5rem;
}
.onb-hero-in { max-width: 720px; margin: 0 auto; }
.onb-eyebrow { font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #5eead4; }
.onb-hero h1 { font-size: 1.65rem; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; margin-top: .4rem; }
.onb-hero p { color: #cbd5e1; font-size: .92rem; line-height: 1.6; margin-top: .45rem; max-width: 34rem; }
.onb-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.onb-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 600; color: #e2e8f0;
  padding: .32rem .7rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.onb-wrap { max-width: 720px; margin: -4rem auto 0; padding: 0 1rem 3rem; position: relative; }
.onb-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 50px -24px rgba(15,23,42,.28), 0 2px 6px rgba(15,23,42,.04); }
.onb-card-body { padding: 1.4rem 1.25rem 1.5rem; }
.onb-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); }
.onb-step { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.onb-step i { display: block; height: 4px; border-radius: 99px; background: #e6ebf2; transition: background .25s; }
.onb-step.done i { background: #14b8a6; }
.onb-step.on i { background: linear-gradient(90deg, #1FE39A, #12C7BD, #1AA6EA); }
.onb-step span { font-size: .7rem; font-weight: 700; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onb-step.on span { color: var(--ink); }
.onb-step.done span { color: #0f766e; }
.onb-h { font-size: 1.2rem; font-weight: 800; letter-spacing: -.015em; }
.onb-sub { font-size: .85rem; color: var(--ink-3); margin-top: .2rem; line-height: 1.55; }
.onb-lbl { display: block; font-size: .78rem; font-weight: 700; color: var(--ink-2); margin-bottom: .35rem; }
.onb-lbl em { font-style: normal; color: #e11d48; margin-inline-start: .15rem; }
.onb-lbl small { font-weight: 500; color: var(--ink-3); margin-inline-start: .25rem; }
.onb .inp, .dark .onb .inp, .onb .tel-cc, .dark .onb .tel-cc { background: #fff; border-color: var(--line-strong); color: var(--ink); font-size: .9rem; padding-top: .7rem; padding-bottom: .7rem; border-radius: 12px; }
.onb .tel-cc, .dark .onb .tel-cc { background: var(--surface-2); color: var(--ink-2); padding: 0 .8rem; }
.onb .inp:disabled { background: var(--surface-2); opacity: 1; color: var(--ink-2); }
.onb .inp.bad { border-color: #f43f5e; }
.onb-err { font-size: .75rem; color: #e11d48; margin-top: .3rem; }
.onb-hint { font-size: .75rem; color: var(--ink-3); margin-top: .3rem; }
.onb-choice { border: 1px solid var(--line-strong); border-radius: 12px; padding: .68rem .5rem; font-size: .88rem; font-weight: 700; color: var(--ink-2); background: #fff; transition: all .15s; }
.onb-choice:hover { border-color: #94a3b8; }
.onb-choice.on { border-color: #0d9488; background: #f0fdfa; color: #0f766e; box-shadow: var(--ring); }
.onb-choice.bad { border-color: #f43f5e; }
.onb-section { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 800; color: var(--ink); padding-top: .4rem; }
.onb-section span:first-child { color: #0d9488; }
.onb-note { display: flex; gap: .6rem; font-size: .8rem; line-height: 1.55; color: var(--ink-2); background: #f0fdfa; border: 1px solid #ccfbf1; border-radius: 14px; padding: .8rem .9rem; }
.onb-note > span:first-child { color: #0d9488; margin-top: .1rem; flex: none; }
.onb-review { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.onb-review-row { display: flex; align-items: flex-start; gap: .75rem; padding: .8rem .95rem; border-top: 1px solid var(--line); }
.onb-review-row:first-child { border-top: 0; }
.onb-review-row dt { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.onb-review-row dd { font-size: .86rem; color: var(--ink); margin-top: .15rem; line-height: 1.5; overflow-wrap: anywhere; }
.onb-review-row button { margin-inline-start: auto; flex: none; font-size: .76rem; font-weight: 700; color: #0d9488; }
.onb-check { display: flex; align-items: center; gap: .45rem; font-size: .78rem; color: #94a3b8; }
.onb-check i { width: 1rem; height: 1rem; border-radius: 99px; border: 1px solid #cbd5e1; display: grid; place-items: center; flex: none; }
.onb-check.ok { color: #0f766e; }
.onb-check.ok i { border-color: #14b8a6; background: #14b8a6; color: #fff; }
.onb-foot { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem; border-top: 1px solid var(--line); background: #fbfcfe; border-radius: 0 0 20px 20px; }
.onb-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-weight: 800; font-size: .9rem; color: #fff;
  background: #0d9488; padding: .78rem 1.35rem; border-radius: 12px; box-shadow: 0 8px 18px -8px rgba(13,148,136,.6); transition: background .15s, transform .1s; }
.onb-btn:hover { background: #0f766e; }
.onb-btn:active { transform: translateY(1px); }
.onb-btn:disabled { opacity: .65; cursor: wait; }
.onb-btn-ghost { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .86rem; color: var(--ink-2); padding: .72rem .95rem; border-radius: 12px; border: 1px solid var(--line-strong); background: #fff; }
.onb-btn-ghost:hover { border-color: #94a3b8; color: var(--ink); }
.onb-link { font-size: .84rem; font-weight: 700; color: var(--ink-3); padding: .5rem .4rem; }
.onb-link:hover { color: var(--ink); }
.onb-alert { border-radius: 12px; background: #fff1f2; border: 1px solid #fecdd3; color: #be123c; font-size: .84rem; padding: .75rem .9rem; }
.onb-secure { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: .74rem; color: var(--ink-3); margin-top: 1.1rem; text-align: center; }
.onb-done-icon { width: 4rem; height: 4rem; border-radius: 999px; margin: 0 auto; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #1FE39A, #12C7BD 55%, #1AA6EA); box-shadow: 0 14px 30px -12px rgba(18,199,189,.7); }
@media (min-width: 640px) {
  .onb-top { padding: 1.25rem 2rem; }
  .onb-hero { padding: 3rem 2rem 6rem; }
  .onb-hero h1 { font-size: 2.1rem; }
  .onb-card-body { padding: 2rem 2.25rem 2.1rem; }
  .onb-steps { padding: 1.25rem 2.25rem; gap: .6rem; }
  .onb-step span { font-size: .76rem; }
  .onb-foot { padding: 1.1rem 2.25rem; }
}/* the top bar sits on the dark hero band */
.onb-hero .onb-top { padding: 0 0 1.75rem; max-width: 720px; }
.onb-hero .onb-brand b { color: #fff; }
.onb-hero .onb-brand small { color: #5eead4; }
.onb-hero .onb-lang { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #e2e8f0; }
.onb-hero .onb-lang:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.3); }
@media (min-width: 640px) { .onb-hero .onb-top { padding: 0 0 2.5rem; } }
/* ================================================================ phone layout
   Button groups that read fine in a desktop row turn ragged on a phone. Below 640px:
   .m-actions  a tidy 2-column grid of equal buttons (.m-full spans both,
               .m-first / .m-last pin the main and the destructive one)
   .m-row      a full-width row of equal-width buttons
   .m-stack    a banner whose .m-act moves under the text, full width
   .m-tabs     a single swipeable row of tabs instead of five wrapped lines */
@media (max-width: 639px) {
  .m-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; }
  .m-actions > .btn, .m-actions > * > .btn { width: 100%; justify-content: center; min-height: 2.5rem; white-space: normal; text-align: center; line-height: 1.2; }
  .m-actions > .m-full { grid-column: 1 / -1; }
  .m-actions > .m-first { order: -1; }
  .m-actions > .m-last { order: 99; }
  .m-row { width: 100%; display: flex; flex-wrap: wrap; gap: .5rem; margin-inline-start: 0 !important; }
  .m-row > .btn { flex: 1 1 0; justify-content: center; min-height: 2.5rem; }
  .m-stack { flex-wrap: wrap; }
  .m-stack > .m-act { order: 10; width: 100%; margin-inline-start: 0 !important; }
  .m-stack > .m-act.btn, .m-stack > .m-act > .btn { justify-content: center; }
  .m-stack > .m-act:not(.btn) { display: flex; gap: .5rem; }
  .m-stack > .m-act:not(.btn) > .btn { flex: 1 1 0; justify-content: center; }
  .m-tabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: -.25rem; padding-inline: .25rem; }
  .m-tabs::-webkit-scrollbar { display: none; }
  .m-tabs > .tab { flex: none; white-space: nowrap; }
}@media (max-width: 639px) {
  .m-actions .btn > span:has(> svg) { display: none; }
  .m-tabs { padding-block: 3px; -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  [dir="rtl"] .m-tabs { -webkit-mask-image: linear-gradient(to left, #000 82%, transparent); mask-image: linear-gradient(to left, #000 82%, transparent); }
}@media (max-width: 639px) {
  /* every tab strip in the app: one swipeable row, never wider than the screen */
  .flex:has(> .tab) { flex-wrap: nowrap !important; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-block: 3px; }
  .flex:has(> .tab)::-webkit-scrollbar { display: none; }
  .flex:has(> .tab) > .tab { flex: none; white-space: nowrap; }
  /* filters inside a phone grid fill their cell */
  .m-actions > .inp, .m-actions > .sel { width: 100% !important; }
}@media (max-width: 639px) { .flex:has(> .tab) { min-width: 0; } }

/* Phones: the pay-date strip wraps into tidy rows instead of pushing its buttons off the card,
   and the corner watermark (kept on screens wide enough to have a free corner) stops covering content. */
@media (max-width: 639px) {
  .m-paydate { flex-wrap: wrap; row-gap: .5rem; }
  .m-paydate > .inp { flex: 1 1 9rem; width: auto !important; }
  .m-paydate > .btn { flex: 1 1 auto; justify-content: center; }
  .wm-screen { display: none; }
}