/* ==========================================================================
   Assetrail design system v2
   Dark-first control-room aesthetic with a light counterpart.
   The accent is driven by --brand, which JS sets from the active company, so
   every workspace looks visibly different while sharing one layout.
   No frameworks, no CDNs, no web fonts - everything ships with the app.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  color-scheme: dark;

  /* Set per company by JS; this is the fallback. */
  --brand: #7c5cff;
  --brand-2: #22d3ee;

  --bg: #070912;
  --bg-2: #0b0f1c;
  --surface: rgba(20, 25, 40, 0.72);
  --surface-solid: #141928;
  --surface-2: rgba(27, 33, 51, 0.66);
  --surface-3: rgba(35, 43, 66, 0.7);
  --surface-hover: rgba(41, 50, 76, 0.6);
  --panel: rgba(12, 16, 28, 0.78);

  --border: rgba(150, 165, 205, 0.13);
  --border-strong: rgba(150, 165, 205, 0.26);
  --hairline: rgba(255, 255, 255, 0.06);

  --text: #eaeefa;
  --text-dim: #a7b2cd;
  --text-mute: #6d7995;

  --accent: var(--brand);
  --accent-2: var(--brand-2);

  --accent-soft: rgba(124, 92, 255, 0.16);
  --accent-soft: color-mix(in srgb, var(--brand) 18%, transparent);
  --accent-glow: rgba(124, 92, 255, 0.4);
  --accent-glow: color-mix(in srgb, var(--brand) 42%, transparent);
  --accent-ring: rgba(124, 92, 255, 0.3);
  --accent-ring: color-mix(in srgb, var(--brand) 32%, transparent);
  --accent-deep: #5b46e0;
  --accent-deep: color-mix(in srgb, var(--brand) 76%, #05060c);
  --accent-lift: #9c86ff;
  --accent-lift: color-mix(in srgb, var(--brand) 78%, #ffffff);

  --ok: #34d399;
  --ok-soft: rgba(52, 211, 153, 0.14);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.14);
  --danger: #fb7185;
  --danger-soft: rgba(251, 113, 133, 0.15);
  --info: #60a5fa;
  --info-soft: rgba(96, 165, 250, 0.14);
  --neutral-soft: rgba(150, 165, 205, 0.1);

  --radius-xs: 7px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(2, 4, 10, 0.35), 0 1px 2px rgba(2, 4, 10, 0.4);
  --shadow: 0 4px 12px rgba(2, 4, 10, 0.3), 0 18px 44px rgba(2, 4, 10, 0.42);
  --shadow-lg: 0 8px 24px rgba(2, 4, 10, 0.4), 0 36px 90px rgba(1, 2, 8, 0.62);
  --shadow-brand: 0 8px 26px rgba(124, 92, 255, 0.34);
  --shadow-brand: 0 8px 26px color-mix(in srgb, var(--brand) 38%, transparent);
  --inner-top: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  /* Backing plate behind the logo artwork. Match this to your logo's own
     background so its edges disappear; set it to `transparent` if the artwork
     has a transparent background and you want the surrounding surface to show
     through. Shared by both themes on purpose.

     TRANSPARENT, because the surfaces below now match the artwork's own shape
     rather than forcing it into a square. There is no leftover space for a plate
     to fill, so a plate colour could only ever show as a box around the logo —
     which is exactly what it was doing. */
  --logo-plate: transparent;
  /* Single place to point every logo surface at a different file. */
  --logo-art: url("/icons/assettrail-logo.png");

  /* The artwork's own width-to-height ratio.
     MEASURE THIS FROM YOUR FILE and put it here. The current logo is 473x100.

     This exists because every logo surface used to be square, and a wordmark is
     not. A 4.73:1 image inside a square box with `contain` shrinks until it fits
     the width, leaving tall empty bands above and below it — which the plate
     colour then filled with a dark rectangle. Sizing the box to the artwork
     removes the leftover space instead of colouring it in.

     Square logo? Set this to `1` and the surfaces go back to being square. */
  --logo-aspect: 473 / 100;

  /* The SQUARE mark, for slots that are square and cannot be anything else — the
     company avatar chip is 33x33 and sits in a row of same-sized chips.
     A 4.73:1 wordmark has no good answer there: `contain` gives a 33x7 sliver and
     `cover` crops away all but the middle few letters. So those slots get the app
     icon, which is square already, rather than being made to host artwork that was
     never the right shape for them. */
  --logo-mark: url("/icons/icon-192.png");

  /* How the artwork sits in its box. The brand surfaces now match the artwork's
     own ratio, so this mostly matters for anything still square.

       contain  whole logo visible, plate colour fills the leftover space.
                The safe default, and the right answer for a wordmark.
       cover    fills the box and CROPS the overflow. Only correct when the
                artwork is already square, otherwise the ends are cut off.
       82%      contain, with breathing room. Any percentage works.

     Kept as a variable rather than repeated at the three call sites below,
     because a logo that fits the login page and is cropped in the sidebar is
     the failure this is here to prevent. */
  --logo-fit: contain;

  --sidebar-w: 262px;
  --topbar-h: 66px;

  --font: "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, -apple-system,
          "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", "Roboto Mono", monospace;

  --ease: cubic-bezier(0.22, 0.68, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --glass-blur: 18px;
}

[data-theme="light"] {
  color-scheme: light;

  --bg: #eef1f8;
  --bg-2: #f7f9fd;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-solid: #ffffff;
  --surface-2: rgba(246, 248, 253, 0.86);
  --surface-3: rgba(236, 240, 249, 0.9);
  --surface-hover: rgba(228, 234, 247, 0.9);
  --panel: rgba(255, 255, 255, 0.8);

  --border: rgba(20, 30, 60, 0.1);
  --border-strong: rgba(20, 30, 60, 0.19);
  --hairline: rgba(255, 255, 255, 0.8);

  --text: #101728;
  --text-dim: #4a5570;
  --text-mute: #78849f;

  --accent-soft: rgba(124, 92, 255, 0.11);
  --accent-soft: color-mix(in srgb, var(--brand) 13%, transparent);
  --accent-glow: color-mix(in srgb, var(--brand) 30%, transparent);
  --accent-ring: color-mix(in srgb, var(--brand) 26%, transparent);
  --accent-deep: color-mix(in srgb, var(--brand) 86%, #2a1a6b);
  --accent-lift: color-mix(in srgb, var(--brand) 84%, #ffffff);

  --ok: #06976a;
  --ok-soft: rgba(6, 151, 106, 0.12);
  --warn: #b45309;
  --warn-soft: rgba(180, 83, 9, 0.12);
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.1);
  --info: #2563eb;
  --info-soft: rgba(37, 99, 235, 0.1);
  --neutral-soft: rgba(20, 30, 60, 0.06);

  --shadow-xs: 0 1px 2px rgba(20, 30, 60, 0.07);
  --shadow-sm: 0 1px 3px rgba(20, 30, 60, 0.07), 0 4px 12px rgba(20, 30, 60, 0.05);
  --shadow: 0 2px 6px rgba(20, 30, 60, 0.07), 0 14px 34px rgba(20, 30, 60, 0.09);
  --shadow-lg: 0 6px 18px rgba(20, 30, 60, 0.1), 0 30px 70px rgba(20, 30, 60, 0.14);
  --inner-top: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ----------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Slow-drifting aurora mesh. Purely decorative, sits behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: -20vh -20vw;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46vw 42vh at 12% 4%, var(--accent-glow), transparent 62%),
    radial-gradient(40vw 38vh at 88% 8%, color-mix(in srgb, var(--brand-2) 30%, transparent), transparent 60%),
    radial-gradient(50vw 40vh at 70% 92%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 64%),
    radial-gradient(38vw 34vh at 22% 88%, rgba(34, 211, 238, 0.14), transparent 60%);
  filter: blur(10px) saturate(115%);
  animation: aurora 34s ease-in-out infinite alternate;
}

@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2.5%, 2%, 0) scale(1.07); }
  100% { transform: translate3d(2%, -2.5%, 0) scale(1.04); }
}

/* Fine grain so the large gradients never look like flat banding. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-theme="light"] body::after { opacity: 0.05; mix-blend-mode: multiply; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 660;
  letter-spacing: -0.021em;
  line-height: 1.22;
}
h1 { font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.72rem); }
h2 { font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.2rem); }
h3 { font-size: 1rem; }
p { margin: 0 0 0.6em; }

a { color: var(--accent-2); text-decoration: none; transition: color 0.14s; }
a:hover { color: var(--accent-lift); text-decoration: underline; text-underline-offset: 2px; }

code, kbd, .mono { font-family: var(--mono); font-size: 0.9em; }

::selection { background: var(--accent-ring); color: var(--text); }

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

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 99px;
  border: 3.5px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-mute); background-clip: content-box; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 14px; top: -60px; z-index: 200;
  background: var(--accent); color: #fff; padding: 10px 18px;
  border-radius: var(--radius-sm); font-weight: 620;
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: 14px; text-decoration: none; }

/* ------------------------------------------------------- entrance motion */
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop {
  0%   { opacity: 0; transform: scale(0.94); }
  100% { opacity: 1; transform: none; }
}

