/* ============================================================
   POINTERZ DS — design system for the Pointerz Group dashboard
   Monochrome foundation + one accent (pure orange).
   Typeface: Inter (self-hosted variable font).
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* accent — pure orange, used sparingly */
  --brand: #FF6A00;
  --brand-strong: #E85D00;      /* hover / pressed */
  --brand-deep: #C94F00;        /* text-on-light links */
  --brand-soft: #FFF1E7;        /* tint background */
  --brand-ring: rgba(255,106,0,.16);

  /* neutrals — one consistent ramp (zinc) */
  --ink: #18181B;
  --ink-2: #3F3F46;
  --muted: #71717A;
  --faint: #A1A1AA;
  --hair: #E8E8EA;              /* hairline borders */
  --hair-strong: #D9D9DE;
  --bg: #F7F7F8;                /* app canvas */
  --surface: #FFFFFF;
  --surface-2: #FAFAFA;         /* hover / zebra */
  --panel: #FCFCFD;             /* sidebar */

  /* semantic hues — used for color-graded stat cards, chips and status accents.
     Each hue ships as ink (text/stroke on light) + soft (tint background). */
  --blue: #0B6BCB;   --blue-soft: #E9F2FC;
  --green: #177245;  --green-soft: #E7F6EE;
  --violet: #6D28D9; --violet-soft: #EFEAFD;
  --amber: #B45309;  --amber-soft: #FCF0DC;
  --rose: #C0271C;   --rose-soft: #FDEAE8;
  --teal: #0F766E;   --teal-soft: #E4F5F2;

  /* legacy aliases kept for compatibility */
  --brand2: var(--brand);
  --line: var(--hair);

  /* geometry + elevation */
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px;
  --shadow-1: 0 1px 2px rgba(24,24,27,.05);
  --shadow-2: 0 1px 2px rgba(24,24,27,.05), 0 8px 24px rgba(24,24,27,.07);
  --shadow-3: 0 2px 6px rgba(24,24,27,.06), 0 24px 64px rgba(24,24,27,.16);
  --font: 'Inter', -apple-system, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-size:15px; }
::selection { background:var(--brand-soft); color:var(--brand-deep); }

h1 { font-size:1.45rem; font-weight:650; letter-spacing:-.02em; margin:0 0 .45rem; color:var(--ink); }
.lead { color:var(--ink-2); font-size:.95rem; }
.muted { color:var(--muted); font-size:13px; }

/* thin, quiet scrollbars */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--hair-strong); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:var(--faint); border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-track { background:transparent; }

:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }

/* ============ App shell ============ */
.app-shell { display:flex; min-height:100vh; }

.sidebar { width:236px; flex:0 0 236px; background:var(--panel); border-right:1px solid var(--hair);
  color:var(--ink-2); display:flex; flex-direction:column; padding:18px 12px 14px;
  height:100vh; position:sticky; top:0; }
.sidebar .brand { display:flex; align-items:center; gap:9px; font-weight:750; font-size:1.02rem;
  letter-spacing:-.02em; color:var(--ink); margin:2px 8px 18px; }
