/* Design tokens follow the Augmented Labs Brand Book's PROPOSED CONSOLE
   TOKEN SYSTEM (section 13) - not just the raw marketing website tokens
   an earlier pass matched. The book is explicit that several of the
   website's own observed text colors fail WCAG AA contrast on these
   warm backgrounds (section 12's measured ratios) and proposes corrected
   values specifically for product/console use, which is what this app
   is. Canvas, panel, decorative divider, and the cyan/navy brand
   constants were already exact matches and are unchanged; muted text,
   link/focus, success, warning, and error have been corrected to the
   book's proposed values. A distinct --border-functional token is new -
   the book explicitly separates a decorative divider (fine for grouping)
   from a boundary that must stay perceivable (inputs, real component
   edges), which this app previously only had one color for. */
/* Dark mode - a token-level override, not a per-component restyle. Since
   the app already uses these CSS custom properties consistently
   throughout (confirmed across tonight's work), most of the UI picks
   this up automatically rather than needing every component re-themed by
   hand. Toggled via data-theme="dark" on <html> (see applyTheme in
   app.js), itself gated by the "dark-mode" feature flag in Roles &
   Permissions - not something every user sees. This is a solid first
   pass covering the core surface/text/border tokens, not an exhaustively
   polished theme checked against every single component in the app. */
:root[data-theme="dark"] {
  --bg: #15181d;
  --panel: #1e222a;
  --text: #f1f3f5;
  --muted: #9aa0a8;
  --muted-light: #9aa0a8;
  --border: #2c3038;
  --border-functional: #4a4f58;
  --link-focus: #5b93ff;
  --accent-soft: #1c2a42;
  --success-soft: #16301f;
  --warning-soft: #3a2f12;
  --danger-soft: #3a1f1b;
  --sidebar-bg-start: #15181d;
}

:root {
  --bg: #fdfcfc;                 /* Canvas - exact match, unchanged */
  --panel: #ffffff;              /* Raised panel - exact match, unchanged */
  --text: #0b1117;               /* Primary text - book reassigns the brand navy here instead of pure black */
  --muted: #595b60;              /* Secondary/metadata text - was #9d9a94 (2.74:1, FAILS AA); book's proposed value passes at 6.64:1 */
  --muted-light: #595b60;        /* Was #bfbcb5 (1.85:1, FAILS AA) - same accessible value; the book doesn't define two readable-text tiers */
  --border: #e5e3df;             /* Decorative divider - exact match, unchanged */
  --border-functional: #737577;  /* NEW - functional border for input/component boundaries that must stay perceivable */
  --accent: #246bfe;             /* Reserved for the brand illustration/particle motif only - the book notes this fails contrast as text on these backgrounds */
  --accent-hover: #1a54d4;
  --link-focus: #1c58d9;         /* NEW - book's proposed link/focus color; passes contrast where --accent does not */
  --accent-soft: #eaf1ff;
  --accent-cyan: #38d6d0;        /* Brand illustration gradient start - exact match, unchanged */
  --navy: #0b1117;               /* Exact match, unchanged - now doing double duty as --text per the book's own remap */
  --success: #237a52;            /* Was #2f9e6b (3.29:1, FAILS AA) - book's proposed success text value, 5.16:1 */
  --success-soft: #e7f5ee;
  --warning: #8a5a12;            /* Book's explicit proposed warning text value */
  --warning-soft: #fff4d6;       /* Book's explicit proposed warning surface value */
  --danger: #b0392e;             /* Book's retained error text value */
  --danger-soft: #f6e9e7;        /* Book's retained error surface value */
  --radius: 16px;
  --radius-sm: 8px;              /* NEW - book's smallest step */
  --radius-md: 12px;             /* NEW - matches the book's field radius */
  --radius-lg: 16px;             /* NEW - explicit alias of the existing default */
  --radius-xl: 24px;             /* NEW - matches the book's large-dialog radius */
  --pill-radius: 999px;          /* Exact match, unchanged */
  /* NEW spacing scale (book section 13: 4/8/12/16/24/32/48px) - additive,
     available wherever new or touched CSS wants it; existing spacing
     values haven't been mass-converted to these in this pass. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --sidebar-w: 240px;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-accent: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --sidebar-bg-start: #fdfcfc;
  --sidebar-bg-end: #f4f3f1;
  --sidebar-border: #e5e3df;
}

* { box-sizing: border-box; }
html { scrollbar-color: var(--muted) transparent; }

/* Smooth in-page jumps - used by the admin sidebar's People/Departments/
   Links/QA Integration/Google Workspace anchor links (#admin-section-*) so
   clicking one glides the content area down instead of snapping instantly.
   Respects reduced-motion for anyone who's asked their OS to minimize
   animation. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* /kb/assets/kb.css (loaded right after this file, see index.html <head>) sets
   `body { animation: page-in .32s ease both; }` for the standalone wiki's own
   page-load fade-in. Harmless there, but "both" fill-mode means that once the
   animation finishes it leaves `transform: translateY(0)` permanently applied
   to <body> - and ANY computed transform on an ancestor, even a no-op
   identity one, makes that ancestor the containing block for its
   `position: fixed` descendants instead of the viewport (CSS spec, not a
   bug in either file). Every modal in this portal (`.modal { position:
   fixed; inset: 0; ... }`) is a descendant of <body>, so instead of
   centering in the viewport it was centering inside <body>'s own layout
   box - which is only as tall as the current view's content, not the
   screen - landing well below where it should be on any view shorter than
   the viewport. `html body` outguns kb.css's bare `body` selector on
   specificity regardless of stylesheet order, so this reliably wins without
   needing `!important` or touching kb.css (which still gets its intended
   fade-in on a real standalone /kb page load, outside this shell). */
html body { animation: none; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  padding-block: 16px;
  -webkit-font-smoothing: antialiased;
}

/* Brand book's proposed Console type scale (section 13): 32/40 at 500 for
   page titles, 24/32 at 500 for section titles, 18/26 at 600 for card
   titles. Previously every heading was a flat 700 weight with no defined
   size scale at all - this sets the baseline; any more specific selector
   elsewhere (e.g. .section-title) still wins by normal CSS specificity,
   so existing intentionally-customized headings aren't disturbed. */
h1 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; font-size: 2rem; line-height: 1.25; color: var(--text); }
h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; font-size: 1.5rem; line-height: 1.333; color: var(--text); }
h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; font-size: 1.125rem; line-height: 1.444; color: var(--text); }

/* A handful of large display moments - the sign-in hero and modal titles -
   use a lighter Inter weight (300) instead of the bold everywhere-else
   heading style, matching the brand site's own large hero typography
   (which uses plain light-weight Inter, not a separate serif face). */
.display-heading { font-family: var(--font-accent); font-weight: 300; letter-spacing: -0.01em; }

/* Brand book section 12: the website's own cyan/blue focus ring is too
   faint against this light canvas to serve as the default functional
   focus indicator, and specifies #1C58D9 with a 2px outline and 3px
   offset as the corrected default. */
:focus-visible { outline: 2px solid var(--link-focus); outline-offset: 3px; border-radius: 4px; }

.hidden { display: none !important; }

/* ---- Reusable brand components (shared visual language with the Knowledge
   Base's own CSS in src/kb.js - see that file's matching block) ---- */
.accent-italic { color: var(--link-focus); font-style: normal; }

.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--link-focus);
  margin-bottom: 8px;
}

.stat-number, .qa-summary-value { color: var(--link-focus); font-family: var(--font-display); }

.card-accent-top { position: relative; overflow: hidden; }
.card-accent-top::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent));
}
.card-accent-left { border-left: 3px solid var(--accent); }

.pill-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-soft);
  color: var(--link-focus);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: var(--pill-radius);
  white-space: nowrap;
}

/* Soft lavender-to-white gradient hero wrapper, used behind welcome-style
   headings (Hub view) to match the marketing site's hero sections. */
.hero-gradient {
  background: radial-gradient(120% 140% at 10% 0%, var(--accent-soft) 0%, var(--bg) 60%);
  border-radius: 24px;
  padding: 32px 28px;
  margin-bottom: 20px;
}
.hero-gradient h2 { margin: 0 0 6px; font-size: 2rem; font-family: var(--font-accent); font-weight: 300; letter-spacing: -0.01em; }
.hero-gradient p { margin: 0; color: var(--muted); }

/* ---- Auth screen ---- */
.centered-screen {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.auth-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 4px 24px rgba(20, 23, 31, 0.06);
}

.auth-card h1 { margin: 0 0 4px; font-size: 1.6rem; font-family: var(--font-accent); font-weight: 300; letter-spacing: -0.01em; }
.subtitle { margin: 0 0 20px; color: var(--muted); font-size: 0.9rem; }

/* ---- Auth-screen brand block: Augmented Labs Inc. as the program owner
   (product name + org name, mirroring Stetson QA Worker's own sign-in
   hero treatment - its `.brand-logo` + serif/gradient heading pattern),
   with a distinct but still legible "for Beyond The Call" client tag so
   employees still recognize their own company's portal. Uses this app's
   own --accent token rather than Stetson's hardcoded blue/cyan gradient
   values. */
.auth-brand { text-align: center; margin-bottom: 22px; }
/* The Augmented Labs Inc. logo asset (reused verbatim from Stetson QA
   Worker) is a light/near-white mark on transparent, meant to be recolored
   via CSS filter rather than swapped per theme - same approach Stetson's
   own `.brand-logo`/`.sidebar-logo-mark` rules use (`filter:
   brightness(0)`), inverted back to light for this app's dark mode. */
.auth-brand .brand-logo { width: 72px; height: auto; margin-bottom: 14px; filter: brightness(0); }
.auth-brand h1 { margin: 0 0 2px; }
.auth-brand .brand-product .accent-italic { font-family: var(--font-accent); font-weight: 300; }
.auth-brand .brand-org { margin: 0 0 8px; color: var(--muted); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.02em; }
.auth-brand .brand-client-tag {
  display: inline-block;
  margin: 0;
  padding: 3px 10px;
  border-radius: var(--pill-radius);
  background: var(--accent-soft);
  color: var(--link-focus);
  font-size: 0.75rem;
  font-weight: 600;
}

.tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.tab-btn {
  flex: 1;
  padding: 10px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
}
.tab-btn.active { color: var(--link-focus); border-bottom-color: var(--link-focus); font-weight: 600; }

.tab-panel { display: none; flex-direction: column; gap: 14px; }
.tab-panel.active { display: flex; }

/* Standalone forms (invite acceptance, password reset) that aren't part of
   a tab switcher - shown/hidden purely via .hidden, no .active needed. */
.standalone-form { display: flex; flex-direction: column; gap: 14px; }

label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--muted); }
input, textarea, select {
  font: inherit;
  padding: 9px 10px;
  border-radius: 8px;
  /* Functional border, not the decorative divider - the brand book
     explicitly distinguishes these two roles: a boundary a user actually
     needs to perceive (an input) shouldn't use the same faint color as a
     purely decorative grouping line. */
  border: 1px solid var(--border-functional);
  background: var(--bg);
  color: var(--text);
  min-height: 44px; /* brand book section 16: 44px default field height - a minimum, so a <textarea> can still grow taller */
  transition: border-color .16s ease;
}
input[type="checkbox"], input[type="radio"] { min-height: 0; } /* the 44px field default doesn't apply to these - they're sized elsewhere by their own rules */
input:disabled, textarea:disabled, select:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; opacity: 0.7; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--link-focus); outline-offset: 1px; border-color: var(--link-focus); }

.hint { font-size: 0.78rem; color: var(--muted); line-height: 1.4; margin: -4px 0 0; }
.error-msg { color: var(--danger); font-size: 0.85rem; min-height: 1em; margin: 0; }

/* ---- Status badges ----
   Small colored pill for status/state indicators (integration connection
   state, MFA/reset-link validity, employee role, per-row provisioning and
   invite results), replacing plain colorless .hint text so "good/bad/
   pending" states are distinguishable at a glance. Modeled on Stetson QA
   Worker's `.role-badge` pill (src/index.js: 2px/8px padding, 10px radius,
   11px uppercase bold text) plus its inline success/warning/danger color
   pairing (background+text drawn from one token, e.g. `--success-bg`/
   `--success`), but built entirely from THIS app's own existing tokens
   (--success/--success-soft, --warning/--warning-soft, --danger, --accent/
   --accent-soft, --muted/--border) rather than Stetson's literal hex
   values or its `--al-blue`/`role-*` class names. `--danger-soft` didn't
   already exist as a token, so it's added alongside the others it's
   modeled after rather than hardcoding a red tint inline. */

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.6;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.status-badge--success { background: var(--success-soft); color: var(--success); }
.status-badge--warning { background: var(--warning-soft); color: var(--warning); }
.status-badge--danger { background: var(--danger-soft); color: var(--danger); }
.status-badge--info { background: var(--accent-soft); color: var(--link-focus); }
.status-badge--neutral { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }

/* Three-tier role coloring mirroring Stetson's admin(blue)/supervisor(cyan)/
   agent(neutral) pattern, mapped onto this app's own admin/manager/employee
   roles. Reuses --accent (blue) for admin and a teal derived the same way
   Stetson derives its supervisor cyan (a soft tint of --accent-cyan) for
   manager, keeping employee as the neutral/default variant. */
.status-badge--role-admin { background: var(--accent-soft); color: var(--link-focus); }
.status-badge--role-manager { background: rgba(56, 214, 208, 0.16); color: #0d8f89; }
.status-badge--role-employee { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }

/* Rectangular, solid-accent buttons - Stetson's own button rules
   (src/index.js: `button { background:var(--al-blue); border-radius:9px }`,
   `.btn-secondary`) use a 9px radius and a solid accent fill, not the pill
   shape/navy fill this app used before. */
.primary-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
  /* Brand book section 16: 36px desktop button target. Content height
     alone (0.9rem font + 10px padding) landed a little under that. */
  min-height: 36px;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.primary-btn:hover { background: var(--accent-hover); }
/* Brand book section 16: every button needs a defined disabled state -
   there wasn't one anywhere in this file before, so disabled buttons were
   falling back to the browser's own default greying, not anything
   on-brand. Applies to all three button kinds via the shared selector. */
.primary-btn:disabled, .ghost-btn:disabled, .danger-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.primary-btn:active { box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15); transform: scale(0.98); }
/* Was missing entirely - every `class="primary-btn small"` usage (Final
   Approval, Run Invoices, period lifecycle actions, etc.) was silently
   rendering at full size instead, which is why buttons looked
   inconsistent/oversized next to .ghost-btn.small ones sitting right next
   to them in the same toolbar. */
