/* ==========================================================================
   🤖 EQUIPAY ENGINE - GLOBAL STYLESHEET
   ========================================================================== */

/* 1. EQUIPAY DESIGN SYSTEM TOKENS
   Colours are CSS variables only — never hardcode a hex in a component.
   Light values live on :root; html[data-theme="dark"] overrides them.
   The legacy --md-* tokens below are aliased to the design system so every
   not-yet-redesigned component themes (and flips to dark) for free; each page
   drops the aliases for the real tokens as it's converted. */
:root {
  --bg: #f4f6f5;
  --surface: #ffffff;
  --surface2: #eef2f0;
  --ink: #132420;
  --muted: #5b6b64;
  --faint: #93a099;
  --border: #e4eae6;
  --hair: #f1f4f2;
  --topbar: rgba(244, 246, 245, 0.85);
  --accent: #0f7a5c;
  --accent2: #0a5a43;
  --accent-ink: #0a5a43;
  --accent-soft: #e6f2ec;
  --gold: #b3862f;
  --gold-soft: #f6edda;
  --alert: #c0442e;
  --alert-soft: #fae7e2;
  --warn: #b9772a;
  --grid: #eef2f0;
  --grid2: #e4eae6;
  /* Chart-only categorical extras (js/chart-lib.js CHART_COLORS.palette) — the
     brand only defines accent/gold/alert as single hues, so a >3-series chart
     (or a future donut/legend) needs a couple more. Chosen + ordered with
     dataviz's scripts/validate_palette.js: "accent,gold,chart-blue,alert,
     chart-purple,chart-orange" passes every check in light mode (lightness
     band, chroma floor, CVD ΔE, contrast). Never reorder/recycle this list per
     series — categorical hue order is fixed. */
  --chart-blue: #5b7fc7;
  --chart-purple: #8a6fc9;
  --chart-orange: #d16b3f;
  /* #2250 — tells the browser which palette to render NATIVE chrome in:
     form-control defaults (the `field`/`fieldtext` system colors behind every
     input), the text caret, a textarea's own scrollbar, autofill styling.
     Declared nowhere in this app until #2250, so all of that stayed light in
     dark mode however the tokens above flipped. */
  color-scheme: light;
  --pad: 24px;
  --rowpad: 16px;
  --msr: 'Material Symbols Rounded';
  --font-ui: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Legacy Material tokens → aliased to the design system (see note above). */
  --md-primary: var(--accent);
  --md-primary-bg: var(--accent-soft);
  --md-surface: var(--surface);
  --md-background: var(--bg);
  --md-on-surface: var(--ink);
  --md-on-surface-variant: var(--muted);
  --md-border: var(--border);

  --md-type-headline: 700 22px/1.25 var(--font-ui);
  --md-type-title-large: 700 18px/1.3 var(--font-ui);
  --md-type-title-medium: 600 16px/1.4 var(--font-ui);
  --md-type-body-large: 400 15px/1.5 var(--font-ui);
  --md-type-body-medium: 400 14px/1.5 var(--font-ui);
  --md-type-label-large: 500 14px/20px var(--font-ui);
  --md-type-label-small: 500 11px/16px var(--font-ui);
}

html[data-theme="dark"] {
  --bg: #0e1512;
  --surface: #151f1b;
  --surface2: #1c2723;
  --ink: #e9f0ec;
  --muted: #9db0a7;
  --faint: #6b7d75;
  --border: #26332d;
  --hair: #212d28;
  --topbar: rgba(14, 21, 18, 0.86);
  --accent: #2ba884;
  --accent2: #1f8e6b;
  --accent-ink: #6fdcb4;
  --accent-soft: #15322a;
  --gold: #d0a24e;
  --gold-soft: #2a2214;
  --alert: #e26a54;
  --alert-soft: #3a201b;
  --warn: #d0904a;
  --grid: #243029;
  --grid2: #2e3b34;
  /* Brightened the same way the existing --accent/--gold/--alert dark values
     already are relative to their light counterparts — kept consistent with
     that established (pre-existing) dark-mode convention rather than
     re-deriving from the validator's band in isolation. */
  --chart-blue: #8fa8e8;
  --chart-purple: #b39be8;
  --chart-orange: #e28a52;
  color-scheme: dark;
}

/* Dark-mode gotcha: the element carrying the dark tokens must itself set
   color/background against the active --ink/--bg, or inherited (uncoloured)
   text keeps the light --ink and disappears. body does that here. */
body { font: var(--md-type-body-medium); background-color: var(--bg); color: var(--ink); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; color: var(--md-on-surface); }

/* #2250 — the same gotcha as the comment above, for form fields.
   Before this rule the stylesheet had NO base styling for input/textarea/select
   at all (its only `textarea` rule was a `display:none` for a survey thread),
   so every field depended on its own call site remembering to set a background
   and a colour. 244 inline-styled fields set a themed `border` and neither of
   those, rendering a correctly-dark border around a white browser-default box.
   Making the correct thing the DEFAULT is the point: a new field can no longer
   regress by omission, which is how this shipped in the first place.
   Deliberately low specificity (bare element selectors) so every existing
   class — .md-input, .login-input, .ia-select, .rev-proposed-input, … — still
   wins, and so an inline `background: transparent` inside an already-themed
   wrapper still wins too. The excluded types render their own control chrome;
   painting a background onto them looks broken rather than themed.
   Deliberately ONLY background+color. `border-color` and `font-family` were
   both tried and removed: an unstyled field's border and font are UA defaults,
   so setting them here changes how that field looks in LIGHT mode too, and
   this fix is meant to be dark-mode-only. `color-scheme: dark` above already
   makes the UA pick a theme-appropriate border on its own, so the border half
   was redundant as well as out of scope. Unifying every field on var(--font-ui)
   is a real (separate) design-system want — see #2253. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="reset"]):not([type="button"]),
textarea,
select {
  background: var(--surface);
  color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--faint); }

[hidden] {
  display: none !important;
}

/* ==========================================================================
   2. APP SHELL — sidebar + sticky topbar + scrolling content
   ========================================================================== */
#app-container { display: flex; min-height: 100vh; }
.app-main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── Sidebar ── */
#sidebar {
  width: 264px; flex-shrink: 0; box-sizing: border-box;
  background: var(--surface); border-right: 1px solid var(--border);
  padding: 20px 12px; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; z-index: 60;
}
#sidebar .logo { display: flex; align-items: center; gap: 11px; padding: 4px 8px 20px; margin: 0; }
#sidebar .logo .e {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; letter-spacing: -0.02em; flex-shrink: 0;
}
#sidebar .logo .wordmark { display: flex; flex-direction: column; line-height: 1.15; }
/* Defensive override: hide default badge and wordmark if custom logo is active (issue #920) */
#sidebar .logo img#app-org-logo:not([style*="display: none"]) ~ .e { display: none !important; }
#sidebar .logo img#app-org-logo:not([style*="display: none"]) ~ .wordmark { display: none !important; }
#sidebar .logo .brand { font-weight: 700; font-size: 16px; letter-spacing: -0.02em; color: var(--ink); }
#sidebar .logo .engine {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  color: var(--faint); text-transform: uppercase;
}

#sidebar nav {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 4px; flex: 1; width: 100%; min-height: 0;
}

/* Scrollable region for the normal nav-group/root-item list. Inställningar
   (Settings) is a sibling of this div, not a child of it, so it renders
   pinned directly above the account/logout footer at a fixed position —
   never inside the scrollable area, regardless of how long this list grows. */
#sidebar nav .nav-scroll {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; overflow-y: auto; min-height: 0;
  /* With 9 top-level nav groups (Anställda, Lönekartläggning, Medarbetar-
     undersökning, OKR, DEI, Workforce, Dashboards, Rapporter, Schema) plus
     an open submenu, this list now genuinely exceeds the viewport on most
     screens — especially for SuperAdmin, whose extra tenant-switcher block
     eats more header space, leaving less room here. The overflow-y:auto
     above is enough for mouse-wheel/trackpad, but touch drags on mobile can
     feel unresponsive inside a nested scroll container without an explicit
     opt-in — some mobile browsers otherwise let an ancestor (or nothing)
     claim the gesture instead of scrolling this list.
     `touch-action: pan-y` lets the browser handle vertical touch scrolling
     here immediately instead of waiting to see if JS will preventDefault it. */
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  /* Discoverability (learned the hard way, reported as "menu items are
     hidden"): overflowing content with no visual cue reads as a dead end —
     the last visible item's text just stops at the box edge with nothing
     suggesting "scroll for more," especially where the OS/browser
     auto-hides the scrollbar until an active drag. Two independent fixes,
     neither relying on JS (so they can't drift out of sync with the
     JS-driven submenu open/close state):
     1. An explicitly visible thin scrollbar, so its mere presence signals
        "there's more" regardless of OS scrollbar-visibility settings. */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  /* 2. A pure-CSS top/bottom "scroll shadow": two gradients that scroll
        WITH the content (background-attachment: local) mask the shadow
        near the top/bottom edge until you're actually there, layered under
        two fixed shadow gradients (background-attachment: scroll) — the
        classic technique, shows a shadow on a given edge ONLY when there is
        more content to scroll to in that direction. */
  background-image:
    linear-gradient(var(--surface) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(rgba(255, 255, 255, 0), var(--surface) 70%),
    linear-gradient(to bottom, rgba(19, 36, 32, 0.10), rgba(19, 36, 32, 0)),
    linear-gradient(to top, rgba(19, 36, 32, 0.12), rgba(19, 36, 32, 0));
  /* Per-layer position (a "position" component is only valid appended to an
     image within the `background` SHORTHAND, never in the `background-image`
     LONGHAND — putting it there makes that one layer invalid, which per spec
     invalidates the entire comma-separated list, silently dropping the whole
     declaration. Keeping position as its own longhand, aligned by layer
     index, avoids that trap and keeps `background-color` a plain longhand
     too (verified via an isolated getComputedStyle check, not just visually,
     since a silently-dropped background is exactly the kind of thing that
     looks fine in the CSS source and does nothing in the browser). */
  background-position: 0 0, 0 100%, 0 0, 0 100%;
  background-repeat: no-repeat;
  background-color: var(--surface);
  background-size: 100% 24px, 100% 24px, 100% 10px, 100% 10px;
  background-attachment: local, local, scroll, scroll;
}
#sidebar nav .nav-scroll::-webkit-scrollbar { width: 6px; }
#sidebar nav .nav-scroll::-webkit-scrollbar-track { background: transparent; }
#sidebar nav .nav-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Settings, pinned above the account/logout footer (see .sidebar-user
   below) and outside .nav-scroll's scrollable area. */
#sidebar nav > a.nav-pinned-item {
  flex-shrink: 0;
  margin-top: 6px;
}

/* Group trigger (collapsible) */
#sidebar .nav-group-trigger {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 10px; cursor: pointer;
  color: var(--muted); font-weight: 600; font-size: 13px;
  user-select: none; margin: 0; box-sizing: border-box;
  transition: background 0.15s, color 0.15s;
}
#sidebar .nav-group-trigger:hover { background: var(--surface2); color: var(--ink); }
#sidebar .nav-group-trigger .material-symbols-rounded { font-size: 20px; }
#sidebar .nav-group-trigger .arrow { font-size: 18px; margin-left: auto; transition: transform 0.2s ease; }
#sidebar .nav-group-trigger.open { color: var(--accent-ink); }
#sidebar .nav-group-trigger.open .arrow { transform: rotate(90deg); }

/* Submenu (indented under a left rule, animated max-height) */
#sidebar .nav-submenu {
  max-height: 0; overflow: hidden;
  transition: max-height 0.28s ease;
  display: flex; flex-direction: column; gap: 2px;
  margin: 2px 0 0 22px; padding-left: 12px;
  border-left: 1.5px solid var(--border);
  /* .nav-submenu is a flex item inside .nav-scroll's own flex column. A flex
     item with non-visible overflow gets an AUTOMATIC MINIMUM SIZE of 0 per
     the flexbox spec, so without flex-shrink:0 the max-height above is only
     an upper bound — flexbox silently crushes this toward 0px real height
     whenever the sidebar's total content (9 top-level groups + submenus)
     overflows .nav-scroll's available height, which is common on shorter
     viewports (worse for SuperAdmin, whose tenant-switcher card eats extra
     vertical space above the nav list). Confirmed via a real-markup+real-CSS
     Playwright repro: without this, an open submenu measured 0px actual
     height despite max-height computing correctly to 340px. */
  flex-shrink: 0;
}
#sidebar .nav-submenu.open { max-height: 340px; margin-bottom: 6px; }

/* Nav links (flat items + submenu links) */
#sidebar nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 10px;
  font-size: 13.5px; font-weight: 500;
  color: var(--muted); text-decoration: none; box-sizing: border-box;
  transition: background 0.15s, color 0.15s;
}
#sidebar nav a:hover { background: var(--surface2); color: var(--ink); }
#sidebar nav a.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
#sidebar .nav-submenu a { padding: 7px 12px; border-radius: 8px; font-size: 13px; }
#sidebar nav a .material-symbols-rounded { font-size: 20px; }
#sidebar .nav-submenu-placeholder { display: block; padding: 7px 12px; font-size: 12.5px; color: var(--faint); font-style: italic; }

/* Sidebar user footer */
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 12px 8px 4px;
  border-top: 1px solid var(--border);
}
.sidebar-user-info {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  cursor: pointer; border-radius: 8px; padding: 4px; margin: -4px;
  transition: background 0.15s;
}
.sidebar-user-info:hover { background: var(--surface2); }
.sidebar-user .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.sidebar-user .avatar.has-photo { background-size: cover; background-position: center; color: transparent; }
.sidebar-user .who { flex: 1; min-width: 0; line-height: 1.2; }
.sidebar-user .who .name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .who .role { font-size: 11px; color: var(--faint); }
.sidebar-user .logout {
  width: 34px; height: 34px; border-radius: 9px;
  border: none; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); flex-shrink: 0;
}
.sidebar-user .logout:hover { background: var(--surface2); color: var(--alert); }

/* ── Topbar ── */
#topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--topbar); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px;
  padding: 12px clamp(16px, 3vw, 32px); box-sizing: border-box;
}
#topbar .topbar-title { min-width: 0; }
#topbar .eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; color: var(--faint); text-transform: uppercase;
}
#topbar .page-title {
  font-size: clamp(18px, 2.4vw, 22px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.2; color: var(--ink);
}
#topbar .topbar-spacer { flex: 1; }
#topbar .search-trigger {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 11px; padding: 9px 12px;
  max-width: 280px; flex: 1; min-width: 0; cursor: pointer;
  transition: border-color 0.15s;
}
#topbar .search-trigger:hover { border-color: var(--accent); }
#topbar .search-trigger .material-symbols-rounded { font-size: 19px; color: var(--faint); }
#topbar .search-trigger .label { flex: 1; font-size: 13.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#topbar .search-trigger .kbd {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--faint);
  border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; flex-shrink: 0;
}
.eq-icon-btn {
  width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; color: var(--muted); position: relative;
}
.eq-icon-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.eq-icon-btn .material-symbols-rounded { font-size: 20px; }
.eq-notif-dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--alert); }

/* Segmented toggle (SV/EN) */
.eq-segmented {
  display: flex; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 10px; padding: 3px; flex-shrink: 0;
}
.eq-segmented button {
  border: none; background: transparent; color: var(--faint);
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: 8px; cursor: pointer;
}
.eq-segmented button.active { background: var(--surface); color: var(--accent-ink); box-shadow: 0 1px 2px rgba(19, 36, 32, 0.1); }

/* The topbar hamburger only has a job on mobile (opens the off-canvas
   drawer — see the ≤900px block further down); desktop collapsing now has
   its own dedicated edge-tab control (.sidebar-collapse-toggle below). */
#topbar-hamburger { display: flex; }
@media (min-width: 901px) {
  #topbar-hamburger { display: none; }
}

/* Desktop sidebar collapse: a small edge tab, half-overlapping the sidebar's
   right border — VS Code / Notion style. Collapsing shrinks #sidebar to zero
   width (not display:none) so the tab, its flex sibling, keeps its place in
   the layout and stays clickable to re-expand. */
.sidebar-collapse-toggle { display: none; }
@media (min-width: 901px) {
  #sidebar { transition: width 0.2s ease, padding 0.2s ease; overflow: hidden; }
  /* min-width: 0 is required here: as a flex item, #sidebar's automatic
     minimum width otherwise defaults to its content's min-content size (the
     classic flexbox "won't shrink past content" gotcha), which silently wins
     over width: 0 and left the collapse toggle stranded mid-sidebar-width
     instead of at the true edge — see user report: hard to find once
     collapsed. */
  body.sidebar-collapsed #sidebar { width: 0; min-width: 0; padding-left: 0; padding-right: 0; border-right: none; }

  .sidebar-collapse-toggle {
    display: flex; align-items: center; justify-content: center;
    /* Anchored near the logo row (not vertically centered on the whole
       viewport) so it stays in the same visual band as the topbar/hamburger
       instead of floating, easy-to-miss, in the middle of the page — see
       user report: hard to find once collapsed. */
    align-self: flex-start; margin-top: 20px; flex-shrink: 0;
    width: 24px; height: 52px; margin-left: -12px; z-index: 65;
    background: var(--accent-soft); border: 1px solid var(--border);
    box-shadow: 2px 0 8px rgba(15, 122, 92, 0.18);
    border-radius: 0 12px 12px 0; cursor: pointer; color: var(--accent-ink);
    transition: background 0.15s, color 0.15s, box-shadow 0.15s, width 0.15s;
  }
  .sidebar-collapse-toggle:hover {
    background: var(--accent); color: #fff;
    box-shadow: 2px 0 12px rgba(15, 122, 92, 0.32);
    width: 26px;
  }
  .sidebar-collapse-toggle .material-symbols-rounded { font-size: 20px; font-weight: 600; transition: transform 0.2s ease; }
  body.sidebar-collapsed .sidebar-collapse-toggle .material-symbols-rounded { transform: rotate(180deg); }
  /* #2125 — the -12px margin above deliberately half-overlaps the
     sidebar's right EDGE while expanded, but collapsing shrinks #sidebar to
     width: 0 (see above): there's no edge left to overlap, so that same
     -12px instead pushes roughly half the button off the viewport's left
     edge. Reset to 0 only in the collapsed state — third user report on
     this exact button, per this file's own earlier comments. */
  body.sidebar-collapsed .sidebar-collapse-toggle { margin-left: 0; }
}