/* Staggered reveal for the cards inside a freshly rendered view. */
.view-enter > * { animation: rise 0.44s var(--ease-out) both; }
.view-enter > *:nth-child(1) { animation-delay: 0.01s; }
.view-enter > *:nth-child(2) { animation-delay: 0.05s; }
.view-enter > *:nth-child(3) { animation-delay: 0.09s; }
.view-enter > *:nth-child(4) { animation-delay: 0.13s; }
.view-enter > *:nth-child(5) { animation-delay: 0.17s; }
.view-enter > *:nth-child(n+6) { animation-delay: 0.2s; }

.grid--kpi > * { animation: rise 0.5s var(--ease-out) both; }
.grid--kpi > *:nth-child(1) { animation-delay: 0.02s; }
.grid--kpi > *:nth-child(2) { animation-delay: 0.06s; }
.grid--kpi > *:nth-child(3) { animation-delay: 0.1s; }
.grid--kpi > *:nth-child(4) { animation-delay: 0.14s; }
.grid--kpi > *:nth-child(5) { animation-delay: 0.18s; }
.grid--kpi > *:nth-child(6) { animation-delay: 0.22s; }
.grid--kpi > *:nth-child(7) { animation-delay: 0.26s; }
.grid--kpi > *:nth-child(8) { animation-delay: 0.3s; }
.grid--kpi > *:nth-child(9) { animation-delay: 0.34s; }
.grid--kpi > *:nth-child(n+10) { animation-delay: 0.38s; }

/* --------------------------------------------------------------- layout */
.app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* ------- sidebar ------- */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 14px 14px;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--brand) 9%, var(--bg-2)) 0%,
      var(--bg) 46%,
      var(--bg) 100%);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 30;
}
.sidebar::-webkit-scrollbar { width: 8px; }

.brand {
  display: flex; align-items: center; gap: 11px;
  padding: 6px 8px 14px;
  text-decoration: none; color: inherit;
}
.brand:hover { text-decoration: none; }
.brand__mark {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--accent-lift), var(--brand) 45%, var(--accent-deep));
  display: grid; place-items: center;
  box-shadow: var(--shadow-brand), var(--inner-top);
  position: relative;
  overflow: hidden;
}
.brand__mark::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.34), transparent 55%);
}
.brand__mark svg { width: 22px; height: 22px; position: relative; }
/* Logo artwork replaces the gradient plate entirely, so drop the gradient, the
   gloss, the rounded corners and the brand shadow — all of those framed a square
   tile, and the artwork is its own frame.
   Drawn as a background rather than an <img> so a missing file degrades to empty
   space rather than a broken-image glyph.

   Sized from the artwork's ratio instead of the 40x40 square .brand__mark sets,
   because forcing a wordmark into a square was what produced the dark box. The
   height is what to adjust; the width follows from it. max-width keeps a very wide
   logo from pushing the name out of a narrow sidebar. */
.brand__mark--logo {
  width: auto;
  height: 34px;
  aspect-ratio: var(--logo-aspect);
  max-width: 100%;
  border-radius: 0;
  box-shadow: none;
  background: var(--logo-plate) var(--logo-art) center / var(--logo-fit) no-repeat;
}
.brand__mark--logo::after { content: none; }
.brand__name {
  display: block;
  font-weight: 700; font-size: 1.03rem; letter-spacing: -0.024em;
}
.brand__org {
  display: block;
  font-size: 0.7rem; color: var(--text-mute); letter-spacing: 0.05em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 155px;
}

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__label {
  font-size: 0.64rem; font-weight: 720; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--text-mute);
  padding: 15px 11px 5px;
}
.nav__item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px;
  border-radius: 11px;
  color: var(--text-dim);
  font-weight: 560;
  text-decoration: none;
  transition: background 0.16s, color 0.16s, transform 0.16s var(--ease);
}
.nav__item:hover {
  background: var(--neutral-soft); color: var(--text);
  text-decoration: none; transform: translateX(2px);
}
.nav__item.is-active {
  background: linear-gradient(95deg, var(--accent-soft), transparent 88%);
  color: var(--text);
}
.nav__item.is-active::before {
  content: ""; position: absolute; left: -14px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--accent-lift), var(--brand-2));
  box-shadow: 0 0 12px var(--accent-glow);
}
.nav__item svg { width: 17px; height: 17px; flex: none; opacity: 0.82; }
.nav__item.is-active svg { opacity: 1; color: var(--accent-2); }
.nav__item span:first-of-type { flex: 1; min-width: 0; }
.nav__count {
  font-size: 0.69rem; font-weight: 720;
  padding: 1px 7px; border-radius: 99px;
  background: var(--neutral-soft); color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.nav__count.is-alert {
  background: var(--danger-soft); color: var(--danger);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 26%, transparent);
}

.sidebar__foot {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 9px;
  padding-top: 14px;
}
.userbox {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  backdrop-filter: blur(var(--glass-blur));
}
.userbox__meta { min-width: 0; }
.userbox__name {
  display: block;
  font-weight: 620; font-size: 0.85rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.userbox__role {
  display: block;
  font-size: 0.69rem; color: var(--text-mute); text-transform: capitalize;
}
.avatar {
  width: 33px; height: 33px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 0.78rem; color: #fff;
  background: linear-gradient(140deg, var(--accent-lift), var(--accent-deep));
  box-shadow: var(--inner-top);
  letter-spacing: 0.02em;
}
/* Brand logo used in place of initials. Only opt-in call sites get this, so
   employee and asset chips keep their initials treatment.
   Uses the SQUARE mark rather than the wordmark — see --logo-mark. `cover` is safe
   here precisely because that file is already square, so nothing is cropped. */
.avatar--logo {
  background: var(--surface-3) var(--logo-mark) center / cover no-repeat;
  overflow: hidden;
}

/* ------- company switcher ------- */
.company-switch {
  position: relative;
  margin: 0 0 4px;
}
.company-switch__btn {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
  backdrop-filter: blur(var(--glass-blur));
  transition: border-color 0.16s, background 0.16s, transform 0.16s var(--ease);
}
.company-switch__btn:hover {
  border-color: var(--accent-ring);
  background: var(--surface-3);
}
.company-switch__btn[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.company-switch__body { flex: 1; min-width: 0; }
.company-switch__label {
  display: block;
  font-size: 0.62rem; font-weight: 720; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--text-mute);
}
.company-switch__name {
  display: block;
  font-weight: 640; font-size: 0.9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.company-switch__btn svg:last-child { flex: none; color: var(--text-mute); }

.company-logo {
  width: 34px; height: 34px; flex: none;
  border-radius: 10px;
  display: grid; place-items: center;
  font-weight: 760; font-size: 0.8rem; letter-spacing: 0.01em;
  color: #fff;
  background: linear-gradient(140deg,
      color-mix(in srgb, var(--logo, var(--brand)) 82%, #ffffff),
      var(--logo, var(--brand)));
  box-shadow: var(--inner-top), 0 3px 10px color-mix(in srgb, var(--logo, var(--brand)) 40%, transparent);
}
.company-logo--lg { width: 52px; height: 52px; border-radius: 15px; font-size: 1.15rem; }
.company-logo--sm { width: 26px; height: 26px; border-radius: 8px; font-size: 0.66rem; }

.company-menu {
  position: absolute;
  top: calc(100% + 7px); left: 0; right: 0;
  z-index: 45;
  max-height: min(66vh, 480px);
  overflow-y: auto;
  padding: 7px;
  border-radius: var(--radius);
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  animation: pop 0.16s var(--ease-out) both;
}
.company-menu__head {
  font-size: 0.63rem; font-weight: 720; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--text-mute);
  padding: 8px 10px 6px;
}
.company-menu__item {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 11px;
  border: 0; background: transparent; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
  transition: background 0.13s;
}
.company-menu__item:hover { background: var(--surface-3); }
.company-menu__item.is-active { background: var(--accent-soft); }
.company-menu__body { flex: 1; min-width: 0; }
.company-menu__name {
  display: block; font-weight: 620; font-size: 0.87rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.company-menu__meta {
  display: block; font-size: 0.73rem; color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.company-menu__check { flex: none; color: var(--accent-2); }
.company-menu__foot {
  margin-top: 5px; padding-top: 7px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 3px;
}

/* ------- topbar ------- */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky; top: 0; z-index: 25;
  min-height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 26px;
  background: var(--panel);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-bottom: 1px solid var(--border);
}

.topbar__search {
  flex: 1; max-width: 480px;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 13px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-mute);
  cursor: pointer;
  font: inherit; text-align: left;
  transition: border-color 0.16s, background 0.16s, box-shadow 0.16s;
}
.topbar__search:hover {
  border-color: var(--accent-ring);
  background: var(--surface-3);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.topbar__search svg { width: 16px; height: 16px; flex: none; }
.topbar__search span { flex: 1; font-size: 0.86rem; }

kbd {
  font-family: var(--mono); font-size: 0.67rem; font-weight: 620;
  padding: 2px 6px; border-radius: 6px;
  background: var(--surface-3); border: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border-strong);
  color: var(--text-dim); white-space: nowrap;
}

.topbar__spacer { flex: 1; }
.topbar__actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 37px; height: 37px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s var(--ease);
}
.icon-btn:hover {
  color: var(--text); border-color: var(--border-strong);
  background: var(--surface-3); transform: translateY(-1px);
}
.icon-btn:active { transform: translateY(0); }
.icon-btn svg { width: 17px; height: 17px; }

/* Destructive row action: quiet until you reach for it. */
.icon-btn--danger:hover {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background: var(--danger-soft);
}
.icon-btn--danger:focus-visible {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}

.menu-toggle { display: none; }

/* ------- content ------- */
.content { padding: 26px; max-width: 1620px; width: 100%; }

.page-head {
  display: flex; align-items: flex-end; gap: 18px;
  flex-wrap: wrap; margin-bottom: 22px;
}
.page-head__text { min-width: 0; flex: 1; }
.page-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-head__sub { color: var(--text-dim); font-size: 0.89rem; margin-top: 4px; }
.page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.breadcrumb {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.78rem; color: var(--text-mute); margin-bottom: 9px;
}
.breadcrumb a { color: var(--text-mute); }
.breadcrumb a:hover { color: var(--accent-2); }

/* --------------------------------------------------------------- buttons */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px;
  font: inherit; font-weight: 620; font-size: 0.86rem;
  border-radius: 11px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.12s var(--ease), background 0.16s, border-color 0.16s,
              box-shadow 0.16s, opacity 0.16s;
}
.btn:hover {
  background: var(--surface-hover);
  border-color: var(--text-mute);
  text-decoration: none;
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0) scale(0.985); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn svg { width: 16px; height: 16px; flex: none; }