.primary-btn.small { padding: 6px 12px; font-size: 0.78rem; border-radius: calc(var(--radius) - 4px); }

.ghost-btn {
  background: var(--panel);
  /* Functional border, not the decorative divider - an outlined button's
     border is how a user tells it's a button at all, not a grouping line. */
  border: 1px solid var(--border-functional);
  color: var(--text);
  padding: 9px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.85rem;
  min-height: 36px; /* brand book section 16: 36px desktop button target */
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
/* .small stays intentionally compact below the 36px target - it's used
   for dense inline table/row actions (Edit, Delete, etc.) where forcing
   a full touch-sized control on every row would break the density those
   views need; this is a deliberate, scoped exception, not an oversight. */
.ghost-btn.small { padding: 6px 12px; font-size: 0.78rem; border-radius: calc(var(--radius) - 4px); min-height: 0; }
.ghost-btn:hover { background: var(--bg); border-color: var(--link-focus); color: var(--link-focus); }

/* ---- Portal shell ----
   Restructured to match Stetson QA Worker's own nav pattern (its
   src/index.js: `.layout { display:flex }` / `.sidebar { width:240px;
   ...; position:sticky; top:0 }` / `.sidebar-nav a.nav-item`) - major
   modules (brand, Hub, Admin, the account cluster) stay in a top header;
   everything else moves into a persistent left sidebar. Stetson itself has
   no top header at all (its sidebar holds literally every nav item,
   global and client-scoped alike, including the account/log-out block at
   its foot) - this app keeps a slim top header for the handful of
   app-level items per this reskin's brief, while the sidebar's own visual
   language (gradient panel, right border, soft rounded nav items, the
   cyan-to-blue active-state accent bar) is taken directly from Stetson's
   real CSS below. */
.top-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 20;
}
/* ---- Header brand block: same product-name + muted org-name pairing as
   Stetson QA Worker's own sidebar (its `.sidebar-product-name` /
   `.sidebar-org-name` classes), applied through this app's own tokens
   instead of Stetson's hardcoded colors, plus a "for Beyond The Call"
   chip so the client company stays visibly identified alongside the
   Augmented Labs Inc. ownership mark. */
.top-header .brand { display: flex; align-items: center; gap: 10px; }
.top-header .brand .sidebar-logo-mark { width: 26px; height: 26px; flex-shrink: 0; filter: brightness(0); }
.top-header .brand-line { display: flex; align-items: center; gap: 8px; }
.top-header .sidebar-product-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text); }
.top-header .sidebar-org-name { font-size: 11px; color: var(--muted); font-weight: 500; }
.top-header .brand-client-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--pill-radius);
  background: var(--accent-soft);
  color: var(--link-focus);
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}
/* margin-left: auto pushes this to the header's right edge - it used to
   get there for free because .top-nav had flex: 1 and ate the space in
   between; with that nav removed (moved into the sidebar), .user-menu
   needs to do that job itself or it'd sit cramped right next to the
   brand instead of at the far right. */
.user-menu { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--muted); margin-left: auto; }

/* ---- nav-btn base: shared by both the top header's module buttons and
   every sidebar link below - public/app.js selects all of them together
   as ".nav-btn", so this base rule stays common and each context below
   only adds layout/visual differences. ---- */
.nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.88rem;
  font-family: inherit;
  transition: background .16s ease, color .16s ease;
}
.top-header .nav-btn {
  padding: 8px 14px;
  border-radius: var(--radius);
  color: var(--muted);
}
.top-header .nav-btn:hover { background: var(--bg); color: var(--text); }
.top-header .nav-btn.active { background: var(--accent); color: white; }

/* ---- Left sidebar ---- */
.shell-body { display: flex; align-items: flex-start; }
.portal-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--sidebar-bg-start) 0%, var(--sidebar-bg-end) 100%);
  border-right: 1px solid var(--sidebar-border);
  padding: 20px 14px;
  height: calc(100vh - 57px);
  position: sticky;
  top: 57px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: width .16s ease, padding .16s ease;
}
/* Collapsed: a narrow icon-only strip (64px), not width:0 - nav icons
   (the SVGs inside .nav-icon) stay fully visible and clickable; only each
   button's own text label is hidden (font-size:0 on the button - the SVG
   icon is sized by its own width/height attributes, not font-size, so
   this hides only the adjacent text node without touching the icon at
   all). Group header buttons (Work/Time/Pay/etc - see
   .admin-nav-group-toggle) have no icon of their own to fall back to, so
   they're hidden entirely rather than shown as an empty button; their
   contents are then forced open (overriding each group's own individual
   collapsed state) since there'd be no way to expand a hidden group
   otherwise. */
.portal-sidebar.collapsed { width: 64px; padding-left: 10px; padding-right: 10px; }
.portal-sidebar.collapsed .nav-btn {
  font-size: 0; justify-content: center; gap: 0; padding: 10px 0;
  width: 100%; box-sizing: border-box;
}
.portal-sidebar.collapsed .nav-icon { margin-right: 0; }
.portal-sidebar.collapsed .nav-badge { display: none; }
.portal-sidebar.collapsed .admin-nav-group-toggle { display: none; }
.portal-sidebar.collapsed .admin-nav-group.collapsed .admin-nav-group-items { display: block; }
#sidebar-toggle-btn {
  margin-top: auto; margin-left: auto; margin-right: auto; margin-bottom: 4px;
  background: var(--panel); border: 1px solid var(--border-functional); color: var(--muted); cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(11, 17, 23, 0.15);
  transition: background .16s ease, color .16s ease;
}
#sidebar-toggle-btn:hover { background: var(--bg); color: var(--text); }
.portal-sidebar.collapsed #sidebar-toggle-btn { width: 36px; height: 36px; }
/* #sidebar-main-nav (Hub/KB/Tasks/etc) and #sidebar-admin-nav (People/
   Departments/etc, shown only while the Admin view is active - see
   showView() in app.js) are the two swappable content blocks inside
   .portal-sidebar; each needs the same column/gap layout .portal-sidebar
   itself uses for its direct children, since the buttons/links are now one
   level deeper than before. */
#sidebar-main-nav, #sidebar-admin-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.portal-sidebar .nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  text-align: left;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  font-weight: 500;
  color: var(--text);
  opacity: 0.72;
}
.portal-sidebar .nav-btn:hover { background: var(--accent-soft); opacity: 1; }
.portal-sidebar .nav-btn.active {
  background: var(--accent-soft);
  opacity: 1;
  font-weight: 600;
}
.portal-sidebar .nav-btn.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-cyan), var(--accent));
}

.content-area { flex: 1; min-width: 0; }

/* ---- App footer: minimal ownership line only, matching Stetson QA
   Worker's own minimal sign-in footer treatment - no unrelated content. ---- */
.app-footer {
  padding: 14px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.75rem;
  border-top: 1px solid var(--border);
}

/* Stetson's own sidebar is simply always there - no @media query anywhere
   in its source handles a narrow viewport, so there's no reference
   behavior to mirror here. Below ~760px this app instead collapses the
   sidebar from a persistent 240px column into a horizontal, edge-to-edge
   scrollable strip stacked above the content - the simplest pattern that
   keeps every destination one tap away without a hamburger/overlay to
   wire up, and it reuses the exact "column bar -> wrapped row" cascade
   trick the old pill nav used at this same breakpoint. */
@media (max-width: 760px) {
  .top-header { padding: 10px 14px; }
  .top-header .brand-line { flex-wrap: wrap; gap: 6px; }
  .shell-body { flex-direction: column; }
  .portal-sidebar {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--sidebar-border);
    padding: 10px 12px;
    gap: 6px;
  }
  #sidebar-main-nav, #sidebar-admin-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .portal-sidebar .nav-btn { padding: 8px 12px; border-radius: var(--radius); }
  .portal-sidebar .nav-btn.active::before { display: none; }
  .user-menu { justify-content: space-between; }
}

/* flex: 1 so this actually grows to fill whatever space is left next to
   the sidebar (up to max-width, then centers via margin: auto); min-width:
   0 overrides a flex item's default min-width:auto, which otherwise
   refuses to shrink narrower than its content's natural width (a wide
   table, say) - without it, a flex item just overflows its container
   instead of actually shrinking, which was the real cause of content
   getting visibly cut off on a narrower window regardless of sidebar
   state. */
main.view { display: none; flex: 1; min-width: 0; padding: 24px 20px; max-width: 900px; margin: 0 auto; }
main.view.active { display: block; }
main.view h2 { margin-top: 0; }
.view-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }

/* The Knowledge Base view mounts the wiki's own full-width layout (topbar +
   sidebar + content, from src/kb.js) inside #kb-frag-mount - it needs to
   escape main.view's centered 900px column and side padding, since the
   wiki's own CSS (/kb/assets/kb.css) already handles its own layout and
   spacing edge-to-edge within .content-area's remaining width (the portal's
   own left sidebar has already claimed --sidebar-w of the viewport, so the
   KB's edge-to-edge chrome fills what's left rather than the whole screen -
   correct, since it's still living inside this app's shell). */
#view-kb.kb-view { max-width: none; padding: 0; margin: 0; }

/* ---- Hub links ---- */
.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.link-tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.link-tile:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(20, 23, 31, 0.06); transform: translateY(-1px); }
.link-tile .icon { font-size: 1.6rem; }
.link-tile .title { font-weight: 600; font-size: 0.92rem; }
p.empty-state { color: var(--muted); font-size: 0.9rem; margin-top: 20px; }

/* ---- Vault ---- */
.vault-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.vault-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.vault-item:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(20, 23, 31, 0.06); }
.vault-item .vi-main { display: flex; flex-direction: column; gap: 3px; }
.vault-item .vi-name { font-weight: 600; }
.vault-item .vi-username { color: var(--muted); font-size: 0.85rem; }
/* Generic button-group row - used far beyond just vault items now
   (admin-link-row actions, period toolbars, etc.), so this is no longer
   scoped to .vault-item specifically. Everywhere else this class was used
   outside a .vault-item was silently getting zero flex/gap/wrap styling
   at all, which is a real contributor to the "buttons aren't aligned"
   feedback - this fixes every one of those at once. */
.vi-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.password-row { display: flex; gap: 8px; }
.password-row input { flex: 1; }

/* ---- Admin ---- */
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin: 16px 0; }
.inline-form input { flex: 1; min-width: 140px; }
/* Name-search inputs across the employee lists (People, Timekeeping,
   Schedule & Attendance, Pay Periods review) - a plain text input with no
   visual cue reads as an unfinished field, not a search box, especially
   sitting right next to a real <select>. A leading icon signals "type to
   filter" at a glance, matching how search fields look everywhere else. */
.search-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%239d9a94' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7.5' cy='7.5' r='5'/%3E%3Cpath d='M15.5 15.5l-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 15px 15px;
  padding-left: 32px !important;
}
.admin-links-list { display: flex; flex-direction: column; gap: 8px; }
.admin-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  transition: border-color .16s ease;
}
.admin-link-row:hover { border-color: var(--accent); }

/* ==================== Visual polish pass ====================
   Empty-state component: centered icon + message + optional CTA,
   replacing single lines of gray text pinned top-left with a huge blank
   area below. Used across My Pay, QA Scores/Analytics, Performance,
   Password Manager, and any other empty list/table view. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
}
.empty-state-icon { font-size: 2.4rem; margin-bottom: 12px; opacity: 0.7; }
.empty-state-message { font-size: 0.95rem; margin: 0 0 16px; max-width: 360px; }
.empty-state .primary-btn, .empty-state .ghost-btn { margin-top: 4px; }

/* Destructive actions (Delete, Disconnect, Revoke, etc.) get their own
   style - distinct from both the solid-blue primary action and the
   neutral ghost/secondary one, so "this undoes something" reads at a
   glance rather than looking like every other button in the toolbar. */
.danger-btn {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 9px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  min-height: 36px; /* brand book section 16: 36px desktop button target, same as primary/ghost */
  transition: background .16s ease, color .16s ease;
}
.danger-btn:hover { background: var(--danger); color: white; }
.danger-btn.small { padding: 6px 12px; font-size: 0.78rem; border-radius: calc(var(--radius) - 4px); }

/* A plain content card for pages that don't already have one (mirrors
   Hub's .hero-gradient polish level, minus the gradient - used on the
   Dashboard's sub-sections, which previously sat directly on the bare
   page background with no container at all). */
.content-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 16px;
}

/* Table scan aids: zebra striping + hover, applied to both .pt-table
   (Timekeeping, etc.) and the new .data-table (Admin People). A visible
   scroll-shadow fades in on the trailing edge whenever a table's wrapper
   is actually scrolled, so "there's more off-screen" has a visual cue
   beyond just the scrollbar itself. */
.pt-table tbody tr:nth-child(even),
.data-table tbody tr:nth-child(even) { background: var(--bg); }
.pt-table tbody tr:hover,
.data-table tbody tr:hover { background: var(--accent-soft); }

/* border-radius + overflow-y: hidden (NOT the "overflow: hidden" shorthand,
   which would also kill the horizontal scrolling overflow-x: auto exists
   for) make this wrapper's own box get the same rounded corners as the
   .data-table/.pt-table sitting inside it. Without that, the ::after
   shadow strip below - a plain square-cornered rectangle glued to the
   wrapper's right edge - pokes past the table's actual rounded top-right/
   bottom-right corners, which is what made it look like a shadow floating
   independently near the list rather than sitting flush against its hard
   right border. */
.table-scroll-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  border-radius: var(--radius);
}
.table-scroll-wrap::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 24px;
  background: linear-gradient(to right, transparent, rgba(20, 23, 31, 0.06));
  pointer-events: none;
  opacity: 0;
  transition: opacity .16s ease;
}
.table-scroll-wrap.is-scrollable::after { opacity: 1; }
/* A table that already has its own .pt-sticky-col action column carries a
   shadow anchored to the table's real rightmost column (see .pt-sticky-col
   below) - genuinely static against the list's hard right border. Layering
   this wrapper's OWN fade shadow on top of that is a second shadow anchored
   instead to the wrapper's viewport edge, which is a different position
   from the table's real edge whenever the table is wider than the visible
   area and not scrolled all the way - the two drifted apart as you
   scrolled, reading as one shadow floating independently of the list. Only
   one shadow - the one anchored to the table itself - should show here. */