/* Content region */
#app-content { flex: 1; min-height: 0; padding: clamp(16px, 3vw, 28px); box-sizing: border-box; }

/* View fade-in on navigation */
@keyframes eqfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#app-content > * { animation: eqfade 0.35s ease; }

/* ── Command palette (⌘K) ── */
.eq-palette-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(10, 15, 13, 0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: none; align-items: flex-start; justify-content: center; padding: 11vh 16px 16px;
}
.eq-palette-overlay.open { display: flex; }
.eq-palette {
  width: 100%; max-width: 600px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 24px 64px rgba(10, 15, 13, 0.4);
  overflow: hidden; animation: eqfade 0.16s ease;
}
.eq-palette-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.eq-palette-head .material-symbols-rounded { font-size: 22px; color: var(--faint); }
.eq-palette-head input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-ui); font-size: 16px; color: var(--ink); }
.eq-palette-head .kbd { font-family: var(--font-mono); font-size: 11px; color: var(--faint); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; cursor: pointer; flex-shrink: 0; }
.eq-palette-results { max-height: 52vh; overflow-y: auto; padding: 8px; }
.eq-palette-empty { padding: 30px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.eq-palette-cat { padding: 12px 10px 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.eq-palette-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; cursor: pointer; }
.eq-palette-item:hover, .eq-palette-item.active { background: var(--accent-soft); }
.eq-palette-item .icon { font-family: var(--msr); font-size: 20px; color: var(--accent); width: 24px; text-align: center; flex-shrink: 0; }
.eq-palette-item .txt { flex: 1; min-width: 0; line-height: 1.25; }
.eq-palette-item .txt .lbl { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-palette-item .txt .sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-palette-item .go { font-family: var(--msr); font-size: 18px; color: var(--faint); flex-shrink: 0; }
.eq-palette-foot { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface2); font-size: 11.5px; color: var(--faint); }
.eq-palette-foot .kbd { font-family: var(--font-mono); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; background: var(--surface); margin-right: 6px; }

/* ── Help manual panel (topbar "?") — slide-in right-hand drawer, same
   overlay/backdrop treatment as the command palette above, docked right. ── */
.eq-help-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(10, 15, 13, 0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: none; justify-content: flex-end;
}
.eq-help-overlay.open { display: flex; }
@keyframes eqslidein { from { transform: translateX(100%); } to { transform: translateX(0); } }
.eq-help-panel {
  width: 420px; max-width: 92vw; height: 100vh; box-sizing: border-box;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -24px 0 64px rgba(10, 15, 13, 0.35);
  display: flex; flex-direction: column;
  animation: eqslidein 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.eq-help-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.eq-help-head > .material-symbols-rounded { font-size: 22px; color: var(--accent); }
.eq-help-head h3 { flex: 1; margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); font-family: var(--font-ui); }
.eq-help-head .kbd { font-family: var(--font-mono); font-size: 11px; color: var(--faint); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; cursor: pointer; flex-shrink: 0; }
.eq-help-search { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.eq-help-search .material-symbols-rounded { font-size: 20px; color: var(--faint); }
.eq-help-search input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-ui); font-size: 14.5px; color: var(--ink); }
.eq-help-results { flex: 1; overflow-y: auto; padding: 6px 10px 24px; }
.eq-help-empty { padding: 30px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.eq-help-theme { border-bottom: 1px solid var(--border); }
.eq-help-theme > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.eq-help-theme > summary::-webkit-details-marker { display: none; }
.eq-help-theme > summary > .material-symbols-rounded { font-size: 18px; transition: transform 0.2s ease; flex-shrink: 0; }
.eq-help-theme[open] > summary > .material-symbols-rounded { transform: rotate(90deg); }
.eq-help-theme > summary .count { margin-left: auto; background: var(--surface2); color: var(--faint); border-radius: 20px; padding: 1px 8px; font-size: 10.5px; }
.eq-help-article { border-radius: 10px; margin: 2px 0 8px; }
.eq-help-article > summary { list-style: none; cursor: pointer; padding: 9px 10px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.eq-help-article > summary::-webkit-details-marker { display: none; }
.eq-help-article > summary:hover { background: var(--accent-soft); }
.eq-help-article > summary .material-symbols-rounded { font-size: 16px; color: var(--faint); transition: transform 0.2s ease; margin-left: auto; flex-shrink: 0; }
.eq-help-article[open] > summary .material-symbols-rounded { transform: rotate(90deg); }
.eq-help-body { padding: 2px 10px 12px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.eq-help-body a, .eq-help-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.eq-help-body a:hover, .eq-help-link:hover { text-decoration: underline; }
.eq-help-footer { flex-shrink: 0; border-top: 1px solid var(--border); padding: 12px 18px; }
.eq-help-footer .eq-help-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }

/* ── Mobile drawer backdrop ── */
.drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(19, 36, 32, 0.4); z-index: 40; }
.drawer-backdrop.active { display: block; }

/* SuperAdmin switcher — re-tokenised so it themes (indigo inline styles overridden) */
#superadmin-switcher { background: var(--accent-soft) !important; border: 1px solid var(--border) !important; }
#superadmin-switcher label { color: var(--accent-ink) !important; }

/* "Create new company" — a dedicated modifier (not a change to the shared
   .eq-btn-ghost class, which ~80 other buttons across the app also use).
   Bigger and a solid darker green (--accent2 — the same token the rest of
   the app already uses to darken --accent on hover, e.g. .eq-btn-primary:hover)
   so this reads as a distinct, higher-emphasis "create" action rather than
   blending in with the pale ghost-button family. The #id.class selector
   pairing keeps specificity comfortably above .eq-btn-ghost's own rules
   without needing !important.
   Collapsed sidebar: on desktop, collapsing shrinks the entire #sidebar to
   width:0 with overflow:hidden (see .sidebar-collapse-toggle rules above) —
   every sidebar control, not just this button, is hidden then and the
   dedicated edge tab is the only way back in. That full-collapse behavior
   is unchanged by this button's styling. */
#sa-create-org-btn.sa-create-org-btn {
  background: var(--accent2); border-color: var(--accent2); color: #fff;
  padding: 12px 16px; font-size: 14.5px; font-weight: 700;
}
#sa-create-org-btn.sa-create-org-btn:hover:not(:disabled) {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
#sa-create-org-btn.sa-create-org-btn .material-symbols-rounded { font-size: 22px; }

.card, .settings-card, .dashboard-grid > div, .benchmark-tool-grid .card { background: var(--md-surface); border-radius: 12px; border: 1px solid var(--md-border); box-shadow: none; margin-bottom: 24px; padding: 24px; }
.card-title, .card-header h2, .table-title { font: var(--md-type-title-large); color: var(--md-on-surface); margin-bottom: 16px; }
.text-secondary { font: var(--md-type-body-medium); color: var(--md-on-surface-variant); }

.md-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; height: 40px; border-radius: 11px; font: var(--md-type-label-large); cursor: pointer; transition: background-color 0.2s, box-shadow 0.2s, color 0.2s, border-color 0.2s; border: 1px solid transparent; text-transform: none; }
.md-btn-primary { background-color: var(--accent); color: #ffffff; }
.md-btn-primary:hover:not(:disabled) { background-color: var(--accent2); }
.md-btn-outline { background-color: var(--surface); color: var(--ink); border: 1px solid var(--border); }
.md-btn-outline:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
.md-btn:disabled { background-color: var(--surface2); color: var(--faint); cursor: not-allowed; border-color: transparent; box-shadow: none; }

.table-pagination { display: flex; align-items: center; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--md-border); gap: 32px; background-color: var(--md-surface); border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.pagination-controls, .pagination-actions { display: flex; align-items: center; gap: 8px; }
.rows-select { border: none; background: transparent; font: var(--md-type-body-medium); color: var(--md-on-surface); cursor: pointer; outline: none; padding: 4px; }
.md-icon-btn { background: transparent; border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--md-on-surface-variant); }
.md-icon-btn:hover:not(:disabled) { background-color: rgba(31, 31, 31, 0.08); color: var(--md-on-surface); }
.md-icon-btn:disabled { color: rgba(31, 31, 31, 0.38); cursor: not-allowed; }

/* --- COMPACT FILTER & STATS BARS --- */
.filter-bar {
  background: var(--md-surface);
  border-radius: 12px;
  border: 1px solid var(--md-border);
  margin-bottom: 12px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}

.stats-bar {
  padding: 16px 24px; 
  margin-bottom: 16px;
}