/* Light sweep on hover, the detail that makes buttons feel physical. */
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%,
      rgba(255, 255, 255, 0.16) 46%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0.55s var(--ease-out);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(120%); }

.btn--primary {
  background: linear-gradient(140deg, var(--accent-lift), var(--brand) 42%, var(--accent-deep));
  border-color: transparent; color: #fff;
  box-shadow: var(--shadow-brand), var(--inner-top);
}
.btn--primary:hover {
  filter: brightness(1.07) saturate(108%);
  border-color: transparent;
  box-shadow: 0 10px 32px var(--accent-glow), var(--inner-top);
}

.btn--ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn--ghost:hover { background: var(--neutral-soft); color: var(--text); border-color: transparent; }

.btn--danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.btn--danger:hover { background: var(--danger); color: #fff; border-color: transparent; }

.btn--ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.btn--ok:hover { background: var(--ok); color: #05221a; border-color: transparent; }

.btn--sm { padding: 6px 11px; font-size: 0.79rem; border-radius: 9px; }
.btn--sm svg { width: 14px; height: 14px; }
.btn--lg { padding: 12px 22px; font-size: 0.94rem; border-radius: 13px; }
.btn--lg svg { width: 18px; height: 18px; }
.btn--block { width: 100%; }

.btn-group { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ----------------------------------------------------------------- cards */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(var(--glass-blur)) saturate(130%);
  overflow: hidden;
}
/* Gradient hairline along the top edge of every glass panel. */
.card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent,
      color-mix(in srgb, var(--brand) 45%, transparent) 22%,
      var(--hairline) 55%, transparent);
  pointer-events: none;
}
.card__head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 15px 19px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), transparent);
}
.card__title {
  font-size: 0.95rem; font-weight: 660;
  display: flex; align-items: center; gap: 8px;
  letter-spacing: -0.012em;
}
.card__title svg { width: 16px; height: 16px; color: var(--accent-2); flex: none; }
.card__sub { font-size: 0.78rem; color: var(--text-mute); margin-top: 2px; }
.card__actions { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.card__body { padding: 19px; }
.card__body--flush { padding: 0; }
.card__foot {
  padding: 13px 19px; border-top: 1px solid var(--border);
  background: var(--surface-2); font-size: 0.8rem; color: var(--text-mute);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.card--lift { transition: transform 0.2s var(--ease), box-shadow 0.2s, border-color 0.2s; }
.card--lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--border-strong);
}

/* grids */
.grid { display: grid; gap: 17px; }
.grid--kpi { grid-template-columns: repeat(auto-fit, minmax(218px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid--wide { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.grid--detail { grid-template-columns: minmax(0, 348px) minmax(0, 1fr); align-items: start; }
.stack { display: flex; flex-direction: column; gap: 17px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row--tight { gap: 6px; }
.row--between { justify-content: space-between; }
.push { margin-left: auto; }

@media (max-width: 1180px) {
  .grid--wide, .grid--detail { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ KPI */
.kpi {
  position: relative;
  padding: 17px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(var(--glass-blur)) saturate(130%);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s;
}
.kpi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
/* Soft brand bloom in the corner. */
.kpi::after {
  content: ""; position: absolute; top: -46px; right: -46px;
  width: 128px; height: 128px; border-radius: 50%;
  background: var(--accent-glow);
  filter: blur(34px);
  opacity: 0.5;
  transition: opacity 0.25s, transform 0.35s var(--ease);
  pointer-events: none;
}
.kpi:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}
.kpi:hover::after { opacity: 0.8; transform: scale(1.15); }

.kpi--ok::before { background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 55%, var(--brand-2))); }
.kpi--ok::after { background: var(--ok); opacity: 0.16; }
.kpi--warn::before { background: linear-gradient(90deg, var(--warn), #fb923c); }
.kpi--warn::after { background: var(--warn); opacity: 0.16; }
.kpi--danger::before { background: linear-gradient(90deg, var(--danger), #f43f5e); }
.kpi--danger::after { background: var(--danger); opacity: 0.18; }
.kpi--info::before { background: linear-gradient(90deg, var(--info), var(--brand-2)); }
.kpi--info::after { background: var(--info); opacity: 0.16; }

.kpi__label {
  font-size: 0.71rem; font-weight: 680; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-mute);
  display: flex; align-items: center; gap: 6px;
  position: relative;
}
.kpi__value {
  font-size: clamp(1.6rem, 1.35rem + 0.8vw, 2rem);
  font-weight: 720; letter-spacing: -0.035em;
  margin-top: 7px; line-height: 1.02;
  font-variant-numeric: tabular-nums;
  position: relative;
  background: linear-gradient(170deg, var(--text), color-mix(in srgb, var(--text) 62%, var(--brand)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kpi__value small {
  font-size: 0.8rem; font-weight: 620; color: var(--text-mute);
  -webkit-text-fill-color: var(--text-mute);
  letter-spacing: 0;
}
.kpi__foot {
  margin-top: 8px; font-size: 0.77rem; color: var(--text-dim);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  position: relative;
}
.kpi__foot svg { width: 12px; height: 12px; flex: none; }
.kpi__spark { margin-top: 10px; height: 30px; position: relative; }
.kpi.is-clickable { cursor: pointer; }

.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 660; }
.delta--up { color: var(--ok); }
.delta--down { color: var(--danger); }
.delta--flat { color: var(--text-mute); }

/* --------------------------------------------------------------- badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 0.74rem; font-weight: 660; letter-spacing: 0.005em;
  background: var(--neutral-soft); color: var(--text-dim);
  white-space: nowrap;
  text-decoration: none;
}
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
  box-shadow: 0 0 6px currentColor;
}
.badge--plain::before { display: none; }
.badge--ok { background: var(--ok-soft); color: var(--ok); }
.badge--warn { background: var(--warn-soft); color: var(--warn); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--info { background: var(--info-soft); color: var(--info); }
.badge--accent { background: var(--accent-soft); color: var(--accent-2); }
/* "Nothing to report" states: present, but deliberately quiet next to the
   coloured variants so a screen of them does not read as a screen of warnings. */
.badge--muted {
  background: var(--surface-2); color: var(--text-mute);
  border: 1px solid var(--border);
}
.badge--muted::before { box-shadow: none; opacity: 0.55; }
.badge--lg { font-size: 0.82rem; padding: 4px 13px; }
a.badge:hover { text-decoration: none; filter: brightness(1.15); }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 7px;
  font-size: 0.74rem; font-weight: 600;
  background: var(--surface-3); color: var(--text-dim);
  border: 1px solid var(--border);
}

/* segmented pill tabs with a soft active state */
.pill-tabs {
  display: inline-flex; gap: 3px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 13px; flex-wrap: wrap;
  backdrop-filter: blur(var(--glass-blur));
}
.pill-tabs button {
  padding: 6px 14px; border: 0; border-radius: 10px;
  font: inherit; font-size: 0.82rem; font-weight: 620;
  background: transparent; color: var(--text-dim); cursor: pointer;
  transition: background 0.16s, color 0.16s, box-shadow 0.16s;
}
.pill-tabs button:hover { color: var(--text); background: var(--neutral-soft); }
.pill-tabs button.is-active {
  background: linear-gradient(140deg, var(--accent-lift), var(--accent-deep));
  color: #fff;
  box-shadow: var(--shadow-brand), var(--inner-top);
}
.pill-tabs button .count {
  font-size: 0.72rem; opacity: 0.78; margin-left: 5px;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- inputs */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label {
  font-size: 0.78rem; font-weight: 660; color: var(--text-dim);
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.field__label svg { width: 14px; height: 14px; color: var(--accent-2); }
.field__label .req { color: var(--danger); }
.field__hint { font-size: 0.74rem; color: var(--text-mute); font-weight: 400; }
.field__error { font-size: 0.76rem; color: var(--danger); font-weight: 620; }
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.input, .select, .textarea {
  width: 100%;
  padding: 9px 12px;
  font: inherit; font-size: 0.88rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-mute); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  background: var(--surface-solid);
}
.input::placeholder, .textarea::placeholder { color: var(--text-mute); }
.input:disabled, .select:disabled, .textarea:disabled {
  opacity: 0.6; cursor: not-allowed; background: var(--neutral-soft);
}
.textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.input--lg { padding: 12px 15px; font-size: 1rem; border-radius: 13px; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236d7995' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;
  padding-right: 32px;
  cursor: pointer;
}
.input[type="date"], .input[type="datetime-local"] { cursor: pointer; }
.input[type="date"]::-webkit-calendar-picker-indicator,
.input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.62); cursor: pointer; opacity: 0.8;
}
[data-theme="light"] .input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] .input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: none;
}
.input[type="color"] {
  padding: 4px; height: 40px; cursor: pointer;
}

.form-grid { display: grid; gap: 15px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

.check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--border);
  cursor: pointer; font-size: 0.85rem;
  transition: border-color 0.16s, background 0.16s, box-shadow 0.16s;
}
.check:hover { border-color: var(--border-strong); background: var(--surface-3); }
.check input {
  margin: 2px 0 0; accent-color: var(--brand);
  width: 16px; height: 16px; flex: none; cursor: pointer;
}
.check span { min-width: 0; }
.check small { display: block; color: var(--text-mute); font-size: 0.76rem; margin-top: 1px; }
.check.is-on {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-ring);
}

.check-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); }

.filters {
  display: flex; gap: 11px; flex-wrap: wrap; align-items: flex-end;
  padding: 15px 17px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--glass-blur));
  margin-bottom: 17px;
}
.filters .field { flex: 1 1 168px; }
.filters .field--search { flex: 2 1 268px; }
.filters__actions { display: flex; gap: 8px; margin-left: auto; align-items: flex-end; }