.sidebar .brand::before { content:''; width:12px; height:12px; border-radius:4px; flex:0 0 auto;
  background:linear-gradient(135deg,#FF8A3D,var(--brand)); box-shadow:0 1px 3px rgba(255,106,0,.4); }
.sidebar .brand span { color:var(--brand); margin-left:1px; font-weight:750; }
.sidebar nav { display:flex; flex-direction:column; gap:1px; overflow-y:auto; flex:1;
  margin:0 -4px; padding:0 4px 8px; }
.sidebar nav a { color:var(--ink-2); text-decoration:none; padding:7px 10px; border-radius:var(--r-sm);
  font-size:13px; font-weight:500; display:flex; align-items:center; gap:10px;
  border:1px solid transparent; transition:background .12s, color .12s; }
.sidebar nav a:hover { background:#F1F1F3; color:var(--ink); }
.sidebar nav a.active { background:var(--surface); color:var(--ink); font-weight:600;
  border-color:var(--hair); box-shadow:var(--shadow-1); }
.sidebar nav a .dot { width:5px; height:5px; border-radius:50%; background:var(--faint); flex:0 0 auto; transition:background .12s; }
.sidebar nav a.active .dot { background:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); }
.sidebar nav a .nav-ic { width:16px; height:16px; flex:0 0 auto; stroke:var(--faint); transition:stroke .12s; }
.sidebar nav a:hover .nav-ic { stroke:var(--ink-2); }
.sidebar nav a.active .nav-ic { stroke:var(--brand); }
.nav-group { color:var(--faint); font-size:.66rem; font-weight:650; text-transform:uppercase;
  letter-spacing:.09em; margin:18px 10px 5px; }

/* Dynamic nav management (Discord-style hover controls — super admin only) */
.nav-hover { display:flex; align-items:center; justify-content:space-between; }
.nav-item-wrap { position:relative; }
.nav-item-wrap > a { flex:1; }
.nav-tools { display:none; align-items:center; gap:2px; flex:0 0 auto; }
.nav-hover:hover .nav-tools { display:inline-flex; }
.nav-item-wrap .nav-tools { position:absolute; right:6px; top:50%; transform:translateY(-50%); }
.nav-tool { border:none; background:transparent; color:var(--faint); font-size:.78rem; line-height:1;
  width:20px; height:20px; border-radius:5px; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; justify-content:center; transition:background .12s, color .12s; }
.nav-tool:hover { background:var(--brand-soft); color:var(--brand); }
.nav-add-cat { margin:16px 10px 4px; padding:6px 10px; border:1px dashed var(--hair); background:transparent;
  color:var(--muted); font-size:.74rem; font-weight:600; border-radius:var(--r-sm); cursor:pointer;
  transition:border-color .12s, color .12s; text-align:left; }
.nav-add-cat:hover { border-color:var(--brand); color:var(--brand); }
.btn-ghost.danger { color:#C81E1E; border-color:#F3C5C5; }

/* Flex column + gap owns the spacing here, so foot rows can't collide however many there are
   (an <a> is inline: width/vertical-margin silently do nothing on it, which is what crammed the
   two-factor link into the sign-out button). */
.sidebar-foot { margin-top:auto; padding:10px 4px 0; border-top:1px solid var(--hair);
  display:flex; flex-direction:column; gap:6px; }
.who { display:flex; align-items:center; gap:10px; padding:6px 6px 4px; }
.who .avatar { width:30px; height:30px; font-size:.68rem; }
.who-wrap { display:flex; flex-direction:column; min-width:0; }
.who-name { color:var(--ink); font-weight:600; font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.who-co { color:var(--muted); font-size:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* A quiet settings row — deliberately NOT .logout, so the destructive action stays the only button. */
.foot-link { display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box;
  padding:7px 9px; border-radius:var(--r-sm); color:var(--muted); text-decoration:none;
  font-size:.78rem; font-weight:550; transition:background .12s, color .12s; }
.foot-link:hover { background:#F1F1F3; color:var(--ink); }
.foot-link .nav-ic { width:15px; height:15px; flex:0 0 auto; stroke:var(--faint); transition:stroke .12s; }
.foot-link:hover .nav-ic { stroke:var(--ink-2); }
.logout { display:block; width:100%; box-sizing:border-box; text-align:center;
  background:transparent; border:1px solid var(--hair-strong); color:var(--ink-2);
  padding:7px; border-radius:var(--r-sm); cursor:pointer; font-size:.8rem; font-weight:550; font-family:var(--font);
  transition:background .12s, color .12s, border-color .12s; }
.logout:hover { background:var(--surface); color:var(--ink); border-color:var(--faint); }

main { flex:1; overflow:auto; min-width:0; }
.content { padding:24px 38px 44px; max-width:1320px; }

/* ============ Cards / KPIs ============ */
.cards { display:flex; gap:14px; margin-top:18px; flex-wrap:wrap; }
.card { background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:16px 18px; min-width:180px; box-shadow:var(--shadow-1); }
.card-k { color:var(--muted); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.card-v { font-size:1.15rem; font-weight:700; margin-top:4px; color:var(--ink); letter-spacing:-.01em; }

.kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(176px,1fr)); gap:12px; margin:18px 0; }
.kpi { text-align:left; padding:18px 20px; background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--r-lg); box-shadow:var(--shadow-1); cursor:default; font:inherit; }
button.kpi { cursor:pointer; transition:box-shadow .15s, transform .06s, border-color .15s; }
button.kpi:hover { box-shadow:var(--shadow-2); border-color:var(--hair-strong); }
button.kpi:active { transform:translateY(1px); }
.kpi-v { font-size:30px; font-weight:700; color:var(--ink); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.kpi-k { margin-top:8px; font-size:12.5px; color:var(--muted); font-weight:500; }
.kpi.alert .kpi-v { color:#D92D20; }
.kpi.warn .kpi-v { color:var(--brand-strong); }
.kpi.ok .kpi-v { color:#177245; }

/* KPI v2 — icon chip + hover affordance (dashboard + ops overview) */
.kpi { display:flex; align-items:center; gap:14px; position:relative; }
.kpi-ic { width:40px; height:40px; border-radius:11px; background:var(--brand-soft);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.kpi-ic .nav-ic { width:19px; height:19px; stroke:var(--brand); }
.kpi.neutral .kpi-ic { background:#F1F1F3; } .kpi.neutral .kpi-ic .nav-ic { stroke:var(--ink-2); }
.kpi.alert .kpi-ic { background:#FEE9E7; } .kpi.alert .kpi-ic .nav-ic { stroke:#D92D20; }
.kpi.ok .kpi-ic { background:#E7F6EE; } .kpi.ok .kpi-ic .nav-ic { stroke:#177245; }
.kpi-body { display:flex; flex-direction:column; gap:6px; min-width:0; }
.kpi-body .kpi-k { margin-top:0; }
.kpi-go { position:absolute; right:16px; top:50%; transform:translateY(-50%) translateX(-4px);
  color:var(--brand); font-weight:650; font-size:15px; opacity:0; transition:opacity .15s, transform .15s; }
button.kpi:hover .kpi-go { opacity:1; transform:translateY(-50%) translateX(0); }

/* Panel header v2 — title + context sub-line + right-side meta (delta chip / total) */
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.panel-head h2 { margin:0; }
.panel-sub { display:block; margin-top:3px; font-size:12px; font-weight:500; color:var(--faint); }
.delta { display:inline-flex; align-items:center; gap:4px; padding:3.5px 10px; border-radius:999px;
  font-size:11.5px; font-weight:650; white-space:nowrap; font-variant-numeric:tabular-nums; }
.delta.up { background:#E7F6EE; color:#177245; }
.delta.down { background:#FEE9E7; color:#C0271C; }
.delta.flat { background:#F4F4F5; color:var(--muted); }

/* Iconized mini-bar rows + ranked list (dashboard side panels) */
.bar-row.has-ic { grid-template-columns:26px 104px 1fr 32px; }
.bar-ic { width:26px; height:26px; border-radius:8px; background:#F4F4F5;
  display:flex; align-items:center; justify-content:center; }
.bar-ic .nav-ic { width:14px; height:14px; stroke:var(--muted); }
.rank { width:23px; height:23px; border-radius:8px; background:#F4F4F5; color:var(--muted);
  font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.rank.r-1 { background:var(--brand); color:#fff; box-shadow:0 1px 3px rgba(255,106,0,.35); }
.rank.r-2 { background:var(--brand-soft); color:var(--brand-deep); }
.rank.r-3 { background:#EEEEF0; color:var(--ink-2); }
.bar-row.has-rank { grid-template-columns:23px minmax(0,104px) 1fr 32px; }

/* Recent-activity feed: clickable rows */
.feed tbody tr { transition:background .1s; }
.feed.clickable tbody tr:hover { background:#FAFAFA; cursor:pointer; }

/* Ops overview: iconized module table + closure ratio */
.ov-modules .nav-ic { width:15px; height:15px; stroke:var(--muted); vertical-align:-2.5px; margin-right:9px; }
.ov-modrow:hover .nav-ic { stroke:var(--brand); }
.ratio { display:flex; align-items:center; gap:8px; min-width:130px; }
.ratio-track { flex:1; height:6px; border-radius:5px; background:#F0F0F1; overflow:hidden; }
.ratio-fill { display:block; height:100%; background:linear-gradient(90deg,#2FB56C,#177245); border-radius:5px; }
.ratio-num { font-size:11.5px; color:var(--muted); font-weight:600; min-width:36px; text-align:right; font-variant-numeric:tabular-nums; }
.ov-modrow .go { opacity:0; color:var(--brand); font-weight:650; transition:opacity .12s; }
.ov-modrow:hover .go { opacity:1; }

.stat-card { flex:1; min-width:180px; padding:18px 20px; background:var(--surface);
  border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--shadow-1); }
.stat-label { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:600; }
.stat-value { font-size:22px; font-weight:700; color:var(--ink); margin-top:6px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.client-cards { display:flex; gap:14px; margin:18px 0; flex-wrap:wrap; }
.panel { padding:20px 22px; background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--shadow-1); }
.panel h2 { margin:0 0 12px; font-size:15px; font-weight:650; letter-spacing:-.01em; }
.branch-list { list-style:none; padding:0; margin:0 0 14px; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; }
.branch-list li { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--surface-2);
  border:1px solid var(--hair); border-radius:var(--r-sm); font-size:13.5px; }

/* ============ Tables ============ */
.grid { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--hair);
  border-radius:12px; overflow:hidden; margin-top:12px; }
.grid th { text-align:left; background:var(--surface); color:var(--muted); font-size:.68rem; font-weight:650;
  text-transform:uppercase; letter-spacing:.07em; padding:11px 16px; border-bottom:1px solid var(--hair-strong); }
/* Data cells stay on a single line (the .dg-scroll wrapper scrolls horizontally when needed) — this
   keeps rows one line tall regardless of filter, so long customer/location names and dates never wrap
   into ugly one-word-per-line stacks. Long free-text columns opt into ellipsis via .truncate. */
.grid td { padding:11px 16px; border-bottom:1px solid #F1F1F3; font-size:.88rem; color:var(--ink-2);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.grid td:first-child { color:var(--ink); }
.grid tr:last-child td { border-bottom:none; }
.grid tbody tr { transition:background .1s; }
.grid tr:hover td { background:var(--surface-2); }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.truncate { max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-actions { text-align:right; white-space:nowrap; }
/* Date-over-time cell: full date on its own line, time muted on the next (each never wraps mid-value). */
.dt-cell .dt-date { display:block; white-space:nowrap; }
.dt-cell .dt-time { display:block; white-space:nowrap; color:var(--muted); font-size:.78rem; margin-top:1px; }

.badge { font-size:.72rem; padding:3px 10px; border-radius:999px; font-weight:600; letter-spacing:.01em; }
.badge.on { background:#E8F6EE; color:#177245; }
.badge.off { background:#F4F4F5; color:var(--muted); }
.pill { font-size:.72rem; padding:3px 10px; border-radius:999px; font-weight:600; text-transform:capitalize; }
.pill.low { background:#F4F4F5; color:var(--ink-2); }
.pill.medium { background:var(--brand-soft); color:var(--brand-deep); }
.pill.high { background:#FEE9E7; color:#C0271C; }

/* ============ Buttons / inputs ============ */
.btn-primary { background:var(--brand); color:#fff; border:none; padding:9px 18px; border-radius:var(--r-md);
  font-weight:600; cursor:pointer; font-size:.88rem; font-family:var(--font); letter-spacing:.01em;
  box-shadow:0 1px 2px rgba(255,106,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
  transition:background .12s, transform .06s, box-shadow .15s; }
.btn-primary:hover { background:var(--brand-strong); box-shadow:0 3px 10px rgba(255,106,0,.35), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-primary:active { transform:translateY(1px); }
.btn-ghost { background:var(--surface); color:var(--ink-2); border:1px solid var(--hair-strong);
  padding:9px 16px; border-radius:var(--r-md); font-weight:550; cursor:pointer; font-size:.88rem; font-family:var(--font);
  transition:background .12s, color .12s, border-color .12s; }
.btn-ghost:hover { background:var(--surface-2); color:var(--ink); border-color:var(--faint); }
.btn-ghost:disabled { opacity:.4; cursor:not-allowed; }
.btn-ghost:disabled:hover { background:var(--surface); color:var(--ink-2); border-color:var(--hair-strong); }
a.btn-ghost { text-decoration:none; display:inline-flex; align-items:center; }
.link { background:none; border:none; color:var(--brand-deep); cursor:pointer; font-size:.84rem;
  padding:2px 7px; font-weight:600; font-family:var(--font); border-radius:5px; }
.link:hover { text-decoration:underline; }
.link.danger { color:#D92D20; }

.input, .search { width:100%; padding:9px 12px; border:1px solid var(--hair-strong); border-radius:var(--r-md);
  font-size:.88rem; font-family:var(--font); color:var(--ink); background:var(--surface);
  transition:border-color .12s, box-shadow .12s; }
.input::placeholder, .search::placeholder { color:var(--faint); }
.input:focus, .search:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); }
.search { flex:1; max-width:340px; }
.chk { display:inline-flex; align-items:center; gap:7px; color:var(--ink-2); font-size:.84rem; }
.chk input { accent-color:var(--brand); }
input[type=checkbox], input[type=radio] { accent-color:var(--brand); }

.toolbar { display:flex; align-items:center; gap:16px; margin:14px 0 4px; }
.form-card { background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:22px 24px; max-width:520px; margin-top:14px; box-shadow:var(--shadow-1); }
.field { margin-bottom:16px; }
.field > label { display:block; font-size:.76rem; font-weight:600; color:var(--ink-2); margin-bottom:6px;
  letter-spacing:.01em; }
.field-hint { margin:6px 0 0; font-size:.76rem; color:var(--muted); line-height:1.45; }
.input-with-btn { display:flex; gap:8px; align-items:stretch; }
.input-with-btn .input { flex:1; }
.input-with-btn .btn-ghost { white-space:nowrap; }
.form-actions { display:flex; gap:10px; margin-top:8px; }
.drawer-sep { border:none; border-top:1px solid var(--hair); margin:14px 0; }

/* ============ Page furniture ============ */
.crumbs { font-size:12.5px; color:var(--faint); margin-bottom:6px; }
.crumbs a { color:var(--muted); text-decoration:none; font-weight:500; }
.crumbs a:hover { color:var(--brand-deep); }
.crumbs span { margin:0 7px; color:var(--hair-strong); }
.crumbs strong { color:var(--ink-2); font-weight:600; }
.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; gap:16px; }
.head-actions { display:flex; align-items:center; gap:10px; }
.head-actions .btn-ghost, .head-actions .btn-primary { white-space:nowrap; }
.empty-note { margin:24px 0; padding:18px 20px; background:var(--surface-2); border:1px dashed var(--hair-strong);
  border-radius:var(--r-md); color:var(--muted); font-size:.9rem; }
.warn-note { margin:10px 0; padding:10px 14px; background:var(--brand-soft); border:1px solid #FFD9BC;
  border-radius:var(--r-sm); color:var(--brand-deep); font-size:13px; }
.scope-tag { margin-left:12px; padding:4px 12px; background:var(--brand-soft); border:1px solid #FFD9BC;
  border-radius:999px; color:var(--brand-deep); font-size:12.5px; font-weight:600; }

.dimbar { display:flex; align-items:center; gap:12px; margin:14px 0 4px; }
.dimbar > label { font-size:12.5px; color:var(--muted); font-weight:600; }
.seg { display:inline-flex; background:#F0F0F1; border-radius:var(--r-md); padding:3px; gap:2px; }
.seg-btn { border:none; background:none; padding:6px 14px; border-radius:7px; font-size:13px; cursor:pointer;
  color:var(--muted); font-family:var(--font); font-weight:500; transition:color .12s, background .12s; }
.seg-btn:hover { color:var(--ink); }
.seg-btn.on { background:var(--surface); color:var(--ink); font-weight:600; box-shadow:var(--shadow-1); }
.dimbar .stack-toggle { margin-left:8px; font-weight:400; }

/* ============ Auth ============ */
.auth-shell { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg);
  background-image:radial-gradient(48rem 26rem at 50% -8rem, rgba(255,106,0,.09), transparent),
                   radial-gradient(36rem 22rem at 88% 108%, rgba(255,106,0,.05), transparent); }
.auth-card { background:var(--surface); border:1px solid var(--hair); border-radius:18px; padding:36px 34px;
  width:372px; box-shadow:var(--shadow-3); }
.auth-brand { display:flex; align-items:center; gap:10px; font-weight:750; font-size:1.15rem;
  letter-spacing:-.02em; color:var(--ink); margin-bottom:22px; }
.auth-brand::before { content:''; width:14px; height:14px; border-radius:5px;
  background:linear-gradient(135deg,#FF8A3D,var(--brand)); box-shadow:0 1px 4px rgba(255,106,0,.45); }
.auth-brand span { color:var(--brand); }
.auth-card h1 { font-size:1.3rem; margin:0 0 4px; letter-spacing:-.02em; }
.auth-sub { color:var(--muted); font-size:.85rem; margin:0 0 18px; }
.auth-card label { display:block; font-size:.76rem; color:var(--ink-2); margin:14px 0 6px; font-weight:600; }
.auth-card input { width:100%; padding:10px 13px; border:1px solid var(--hair-strong); border-radius:var(--r-md);
  font-size:.92rem; font-family:var(--font); background:var(--surface); transition:border-color .12s, box-shadow .12s; }
.auth-card input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); }
.auth-card button { width:100%; margin-top:22px; padding:11px; background:var(--brand); color:#fff; border:none;
  border-radius:var(--r-md); font-weight:600; font-size:.92rem; cursor:pointer; font-family:var(--font);
  box-shadow:0 1px 2px rgba(255,106,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
  transition:background .12s, transform .06s, box-shadow .15s; }
.auth-card button:hover { background:var(--brand-strong); box-shadow:0 4px 14px rgba(255,106,0,.35); }
.auth-card button:active { transform:translateY(1px); }
.auth-error { background:#FEE9E7; color:#C0271C; padding:9px 12px; border-radius:var(--r-sm); font-size:.83rem; margin-bottom:6px; }
.auth-hint { color:var(--faint); font-size:.76rem; text-align:center; margin-top:18px; }

/* ---- Login: Staff / Client segmented toggle (CSS-only, no JS) ---- */
.auth-seg-in { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.auth-seg { display:flex; gap:4px; margin:2px 0 20px; padding:4px; background:var(--panel);
  border:1px solid var(--hair); border-radius:12px; }
.auth-seg label { flex:1; margin:0; padding:9px 0; text-align:center; font-size:.84rem; font-weight:600;
  color:var(--muted); border-radius:9px; cursor:pointer; transition:background .15s, color .15s, box-shadow .15s; }
#seg-staff:checked ~ .auth-seg label[for="seg-staff"],
#seg-client:checked ~ .auth-seg label[for="seg-client"] {
  background:var(--surface); color:var(--brand); box-shadow:var(--shadow-1); }
.auth-note { margin:14px 0 0; font-size:.78rem; color:var(--muted); text-align:center; }
.auth-note strong { color:var(--ink-2); font-weight:650; white-space:nowrap; }
.note-client { display:none; }
#seg-client:checked ~ .note-client { display:block; }
#seg-client:checked ~ .note-staff { display:none; }
.photo-error { color:#C0271C; font-size:.8rem; margin-top:6px; }

/* ============ Dashboard ============ */
.dash-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:14px; align-items:start; }
@media (max-width:900px){ .dash-grid { grid-template-columns:1fr; } }
.dash-col { display:flex; flex-direction:column; gap:14px; }
.bars { display:flex; flex-direction:column; gap:12px; margin-top:6px; }
.bar-row { display:grid; grid-template-columns:110px 1fr 32px; align-items:center; gap:10px; }
.bar-label { font-size:13px; color:var(--ink-2); }
.bar-track { height:8px; background:#F0F0F1; border-radius:6px; overflow:hidden; }
.bar-fill { display:block; height:100%; background:linear-gradient(90deg,#FF8A3D,var(--brand)); border-radius:6px; min-width:2px; }
.bar-fill.warn-fill { background:linear-gradient(90deg,#52525B,var(--ink-2)); }
.bar-num { font-size:13px; font-weight:600; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }

.colchart { display:flex; align-items:flex-end; gap:18px; height:170px; padding:14px 6px 0; }
.col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.col-num { font-size:12px; font-weight:700; color:var(--ink); margin-bottom:4px; font-variant-numeric:tabular-nums; }
.col-bar { width:100%; max-width:54px; background:linear-gradient(180deg,#FF8A3D,var(--brand)); border-radius:6px 6px 0 0; min-height:2px; }
.col-label { margin-top:8px; font-size:12px; color:var(--muted); }

.feed { width:100%; border-collapse:collapse; }
.feed td { padding:9px 8px; border-bottom:1px solid #F1F1F3; font-size:13px; vertical-align:middle; }
.feed tr:last-child td { border-bottom:none; }
.feed-cust { font-weight:600; color:var(--ink); white-space:nowrap; }
.feed-detail { color:var(--ink-2); max-width:280px; }
.feed-date { color:var(--faint); white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }
.type-pill { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:650; white-space:nowrap; }
.type-pill.t-incident { background:#FEE9E7; color:#C0271C; }
.type-pill.t-gap { background:var(--brand-soft); color:var(--brand-deep); }
.type-pill.t-pest { background:#EEEEF0; color:var(--ink-2); }
.type-pill.t-other { background:#F4F4F5; color:var(--muted); }

/* ============ SVG charts ============ */
.chartsvg { width:100%; height:auto; display:block; }
.c-grid { stroke:#F1F1F3; stroke-width:1; }
.c-axis { stroke:var(--hair-strong); stroke-width:1; }
.c-ylab { fill:var(--faint); font-size:11px; font-family:var(--font); }
.c-xlab { fill:var(--muted); font-size:11px; font-family:var(--font); }
.c-vlab { fill:var(--ink); font-size:11px; font-weight:650; font-family:var(--font); }
.c-bar rect { transition:opacity .12s; }
.c-bar:hover rect { opacity:.85; }
.c-line { fill:none; stroke:var(--brand); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.c-dot { fill:#fff; stroke:var(--brand); stroke-width:2.5; transition:r .12s; }
.c-dot:hover { r:5; }
.donut-wrap { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.donutsvg { width:190px; height:190px; flex:0 0 auto; }
.donut-total { fill:var(--ink); font-size:30px; font-weight:750; font-family:var(--font); letter-spacing:-.02em; }
.donut-cap { fill:var(--faint); font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; font-family:var(--font); }
.donut-legend { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.donut-legend li { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); }
.donut-legend strong { margin-left:auto; color:var(--ink); font-variant-numeric:tabular-nums; }
.dot-sq { width:11px; height:11px; border-radius:3.5px; flex:0 0 auto; }

/* ============ Ops summary strip ============ */
.ops-summary { display:flex; gap:12px; margin:4px 0 14px; flex-wrap:wrap; }
.ops-kpi { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:112px;
  padding:12px 16px; border:1px solid var(--hair); border-radius:12px; background:var(--surface); cursor:pointer;
  font-family:var(--font); box-shadow:var(--shadow-1); transition:box-shadow .12s, border-color .12s; }
.ops-kpi:hover { box-shadow:var(--shadow-2); border-color:var(--hair-strong); }
.ops-kpi.on { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); }
.ops-kpi-num { font-size:1.5rem; font-weight:700; color:var(--ink); line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ops-kpi-lab { font-size:.72rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.ops-kpi.open .ops-kpi-num { color:var(--brand-strong); }
.ops-kpi.closed .ops-kpi-num { color:#177245; }
.ops-kpi.high .ops-kpi-num { color:#D92D20; }

/* ============ Operations overview ============ */
.ov-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:14px; margin-bottom:16px; }
@media (max-width:900px){ .ov-grid { grid-template-columns:1fr; } }
.ov-modules { width:100%; }
.ov-modrow { cursor:pointer; }
.ov-modrow:hover { background:#FFF8F2; }

/* ============ DataGrid ============ */
.dg { }
.dg-toolbar { display:flex; align-items:center; gap:16px; margin:14px 0 10px; }
.dg-toolbar-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
.dg-state { background:var(--surface); border:1px solid var(--hair); border-radius:12px; padding:44px 30px;
  text-align:center; box-shadow:var(--shadow-1); }
.dg-scroll { overflow-x:auto; border-radius:12px; box-shadow:var(--shadow-1); }
.dg-foot { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.pager { display:flex; align-items:center; gap:10px; }
.pg { background:var(--surface); border:1px solid var(--hair-strong); border-radius:var(--r-sm);
  padding:6px 12px; cursor:pointer; font-size:.82rem; color:var(--ink-2); font-family:var(--font); font-weight:500;
  transition:background .12s, border-color .12s; }
.pg:hover:not(:disabled) { background:var(--surface-2); border-color:var(--faint); }
.pg:disabled { opacity:.4; cursor:default; }
.pg-info { font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ============ EntityDrawer ============ */
.drawer-overlay { position:fixed; inset:0; background:rgba(24,24,27,.32); backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px); z-index:40; }
.drawer { position:fixed; top:0; right:0; height:100vh; width:440px; max-width:92vw; background:var(--surface);
  box-shadow:var(--shadow-3); z-index:50; transform:translateX(105%);
  transition:transform .25s cubic-bezier(.32,.72,.35,1); display:flex; flex-direction:column;
  border-left:1px solid var(--hair); border-radius:16px 0 0 16px; }
.drawer.open { transform:translateX(0); }
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--hair); }
.drawer-head h2 { margin:0; font-size:1.05rem; font-weight:650; color:var(--ink); letter-spacing:-.01em; }
.drawer-x { background:none; border:none; font-size:1.6rem; line-height:1; color:var(--faint); cursor:pointer;
  padding:0 4px; border-radius:6px; transition:color .12s; }
.drawer-x:hover { color:var(--ink); }
.drawer-body { padding:20px 22px; overflow-y:auto; flex:1; }

/* ============ FilterBar ============ */
.filterbar { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; background:var(--surface);
  border:1px solid var(--hair); border-radius:12px; padding:14px 16px; margin:14px 0; box-shadow:var(--shadow-1); }
.fb-field { display:flex; flex-direction:column; gap:5px; }
.fb-field > label { font-size:.66rem; font-weight:650; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
.fb-field .input { min-width:155px; padding:8px 10px; }
.fb-num { width:90px; min-width:90px; }
.fb-actions { margin-left:auto; }

/* ============ Photos ============ */
.photo-cell { display:inline-flex; align-items:center; gap:3px; padding:2px; background:none; border:none; cursor:pointer; }
.photo-cell .thumb { width:30px; height:30px; object-fit:cover; border-radius:6px; border:1px solid var(--hair); }
.photo-cell .thumb.pv-broken { display:none; }
.photo-count { font-size:11px; font-weight:700; color:var(--brand-deep); padding:1px 7px; background:var(--brand-soft); border-radius:999px; font-variant-numeric:tabular-nums; }
.pv-overlay { position:fixed; inset:0; background:rgba(24,24,27,.5); backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:1000; padding:24px; }
.pv-box { background:var(--surface); border-radius:16px; max-width:860px; width:100%; max-height:86vh; overflow:auto; box-shadow:var(--shadow-3); }
.pv-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  border-bottom:1px solid var(--hair); font-weight:650; position:sticky; top:0; background:var(--surface); z-index:1; }
.pv-x { background:none; border:none; font-size:24px; line-height:1; cursor:pointer; color:var(--faint); }
.pv-x:hover { color:var(--ink); }
.pv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; padding:18px; }
.pv-item img { width:100%; height:150px; object-fit:cover; border-radius:10px; border:1px solid var(--hair); }
.pv-item img.pv-broken { object-fit:contain; opacity:.4; padding:30px; }
.photo-upload .photos { display:flex; flex-wrap:wrap; gap:10px; }
.photo { position:relative; width:74px; height:74px; border-radius:10px; overflow:hidden; border:1px solid var(--hair); }
.photo img { width:100%; height:100%; object-fit:cover; }
.photo-x { position:absolute; top:3px; right:3px; background:rgba(24,24,27,.6); color:#fff; border:none;
  border-radius:50%; width:20px; height:20px; line-height:1; cursor:pointer; font-size:.9rem; backdrop-filter:blur(2px); }
.photo-add { width:74px; height:74px; border:1.5px dashed var(--hair-strong); border-radius:10px; display:flex;
  align-items:center; justify-content:center; cursor:pointer; color:var(--muted); font-size:.7rem; text-align:center;
  transition:border-color .12s, color .12s, background .12s; }
.photo-add:hover { border-color:var(--brand); color:var(--brand-deep); background:var(--brand-soft); }
.photo-add input { display:none; }

/* ============ User management / permissions ============ */
.page-sub { margin:2px 0 16px; color:var(--muted); font-size:.86rem; line-height:1.55; max-width:820px; }
.page-sub .pill { text-transform:none; }
.ok-note { margin:10px 0; padding:10px 14px; background:#E8F6EE; border:1px solid #BBE6CC;
  border-radius:var(--r-sm); color:#177245; font-size:13px; font-weight:550; }

/* Role pills */
.pill.role-superadmin { background:#EDE9FE; color:#6D28D9; }
.pill.role-admin      { background:var(--brand-soft); color:var(--brand-deep); }
.pill.role-supervisor { background:#D1FAE5; color:#047857; }
.pill.role-pco        { background:#E0F2FE; color:#0369A1; }
.pill.role-client     { background:#F4F4F5; color:var(--ink-2); }

/* ---- Chat / Messages ------------------------------------------------------ */
.chat { display:grid; grid-template-columns:320px 1fr; gap:14px; height:calc(100vh - 210px); min-height:440px; }
.chat-side { display:flex; flex-direction:column; gap:6px; background:#fff; border:1px solid var(--line,#ECECEF);
    border-radius:16px; padding:10px; overflow-y:auto; }
.chat-new { width:100%; justify-content:center; margin-bottom:4px; }
.chat-hint { padding:10px 8px; font-size:13px; }
.chat-thread { display:flex; gap:10px; align-items:center; text-align:left; width:100%; border:0; background:transparent;
    border-radius:12px; padding:9px 10px; cursor:pointer; }
.chat-thread:hover { background:#F7F7F8; }
.chat-thread.on { background:var(--brand-soft); }
.chat-thread-body { flex:1; min-width:0; }
.chat-thread-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.chat-thread-name { font-weight:600; color:var(--ink); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-thread-time { color:var(--muted,#9A9AA2); font-size:11.5px; flex:none; }
.chat-thread-sub { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:1px; }
.chat-preview { color:var(--ink-2); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.chat-unread { flex:none; background:var(--brand); color:#fff; font-size:11px; font-weight:700; min-width:18px; height:18px;
    border-radius:9px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; }

.chat-main { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line,#ECECEF);
    border-radius:16px; padding:14px; overflow:hidden; }
.chat-head { display:flex; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--line,#ECECEF); }
.chat-head strong { font-size:15px; color:var(--ink); }
.chat-head .link { margin-left:auto; }
.chat-scroll { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:14px 4px; }
.chat-bubble { max-width:74%; align-self:flex-start; background:#F4F4F6; border-radius:14px 14px 14px 4px;
    padding:8px 12px; display:flex; flex-direction:column; gap:2px; }
.chat-bubble.mine { align-self:flex-end; background:var(--brand-soft); border-radius:14px 14px 4px 14px; }
.chat-from { font-size:11.5px; font-weight:700; color:var(--brand-deep); }
.chat-text { color:var(--ink); font-size:14px; white-space:pre-wrap; word-break:break-word; }
.chat-time { font-size:10.5px; color:var(--muted,#9A9AA2); align-self:flex-end; }
.chat-composer { display:flex; gap:8px; padding-top:10px; border-top:1px solid var(--line,#ECECEF); }
.chat-composer .input { flex:1; }
.chat-empty { flex:1; display:flex; align-items:center; justify-content:center; text-align:center; }
.chat-dir-search { margin:10px 0; }
.chat-dir-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:transparent;
    border-radius:12px; padding:9px 10px; cursor:pointer; }
.chat-dir-row:hover { background:#F7F7F8; }
.chat-dir-name { font-weight:600; color:var(--ink); font-size:14px; }
.chat-bcast { width:100%; margin:8px 0; resize:vertical; }
@media (max-width:820px) { .chat { grid-template-columns:1fr; height:auto; } .chat-side { max-height:240px; } }

/* Username input with a fixed company-suffix chip */
.input-suffix { display:flex; align-items:stretch; }
.input-suffix .input { border-top-right-radius:0; border-bottom-right-radius:0; }
.input-suffix .suffix { display:inline-flex; align-items:center; padding:0 12px; font-size:.84rem; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--hair-strong); border-left:none;
  border-top-right-radius:var(--r-md); border-bottom-right-radius:var(--r-md); }

/* Permission grid */
.perm-grid { margin-top:8px; }
.perm-grid th:not(.perm-sec) { text-align:center; width:78px; }
.perm-grid td:not(.perm-sec-name):not(:first-child) { text-align:center; }
.perm-grid input[type=checkbox] { width:16px; height:16px; cursor:pointer; }
.perm-grid input[type=checkbox]:disabled { cursor:not-allowed; opacity:.35; }
.perm-cat td { background:var(--surface-2); font-weight:650; color:var(--ink); border-top:1px solid var(--hair-strong); }
.perm-cat .perm-all { font-weight:500; color:var(--faint); font-size:.78rem; margin-left:6px; }
.perm-sec-name { padding-left:28px !important; color:var(--ink-2); }

/* Customer-access checklist */
.scope-summary { margin:6px 0 14px; }
.cust-checklist { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:8px 18px;
  border:1px solid var(--hair); border-radius:var(--r-lg); padding:16px 18px; background:var(--surface); }
.cust-item { display:flex; align-items:center; gap:9px; font-size:.88rem; color:var(--ink-2); cursor:pointer;
  padding:5px 6px; border-radius:var(--r-sm); }
.cust-item:hover { background:var(--surface-2); }
.cust-item input { width:16px; height:16px; cursor:pointer; }

/* Access-denied guard panel */
.access-denied { margin:40px auto; max-width:460px; text-align:center; padding:32px 28px; background:var(--surface);
  border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--shadow-1); }
.access-denied h2 { margin:0 0 8px; font-size:1.1rem; color:var(--ink); }
.access-denied p { margin:0; color:var(--muted); font-size:.9rem; line-height:1.55; }
.access-denied .lock { font-size:1.8rem; }

/* Activity Management (AMS) */
.wo-pill { display:inline-block; padding:2px 10px; border-radius:999px; font-size:.75rem; font-weight:600; white-space:nowrap; }
.wo-0 { background:#F4F4F5; color:#52525B; }                       /* scheduled */
.wo-1 { background:var(--brand-soft); color:var(--brand-deep); }   /* in progress */
.wo-2 { background:#E8F7EE; color:#15803D; }                       /* completed */
.wo-3 { background:#E6F6F4; color:#0F766E; }                       /* completed late */
.wo-4 { background:#FEF3C7; color:#B45309; }                       /* partial */
.wo-5 { background:#FEE2E2; color:#B91C1C; }                       /* missed */
.wo-6 { background:#EEF2FF; color:#4338CA; }                       /* waived / exception */
.wo-7 { background:#F4F4F5; color:#71717A; }                       /* rescheduled */
.danger-text { color:#B91C1C; font-weight:600; }
.board-date { display:flex; gap:8px; align-items:center; }
.board-date .input { width:auto; }
.wo-filters { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin:0 0 14px; padding:12px 14px;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-md); }
.wo-filters label { display:flex; flex-direction:column; gap:4px; font-size:.78rem; color:var(--muted); }
.wo-filters label.chk { flex-direction:row; align-items:center; color:var(--ink-2); }
.wo-filters .input { width:auto; min-width:130px; }
.wo-meta { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:10px 22px; margin:0 0 18px;
  padding:14px 16px; background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-md); }
.wo-meta > div { display:flex; flex-direction:column; gap:2px; }
.wo-meta .muted { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }
.wo-meta strong { font-weight:600; font-size:.9rem; }
.wo-h2 { margin:22px 0 10px; font-size:1.02rem; }
.dow-row { display:flex; flex-wrap:wrap; gap:10px; }
.time-pair { display:flex; gap:8px; align-items:center; }
.time-pair .input { width:auto; }
.preview-h { margin:14px 0 8px; font-size:.95rem; }
.preview-grid { font-size:.82rem; }
.op-photos { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 4px; }
.op-thumb { width:84px; height:84px; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--hair); }

/* ============================================================
   POINTERZ DS v3 — enterprise layer
   Color-graded stat cards, topbar, hero, avatars, team cards,
   service pulse, 7-day strip, progress rings, skeletons.
   ============================================================ */

/* ---- Topbar (sticky product chrome above every page) ---- */
.topbar { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px;
  padding:9px 38px; background:rgba(255,255,255,.86); backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4); border-bottom:1px solid var(--hair); min-height:54px; }
.tb-date { font-size:.84rem; color:var(--muted); font-weight:550; letter-spacing:.01em; }
.tb-date strong { color:var(--ink-2); font-weight:650; }
.tb-spacer { flex:1; }
.tb-chip { display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:600;
  color:var(--ink-2); text-decoration:none; padding:6px 12px; border-radius:999px;
  border:1px solid transparent; transition:background .12s, border-color .12s, color .12s; }
a.tb-chip:hover { background:var(--surface-2); border-color:var(--hair); color:var(--ink); }
.tb-chip .nav-ic { width:15px; height:15px; stroke:var(--muted); }
a.tb-chip:hover .nav-ic { stroke:var(--brand); }
.tb-chip .ring-wrap { flex:0 0 auto; }
.tb-badge { min-width:18px; height:18px; border-radius:999px; background:var(--brand); color:#fff;
  font-size:10.5px; font-weight:750; display:inline-flex; align-items:center; justify-content:center;
  padding:0 5px; box-shadow:0 1px 3px rgba(255,106,0,.4); font-variant-numeric:tabular-nums; }
.tb-sep { width:1px; height:22px; background:var(--hair); }
.tb-user { display:flex; align-items:center; gap:9px; padding:3px 4px; }
.tb-user-name { font-size:.8rem; font-weight:650; color:var(--ink); line-height:1.15; }
.tb-user-sub { font-size:.68rem; color:var(--muted); line-height:1.15; }
@media (max-width:900px){ .tb-hide-sm { display:none; } .topbar { padding:9px 18px; } }

/* ---- Initials avatar (deterministic hue via --av, set inline) ---- */
.avatar { --av:24; width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:750; font-size:.76rem; letter-spacing:.02em; user-select:none;
  color:hsl(var(--av) 55% 30%);
  background:linear-gradient(135deg, hsl(var(--av) 78% 93%), hsl(var(--av) 70% 84%));
  box-shadow:inset 0 0 0 1px hsl(var(--av) 55% 78% / .5); }
.avatar.lg { width:46px; height:46px; font-size:.98rem; }
.avatar.sm { width:29px; height:29px; font-size:.66rem; }

/* ---- Hero greeting (dashboard) ---- */
.hero { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin:6px 0 20px; flex-wrap:wrap; }
.hero h1 { font-size:1.62rem; margin:0; letter-spacing:-.03em; }
.hero h1 em { font-style:normal; background:linear-gradient(100deg, var(--brand) 20%, #FF9243);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-sub { margin-top:6px; color:var(--muted); font-size:.9rem; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.hero-sub .sep-dot { width:3px; height:3px; border-radius:50%; background:var(--hair-strong); }
.hero-actions { display:flex; gap:9px; flex-wrap:wrap; }
.qa { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--hair-strong); color:var(--ink-2); text-decoration:none;
  font-size:.82rem; font-weight:600; font-family:var(--font); cursor:pointer;
  transition:border-color .12s, color .12s, box-shadow .15s, background .12s; }
.qa:hover { color:var(--ink); border-color:var(--faint); box-shadow:var(--shadow-1); background:var(--surface-2); }
.qa .nav-ic { width:15px; height:15px; stroke:var(--muted); transition:stroke .12s; }
.qa:hover .nav-ic { stroke:var(--brand); }
.qa .tb-badge { margin:-2px -4px -2px 0; }

/* ---- KPI v3: color-graded stat cards (additive tint variants) ---- */
.kpi { overflow:hidden; }
.kpi .kpi-ic { transition:transform .18s cubic-bezier(.34,1.56,.64,1); }
button.kpi:hover .kpi-ic { transform:scale(1.06) rotate(-3deg); }
.kpi.tint-blue   { background:linear-gradient(130deg, var(--blue-soft) 0%,   var(--surface) 58%); }
.kpi.tint-green  { background:linear-gradient(130deg, var(--green-soft) 0%,  var(--surface) 58%); }
.kpi.tint-violet { background:linear-gradient(130deg, var(--violet-soft) 0%, var(--surface) 58%); }
.kpi.tint-amber  { background:linear-gradient(130deg, var(--amber-soft) 0%,  var(--surface) 58%); }
.kpi.tint-rose   { background:linear-gradient(130deg, var(--rose-soft) 0%,   var(--surface) 58%); }
.kpi.tint-teal   { background:linear-gradient(130deg, var(--teal-soft) 0%,   var(--surface) 58%); }
.kpi.tint-brand  { background:linear-gradient(130deg, var(--brand-soft) 0%,  var(--surface) 58%); }
.kpi.tint-blue .kpi-ic   { background:linear-gradient(135deg,#3D8FE0,var(--blue));   }
.kpi.tint-green .kpi-ic  { background:linear-gradient(135deg,#2FA265,var(--green));  }
.kpi.tint-violet .kpi-ic { background:linear-gradient(135deg,#8B5CF6,var(--violet)); }
.kpi.tint-amber .kpi-ic  { background:linear-gradient(135deg,#D98324,var(--amber));  }
.kpi.tint-rose .kpi-ic   { background:linear-gradient(135deg,#E04A3B,var(--rose));   }
.kpi.tint-teal .kpi-ic   { background:linear-gradient(135deg,#14A396,var(--teal));   }
.kpi.tint-brand .kpi-ic  { background:linear-gradient(135deg,#FF8A3D,var(--brand));  }
.kpi[class*=tint-] .kpi-ic { box-shadow:0 3px 8px rgba(24,24,27,.16), inset 0 1px 0 rgba(255,255,255,.25); }
.kpi[class*=tint-] .kpi-ic .nav-ic { stroke:#fff; }
.kpi-sub { font-size:11px; color:var(--faint); font-weight:550; margin-top:2px; }
.kpi-delta { position:absolute; top:12px; right:14px; }

/* ---- Progress ring (RingSvg) ---- */
.ring-wrap { position:relative; display:inline-flex; align-items:center; justify-content:center; }
.ring-svg { transform:rotate(-90deg); display:block; }
.ring-track { fill:none; stroke:#EDEDEF; }
.ring-fill { fill:none; stroke:var(--brand); stroke-linecap:round;
  transition:stroke-dashoffset .6s cubic-bezier(.22,1,.36,1); }
.ring-txt { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.05; }
.ring-v { font-weight:750; color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ring-k { color:var(--faint); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }

/* ---- Service pulse (period-switched delivery panel) ---- */
.pulse-hero { display:flex; align-items:center; gap:26px; margin:6px 0 16px; flex-wrap:wrap; }
.pulse-nums { display:flex; gap:26px; flex-wrap:wrap; }
.pnum { display:flex; flex-direction:column; gap:3px; min-width:74px; }
.pnum-v { font-size:23px; font-weight:750; color:var(--ink); letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.pnum-v small { font-size:13px; font-weight:600; color:var(--faint); letter-spacing:0; }
.pnum-k { font-size:10.5px; color:var(--muted); font-weight:650; text-transform:uppercase; letter-spacing:.06em; }
.pnum-v.ok { color:var(--green); } .pnum-v.warn { color:var(--brand-strong); } .pnum-v.bad { color:var(--rose); }
.pulse-sep { width:1px; align-self:stretch; background:var(--hair); }

/* ---- 7-day forward strip ---- */
.daystrip { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:8px; }
.day { display:flex; flex-direction:column; align-items:center; gap:5px; padding:11px 6px 12px;
  background:var(--surface); border:1px solid var(--hair); border-radius:12px; text-decoration:none;
  transition:border-color .12s, box-shadow .15s, transform .12s; }
a.day:hover { border-color:var(--hair-strong); box-shadow:var(--shadow-2); transform:translateY(-1px); }
.day.today { border-color:rgba(255,106,0,.45); background:linear-gradient(180deg,#FFF9F5,var(--surface) 70%);
  box-shadow:0 0 0 3px var(--brand-ring); }
.day-dow { font-size:10px; font-weight:750; letter-spacing:.08em; color:var(--faint); text-transform:uppercase; }
.day.today .day-dow { color:var(--brand); }
.day-n { font-size:20px; font-weight:750; color:var(--ink); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.day-n.zero { color:var(--faint); font-weight:600; }
.day-d { font-size:10.5px; color:var(--muted); }
.day-track { width:100%; max-width:52px; height:4px; border-radius:4px; background:#EFEFF1; overflow:hidden; }
.day-fill { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#2FA265,var(--green)); }

/* ---- Team performance ---- */
.tm-list { display:flex; flex-direction:column; }
.tm-row { display:grid; grid-template-columns:auto minmax(0,1.3fr) repeat(3,minmax(64px,1fr)) auto;
  gap:14px; align-items:center; padding:11px 6px; border-bottom:1px solid #F1F1F3;
  border-radius:10px; transition:background .1s; }
.tm-row:last-child { border-bottom:none; }
.tm-row:hover { background:var(--surface-2); }
.tm-id { display:flex; flex-direction:column; min-width:0; }
.tm-name { font-weight:650; font-size:.86rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-sub { font-size:.72rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-p { display:flex; flex-direction:column; gap:4px; }
.tm-p-k { font-size:9.5px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.tm-p-v { font-size:.84rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.tm-p-v small { color:var(--faint); font-weight:600; }
.tm-bar { height:4px; border-radius:4px; background:#EFEFF1; overflow:hidden; max-width:74px; }
.tm-bar i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#FF8A3D,var(--brand)); }
.tm-bar i.ok { background:linear-gradient(90deg,#2FA265,var(--green)); }
.tm-off { font-size:.72rem; color:var(--faint); font-weight:550; }

/* Team page cards */
.tm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; margin-top:16px; }
.tm-card { background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1); padding:18px 18px 16px; display:flex; flex-direction:column; gap:14px;
  cursor:pointer; text-align:left; font:inherit; transition:box-shadow .15s, border-color .15s, transform .12s; }
.tm-card:hover { box-shadow:var(--shadow-2); border-color:var(--hair-strong); transform:translateY(-1px); }
.tm-head { display:flex; align-items:center; gap:12px; }
.tm-head .tm-id { flex:1; gap:2px; }
.tm-role { display:inline-flex; align-items:center; gap:6px; margin-top:3px; }
.tm-cells { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.tm-cell { border:1px solid var(--hair); background:var(--surface-2); border-radius:10px; padding:9px 10px;
  display:flex; flex-direction:column; gap:4px; }
.tm-cell.hot { background:linear-gradient(160deg,var(--brand-soft),var(--surface-2) 75%); border-color:#FFD9BC; }
.tm-cell .tm-p-v { font-size:.95rem; }
.tm-foot { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tm-foot .spacer { flex:1; }
.mchip { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:650;
  padding:3px 9px; border-radius:999px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.mchip.ok    { background:var(--green-soft);  color:var(--green); }
.mchip.warn  { background:var(--amber-soft);  color:var(--amber); }
.mchip.bad   { background:var(--rose-soft);   color:var(--rose); }
.mchip.info  { background:var(--blue-soft);   color:var(--blue); }
.mchip.plain { background:#F4F4F5;            color:var(--muted); }
.mchip.brand { background:var(--brand-soft);  color:var(--brand-deep); }
.tm-cov { display:flex; align-items:center; gap:10px; }
.tm-cov .tm-bar { flex:1; max-width:none; height:5px; }
.tm-cov-num { font-size:11.5px; font-weight:650; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---- Section label between dashboard rows ---- */
.zone-label { display:flex; align-items:center; gap:10px; margin:26px 0 12px; color:var(--faint);
  font-size:.68rem; font-weight:750; text-transform:uppercase; letter-spacing:.1em; }
.zone-label::after { content:''; flex:1; height:1px; background:var(--hair); }

/* ---- Skeleton loading ---- */
.skel { border-radius:12px; background:linear-gradient(100deg,#EFEFF1 40%,#F8F8FA 50%,#EFEFF1 60%);
  background-size:200% 100%; animation:skel 1.3s ease-in-out infinite; }
@keyframes skel { to { background-position:-200% 0; } }
.skel-kpi { height:82px; border-radius:var(--r-lg); }
.skel-panel { height:280px; border-radius:var(--r-lg); }
.skel-row { height:44px; margin-top:10px; }

/* ---- Entrance motion (dashboard only, once per node insert) ---- */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation:rise .42s cubic-bezier(.22,1,.36,1) both; }
  .rise-1 { animation-delay:.03s; } .rise-2 { animation-delay:.07s; } .rise-3 { animation-delay:.11s; }
  .rise-4 { animation-delay:.15s; } .rise-5 { animation-delay:.19s; }
}
@keyframes rise { from { opacity:0; transform:translateY(7px); } }

/* ---- Dashboard composition grids ---- */
/* align-items:stretch → both cards in a row share the row's height, so their top AND bottom
   edges line up. The panels are flex columns (min-width:0 stops wide charts/tables from
   blowing the track out) so their inner content lays out with flex instead of forcing the
   card taller. Every .dash-2 row carries the same gutter (gap) + row spacing (margin). */
.dash-2 { display:grid; grid-template-columns:1.55fr 1fr; gap:14px; align-items:stretch; margin-bottom:14px; }
.dash-2.alt { grid-template-columns:1fr 1.55fr; }
.dash-2 > .panel { display:flex; flex-direction:column; min-width:0; }
@media (max-width:980px){ .dash-2, .dash-2.alt { grid-template-columns:1fr; } }
/* A full-width row, same gutter + spacing as a .dash-2 row — for content that can't be squeezed
   into a half track (the 6-month line chart, the wide activity feed). */
.dash-1 { display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:14px; }
.dash-1 > .panel { display:flex; flex-direction:column; min-width:0; }
.panel-link { font-size:.78rem; font-weight:650; color:var(--brand-deep); text-decoration:none; white-space:nowrap; }
.panel-link:hover { text-decoration:underline; }

/* ---- Generic empty hero (panels/pages with nothing to show) ---- */
.empty-hero { display:flex; flex-direction:column; align-items:center; gap:10px; padding:34px 20px; text-align:center; }
.empty-hero .eh-ic { width:44px; height:44px; border-radius:14px; background:var(--surface-2);
  border:1px dashed var(--hair-strong); display:flex; align-items:center; justify-content:center; }
.empty-hero .eh-ic .nav-ic { width:20px; height:20px; stroke:var(--faint); }
.empty-hero p { margin:0; color:var(--muted); font-size:.86rem; max-width:340px; line-height:1.5; }
.empty-hero strong { color:var(--ink-2); }

/* ---- Login v2: brand panel + form (single card splits in two) ---- */
.auth-card.duo { display:flex; width:780px; max-width:94vw; padding:0; overflow:hidden; }
.auth-side { flex:1 1 46%; padding:34px 32px; display:flex; flex-direction:column; color:#F4F4F5;
  background:#1B1B1F;
  background-image:radial-gradient(30rem 22rem at -20% -30%, rgba(255,106,0,.32), transparent 60%),
                   radial-gradient(24rem 18rem at 120% 130%, rgba(255,106,0,.16), transparent 60%); }
.auth-side h2 { font-size:1.38rem; font-weight:700; letter-spacing:-.02em; line-height:1.3; margin:34px 0 22px; }
.auth-brand.light { color:#fff; margin-bottom:0; }
.auth-points { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.auth-points li { display:flex; align-items:center; gap:11px; font-size:.85rem; color:#D4D4D8; font-weight:500; }
.ap-ic { width:28px; height:28px; border-radius:9px; background:rgba(255,255,255,.08); flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); }
.ap-ic .nav-ic { width:14px; height:14px; stroke:#FF8A3D; }
.auth-side-foot { margin-top:auto; padding-top:26px; font-size:.72rem; color:#71717A; letter-spacing:.03em; }
.auth-main { flex:1 1 54%; padding:36px 34px; }
.auth-main h1 { font-size:1.3rem; margin:0 0 4px; letter-spacing:-.02em; }
@media (max-width:760px){ .auth-card.duo { flex-direction:column; width:420px; } .auth-side { padding:26px 28px; }
  .auth-side h2 { margin:18px 0 16px; font-size:1.15rem; } .auth-points { gap:10px; } }

/* ============================================================================
   Supervisor visits (sql/015) — the checklist form, its auto-fill notes and the
   template editor. Reuses the DS tokens; adds nothing to the global namespace
   that isn't sv-prefixed (except reusing .seg / .mchip / .grid / .panel).
   ============================================================================ */
.sv-sub { margin:-6px 0 16px; color:var(--muted); font-size:.86rem; max-width:78ch; }
.sv-hint { margin-top:6px; font-size:.76rem; color:var(--muted); line-height:1.45; }
.sv-seg { margin-bottom:14px; flex-wrap:wrap; }
.sv-seg .seg-btn .pill { margin-left:6px; }
.sv-chks { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:6px 12px;
  padding:10px 12px; border:1px solid var(--hair); border-radius:var(--r-md); background:var(--surface-2); }

/* visit header */
.sv-head { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; flex-wrap:wrap; margin-bottom:16px; }
.sv-head-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px 20px; flex:1; min-width:0; }
/* Grid/flex children default to min-width:auto, so a control with an intrinsic minimum (date and
   especially time inputs, whose spinner UI won't shrink) pushes out of its cell. */
.sv-head-grid > div { min-width:0; }
.sv-head-grid .input { width:100%; min-width:0; }
.sv-head-grid label { display:block; font-size:.68rem; font-weight:650; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; }
.sv-val { font-size:.94rem; font-weight:650; color:var(--ink); padding:7px 0; }
.sv-times { display:flex; gap:8px; min-width:0; }
.sv-times .input { flex:1 1 0; min-width:0; }
.sv-score { display:flex; flex-direction:column; align-items:center; gap:10px; flex:0 0 auto; }
.sv-score-legend { display:flex; gap:5px; flex-wrap:wrap; justify-content:center; }

/* the checklist table.
   .grid td is globally white-space:nowrap (it keeps list rows one line tall). This table is the
   opposite case: the activity label carries a wrapped AutoNote under it and the comment box needs
   real width. Left as nowrap, the activity column hogged the row, squeezed the comment column to
   ~67px and pushed the table ~190px outside its panel. Fixed layout + wrapping fixes both, and lets
   the two unsized columns (Activity, Comments) split the remaining width evenly. */
.sv-grid { table-layout:fixed; }
.sv-grid th, .sv-grid td { white-space:normal; overflow-wrap:anywhere; }
.sv-grid td { vertical-align:top; }
.sv-grid tr.sv-issue td { background:var(--rose-soft); }
.sv-label { font-weight:600; color:var(--ink); }
.sv-auto { margin-top:5px; font-size:.75rem; color:var(--muted); line-height:1.5; display:flex; gap:6px; align-items:baseline; }
.sv-auto-tag { flex:0 0 auto; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue); background:var(--blue-soft); border-radius:5px; padding:2px 5px; }
.sv-ans { flex-wrap:nowrap; }
.sv-ans .seg-btn { padding:5px 11px; font-size:12px; }
/* Comments carry the substance of a finding: sized so a full two-sentence remark (~175 chars) is
   visible without scrolling the box, and drag-resizable for anything longer. */
.sv-comment { min-height:104px; resize:vertical; font-size:.83rem; line-height:1.5; }
.sv-bottom { margin-top:16px; }

/* Corrective actions on the visit page: a card each. They live in the narrow .dash-2 column, where a
   6-column table both escapes the card (.grid td is globally white-space:nowrap) and, once forced to
   wrap, crushes the action text into a one-word-per-line stack. Cards read at any width. */
.sv-acts { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.sv-act { border:1px solid var(--hair); border-radius:var(--r-md); padding:10px 12px; background:var(--surface-2); }
.sv-act.overdue { border-color:var(--rose); background:var(--rose-soft); }
.sv-act-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.sv-act-label { font-size:.66rem; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.05em; overflow-wrap:anywhere; }
.sv-act-detail { font-size:.85rem; color:var(--ink); line-height:1.5; overflow-wrap:anywhere; }
.sv-act-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px;
  font-size:.75rem; color:var(--muted); }
.sv-act-meta .sep-dot { width:3px; height:3px; border-radius:50%; background:var(--hair-strong); }
.sv-act-verbs { margin-left:auto; display:flex; gap:8px; white-space:nowrap; }
.sv-act-verbs .link { font-size:.75rem; }