.filter-label {
  font: var(--md-type-label-large, 500 14px/20px 'Roboto', sans-serif);
  color: var(--md-on-surface-variant, #444746);
  margin-right: 24px;
}
.filter-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-grow: 1;
}
.filter-options button {
  background-color: transparent;
  border: 1px solid var(--md-border, #e0e0e0);
  border-radius: 16px;
  padding: 6px 16px;
  font: var(--md-type-body-medium, 400 14px/20px 'Roboto', sans-serif);
  color: var(--md-on-surface-variant, #444746);
  cursor: pointer;
  transition: all 0.2s ease;
}
.filter-options button:hover {
  background-color: var(--md-background, #f8f9fa);
}
.filter-options button.active {
  background-color: var(--md-primary-bg, #e8f0fe);
  color: var(--md-primary, #0b57d0);
  border-color: var(--md-primary, #0b57d0);
  font-weight: 500;
}
.filter-options button.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.refresh-button {
  margin-left: auto; 
}

/* --- COLLAPSIBLE SIDEBAR LAYOUT --- */
.page-with-sidebar {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

.filter-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--md-surface);
  border: 1px solid var(--md-border);
  border-radius: 12px;
  padding: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: sticky;
  top: 88px; 
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.filter-sidebar.collapsed {
  width: 0;
  padding: 0;
  border: none;
  opacity: 0;
  margin-right: -24px;
  overflow: hidden;
}

.sidebar-filter-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-filter-group .filter-label {
  font: var(--md-type-label-small);
  color: var(--md-on-surface-variant);
  margin: 0;
}

.sidebar-filter-group .filter-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-filter-group .filter-options button {
  width: 100%;
  text-align: left;
  border-radius: 8px;
  padding: 8px 16px;
  border: none;
  background: transparent;
  justify-content: flex-start;
}

.sidebar-filter-group .filter-options button:hover {
  background: var(--md-background);
}

.sidebar-filter-group .filter-options button.active {
  background: var(--md-primary-bg);
  color: var(--md-primary);
  font-weight: 500;
}

.main-content-area {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.top-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--md-surface);
  border: 1px solid var(--md-border);
  border-radius: 12px;
  padding: 12px 24px;
}

.top-action-bar .left-actions, 
.top-action-bar .right-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --- ANALYSIS DASHBOARD STYLES --- */
.analysis-dashboard {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.metrics-container {
  display: flex;
  justify-content: space-between;
  background-color: var(--md-surface, #ffffff);
  border: 1px solid var(--md-border, #e0e0e0);
  border-radius: 12px;
  padding: 16px;
}

.metric-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  padding: 8px 16px;
  border-right: 1px solid var(--md-border, #e0e0e0);
}

.metric-card:last-child { border-right: none; }

.metric-title {
  font: var(--md-type-label-small, 500 11px/16px 'Roboto', sans-serif);
  color: var(--md-on-surface-variant, #444746);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.metric-value {
  font: var(--md-type-headline, 400 24px/32px 'Roboto', sans-serif);
  color: var(--md-on-surface, #1f1f1f);
}

.metric-card.highlight {
  background-color: var(--accent-soft);
  border-radius: 8px;
  border: 1px solid var(--accent);
  margin: -8px -16px -8px 0;
  padding: 16px 24px;
}

.metric-card.highlight .metric-value,
.metric-card.highlight .metric-title {
  color: var(--md-primary, #0b57d0);
}

.content-container {
  display: flex;
  gap: 24px;
}

.details-table-wrapper {
  flex-basis: 400px;
  flex-grow: 0;
  background-color: var(--md-surface, #ffffff);
  border: 1px solid var(--md-border, #e0e0e0);
  border-radius: 12px;
  padding: 24px;
}

.summary-card {
  flex: 1;
  flex-basis: auto;
}

.table-card {
  background-color: var(--md-surface, #ffffff);
  border: 1px solid var(--md-border, #e0e0e0);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

.table-subtitle {
  font: var(--md-type-body-medium);
  color: var(--md-on-surface-variant);
  margin-bottom: 24px;
}

.compliance-summary-table {
  width: 100%;
  border-collapse: collapse;
}

.compliance-summary-table th {
  text-align: left;
  padding: 12px 16px;
  font: var(--md-type-label-small);
  color: var(--md-on-surface-variant);
  text-transform: uppercase;
  border-bottom: 1px solid var(--md-border);
  background: var(--md-background);
}

.compliance-summary-table td {
  padding: 16px;
  border-bottom: 1px solid #f1f3f5;
  font: var(--md-type-body-medium);
  color: var(--md-on-surface);
}

.compliance-summary-table th:not(:first-child),
.compliance-summary-table td:not(:first-child) {
  text-align: right;
}

.compliance-summary-table tfoot tr td {
  font-weight: 700;
  background: var(--md-background);
  border-top: 2px solid var(--md-border);
  border-bottom: none;
}

.female-dom-chip {
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  text-transform: uppercase;
}

/* #2241 — a figure withheld by the anonymity threshold. Deliberately quiet
   (muted, not an alert colour): a redacted cell is the system working as
   intended, not an error. `cursor: help` plus the title attribute is what
   distinguishes it from an ordinary empty cell. */
.eq-redacted {
  color: var(--faint);
  cursor: help;
  border-bottom: 1px dotted var(--border);
}

.dashboard-header { margin-bottom: 24px; }

.details-title {
  font: var(--md-type-title-large, 500 22px/28px 'Roboto', sans-serif);
  color: var(--md-on-surface, #1f1f1f);
  margin: 0;
}

.details-table { display: flex; flex-direction: column; }

.details-header {
  font: var(--md-type-label-small);
  color: var(--md-on-surface-variant);
  text-transform: uppercase;
  margin-bottom: 16px;
  margin-top: 16px;
}
.details-header:first-child { margin-top: 0px; }

.details-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 12px;
  border-bottom: 1px solid #f1f3f5;
}

.details-row:last-child { border-bottom: none; }

.details-row span:first-child {
  font: var(--md-type-body-large);
  color: var(--md-on-surface-variant);
}

.details-row span:last-child {
  font: var(--md-type-body-large);
  font-weight: 500;
  color: var(--md-on-surface);
}

.details-row.highlight-row {
  background-color: var(--md-primary-bg);
  border-radius: 4px;
}

.details-row.highlight-row span:first-child {
  color: var(--md-primary);
  font-weight: 500;
}

.details-row.highlight-row span:last-child {
  color: var(--md-primary);
  font-weight: 700;
}

/* --- CLASSIFICATION TABLE --- */
.classification-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.classification-table th,
.classification-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
/* #179: normalize header casing to match every sibling table in the app
   shell (employee-table/params-table/ia-table/ap-table/sb-table/
   compliance-summary-table/comparators-table all uppercase their <th>s). */
.classification-table th {
  text-transform: uppercase;
}

.classification-table th {
  background-color: var(--surface2);
}

.justification-row {
  display: flex;
  margin-bottom: 5px;
}

.justification-row input {
  margin-right: 5px;
}

/* --- GROUP INSIGHTS --- */
.context-header-card {
  background-color: var(--md-surface);
  border: 1px solid var(--md-border);
  border-radius: 16px;
  padding: 24px;
  color: var(--md-on-surface);
  margin-bottom: 16px;
}
.context-titles {
  display: flex;
  gap: 32px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--md-border);
  padding-bottom: 16px;
}
.context-titles h2 {
  margin: 0;
  font: var(--md-type-title-large);
}
.context-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--md-type-body-medium);
  color: var(--md-on-surface-variant);
  background: var(--md-background);
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--md-border);
}
.context-warning .material-symbols-rounded {
  font-size: 18px;
  color: var(--md-primary);
}

.audit-title-header {
  font: var(--md-type-title-medium);
  font-weight: 700;
  color: var(--md-on-surface);
  font-style: italic;
  margin-top: 32px;
  margin-bottom: 16px;
  text-transform: uppercase;
  border-left: 4px solid var(--accent);
  padding-left: 8px;
}

.audit-card {
  background-color: var(--md-surface);
  border: 1px solid var(--md-border);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.audit-card-header {
  border-bottom: 1px solid var(--md-border);
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.audit-card-context {
  font: var(--md-type-label-small);
  color: var(--md-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: flex;
  gap: 12px;
}

.audit-card h3 {
  margin: 0 0 24px 0;
  font: var(--md-type-title-large);
  color: var(--md-on-surface);
}

.audit-card h3 .pink-text {
  color: var(--accent-ink);
  font-weight: 600;
}

.audit-stats-row {
  display: flex;
  gap: 48px;
  border-bottom: 1px solid var(--md-border);
  padding-bottom: 24px;
  margin-bottom: 24px;
}

.audit-stat-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audit-stat-label {
  font: var(--md-type-label-small);
  color: var(--md-on-surface-variant);
  text-transform: uppercase;
}

.audit-stat-value {
  font: var(--md-type-body-large);
  font-weight: 600;
  color: var(--md-on-surface);
}

.audit-stat-value.pink { color: var(--accent-ink); }
.audit-stat-value.large { font-size: 24px; color: var(--accent-ink); }

.comparators-table {
  width: 100%;
  border-collapse: collapse;
}

.comparators-table th {
  text-align: left;
  font: var(--md-type-label-small);
  color: var(--md-on-surface-variant);
  text-transform: uppercase;
  padding-bottom: 16px;
}

.comparators-table td {
  padding: 16px 0;
  border-top: 1px solid var(--md-border);
  vertical-align: top;
}

.comp-role { 
  font: var(--md-type-label-large);
  color: var(--md-on-surface);
}
.comp-eval { 
  font: var(--md-type-label-small);
  color: var(--md-on-surface-variant);
  margin-top: 4px; 
}
.comp-salary { 
  font-weight: 500; 
  color: var(--md-on-surface-variant);
}
.comp-diff {
  font-weight: 700;
  color: var(--alert);
}

.explanation-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.exp-chip {
  background: var(--accent-soft);
  border: none;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-ink);
}

.exp-summary {
  font: var(--md-type-body-medium);
  color: var(--md-on-surface-variant);
}

/* Responsiveness adjustments */
@media (max-width: 992px) {
  .page-with-sidebar { flex-direction: column; }
  .filter-sidebar { width: 100%; position: static; max-height: none; }
  /* Stacked layout: a collapsed sidebar keeps width:0, which forces its text
     content to wrap to a huge height and — now stacked ABOVE the main column —
     shoves everything down, leaving a large empty band at the top of the page.
     Remove it from flow entirely when collapsed; expanding (Växla filter) still
     shows it full-width via the .filter-sidebar rule above. */
  .filter-sidebar.collapsed { display: none; }
}

/* --- LOGIN (split brand panel + form panel) --- */
#login-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 9999; display: flex; }
.login-brand {
  flex: 1; color: #fff;
  /* Background image (product dashboard mockup) with a dark green overlay
     gradient so the white heading/stat text stays legible regardless of
     what's underneath it — --accent stays as background-color so the panel
     is still the right brand color for the instant before the (2MB) image
     loads, or if it ever fails to. */
  background:
    linear-gradient(180deg, rgba(10, 58, 42, 0.55) 0%, rgba(10, 58, 42, 0.78) 100%),
    url('/brand/login-bg.png') center / cover no-repeat;
  background-color: var(--accent);
  padding: clamp(32px, 5vw, 64px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
}
.login-brand .brand-mark { display: flex; align-items: center; gap: 12px; }
.login-brand .brand-mark .e { width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; }
.login-brand .brand-mark .brand { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.login-brand h1 {
  /* Pre-existing bug, surfaced while verifying the new background image:
     the global `h1, h2, ... { color: var(--md-on-surface) }` rule (dark
     ink) is a DIRECT match on the h1 element itself, so it wins over the
     inherited `color:#fff` from .login-brand regardless of specificity —
     inheritance always loses to any directly-matching rule. Every other
     element in this panel (.lead, .brand, .proof stats) already inherits
     white correctly since nothing else directly targets their tags/color.
     Was already a legibility issue on the solid green background; the new
     background-image + dark overlay makes it materially worse, so fixing
     here rather than leaving it. */
  color: #fff;
  font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; margin: 0 0 16px; max-width: 14ch;
}
.login-brand .lead { font-size: 16px; line-height: 1.6; opacity: 0.92; max-width: 44ch; margin: 0; }
.login-brand .proof { display: flex; gap: 32px; flex-wrap: wrap; }
.login-brand .proof .stat .v { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.login-brand .proof .stat .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; margin-top: 2px; }

.login-panel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 56px); position: relative; }
.login-panel .login-lang { position: absolute; top: 20px; right: 20px; }
.login-card { background: transparent; border: none; box-shadow: none; padding: 0; width: 100%; max-width: 380px; text-align: left; }
.login-tabs { display: flex; background: var(--surface2, #f1f5f9); padding: 4px; border-radius: 12px; margin-bottom: 24px; gap: 4px; border: 1px solid var(--border); }
.login-tab-btn { flex: 1; padding: 9px 12px; font-size: 13.5px; font-weight: 600; border: none; background: transparent; color: var(--muted); border-radius: 9px; cursor: pointer; transition: all 0.15s ease; font-family: var(--font-ui); text-align: center; }
.login-tab-btn:hover:not(.active) { color: var(--ink); }
.login-tab-btn.active { background: var(--surface, #ffffff); color: var(--accent-ink); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.login-logo { width: 48px; height: 48px; background: var(--accent-soft); color: var(--accent-ink); font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; border-radius: 12px; margin: 0 auto; }
.login-card .login-logo { display: none; }
.login-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 8px; }
.login-subtitle { font-size: 14px; color: var(--muted); margin: 0 0 28px; line-height: 1.5; }
.login-form-group { text-align: left; margin-bottom: 18px; }
.login-form-group label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); display: block; margin-bottom: 8px; }
.login-input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; font-size: 15px; font-family: var(--font-ui); background: var(--surface); color: var(--ink); box-sizing: border-box; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.login-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-input-invalid { border-color: var(--alert) !important; box-shadow: 0 0 0 3px var(--alert-soft) !important; }
.login-btn { width: 100%; padding: 12px; background: var(--accent); color: #fff; border: none; border-radius: 11px; font-size: 14px; font-weight: 600; font-family: var(--font-ui); cursor: pointer; transition: background 0.15s; }
.login-btn:hover:not(:disabled) { background: var(--accent2); }
.login-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.login-error { color: var(--alert); font-size: 13px; margin-top: 12px; min-height: 20px; }
.login-link { color: var(--accent-ink); cursor: pointer; font-size: 13px; text-decoration: none; margin-top: 20px; display: inline-block; background: none; border: none; padding: 0; font-weight: 600; }
.login-link:hover { text-decoration: underline; }
/* Auth-platform Phase 3: native provider sign-in buttons + divider. */
.login-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 12px; color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.login-btn-provider { background: var(--surface); color: var(--ink); border: 1px solid var(--border); margin-top: 10px; }
.login-btn-provider:hover:not(:disabled) { background: var(--surface2); border-color: var(--accent); }

.login-label-required::after {
  content: " *";
  color: var(--alert);
  margin-left: 4px;
}

@media (max-width: 820px) { .login-brand { display: none; } }

/* Loading Animation Styles */
@keyframes pulseLogo { 0% { transform: scale(0.95); opacity: 0.8;} 50% { transform: scale(1.05); opacity: 1;} 100% { transform: scale(0.95); opacity: 0.8;} }
.pulsing-logo { animation: pulseLogo 1.5s infinite ease-in-out; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.spinning { animation: spin 1s linear infinite; }
@keyframes libCardFlash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--accent); } }
.lib-card-flash { animation: libCardFlash 1.6s ease-out; }

/* --- EMPLOYEES PAGE STYLES --- */
.employee-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.sub-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.sub-header h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.sub-header p { margin: 4px 0 0; color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.search-box { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 8px 12px; gap: 8px; transition: border-color .15s, box-shadow .15s; }
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#startsida-ai-inputwrap { transition: border-color .15s, box-shadow .15s; }
#startsida-ai-inputwrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-box .material-symbols-rounded { color: var(--faint); font-size: 20px; }
.search-box input { border: none; outline: none; background: transparent; color: var(--ink); font-family: var(--font-ui); font-size: 14px; }
.sync-button .material-symbols-rounded { margin-right: 5px; transition: transform 0.5s; }
.employee-table-wrapper { overflow-x: auto; max-height: 65vh; overflow-y: auto; }
.employee-table { width: 100%; border-collapse: collapse; }
.employee-table th, .employee-table td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--hair); color: var(--ink); white-space: nowrap; }
.employee-table tr:hover td { background: var(--surface2); }
.employee-table tr:last-child td { border-bottom: none; }
.employee-table td.placeholder { color: var(--faint); }
.employee-table th { position: sticky; top: 0; background: var(--surface2); z-index: 1; color: var(--faint); font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.employee-table th[data-sort-key], .wb-case-table th[data-sort-key] { cursor: pointer; user-select: none; }
.employee-table th[data-sort-key]::after, .wb-case-table th[data-sort-key]::after { content: '\2195'; margin-left: 6px; opacity: 0.45; font-size: 10px; }
.employee-table th[data-sort-key].sorted-asc::after, .wb-case-table th[data-sort-key].sorted-asc::after { content: '\2191'; opacity: 1; color: var(--accent-ink); }
.employee-table th[data-sort-key].sorted-desc::after, .wb-case-table th[data-sort-key].sorted-desc::after { content: '\2193'; opacity: 1; color: var(--accent-ink); }
.employee-table th[data-sort-key]:hover, .wb-case-table th[data-sort-key]:hover { color: var(--ink); }
.employee-table .employee-name { font-weight: 600; }
.employee-table .employee-email { color: var(--muted); font-size: 12px; }
.employee-table th:first-child, .employee-table td:first-child { width: 32px; }
.employee-table.no-bulk-select th:first-child, .employee-table.no-bulk-select td:first-child { display: none; }
/* Part 4 — freeze the first column so it stays visible while the wide table
   scrolls horizontally (works at mobile width too — the wrapper already scrolls
   overflow-x). The checkbox column (.eq-col-check, when present) sticks at the
   left edge; the first DATA column (.eq-col-frozen) sticks just to its right via
   --frozen-left (set in employees.js to the checkbox column's rendered width, 0
   when the checkbox column is hidden for non-admins). z-index sits above regular
   cells; the sticky header (th, already z-index:1) still wins at the top-left
   corner because the frozen header cells get a higher z-index. Opaque
   backgrounds (tokens, dark-mode aware) stop scrolled cells showing through. */
.employee-table td.eq-col-check { position: sticky; left: 0; z-index: 2; background: var(--surface); }
.employee-table th.eq-col-check { position: sticky; left: 0; z-index: 4; background: var(--surface2); }
.employee-table td.eq-col-frozen { position: sticky; left: var(--frozen-left, 0); z-index: 2; background: var(--surface); }
.employee-table th.eq-col-frozen { position: sticky; left: var(--frozen-left, 0); z-index: 3; background: var(--surface2); }
.employee-table tr:hover td.eq-col-frozen, .employee-table tr:hover td.eq-col-check { background: var(--surface2); }

/* #418 — drag-and-drop column reordering (Kolumner picker) + resizable column
   widths (header drag handle). The picker's ordered rows mirror the table's
   current display order 1:1: a drag handle (or a pin icon on the frozen first
   row, which can't be reordered — see employees.js buildSelectedColumnRow),
   the existing checkbox, the label, and up/down move buttons (kept as the
   touch/keyboard-friendly path — dragging degrades poorly on touch, but these
   buttons work everywhere: mouse, touch and keyboard alike). */
.emp-col-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.emp-col-row:last-child { border-bottom: none; }
.emp-col-row.dragging { opacity: 0.4; }
.emp-col-row-label { flex: 1; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-col-drag-handle { font-size: 18px; color: var(--faint); cursor: grab; }
.emp-col-drag-handle:active { cursor: grabbing; }
.emp-col-pin { font-size: 16px; color: var(--faint); }
.emp-col-move-btn {
  width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); display: flex; align-items: center;
  justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0;
}
.emp-col-move-btn .material-symbols-rounded { font-size: 14px; }
.emp-col-move-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
.emp-col-move-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.emp-col-divider { border-top: 1px solid var(--border); margin: 4px 0; }

/* Column-picker live search box (#: "search for columns" — orgs can accumulate
   many custom-field columns over time). Sticky at the top of the scrollable
   .md-dropdown-menu so it stays reachable while the filtered row list below is
   scrolled; the picker's own -6px negative margins cancel out .md-dropdown-menu's
   6px padding so the sticky bar spans the menu's full width. */
.emp-col-search-wrap { position: sticky; top: 0; z-index: 1; background: var(--md-surface); margin: -6px -6px 6px; padding: 6px 6px 8px; border-bottom: 1px solid var(--border); }
.emp-col-search-wrap .emp-col-search-input { margin-bottom: 0; }
.emp-col-no-match { color: var(--muted); font-size: 12px; padding: 10px; text-align: center; }

/* Resize handle: a thin hit-area at the right edge of every header cell.
   Desktop-only by design (Pointer Events, employees.js wireColumnResize) — the
   handle is hidden at phone widths below, since the employee table already
   scrolls horizontally there and a resize drag would fight that touch-scroll
   gesture; column REORDERING (the up/down buttons above) stays available at
   every width, unlike this drag-to-resize interaction. */
.employee-table th .emp-col-resize-handle {
  position: absolute; top: 0; right: -3px; bottom: 0; width: 6px;
  cursor: col-resize; z-index: 5; touch-action: none;
}
.employee-table th .emp-col-resize-handle:hover,
.employee-table th .emp-col-resize-handle.resizing { background: var(--accent); opacity: 0.5; }
@media (max-width: 768px) {
  .emp-col-resize-handle { display: none; }
}

.gender-chip { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; text-transform: capitalize; }
.gender-chip.female { background: var(--accent-soft); color: var(--accent-ink); }
.gender-chip.male { background: var(--gold-soft); color: var(--gold); }
.analysis-chip { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; text-transform: capitalize; }
.analysis-chip.yes { background: var(--accent-soft); color: var(--accent-ink); }
.analysis-chip.no { background: var(--alert-soft); color: var(--alert); }
.status-chip { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; text-transform: capitalize; }
.status-chip.active { background: var(--accent-soft); color: var(--accent-ink); }
.status-chip.onboarding { background: var(--gold-soft); color: var(--gold); }
.status-chip.inactive { background: var(--alert-soft); color: var(--alert); }
.performance-stars { color: var(--gold); }

/* --- SETTINGS PAGE STYLES --- */
.settings-container { display: flex; flex-direction: column; gap: 24px; }
.settings-tile-row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 8px; background: none; border: none; border-bottom: 1px solid var(--md-border); cursor: pointer; text-align: left; font-family: var(--font-ui); }
.settings-tile-row:last-child { border-bottom: none; }
.settings-tile-row:hover { background: var(--md-background); }
.settings-tile-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--md-primary-bg); color: var(--md-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* Sensitive SuperAdmin-only tile (orgManagement — tenant GDPR export/delete)
   gets a light-red icon treatment instead of the shared brand style, to flag
   it as distinct/destructive. Same token pair as other alert surfaces. */
.settings-tile-icon-danger { background: var(--alert-soft); color: var(--alert); }
.settings-tile-text { flex: 1; min-width: 0; }
.settings-tile-label { display: block; font-weight: 600; color: var(--md-on-surface); }
.settings-tile-desc { display: block; font-size: 12px; color: var(--md-on-surface-variant); }
.settings-tile-chevron { color: var(--md-on-surface-variant); }
/* Section break before the SuperAdmin-only tiles, so they read as a distinct
   group instead of being interleaved with tiles any Admin can also open. */
.settings-tile-divider { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; padding-top: 14px; border-top: 1px solid var(--md-border); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--md-on-surface-variant); }
.card-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 16px; }
.header-icon-group { display: flex; align-items: center; gap: 12px; }
.header-icon-group .material-symbols-rounded { background-color: var(--md-primary-bg); color: var(--md-primary); padding: 8px; border-radius: 8px; }
.profiles-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--md-background); padding: 16px; border-radius: 12px; margin-bottom: 24px; }
.md-input { height: 40px; padding: 0 16px; border: 1px solid var(--md-border); border-radius: 8px; font: var(--md-type-body-medium); color: var(--md-on-surface); background: var(--md-surface); outline: none; transition: border-color 0.2s; }
.md-input:focus { border-color: var(--md-primary); box-shadow: 0 0 0 1px var(--md-primary); }
.md-select { height: 40px; padding: 0 12px; border: 1px solid var(--md-border); border-radius: 8px; background: var(--md-surface); color: var(--md-on-surface); font: var(--md-type-body-medium); cursor: pointer; }
.md-select:focus { outline: none; border-color: var(--md-primary); box-shadow: 0 0 0 1px var(--md-primary); }

/* Custom Material dropdown (replaces the boxy native <select> popup) */
.md-dropdown { position: relative; display: inline-block; }
.md-dropdown-toggle { display: flex; align-items: center; gap: 0.6rem; min-width: 220px; background: var(--md-surface); padding: 0.55rem 0.9rem; border: 1px solid var(--md-border); border-radius: 99px; cursor: pointer; font: var(--md-type-body-medium); color: var(--md-on-surface); box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; }
.md-dropdown-toggle:hover { background: var(--md-primary-bg); border-color: var(--md-primary); }
.md-dropdown-toggle:focus-visible { outline: none; border-color: var(--md-primary); box-shadow: 0 0 0 2px var(--md-primary-bg); }
.md-dropdown-toggle .md-dropdown-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-dropdown-toggle .md-dropdown-caret { margin-left: auto; color: var(--md-on-surface-variant); transition: transform 0.18s ease; }
.md-dropdown.open .md-dropdown-caret { transform: rotate(180deg); }
.md-dropdown-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 100%; max-height: 340px; overflow-y: auto; background: var(--md-surface); border: 1px solid var(--md-border); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.14); padding: 6px; z-index: 1200; display: none; }
.md-dropdown.open .md-dropdown-menu { display: block; animation: md-dd-in 0.14s ease; }
@keyframes md-dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.md-dropdown-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; background: none; border: none; padding: 0.55rem 0.75rem; border-radius: 10px; cursor: pointer; font: var(--md-type-body-medium); color: var(--md-on-surface); white-space: nowrap; }
.md-dropdown-item:hover { background: var(--md-primary-bg); }
.md-dropdown-item.selected { background: var(--md-primary-bg); color: var(--md-primary); font-weight: 600; }
.md-dropdown-item .md-dropdown-check { margin-left: auto; color: var(--md-primary); font-size: 1.1rem; visibility: hidden; }
.md-dropdown-item.selected .md-dropdown-check { visibility: visible; }
.md-dropdown-empty { padding: 0.75rem; color: var(--md-on-surface-variant); font: var(--md-type-body-medium); }
.md-dropdown-toggle[disabled] { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
.md-dropdown-item.disabled, .md-dropdown-item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* Toggle-button variant that reproduces .md-select's exact closed-state box
   (rectangular, 8px radius, plain border) for a custom JS-driven dropdown —
   combine with .md-dropdown-toggle for the flex/label/caret layout. Native
   <select> popups can't be restyled cross-browser; this lets a dropdown keep
   the existing closed-select look while using .md-dropdown-menu for the open
   popup instead of the OS-native one (see the ENKÄT report picker). */
.md-dropdown-toggle.md-select-toggle { height: 40px; min-width: 0; width: 100%; padding: 0 12px; border-radius: 8px; box-shadow: none; gap: 0.5rem; box-sizing: border-box; }
.md-dropdown-toggle.md-select-toggle:hover { background: var(--md-surface); border-color: var(--md-border); }
.md-dropdown-toggle.md-select-toggle:focus-visible { border-color: var(--md-primary); box-shadow: 0 0 0 1px var(--md-primary); }

/* Language picker (topbar #lang-toggle, its mobile drawer copy, and the login
   screen's copy — all built by shell.js from window.SUPPORTED_LANGS). A
   compact .md-dropdown variant: the default .md-dropdown-toggle is a 220px
   min-width form control, way too wide for a 2-letter code sat next to the
   topbar's 40px icon buttons — was previously a bare .eq-segmented pill row,
   converted to this app's own dropdown component (see design-consistency-
   guard.test.js's CUSTOM_DROPDOWN_BACKED_SELECTS). */
.lang-dropdown { flex-shrink: 0; }
.lang-dropdown .md-dropdown-toggle { min-width: 0; width: auto; padding: 0 10px; gap: 0.35rem; }
.lang-dropdown .md-dropdown-menu { min-width: 128px; right: 0; left: auto; }

/* Personallista rows-per-page picker (issue #956) — was a bare native
   <select class="rows-select">, visually foreign next to every other
   .md-dropdown picker in the app. Same compact variant as .lang-dropdown
   above: a 2-3 digit row count next to the pagination arrows doesn't need
   the default 220px form-control width. */
.rows-per-page-dropdown { flex-shrink: 0; }
.rows-per-page-dropdown .md-dropdown-toggle { min-width: 0; width: auto; border: none; background: transparent; box-shadow: none; padding: 4px 8px; gap: 0.3rem; }
.rows-per-page-dropdown .md-dropdown-toggle:hover { background: var(--md-primary-bg); }
/* .table-pagination sits at the very bottom of .employee-card, which has
   overflow:hidden (rounded card corners) — .md-dropdown-menu's default
   downward placement (top: 100%) got clipped there almost entirely, with no
   way to scroll to the hidden options (reported live: only "10" sliver
   visible, 50/100 unreachable). Open upward instead, same fix shape as any
   dropdown anchored to the bottom edge of a clipping container. */
.rows-per-page-dropdown .md-dropdown-menu { min-width: 80px; top: auto; bottom: calc(100% + 6px); }

/* Settings → per-organization feature-flag override picker: searchable org
   list rows. The 3-way (Standard/På/Av) override control itself is a plain
   .eq-segmented (design-unify #1600 follow-up — same shared component the
   global flags panel's per-flag På/Av toggle uses), no dedicated class needed. */
.org-flags-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--border); }
.org-flags-row:last-child { border-bottom: none; }
.org-flags-row:hover { background: var(--accent-soft); }
.org-flags-row.selected { background: var(--accent-soft); }

/* Indeterminate workspace loader bar (no real progress events to report) */
.loader-indeterminate { width: 40%; border-radius: 3px; animation: loader-slide 1.15s ease-in-out infinite; }
@keyframes loader-slide {
  0%   { margin-left: -45%; }
  100% { margin-left: 100%; }
}
.params-table { width: 100%; border-collapse: collapse; }
.params-table th { text-align: left; padding: 12px 16px; font: var(--md-type-label-small); color: var(--md-on-surface-variant); text-transform: uppercase; border-bottom: 1px solid var(--md-border); }
.params-table td { padding: 20px 16px; border-bottom: 1px solid var(--md-border); vertical-align: middle; }
.params-table tr:last-child td { border-bottom: none; }
.param-name { font: var(--md-type-title-medium); color: var(--md-on-surface); display: block; }
.param-meaning { font: var(--md-type-body-medium); color: var(--md-on-surface-variant); display: block; margin-top: 4px; }
.value-input-wrapper { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.value-input-wrapper input { width: 80px; text-align: center; }
.unit-label { font: var(--md-type-label-small); color: var(--md-on-surface-variant); width: 32px; }
.toast-notification { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #323232; color: white; padding: 12px 24px; border-radius: 4px; font: var(--md-type-body-medium); z-index: 2000; box-shadow: 0 3px 5px rgba(0,0,0,0.3); transition: opacity 0.3s; }
.confirm-dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 3000; transition: 0.2s; }
.confirm-dialog { background: white; padding: 24px; border-radius: 28px; width: 100%; max-width: 400px; }
.confirm-dialog h4 { font: var(--md-type-title-large); margin-bottom: 16px; }
.confirm-dialog p { font: var(--md-type-body-large); color: var(--md-on-surface-variant); margin-bottom: 24px; }

/* --- INDIVIDUAL ANALYSIS STYLES --- */
.ia-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; margin-bottom: 16px; }
.ia-location-header { font-size: 18px; font-weight: 700; color: var(--ink); margin: 32px 0 16px 0; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.ia-location-header .material-symbols-rounded { color: var(--accent-ink); }
.ia-role-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--surface2); padding: 12px 16px; border-radius: 12px 12px 0 0; margin-top: 16px; border: 1px solid var(--border); border-bottom: none; flex-wrap: wrap; }
.ia-role-title { font-size: 16px; font-weight: 700; color: var(--accent-ink); margin: 0; }
.ia-target-salary { font-size: 13px; font-weight: 600; color: var(--muted); background: var(--surface); padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.ia-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: 0 0 12px 12px; overflow: hidden; background: var(--surface); margin-bottom: 24px; }
.ia-table th { text-align: left; padding: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: var(--faint); text-transform: uppercase; border-bottom: 1px solid var(--border); background: var(--surface2); }
.ia-table td { padding: 12px; border-bottom: 1px solid var(--hair); vertical-align: middle; color: var(--ink); }
.ia-select { padding: 8px; border-radius: 9px; border: 1px solid var(--border); font-family: var(--font-ui); font-size: 14px; background: var(--surface); color: var(--ink); width: 100%; }
.ia-save-btn { background: var(--accent); color: #fff; border: none; border-radius: 9px; padding: 8px 16px; cursor: pointer; font-weight: 600; }
.ia-save-btn:hover { background: var(--accent2); }
.ia-gap-alert { color: var(--alert); font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- ACTION PLAN STYLES --- */
/* Summary cards use the shared .eq-kpi-grid/.eq-kpi component (see
   ACTION PLAN markup in public/components/action-plan.html) instead of a
   one-off card style — fixes #1951 (inconsistent per-card top-border
   colors with no shared component backing them). */
.ap-table-container { overflow-x: auto; background: var(--md-surface); border: 1px solid var(--md-border); border-radius: 12px; }
.ap-table { width: 100%; border-collapse: collapse; min-width: 950px; table-layout: fixed; }
.ap-table th, .ap-table td { padding: 16px; text-align: left; border-bottom: 1px solid var(--md-border); vertical-align: middle; }
.ap-table th { background: var(--md-background); font: var(--md-type-label-small); color: var(--md-on-surface-variant); text-transform: uppercase; white-space: nowrap; }
.col-emp { width: 25%; }
.col-adj { width: 20%; }
.col-dur { width: 15%; }
.col-split { width: 28%; }
.col-stat { width: 12%; }
.duration-select { width: 100%; padding: 8px; border-radius: 6px; border: 1px solid var(--md-border); font: var(--md-type-body-medium); background: var(--md-surface); color: var(--md-on-surface); outline: none; cursor: pointer; }
.duration-select:focus { border-color: var(--md-primary); }
.split-container { display: flex; gap: 12px; align-items: center; }
.split-input-wrapper { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.split-input-wrapper label { font-size: 10px; color: var(--md-on-surface-variant); font-weight: 600; text-transform: uppercase; }
.split-input { width: 50px; padding: 6px; border: 1px solid var(--md-border); border-radius: 6px; text-align: center; font-size: 14px; outline: none; transition: 0.2s; }
.split-input:focus { border-color: var(--md-primary); }
.split-input.error { border-color: var(--alert); background-color: var(--alert-soft); color: var(--alert); }
.split-input:disabled { background-color: var(--surface2); color: var(--muted); cursor: not-allowed; border-color: var(--border); }
.split-total { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-width: 45px; }
.split-total .val { font-size: 16px; font-weight: bold; }
.split-total .lbl { font-size: 10px; color: var(--md-on-surface-variant); text-transform: uppercase; }
.split-total.error .val { color: var(--alert); }
.split-total.success .val { color: var(--accent-ink); }
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 16px; font-size: 12px; font-weight: 600; }
.status-badge.pending { background: var(--gold-soft); color: var(--gold); }
.status-badge.error { background: var(--alert-soft); color: var(--alert); }

/* --- BENCHMARK SIMULATOR STYLES --- */
.benchmark-tool-grid { display: grid; grid-template-columns: 350px 1fr; grid-gap: 24px; }
.benchmark-tool-grid .card { background: var(--md-surface); border: 1px solid var(--md-border); border-radius: 12px; padding: 24px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: flex; justify-content: space-between; font: var(--md-type-label-small); color: var(--md-on-surface-variant); margin-bottom: 8px; text-transform: uppercase; }

/* Mode Toggle Styling */
.mode-toggle { display: flex; background: var(--md-background); padding: 4px; border-radius: 24px; margin-bottom: 24px; border: 1px solid var(--md-border); }
.mode-toggle button { flex: 1; padding: 8px; border: none; background: transparent; cursor: pointer; border-radius: 20px; font: var(--md-type-label-large); transition: 0.2s; }
.mode-toggle button.active { background: var(--md-primary); color: white; }

/* Gender Toggle */
.gender-toggle { display: flex; background: var(--md-background); padding: 4px; border-radius: 8px; border: 1px solid var(--md-border); }
.gender-toggle button { flex: 1; padding: 8px; border: none; background: transparent; cursor: pointer; border-radius: 6px; font: var(--md-type-body-medium); transition: 0.2s; }
.gender-toggle button.active { background: var(--surface); color: var(--accent-ink); box-shadow: 0 1px 2px rgba(19,36,32,0.1); font-weight: 700;}

/* Salary Input & Slider */
.salary-input-wrapper { border: 1px solid var(--border); border-radius: 11px; overflow: hidden; display: flex; align-items: center; background: var(--surface); box-sizing: border-box; }
.salary-input-wrapper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.salary-input-wrapper input[type="number"] { border: none; font-size: 18px; padding: 12px; flex: 1; outline: none; background: transparent; color: var(--ink); font-variant-numeric: tabular-nums; }
.salary-input-wrapper span { padding: 0 16px; font-weight: 600; color: var(--muted); background: var(--surface2); height: 100%; display: flex; align-items: center;}
.salary-slider { width: 100%; margin-top: 16px; cursor: pointer; accent-color: var(--md-primary); }

/* Comparison Table Styling */
.bm-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.bm-table th { text-align: left; font: var(--md-type-label-small); color: var(--md-on-surface-variant); padding: 12px; border-bottom: 1px solid var(--md-border); text-transform: uppercase; }
.bm-table td { padding: 12px; border-bottom: 1px solid var(--md-border); font-size: 14px; }

/* Results Grid */
.results-subgrid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 24px; margin-top: 24px;}

/* Impact & Shift Cards */
.flex-container { display: flex; align-items: center; justify-content: space-between; margin-top: 16px;}
.gap-value .label { font: var(--md-type-label-small); color: var(--md-on-surface-variant); text-transform: uppercase; }
.gap-value .value { font: var(--md-type-headline); color: var(--md-on-surface); }
.arrow { color: var(--md-on-surface-variant); font-size: 24px; }
.shift-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--md-border); }
.shift-item:last-child { border-bottom: none; }
.shift-item span { font: var(--md-type-body-medium); color: var(--md-on-surface-variant); }
.value-shift { font-weight: 500; color: var(--md-on-surface); }

/* Averages Grid */
.avg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
.avg-box { background: var(--md-background); border: 1px solid var(--md-border); border-radius: 8px; padding: 16px; text-align: center; }
.avg-box .avg-label { font: var(--md-type-label-small); color: var(--md-on-surface-variant); text-transform: uppercase; margin-bottom: 8px; display: block; }
.avg-box .avg-val { font: var(--md-type-title-medium); color: var(--md-on-surface); }

/* Compliance UI UX */
.compliance-check { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.compliance-item { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--md-background); border: 1px solid var(--md-border); border-radius: 8px; transition: all 0.3s; }
.compliance-item .icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: white; border: 1px solid var(--md-border); }
.compliance-item .text-content { flex: 1; }
.compliance-item .label { font: var(--md-type-label-large); color: var(--md-on-surface); margin-bottom: 4px; }
.compliance-item .description { font: var(--md-type-body-medium); color: var(--md-on-surface-variant); }

/* Compliance Status Colors */
.compliance-item.status-ok { background: var(--accent-soft); border-color: var(--accent); }
.compliance-item.status-ok .icon { color: var(--accent-ink); border-color: var(--accent); background: var(--surface); }
.compliance-item.status-alert { background: var(--alert-soft); border-color: var(--alert); }
.compliance-item.status-alert .icon { color: var(--alert); border-color: var(--alert); background: var(--surface); }
.compliance-item.status-warn { background: var(--gold-soft); border-color: var(--gold); }
.compliance-item.status-warn .icon { color: var(--gold); border-color: var(--gold); background: var(--surface); }
.bm-search-box { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 6px 12px; box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; }
.bm-search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bm-search-box .material-symbols-rounded { color: var(--faint); font-size: 20px; }
.bm-search-box input { border: none; outline: none; margin-left: 8px; width: 100%; height: 30px; font-family: var(--font-ui); font-size: 14px; color: var(--ink); background: transparent; }

/* --- SALARY BAND STYLES ---
   Card chrome/typography now build on the shared .eq-card/.eq-card-title
   primitives (see REDESIGN PRIMITIVES, ~line 1546) instead of duplicating
   them — these rules only carry what's genuinely specific to this page
   (icon+label layout, KPI grid shape, the range-track visualisation, the
   accent-highlighted "selected employee" column). */
.sb-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 992px) { .sb-grid { grid-template-columns: 1fr 2fr; } }
/* Intro banner: same "highlighted eq-card" variant used for the page's lead-in
   copy — trims the eq-card-sub's default bottom margin so the card stays as
   snug as it was when the paragraph had a one-off margin-bottom:0.
   Qualified as .eq-card.sb-intro-card (not just .sb-intro-card): this section
   is defined BEFORE .eq-card itself (~line 1546), so a same-specificity
   single-class rule here would lose the "background" cascade to .eq-card's
   own background further down the file — the extra class wins outright. */
.eq-card.sb-intro-card { background: var(--accent-soft); border-left: 4px solid var(--accent); margin-bottom: 16px; }
.sb-intro-card .eq-card-sub { margin-bottom: 0; }
/* .sb-title pairs with .eq-card-title (typography comes from there); this
   only adds the icon+label flex row and the panel-heading spacing. */
.sb-title { margin-bottom: 24px; display: flex; align-items: center; gap: 8px; }
.sb-title .material-symbols-rounded { color: var(--accent-ink); }
.sb-title--spaced { margin-top: 48px; }
/* Sub-heading inside a panel (e.g. "Employee Context") — reuses the same
   title-medium token other cards apply inline (settings.html does the same
   thing ad hoc); named here so this page isn't re-typing the token. */
.sb-subheading { font: var(--md-type-title-medium); margin-bottom: 16px; }
.sb-search-box { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 6px 12px; box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; }
.sb-search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sb-search-box .material-symbols-rounded { color: var(--faint); font-size: 20px; }
.sb-search-box input { border: none; outline: none; margin-left: 8px; width: 100%; height: 30px; font-family: var(--font-ui); font-size: 14px; color: var(--ink); background: transparent; }
.sb-overview { margin-top: 32px; }
.sb-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.sb-stats-grid--2col { grid-template-columns: 1fr 1fr; }
.sb-stat-box { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; text-align: center; }
.sb-stat-box--left { text-align: left; }
.sb-stat-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: var(--faint); text-transform: uppercase; display: block; margin-bottom: 6px; }
.sb-stat-value { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Descriptive (non-numeric) stat value, e.g. "Role | Location". */
.sb-stat-value--text { font-size: 14px; }
/* Accent-highlighted value/column — same token (--md-primary, an alias of
   --accent) the rest of the app uses for emphasis; kept as its own class so
   it's no longer a one-off inline color. */
.sb-accent-value { color: var(--md-primary); }
/* "Selected employee" column in the objective-criteria comparison table.
   Needs the extra specificity here: .sb-table th/.sb-table td (a class +
   an element) already set color, and a single .sb-accent-value class alone
   can't out-rank that — the inline style it replaces always could. */
.sb-table .sb-accent-value { color: var(--md-primary); }
.sb-emp-col-value { font-weight: 500; }
/* "Awaiting selection" placeholder — a page-specific empty state, no shared
   equivalent exists yet elsewhere in the app for this exact shape. Qualified
   as .eq-card.sb-empty-state for the same reason as .sb-intro-card above:
   this rule's "padding" would otherwise lose to .eq-card's own padding
   (defined later in the file, at equal specificity) since both are single
   classes. */
.eq-card.sb-empty-state { grid-column: 2; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--md-on-surface-variant); flex-direction: column; padding: 60px; }
.sb-empty-state .material-symbols-rounded { font-size: 48px; opacity: 0.5; margin-bottom: 16px; }
.band-graph-container { margin: 40px 0; position: relative; padding-bottom: 30px; }
.band-track { width: 100%; height: 24px; background: var(--surface2); border-radius: 12px; position: relative; overflow: visible; }
.band-fill { position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(90deg, var(--accent-soft), var(--accent)); border-radius: 12px; }
.band-marker { position: absolute; top: -8px; width: 4px; height: 40px; background: var(--ink); border-radius: 2px; transform: translateX(-50%); z-index: 10; }
.band-marker-label { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--surface); font-size: 11px; padding: 2px 6px; border-radius: 4px; font-weight: 700; white-space: nowrap; }
.band-label-min { position: absolute; left: 0; bottom: -25px; font-size: 12px; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.band-label-max { position: absolute; right: 0; bottom: -25px; font-size: 12px; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.sb-table { width: 100%; border-collapse: collapse; margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sb-table th, .sb-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--hair); font-size: 14px; color: var(--ink); }
.sb-table th { background: var(--surface2); font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: var(--faint); text-transform: uppercase; font-weight: 500; }
.sb-table tr.highlight { background: var(--accent-soft); }
.sb-table td:first-child { font-weight: 600; color: var(--muted); }

/* --- MOBILE: sidebar becomes an off-canvas drawer (≤900px) --- */
@media (max-width: 900px) {
  #sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px; height: 100vh; z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 6px 0 30px rgba(19, 36, 32, 0.16);
  }
  #sidebar.open { transform: translateX(0); }

  /* Declutter the topbar: icon-only search, SV/EN moves into the drawer
     (see .mobile-lang-toggle below), hamburger is superseded by the fixed
     bottom tab bar's "Mer" button. Without this the fixed-width chrome alone
     (hamburger + search label/kbd + SV/EN pill + theme + notif) exceeds a
     phone's viewport before the title even gets room. */
  #topbar .search-trigger .label,
  #topbar .search-trigger .kbd { display: none; }
  #lang-toggle { display: none; }
  #topbar-hamburger { display: none; }

  /* Room for the fixed bottom tab bar so it never covers page content. */
  #app-content { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* Mobile-only SV/EN toggle inside the drawer (hidden on desktop, where the
   topbar's own toggle applies). */
.mobile-lang-toggle { display: none; }
@media (max-width: 900px) {
  .mobile-lang-toggle { display: flex; margin: 4px 8px 0; }
}

@media (max-width: 900px) {
  .eq-help-panel { width: 100vw; max-width: 100vw; }
}

/* --- MOBILE: fixed bottom tab bar (classic app nav) --- */
.mobile-tabbar { display: none; }
@media (max-width: 900px) {
  .mobile-tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    background: var(--topbar); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-tabbar a, .mobile-tabbar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 4px 6px; border: none; background: transparent; cursor: pointer;
    font-family: var(--font-ui); font-size: 10.5px; font-weight: 600;
    color: var(--muted); text-decoration: none;
  }
  .mobile-tabbar .material-symbols-rounded { font-size: 22px; }
  .mobile-tabbar a.active { color: var(--accent-ink); }
}