.table-scroll-wrap:has(.pt-sticky-col)::after { display: none; }

.data-table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.data-table th, .data-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.data-table th { background: var(--accent-soft); color: var(--text); font-weight: 600; position: sticky; top: 0; }

/* Sidebar nav icons: a small fixed-width slot before every label so icons
   line up in a column regardless of label length, matching the KB
   sidebar's existing icon pattern instead of KB looking like a different
   product from the rest of the app. */
.nav-icon { display: inline-block; width: 20px; text-align: center; margin-right: 6px; }

/* Grouped admin sidebar sections: a small uppercase label + a subtle
   divider above each group, instead of 16 flat, unstyled items in a row.
   Each group is now also collapsible (see public/app.js's toggle wiring)
   so only the section(s) you're actually working in take up space. */
.admin-nav-group { margin-bottom: 2px; }
.admin-nav-group-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 12px 4px;
  text-align: left;
}
.admin-nav-group:first-child .admin-nav-group-toggle { padding-top: 4px; }
.admin-nav-group-toggle:hover { color: var(--text); }
.admin-nav-group-chevron {
  display: inline-block;
  margin-right: 5px;
  font-size: 0.8rem;
  transition: transform .16s ease;
}
.admin-nav-group.collapsed .admin-nav-group-chevron { transform: rotate(-90deg); }
.admin-nav-group.collapsed .admin-nav-group-items { display: none; }

/* Row-detail pop-out (see #row-detail-modal): a plain stacked label/value
   list, so it never itself needs horizontal scrolling regardless of how
   many columns the source table has. */
.row-detail-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.row-detail-pair { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.row-detail-pair:last-child { border-bottom: none; padding-bottom: 0; }
.row-detail-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; }
.row-detail-value { text-align: right; font-weight: 500; }
.row-detail-empty { color: var(--muted-light); font-style: italic; font-weight: 400; }


/* ---- Modal ---- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 20, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* Must outrank the sticky .top-header (z-index: 20), the sticky .sidebar
     and the toast (z-index: 20): all are fixed/sticky siblings later or
     earlier in the DOM, and on a short viewport a centered modal card can
     sit right up against the very top of the screen, right where the
     sticky header lives. At a lower z-index the header/sidebar painted
     OVER that top slice of the modal (overlay included), silently
     clipping/hiding the card's heading behind the nav - this looked
     identical to the card being "cut off", but was actually a
     stacking-order bug, not a sizing one. */
  z-index: 30;
}
/* #confirm-modal and #reason-prompt-modal are utility dialogs meant to be
   triggered from inside ANY other already-open modal (e.g. "Delete this
   scheduled shift?" clicked from within the schedule-day popup) - at the
   same z-index as every other .modal, whichever one is later in the DOM
   wins the stacking regardless of which one opened second, so the
   confirm dialog could end up rendering correctly but completely
   invisible behind an earlier-declared modal's own backdrop. The calling
   code would then sit forever awaiting a click on a dialog the user can
   never see or reach - exactly what looked like "pressing delete does
   nothing, no console log, no network call at all" (confirmed via
   wrangler tail): the code was simply still waiting on an invisible
   dialog, never reaching the point where it would make that call. These
   two need to always render above every other modal, not just whichever
   modal happens to be declared later in the HTML. */
#confirm-modal, #reason-prompt-modal {
  z-index: 60;
}
.modal-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 12px 40px rgba(20, 23, 31, 0.18);
  position: relative;
  /* Some modals (the task form especially: title + description + visibility
     + schedule + conditional recurrence sub-fields + due date + actions) run
     taller than a shorter laptop viewport. `.modal` already centers this
     card with flex + align-items:center, but centering alone doesn't stop a
     too-tall card from overflowing off BOTH the top and bottom of the
     viewport with no way to reach the rest of it. Capping height to the
     viewport (minus the .modal's own 16px inset padding on each side) and
     scrolling internally keeps every modal fully reachable regardless of
     window height, while doing nothing to modals already short enough to
     fit. */
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.modal-card h3 { margin: 0 0 12px; }
/* One consistent close affordance on every modal, regardless of whatever
   other Close/Cancel button that modal's own .modal-actions already has -
   this is deliberately in addition to those, not a replacement, and every
   modal also closes on a click outside the card (see the generic handler
   in app.js) - both fixes for the same "close buttons aren't consistent"
   issue. */
.modal-close-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close-x:hover { background: var(--bg); color: var(--text); }
#vault-item-form { display: flex; flex-direction: column; gap: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
/* Wider variant for forms with too many fields to read comfortably as one
   tall single-column stack (currently just the task form) - same card,
   same border/shadow/everything, just given room to lay fields out two to
   a row instead of running portrait. */
.modal-card--wide { max-width: 640px; }
.modal-card--xwide { max-width: 980px; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.form-grid > .span-2,
.form-grid > hr.modal-divider,
.form-grid > .error-msg,
.form-grid > .modal-actions {
  grid-column: 1 / -1;
}
/* Plain flex row for a pair of fields that only make sense together (e.g.
   "First" + "Monday" for an nth-weekday rule) - no one-off inline styles,
   just the same class/CSS pattern the rest of the form already uses. */
.nth-fields { display: flex; gap: 8px; }
.nth-fields > .flex-1 { flex: 1; }
/* Thin section dividers for long/dynamic modal forms (currently just the
   task form) - same "reduce visual noise by grouping" spirit as the Admin
   page's section cards, scaled down to modal size. Reuses the existing
   --border token rather than a new one. */
.modal-card hr.modal-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; width: 100%; }

/* ---- Admin page: section cards ----
   Reorganizes what used to be one long undifferentiated Admin page into
   clearly separated cards, one concern per section - same visual language
   (cards/borders/pill radius) as the rest of the reskin, just applied to a
   grouped structure instead of a flat list of forms. */
/* The admin jump-nav used to be a horizontal pill-row (.admin-section-nav)
   sticky at the top of .content-area; it now lives as a vertical list in
   the left sidebar instead (#sidebar-admin-nav in index.html, styled by the
   shared .portal-sidebar .nav-btn rules above) so it isn't shown twice. */
.admin-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  scroll-margin-top: 100px;
}
.admin-section-header { margin-bottom: 16px; }
.admin-section-header h2 { margin: 0 0 6px; }
.admin-section-header .hint { margin: 0; }
.admin-section h3:first-of-type { margin-top: 0; }

#bulk-invite-details { margin-top: 16px; }
#bulk-invite-details summary {
  cursor: pointer;
  color: var(--link-focus);
  font-weight: 600;
  list-style: none;
}
#bulk-invite-details summary::-webkit-details-marker { display: none; }
#bulk-invite-details summary::before { content: "▸ "; }
#bulk-invite-details[open] summary::before { content: "▾ "; }
#bulk-invite-textarea {
  width: 100%;
  font-family: "SF Mono", Consolas, monospace;
  font-size: 0.82rem;
  margin: 10px 0;
}

.security-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.security-card h3 { margin: 0; }
.mono-code {
  font-family: "SF Mono", Consolas, monospace;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  word-break: break-all;
  font-size: 0.85rem;
}
#mfa-qr-img { border-radius: 8px; border: 1px solid var(--border); background: white; padding: 8px; }
#reset-modal-link { font-family: monospace; font-size: 0.78rem; resize: vertical; }

/* ---- Knowledge base ---- */
.kb-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.kb-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}
.kb-list-item:hover { border-color: var(--accent); }
.kb-list-item .title { font-weight: 600; }
.kb-list-item .badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--link-focus);
  background: var(--accent-soft);
  border: none;
  border-radius: var(--pill-radius);
  padding: 3px 12px;
}
.kb-article-detail { margin-top: 16px; }
.kb-content { margin-top: 12px; line-height: 1.6; }
.kb-content h3, .kb-content h4, .kb-content h5 { margin: 16px 0 6px; }
.kb-content p { margin: 6px 0; }
.kb-content ul { margin: 6px 0; padding-left: 22px; }

/* ---- QA scores ---- */
.qa-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.88rem; }
.qa-table th, .qa-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.qa-table th { color: var(--muted); font-weight: 600; font-size: 0.8rem; }

/* ---- QA analytics ---- */
.qa-summary-cards { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.qa-summary-card {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  flex: 1 1 160px;
}
.qa-summary-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--accent));
}
/* display: block + padding-right reserves room for the absolutely
   positioned .kpi-info-icon in the card's corner, so a longer label never
   runs underneath it - padding on a plain inline span wouldn't reliably
   do that across wrapped lines. */
/* min-height reserves room for the longest label actually used anywhere
   on the dashboard ("Total payable hours (current period)" - 37
   characters, wraps to 3 lines at this card width) even when a given
   card's own label only takes one or two lines ("Team size", "Pending
   PTO requests") - otherwise the value number below lands at a different
   height in every card depending on how many lines that specific card's
   label happened to wrap to, so a row of cards reads as jagged rather
   than aligned. An explicit line-height makes the three-line allowance a
   known, predictable size instead of depending on the browser's
   font-based default. */
.qa-summary-label { display: block; padding-right: 20px; font-size: 0.78rem; line-height: 1.35; min-height: 3.2rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
/* The "?" badge next to a KPI card's label, shown only when a definition
   exists for that card's key - hover/focus shows the shared #kpi-tooltip
   (see app.js), positioned via JS rather than CSS so it's never clipped
   by .qa-summary-card's own `overflow: hidden`. */
.kpi-info-icon {
  /* Pinned to the card's own corner rather than flowing inline after the
     label - .qa-summary-card is already position: relative, so this
     positions against the card itself regardless of label length, even
     though the icon is nested a level deeper inside .qa-summary-label. */
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border-functional);
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  cursor: help;
  flex-shrink: 0;
}
.kpi-info-icon:hover, .kpi-info-icon:focus-visible { border-color: var(--link-focus); color: var(--link-focus); }
#kpi-tooltip {
  position: fixed;
  z-index: 600;
  max-width: 260px;
  background: var(--navy);
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(20, 23, 31, 0.25);
  pointer-events: none; /* never intercepts the mouse, so it can't trap a hover and keep itself stuck open */
}
#kpi-tooltip strong { color: #fff; }
#kpi-tooltip .kpi-tooltip-meta { display: block; margin-top: 4px; color: rgba(255, 255, 255, 0.7); font-size: 0.72rem; }
.qa-summary-value { font-size: 1.8rem; font-weight: 700; }
/* Strongest/weakest-area callouts (My QA trends) reuse the same stat-card
   shape as "Interactions scored"/"Average score" above them instead of a
   plain sentence of fine print - colored success/warning to match at a
   glance which one is the good news and which needs attention. */
.qa-summary-card--success .qa-summary-value { color: var(--success); }
.qa-summary-card--success::before { background: linear-gradient(90deg, var(--navy), var(--success)); }
.qa-summary-card--warning .qa-summary-value { color: var(--warning); }
.qa-summary-card--warning::before { background: linear-gradient(90deg, var(--navy), var(--warning)); }
/* Strongest/Needs-work values hold a whole "Criterion name - 83%" string,
   not a short number like the cards above them, so the shared 1.8rem/700
   stat-number size reads way too heavy for them. Scale those two down. */
.qa-summary-card--success .qa-summary-value,
.qa-summary-card--warning .qa-summary-value {
  font-size: 1.1rem;
  font-weight: 600;
}
.qa-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 60px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.85rem;
}
.qa-bar-track { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; height: 14px; overflow: hidden; }
/* .qa-bar-fill is a <span> (see renderQaBarList in app.js) - inline elements
   ignore an explicit width entirely, which is why this fill bar rendered as
   a permanently empty, colorless outline no matter what percentage was set
   on it inline. display:block (or inline-block) is what actually lets the
   width take effect and the accent color show through. */
/* Softened from a flat solid accent fill to the same navy→accent gradient
   already used on the qa-summary-card top borders, at Kelsey's request -
   the solid blue read as too harsh/aggressive across a whole row of bars. */
.qa-bar-fill { display: block; background: linear-gradient(90deg, var(--navy), var(--accent)); height: 100%; border-radius: inherit; }
.qa-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-bar-value { text-align: right; color: var(--muted); }

/* ---- QA score detail modal ---- */
.qa-detail-card { max-width: 640px; max-height: 85vh; overflow-y: auto; }
.qa-detail-section-title { margin: 16px 0 6px; font-size: 0.9rem; }
.qa-flags-box {
  background: var(--warning-soft);
  color: var(--warning);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
  margin: 8px 0;
}
.qa-flags-box ul { margin: 6px 0 0; padding-left: 18px; }
.qa-criteria-list { display: flex; flex-direction: column; gap: 10px; }
.qa-criterion {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.85rem;
}
.qa-criterion-head { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.qa-criterion-reasoning { margin: 6px 0 0; color: var(--text); }
.qa-criterion-quote {
  margin: 6px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--border);
  color: var(--muted);
  font-style: italic;
}
.qa-transcript {
  white-space: pre-wrap;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  font-size: 0.8rem;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 8px;
}
.qa-table tbody tr { cursor: pointer; }
.qa-table tbody tr:hover { background: var(--bg); }

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  z-index: 20;
}

/* Spreadsheet-style grid for the Timekeeping admin console (People/
   Timekeeping/Pay Cycle/Invoicing spec's "high-information-density table"
   request). Uses the same tokens as everything else so it doesn't look
   bolted-on. */
.pt-table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.pt-table th,
.pt-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.pt-table th {
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
  position: sticky;
  top: 0;
}
.pt-table tbody tr:hover { background: var(--accent-soft); }
.pt-table select,
.pt-table input {
  font-size: 13px;
  padding: 3px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
}
/* Keeps the action column (Edit/etc.) reachable without scrolling all the
   way across a wide table - sticks to the right edge of the scroll
   container instead of scrolling away with the rest of the row. Also used
   by the row-detail "expand" column (see #row-detail-modal) on ANY table,
   not just .pt-table - a wide .data-table needs the same always-reachable
   escape hatch just as much. */
.pt-table .pt-sticky-col,
.data-table .pt-sticky-col {
  position: sticky;
  right: 0;
  background: var(--panel);
  box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.15);
}
.pt-table thead .pt-sticky-col,
.data-table thead .pt-sticky-col { background: var(--accent-soft); }
.pt-table tbody tr:hover .pt-sticky-col,
.data-table tbody tr:hover .pt-sticky-col { background: var(--accent-soft); }