.search-wrap { position: relative; }
.search-wrap .input { padding-left: 35px; }
.search-wrap svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-mute); pointer-events: none;
}

/* ------------------------------------------- collapsible advanced section */
.adv {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
.adv__toggle {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 15px;
  border: 0; background: transparent; color: var(--text);
  font: inherit; font-weight: 620; font-size: 0.85rem;
  cursor: pointer; text-align: left;
  transition: background 0.15s;
}
.adv__toggle:hover { background: var(--surface-3); }
.adv__toggle svg:first-child { color: var(--accent-2); flex: none; }
.adv__toggle .adv__chev {
  margin-left: auto; flex: none; color: var(--text-mute);
  transition: transform 0.22s var(--ease);
}
.adv__toggle small { display: block; font-weight: 400; color: var(--text-mute); font-size: 0.75rem; }
.adv.is-open .adv__chev { transform: rotate(180deg); }
.adv__panel { display: none; padding: 4px 15px 16px; }
.adv.is-open .adv__panel { display: block; animation: fade 0.24s var(--ease-out); }

/* -------------------------------------------------------- preset gallery */
.preset-grid {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
}
.preset-card {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.16s, background 0.16s, transform 0.16s var(--ease);
}
.preset-card:hover {
  border-color: var(--accent-ring); background: var(--surface-3);
  transform: translateY(-2px);
}
.preset-card.is-on {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-ring);
}
.preset-card__name { font-weight: 640; font-size: 0.85rem; }
.preset-card__spec { font-size: 0.73rem; color: var(--text-mute); line-height: 1.4; }
.preset-card__brand {
  font-size: 0.63rem; font-weight: 720; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-2);
}

/* --------------------------------------------------------- stepper / counter */
.stepper {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: 11px; overflow: hidden;
  background: var(--surface-2);
}
.stepper button {
  width: 38px; border: 0; background: transparent; color: var(--text-dim);
  cursor: pointer; display: grid; place-items: center;
  transition: background 0.14s, color 0.14s;
}
.stepper button:hover { background: var(--surface-3); color: var(--text); }
.stepper button svg { width: 15px; height: 15px; }
.stepper input {
  width: 62px; border: 0; border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: transparent; color: var(--text);
  font: inherit; font-weight: 660; text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; background: var(--surface-3); }

/* ------------------------------------------------------ colour swatches */
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 30px; height: 30px; border-radius: 9px;
  border: 2px solid transparent;
  cursor: pointer; padding: 0;
  box-shadow: var(--inner-top), 0 2px 6px rgba(0, 0, 0, 0.28);
  transition: transform 0.15s var(--spring), border-color 0.15s;
}
.swatch:hover { transform: scale(1.12); }
.swatch.is-on {
  border-color: var(--text);
  transform: scale(1.1);
}

/* --------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.86rem; }
.table th, .table td { padding: 11px 15px; text-align: left; vertical-align: middle; }
.table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2);
  backdrop-filter: blur(var(--glass-blur));
  font-size: 0.71rem; font-weight: 720; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-mute);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table thead th.is-sortable { cursor: pointer; user-select: none; transition: color 0.14s; }
.table thead th.is-sortable:hover { color: var(--text); }
.table thead th .sort-ind { opacity: 0.45; margin-left: 4px; font-size: 0.8em; }
.table thead th.is-sorted { color: var(--accent-2); }
.table thead th.is-sorted .sort-ind { opacity: 1; }
.table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.13s;
}
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:hover {
  background: linear-gradient(90deg, var(--accent-soft), var(--surface-2) 40%);
}
.table tbody tr.is-clickable { cursor: pointer; }
.table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.actions { text-align: right; white-space: nowrap; }
.table .cell-strong { font-weight: 640; }
.table .cell-dim { color: var(--text-mute); font-size: 0.81rem; }
.table .cell-stack { display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }

.cell-link { color: var(--text); font-weight: 640; text-decoration: none; }
.cell-link:hover { color: var(--accent-2); text-decoration: none; }

.pagination {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 17px; border-top: 1px solid var(--border);
  font-size: 0.82rem; color: var(--text-mute);
  background: var(--surface-2);
}
.pagination__pages { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.pagination__pages button {
  min-width: 32px; height: 32px; padding: 0 8px;
  border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-dim);
  font: inherit; font-size: 0.8rem; font-weight: 620; cursor: pointer;
  transition: border-color 0.14s, color 0.14s, background 0.14s;
}
.pagination__pages button:hover:not(:disabled) {
  border-color: var(--accent-ring); color: var(--text); background: var(--surface-3);
}
.pagination__pages button.is-active {
  background: linear-gradient(140deg, var(--accent-lift), var(--accent-deep));
  border-color: transparent; color: #fff;
  box-shadow: var(--shadow-brand);
}
.pagination__pages button:disabled { opacity: 0.38; cursor: not-allowed; }

/* ------------------------------------------------------------ empty/load */
.empty { padding: 50px 26px; text-align: center; color: var(--text-mute); }
.empty > svg {
  width: 44px; height: 44px; opacity: 0.35; margin-bottom: 13px;
  color: var(--accent-2);
}
.empty h3 { color: var(--text-dim); margin-bottom: 6px; font-size: 1rem; }
.empty p { font-size: 0.86rem; max-width: 430px; margin: 0 auto 16px; line-height: 1.6; }