/* --- MOBILE: wide data tables scroll horizontally instead of breaking layout --- */
/* Survey question editor rows (SV text · category · type · controls — the EN
   pair was removed, see the "Översättning" step/modal) + the bilingual
   (SV/EN) input pairs still used elsewhere (e.g. action-plan titles). Grid on
   desktop; they stack on phones (see the max-width:768px block below).
   minmax(0, …) lets each column shrink below its content's natural width —
   plain fr tracks take the MAX of that natural width, so a long question
   (e.g. one added from the Frågebibliotek, which arrives pre-filled with real
   text/category instead of empty placeholders) could force the row wider
   than the card and overflow it. The form controls also need width:100% (see
   the inline styles below) since inputs/selects don't stretch to fill a grid
   track on their own. */
.qedit-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 0.9fr) auto; gap: 0.5rem; align-items: center; padding: 0.5rem 0; }
.biling-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

@media (max-width: 768px) {
  .card,
  .eq-card,
  .audit-card,
  .table-card,
  .details-table-wrapper,
  .ia-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Toolbars wrap rather than overflow on narrow screens. */
  .top-action-bar,
  .sub-header,
  .actions { flex-wrap: wrap; gap: 8px; }
  /* Survey editor rows + bilingual pairs collapse to a single column on phones. */
  .qedit-row { grid-template-columns: minmax(0, 1fr); }
  .biling-grid { grid-template-columns: 1fr; }
  /* Wizard step footers keep their buttons on-screen. */
  .wizard-footer { flex-wrap: wrap; }
  .wizard-footer > div { flex-wrap: wrap; }
}