/* Secondary columns: the actual fix for "shouldn't require horizontal
   scrolling" - rather than just adding a pop-out button next to a table
   that still scrolls, these columns are removed from the table layout
   entirely (not just visually scrolled-away), so the table's real width
   fits without ever needing to scroll sideways. Their data isn't lost -
   it's in the row's pop-out (see openRowDetailModal in public/app.js) -
   just not taking up column width in the main list. */
.pt-table .pt-col-secondary,
.data-table .pt-col-secondary { display: none; }

/* Bulk Import's two preview tables, scoped rather than changing .pt-table
   globally: the "Issue" column holds real sentences (especially the
   timezone-error messages), and .pt-table's base nowrap-everywhere
   behavior forced the whole table wider than its box to keep that one
   column on one line - same fix as the Timekeeping tables' own
   .tk-table treatment. */
#bi-issues-table, #bi-ready-table { table-layout: fixed; min-width: 0; }
#bi-issues-table th, #bi-issues-table td,
#bi-ready-table th, #bi-ready-table td { white-space: normal; overflow-wrap: break-word; }
#bi-issues-table th:last-child, #bi-issues-table td:last-child { width: 160px; white-space: nowrap; }

/* Punch editor: grouped In/Out field pairs + live duration summary. */
.pt-pair-group { margin-bottom: 14px; }
.pt-pair-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.pt-pair-row {
  display: flex;
  gap: 10px;
}
.pt-pair-row .pt-field {
  flex: 1;
  min-width: 0;
}
.pt-pair-row .pt-field input {
  min-width: 0;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
}
.pt-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 6px 0 16px;
}
.pt-summary-stat {
  font-size: 13px;
  color: var(--text);
}
.pt-summary-stat strong { font-size: 15px; }
.pt-summary .status-badge { margin-left: auto; }

/* Admin sub-nav now switches full pages instead of scroll-jumping to a
   long list of stacked sections - only the active .admin-section shows. */
.admin-section { display: none; }
.admin-section.active { display: block; }

/* Pay-period summary tables (by agent / by client). */
.pt-summary-section { margin-top: 18px; }
.pt-totals-row td { font-weight: 700; border-top: 2px solid var(--border); }

/* Simple label-above-input field, used where .inline-form needs a labeled
   control (Pay Periods' Generate form). Deliberately NOT the pattern of
   wrapping the input inside <label> - nesting a date/number input inside a
   flex-column <label> here was found to make the browser stop treating
   clicks on the input as clicks on the input (the calendar picker simply
   never opened). Explicit sibling <label for="..."> + <input id="..."> is
   the standard, safe pattern and doesn't have that problem.
*/
.pt-field { display: flex; flex-direction: column; gap: 4px; }
.pt-field label { font-size: 12px; color: var(--muted); margin: 0; }

/* ---- Employee menu button + dropdown (shared pattern), and the
   notification bell that uses it (Workforce OS build, merged in) ---- */
.employee-actions { position: relative; flex-shrink: 0; }
.employee-menu-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.employee-menu-btn:hover, .employee-menu-btn[aria-expanded="true"] { background: var(--bg); border-color: var(--accent); color: var(--link-focus); }
/* Generic wrapper for a per-row "⋯" menu inside a table cell (Admin
   People, etc.) - same .employee-menu-btn/.employee-menu pattern as the
   notification bell, just usable anywhere a row needs one without a
   dedicated named wrapper class per instance. */
.employee-menu-wrap { position: relative; display: inline-block; }

/* Positioned via inline top/left once opened (see openFloatingEmployeeMenu
   in public/app.js) when it needs to escape a clipped ancestor like a
   rounded-corner table - top/right here are only the fallback for
   .employee-menu instances that stay put as a normal child (the
   notification bell). z-index sits above the sticky header (20) since an
   open menu should never be paintable-under it, but below a real modal's
   backdrop (30). */
.employee-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 190px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(11, 17, 23, 0.16);
  padding: 6px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.employee-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}
.employee-menu-item:hover { background: var(--bg); }
.employee-menu-item--danger { color: var(--danger); }
.employee-menu-item--danger:hover { background: var(--danger-soft); }

/* ---- Notification bell (top header) ----
   Reuses .employee-menu's dropdown-panel look rather than inventing a
   second dropdown pattern. */
.notif-bell-wrap { position: relative; }
#notif-bell-btn { position: relative; }
.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: var(--pill-radius);
  background: var(--warning);
  color: white;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}
.notif-dropdown { min-width: 320px; max-width: 360px; max-height: 420px; overflow-y: auto; padding: 0; }
.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.85rem;
  position: sticky;
  top: 0;
  background: var(--panel);
}
.notif-mark-all-btn { background: none; border: none; color: var(--link-focus); font-size: 0.78rem; cursor: pointer; padding: 0; }
.notif-mark-all-btn:hover { text-decoration: underline; }
.notif-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg); }
.notif-item--unread { background: var(--accent-soft); }
.notif-item-title { font-weight: 600; margin-bottom: 2px; }
.notif-item-body { color: var(--muted); }
.notif-item-time { color: var(--muted-light); font-size: 0.72rem; margin-top: 4px; }
.notif-empty { padding: 20px 12px; text-align: center; color: var(--muted); font-size: 0.82rem; }

/* ============================================================
   People list redesign - avatar-led rows + the consolidated
   Edit Account drawer (Employment/Assignment/Compensation/
   Security/QA, replacing the old separate modals + row dropdown).
   ============================================================ */

/* ---- Person row (Admin People list) ---- */
.person-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto 40px;
  align-items: center;
  gap: 14px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  transition: background .16s ease;
}
.person-row:last-child { border-bottom: none; }
.person-row:hover { background: #fafaf9; }
.person-row.hidden { display: none; }

.person-identity { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: white;
  flex-shrink: 0;
}
.avatar.role-admin { background: var(--navy); }
.avatar.role-manager { background: var(--accent); }
.avatar.role-employee { background: #b7ad9e; }

.identity-text { min-width: 0; }
.identity-name { font-weight: 600; font-size: 0.88rem; }
.identity-email { color: var(--muted); font-size: 0.76rem; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tag-stack { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 120px; }
.campaign-pill {
  display: inline-flex; align-items: center;
  background: var(--accent-soft); color: var(--accent-hover);
  font-size: 0.7rem; font-weight: 600;
  padding: 3px 9px; border-radius: var(--pill-radius);
  white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis;
}
.department-text { font-size: 0.72rem; color: var(--muted); padding-left: 2px; }
.no-campaign-text { font-size: 0.72rem; color: var(--muted-light); font-style: italic; padding: 3px 2px; }

.status-dots { display: flex; align-items: center; gap: 6px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.ok { background: var(--success); }
.status-dot.warn { background: var(--warning); }
.status-dot.danger { background: var(--danger); }
.status-dot-label { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }

.edit-account-btn {
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.edit-account-btn:hover { background: var(--bg); border-color: var(--accent); color: var(--link-focus); }

/* ---- Drawer shell ---- */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(10, 12, 20, 0.45);
  z-index: 40; display: block;
}
.drawer-backdrop.hidden { display: none; }
/* Side panels sit parked just off the right edge when closed. Their drop shadow
   is large enough to bleed back onto the visible page - and with several panels
   (account, overrides, people, departments, shifts) the shadows stacked into a dark
   band down the right side - so the shadow only exists while a panel is open.
   Closed panels are also visibility:hidden so they can't be tabbed to off-screen. */
.drawer {
  position: fixed; top: 0; right: -600px; width: 600px; max-width: 92vw; height: 100%;
  background: var(--panel); box-shadow: none; visibility: hidden;
  transition: right .2s ease, box-shadow .2s ease, visibility 0s linear .2s;
  display: flex; flex-direction: column; z-index: 41;
}
.drawer.open {
  right: 0; box-shadow: -20px 0 60px rgba(11, 17, 23, 0.25); visibility: visible;
  transition: right .2s ease, box-shadow .2s ease, visibility 0s;
}

.drawer-header {
  display: flex; align-items: center; gap: 14px; padding: 22px 26px 18px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.drawer-header .avatar { width: 48px; height: 48px; font-size: 1rem; }
.drawer-header h2 { margin: 0; font-size: 1.1rem; }
.drawer-email { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.drawer-close {
  margin-left: auto; background: none; border: none; font-size: 1.3rem; color: var(--muted);
  cursor: pointer; width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
}
.drawer-close:hover { background: var(--bg); color: var(--text); }

.drawer-body { display: flex; flex: 1; min-height: 0; }
/* Namespaced account-tab-* rather than the generic .tab-btn/.tab-pane the
   login/register switcher already uses (public/index.html's #auth-screen)
   - reusing that name meant this drawer's tabs silently inherited its
   `flex: 1; border-bottom: 2px solid transparent`, which is what stretched
   each one into an oversized, equal-height box instead of a compact list
   item sized to its own content. */
.account-tab-rail {
  width: 148px; flex-shrink: 0; border-right: 1px solid var(--border);
  padding: 12px 8px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto;
}
.account-tab-btn {
  display: flex; align-items: center; gap: 7px; text-align: left;
  background: none; border: none; padding: 8px 10px; border-radius: 8px;
  font-size: 0.82rem; color: var(--muted); cursor: pointer; font-weight: 500;
  line-height: 1.3;
}
.account-tab-btn:hover { background: var(--bg); color: var(--text); }
.account-tab-btn.active { background: var(--accent-soft); color: var(--accent-hover); font-weight: 600; }
.account-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); flex-shrink: 0; visibility: hidden; }
.account-tab-dot.show { visibility: visible; }

.account-tab-content { flex: 1; overflow-y: auto; padding: 22px 26px 26px; }
.account-tab-pane { display: none; }
.account-tab-pane.active { display: block; }

/* ---- Form field layout used inside the drawer ---- */
.field-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 5px; }
.field-group { margin-bottom: 16px; }
.field-row { display: flex; gap: 12px; }
.field-row > .field-group { flex: 1; min-width: 0; }
.field-group input[type=text], .field-group input[type=email], .field-group input[type=date],
.field-group input[type=number], .field-group select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.85rem; background: var(--panel); color: var(--text); font-family: inherit;
}
.field-group input:focus, .field-group select:focus { outline: 2px solid var(--link-focus); outline-offset: -1px; border-color: var(--link-focus); }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.checkbox-row input[type=checkbox] { width: auto; }
.section-title { font-size: 0.95rem; font-weight: 700; margin: 22px 0 12px; }
.section-title:first-child { margin-top: 0; }

.save-bar {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px;
  padding-top: 14px; border-top: 1px solid var(--border);
}

/* ---- Security tab ---- */
.security-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); gap: 12px; }
.security-row:last-of-type { border-bottom: none; }
.security-row .sec-label { font-weight: 600; font-size: 0.88rem; }
.security-row .sec-desc { color: var(--muted); font-size: 0.78rem; margin-top: 2px; }
.security-row .vi-actions { flex-shrink: 0; }

.reset-flow-step.hidden { display: none; }
.reset-link-box { display: flex; gap: 8px; margin-top: 10px; }
.reset-link-box textarea { flex: 1; font-size: 0.78rem; font-family: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; resize: vertical; }
.file-drop {
  display: block; border: 1.5px dashed var(--border); border-radius: 8px; padding: 20px;
  text-align: center; color: var(--muted); font-size: 0.82rem; margin-top: 10px; cursor: pointer;
}
.file-drop:hover { border-color: var(--accent); color: var(--link-focus); }

/* ---- Dashboard / My Info / Time Off / My Schedule (employee-side overhaul) ---- */
.today-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--navy), #1a2430); color: white; border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 16px; transition: background .16s ease;
}
.today-card.on-break, .today-card.at-lunch { background: linear-gradient(135deg, var(--warning), #9c7418); }
/* Explicitly requested: light/white, matching the rest of the dashboard,
   not a dark gradient at all for this one state. Since this flips the
   card from dark-with-white-text to light-with-dark-text, the button and
   secondary text need their own overrides here too - the base
   .today-clock-actions button (white bg, navy text) and .today-status
   (white text at reduced opacity) are both styled on the assumption of a
   dark card, which no longer holds for .clocked-out specifically. */
.today-card.clocked-out {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
}
.today-card.clocked-out .today-status { opacity: 1; color: var(--muted); }
.today-card.clocked-out .today-clock-actions button {
  background: var(--accent); color: #fff; transition: background .16s ease;
}
.today-card.clocked-out .today-clock-actions button:hover { background: var(--accent-hover); }
.today-greeting { font-size: 1.15rem; font-weight: 700; margin-bottom: 4px; }
.today-status { font-size: 0.85rem; opacity: 0.85; }
.today-status .elapsed { font-weight: 700; opacity: 1; }
.today-clock-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.today-clock-actions button {
  background: white; color: var(--navy); border: none; padding: 11px 18px; border-radius: 8px;
  font-weight: 700; font-size: 0.85rem; cursor: pointer; white-space: nowrap;
}
.today-clock-actions button.secondary { background: rgba(255,255,255,0.15); color: white; }

.quick-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.quick-action-btn {
  background: var(--panel); border: 1px solid var(--border); padding: 9px 14px; border-radius: 8px;
  font-size: 0.82rem; font-weight: 600; cursor: pointer; color: var(--text); display: flex; align-items: center; gap: 6px;
}
.quick-action-btn:hover { border-color: var(--accent); color: var(--link-focus); }

.feed-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.feed-item:last-child { border-bottom: none; }
.feed-icon { font-size: 1.1rem; flex-shrink: 0; }
.feed-time { color: var(--muted-light); font-size: 0.75rem; margin-top: 2px; }

.info-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.info-header .avatar { width: 56px; height: 56px; font-size: 1.1rem; }
.info-name { font-weight: 700; font-size: 1.1rem; }
.info-sub { color: var(--muted); font-size: 0.82rem; }
.read-only-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.read-only-row:last-child { border-bottom: none; }
.read-only-row .label { color: var(--muted); }

.week-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.week-nav button { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; color: var(--muted); }
.week-nav button:hover { border-color: var(--accent); color: var(--link-focus); }
.week-range { font-weight: 600; font-size: 0.9rem; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 16px; }
.cal-day { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px; min-height: 100px; }
.cal-day.today { border-color: var(--accent); border-width: 2px; background: var(--accent-soft); }
.cal-day-label { font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.cal-day-num { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.cal-day.today .cal-day-label, .cal-day.today .cal-day-num { color: var(--accent-hover); }

/* ---- Google Chat floating bubble (see #chat-bubble-widget in index.html,
   and the chat section of app.js) - fixed to the viewport so it stays in
   the same spot regardless of scroll position or which page is active.
   Styled with ALi's own token system (spacing/radius/color tokens from the
   brand book) rather than one-off values, so it stays in sync if those
   tokens are ever retuned. ---- */
#chat-bubble-widget { position: fixed; bottom: 24px; right: 24px; z-index: 50; }
#chat-bubble-toggle-btn {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(11, 17, 23, 0.22);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
#chat-bubble-toggle-btn:hover { background: var(--accent-hover); transform: scale(1.06); box-shadow: 0 10px 28px rgba(11, 17, 23, 0.28); }
#chat-unread-badge {
  position: absolute; top: -2px; right: -2px;
  width: 12px; height: 12px;
  background: var(--danger); border: 2px solid var(--panel);
  border-radius: 999px;
}
#chat-panel {
  position: absolute; bottom: 72px; right: 0;
  width: 380px; height: 540px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: 0 16px 48px rgba(11, 17, 23, 0.22);
  display: flex; flex-direction: column; overflow: hidden;
}
#chat-panel-header {
  background: var(--panel); color: var(--text); border-bottom: 1px solid var(--border);
  padding: var(--space-3) var(--space-4); font-weight: 600; font-size: 0.95rem;
  display: flex; align-items: center; gap: var(--space-2);
  flex-shrink: 0;
}
#chat-panel-title { flex: 1; }
#chat-back-to-spaces-btn, #chat-panel-close-btn, #chat-new-chat-btn {
  background: none; border: none; color: var(--muted); cursor: pointer; line-height: 1;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .16s ease, color .16s ease;
}
#chat-back-to-spaces-btn:hover, #chat-panel-close-btn:hover, #chat-new-chat-btn:hover { background: var(--bg); color: var(--text); }
#chat-panel-close-btn { font-size: 1.25rem; }
#chat-new-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#chat-new-people-list { padding: 0 var(--space-2) var(--space-2); overflow-y: auto; flex: 1; }
.chat-new-person-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 8px; border-radius: var(--radius-md); cursor: pointer;
  transition: background .16s ease;
}
.chat-new-person-row:hover { background: var(--bg); }
.chat-new-person-row.is-selected { background: var(--accent-soft); }
.chat-new-person-checkbox {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--border-functional);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.65rem;
}
.chat-new-person-row.is-selected .chat-new-person-checkbox { background: var(--link-focus); border-color: var(--link-focus); }