.skeleton {
  background: linear-gradient(100deg,
      var(--surface-2) 22%, var(--surface-3) 48%, var(--surface-2) 74%);
  background-size: 260% 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--radius-sm);
}
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.skeleton--text { height: 12px; margin-bottom: 9px; }
.skeleton--kpi { height: 118px; border-radius: var(--radius); }
.skeleton--row { height: 46px; margin-bottom: 7px; }
.skeleton--chart { height: 232px; border-radius: var(--radius); }

.spinner {
  width: 15px; height: 15px; flex: none;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent-2);
  border-radius: 50%;
  animation: spin 0.62s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 100;
  background: linear-gradient(90deg, transparent, var(--brand), var(--brand-2), transparent);
  background-size: 42% 100%;
  box-shadow: 0 0 12px var(--accent-glow);
  animation: slide 1.05s infinite linear;
  display: none;
}
.loading-bar.is-on { display: block; }
@keyframes slide { from { background-position: -42% 0; } to { background-position: 142% 0; } }

/* --------------------------------------------------------------- health */
.health { display: flex; align-items: center; gap: 9px; }
.health__ring { width: 34px; height: 34px; flex: none; }
.health__score { font-weight: 720; font-variant-numeric: tabular-nums; }
.health__band { font-size: 0.72rem; color: var(--text-mute); text-transform: capitalize; }

.meter {
  height: 7px; border-radius: 99px;
  background: var(--neutral-soft); overflow: hidden;
}
.meter__fill {
  height: 100%; border-radius: 99px;
  transition: width 0.65s var(--ease-out);
  box-shadow: 0 0 10px currentColor;
}
.meter--ok .meter__fill { background: var(--ok); color: var(--ok); }
.meter--warn .meter__fill { background: var(--warn); color: var(--warn); }
.meter--danger .meter__fill { background: var(--danger); color: var(--danger); }
.meter--accent .meter__fill {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color: var(--brand);
}

/* ------------------------------------------------------------- timeline */
.timeline { position: relative; padding-left: 24px; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: 7px; bottom: 7px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-ring), var(--border) 60%, transparent);
}
.timeline__item { position: relative; padding-bottom: 17px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ""; position: absolute; left: -23px; top: 5px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--surface-solid); border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.timeline__item[data-kind="returned"]::before { border-color: var(--info); box-shadow: 0 0 0 3px var(--info-soft); }
.timeline__item[data-kind="assigned"]::before { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.timeline__item[data-kind="deleted"]::before { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.timeline__item[data-kind="issue"]::before { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.timeline__text { font-size: 0.86rem; line-height: 1.5; }
.timeline__meta {
  font-size: 0.74rem; color: var(--text-mute); margin-top: 3px;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}

/* ------------------------------------------------------------ definition */
.dl {
  display: grid; grid-template-columns: minmax(122px, 36%) minmax(0, 1fr);
  gap: 1px 15px; font-size: 0.86rem;
}
.dl dt { color: var(--text-mute); padding: 7px 0; font-size: 0.8rem; }
.dl dd { margin: 0; padding: 7px 0; font-weight: 560; word-break: break-word; }
.dl--rows dt, .dl--rows dd { border-bottom: 1px solid var(--border); }
.dl--rows > :nth-last-child(-n+2) { border-bottom: 0; }

/* ---------------------------------------------------------------- drawer */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(3, 5, 12, 0.66);
  backdrop-filter: blur(5px);
  opacity: 0; transition: opacity 0.24s var(--ease);
}
.overlay.is-open { opacity: 1; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(620px, 100%);
  display: flex; flex-direction: column;
  background: var(--surface-solid);
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform 0.34s var(--ease-out);
}
.drawer.is-open { transform: none; }
.drawer--wide { width: min(900px, 100%); }
.drawer__head {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 19px 22px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--accent-soft), transparent);
}
.drawer__head h2 { font-size: 1.08rem; }
.drawer__head p { font-size: 0.81rem; color: var(--text-mute); margin: 3px 0 0; }
.drawer__body { flex: 1; overflow-y: auto; padding: 22px; }
.drawer__foot {
  display: flex; align-items: center; gap: 9px;
  padding: 15px 22px; border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.drawer__foot .push { margin-left: auto; }

.modal {
  position: fixed; z-index: 61; top: 50%; left: 50%;
  transform: translate(-50%, -46%) scale(0.97);
  width: min(500px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity 0.2s var(--ease), transform 0.24s var(--ease-out);
}
.modal.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.modal--wide { width: min(760px, calc(100% - 32px)); }
.modal__body { padding: 24px; }
.modal__body h2 { font-size: 1.08rem; margin-bottom: 7px; }
.modal__body p { color: var(--text-dim); font-size: 0.88rem; line-height: 1.6; }
.modal__foot { display: flex; gap: 9px; justify-content: flex-end; padding: 0 24px 22px; }
.modal__icon {
  width: 44px; height: 44px; border-radius: 14px; margin-bottom: 14px;
  display: grid; place-items: center;
  background: var(--danger-soft); color: var(--danger);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 22%, transparent);
}
.modal__icon svg { width: 21px; height: 21px; }
.modal__icon--warn {
  background: var(--warn-soft); color: var(--warn);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 22%, transparent);
}
.modal__icon--info {
  background: var(--info-soft); color: var(--info);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--info) 22%, transparent);
}

.form-error {
  padding: 11px 14px; border-radius: 11px; margin-bottom: 15px;
  background: var(--danger-soft); color: var(--danger);
  font-size: 0.84rem; font-weight: 620;
  display: flex; align-items: flex-start; gap: 9px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 22%, transparent);
}
.form-error svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