/* Shared hand-rolled modal shell (eq-modal-overlay/eq-modal/*) — used by
   public/components/employees.html's "Add employee" modal (#1189) and
   settings.html/wellness.html's benefit/wellness modals. These classes were
   referenced in markup with no matching rule here (real bug: the modal
   rendered inline in normal document flow instead of as a floating overlay,
   only visible after scrolling past it) — mirrors survey-modal-overlay's own
   fixed/backdrop pattern above, using the app's real design tokens instead
   of that legacy block's --md-* aliases. Prefer window.openModalCard
   (navigation.js) for NEW modals; this exists for markup that already
   hardcodes these class names. */
.eq-modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); display: flex; align-items: center; justify-content: center; padding: 5vh 16px; z-index: 1000; overflow-y: auto; }
.eq-modal { background: var(--surface); border-radius: 16px; width: 100%; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.3); }
.eq-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px 0; }
.eq-modal-title { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.eq-modal-body { padding: 16px 22px 22px; }

/* Shared survey picker / detail modal (survey.js _renderModal). */
.survey-modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; z-index: 1000; overflow-y: auto; }
.survey-modal-card { background: var(--md-surface, #fff); border-radius: 16px; width: 100%; max-width: 560px; padding: 20px 22px; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.3); }
.survey-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.survey-modal-search { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--md-border); border-radius: 10px; margin-bottom: 12px; font-family: inherit; }
.survey-modal-list { max-height: 55vh; overflow-y: auto; }
.survey-modal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--md-border); }

/* ==========================================================================
   REDESIGN PRIMITIVES — buttons, cards, KPI strip, charts, chips
   Shared by pages converted to the new design system (Phase 1+).
   ========================================================================== */
.eq-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 11px; font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s; }
.eq-btn .material-symbols-rounded { font-size: 19px; }
.eq-btn-primary { background: var(--accent); color: #fff; }
.eq-btn-primary:hover:not(:disabled) { background: var(--accent2); }
.eq-btn-ghost { background: var(--surface); border-color: var(--border); color: var(--ink); }
.eq-btn-ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
.eq-btn-ghost.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.eq-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Visually-hide a native <input type="file"> while pairing it with a styled
   `.eq-btn` <label for="..."> trigger (see employees.js document/training-
   record uploads). Uses the standard accessible clip technique — NOT
   display:none/visibility:hidden, either of which would pull the control out
   of the accessibility tree and break keyboard/screen-reader use — so the
   input stays focusable and its label-for click-forwarding keeps working. */
.eq-file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.eq-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: var(--pad); }
.eq-card-title { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.eq-card-sub { font-size: 13px; color: var(--muted); margin-top: 2px; margin-bottom: 12px; }

/* Layout helpers — gap-based, never sibling margins */
.main-content-area { display: flex; flex-direction: column; gap: 16px; }
.eq-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }

/* KPI strip */
.eq-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.eq-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.eq-kpi .k-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.eq-kpi .k-value { font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.eq-kpi.hl { background: var(--accent); border-color: var(--accent); }
.eq-kpi.hl .k-label { color: rgba(255,255,255,.85); }
.eq-kpi.hl .k-value { color: #fff; }

.eq-table-wrap { overflow-x: auto; margin-top: 12px; }
.compliance-summary-table td:not(:first-child), .compliance-summary-table th:not(:first-child) { font-variant-numeric: tabular-nums; }

/* Workforce composition split bar */
.eq-split-track { display: flex; height: 12px; border-radius: 20px; overflow: hidden; background: var(--surface2); }
.eq-split-women { background: var(--accent); }
.eq-split-men { background: var(--gold); }
.eq-split-legend { display: flex; gap: 20px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.eq-split-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.eq-split-legend .dot-women { background: var(--accent); }
.eq-split-legend .dot-men { background: var(--gold); }
.eq-split-legend b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Average-salary comparison bars */
.eq-compare { display: flex; flex-direction: column; gap: 10px; }
.eq-compare-row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; }
.eq-compare-row .c-lbl { font-size: 13px; color: var(--muted); }
.eq-compare-row .c-bar { height: 10px; background: var(--surface2); border-radius: 20px; overflow: hidden; }
.eq-compare-row .c-fill { display: block; height: 100%; border-radius: 20px; width: 0; transition: width .4s ease; }
.eq-compare-row .c-fill.women { background: var(--accent); }
.eq-compare-row .c-fill.men { background: var(--gold); }
.eq-compare-row .c-fill.group { background: var(--faint); }
.eq-compare-row .c-val { font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.eq-compare-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--muted); }
.eq-compare-foot b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Narrative summary */
.eq-narrative { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 6px; }
.eq-narrative b { color: var(--ink); }
.eq-narrative-row { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--hair); }
.eq-narrative-row:last-child { padding-bottom: 0; }
.eq-micro { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.eq-gap.alert { color: var(--alert); font-weight: 600; }
.eq-gap.gold { color: var(--gold); font-weight: 600; }
.eq-gap.ok { color: var(--accent-ink); font-weight: 600; }
.eq-gap.muted { color: var(--muted); }
.eq-gap b { font-weight: 700; }

/* Status chips (soft bg + matching ink) */
.eq-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; }
.eq-chip.ok { background: var(--accent-soft); color: var(--accent-ink); }
.eq-chip.warn { background: var(--gold-soft); color: var(--gold); }
.eq-chip.alert { background: var(--alert-soft); color: var(--alert); }
/* #1995 — generic neutral/default modifier for a plain surface2/muted chip
   (e.g. a "closed"/inactive status), so call sites stop falling back to an
   inline style="background:var(--surface2); color:var(--muted);" override.
   #1997 — .eq-chip.rev-guardrail-redacted shares this exact color pairing,
   so it's merged into the same rule rather than duplicated below. */
.eq-chip.neutral, .eq-chip.rev-guardrail-redacted { background: var(--surface2); color: var(--muted); }

/* ==========================================================================
   SURVEY RESULTS DASHBOARD (redesign) — filter bar, KPI cards, heatmap,
   themes/quotes. See design_handoff_equipay_redesign/SURVEY_DASHBOARD.md.
   The diverging heatmap ramp uses fixed hexes (see .sd-heat-legend-bar) —
   intentionally outside the light/dark token set, per that spec's own note.
   ========================================================================== */
.sd-filterbar { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; animation: eqfade .35s ease; }
.sd-filter-field { display: flex; flex-direction: column; gap: 4px; }
.sd-filter-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.sd-compare-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; border-radius: 9px; padding: 0 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; align-self: flex-end; border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.sd-compare-btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.sd-compare-btn .material-symbols-rounded { font-size: 17px; }
.sd-anon-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface2); color: var(--muted); border-radius: 20px; padding: 6px 12px; font-size: 12px; align-self: flex-end; }
.sd-anon-pill .material-symbols-rounded { font-size: 15px; color: var(--faint); }
.sd-layout-toggle { display: flex; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; align-self: flex-end; }
.sd-layout-toggle button { padding: 6px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; border: none; font-family: inherit; background: transparent; color: var(--muted); }
.sd-layout-toggle button.active { background: var(--surface); color: var(--accent-ink); box-shadow: 0 1px 2px rgba(19, 36, 32, .14); }

/* Report export toolbar (QW2 #198): CSV download + Print/PDF, design-system buttons. */
.sd-export-toolbar { display: inline-flex; gap: 8px; align-self: flex-end; flex-wrap: wrap; }
.sd-export-btn { height: 36px; padding: 6px 14px; }
.sd-export-btn .material-symbols-rounded { font-size: 18px; margin-right: 6px; }
/* On narrow screens collapse the export buttons to icon-only so the toolbar wraps cleanly. */
@media (max-width: 560px) {
  .sd-export-btn .sd-export-label { display: none; }
  .sd-export-btn .material-symbols-rounded { margin-right: 0; }
}
/* Print-only report header — hidden on screen, shown in the PDF/print output. */
.sd-print-header { display: none; }
.sd-print-header h2 { margin: 0 0 4px; font-family:var(--font-ui); font-size: 1.4rem; }
.sd-print-header .sub { color: var(--muted); font-size: 0.9rem; }

/* OKR board-ready export toolbar (OKR-QW2 #206): CSV download + Print/PDF,
   design-system buttons — same pattern as .sd-export-toolbar above. */
.okr-export-toolbar { display: inline-flex; gap: 8px; align-self: flex-end; flex-wrap: wrap; }
.okr-export-btn { height: 36px; padding: 6px 14px; }
.okr-export-btn .material-symbols-rounded { font-size: 18px; margin-right: 6px; }
/* On narrow screens collapse the export buttons to icon-only so the toolbar wraps cleanly. */
@media (max-width: 560px) {
  .okr-export-btn .okr-export-label { display: none; }
  .okr-export-btn .material-symbols-rounded { margin-right: 0; }
}
/* Print-only OKR report header — hidden on screen, shown in the PDF/print output. */
.okr-print-header { display: none; }
.okr-print-header h2 { margin: 0 0 4px; font-family:var(--font-ui); font-size: 1.4rem; }
.okr-print-header .sub { color: var(--muted); font-size: 0.9rem; }

/* EU Pay Transparency Directive report (F3, #261) — same print-only header
   pattern as .okr-print-header above. */
.eupt-print-header { display: none; }
.eupt-print-header h2 { margin: 0 0 4px; font-family:var(--font-ui); font-size: 1.4rem; }
.eupt-print-header .sub { color: var(--muted); font-size: 0.9rem; }

/* Annual pay-equity snapshot (F1, #261) — same print-only header pattern as
   .okr-print-header/.eupt-print-header above. */
.pes-print-header { display: none; }
.pes-print-header h2 { margin: 0 0 4px; font-family:var(--font-ui); font-size: 1.4rem; }
.pes-print-header .sub { color: var(--muted); font-size: 0.9rem; }

/* Employee self-service (My overview) quick-link tiles */
.es-quicklink { border: 1px solid var(--border); }
.es-quicklink:hover { border-color: var(--accent); background: var(--accent-soft); }

.sd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 16px; }
.sd-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.sd-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; margin-bottom: 16px; animation: eqfade .35s ease; }
.sd-card:last-child { margin-bottom: 0; }
.sd-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.sd-sublabel { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* .sd-lifecycle-row — originally #1537's Pågående-dashboard lifecycle-grouped
   run list (retired: merged into survey-library.js's "Pågående" list, see
   survey-dashboard.js's header comment above sendReminderNowAction). Kept
   because survey-result-view.js's "Dela & behörighet" tab still reuses this
   exact row shape for its grant list (data-qa="srgrantrow"). */
.sd-lifecycle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); flex-wrap: wrap; }