/* ---- Roles & Permissions matrix (see openRolePermissionsModal in app.js)
   - same "list row with a circular checkmark" pattern as the chat
   new-person picker above, for visual consistency, rather than a grid of
   bordered boxes. ---- */
.perm-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: var(--radius-md); cursor: pointer;
  font-size: 0.88rem; transition: background .16s ease;
}
.perm-row:hover { background: var(--bg); }
.perm-row-check {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--border-functional);
  display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 0.72rem; font-weight: 700;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.perm-row.is-checked .perm-row-check { background: var(--link-focus); border-color: var(--link-focus); color: #fff; }

/* Per-user override rows (see renderUserOverridesMatrix in app.js) - two
   labeled positions rather than the single cycling checkmark the plain
   role-permission rows above use, since an override needs to show which
   of two states (not just on/off) is currently in effect, pre-set from
   the person's actual role default. */
.override-radio-group { display: flex; gap: 6px; flex-shrink: 0; }
.override-radio {
  font-size: 0.75rem; font-weight: 600; padding: 5px 12px; border-radius: var(--pill-radius);
  border: 1px solid var(--border-functional); background: var(--panel); color: var(--muted);
  cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.override-radio:hover { background: var(--bg); }
.override-radio--grant.is-active { background: var(--success); border-color: var(--success); color: #fff; }
.override-radio--deny.is-active { background: var(--danger); border-color: var(--danger); color: #fff; }
#chat-new-group-name-row { padding: 0 var(--space-3) var(--space-2); flex-shrink: 0; }
#chat-new-group-name { width: 100%; min-height: 38px; border-radius: var(--radius-md); }
#chat-new-start-btn {
  margin: 0 var(--space-3) var(--space-3); min-height: 40px; border-radius: var(--pill-radius);
  background: var(--accent); color: #fff; border: none; font-weight: 600; cursor: pointer;
  transition: background .16s ease, opacity .16s ease; flex-shrink: 0;
}
#chat-new-start-btn:hover:not(:disabled) { background: var(--accent-hover); }
#chat-new-start-btn:disabled { opacity: 0.45; cursor: not-allowed; }
#chat-new-error { margin: 0 var(--space-3) var(--space-3); flex-shrink: 0; }
#chat-panel-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
#chat-space-list-view { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#chat-search-row {
  display: flex; align-items: center; gap: var(--space-2);
  margin: var(--space-3) var(--space-3) var(--space-2);
  padding: 8px 12px; border-radius: var(--pill-radius);
  background: var(--bg); border: 1px solid var(--border); color: var(--muted);
  flex-shrink: 0;
}
#chat-search-row svg { flex-shrink: 0; }
#chat-search-input { border: none; background: none; flex: 1; font-size: 0.85rem; min-height: auto; padding: 0; color: var(--text); }
#chat-search-input:focus { outline: none; box-shadow: none; }
#chat-spaces-list { padding: 0 var(--space-2) var(--space-2); overflow-y: auto; flex: 1; }
.chat-space-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 8px; border-radius: var(--radius-md); cursor: pointer;
  transition: background .16s ease;
}
.chat-space-row:hover { background: var(--bg); }
.chat-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-soft); color: var(--link-focus);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8rem;
}
.chat-avatar.is-space { background: var(--border); color: var(--text); }
.chat-space-row-name { font-size: 0.85rem; color: var(--text); font-weight: 500; }
#chat-thread-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#chat-messages-list { flex: 1; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.chat-message { display: flex; flex-direction: column; max-width: 78%; }
.chat-message.is-other { align-self: flex-start; align-items: flex-start; }
.chat-message.is-own { align-self: flex-end; align-items: flex-end; }
.chat-message-sender { font-weight: 600; font-size: 0.7rem; color: var(--muted); margin-bottom: 2px; padding: 0 4px; }
.chat-message-text {
  white-space: pre-wrap; word-break: break-word; font-size: 0.85rem; line-height: 1.4;
  padding: 8px 12px; border-radius: var(--radius-md);
}
.chat-message.is-other .chat-message-text { background: var(--bg); color: var(--text); border-bottom-left-radius: 4px; }
.chat-message.is-own .chat-message-text { background: var(--link-focus); color: #fff; border-bottom-right-radius: 4px; }
#chat-compose-form {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3); border-top: 1px solid var(--border); flex-shrink: 0;
}
#chat-compose-input {
  flex: 1; min-height: 40px; border-radius: var(--pill-radius);
  background: var(--bg); border: 1px solid var(--border); padding: 0 var(--space-4);
}
#chat-compose-send-btn {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s ease;
}
#chat-compose-send-btn:hover { background: var(--accent-hover); }
/* Only shown when at least one client actually scheduled that day serves
   a country with a holiday on that date (see getRelevantHolidaysForDay in
   app.js) - most days show nothing here at all. */
.cal-day-holiday-flag {
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}
.shift-block { background: var(--accent); color: white; border-radius: 8px; padding: 5px 7px; font-size: 0.72rem; margin-bottom: 4px; line-height: 1.3; }
.shift-block .campaign { opacity: 0.85; font-size: 0.68rem; }
.shift-time { font-weight: 700; }
.shift-time-local { opacity: 0.85; font-size: 0.68rem; margin-top: 1px; }
.shift-time-zone-tag { font-weight: 500; opacity: 0.75; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.02em; }
.shift-swap-btn { font-size: 0.68rem; background: rgba(255,255,255,0.2); border: none; color: white; border-radius: 4px; padding: 2px 5px; margin-top: 3px; cursor: pointer; }
.cal-day-off { color: var(--muted-light); font-size: 0.72rem; }
.pto-block { border-radius: 8px; padding: 5px 7px; font-size: 0.72rem; color: white; }
.pto-block.approved { background: var(--success); }
.pto-block.pending { background: var(--warning); opacity: 0.9; border: 1px dashed white; }

.team-off-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 0.82rem; }
.team-off-row .mini-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--muted-light); color: white; font-size: 0.65rem; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }

.stat-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.stat-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.stat-value { font-size: 1.3rem; font-weight: 700; }

/* ---- Client Budgeting & Reporting ---- */
.card-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 20px; }
.card-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.summary-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.summary-value { font-size: 1.4rem; font-weight: 700; margin: 4px 0 2px; }
.variance-good { color: var(--success); }
.variance-bad { color: var(--danger); }
.chart-legend { display: flex; gap: 16px; font-size: 0.78rem; color: var(--muted); margin-bottom: 8px; }
.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.weekend-row { background: #fbfaf8; }
.total-row { font-weight: 700; background: var(--bg); }
.total-row td { border-top: 2px solid var(--border); }
#budgeting-daily-table .num, #budgeting-tier-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rate-badge { font-size: 0.78rem; color: var(--muted); }

/* ---- My Team: approval inbox + roster ---- */
.nav-badge {
  background: var(--danger); color: white; font-size: 0.68rem; font-weight: 700;
  border-radius: var(--pill-radius); padding: 1px 7px; margin-left: auto;
}
.approval-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem;
}
.approval-item:last-child { border-bottom: none; }
.approval-item .approval-type-pill {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  padding: 3px 8px; border-radius: var(--pill-radius); margin-right: 8px; flex-shrink: 0;
}
.approval-type-pill.pto { background: var(--accent-soft); color: var(--accent-hover); }
.approval-type-pill.swap { background: var(--success-soft); color: var(--success); }
.approval-type-pill.correction { background: var(--warning-soft); color: var(--warning); }
.approval-item .approval-actions { display: flex; gap: 6px; flex-shrink: 0; }

.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.roster-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.roster-card .avatar { width: 36px; height: 36px; font-size: 0.78rem; flex-shrink: 0; }
.roster-card .roster-name { font-weight: 600; font-size: 0.85rem; }
.roster-card .roster-dept { font-size: 0.75rem; color: var(--muted); }
.roster-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-right: 5px; }
.roster-status-row { display: flex; align-items: center; font-size: 0.75rem; color: var(--muted); margin-top: 2px; }