/* ---------------------------------------------------------------- toasts */
.toasts {
  position: fixed; bottom: 22px; right: 22px; z-index: 90;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(400px, calc(100vw - 44px));
}
.toast {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px;
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--brand);
  border-radius: 13px;
  box-shadow: var(--shadow);
  font-size: 0.86rem;
  animation: toast-in 0.3s var(--spring);
}
.toast.is-out { animation: toast-out 0.2s var(--ease) forwards; }
.toast--ok { border-left-color: var(--ok); }
.toast--error { border-left-color: var(--danger); }
.toast--warn { border-left-color: var(--warn); }
.toast__icon { flex: none; margin-top: 1px; }
.toast__icon svg { width: 17px; height: 17px; }
.toast--ok .toast__icon { color: var(--ok); }
.toast--error .toast__icon { color: var(--danger); }
.toast--warn .toast__icon { color: var(--warn); }
.toast--info .toast__icon { color: var(--info); }
.toast__body { min-width: 0; flex: 1; }
.toast__title { font-weight: 660; }
.toast__text { color: var(--text-dim); font-size: 0.82rem; }
.toast__close {
  border: 0; background: transparent; color: var(--text-mute);
  cursor: pointer; padding: 0 2px; line-height: 1; font-size: 1.1rem;
}
.toast__close:hover { color: var(--text); }
@keyframes toast-in { from { opacity: 0; transform: translateX(28px) scale(0.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(28px); } }

/* --------------------------------------------------------- command palette */
.palette-wrap {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(3, 5, 12, 0.62);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 11vh 16px 16px;
  opacity: 0; transition: opacity 0.18s var(--ease);
}
.palette-wrap.is-open { opacity: 1; }
.palette {
  width: min(650px, 100%);
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-14px) scale(0.985);
  transition: transform 0.24s var(--ease-out);
}
.palette-wrap.is-open .palette { transform: none; }
.palette__input-wrap {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--accent-soft), transparent);
}
.palette__input-wrap svg { width: 18px; height: 18px; color: var(--accent-2); flex: none; }
.palette__input {
  flex: 1; border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 1rem; outline: none;
}
.palette__list { max-height: 54vh; overflow-y: auto; padding: 7px; }
.palette__group {
  font-size: 0.65rem; font-weight: 720; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--text-mute);
  padding: 11px 12px 5px;
}
.palette__item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 10px; cursor: pointer;
  color: var(--text);
}
.palette__item:hover, .palette__item.is-active {
  background: var(--accent-soft); text-decoration: none;
}
.palette__item svg { width: 16px; height: 16px; color: var(--text-mute); flex: none; }
.palette__item.is-active svg:first-child { color: var(--accent-2); }
.palette__item svg:last-child { opacity: 0; transition: opacity 0.14s, transform 0.14s; }
.palette__item.is-active svg:last-child { opacity: 0.7; transform: translateX(2px); }
.palette__item-text { min-width: 0; flex: 1; }
.palette__item-title {
  display: block; font-size: 0.88rem; font-weight: 610;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.palette__item-sub {
  display: block; font-size: 0.76rem; color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.palette__foot {
  display: flex; gap: 15px; padding: 10px 16px;
  border-top: 1px solid var(--border); background: var(--surface-2);
  font-size: 0.73rem; color: var(--text-mute); flex-wrap: wrap;
}

/* --------------------------------------------------- floating quick action */
.fab {
  position: fixed; bottom: 26px; right: 26px; z-index: 55;
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 11px;
}
.fab__main {
  width: 56px; height: 56px; border-radius: 19px;
  border: 0; cursor: pointer;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(140deg, var(--accent-lift), var(--brand) 45%, var(--accent-deep));
  box-shadow: 0 12px 34px var(--accent-glow), var(--inner-top);
  transition: transform 0.24s var(--spring), box-shadow 0.2s;
}
.fab__main svg { width: 24px; height: 24px; transition: transform 0.26s var(--ease-out); }
.fab__main:hover { transform: translateY(-2px) scale(1.04); }
.fab.is-open .fab__main { transform: rotate(135deg); }
.fab__menu {
  display: flex; flex-direction: column; gap: 9px; align-items: flex-end;
  pointer-events: none;
}
.fab.is-open .fab__menu { pointer-events: auto; }
.fab__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 15px 9px 13px;
  border-radius: 13px;
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  color: var(--text);
  font: inherit; font-weight: 620; font-size: 0.85rem;
  cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(12px) scale(0.94);
  transition: opacity 0.2s var(--ease-out), transform 0.24s var(--spring),
              border-color 0.16s, background 0.16s;
}
.fab.is-open .fab__item { opacity: 1; transform: none; }
.fab.is-open .fab__item:nth-child(1) { transition-delay: 0.1s; }
.fab.is-open .fab__item:nth-child(2) { transition-delay: 0.07s; }
.fab.is-open .fab__item:nth-child(3) { transition-delay: 0.04s; }
.fab.is-open .fab__item:nth-child(4) { transition-delay: 0.01s; }
.fab__item:hover { border-color: var(--accent); background: var(--accent-soft); }
.fab__item svg { width: 17px; height: 17px; color: var(--accent-2); flex: none; }

@media (max-width: 560px) {
  .fab { bottom: 18px; right: 18px; }
  .fab__main { width: 52px; height: 52px; border-radius: 17px; }
}

/* --------------------------------------------------------------- onboarding */
.hero {
  position: relative;
  padding: 34px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 58%),
    var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  backdrop-filter: blur(var(--glass-blur));
}
.hero::before {
  content: ""; position: absolute; top: -90px; right: -70px;
  width: 300px; height: 300px; border-radius: 50%;
  background: var(--accent-glow); filter: blur(70px); opacity: 0.55;
  pointer-events: none;
}
.hero__eyebrow {
  font-size: 0.7rem; font-weight: 720; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--accent-2);
  display: flex; align-items: center; gap: 7px; margin-bottom: 11px;
}
.hero h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.15rem); margin-bottom: 10px; }
.hero p { color: var(--text-dim); font-size: 0.96rem; max-width: 620px; line-height: 1.65; }
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

.steps { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.step {
  position: relative;
  padding: 17px 18px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: transform 0.2s var(--ease), border-color 0.2s;
}
.step:hover { transform: translateY(-2px); border-color: var(--accent-ring); }
.step.is-done { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.step__num {
  width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center; margin-bottom: 11px;
  font-weight: 760; font-size: 0.83rem;
  background: var(--accent-soft); color: var(--accent-2);
  box-shadow: 0 0 0 1px var(--accent-ring);
}
.step.is-done .step__num {
  background: var(--ok-soft); color: var(--ok);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 30%, transparent);
}
.step h3 { font-size: 0.95rem; margin-bottom: 5px; }
.step p { font-size: 0.83rem; color: var(--text-mute); margin-bottom: 13px; line-height: 1.55; }

/* ---------------------------------------------------------------- charts */
.chart { width: 100%; display: block; overflow: visible; }
.chart text {
  fill: var(--text-mute); font-size: 10.5px;
  font-family: var(--font); font-weight: 500;
}
.chart .grid-line { stroke: var(--border); stroke-width: 1; }
.chart .axis-line { stroke: var(--border-strong); stroke-width: 1; }
.chart .bar { transition: opacity 0.15s, filter 0.15s; }
.chart .bar:hover { opacity: 0.82; filter: brightness(1.15); }
.chart .dot { transition: r 0.15s; cursor: pointer; }
.chart .dot:hover { r: 5; }

/* Chart draw-in animations. */
@keyframes draw-line { from { stroke-dashoffset: var(--len, 2000); } to { stroke-dashoffset: 0; } }
@keyframes grow-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sweep-arc { from { stroke-dasharray: 0 9999; } }

.chart .line-path {
  stroke-dasharray: var(--len, 2000);
  animation: draw-line 1.1s var(--ease-out) both;
}
.chart .area-path { animation: fade 0.9s 0.25s var(--ease-out) both; }
.chart .bar { transform-origin: center bottom; animation: grow-bar 0.65s var(--ease-out) both; }
.chart .arc { animation: sweep-arc 0.9s var(--ease-out) both; }

.legend { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 12px; font-size: 0.79rem; }
.legend__item { display: flex; align-items: center; gap: 6px; color: var(--text-dim); }
.legend__swatch {
  width: 10px; height: 10px; border-radius: 3px; flex: none;
  box-shadow: 0 0 8px currentColor;
}
.legend__value { color: var(--text); font-weight: 660; font-variant-numeric: tabular-nums; }

.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut-wrap .chart { max-width: 184px; }
.donut-legend { flex: 1; min-width: 168px; display: flex; flex-direction: column; gap: 4px; }
.donut-legend__row {
  display: flex; align-items: center; gap: 9px; font-size: 0.82rem;
  padding: 4px 7px; border-radius: 8px; cursor: pointer;
  transition: background 0.14s;
}
.donut-legend__row:hover { background: var(--surface-3); }
.donut-legend__row .label { flex: 1; color: var(--text-dim); }
.donut-legend__row .value { font-weight: 720; font-variant-numeric: tabular-nums; }
.donut-legend__row .pct {
  color: var(--text-mute); font-size: 0.76rem;
  min-width: 40px; text-align: right; font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- alerts */
.alert-list { display: flex; flex-direction: column; }
.alert-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 19px; border-bottom: 1px solid var(--border);
  font-size: 0.85rem; text-decoration: none; color: inherit;
  transition: background 0.14s, padding-left 0.16s var(--ease);
}
.alert-row:last-child { border-bottom: 0; }
.alert-row:hover {
  background: var(--surface-2); text-decoration: none;
  padding-left: 23px;
}
.alert-row__icon {
  width: 32px; height: 32px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--warn-soft); color: var(--warn);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 18%, transparent);
}
.alert-row__icon svg { width: 15px; height: 15px; }
.alert-row__icon--danger {
  background: var(--danger-soft); color: var(--danger);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 20%, transparent);
}
.alert-row__icon--info {
  background: var(--info-soft); color: var(--info);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--info) 18%, transparent);
}
.alert-row__icon--ok {
  background: var(--ok-soft); color: var(--ok);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 18%, transparent);
}
.alert-row__body { flex: 1; min-width: 0; }
.alert-row__title {
  display: block; font-weight: 610;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alert-row__sub {
  display: block; font-size: 0.77rem; color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.notice {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 17px; border-radius: var(--radius);
  background: var(--info-soft);
  border: 1px solid color-mix(in srgb, var(--info) 20%, transparent);
  font-size: 0.86rem; color: var(--text);
}
.notice > svg { width: 18px; height: 18px; flex: none; color: var(--info); margin-top: 1px; }
.notice--warn {
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 22%, transparent);
}
.notice--warn > svg { color: var(--warn); }
.notice--danger {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
}
.notice--danger > svg { color: var(--danger); }
.notice--ok {
  background: var(--ok-soft);
  border-color: color-mix(in srgb, var(--ok) 22%, transparent);
}
.notice--ok > svg { color: var(--ok); }
.notice__title { font-weight: 660; margin-bottom: 2px; }
.notice__body { color: var(--text-dim); font-size: 0.83rem; line-height: 1.55; }

/* ---------------------------------------------------------------- picker */
.picker { display: flex; flex-direction: column; gap: 9px; }
.picker__list {
  max-height: 274px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2);
}
.picker__item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
  transition: background 0.13s;
}
.picker__item:last-child { border-bottom: 0; }
.picker__item:hover { background: var(--surface-3); }
.picker__item.is-selected {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.picker__item-body { flex: 1; min-width: 0; }
.picker__item-title { display: block; font-weight: 610; }
.picker__item-sub { display: block; font-size: 0.76rem; color: var(--text-mute); }

.selected-chip {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: 13px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-ring);
}
.selected-chip__body { flex: 1; min-width: 0; }
.selected-chip__title { display: block; font-weight: 660; }
.selected-chip__sub { display: block; font-size: 0.78rem; color: var(--text-dim); }