/* eNPS card */
.sd-enps-score { font-weight: 800; line-height: .85; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sd-enps-delta { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft); color: var(--accent-ink); border-radius: 20px; padding: 3px 9px; font-size: 12px; font-weight: 700; }
.sd-enps-delta .material-symbols-rounded { font-size: 15px; }
.sd-split-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--surface2); }
.sd-enps-legend { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); margin-top: 10px; }
.sd-enps-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }

/* Participation card */
.sd-part-pct { font-weight: 800; font-variant-numeric: tabular-nums; }
.sd-part-bar { height: 8px; border-radius: 5px; background: var(--surface2); overflow: hidden; }
.sd-part-bar > div { height: 100%; background: var(--accent); }
.sd-part-caption { font-size: 12.5px; color: var(--muted); margin-top: 8px; }

/* Heatmap */
.sd-heat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sd-heat-legend { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--faint); }
.sd-heat-legend-bar { width: 120px; height: 8px; border-radius: 5px; background: linear-gradient(90deg, #e59a80, #f5dca6, #e7ecdd, #9cc7b6, #0f7a5c); }
.sd-heat-scroll { overflow-x: auto; }
.sd-heat-inner { min-width: 640px; }
.sd-heat-row { display: flex; gap: 6px; align-items: stretch; margin-bottom: 6px; }
.sd-heat-row:last-child { margin-bottom: 0; }
.sd-heat-label { flex: 0 0 160px; font-size: 13px; font-weight: 600; display: flex; align-items: center; }
.sd-heat-colhead { flex: 1; min-width: 66px; text-align: center; }
.sd-heat-colhead .name { font-weight: 700; font-size: 12.5px; }
.sd-heat-colhead .sub { font-size: 10.5px; color: var(--faint); font-family: var(--font-mono); }
.sd-heat-avgcol { flex: 0 0 58px; }
.sd-heat-avg-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--faint); text-align: center; }
.sd-heat-cell { display: flex; align-items: center; justify-content: center; padding: 12px 8px; border-radius: 9px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; flex: 1; min-width: 66px; }
.sd-heat-cell.avg { flex: 0 0 58px; }
.sd-heat-cell.locked { background: var(--surface2); color: var(--faint); font-weight: 400; }
.sd-heat-cell .material-symbols-rounded { font-size: 16px; }

/* Themes card */
.sd-theme-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.sd-theme-row:last-child { border-bottom: none; padding-bottom: 0; }
.sd-theme-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sd-theme-name { font-size: 13.5px; font-weight: 600; }
.sd-theme-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.sd-theme-chip .material-symbols-rounded { font-size: 14px; }
.sd-theme-bar { height: 7px; border-radius: 4px; background: var(--surface2); overflow: hidden; }
.sd-theme-bar > div { height: 100%; }

/* Focus areas card */
.sd-focus-row { display: flex; align-items: center; gap: 12px; background: var(--alert-soft); border: 1px solid color-mix(in srgb, var(--alert) 22%, transparent); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.sd-focus-row:last-child { margin-bottom: 0; }
.sd-focus-row .warn-ic { color: var(--alert); font-size: 20px; }
.sd-focus-text { flex: 1; min-width: 0; }
.sd-focus-text .label { font-weight: 600; font-size: 13.5px; }
.sd-focus-text .avg { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sd-focus-action { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; border: none; border-radius: 9px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sd-focus-action.icon-only { width: 34px; height: 34px; padding: 0; justify-content: center; }
.sd-focus-action .material-symbols-rounded { font-size: 18px; }

/* Quotes card */
.sd-quotes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.sd-quote { border-left: 3px solid var(--border); background: var(--surface2); border-radius: 0 10px 10px 0; padding: 12px 14px; }
.sd-quote-text { font-size: 13.5px; line-height: 1.5; margin-bottom: 8px; }
.sd-quote-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* Layout B — command grid (stacks below ~900px) */
.sd-layout-b { display: grid; grid-template-columns: minmax(280px, 330px) 1fr; gap: 16px; align-items: start; }
.sd-layout-b .sd-rail, .sd-layout-b .sd-main { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) {
  .sd-layout-b { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SALARY REVISION PLANNER (Lönerevisionsplaneraren) — 3-panel layout: rule
   builder (left) + analysis/comparison + group details (right, stacked).
   ========================================================================== */
.sr-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 992px) { .sr-grid { grid-template-columns: minmax(300px, 360px) 1fr; } }
.sr-right-col { display: flex; flex-direction: column; gap: 24px; }

.sr-rule-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.sr-rule-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.sr-rule-card .sr-rule-title { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.sr-rule-card .sr-rule-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.sr-rule-delete { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--alert); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sr-rule-delete:hover { background: var(--alert-soft); border-color: var(--alert); }
.sr-rule-delete .material-symbols-rounded { font-size: 18px; }

.sr-new-rule-form { border-top: 1px solid var(--hair); padding-top: 16px; margin-top: 4px; }

.sr-recent { border-top: 1px solid var(--hair); margin-top: 20px; padding-top: 16px; }
.sr-recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sr-recent-list li { font-size: 12.5px; color: var(--muted); background: var(--surface2); border-radius: 8px; padding: 8px 10px; }
.sr-recent-list li b { color: var(--ink); }

.sr-tax-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; }
.sr-tax-toggle input { cursor: pointer; }

.sr-group-table .sr-change-badge { font-variant-numeric: tabular-nums; }

/* Intro banner — same "highlighted eq-card" variant as salary-band.html's
   .sb-intro-card (see ~line 1391); trims eq-card-sub's default bottom margin
   to match this banner's original snug fit. */
.sr-intro-card { background: var(--accent-soft); border-left: 4px solid var(--accent); margin-bottom: 16px; }
.sr-intro-card .eq-card-sub { margin-bottom: 0; }

/* Apply-status line (#sr-apply-status): srSetApplyStatus() in salary-revision.js
   always sets el.style.color inline (success/error), so no color is set here
   — only the layout/size that used to be a one-off inline style. */
.sr-status-text { font-size: 13px; margin: 8px 0 0; min-height: 16px; }

/* Analysis & Comparison panel: three stacked metric sections. Two of the
   three shared an identical inline "divider" treatment (padding-top + top
   border); expressed once here instead of repeated per-section. */
.sr-analysis-block { margin-bottom: 20px; }
.sr-analysis-block--divided { padding-top: 16px; border-top: 1px solid var(--hair); }

/* Current/simulated gap figures inside .gap-value .value (shared class, see
   ~line 1357): this page renders the median gap as the primary figure and
   the mean gap as a secondary, smaller figure — same two-tier sizing
   benchmark-tool.html uses for its own current/simulated comparison.
   Qualified as .gap-value .value.sr-gap-value--* (not a bare single class):
   .gap-value .value already sets font-size at 2-class specificity, which
   would otherwise beat a single .sr-gap-value--primary/secondary class
   outright regardless of source order. */
.gap-value .value.sr-gap-value--primary { font-size: 26px; }
.gap-value .value.sr-gap-value--secondary { font-size: 20px; }

/* Budget-impact box: 3 metrics instead of .avg-grid's default 4-column grid. */
.sr-budget-grid { grid-template-columns: repeat(3, 1fr); }

/* --- Lönerevision collaborative budget workflow (revision-workflow) --- */
.rev-form-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .rev-form-grid { grid-template-columns: repeat(3, 1fr); } }
.rev-form-grid .md-input,
.rev-form-grid .md-dropdown-toggle.md-select-toggle,
.rev-form-grid select.md-select,
.rev-form-grid .salary-input-wrapper { height: 46px; box-sizing: border-box; }

/* "Ny cykel" step 1 (Policy & period) redesign (design handoff, 2026-08-09).
   Scoped to .rev-step1-* only — .rev-form-grid/.form-group's own shared
   rules above are reused elsewhere (e.g. the reallocate-budget panel,
   revision-workflow.js) and must stay unaffected. */
.rev-step1-title { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: var(--ink); }
.rev-step1-subtitle { margin: 0 0 20px; color: var(--muted); font-size: 13.5px; }
.rev-step1-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .rev-step1-grid { grid-template-columns: 1fr 1fr; } }
.rev-step1-grid .form-group.rev-step1-span2 { grid-column: 1 / -1; }
.rev-step1-grid label { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: none; justify-content: flex-start; }
.rev-step1-hint { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; }
.rev-step1-estimate { font-size: 12.5px; color: var(--accent-ink); margin: 12px 0 0; font-weight: 600; }

.rev-policy-chip { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; background: var(--surface2); }
.rev-policy-chip .material-symbols-rounded { color: var(--accent); font-size: 19px; }
.rev-policy-chip-name { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--ink); }

.rev-step1-scenarios { margin-top: 16px; border-top: 1px solid var(--hair); padding-top: 16px; }
.rev-step1-scenarios summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; list-style: none; }
.rev-step1-scenarios summary::-webkit-details-marker { display: none; }
.rev-step1-scenarios summary .material-symbols-rounded { font-size: 18px; color: var(--accent); }
.rev-emp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 11px; padding: 10px; }
.rev-emp-item { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 6px; border-radius: 8px; cursor: pointer; }
.rev-emp-item:hover { background: var(--surface2); }
.rev-emp-item .rev-emp-sal { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Searchable multi-select employee picker (Included employees + Final-Say
   users on the create-cycle form): a search box + chips row of the current
   selection sit above the checkbox list rendered into .rev-emp-list. */
.rev-picker { display: flex; flex-direction: column; gap: 8px; }
.rev-picker-search-row { display: flex; align-items: center; gap: 10px; }
.rev-picker-search-box { flex: 1; min-width: 0; }
.rev-picker-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.rev-picker-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rev-picker-chip { background: var(--accent-soft); color: var(--accent-ink); gap: 6px; }
.rev-picker-chip-remove { border: none; background: none; padding: 0; margin: 0; color: inherit; font-size: 14px; line-height: 1; cursor: pointer; opacity: .75; }
.rev-picker-chip-remove:hover { opacity: 1; }

/* #1550 — wizard step 4 "Granskare & grupper": external/virtual group rows
   (list card, next to "+ Skapa grupp") and the approval-chain preview
   (chip-per-level, one row per included employee). A subtle --surface2 fill
   (vs. the parent .eq-card's own --surface) reads as a distinct row-card
   inside the card, not just an outline; flex-wrap keeps the row usable at
   phone widths once the Edit/Delete actions (added as a product-owner
   follow-up to the initial #1550 ship) push total content past one line. */
.rev-vgroup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; background: var(--surface2); }
.rev-vgroup-row-main { flex: 1; min-width: 120px; }
.rev-vgroup-row-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.rev-vgroup-row-count { font-size: 12px; color: var(--muted); }
.rev-vgroup-row-reviewer-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.rev-vgroup-row-reviewer { font-size: 12.5px; font-weight: 600; color: var(--accent-ink); white-space: nowrap; }
.rev-vgroup-row-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.rev-vgroup-row-actions .eq-icon-btn { width: 32px; height: 32px; border-radius: 8px; }
.rev-vgroup-row-actions .eq-icon-btn .material-symbols-rounded { font-size: 16px; }

.rev-approval-chain-row { padding: 8px 0; border-bottom: 1px solid var(--hair); }
.rev-approval-chain-row:last-child { border-bottom: none; }
.rev-approval-chain-subject { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.rev-approval-chain-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rev-approval-chip { gap: 6px; padding: 5px 12px 5px 6px; }
.rev-approval-chip-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; flex-shrink: 0; }
.rev-approval-chip-name { font-size: 12px; font-weight: 600; color: var(--ink); }
.rev-approval-chip-role { font-size: 10.5px; color: var(--muted); }
.rev-approval-arrow { font-size: 16px; color: var(--faint); }

/* Phase 2 (filter-driven "Inkluderade anställda", issue: "the include is
   important", 2026-08-08) — rule builder rows + the read-only result table
   that replaced the old #rev-emp-list checkbox grid. */
.rev-include-rule select, .rev-include-rule input { font-size: 13px; }
.rev-include-stat { color: var(--accent-ink); }
.rev-include-table { width: 100%; border-collapse: collapse; }
.rev-include-table th, .rev-include-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; }
.rev-include-table th { color: var(--muted); font-size: 11px; text-transform: uppercase; white-space: nowrap; }

/* Row spacing/border matches the design reference (Lönerevision.dc.html
   step 5) exactly: each unit is its own bordered, rounded mini-card, not a
   bare flex row — ported 1:1, not just "similar". */
.rev-node-budgets { display: flex; flex-direction: column; gap: 10px; }
.rev-node-budget-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.rev-node-budget-name { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.rev-node-budget-headcount { font-size: 12px; color: var(--muted); white-space: nowrap; }
/* Uses the .value-input-wrapper/.unit-label pattern (settings.html's params
   table) instead of the pill-style .salary-input-wrapper — that pattern gives
   the input a fixed width + a plain-text unit label with its own reserved
   width, so the "SEK" suffix can never be clipped/overlapped by the input's
   value the way it was with a flex:1 input inside a fixed-max-width pill. */
.rev-node-budget-row .value-input-wrapper { min-width: 110px; }
.rev-node-budget-row .value-input-wrapper input { width: 70px; }
/* Step 5 redesign — a small muted reference tag naming the step-1 base %
   each row prefills from (a starting point, not a lock). */
.rev-node-budget-ref {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
/* Step 5 redesign — weighted-average summary line below the node rows,
   tracking how far the current per-row values have drifted from the base %. */
.rev-node-budget-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface2);
  font-size: 12.5px;
  color: var(--muted);
}
.rev-node-budget-summary-value { color: var(--ink); font-variant-numeric: tabular-nums; }