/* ---- Timekeeping rework ---- */
.tk-attention-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(135deg, #7a5a12, #9c7418); color: white;
  border-radius: var(--radius); padding: 18px 22px; margin: 16px 0;
}
.tk-attention-banner.all-clear { background: linear-gradient(135deg, #1e6b4a, #2f9e6b); }
.tk-attention-headline { font-size: 1.05rem; font-weight: 700; margin-bottom: 2px; }
.tk-attention-sub { font-size: 0.82rem; opacity: 0.85; }
.tk-attention-btn {
  background: white; color: var(--navy); border: none; padding: 10px 18px; border-radius: 8px;
  font-weight: 700; font-size: 0.83rem; cursor: pointer; white-space: nowrap;
}

.tk-view-tabs { display: flex; gap: 6px; margin: 14px 0 10px; border-bottom: 1px solid var(--border); }
.tk-view-tab { background: none; border: none; padding: 10px 4px; margin-right: 18px; font-size: 0.9rem; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
.tk-view-tab.active { color: var(--text); border-bottom-color: var(--link-focus); }

.tk-status-tabs { display: flex; gap: 2px; margin: 14px 0; background: var(--bg); border-radius: 8px; padding: 3px; width: fit-content; }
/* Looser than .tk-status-tabs (6 preset buttons plus two date inputs plus
   a clear button wouldn't fit that tight pill-segment layout meant for 3
   items) - individual buttons still reuse .tk-status-tab's own styling,
   just without the cramped shared background/padding wrapper. */
.tk-date-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; }
.tk-date-presets .tk-status-tab { background: var(--bg); border: 1px solid var(--border); padding: 6px 12px; font-size: 0.78rem; }
.tk-date-presets .tk-status-tab.active { background: var(--link-focus); color: #fff; border-color: var(--link-focus); box-shadow: none; }
.tk-status-tab { background: none; border: none; padding: 8px 16px; border-radius: 8px; font-size: 0.82rem; font-weight: 600; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 6px; }
.tk-status-tab.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.tk-status-count { background: var(--border); color: var(--muted); font-size: 0.7rem; padding: 1px 7px; border-radius: var(--pill-radius); }
.tk-status-tab.active .tk-status-count { background: var(--warning-soft); color: var(--warning); }
.tk-status-tab[data-tk-status="all"].active .tk-status-count { background: var(--accent-soft); color: var(--accent-hover); }
.tk-status-tab[data-tk-status="clean"].active .tk-status-count { background: var(--success-soft); color: var(--success); }

.tk-employee-group { margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.tk-employee-group-header { display: flex; align-items: center; gap: 10px; background: var(--bg); padding: 10px 14px; font-weight: 600; font-size: 0.88rem; flex-wrap: wrap; }
.tk-employee-group-header .campaign-pill { font-size: 0.68rem; font-weight: 600; background: var(--accent-soft); color: var(--accent-hover); padding: 3px 9px; border-radius: var(--pill-radius); }
.tk-employee-group-header .tk-subtotal { margin-left: auto; font-size: 0.8rem; color: var(--muted); font-weight: 500; }
.tk-employee-group-header .tk-subtotal strong { color: var(--text); font-weight: 700; }

.tk-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; table-layout: fixed; }
.tk-table th, .tk-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-table thead th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); font-weight: 700; background: none; }
.tk-table tbody tr:last-child td { border-bottom: none; }
.tk-table tbody tr:hover { background: #fafaf9; }
.tk-table tr.tk-exception-row { background: var(--danger-soft); }
.tk-table tr.tk-exception-row:hover { background: #f8e0e0; }
.tk-table tr.tk-exception-row td:first-child { border-left: 3px solid var(--danger); }
.tk-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.tk-table td.tk-status-cell, .tk-table th.tk-status-col { white-space: normal; overflow: visible; text-overflow: clip; }
.tk-table th.tk-actions-col, .tk-table td.tk-actions-cell { width: 170px; }
.tk-table th.tk-status-col { width: auto; }
.tk-correction-flag { display: block; font-size: 0.72rem; font-weight: 600; color: var(--warning); margin-top: 3px; }
.tk-locked-pill { font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: var(--pill-radius); background: var(--border); color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.unpaid-strike { text-decoration: line-through; color: var(--muted-light); }

.settings-toggle { display: flex; align-items: center; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); cursor: pointer; color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.settings-toggle:hover { color: var(--text); }
.settings-chevron { transition: transform .16s ease; display: inline-block; }
.settings-chevron.open { transform: rotate(90deg); }
.settings-panel { display: none; margin-top: 12px; }
.settings-panel.open { display: block; }

/* Show/hide password toggle on the auth screens */
.pw-wrap { position: relative; display: flex; }
.pw-wrap > input { flex: 1; width: 100%; padding-right: 46px; }
.pw-toggle {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--muted); cursor: pointer;
}
.pw-toggle:hover { color: var(--text); }
.pw-toggle:focus-visible { outline: 2px solid var(--link-focus); outline-offset: 1px; }

/* Deactivated people stay in the list (history is kept) but read as inactive */
.person-row.is-deactivated { opacity: 0.6; }
.person-row.is-deactivated .identity-name { text-decoration: line-through; }

/* Contractor payment method line on the Employees list cards */
.payment-method-text { font-size: 0.72rem; padding-left: 2px; font-weight: 600; color: var(--text); }
.payment-method-text.unset { font-weight: 400; font-style: italic; color: var(--muted); }

/* ---- Employees list: wider page + aligned columns ---- */
#view-admin { max-width: 1500px; }
#admin-users-list { --people-cols: minmax(230px, 1.5fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(120px, 0.8fr) minmax(90px, 0.6fr) 104px 112px 76px; overflow-x: auto; }
.person-list-header {
  display: grid; grid-template-columns: var(--people-cols); gap: 16px; min-width: 1056px;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
#admin-users-list .person-row { grid-template-columns: var(--people-cols); gap: 16px; min-width: 1056px; }
.pcol { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
.pcol > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcol-main { font-size: 0.8rem; font-weight: 600; color: var(--text); }
.pcol-sub { font-size: 0.72rem; color: var(--muted); }
.pcol-empty { font-weight: 400; font-style: italic; color: var(--muted-light); }
.avatar.role-contractor { background: #6b7a99; }
.status-badge--role-contractor { background: rgba(176, 124, 40, 0.14); color: #8a5a12; border: 1px solid rgba(176, 124, 40, 0.3); }

/* ---- People page: header button, summary cards, side panel ---- */
.people-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.people-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 4px 0 26px; }
.people-stat {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
  font: inherit; color: var(--text);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.people-stat:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(11, 17, 23, 0.08); }
.people-stat:focus-visible { outline: 2px solid var(--link-focus); outline-offset: 2px; }
.people-stat-num { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.people-stat-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

.people-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 26px 28px; }
.people-panel-body .inline-form { flex-direction: column; align-items: stretch; margin: 0 0 10px; }
.people-panel-body .inline-form input, .people-panel-body .inline-form select { width: 100%; min-width: 0; }
.people-panel-body #bulk-invite-details { margin-top: 18px; }
.people-panel-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 8px; cursor: pointer;
  border-bottom: 1px solid var(--border); border-radius: 8px; transition: background .16s ease;
}
.people-panel-row:hover, .people-panel-row:focus-visible { background: #fafaf9; outline: none; }
.people-panel-row .avatar { width: 38px; height: 38px; }
.people-panel-row-text { flex: 1; min-width: 0; }
.people-panel-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.people-panel-row-details { font-size: 0.74rem; color: var(--muted); margin-top: 4px; }

/* ---- Departments list + detail panel ---- */
#dept-panel { right: -720px; width: 680px; }
#dept-panel.open { right: 0; }
#admin-departments-list { --dept-cols: minmax(220px, 2fr) minmax(200px, 1.5fr) 80px 100px 190px; overflow-x: auto; }
.dept-list-header, .dept-row { display: grid; grid-template-columns: var(--dept-cols); gap: 16px; min-width: 820px; align-items: center; padding: 12px 14px; }
.dept-list-header { padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dept-row { cursor: pointer; border-bottom: 1px solid var(--border); transition: background .16s ease; }
.dept-row:hover, .dept-row:focus-visible { background: #fafaf9; outline: none; }
.dp-section { margin-bottom: 26px; }
.dp-section .section-title { margin-top: 0; }
.dp-inline { display: flex; gap: 8px; align-items: center; }
.dp-inline input, .dp-inline select { flex: 1; min-width: 0; }
.dp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dp-checks { display: flex; gap: 16px; flex-wrap: wrap; }
.dp-checks label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: 0.85rem; cursor: pointer; }
.dp-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.dp-person { display: flex; justify-content: space-between; gap: 12px; padding: 8px 6px; border-bottom: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.dp-person:hover, .dp-person:focus-visible { background: #fafaf9; outline: none; }

/* ---- Three-step delete guard ---- */
.dg-card { max-width: 500px; }
.dg-steps { display: flex; gap: 6px; margin: 4px 0 8px; padding-right: 28px; }
.dg-step { flex: 1; height: 4px; border-radius: 2px; background: var(--border); }
.dg-step.on { background: var(--danger); }
.dg-step-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
#dg-body p { margin: 0 0 10px; }
.dg-list { margin: 0 0 12px; padding-left: 20px; font-size: 0.88rem; }
.dg-list li { margin-bottom: 4px; }
.dg-blockers { background: var(--danger-soft); border: 1px solid var(--danger); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; color: var(--text); }
.dg-blockers strong { color: var(--danger); }
.dg-blockers ul { margin: 6px 0 0; padding-left: 18px; font-size: 0.86rem; }
.dg-warn { background: var(--danger-soft); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 0.88rem; }
.dg-ack { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 0.9rem; }
.dg-ack input { margin-top: 3px; }
#dg-body input[type="text"] { width: 100%; margin-top: 6px; }
.dg-name { font-weight: 700; background: var(--bg); padding: 1px 6px; border-radius: 6px; border: 1px solid var(--border); }
.dp-danger { border-top: 1px solid var(--border); padding-top: 18px; }
.dp-reasons { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; max-width: 60%; }
.dp-reason { font-size: 0.66rem; font-weight: 600; padding: 2px 8px; border-radius: var(--pill-radius); background: var(--accent-soft); color: var(--accent-hover); white-space: nowrap; }

/* ---- Org chart ---- */
.oc-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#orgchart-root { margin-top: 8px; }
.oc-node { position: relative; margin-bottom: 10px; }
.oc-card {
  display: flex; align-items: center; gap: 12px; max-width: 520px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px;
  cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease;
}
.oc-card:hover, .oc-card:focus-visible { border-color: var(--accent); box-shadow: 0 2px 10px rgba(11, 17, 23, 0.08); outline: none; }
.oc-card .avatar { width: 40px; height: 40px; }
.oc-card-text { flex: 1; min-width: 0; }
.oc-name { font-weight: 600; font-size: 0.88rem; }
.oc-sub { font-size: 0.74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-sub:empty { display: none; }
.oc-toggle {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px;
  font: inherit; font-size: 0.72rem; color: var(--muted); cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.oc-toggle:hover { border-color: var(--accent); color: var(--text); }
.oc-children { margin: 8px 0 0 22px; padding-left: 20px; border-left: 2px solid var(--border); }
.oc-children > .oc-node::before, .oc-children > .oc-group::before {
  content: ""; position: absolute; left: -20px; top: 28px; width: 20px; border-top: 2px solid var(--border);
}
.oc-group { position: relative; margin-bottom: 10px; }
.oc-group-head {
  background: none; border: 0; padding: 4px 2px; font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--text);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.oc-group-head:hover { color: var(--link-focus); }
.oc-caret { color: var(--muted); font-size: 0.7rem; width: 10px; }
.oc-count { font-size: 0.68rem; font-weight: 600; background: var(--accent-soft); color: var(--accent-hover); padding: 1px 8px; border-radius: var(--pill-radius); }
.oc-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 6px 0 4px; }
.oc-chip {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.oc-chip:hover, .oc-chip:focus-visible { border-color: var(--accent); background: #fafaf9; outline: none; }
.oc-chip .avatar { width: 32px; height: 32px; font-size: 0.7rem; }
.oc-chip-text { min-width: 0; }
.oc-hit { border-color: var(--accent); background: var(--accent-soft); }
.oc-unassigned { margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--border); }
.oc-unassigned-title { font-size: 0.85rem; font-weight: 700; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.oc-unassigned > .oc-children { border-left: 0; margin-left: 0; padding-left: 0; }
.oc-unassigned > .oc-children > .oc-group::before { display: none; }

/* ---- Org chart: view switcher, top-down chart, by-client ---- */
.oc-views { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel); }
.oc-views button { background: none; border: 0; padding: 7px 14px; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.oc-views button + button { border-left: 1px solid var(--border); }
.oc-views button:hover { color: var(--text); }
.oc-views button.active { background: var(--accent-soft); color: var(--accent-hover); }
.oc-zoom { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); }
.oc-zoom.hidden { display: none; }
.oc-zoom .ghost-btn { padding: 4px 10px; }

.oc-tree-scroll { overflow: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 22px 16px 30px; }
.oc-tree { --oc-line: #c3c8d0; width: max-content; min-width: 100%; }
.oc-tree ul { display: flex; justify-content: center; align-items: flex-start; padding: 22px 0 0; margin: 0; position: relative; list-style: none; }
.oc-tree li { list-style: none; text-align: center; position: relative; padding: 22px 8px 0; display: flex; flex-direction: column; align-items: center; }
.oc-tree li::before, .oc-tree li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 2px solid var(--oc-line); }
.oc-tree li::after { right: auto; left: 50%; border-left: 2px solid var(--oc-line); }
.oc-tree li:only-child::before, .oc-tree li:only-child::after { display: none; }
.oc-tree li:only-child { padding-top: 0; }
.oc-tree li:first-child::before, .oc-tree li:last-child::after { border: 0 none; }
.oc-tree li:last-child::before { border-right: 2px solid var(--oc-line); border-radius: 0 6px 0 0; }
.oc-tree li:first-child::after { border-radius: 6px 0 0 0; }
.oc-tree ul ul::before { content: ""; position: absolute; top: 0; left: 50%; border-left: 2px solid var(--oc-line); height: 22px; }
/* the top level has no parent to connect up to */
.oc-tree ul.oc-roots { padding-top: 0; gap: 48px; justify-content: center; }
.oc-tree ul.oc-roots > li { padding-top: 0; }
.oc-tree ul.oc-roots > li::before, .oc-tree ul.oc-roots > li::after { display: none; }
.oc-tcard {
  width: 220px; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 1px 4px rgba(11, 17, 23, 0.07); transition: border-color .16s ease, box-shadow .16s ease;
}
.oc-tcard:hover, .oc-tcard:focus-visible { border-color: var(--accent); box-shadow: 0 2px 10px rgba(11, 17, 23, 0.12); outline: none; }
.oc-tcard .avatar { width: 36px; height: 36px; font-size: 0.75rem; }
.oc-tbtn {
  margin-top: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 10px;
  font: inherit; font-size: 0.7rem; color: var(--muted); cursor: pointer; position: relative; z-index: 1;
}
.oc-tbtn:hover { border-color: var(--accent); color: var(--text); }
.oc-gbox { width: 220px; text-align: left; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; }
.oc-glist { margin-top: 4px; }
.oc-prow { display: flex; flex-direction: column; padding: 5px 6px; border-radius: 6px; cursor: pointer; min-width: 0; }
.oc-prow:hover, .oc-prow:focus-visible { background: var(--panel); outline: none; }
.oc-prow .oc-name { font-size: 0.8rem; }
.oc-tloners { margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--border); }
.oc-tloners-boxes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.oc-clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; align-items: start; }
.oc-client { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px 12px; }
.oc-client-head { background: none; border: 0; padding: 2px 0 6px; font: inherit; font-size: 0.95rem; font-weight: 700; color: var(--text); cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; }
.oc-client-head:hover { color: var(--link-focus); }
.oc-camp { margin-top: 8px; }
.oc-camp-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.oc-crow { display: flex; align-items: center; gap: 10px; padding: 6px 6px; border-radius: 8px; cursor: pointer; border-top: 1px solid var(--border); }
.oc-crow:first-of-type { border-top: 0; }
.oc-crow:hover, .oc-crow:focus-visible { background: #fafaf9; outline: none; }
.oc-crow .avatar { width: 30px; height: 30px; font-size: 0.68rem; flex-shrink: 0; }
.oc-crow .oc-chip-text { flex: 1; min-width: 0; }
.oc-reports { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.oc-gblock { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 1160px; }

/* ---- Archived departments ---- */
.dept-archived-toggle { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); cursor: pointer; margin: 4px 0 10px; }
.dept-row.is-archived { opacity: 0.62; }
.dept-row.is-archived:hover { opacity: 0.9; }
.dept-archived-badge { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--pill-radius); background: var(--bg); border: 1px solid var(--border); color: var(--muted); margin-left: 6px; vertical-align: middle; }
.dept-actions { display: flex; gap: 8px; justify-content: flex-end; }
.dp-archived-banner { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; font-size: 0.86rem; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dp-archived-banner .ghost-btn { margin-left: auto; }

/* ---- Roles & Permissions: cards, the add/edit window, override people ---- */
.role-note { font-size: 0.8rem; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 0 0 18px; }
.role-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.role-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px 12px;
  display: flex; flex-direction: column; gap: 5px; cursor: pointer; text-align: left; font: inherit; color: var(--text);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.role-card:hover, .role-card:focus-visible { border-color: var(--accent); box-shadow: 0 2px 10px rgba(11, 17, 23, 0.09); outline: none; }
.role-card-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.role-card-name { font-weight: 700; font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-tag { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 1px 7px; border-radius: var(--pill-radius); background: var(--bg); border: 1px solid var(--border); color: var(--muted); flex-shrink: 0; }
.role-card-edit { margin-left: auto; padding: 3px 10px; min-height: 0; flex-shrink: 0; }
.role-card-desc { margin: 0; font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-card-stats { display: flex; gap: 14px; font-size: 0.78rem; color: var(--muted); margin-top: 3px; }
.role-card-stats strong { color: var(--text); font-size: 0.92rem; }
.role-card-bar { height: 4px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.role-card-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

.re-card { max-width: 780px; max-height: 92vh; overflow: hidden; }
.re-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 8px; }
.re-fields .field-group:nth-child(3) { grid-column: 1 / -1; }
.re-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.re-toolbar .search-input { flex: 1; min-width: 0; }
.re-count { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.re-matrix { overflow-y: auto; min-height: 140px; max-height: 44vh; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px 8px; }
.re-group { margin-bottom: 6px; }
.re-group-head { position: sticky; top: 0; z-index: 1; background: var(--panel); display: flex; align-items: center; gap: 10px; padding: 10px 2px 6px; border-bottom: 1px solid var(--border); }
.re-group-name { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); }
.re-group-count { font-size: 0.7rem; color: var(--muted); }
.re-group-toggle { margin-left: auto; background: none; border: 0; font: inherit; font-size: 0.74rem; font-weight: 600; color: var(--link-focus); cursor: pointer; padding: 2px 4px; }
.re-group-toggle:hover { text-decoration: underline; }
.re-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding-top: 4px; }
.re-footer { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
@media (max-width: 640px) { .re-fields, .re-rows { grid-template-columns: 1fr; } }

.override-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.override-person { display: flex; align-items: flex-start; gap: 10px; position: relative; min-width: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.override-person:hover, .override-person:focus-visible { border-color: var(--accent); background: #fafaf9; outline: none; }
.override-person .avatar { width: 32px; height: 32px; font-size: 0.7rem; flex-shrink: 0; }
.override-person-text { min-width: 0; }

/* ---- Per-user overrides: filters, richer cards, selection, bulk window ---- */
.ov-listbar { display: flex; align-items: center; gap: 16px; margin: 6px 0 10px; }
.ov-selectall { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); cursor: pointer; }
.ov-tier-head { grid-column: 1 / -1; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ov-tier-head--top { color: #8a5a12; }
.override-person.is-top { border-color: #d9b45b; background: linear-gradient(180deg, #fffaf0, var(--panel)); box-shadow: inset 3px 0 0 #c9952b; }
.override-person.is-top:hover { background: #fff6e2; }
.override-person.is-selected { border-color: var(--link-focus); background: var(--accent-soft); }
.ov-check { display: flex; align-items: center; justify-content: center; width: 26px; height: 32px; flex-shrink: 0; cursor: pointer; }
.ov-check input { width: 16px; height: 16px; margin: 0; pointer-events: none; }
.ov-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ov-role { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--pill-radius); background: var(--bg); border: 1px solid var(--border); color: var(--muted); }
.ov-role--top { background: #fdf0d2; border-color: #d9b45b; color: #7a4f0d; }
.ov-type { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--pill-radius); background: rgba(176, 124, 40, 0.14); border: 1px solid rgba(176, 124, 40, 0.3); color: #8a5a12; }
.ov-access { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; font-size: 0.74rem; }
.ov-access-count { color: var(--muted); }
.ov-access-count strong { color: var(--text); }
.ov-chip { font-size: 0.68rem; font-weight: 700; padding: 1px 8px; border-radius: var(--pill-radius); cursor: help; }
.ov-chip--grant { background: rgba(46, 139, 87, 0.14); color: #1f6b41; }
.ov-chip--deny { background: rgba(192, 57, 43, 0.12); color: #a12d22; }
.ov-follow { color: var(--muted-light); font-style: italic; }
.ov-selection-bar {
  position: sticky; bottom: 14px; z-index: 6; margin-top: 14px;
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: var(--panel); border: 1px solid var(--link-focus); border-radius: 12px; box-shadow: 0 6px 24px rgba(11, 17, 23, 0.18);
}
.ov-selection-bar.hidden { display: none; }
.ob-people { display: flex; flex-wrap: wrap; gap: 6px; max-height: 84px; overflow-y: auto; padding: 2px 0; }
.ob-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft); color: var(--accent-hover); font-size: 0.76rem; font-weight: 600; padding: 3px 4px 3px 10px; border-radius: var(--pill-radius); }
.ob-chip button { background: none; border: 0; cursor: pointer; font-size: 1rem; line-height: 1; color: inherit; padding: 0 6px; border-radius: 50%; }
.ob-chip button:hover { background: rgba(0, 0, 0, 0.1); }
.ob-setall { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.ob-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 4px; border-radius: 8px; }
.ob-row.is-changed { background: var(--accent-soft); }
.ob-row-label { display: flex; flex-direction: column; min-width: 0; font-size: 0.86rem; }
.ob-row-sub { font-size: 0.68rem; color: var(--muted); }
.ob-segs { display: inline-flex; border: 1px solid var(--border-functional); border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--panel); }
.ob-seg { background: none; border: 0; padding: 5px 11px; font: inherit; font-size: 0.74rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.ob-seg + .ob-seg { border-left: 1px solid var(--border-functional); }
.ob-seg:hover { background: var(--bg); color: var(--text); }
.ob-seg--none.is-active { background: var(--bg); color: var(--text); }
.ob-seg--grant.is-active { background: var(--success); color: #fff; }
.ob-seg--deny.is-active { background: var(--danger); color: #fff; }
.ob-seg--clear.is-active { background: var(--link-focus); color: #fff; }

/* ---- Per-user overrides: modern filter bar (search + pills + menus) ---- */
.ov-filterbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 4px; }
.ov-search { position: relative; flex: 0 1 300px; min-width: 220px; }
.ov-search input {
  width: 100%; min-height: 42px; padding: 0 40px 0 40px !important; font-size: 0.92rem;
  background-position: 15px center; background-size: 16px 16px;
  background-color: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(11, 17, 23, 0.04);
}
.ov-search input:focus { outline: none; border-color: var(--link-focus); box-shadow: 0 0 0 4px var(--accent-soft); }
.ov-search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--bg); color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.ov-search-clear:hover { background: var(--border); color: var(--text); }
.ov-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ov-pill { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); transition: border-color .16s ease, background .16s ease; }
.ov-pill:hover { border-color: var(--border-functional); }
.ov-pill-main { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 7px 8px 7px 14px; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; border-radius: 999px; }
.ov-pill-main::after { content: ""; width: 6px; height: 6px; margin: -3px 6px 0 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); opacity: 0.55; transition: transform .16s ease; }
.ov-pill.is-open .ov-pill-main::after { transform: rotate(225deg); margin-top: 3px; }
.ov-pill.is-open { border-color: var(--link-focus); }
.ov-pill.is-active { background: var(--accent-soft); border-color: transparent; }
.ov-pill.is-active .ov-pill-main { color: var(--accent-hover); padding-right: 2px; }
.ov-pill.is-active .ov-pill-main::after { display: none; }
.ov-pill-val { font-weight: 700; color: var(--accent-hover); }
.ov-pill-x { background: none; border: 0; padding: 0 11px 0 4px; font-size: 1.05rem; line-height: 1; color: var(--accent-hover); cursor: pointer; border-radius: 999px; opacity: 0.7; }
.ov-pill-x:hover { opacity: 1; }
.ov-clearall { background: none; border: 0; padding: 7px 8px; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--link-focus); cursor: pointer; }
.ov-clearall:hover { text-decoration: underline; }
.ov-menu { position: absolute; z-index: 30; min-width: 250px; max-width: 340px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 36px rgba(11, 17, 23, 0.18); padding: 6px; display: flex; flex-direction: column; }
.ov-menu.hidden { display: none; }
.ov-menu-search { padding: 4px 4px 6px; }
.ov-menu-search input { width: 100%; min-height: 36px; padding: 0 10px; font-size: 0.85rem; border-radius: 9px; background: var(--bg); border: 1px solid var(--border); }
.ov-menu-list { overflow-y: auto; max-height: 300px; }
.ov-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; text-align: left; padding: 8px 10px; border-radius: 8px; font: inherit; font-size: 0.85rem; color: var(--text); cursor: pointer; }
.ov-menu-item:hover, .ov-menu-item:focus-visible { background: var(--bg); outline: none; }
.ov-menu-item.hidden { display: none; }
.ov-menu-item.is-selected { color: var(--accent-hover); font-weight: 700; }
.ov-menu-count { margin-left: auto; font-size: 0.74rem; font-weight: 500; color: var(--muted); }
.ov-menu-check { margin-left: auto; color: var(--link-focus); font-weight: 700; }
.ov-menu-count + .ov-menu-check { margin-left: 8px; }
.ov-menu-group { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 3px; }
.ov-menu-group.hidden { display: none; }
.ov-menu-seg { display: flex; background: var(--bg); border-radius: 9px; padding: 3px; margin: 2px 4px 6px; }
.ov-menu-segbtn { flex: 1; background: none; border: 0; padding: 6px 8px; border-radius: 7px; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.ov-menu-segbtn.is-active { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(11, 17, 23, 0.12); }
.ov-listbar { margin-top: 14px; }

.filterbar-host { margin: 0 0 12px; }

/* ---- Schedule: toolbar + the Add/edit shift panel ---- */
.sch-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 14px; }
.sch-toolbar .filterbar-host { flex: 1 1 auto; margin: 0; }
.sch-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sch-daterange { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 0 10px; min-height: 42px; color: var(--muted); }
.sch-daterange.hidden { display: none; }
.sch-daterange input { border: 0; background: transparent; padding: 0; min-height: 0; width: 126px; font-size: 0.85rem; box-shadow: none; }
.sch-daterange input:focus { outline: none; box-shadow: none; }
.sch-daterange:focus-within { border-color: var(--link-focus); box-shadow: 0 0 0 4px var(--accent-soft); }

#shift-panel .people-panel-body { padding-bottom: 12px; }
.shift-emp-chip { display: flex; align-items: center; gap: 10px; background: var(--accent-soft); border-radius: 12px; padding: 8px 12px; }
.shift-emp-chip.hidden { display: none; }
.shift-emp-chip .shift-emp-text { flex: 1; min-width: 0; }
.shift-emp-chip .avatar, .shift-emp-item .avatar { width: 34px; height: 34px; font-size: 0.72rem; flex-shrink: 0; }
.shift-emp-list { margin-top: 8px; max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.shift-emp-item { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; text-align: left; padding: 7px 8px; border-radius: 9px; font: inherit; cursor: pointer; }
.shift-emp-item:hover, .shift-emp-item:focus-visible { background: var(--bg); outline: none; }
.shift-emp-text { min-width: 0; }
.shift-duration { font-size: 0.88rem; color: var(--muted); background: var(--bg); border-radius: 10px; padding: 9px 12px; margin: 2px 0 10px; }
.shift-duration strong { color: var(--text); font-size: 1rem; }
.shift-presets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.shift-presets .ghost-btn { padding: 3px 11px; min-height: 0; }
.shift-panel-footer { display: flex; align-items: center; gap: 8px; padding: 14px 26px; border-top: 1px solid var(--border); background: var(--panel); flex-shrink: 0; }

/* A search box inside a form field group: the group's own input styling replaces the
   background (and with it the magnifier icon), so restore it here. */
.field-group input[type=text].search-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%239d9a94' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7.5' cy='7.5' r='5'/%3E%3Cpath d='M15.5 15.5l-3.6-3.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; background-size: 15px 15px; }
#shift-panel input[type=date], #shift-panel input[type=time] { width: 100%; }

/* ---- Client invoices ---- */
.drawer--wide { width: 700px; right: -740px; max-width: 94vw; }
.drawer--wide.open { right: 0; }
.cinv-period { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cinv-ack { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); cursor: pointer; }
.cinv-ack.hidden { display: none; }
.cinv-header, .cinv-row { display: grid; grid-template-columns: 100px minmax(180px, 1.4fr) minmax(200px, 1.2fr) 150px 100px; gap: 16px; align-items: center; padding: 12px 14px; min-width: 720px; }
.cinv-header { padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cinv-row { border-bottom: 1px solid var(--border); cursor: pointer; font-size: 0.88rem; transition: background .16s ease; }
.cinv-row:hover, .cinv-row:focus-visible { background: #fafaf9; outline: none; }
.cinv-row.is-void { opacity: 0.55; }
.cinv-number { font-weight: 700; font-variant-numeric: tabular-nums; }
.cinv-num { text-align: right; font-variant-numeric: tabular-nums; }
#cinv-list { overflow-x: auto; }
.cinv-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.cinv-summary > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.cinv-k { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 2px; }
.cinv-bigtotal { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cinv-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; margin: 6px 0 14px; }
.cinv-table th { text-align: left; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.cinv-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cinv-table th.cinv-num, .cinv-table td.cinv-num { text-align: right; }
.cinv-table td .pcol-sub { display: block; }
.cinv-table tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--border); padding-top: 10px; }
.cinv-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 4px; margin-bottom: 14px; background: var(--panel); }
.cinv-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cinv-note { font-size: 0.82rem; border-radius: 10px; padding: 9px 12px; margin: 0 0 10px; }
.cinv-note--error { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--text); }
.cinv-note--warn { background: #fdf3dc; border: 1px solid #d9b45b; color: #6b4a0c; }
.cinv-note--info { background: var(--bg); border: 1px solid var(--border); color: var(--muted); }
.cinv-meta { display: flex; flex-direction: column; gap: 10px; font-size: 0.86rem; margin-top: 6px; }
@media (max-width: 640px) { .cinv-summary { grid-template-columns: repeat(2, 1fr); } }
.cinv-card-sub { margin: 2px 0 4px; }

/* ---- QuickBooks page ---- */
.qb-card { border: 1px solid var(--border); border-radius: 14px; background: var(--panel); padding: 18px 20px; margin-bottom: 16px; max-width: 820px; }
.qb-card h3 { margin: 0; font-size: 1.05rem; }
.qb-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.qb-steps { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; font-size: 0.9rem; }
.qb-copy { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; flex-wrap: wrap; }
.qb-copy code, .qb-pre { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 0.82rem; word-break: break-all; }
.qb-pre { display: block; margin: 6px 0; white-space: pre-wrap; }
.qb-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.qb-checks { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.qb-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; }
.qb-check-icon { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0.72rem; font-weight: 700; background: var(--bg); color: var(--muted); }
.qb-check--ok .qb-check-icon { background: #dff3e6; color: #1d6b3a; }
.qb-check--warn .qb-check-icon { background: #fdf3dc; color: #8a5a00; }
.qb-check--error .qb-check-icon { background: #fbe1e1; color: #a12626; }
.qb-details { margin-top: 8px; font-size: 0.86rem; }
.qb-details summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.qb-details ul { margin: 6px 0 0; padding-left: 20px; columns: 2; }

/* ---- Client invoices: bill-to block, title, tax rows ---- */
.cinv-docmeta { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin: 4px 0 12px; font-size: 0.88rem; line-height: 1.45; }
.cinv-docmeta > div > div { margin-bottom: 8px; }
.cinv-title { margin: 6px 0 2px; font-size: 1.02rem; }
.cinv-table tfoot tr.cinv-subrow td { font-weight: 500; border-top: 0; padding-top: 6px; color: var(--muted); }
.cinv-table tfoot tr.cinv-subrow:first-child td { border-top: 2px solid var(--border); padding-top: 10px; }
.cinv-table tfoot tr:last-child td { border-top: 2px solid var(--border); }
@media (max-width: 640px) { .cinv-docmeta { grid-template-columns: 1fr; } }
#cinv-basis-hint { margin-top: 8px; }
.cinv-ref { font-size: 0.72rem; opacity: 0.85; }

/* ---- Client invoices: adjustments + monthly positions ---- */
.cinv-credit { color: #1d6b3a; }
.cinv-table tbody.cinv-adjust tr.cinv-grouprow td { background: var(--bg); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.03em; padding: 8px; border-top: 2px solid var(--border); }
.cinv-table tbody.cinv-adjust tr.cinv-grouprow td span { font-weight: 500; color: var(--muted); letter-spacing: 0; }
.cinv-table tbody.cinv-adjust tr.cinv-subrow td { font-weight: 600; color: var(--text); border-bottom: 0; }
.cinv-pos-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cinv-pos-card { max-width: 920px; }
.cinv-pos-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cinv-pos-totals { display: flex; flex-direction: column; gap: 4px; margin: 0 0 6px; font-size: 0.86rem; color: var(--muted); }

/* A checkbox with its text beside it (the page's default label style stacks them). */
.checkbox-label { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 0.88rem; font-weight: 500; color: var(--text); line-height: 1.4; }
.checkbox-label input[type="checkbox"] { width: auto; min-height: 0; margin: 3px 0 0; flex-shrink: 0; }
.checkbox-label .hint { font-weight: 400; }
.checkbox-label.hidden { display: none !important; }

/* A scheduled "shift" that can't be real (over 24 hours): shown in red so it can't hide among normal rows. */
.sched-odd { color: #b42318; font-weight: 700; }

/* ---- Send to QuickBooks ---- */
.qbs-target { font-size: 0.9rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qbs-section { margin-bottom: 18px; }
.qbs-section select, .qbs-section input[type="text"], .qbs-section input[type="number"], .qbs-section textarea { width: 100%; }
.qbs-section input[type="text"].hidden { display: none; }
#qbs-customer-name { margin-top: 8px; }
.qbs-items { margin: 4px 0 12px; padding-left: 18px; font-size: 0.88rem; display: flex; flex-direction: column; gap: 4px; }
.qbs-ok { color: #1d6b3a; } .qbs-new { color: var(--muted); } .qbs-bad { color: #b42318; font-weight: 700; }
.qb-sent-card { border: 1px solid #b7dfc6; background: #eef8f1; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.qb-sent-card h3 { margin: 0; font-size: 1.05rem; color: #1d6b3a; }
.qb-sent-card p { margin: 0; }
.cinv-credit-bad { color: #b42318; font-weight: 600; }
.qb-sent-card .ghost-btn { align-self: flex-start; text-decoration: none; }
.qbs-section .hint { margin: 6px 0 0; }
.qbs-section .field-label { margin-bottom: 6px; }

/* Reset-password / sign-in email */
.drawer-header .drawer-reset-btn { margin-left: auto; white-space: nowrap; }
.drawer-header .drawer-reset-btn + .drawer-close { margin-left: 0; }
.person-actions { display: flex; gap: 6px; justify-content: flex-end; }
.reset-pw-btn {
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.reset-pw-btn:hover { background: var(--bg); border-color: var(--accent); color: var(--link-focus); }
/* The reset dialog opens from inside the person's drawer (z-index 41), so it must sit above it, and below the confirm dialog (60). */
#pw-reset-modal { z-index: 50; }
.account-tab-pane .section-title + .hint { margin-bottom: 10px; }

/* ---- Personal details (first-time popup + My Info) ---- */
.pd-card { max-width: 640px; width: 94vw; max-height: 92vh; overflow-y: auto; }
.pd-section-title { font-size: 0.78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.pd-section-title .hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.pt-field.hidden { display: none; }
.pt-field input.pd-missing, .pt-field select.pd-missing { border-color: #b42318; box-shadow: 0 0 0 2px rgba(180, 35, 24, .12); }
.pt-field select { width: 100%; }
.pd-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--warning-soft, #fdf3dc); border: 1px solid #ecd9a4; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-size: 0.92rem; }
.pd-banner.hidden { display: none; }
/* Even columns that never run off the edge, in the popup and on My Info. */
.pd-card .field-row, #my-info-fields .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 14px; align-items: start; }
.pd-card .pt-field, #my-info-fields .pt-field { min-width: 0; margin-bottom: 12px; }
.pd-card input, .pd-card select, #my-info-fields input, #my-info-fields select { width: 100%; box-sizing: border-box; }
.pd-card .pt-field .hint, #my-info-fields .pt-field .hint { display: block; margin-top: 4px; }

/* ================= Attendance: colours (shared by My Schedule and the Live board) ================= */
/* green = on time / working, amber = late or left early, red = not clocked in / missed, blue = on leave, purple = worked unscheduled, grey = not due yet */

/* --- My Schedule --- */
.shift-block.att-ok { background: #1f8a4c; }
.shift-block.att-warn { background: #a66a00; }
.shift-block.att-bad { background: #c0392b; }
.shift-block.att-info { background: #4a6fa5; }
.shift-block.att-extra { background: #6b4fbb; }
.att-chip { display: inline-block; background: rgba(255,255,255,.95); color: #1b1b1b; font-weight: 700; font-size: 0.68rem; padding: 2px 8px; border-radius: 999px; margin: 5px 0 2px; }
.shift-block.att-ok .att-chip { color: #14683a; } .shift-block.att-warn .att-chip { color: #8a5a00; } .shift-block.att-bad .att-chip { color: #b02a1c; }
.shift-block.att-info .att-chip { color: #35588f; } .shift-block.att-extra .att-chip { color: #553b9e; }
.att-times { font-size: 0.66rem; opacity: .92; line-height: 1.35; }
.att-week-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; min-height: 0; }
.att-week-summary:empty { display: none; }
.att-week-label { font-size: 0.8rem; color: var(--muted); margin-right: 2px; }
.att-pill { font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.att-pill-ok { background: #e4f4ea; color: #14683a; } .att-pill-warn { background: #fdf0d0; color: #8a5a00; } .att-pill-bad { background: #fde6e3; color: #b02a1c; }
.att-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 0.76rem; color: var(--muted); }
.att-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.att-key-ok { background: #1f8a4c; } .att-key-warn { background: #a66a00; } .att-key-bad { background: #c0392b; } .att-key-info { background: #4a6fa5; } .att-key-extra { background: #6b4fbb; }

/* --- Live board --- */
.att-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 8px 0 14px; }
.att-tab { background: none; border: none; padding: 8px 14px; font-size: 0.9rem; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.att-tab.active { color: var(--link-focus, #1d4ed8); border-bottom-color: var(--link-focus, #1d4ed8); font-weight: 700; }
.att-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.att-date-nav, .att-meta { display: flex; align-items: center; gap: 6px; }
.att-meta { color: var(--muted); font-size: 0.82rem; }
.att-date-nav input[type="date"] { height: 32px; }
.att-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #b8bcc4; display: inline-block; }
.att-live-dot.on { background: #1f8a4c; box-shadow: 0 0 0 0 rgba(31,138,76,.5); animation: attPulse 2s infinite; }
@keyframes attPulse { 0% { box-shadow: 0 0 0 0 rgba(31,138,76,.45); } 70% { box-shadow: 0 0 0 8px rgba(31,138,76,0); } 100% { box-shadow: 0 0 0 0 rgba(31,138,76,0); } }
.att-alert { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; border: 1px solid; }
.att-alert--bad { background: #fdecea; border-color: #f3b9b2; } .att-alert--warn { background: #fff4dc; border-color: #ecd49a; }
.att-alert-title { font-weight: 700; font-size: 0.92rem; }
.att-alert-people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.att-who { background: rgba(255,255,255,.75); border-radius: 999px; padding: 2px 10px; font-size: 0.78rem; font-weight: 600; }
.att-who em { font-style: normal; font-weight: 400; color: var(--muted); margin-left: 6px; }
.att-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 12px 0 16px; }
@media (min-width: 1500px) { .att-cards { grid-template-columns: repeat(10, 1fr); } }
@media (max-width: 640px) { .att-cards { grid-template-columns: repeat(2, 1fr); } }
.att-person .avatar { width: 34px; height: 34px; font-size: 0.75rem; flex-shrink: 0; }
.att-card { text-align: left; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--panel, #fff); cursor: pointer; display: flex; flex-direction: column; gap: 2px; border-left-width: 5px; transition: box-shadow .15s ease, transform .15s ease; }
.att-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); transform: translateY(-1px); }
.att-card.active { box-shadow: 0 0 0 2px var(--link-focus, #1d4ed8); }
.att-card.zero { opacity: .55; }
.att-card-num { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.att-card-label { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.att-card-sub { font-size: 0.7rem; color: var(--muted); }
.att-card-ok { border-left-color: #1f8a4c; } .att-card-warn { border-left-color: #d28a00; } .att-card-bad { border-left-color: #c0392b; } .att-card-bad:not(.zero) .att-card-num { color: #b02a1c; }
.att-card-info { border-left-color: #4a6fa5; } .att-card-extra { border-left-color: #6b4fbb; } .att-card-neutral { border-left-color: #b8bcc4; }
.att-list { margin-top: 10px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.att-row { display: grid; grid-template-columns: minmax(190px, 1.3fr) minmax(150px, 1fr) minmax(120px, .8fr) minmax(100px, .7fr) minmax(170px, 1.2fr); gap: 14px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); border-left: 5px solid transparent; font-size: 0.85rem; }
.att-row:last-child { border-bottom: none; }
.att-row-head { background: var(--bg); font-size: 0.7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-left-color: transparent !important; }
.att-row.att-ok { border-left-color: #1f8a4c; } .att-row.att-warn { border-left-color: #d28a00; background: #fffaf0; } .att-row.att-bad { border-left-color: #c0392b; background: #fff5f4; }
.att-row.att-info { border-left-color: #4a6fa5; } .att-row.att-extra { border-left-color: #6b4fbb; } .att-row.att-neutral { border-left-color: #cfd3da; }
.att-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.att-name { font-weight: 700; } .att-sub { color: var(--muted); font-size: 0.74rem; }
.att-chip-lg { display: inline-block; font-weight: 700; font-size: 0.76rem; padding: 3px 10px; border-radius: 999px; }
.att-chip-ok { background: #e4f4ea; color: #14683a; } .att-chip-warn { background: #fdf0d0; color: #8a5a00; } .att-chip-bad { background: #fde6e3; color: #b02a1c; }
.att-chip-info { background: #e3ecf8; color: #35588f; } .att-chip-extra { background: #ece6fa; color: #553b9e; } .att-chip-neutral { background: #eceef1; color: #555c68; }
.att-detail { color: var(--muted); font-size: 0.74rem; margin-top: 3px; }
@media (max-width: 900px) { .att-row { grid-template-columns: 1fr 1fr; } .att-row-head { display: none; } }


/* Login screen: the redesigned card (scoped to the login card only, so the invite and reset screens are unchanged) */
.auth-card--login { max-width: 480px; padding: 34px 43px 30px; border-radius: 22px; box-shadow: 0 14px 44px rgba(20, 23, 31, 0.07); }
.auth-card--login .auth-brand { margin-bottom: 29px; }
/* Inter everywhere on this card. Buttons do not pick up the page font by themselves, so it is set explicitly. */
.auth-card--login, .auth-card--login * { font-family: var(--font-body); }
.auth-lockup { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; text-align: left; }
.lockup-mark { width: 29px; height: 29px; filter: brightness(0); }
.lockup-text { font-size: 0.72rem; font-weight: 600; line-height: 1.22; color: var(--text); }
:root[data-theme="dark"] .lockup-mark { filter: none; }
.auth-card--login .auth-brand h1 { margin: 0 0 4px; font-family: var(--font-body); font-size: 1.9rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.auth-card--login .auth-brand .brand-product .accent-italic { font-family: var(--font-body); font-weight: 500; color: inherit; }
.auth-card--login .auth-brand .brand-org { margin: 0 0 14px; font-size: 0.9rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.auth-card--login .auth-brand .brand-client-tag { padding: 4px 13px; font-size: 0.78rem; font-weight: 500; }
.sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 50px; padding: 8px 20px; margin: 0;
  background: var(--accent); color: #fff; border: none; border-radius: 999px;
  font: inherit; font-size: 1rem; font-weight: 500; cursor: pointer;
  box-shadow: 0 5px 14px rgba(36, 107, 254, 0.22);
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.sso-btn:hover { background: var(--accent-hover); box-shadow: 0 6px 18px rgba(36, 107, 254, 0.3); }
.sso-btn:active { transform: translateY(1px); }
.sso-btn:focus-visible { outline: 2px solid var(--link-focus); outline-offset: 3px; }
.sso-g { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; flex: none; }
.sso-g svg { width: 18px; height: 18px; }
.sso-note { margin: 12px 0 0 !important; text-align: center; font-size: 0.78rem; line-height: 1.4; color: var(--muted); }
.sso-divider { display: flex; align-items: center; gap: 14px; margin: 15px 0 0; color: var(--muted); font-size: 0.82rem; }
.sso-divider::before, .sso-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
#login-form { gap: 12px; }
#login-form label { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--text); }
#login-form input { border-radius: 12px; min-height: 42px; padding: 8px 14px; font-size: 0.88rem; font-weight: 400; }
#login-form input::placeholder { color: var(--muted); opacity: 0.85; }
#login-form .login-submit { width: 100%; min-height: 44px; margin-top: 0; border-radius: 999px; font-size: 0.95rem; font-weight: 500; }
#login-form .error-msg { text-align: center; }
#login-form .error-msg:empty { display: none; }
.login-help { margin: 16px 0 0; text-align: center; font-size: 0.74rem; line-height: 1.5; color: var(--muted); }
.login-help a { color: var(--accent); text-decoration: none; }
.login-help a:hover { text-decoration: underline; }
.login-help-extra { margin-top: 6px; }
.login-help-extra.hidden { display: none; }
#vault-locked-panel { max-width: 520px; }