/* ----------------------------------------------------------------- misc */
.divider { height: 1px; background: var(--border); margin: 17px 0; border: 0; }
.text-dim { color: var(--text-dim); }
.text-mute { color: var(--text-mute); }
.text-ok { color: var(--ok); }
.text-warn { color: var(--warn); }
.text-danger { color: var(--danger); }
/* ------------------------------------------------- policy / support lists */
/* Statements of fact with a leading marker. The marker carries the meaning
   (recorded, optional, never), so it is sized to stay legible on its own. */
.policy-list { list-style: none; margin: 0; padding: 0; }
.policy-list li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 9px 0; font-size: 0.85rem; line-height: 1.6;
  border-bottom: 1px solid var(--border);
}
.policy-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.policy-list li:first-child { padding-top: 0; }
.policy-list__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 7px; margin-top: 1px;
  background: var(--surface-2); color: var(--text-mute);
}
.policy-list__icon.is-ok { background: var(--ok-soft); color: var(--ok); }
.policy-list__icon.is-warn { background: var(--warn-soft); color: var(--warn); }
.policy-list__icon.is-danger { background: var(--danger-soft); color: var(--danger); }

/* Numbered install steps for the browser add-on. */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps li {
  counter-increment: step; position: relative;
  padding: 0 0 15px 38px; font-size: 0.85rem; line-height: 1.6;
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 25px; height: 25px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 660;
  background: var(--accent-soft); color: var(--accent-2);
}
.steps li:last-child { padding-bottom: 0; }
.steps li::after {
  content: ""; position: absolute; left: 12px; top: 27px; bottom: 4px;
  width: 1px; background: var(--border);
}
.steps li:last-child::after { display: none; }

@media print {
  .sidebar, .topbar, .tabbar, .fab, .toasts, .page-head__actions { display: none !important; }
  .app, .main, #view { display: block; margin: 0; padding: 0; }
  .card { break-inside: avoid; border-color: #ccc; }
}

.text-accent { color: var(--accent-2); }
.text-sm { font-size: 0.82rem; }
.text-xs { font-size: 0.75rem; }
.fw-600 { font-weight: 640; }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 9px; }
.mt-3 { margin-top: 17px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 9px; }
.mb-3 { margin-bottom: 17px; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.accessory-list { display: flex; gap: 5px; flex-wrap: wrap; }

.copy-btn {
  border: 0; background: transparent; color: var(--text-mute);
  cursor: pointer; padding: 3px; border-radius: 6px; line-height: 1;
  vertical-align: middle; transition: color 0.14s, background 0.14s;
}
.copy-btn:hover { color: var(--accent-2); background: var(--neutral-soft); }
.copy-btn svg { width: 13px; height: 13px; }

.label-preview {
  display: grid; place-items: center; padding: 18px;
  background: #fff; border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.label-preview img, .label-preview svg { max-width: 100%; }

/* -------------------------------------------------------------- sign in */
.auth {
  min-height: 100vh; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  position: relative; z-index: 1;
}
.auth__aside {
  padding: 48px; display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  background:
    radial-gradient(700px 440px at 18% 10%, var(--accent-glow), transparent 62%),
    radial-gradient(580px 400px at 84% 90%, rgba(34, 211, 238, 0.2), transparent 60%),
    var(--surface);
  backdrop-filter: blur(var(--glass-blur));
}
.auth__aside-body { margin: auto 0; max-width: 440px; }
.auth__aside h1 {
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.25rem);
  margin-bottom: 13px; letter-spacing: -0.032em;
}
.auth__aside p { color: var(--text-dim); font-size: 0.97rem; line-height: 1.65; }
.auth__points {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: flex; flex-direction: column; gap: 14px;
}
.auth__points li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 0.89rem; color: var(--text-dim);
}
.auth__points svg {
  width: 18px; height: 18px; flex: none; color: var(--accent-2); margin-top: 2px;
}
.auth__points strong { color: var(--text); display: block; font-weight: 660; }
.auth__form-wrap { display: grid; place-items: center; padding: 34px; }
.auth__form { width: min(400px, 100%); }
/* Sized from the artwork's ratio, not as a 118px square. With a 4.73:1 wordmark
   the square left tall empty bands that the plate colour filled in, which read as
   a dark box sitting behind a small logo. */
.auth__logo {
  display: block;
  width: min(250px, 100%);
  height: auto;
  aspect-ratio: var(--logo-aspect);
  margin: 0 0 22px;
  border-radius: 0;
  background: var(--logo-plate) var(--logo-art) center / var(--logo-fit) no-repeat;
  /* No shadow. It framed the square tile, and a brand-coloured glow around a box
     with nothing in it is the outline of the problem this stopped having. */
  box-shadow: none;
}
.auth__form h2 { font-size: 1.5rem; margin-bottom: 6px; }
.auth__form > p { color: var(--text-dim); margin-bottom: 26px; font-size: 0.89rem; }
.auth__hint {
  margin-top: 20px; padding: 13px 15px; border-radius: 12px;
  background: var(--surface-2); border: 1px dashed var(--border-strong);
  font-size: 0.81rem; color: var(--text-dim); line-height: 1.6;
}
.auth__hint code { color: var(--accent-2); font-weight: 620; }
.auth__foot { margin-top: 24px; font-size: 0.75rem; color: var(--text-mute); text-align: center; }
@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth__aside { display: none; }
  /* The aside (and its brand mark) is gone here, so centre the logo instead.
     Width only — the height follows from --logo-aspect, and pinning both would
     put the square, and the dark bands, straight back. */
  .auth__logo { width: min(210px, 72%); margin: 0 auto 18px; }
}

/* ------------------------------------------------------------- responsive */
.sidebar__backdrop { display: none; }

@media (max-width: 1024px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: 274px;
    transform: translateX(-100%);
    transition: transform 0.3s var(--ease-out);
    box-shadow: var(--shadow-lg);
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .sidebar__backdrop {
    display: block; position: fixed; inset: 0; z-index: 29;
    background: rgba(3, 5, 12, 0.6); backdrop-filter: blur(3px);
    animation: fade 0.2s;
  }
  .menu-toggle { display: grid; }
  .content { padding: 18px 16px 90px; }
  .topbar { padding: 0 16px; }
}

@media (max-width: 560px) {
  .topbar__search span, .topbar__search kbd { display: none; }
  .topbar__search { max-width: 46px; justify-content: center; padding: 9px; }
  .page-head { align-items: flex-start; }
  .drawer { width: 100%; }
  .filters { padding: 13px; }
  .hero { padding: 24px 20px; }
  .card__body { padding: 16px; }
  .table th, .table td { padding: 10px 12px; }
}

/* ----------------------------------------------------------------- print */
.print-root { display: none; }