.rev-budget-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 8px; }
.rev-node-summary { background: var(--surface2); border-radius: 10px; padding: 10px 12px; }
.rev-node-summary-head { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.rev-bar { height: 8px; border-radius: 99px; background: var(--hair); overflow: hidden; }
.rev-bar-fill { height: 100%; border-radius: 99px; transition: width .2s; }
.rev-node-remaining { font-size: 11.5px; margin-top: 5px; }

/* APPROVALS sub-flow (Tier-1 mobile redesign, issue #1030): a fluid,
   single-card-per-proposal list of whatever the caller has awaiting THEIR
   approve/override decision — additive alongside .rev-proposal-table
   (untouched). Zero @media: repeat(auto-fit, minmax(...)) naturally
   collapses to one full-width column at a phone width on its own, same
   fluid-grid convention as .rev-budget-summary/.rev-scenario-results above. */
.rev-approval-cards { margin-top: 16px; }
.rev-approval-cards-title { margin-bottom: 10px; }
/* .rev-approval-cards-list's display/grid-template-columns and
   .rev-approval-card-name's overflow-wrap/word-break are set as INLINE
   styles by renderApprovalCards()/renderApprovalCard() in
   revision-workflow.js, not here — mirrors startsida.js's own fluid-grid
   convention (see its .startsida-body-grid) so the jsdom mobile test
   (functions/test/revision-approvals-mobile.test.js) can assert on the real
   rendered style values directly. */
.rev-approval-card { display: flex; flex-direction: column; gap: 10px; }
.rev-approval-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.rev-approval-card-name { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.rev-approval-card-rows { display: flex; flex-direction: column; gap: 6px; }
.rev-approval-card-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.rev-approval-card-row span { color: var(--muted); }
.rev-approval-card-approve-btn { justify-content: center; }

.rev-proposal-table .rev-proposed-input { width: 110px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); font-variant-numeric: tabular-nums; }
.rev-proposal-table .rev-proposed-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rev-proposal-table td { vertical-align: middle; }
.rev-submit-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.eq-chip.rev-status-draft { background: var(--gold-soft); color: var(--gold); }
.eq-chip.rev-status-submitted_to_manager { background: var(--accent-soft); color: var(--accent-ink); }
.eq-chip.rev-status-manager_approved { background: #dbeafe; color: #1e40af; }
.eq-chip.rev-status-final_approved { background: var(--accent-soft); color: var(--accent-ink); }
/* manager_approved intentionally keeps a distinct blue hue from the
   accent/gold/alert status buckets (it sits between two accent-colored
   states in the same workflow and needs to read as visually different from
   both) — the design system has no blue status token, so the light-mode
   value stays a literal hex (already high-contrast, ~8:1) and only the
   dark-mode pairing needs its own override below (the light hex is unreadable
   as-is against the dark surface). */
html[data-theme="dark"] .eq-chip.rev-status-manager_approved { background: #1c2a44; color: #8fb2f5; }
@media (max-width: 768px) { .rev-workflow .eq-table-wrap { overflow-x: auto; } }

/* Lönerevision Arbetsyta — Admin/Chef sub-tab switcher's Admin tab: "Alla
   lönerevisioner" list + drill-in detail header (chef-vy sibling ticket owns
   the Chef tab's own content, a separate container). The list hero card
   reuses this app's own filled-accent-background/white-text convention
   (.eq-btn-primary/.eq-kpi.hl below already use a plain #fff for text on a
   solid accent background rather than a CSS var, since white doesn't need
   to flip per-theme the way a status hex would) instead of a bespoke navy
   hex — --accent2 (the existing "darker/hover" teal token) already flips
   correctly in dark mode, so this card themes for free. */
.rev-admin-hero-card { background: var(--accent2); border: none; color: #fff; }
.rev-admin-hero-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.rev-admin-hero-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.rev-admin-hero-title { font-size: 20px; font-weight: 700; color: #fff; margin-top: 4px; }
.rev-admin-hero-sub { color: rgba(255,255,255,.75); font-size: 13px; margin: 4px 0 0; }
.rev-admin-cycles-table th { color: rgba(255,255,255,.7); }
.rev-admin-cycles-table td, .rev-admin-cycles-table th { border-color: rgba(255,255,255,.15); }
.rev-admin-open-link { background: none; border: none; padding: 0; color: rgba(255,255,255,.9); font-weight: 600; font-size: 13px; cursor: pointer; }
.rev-admin-open-link:hover { color: #fff; text-decoration: underline; }

.rev-admin-detail-status-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.rev-admin-detail-header-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.rev-admin-detail-title { font-size: 18px; font-weight: 700; color: var(--ink); }
.rev-admin-detail-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Lönerevision "Kolumner till chefen" (Fas 2, #1492 — redesigned 2026-08-09
   from a flat, always-expanded chip wall into a compact dropdown-button +
   popover picker, same UX shape as the Anställda page's own Kolumner picker,
   public/js/employee-table-columns.js). The popover shell reuses
   .md-dropdown/.md-dropdown-menu; each checkbox row gets its own class here
   since the Anställda picker's equivalent (.emp-col-option) is only ever
   built with inline styles, not a reusable CSS class. The SELECTED-columns
   summary below the button reuses .eq-chip.ok verbatim — a read-only display
   of the current selection, not a toggle (toggling happens in the popover). */
.rev-manager-col-option { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px; color: var(--ink); border-radius: 8px; }
.rev-manager-col-option:hover { background: var(--surface2); }
/* Locked defaults (Namn/Avdelning/Chef/Grundlön, product ask 2026-08-09) are
   pre-checked + disabled and can't be removed — same greyed-out/locked
   treatment as .role-level-option:has(input:disabled) above. */
.rev-manager-col-option:has(input:disabled) { opacity: 0.6; cursor: not-allowed; }

/* Portfolio dashboard "Per bolag" breakdown (issue #4, mobile UI fixes): the
   comparison table (.pd-table-wrap) is genuinely dense/tabular and can't
   fluidly reflow, same constraint .rev-proposal-table has above — so below a
   phone-ish width it's swapped for the additive card list
   (.pd-card-list, built in public/js/portfolio-dashboard.js's
   renderPerCompanyTableHtml) instead of trying to shrink a table meant for a
   desktop-width comparison view. .pd-card-list's own grid-template-columns
   is set inline (auto-fit/minmax) so it stays fluid without a second query. */
.pd-card-list { display: none; }
@media (max-width: 640px) {
  .pd-table-wrap { display: none; }
  .pd-card-list { display: grid; }
}

/* 360 Feedback cycle status badges (#1004 phase 1: replace ad hoc inline
   background/color overrides on .eq-chip with real variants, same convention
   as .eq-chip.rev-status-* above). "draft" reuses the identical amber pair
   rev-status-draft already established (both are literally "Utkast");
   "nominations"/"published" get their own distinct hues since neither maps
   cleanly onto the shared ok/warn/alert buckets (nominations isn't a warning,
   published isn't the same "done" state active collection's .ok chip means). */
.eq-chip.s360-status-draft { background: var(--gold-soft); color: var(--gold); }
.eq-chip.s360-status-nominations { background: #e0e7ff; color: #3730a3; }
.eq-chip.s360-status-published { background: #ede9fe; color: #6d28d9; }
/* Same rationale as .eq-chip.rev-status-manager_approved above: indigo/purple
   have no design-system status token, so the (already high-contrast)
   light-mode hexes stay as literals and only dark mode gets its own
   readable pairing. */
html[data-theme="dark"] .eq-chip.s360-status-nominations { background: #22254a; color: #adb8f7; }
html[data-theme="dark"] .eq-chip.s360-status-published { background: #2c2150; color: #cdb3f5; }

/* Live budget-adequacy estimate (QW3 #290) under the create-cycle budget
   input, + the what-if scenario preview cards (F3 #290). Scenario cards are
   plain .eq-card in an auto-fill grid; the gap verdict reuses
   .eq-chip.ok/.warn/.alert and the guardrail's redacted state. */
.rev-budget-estimate { margin: 6px 0 0; min-height: 16px; font-variant-numeric: tabular-nums; }
.rev-scenario-inputs { display: flex; flex-wrap: wrap; gap: 8px; }
.rev-scenario-row { display: flex; align-items: center; gap: 6px; }
.rev-scenario-row .rev-scenario-value { width: 110px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); font-variant-numeric: tabular-nums; }
.rev-scenario-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.rev-scenario-card { padding: 14px 16px; }
.rev-scenario-card .eq-card-title { font-size: 14px; margin-bottom: 8px; }
.rev-scenario-metric { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.rev-scenario-metric span { color: var(--muted); }
.rev-scenario-gap { font-size: 10.5px; font-weight: 600; margin-top: 2px; }

/* Pay-equity guardrail (F1 #290): inline before→after gap chips under the
   proposed-salary input. Reuses .eq-chip.ok/.warn/.alert for the verdict. */
.rev-guardrail-slot { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; max-width: 260px; }
.rev-guardrail-chip { font-size: 10.5px; font-weight: 600; white-space: nowrap; }
/* .rev-guardrail-redacted's neutral surface/muted color pairing is defined
   alongside .eq-chip.neutral (#1995's rule, merged in #1997) — see that
   rule's own comment for why. */

/* ==========================================================================
   Print stylesheet (QW2 #198): a print-to-PDF path for the survey results
   dashboard. On print we hide ALL app chrome (nav, top bar, help panel) and the
   report's own interactive controls (filter bar, export buttons, dropdowns), and
   reveal only the results cards + the print-only report header. Uses the
   visibility-based reveal so it works without enumerating every chrome selector.
   ========================================================================== */
@media print {
  /* Hide everything, then reveal only the survey dashboard report subtree. */
  body * { visibility: hidden !important; }
  #surveyDashboardHome, #surveyDashboardHome * { visibility: visible !important; }
  #surveyDashboardHome {
    position: absolute !important; left: 0; top: 0; width: 100% !important;
    margin: 0 !important; padding: 0 !important;
  }
  /* Interactive report controls have no place in a printed report. */
  .sd-filterbar, .sd-export-toolbar, .sd-layout-toggle, .sd-compare-btn,
  .md-dropdown, .sd-focus-action, [data-qa="sdaiinsights"], [data-qa="sdcomments"],
  [data-qa="sdcommentreply"], .sd-thread textarea { display: none !important; }
  /* Show the print-only report header. */
  .sd-print-header { display: block !important; margin-bottom: 12px; }
  /* Cards print flat and shouldn't split across pages. */
  .sd-card { break-inside: avoid; page-break-inside: avoid; box-shadow: none !important; border: 1px solid #ccc !important; }
  .sd-heat-scroll { overflow: visible !important; }

  /* OKR board-ready export (OKR-QW2 #206): reveal only the OKR view's
     container, same visibility-reveal technique as the survey report above. */
  #okr-root, #okr-root * { visibility: visible !important; }
  #okr-root {
    position: absolute !important; left: 0; top: 0; width: 100% !important;
    margin: 0 !important; padding: 0 !important;
  }
  /* Interactive OKR controls have no place in a printed report. */
  #okr-cyclebar, #okr-viewtabs, .okr-export-toolbar, .okr-checkin-btn,
  [data-edit-obj], [data-del-obj], [data-hist-obj] { display: none !important; }
  /* Show the print-only OKR header. */
  .okr-print-header { display: block !important; margin-bottom: 12px; }

  /* EU Pay Transparency Directive report (F3, #261): reveal only #eupt-root,
     same visibility-reveal technique as the reports above. */
  #eupt-root, #eupt-root * { visibility: visible !important; }
  #eupt-root {
    position: absolute !important; left: 0; top: 0; width: 100% !important;
    margin: 0 !important; padding: 0 !important;
  }
  /* Interactive report controls have no place in a printed report. */
  .eupt-export-toolbar { display: none !important; }
  /* Show the print-only report header. */
  .eupt-print-header { display: block !important; margin-bottom: 12px; }

  /* Annual pay-equity snapshot (F1, #261): reveal only #pes-root, same
     visibility-reveal technique as the reports above. */
  #pes-root, #pes-root * { visibility: visible !important; }
  #pes-root {
    position: absolute !important; left: 0; top: 0; width: 100% !important;
    margin: 0 !important; padding: 0 !important;
  }
  /* Interactive controls (generate button, back button, export toolbar, and
     the list view itself) have no place in a printed report — only the
     currently-viewed snapshot's detail content should print. */
  .pes-generate-toolbar, .pes-list-view, .pes-toolbar { display: none !important; }
  .pes-export-toolbar { display: none !important; }
  /* Show the print-only report header. */
  .pes-print-header { display: block !important; margin-bottom: 12px; }

  /* Training compliance export (LD-QW3, #222 PR4): reveal only
     #learning-export-root, same visibility-reveal technique as the reports
     above. */
  #learning-export-root, #learning-export-root * { visibility: visible !important; }
  #learning-export-root {
    position: absolute !important; left: 0; top: 0; width: 100% !important;
    margin: 0 !important; padding: 0 !important; border: none !important;
  }
  /* The CSV/PDF buttons and live-status line have no place in a printed
     report. */
  .learning-export-toolbar, #learning-export-status { display: none !important; }
  /* Show the print-only report header. */
  .learning-export-print-header { display: block !important; margin-bottom: 12px; }
}

/* ==========================================================================
   Anställda (HR-hub) segmented pill bar — rendered by anstallda-tabs.js into
   the persistent #anstallda-hub slot. A light rounded strip of pills; the
   active pill is a raised surface card in the brand green, inactive pills are
   transparent + muted. All colors are design tokens (theme-aware, no hexes).
   ========================================================================== */
.eq-tabbar {
  display: flex;
  gap: 4px;
  padding: 6px;
  margin: 0 var(--pad) 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow-x: auto;            /* horizontal scroll when many categories */
  scrollbar-width: none;
}
.eq-tabbar::-webkit-scrollbar { display: none; }
.eq-tabbar[hidden] { display: none; }

.eq-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 16px;
  min-height: 44px;            /* hit target */
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: 600 14px/1 var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.eq-tab .material-symbols-rounded { font-size: 20px; }
.eq-tab:hover { background: var(--hair); color: var(--ink); }
.eq-tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.eq-tab[aria-selected="true"] .material-symbols-rounded {
  font-variation-settings: 'FILL' 1;   /* filled icon when active, outline when not */
}
.eq-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* #1550 — "Ny cykel" 7-step wizard dot-tracker. Reuses .eq-tabbar/.eq-tab
   verbatim (same tokens/hit-targets as the Arbetsyta 5-step tracker above);
   only the numbered badge inside each tab is new. Future (unreached) steps
   are rendered disabled — not yet clickable, per the issue's "click-to-jump
   only to already-reached steps" requirement. */
.rev-wizard-tab-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
  background: var(--surface2); color: var(--muted);
  font: 700 12px/1 var(--font-mono);
}
.rev-wizard-tab[aria-selected="true"] .rev-wizard-tab-num { background: var(--accent-soft); color: var(--accent-ink); }
.rev-wizard-tab-done .rev-wizard-tab-num { background: var(--accent); color: #fff; }
.rev-wizard-tab-done .rev-wizard-tab-num .material-symbols-rounded { font-size: 14px; }
.rev-wizard-tab:disabled { opacity: .5; cursor: not-allowed; }
.rev-wizard-tab:disabled:hover { background: transparent; color: var(--muted); }
.rev-wizard-step-hidden { display: none !important; }

/* Lönerevision Guide tab (#1493, Fas 1 redesign) — a plain centered page
   instead of an .eq-card embedded above the tab row: no border/background
   of its own, just a readable max-width column. The checklist's own
   rendered items (guided-setup-checklist.js) keep their existing card-like
   styling untouched inside this wrapper. */
.rev-guide-page { max-width: 720px; margin: 0 auto; padding: 8px 0 32px; }

/* Org chart: right-click context menu on a People-arrangement employee card
   (#426, follow-up to #419/#430). The floating menu container itself is
   positioned via inline style (position:fixed + cursor coordinates, computed
   in public/js/org-chart.js) — only the reusable item look/hover lives here. */
.orgchart-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  font: inherit;
  color: var(--ink);
}
.orgchart-ctx-item:hover, .orgchart-ctx-item:focus-visible {
  background: var(--surface2);
  outline: none;
}
.orgchart-ctx-item .material-symbols-rounded { font-size: 18px; color: var(--accent-ink); }

/* #2128 — the compact-view toggle is People-arrangement-only (clustering has
   no meaning for Departments/Teams/Offices); it used to be hidden entirely
   outside People, which one external tester read as "the toggle doesn't
   work" since they never saw it. Now it stays visible always but disables
   itself with a visible explanation (see org-chart-preferences.js's
   updatePreferencesBarVisibility) — this is the visual cue for that. */
#orgchart-compact-wrap label:has(input:disabled) { opacity: .6; cursor: not-allowed; }

/* ==========================================================================
   Org chart: horizontal top-down TREE with connector lines (restyle of the
   old vertically-indented collapsible list — see public/js/org-chart.js's
   module header comment for the full history/rationale). Same underlying
   data/tree (buildOrgTree/buildUnitTree) and same DOM contract the JS/tests
   already rely on (.orgchart-node > .orgchart-row|.orgchart-unit-card +
   .orgchart-children, [data-qa="orgchart-toggle"]) — only the CSS changes.

   Connector lines use the well-known "pure CSS org/family chart" technique:
   each child inside .orgchart-children draws its OWN half-width top border
   (::before = left half, ::after = right half + a center vertical stub),
   and :only-child/:first-child/:last-child trim the segments that would
   otherwise reach past the first/last sibling or a lone child. No SVG/
   canvas/charting library — this codebase hand-rolls its own UI everywhere
   else (no chart lib in functions/package.json, no public/js/vendor), and
   this exact hand-drawn-line approach already has precedent here (the PNG
   card export a few sections up draws directly onto a <canvas> rather than
   pulling in html2canvas). Wide orgs scroll horizontally rather than
   overlapping/breaking (CLAUDE.md's responsive rule: wrap wide content in
   its own overflow-x:auto container). */
.orgchart-tree-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; }
.orgchart-forest { display: inline-flex; gap: 48px; padding: 8px 24px 40px; min-width: 100%; box-sizing: border-box; justify-content: center; }

.orgchart-node { display: flex; flex-direction: column; align-items: center; position: relative; }

/* The shared "box" look for both a People employee card (.orgchart-row) and
   a Departments/Teams/Offices unit card (.orgchart-unit-card) — kept as its
   own class (rather than folding into .orgchart-row) so a unit card is
   never accidentally treated as a clickable employee row by wireEvents'
   `.closest(".orgchart-row")` lookups (see org-chart-context-menu.test.js's
   documented scope: a unit card must never open the People right-click menu
   or the employee-profile navigation). */
.orgchart-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 16px 14px; min-width: 168px; max-width: 208px;
  position: relative; box-sizing: border-box;
}
.orgchart-row-clickable { cursor: pointer; transition: border-color .15s, background .15s; }
.orgchart-row-clickable:hover { border-color: var(--accent); background: var(--accent-soft); }
.orgchart-row-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* #1388 — reporting-line drag-and-drop (mirrors the .dragging/.onb-dragging
   naming convention used by the column-reorder/onboarding drag features). */
.orgchart-row-draggable { cursor: grab; }
.orgchart-row-draggable.orgchart-dragging { opacity: .5; cursor: grabbing; }
.orgchart-row-draggable.orgchart-drop-target { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }

.orgchart-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.orgchart-name { font-weight: 700; font-size: 13px; color: var(--ink); text-align: center; line-height: 1.25; word-break: break-word; }
.orgchart-title { font-size: 11px; text-align: center; line-height: 1.25; }
.orgchart-self-chip { margin-top: 2px; }

/* #427: a placeholder card standing in for a manager the caller can't see
   (their reports ARE visible, rendered as its children — see org-chart-
   renderers.js's placeholderNodeHtml). Dashed border + muted fill visually
   marks it as "structural, not a real person" at a glance, distinct from
   every other card. */
.orgchart-row-placeholder { border-style: dashed; background: var(--surface2); cursor: default; }
.orgchart-avatar-placeholder { background: var(--surface2); color: var(--faint); }
.orgchart-avatar-placeholder .material-symbols-rounded { font-size: 20px; }
.orgchart-unit-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 2px; }

/* Team-size "X/Y" badge (X = direct reports, Y = total org size under this
   manager, transitively) — bottom-right corner, overlapping the card edge.
   Only rendered for a manager (a leaf card never gets one, see
   public/js/org-chart.js's computeOrgSizes/nodeRowHtml). A 2px border in
   --surface gives it a "cutout" ring so it reads as a badge, not a stray
   chip, against the card's own background. */
.orgchart-team-badge {
  position: absolute; right: -8px; bottom: -8px;
  background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  padding: 4px 7px; border-radius: 99px; border: 2px solid var(--surface);
  white-space: nowrap;
}

/* Vertical stem from a card down to its expand/collapse toggle (only present
   when the node has children at all). */
.orgchart-connector { position: relative; width: 100%; height: 20px; display: flex; align-items: center; justify-content: center; }
.orgchart-connector::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-left: 2px solid var(--border); }
.orgchart-toggle {
  position: relative; z-index: 1; width: 20px; height: 20px; padding: 0;
  border-radius: 50%; border: 2px solid var(--border); background: var(--surface);
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.orgchart-toggle:hover, .orgchart-toggle:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.orgchart-toggle .material-symbols-rounded { font-size: 14px; }

.orgchart-children { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; }
.orgchart-children > .orgchart-node { position: relative; padding-top: 20px; margin: 0 14px; }
.orgchart-children > .orgchart-node::before,
.orgchart-children > .orgchart-node::after {
  content: ""; position: absolute; top: 0; width: 50%; height: 20px;
  border-top: 2px solid var(--border);
}
.orgchart-children > .orgchart-node::before { right: 50%; }
.orgchart-children > .orgchart-node::after { right: auto; left: 50%; border-left: 2px solid var(--border); }
.orgchart-children > .orgchart-node:only-child { padding-top: 0; }
.orgchart-children > .orgchart-node:only-child::before,
.orgchart-children > .orgchart-node:only-child::after { display: none; }
.orgchart-children > .orgchart-node:first-child::before { border-top: none; }
.orgchart-children > .orgchart-node:last-child::after { border-top: none; border-left: none; }
.orgchart-children > .orgchart-node:last-child::before { border-right: 2px solid var(--border); }

/* Collapsed state (children hidden via JS: children.style.display = "none")
   simply leaves the connector + toggle visible with nothing below — no
   dangling/broken lines, and the toggle stays the re-expand affordance. No
   dedicated CSS rule needed here — the inline style JS already sets is
   sufficient. */

/* Small dark tooltip that follows the cursor while hovering a person's card
   (role/title) — a plain native `title` attribute is kept too (for
   accessibility/no-JS fallback + the existing "View employee profile" hint),
   but native tooltips are slow to appear and can't be positioned/styled, so
   this custom one is what actually renders on hover, mirroring the
   reference's "small dark tooltip near the cursor" interaction. */
.orgchart-tooltip {
  position: fixed; z-index: 10060; pointer-events: none;
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 8px; max-width: 240px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.orgchart-tooltip[hidden] { display: none; }

/* #428 Slice A — floating cards + compact-view clustering. */
.orgchart-floating-section { margin-bottom: 20px; }
.orgchart-floating-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; text-align: center; margin-bottom: 4px; }
.orgchart-floating-section .orgchart-forest { padding-bottom: 8px; }

/* The "+N more" pill standing in for a manager's clustered-away reports
   (org-chart-preferences.js's compact-view toggle) — styled like a compact
   chip/button rather than a full card, since it isn't a person. */
.orgchart-cluster-pill {
  margin: 8px auto 0; display: block;
  background: var(--surface2); color: var(--accent-ink); border: 1px dashed var(--border);
  font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 99px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.orgchart-cluster-pill:hover, .orgchart-cluster-pill:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; }

@media (max-width: 768px) {
  .orgchart-card { min-width: 140px; max-width: 168px; padding: 10px 12px 12px; }
  .orgchart-avatar { width: 34px; height: 34px; font-size: 12px; }
  .orgchart-forest { gap: 32px; padding: 8px 12px 32px; }
  .orgchart-children > .orgchart-node { margin: 0 8px; }
}

/* Startsida (Home) redesign — the two-column "Att göra" / "Genvägar" grid
   (public/js/startsida.js) is now a FLUID `repeat(auto-fit, minmax(320px,1fr))`
   track set inline (Tier-1 mobile optimization redesign, mirrors
   public/survey.html's zero-@media pattern): it collapses to one column on
   its own, on any viewport too narrow to fit two 320px columns + gap, with
   no breakpoint override needed here at all. This rule intentionally no
   longer exists — kept as a comment so a future reader doesn't wonder where
   the old @media(max-width:768px) block went. */

/* ==========================================================================
   Role editor — fold/unfold chevron for nested permission rows (VP Product,
   live-UI request 2026-07-31: "can we make this on roles and permission so i
   can fold nested and open nested tree for better overview?"). See
   public/js/settings/role-editor.js's toggleButtonHtml/wireRowToggle doc-
   comments for the full mechanism — this is purely the visual half: a small
   round chevron button, same family as the org chart's own
   [data-qa="orgchart-toggle"] above, but CSS-rotated in place (expand_more
   glyph turns -90deg when collapsed) instead of swapping glyphs, since here
   the toggle sits inline in a text row rather than on its own connector stem.
   .role-matrix-row/.role-matrix-row-child/.role-nested-heading are still
   inline-styled directly from role-editor.js (not yet converted to classes
   here) — this block only adds the toggle's own rule, it does not attempt
   that larger conversion. */
.role-row-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; margin: 0; flex-shrink: 0;
  border: none; border-radius: 4px; background: transparent; color: var(--muted);
  cursor: pointer; transition: background-color .15s, color .15s;
}
.role-row-toggle:hover, .role-row-toggle:focus-visible {
  background: var(--hair); color: var(--accent); outline: none;
}
.role-row-toggle-icon {
  font-size: 16px; line-height: 1; display: inline-block;
  transform: rotate(0deg); transition: transform .15s ease;
}
.role-row-toggle-collapsed .role-row-toggle-icon { transform: rotate(-90deg); }

/* ==========================================================================
   Role editor — PURE VISUAL reskin (Phase 1 of a 5-phase plan; VP Product
   design-mock alignment, 2026-08-03). ZERO interaction/behavior change: every
   class below is either a NEW styling hook added purely to move an inline
   style out of public/js/settings/role-editor.js's template strings, or a
   rule keyed off a class that was already there (.role-matrix-row/
   .role-matrix-row-child/.role-access-area-radios/.role-filter-rule etc.).
   No selector here touches display/visibility for anything role-editor.js
   toggles at runtime via el.style.display (the collapse/expand + Access-Area
   scaffolding stays 100% inline-style-driven, exactly as before) — this block
   only ever adds border/radius/spacing/color/typography. Reuses the SAME
   design tokens as the rest of the app shell (teal accent, Hanken Grotesk,
   the existing --surface/--surface2/--accent-ink/--alert-soft custom
   properties) — no new hex literals, no new custom properties. */

/* Card shell + vertical rhythm: gap-based spacing between sections instead of
   per-element margin-bottom (this codebase's documented convention — see
   .main-content-area above). */
.role-editor-page .eq-card.role-editor-card { max-width: 720px; }
.role-editor-body { display: flex; flex-direction: column; gap: 16px; }
.role-editor-title { margin: 0; }
.role-editor-back-btn { align-self: flex-start; }
.role-field-group { display: flex; flex-direction: column; gap: 4px; }
.role-editor-label {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--muted); letter-spacing: 0.02em;
}
.role-required-mark { color: var(--alert); }
.role-name-input { width: 100%; box-sizing: border-box; }
.role-err-msg { color: var(--alert); font-size: 0.85rem; }
.role-editor-footer { display: flex; justify-content: flex-end; gap: 8px; }

/* Employee system-role warning/tip banners — same rounded-card language as
   the rest of the reskinned app shell, reusing --alert-soft/--surface2
   (existing tokens) instead of the previous undefined --alert-bg/
   --md-surface-variant custom properties (which only ever resolved via their
   literal hex fallback, never a real token). */
.role-warning-banner {
  padding: 12px 14px; border-radius: 12px;
  background: var(--alert-soft); border: 1px solid var(--alert);
  color: var(--ink); font-size: 13px; line-height: 1.5;
}
.role-tip-banner {
  padding: 10px 14px; border-radius: 12px;
  background: var(--surface2); font-size: 13px; line-height: 1.5; color: var(--muted);
}

/* Permission matrix rows — rounded, gap-based row chrome (replaces the old
   inline padding/border-bottom string built in renderMatrix()). Indentation/
   left-accent for a PARENT_CHILD_GROUPS child row now lives here too, keyed
   off the SAME .role-matrix-row-child class the collapsible-nesting/parent-
   child tests already assert on — nothing about that class name or its
   presence/absence changes, only what it looks like. */
.role-matrix { display: flex; flex-direction: column; }
.role-matrix-row { padding: 10px 6px; border-bottom: 1px solid var(--hair); border-radius: 8px; }
.role-matrix-row:hover { background: var(--surface2); }
.role-matrix-row-child {
  padding: 8px 6px 8px 20px; margin-left: 10px;
  border-left: 2px solid var(--border); border-bottom: 1px solid var(--hair);
}
.role-matrix-row-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.role-matrix-row-head-left { display: flex; align-items: center; gap: 4px; }
.role-row-label { font-size: 12px; color: var(--ink); }
.role-row-note { margin: 2px 0 0; font-size: 11px; color: var(--muted); }
.role-nested-container { padding-top: 2px; }
.role-nested-heading {
  margin: 10px 0 4px 20px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; color: var(--muted);
}
.role-nested-row { padding: 6px 6px 6px 20px; border-bottom: 1px solid var(--hair); border-radius: 8px; }
.role-nested-row-head { display: flex; justify-content: space-between; align-items: center; }
.role-nested-row-label { font-size: 12px; color: var(--ink); }

/* Level (None/Read/Write) + Access Area (Own/Reporting Line/Custom Filter/
   All) pickers — the SAME "segmented toggle" recipe as .eq-segmented above:
   a --surface2 track, each option a rounded pill, the active pill lifted onto
   --surface with --accent-ink text + a subtle shadow. The native <input
   type="radio"> stays in the DOM (still what onSave()/every test reads/
   drives — name/value/checked are untouched), just visually clipped off­
   screen with the app's existing .eq-file-input-hidden technique so the
   label pill itself carries the checked styling via :has(). */
.role-level-group, .role-access-area-radios, .role-filter-toggle {
  display: inline-flex; flex-wrap: wrap; gap: 3px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 3px;
}
.role-access-area-radios { display: flex; }
.role-level-option, .role-access-area-option, .role-filter-toggle-option {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 5px 10px; border-radius: 8px; cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.role-access-area-option { font-size: 11.5px; font-weight: 500; }
.role-level-option:has(input:checked), .role-access-area-option:has(input:checked), .role-filter-toggle-option:has(input:checked) {
  background: var(--surface); color: var(--accent-ink); font-weight: 700;
  box-shadow: 0 1px 2px rgba(19, 36, 32, 0.1);
}
.role-level-option:focus-within, .role-access-area-option:focus-within, .role-filter-toggle-option:focus-within {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
/* #985: a row whose valid Level/Access-Area range is narrower than the
   generic matrix (see role-editor.js's FEATURE_OPTION_RESTRICTIONS) disables
   the invalid radio inputs — grey out + block the pointer on their label so
   it reads as locked, not just an unselected option. */
.role-level-option:has(input:disabled), .role-access-area-option:has(input:disabled) {
  opacity: 0.5; cursor: not-allowed;
}
.role-access-area-label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--muted); margin: 8px 0 2px; }
.role-all-legacy-note { margin: 6px 0 0; font-size: 11px; color: var(--muted); }

/* Cycling "Omfattning" (scope) pill — Phase 4 of the role-editor reskin
   (mock: Roller och Behorigheter.dc.html). REPLACES the visible
   .role-access-area-radios segmented control above as the per-row entry
   point: a single <button> showing the CURRENT Access Area, click (or
   native Enter/Space activation) cycles to the next one. Same design-token
   discipline as the rest of this reskin — no new hex literals, reuses
   --surface/--surface2/--border/--muted/--ink/--accent. The legacy radio
   group stays in the DOM (see role-editor.js's renderRowAccessArea) with
   the native `hidden` attribute; `.role-access-area-radios` above already
   sets `display: flex` at the same specificity as the UA `[hidden]` default,
   so it must be overridden explicitly here or the hidden group would still
   render visibly beneath the pill. */
.role-access-area-radios[hidden] { display: none; }
/* .role-access-area-pill also carries .md-dropdown-toggle (see
   role-editor.js's renderRowAccessArea) so it opens a real dropdown menu
   instead of cycling on click — these overrides neutralize the generic
   .md-dropdown-toggle sizing (min-width: 220px, box-shadow) that would
   otherwise fight this compact pill's own dimensions below. */
.role-access-area-pill {
  display: inline-flex; align-items: center; gap: 5px;
  min-width: 0; box-shadow: none;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 20px; padding: 4px 10px 4px 11px; margin-top: 4px;
  font-size: 11.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; font-family: inherit;
}
.role-access-area-pill:hover { background: var(--surface2); border-color: var(--border); }
.role-access-area-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.role-access-area-pill-icon, .role-access-area-pill-chevron { font-size: 14px; color: var(--muted); }
/* .role-access-area-menu also carries .md-dropdown-menu for the open/close
   mechanics + positioning; this narrows it to the pill's own compact width
   rather than the default picker's 220px min-width. */
.role-access-area-menu { min-width: 180px; font-size: 12.5px; }

/* Search/filter/changed-counter toolbar (Phase 2 of the role-editor reskin —
   search box, All/Granted/Changed segmented toggle reusing the SAME pill
   pattern as .role-level-group above, and a live changed-count badge). The
   native <input type="radio"> for the filter toggle stays in the DOM — same
   ":has(input:checked)" recipe as the level/access-area pickers, nothing
   new invented. Rows hidden by search/filter use .role-row-filtered-out
   (see public/js/settings/role-editor.js's applyRowFilter) — a pure display
   concern, never touches rowState. */
.role-matrix-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.role-search-wrap {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 10px; padding: 6px 10px; flex: 1; min-width: 200px;
}
.role-search-icon { font-size: 17px; color: var(--muted); flex-shrink: 0; }
.role-search-input.md-input {
  flex: 1; min-width: 0; border: none; background: transparent;
  padding: 0; box-shadow: none;
}
.role-search-input.md-input:focus { outline: none; box-shadow: none; }
.role-changed-counter {
  font-size: 11.5px; font-weight: 700; color: var(--accent-ink);
  background: var(--accent-soft); border-radius: 20px; padding: 3px 10px;
  white-space: nowrap;
}
.role-row-filtered-out { display: none !important; }

/* Custom Filter rule builder */
.role-filter-rule { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.role-filter-value { min-width: 110px; }
.role-filter-range-sep { font-size: 12px; color: var(--muted); }
.role-filter-desc { margin: 0 0 8px; font-size: 11.5px; color: var(--muted); }
.role-filter-none { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.role-filter-add { margin-top: 6px; }

/* Lönerevision Arbetsyta — Chef tab (chef-vy ticket): the recursive
   approval tree + Admin/SuperAdmin "Visa som" picker, inside
   #rev-arbetsyta-chef-view (see revision-arbetsyta-admin.js's own CSS block
   above for the sibling Admin tab's styling — this block is this ticket's
   equivalent, kept separate since the two tabs' content is unrelated). */
.rev-chef-view-as-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rev-chef-view-as-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.rev-chef-view-as-dropdown { min-width: 260px; }
.rev-chef-view-as-option-meta { color: var(--muted); font-size: 12px; }

.rev-chef-tree-header { margin-bottom: 12px; }
.rev-chef-tree-header-title { font-size: 18px; font-weight: 700; color: var(--ink); }
.rev-chef-tree-header-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

.rev-chef-node { border-top: 1px solid var(--border); }
.rev-chef-node[data-depth="1"] { border-top: none; }
.rev-chef-node-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; flex-wrap: wrap; }
.rev-chef-node[data-depth] .rev-chef-children .rev-chef-node-row { padding-left: 16px; }
.rev-chef-chevron { background: none; border: none; padding: 4px; cursor: pointer; color: var(--muted); display: flex; border-radius: 6px; transition: transform .15s ease; }
.rev-chef-chevron:hover { background: var(--surface2); color: var(--ink); }
.rev-chef-chevron.open .material-symbols-rounded { transform: rotate(90deg); display: inline-block; }
.rev-chef-chevron-spacer { display: inline-block; width: 28px; flex-shrink: 0; }
.rev-chef-info-toggle { background: none; border: none; padding: 4px; cursor: pointer; color: var(--muted); display: flex; border-radius: 6px; }
.rev-chef-info-toggle:hover { background: var(--surface2); color: var(--accent-ink); }
.rev-chef-node-identity { flex: 1; min-width: 160px; }
.rev-chef-node-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.rev-chef-node-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.rev-chef-node-salary { font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rev-chef-node-decision { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.rev-chef-propose-row { display: flex; align-items: center; gap: 8px; }
.rev-chef-propose-input { width: 130px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); font-variant-numeric: tabular-nums; }
.rev-chef-propose-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.rev-chef-action-triplet { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; position: relative; }
.rev-chef-modify-input { width: 130px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); font-variant-numeric: tabular-nums; }
.rev-chef-modify-input:focus, .rev-chef-comment-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rev-chef-comment-input { width: 220px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 13px; }
.rev-chef-comment-error { margin: 0; font-size: 11.5px; color: var(--alert); flex-basis: 100%; text-align: right; }
.rev-chef-action-deny { color: var(--alert); }

.rev-chef-info-band { margin: 0 0 10px 38px; padding: 10px 14px; background: var(--surface2); border-radius: 10px; }
.rev-chef-info-band-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rev-chef-info-band-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rev-chef-info-band-value { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 2px; }

.rev-chef-children { margin-left: 18px; border-left: 1px dashed var(--border); padding-left: 10px; }

@media (max-width: 768px) {
  .rev-chef-node-row { flex-wrap: wrap; }
  .rev-chef-node-decision { justify-content: flex-start; width: 100%; }
  .rev-chef-action-triplet { justify-content: flex-start; }
  .rev-chef-comment-input { width: 100%; }
}