.receipt { color: #000; background: #fff; font-family: var(--font); }
.receipt__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; border-bottom: 2px solid #000; padding-bottom: 12px;
}
.receipt__org { font-size: 17px; font-weight: 700; }
.receipt__title {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 3px;
}
.receipt__ref { text-align: right; font-size: 11px; line-height: 1.6; }
.receipt h3 {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  margin: 18px 0 7px; color: #444;
}
.receipt table { width: 100%; border-collapse: collapse; font-size: 12px; }
.receipt table td, .receipt table th {
  border: 1px solid #bbb; padding: 6px 9px; text-align: left; vertical-align: top;
}
.receipt table th { background: #f1f1f1; width: 32%; font-weight: 600; }
.receipt__terms { font-size: 10.5px; line-height: 1.6; color: #333; }
.receipt__terms ol { padding-left: 18px; margin: 5px 0 0; }
.receipt__sign { display: flex; gap: 40px; margin-top: 42px; }
.receipt__sign div { flex: 1; border-top: 1px solid #000; padding-top: 5px; font-size: 11px; }
.receipt__note { margin-top: 16px; font-size: 10px; color: #666; text-align: center; }

.label-sheet { display: flex; flex-wrap: wrap; gap: 8px; }

@media print {
  body { background: #fff !important; }
  body::before, body::after { display: none; }
  .app, .toasts, .palette-wrap, .overlay, .drawer, .modal,
  .loading-bar, .fab { display: none !important; }
  .print-root { display: block !important; padding: 0; }
  .print-root .receipt { page-break-after: always; }
  .print-root .receipt:last-child { page-break-after: auto; }
  @page { margin: 14mm; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body::before { animation: none; }
}

/* =========================================================================
   Mobile bottom navigation
   On phones and tablets the sidebar is hidden, so the five things an IT admin
   opens all day get a permanent thumb-reachable bar instead.
   ========================================================================= */

.tabbar { display: none; }

.tabbar__item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px 6px;
  border: 0; background: transparent;
  color: var(--text-mute);
  font: inherit; font-size: 0.66rem; font-weight: 620;
  letter-spacing: 0.01em;
  cursor: pointer; text-decoration: none;
  border-radius: 12px;
  position: relative;
  min-height: 54px;                 /* comfortable tap target */
  transition: color 0.16s, background 0.16s;
}
.tabbar__item svg { width: 21px; height: 21px; }
.tabbar__item:hover { text-decoration: none; color: var(--text-dim); }
.tabbar__item.is-active { color: var(--accent-2); }
.tabbar__item.is-active::before {
  content: ""; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 0 10px var(--accent-glow);
}
.tabbar__badge {
  position: absolute; top: 5px; right: 50%;
  transform: translateX(20px);
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 99px;
  background: var(--danger); color: #fff;
  font-size: 0.62rem; font-weight: 760; line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg-2);
}

@media (max-width: 1024px) {
  .tabbar {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 26;
    gap: 2px;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
    background: var(--panel);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    border-top: 1px solid var(--border);
  }
  /* keep the last rows clear of the bar and the floating button */
  .content { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .fab { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  .toasts { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* =========================================================================
   Install prompt
   ========================================================================= */

.install-bar {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 16px;
  margin-bottom: 17px;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 200% at 0% 0%, var(--accent-soft), transparent 60%),
    var(--surface);
  border: 1px solid var(--accent-ring);
  backdrop-filter: blur(var(--glass-blur));
  animation: rise 0.4s var(--ease-out) both;
}
.install-bar__icon {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent-lift), var(--accent-deep));
  color: #fff;
  box-shadow: var(--shadow-brand), var(--inner-top);
}
.install-bar__icon svg { width: 20px; height: 20px; }
.install-bar__body { flex: 1; min-width: 0; }
.install-bar__title { font-weight: 660; font-size: 0.9rem; }
.install-bar__text { font-size: 0.8rem; color: var(--text-mute); }

/* =========================================================================
   Comfortable touch targets and calmer wording on small screens
   ========================================================================= */

@media (pointer: coarse) {
  .btn { padding: 11px 17px; }
  .btn--sm { padding: 8px 13px; }
  .icon-btn { width: 42px; height: 42px; }
  .table th, .table td { padding: 13px 15px; }
  .nav__item { padding: 11px 12px; }
  .pill-tabs button { padding: 9px 15px; }
  .check { padding: 13px 14px; }
  .input, .select, .textarea { padding: 11px 13px; font-size: 0.92rem; }
  .picker__item { padding: 13px 14px; }
  .alert-row { padding: 14px 18px; }
  .company-menu__item { padding: 11px 12px; }
}

/* A short section intro used above dense tables, so a new user knows what
   they are looking at before reading a single row. */
.hint-strip {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 15px;
  margin-bottom: 13px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-dim);
}
.hint-strip svg { width: 16px; height: 16px; flex: none; color: var(--accent-2); margin-top: 1px; }
.hint-strip strong { color: var(--text); font-weight: 640; }
.hint-strip__close {
  margin-left: auto; border: 0; background: transparent; color: var(--text-mute);
  cursor: pointer; padding: 2px 4px; border-radius: 6px; line-height: 1; flex: none;
}
.hint-strip__close:hover { color: var(--text); background: var(--neutral-soft); }

@media print {
  .tabbar, .install-bar { display: none !important; }
}

/* =========================================================================
   Live hardware monitoring
   ========================================================================= */

/* A labelled bar for one measured value (CPU, RAM, disk, battery). */
.gauge { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gauge__top { display: flex; align-items: baseline; gap: 8px; }
.gauge__label {
  font-size: 0.72rem; font-weight: 680; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-mute);
  display: flex; align-items: center; gap: 5px;
}
.gauge__label svg { width: 13px; height: 13px; }
.gauge__value {
  margin-left: auto;
  font-size: 1.02rem; font-weight: 720;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.gauge__sub { font-size: 0.75rem; color: var(--text-mute); }
.gauge--ok .gauge__value { color: var(--ok); }
.gauge--warn .gauge__value { color: var(--warn); }
.gauge--critical .gauge__value { color: var(--danger); }
.gauge--unknown .gauge__value { color: var(--text-mute); }

.gauge-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Online / offline pill for a monitored machine. */
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--text-mute);
  position: relative;
}
.pulse-dot--live { background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: pulse 2.2s infinite; }
.pulse-dot--stale { background: var(--warn); }
.pulse-dot--dead { background: var(--danger); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 65%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ok) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 0%, transparent); }
}

/* One row per finding on the health card. */
.finding {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.finding:last-child { border-bottom: 0; }
.finding__icon {
  width: 24px; height: 24px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--neutral-soft); color: var(--text-mute);
}
.finding__icon svg { width: 13px; height: 13px; }
.finding--ok .finding__icon { background: var(--ok-soft); color: var(--ok); }
.finding--warn .finding__icon { background: var(--warn-soft); color: var(--warn); }
.finding--critical .finding__icon { background: var(--danger-soft); color: var(--danger); }
.finding__body { flex: 1; min-width: 0; }
.finding__label { font-weight: 620; }
.finding__detail { font-size: 0.79rem; color: var(--text-mute); }
.finding__points {
  font-size: 0.75rem; font-weight: 700; color: var(--danger);
  font-variant-numeric: tabular-nums; flex: none;
}

/* Volume list on the device page. */
.volume {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
  font-size: 0.84rem;
}
.volume:last-child { border-bottom: 0; }
.volume__mount {
  font-family: var(--mono); font-weight: 640;
  min-width: 62px; flex: none;
}
.volume__bar { flex: 1; min-width: 80px; }
.volume__free { font-size: 0.79rem; color: var(--text-mute); flex: none; text-align: right; }

/* The copyable enrolment command. */
.command-box {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  font-family: var(--mono); font-size: 0.79rem;
  line-height: 1.6; word-break: break-all;
}
.command-box__text { flex: 1; min-width: 0; color: var(--text); }
.command-box .copy-btn { flex: none; }

.spec-grid {
  display: grid; gap: 10px 18px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  font-size: 0.84rem;
}
.spec-grid__label {
  font-size: 0.71rem; font-weight: 660; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-mute);
}
.spec-grid__value { font-weight: 560; word-break: break-word; }

/* =========================================================================
   Employee portal
   A second shell (portal.html + js/portal.js) with no sidebar and no command
   palette. One centred column, because an employee has three pages rather than
   nineteen and a navigation rail for three items is furniture, not help.
   Everything below reuses the existing tokens, so the portal inherits the
   company accent and both themes without knowing they exist.
   ========================================================================= */

.portal-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px clamp(14px, 4vw, 34px);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.portal-top .brand { margin: 0; }

/* Pushes the account block to the far end without a spacer element. */
.portal-top__gap { margin-left: auto; }

.portal-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.portal-nav__item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px;
  border-radius: 11px;
  color: var(--text-mute);
  font-size: 0.84rem; font-weight: 620;
  text-decoration: none;
  transition: color 0.16s, background 0.16s;
}
.portal-nav__item:hover { color: var(--text-dim); background: var(--neutral-soft); text-decoration: none; }
/* Mixed from --brand rather than a --brand-soft token, because there isn't one:
   the accent is set per company at runtime by store.applyBrand(). */
.portal-nav__item.is-active {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}
.portal-nav__item svg { width: 16px; height: 16px; }

/* A count on a nav item, e.g. how many handovers are waiting to be signed. */
.portal-nav__count {
  min-width: 18px; padding: 0 5px;
  border-radius: 99px;
  background: var(--warn-soft); color: var(--warn);
  font-size: 0.68rem; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
}

.portal-main { padding: clamp(16px, 3vw, 30px) clamp(14px, 4vw, 34px) 60px; }
.portal-view { max-width: 980px; margin: 0 auto; }

/* One device the signed-in person holds. */
.portal-device__spec {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px 16px;
}
.portal-device__spec dt {
  margin: 0; font-size: 0.7rem; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.portal-device__spec dd {
  margin: 2px 0 0; font-size: 0.86rem; font-weight: 600;
}

@media (max-width: 620px) {
  .portal-top { gap: 10px; padding: 10px 14px; }
  /* The brand text is the first thing worth losing on a narrow screen; the
     navigation is not. */
  .portal-top .brand__org { display: none; }
  .portal-nav { order: 3; width: 100%; justify-content: space-between; }
  .portal-nav__item { padding: 8px 10px; }
}