/* ==========================================================================
   JB Technologies — Onboarding Administration Console
   macOS-native visual language: Liquid Glass chrome, SF system font,
   sidebar + toolbar app-shell, grouped-list rows, widget tiles.

   LIQUID GLASS vs. SOLID CONTENT — deliberate split, not an oversight:
   Glass (specular sheen + blur + inset highlight, via --ops-glass-* tokens)
   is reserved for CHROME/CONTROLS the user navigates or acts through:
   sidebar, toolbar, metric widgets, buttons, selects, the search field.
   Panels, cards, tables, checklists, and status chips stay opaque "paper" —
   that's where the data lives, and it stays flat and maximally legible.
   Glassing every surface is the most common miss when imitating this
   material; the restraint here is intentional.

   TOKEN CONTRACT
   ---------------------------------------------------------------------------
   Three-state theme shape (no manual toggle yet, but structured so one can
   be added later without restructuring):
     1. Bare :root                                            → light values
     2. @media (prefers-color-scheme: dark) :root:not([data-theme="light"])
                                                                → dark values
     3. :root[data-theme="dark"]                               → dark values
            (repeated so a future manual toggle wins in both directions)

   LOCKED CUSTOM PROPERTIES — referenced directly via var(...) inside
   existing .ejs templates via inline `style` attributes. Names must not
   change (values may): --ops-blue, --ops-navy, --ops-ok, --ops-warn,
   --ops-danger. Templates also SET local element-level custom properties
   that this file reads with a fallback: --metric, --bar, --progress,
   --callout. Do not rename any of the above.
   ========================================================================== */

:root {
  /* ---- brand accent (single hue across the whole app: JBT sky-blue) ---- */
  --ops-blue: #41A6DA;              /* LOCKED name — accent, read via var() in templates */
  --ops-accent: #143A4E;
  --ops-on-accent: #ffffff;
  --ops-accent-hover: #1C4C65;
  --ops-accent-active: #143A4E;
  --ops-accent-tint: rgba(65, 166, 218, .13);
  --ops-accent-tint-strong: rgba(65, 166, 218, .22);

  /* ---- legacy aliases kept for template compatibility ---- */
  --ops-navy: #143A4E;              /* LOCKED name — now "ink", not literally navy */
  --ops-cyan: #41A6DA;

  /* ---- Apple-style light neutrals ---- */
  --ops-canvas: #eef0f2;            /* page / app background */
  --ops-canvas-2: #f5f5f7;          /* secondary light surface */
  --ops-surface: #ffffff;           /* opaque card surface (fallback for no backdrop-filter) */
  --ops-surface-translucent: rgba(255, 255, 255, .78); /* vibrant sidebar/toolbar/widget material */
  --ops-surface-raised: #ffffff;    /* popovers, raised controls */
  --ops-panel: var(--ops-surface);  /* legacy alias, internal use only */
  --ops-line: rgba(14, 30, 42, .09);
  --ops-line-strong: rgba(14, 30, 42, .16);
  --ops-ink: #1d1d1f;
  --ops-ink-secondary: #47484c;
  --ops-muted: #6e6e73;
  --ops-muted-2: #8a8a8e;

  /* ---- muted semantic colors (distinct hues from the accent) ---- */
  --ops-ok: #1f8a4c;                 /* LOCKED name */
  --ops-ok-tint: #e6f5ec;
  --ops-warn: #a8660a;               /* LOCKED name */
  --ops-warn-tint: #fcf0dd;
  --ops-danger: #c23b34;             /* LOCKED name */
  --ops-danger-tint: #fbeae8;
  --ops-neutral-tint: #eef0f2;

  /* ---- geometry ---- */
  --ops-radius-sm: 6px;
  --ops-radius: 10px;
  --ops-radius-lg: 14px;
  --ops-radius-pill: 999px;
  --ops-sidebar-width: 236px;

  /* ---- tinted shadows (carry the brand ink hue, not pure black) ---- */
  --ops-shadow-sm: 0 1px 2px rgba(16, 38, 54, .06), 0 1px 1px rgba(16, 38, 54, .04);
  --ops-shadow: 0 10px 28px rgba(16, 38, 54, .10), 0 2px 6px rgba(16, 38, 54, .06);
  --ops-shadow-lg: 0 20px 48px rgba(16, 38, 54, .16), 0 4px 10px rgba(16, 38, 54, .08);
  --ops-shadow-accent: 0 8px 20px rgba(65, 166, 218, .28);

  /* ---- sidebar / toolbar vibrancy materials ---- */
  --ops-sidebar-bg: rgba(246, 247, 248, .72);
  --ops-sidebar-item-hover: rgba(14, 30, 42, .06);
  --ops-sidebar-item-active-shadow: 0 4px 12px rgba(65, 166, 218, .32);
  --ops-topbar-bg: rgba(255, 255, 255, .72);
  --ops-blur: blur(26px) saturate(2.1) brightness(1.02);

  /* ---- Liquid Glass: specular sheen + edge highlight for chrome/controls.
     Only --ops-glass-hi / --ops-glass-edge / --ops-glass-shade are redefined
     per theme below; the gradients/shadow composite here and recompute live
     off those three, so dark mode doesn't need to repeat the formulas. ---- */
  --ops-glass-hi: rgba(255, 255, 255, .6);
  --ops-glass-edge: rgba(255, 255, 255, .9);
  --ops-glass-shade: rgba(16, 38, 54, .08);
  --ops-glass-sheen-diag: linear-gradient(135deg, var(--ops-glass-hi) 0%, rgba(255, 255, 255, 0) 55%);
  --ops-glass-sheen-vert: linear-gradient(180deg, var(--ops-glass-hi) 0%, rgba(255, 255, 255, 0) 70%);
  --ops-glass-inset: inset 0 1px 0 var(--ops-glass-edge), inset 0 -1px 0 var(--ops-glass-shade);

  /* ---- fonts ---- */
  --ops-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  --ops-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
  --ops-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ops-blue: #41A6DA;
    --ops-accent: var(--ops-blue);
  --ops-on-accent: #071A24;
    --ops-accent-hover: #5fb6e8;
    --ops-accent-active: #3696CD;
    --ops-accent-tint: rgba(65, 166, 218, .18);
    --ops-accent-tint-strong: rgba(65, 166, 218, .28);

    --ops-navy: #f0f1f3;
    --ops-cyan: #5fc8d6;

    --ops-canvas: #1c1d20;
    --ops-canvas-2: #26272b;
    --ops-surface: #26272b;
    --ops-surface-translucent: rgba(38, 39, 43, .70);
    --ops-surface-raised: #2e2f33;
    --ops-panel: var(--ops-surface);
    --ops-line: rgba(255, 255, 255, .09);
    --ops-line-strong: rgba(255, 255, 255, .16);
    --ops-ink: #f5f5f7;
    --ops-ink-secondary: #c7c7cc;
    --ops-muted: #98989d;
    --ops-muted-2: #7c7c80;

    --ops-ok: #3fc07a;
    --ops-ok-tint: #173524;
    --ops-warn: #d9922f;
    --ops-warn-tint: #392a14;
    --ops-danger: #e2685f;
    --ops-danger-tint: #3a1f1d;
    --ops-neutral-tint: #2d2e32;

    --ops-shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
    --ops-shadow: 0 10px 28px rgba(0, 0, 0, .50), 0 2px 6px rgba(0, 0, 0, .35);
    --ops-shadow-lg: 0 24px 56px rgba(0, 0, 0, .60), 0 4px 10px rgba(0, 0, 0, .40);
    --ops-shadow-accent: 0 8px 20px rgba(65, 166, 218, .30);

    --ops-sidebar-bg: rgba(28, 29, 32, .66);
    --ops-sidebar-item-hover: rgba(255, 255, 255, .07);
    --ops-sidebar-item-active-shadow: 0 4px 14px rgba(65, 166, 218, .35);
    --ops-topbar-bg: rgba(32, 33, 37, .68);
    --ops-blur: blur(26px) saturate(1.9) brightness(1.08);

    --ops-glass-hi: rgba(255, 255, 255, .16);
    --ops-glass-edge: rgba(255, 255, 255, .26);
    --ops-glass-shade: rgba(0, 0, 0, .5);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ops-blue: #41A6DA;
  --ops-accent: var(--ops-blue);
  --ops-on-accent: #071A24;
  --ops-accent-hover: #5fb6e8;
  --ops-accent-active: #3696CD;
  --ops-accent-tint: rgba(65, 166, 218, .18);
  --ops-accent-tint-strong: rgba(65, 166, 218, .28);

  --ops-navy: #f0f1f3;
  --ops-cyan: #5fc8d6;

  --ops-canvas: #1c1d20;
  --ops-canvas-2: #26272b;
  --ops-surface: #26272b;
  --ops-surface-translucent: rgba(38, 39, 43, .70);
  --ops-surface-raised: #2e2f33;
  --ops-panel: var(--ops-surface);
  --ops-line: rgba(255, 255, 255, .09);
  --ops-line-strong: rgba(255, 255, 255, .16);
  --ops-ink: #f5f5f7;
  --ops-ink-secondary: #c7c7cc;
  --ops-muted: #98989d;
  --ops-muted-2: #7c7c80;

  --ops-ok: #3fc07a;
  --ops-ok-tint: #173524;
  --ops-warn: #d9922f;
  --ops-warn-tint: #392a14;
  --ops-danger: #e2685f;
  --ops-danger-tint: #3a1f1d;
  --ops-neutral-tint: #2d2e32;

  --ops-shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --ops-shadow: 0 10px 28px rgba(0, 0, 0, .50), 0 2px 6px rgba(0, 0, 0, .35);
  --ops-shadow-lg: 0 24px 56px rgba(0, 0, 0, .60), 0 4px 10px rgba(0, 0, 0, .40);
  --ops-shadow-accent: 0 8px 20px rgba(65, 166, 218, .30);

  --ops-sidebar-bg: rgba(28, 29, 32, .66);
  --ops-sidebar-item-hover: rgba(255, 255, 255, .07);
  --ops-sidebar-item-active-shadow: 0 4px 14px rgba(65, 166, 218, .35);
  --ops-topbar-bg: rgba(32, 33, 37, .68);
  --ops-blur: blur(26px) saturate(1.9) brightness(1.08);

  --ops-glass-hi: rgba(255, 255, 255, .16);
  --ops-glass-edge: rgba(255, 255, 255, .26);
  --ops-glass-shade: rgba(0, 0, 0, .5);

  color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ops-ink);
  background: var(--ops-canvas);
  font: 15px/1.48 var(--ops-font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ops-accent); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Accessible, visible-always focus ring — not optional. */
:focus-visible {
  outline: 2px solid var(--ops-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link { position: fixed; left: 12px; top: -80px; z-index: 99; padding: 10px 14px; border-radius: var(--ops-radius-sm); background: var(--ops-surface-raised); color: var(--ops-ink); box-shadow: var(--ops-shadow); transition: top .18s ease; }
.skip-link:focus { top: 12px; }

/* ==========================================================================
   Legacy page shell — used as-is by any page that has NOT adopted the new
   .ops-app sidebar shell (e.g. the login screen). Keep solid, unaffected by
   the vibrancy rules below.
   ========================================================================== */
.ops-shell { min-height: 100vh; background: var(--ops-canvas); }

.ops-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0 28px;
  color: #fff;
  background: var(--ops-navy);
  background: linear-gradient(180deg, #16303f, #0d2130);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: var(--ops-shadow-sm);
}
.ops-brand { display: flex; align-items: center; gap: 13px; color: #fff; text-decoration: none; }
.ops-brand img { width: 138px; height: auto; filter: brightness(0) invert(1); }
.ops-brand__division { padding-left: 13px; border-left: 1px solid rgba(255, 255, 255, .28); font: 600 12px/1.2 var(--ops-font); letter-spacing: .1em; text-transform: uppercase; }
.ops-topbar__tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ops-user { color: rgba(255, 255, 255, .78); font-size: 13px; }

/* ==========================================================================
   NEW: .ops-app — sidebar + content application shell.
   Contract for pages adopting it:
     <div class="ops-app">
       <%- include('_admin-nav', { active: 'partners', admin, csrfToken }) %>
       <main id="main" class="ops-main"> ... page content unchanged ... </main>
     </div>
   The nav partial emits two direct children of .ops-app in this order:
   <aside class="ops-sidebar"> and <header class="ops-topbar"> (slim variant).
   Grid areas below rely on that exact direct-child order.
   ========================================================================== */
.ops-app {
  display: grid;
  grid-template-columns: var(--ops-sidebar-width) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
  min-height: 100dvh;
  background: var(--ops-canvas);
}

/* NEW: .ops-sidebar — translucent macOS-style nav rail, full height, own scroll. */
.ops-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  width: var(--ops-sidebar-width);
  height: 100dvh;
  position: sticky;
  top: 0;
  padding: 14px 10px;
  background-color: var(--ops-sidebar-bg);
  background-image: var(--ops-glass-sheen-diag);
  -webkit-backdrop-filter: var(--ops-blur);
  backdrop-filter: var(--ops-blur);
  border-right: 1px solid var(--ops-line);
  box-shadow: var(--ops-glass-inset), var(--ops-shadow);
  overflow-y: auto;
}

/* NEW: .ops-sidebar__brand — logo + division label at the top of the rail.
   Two real logo assets, theme-swapped — jbt-logo.png (dark wordmark, for
   light sidebars) and jbt-logo-dark.png (light wordmark, for dark sidebars)
   — rather than filtering one asset, since a wordmark colored for one
   background is never legible on the other. */
.ops-sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 8px 10px 16px; color: var(--ops-ink); text-decoration: none; }
.ops-sidebar__brand-mark { width: 104px; height: auto; }
.ops-sidebar__brand-mark--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ops-sidebar__brand-mark--light { display: none; }
  :root:not([data-theme="light"]) .ops-sidebar__brand-mark--dark { display: block; }
}
:root[data-theme="dark"] .ops-sidebar__brand-mark--light { display: none; }
:root[data-theme="dark"] .ops-sidebar__brand-mark--dark { display: block; }
.ops-sidebar__brand .ops-brand__division { padding-left: 10px; border-left: 1px solid var(--ops-line-strong); color: var(--ops-muted); font-size: 10.5px; letter-spacing: .09em; }

/* NEW: .ops-sidebar__nav — vertical list of nav items, grouped by label. */
.ops-sidebar__nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }

/* NEW: .ops-sidebar__group-label — small caps section heading above a group of items. */
.ops-sidebar__group-label { margin: 14px 10px 6px; color: var(--ops-muted-2); font: 700 11px/1.2 var(--ops-font); letter-spacing: .08em; text-transform: uppercase; }

/* NEW: .ops-sidebar__item — a single nav row; .is-active fills with the accent. */
.ops-sidebar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--ops-radius-pill);
  color: var(--ops-ink);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease, background-image .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ops-sidebar__item:hover { background-color: var(--ops-sidebar-item-hover); }
.ops-sidebar__item:active { transform: scale(.98); }
.ops-sidebar__item.is-active {
  background-color: var(--ops-accent);
  background-image: var(--ops-glass-sheen-diag);
  color: var(--ops-on-accent);
  box-shadow: var(--ops-glass-inset), var(--ops-sidebar-item-active-shadow);
}
.ops-sidebar__item.is-active:hover { background-color: var(--ops-accent-hover); }

/* NEW: .ops-sidebar__foot — optional bottom-of-rail slot (e.g. version/meta). */
.ops-sidebar__foot { margin-top: auto; padding: 12px 10px 6px; border-top: 1px solid var(--ops-line); color: var(--ops-muted); font-size: 11.5px; }

/* NEW: vibrancy variant of .ops-topbar — ONLY applies when nested in .ops-app,
   so standalone .ops-shell > .ops-topbar pages keep the solid navy bar. */
.ops-app > .ops-topbar {
  grid-area: topbar;
  min-height: 52px;
  padding: 0 24px;
  color: var(--ops-ink);
  background-color: var(--ops-topbar-bg);
  background-image: var(--ops-glass-sheen-vert);
  -webkit-backdrop-filter: var(--ops-blur);
  backdrop-filter: var(--ops-blur);
  border-bottom: 1px solid var(--ops-line);
  box-shadow: var(--ops-glass-inset);
}
.ops-app > .ops-topbar .ops-user { color: var(--ops-muted); }

/* NEW: content column — holds <main class="ops-main"> below the slim toolbar. */
.ops-app > .ops-main,
.ops-app > main {
  grid-area: content;
  overflow-y: auto;
}

/* ==========================================================================
   Main content column
   ========================================================================== */
.ops-main { width: min(1480px, calc(100% - 48px)); margin: 0 auto; padding: 32px 0 56px; }
.ops-app .ops-main { padding-top: 26px; }
.ops-breadcrumb { display: flex; gap: 7px; align-items: center; margin-bottom: 18px; color: var(--ops-muted); font-size: 13px; }
.ops-breadcrumb a { color: inherit; }
.ops-breadcrumb span[aria-hidden] { opacity: .55; }
.ops-kicker { margin: 0 0 5px; color: var(--ops-accent); font: 700 12px/1.2 var(--ops-font); letter-spacing: .13em; text-transform: uppercase; }
.ops-title-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.ops-title-row h1 { margin: 0; color: var(--ops-ink); font: 700 clamp(26px, 3vw, 38px)/1.1 var(--ops-font-display); letter-spacing: -.02em; }
.ops-subtitle { max-width: 760px; margin: 8px 0 0; color: var(--ops-muted); font-size: 15px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.ops-btn {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--ops-radius-pill);
  background-color: var(--ops-accent);
  background-image: var(--ops-glass-sheen-diag);
  color: var(--ops-on-accent);
  font-weight: 650;
  font-size: 13.5px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--ops-glass-inset);
  transition: background-color .16s ease, box-shadow .16s ease, transform .12s ease, border-color .16s ease, opacity .16s ease;
}
.ops-btn:hover { background-color: var(--ops-accent-hover); box-shadow: var(--ops-glass-inset), var(--ops-shadow-accent); transform: translateY(-1px); }
.ops-btn:active { background-color: var(--ops-accent-active); transform: translateY(0) scale(.98); box-shadow: var(--ops-glass-inset); }
.ops-btn--quiet { border-color: rgba(255, 255, 255, .3); background-color: transparent; background-image: none; box-shadow: none; }
.ops-btn--quiet:hover { background-color: rgba(255, 255, 255, .12); box-shadow: none; }
.ops-app > .ops-topbar .ops-btn--quiet { border-color: var(--ops-line-strong); color: var(--ops-ink); }
.ops-app > .ops-topbar .ops-btn--quiet:hover { background-color: var(--ops-sidebar-item-hover); }
.ops-btn--secondary {
  border-color: var(--ops-line-strong);
  background-color: var(--ops-surface-translucent);
  background-image: var(--ops-glass-sheen-diag);
  color: var(--ops-ink);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
  backdrop-filter: blur(16px) saturate(1.7);
}
.ops-btn--secondary:hover { background-color: var(--ops-canvas-2); box-shadow: var(--ops-glass-inset), var(--ops-shadow-sm); }
.ops-btn--secondary:active { background-color: var(--ops-canvas-2); transform: translateY(0) scale(.98); }
.ops-btn--danger { color: #fff; background-color: var(--ops-danger); background-image: var(--ops-glass-sheen-diag); }
.ops-btn--danger:hover { background-color: var(--ops-danger); filter: brightness(1.08); box-shadow: var(--ops-glass-inset), 0 8px 20px rgba(194, 59, 52, .3); }
.ops-btn--small { min-height: 30px; padding: 5px 12px; font-size: 12.5px; }
.ops-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ==========================================================================
   NEW: .ops-widget look for .ops-metric — translucent card, dot indicator,
   tabular-nums value. Class name/DOM is unchanged from the original markup.
   ========================================================================== */
.ops-metrics { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.ops-metric {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 104px;
  padding: 16px 18px;
  border: 1px solid var(--ops-line);
  border-radius: var(--ops-radius-lg);
  background-color: var(--ops-surface-translucent);
  background-image: var(--ops-glass-sheen-diag);
  -webkit-backdrop-filter: blur(18px) saturate(1.9);
  backdrop-filter: blur(18px) saturate(1.9);
  box-shadow: var(--ops-glass-inset), var(--ops-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ops-metric:hover { transform: translateY(-2px); box-shadow: var(--ops-glass-inset), var(--ops-shadow); }
.ops-metric::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--metric, var(--ops-accent));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--metric, var(--ops-accent)) 16%, transparent);
}
.ops-metric__label { color: var(--ops-muted); font: 700 11px/1.2 var(--ops-font); letter-spacing: .09em; text-transform: uppercase; }
.ops-metric__value { display: block; color: var(--ops-ink); font: 700 30px/1 var(--ops-font-mono); font-variant-numeric: tabular-nums; }
.ops-metric__note { display: block; color: var(--ops-muted); font-size: 12px; }

/* ==========================================================================
   Panels / toolbars / fields
   ========================================================================== */
.ops-panel { border: 1px solid var(--ops-line); border-radius: var(--ops-radius-lg); background: var(--ops-surface); box-shadow: var(--ops-shadow-sm); }
.ops-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(160px, 220px)); gap: 10px; padding: 14px; border-bottom: 1px solid var(--ops-line); }
.ops-field { display: grid; gap: 5px; }
.ops-field label { color: var(--ops-muted); font-size: 12px; font-weight: 650; }

/* .ops-input / .ops-textarea stay opaque — free-text content, not chrome;
   legibility while typing wins over the glass treatment used on controls. */
.ops-input, .ops-textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--ops-line-strong);
  border-radius: var(--ops-radius-sm);
  background: var(--ops-surface);
  color: var(--ops-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ops-input:focus, .ops-textarea:focus { border-color: var(--ops-accent); box-shadow: 0 0 0 3px var(--ops-accent-tint); outline: none; }

/* .ops-select IS a control (native picker) — glass pill, custom chevron. */
.ops-select {
  width: 100%;
  min-height: 38px;
  padding: 8px 32px 8px 11px;
  border: 1px solid var(--ops-line-strong);
  border-radius: var(--ops-radius-pill);
  color: var(--ops-ink);
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--ops-surface-translucent);
  background-image: var(--ops-glass-sheen-diag),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, right 11px center;
  background-size: auto, 15px;
  -webkit-backdrop-filter: blur(14px) saturate(1.7);
  backdrop-filter: blur(14px) saturate(1.7);
  box-shadow: var(--ops-glass-inset);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ops-select:focus { border-color: var(--ops-accent); box-shadow: var(--ops-glass-inset), 0 0 0 3px var(--ops-accent-tint); outline: none; }

/* Search field is also a control — glass pill, same sheen. */
.ops-search { position: relative; }
.ops-search .ops-input {
  padding-left: 36px;
  border-radius: var(--ops-radius-pill);
  background-color: var(--ops-surface-translucent);
  background-image: var(--ops-glass-sheen-diag);
  -webkit-backdrop-filter: blur(14px) saturate(1.7);
  backdrop-filter: blur(14px) saturate(1.7);
  box-shadow: var(--ops-glass-inset);
}
.ops-search::before { content: "⌕"; position: absolute; left: 13px; bottom: 7px; color: var(--ops-muted); font: 20px/1 serif; transform: rotate(-16deg); }

/* ==========================================================================
   NEW: .ops-table styled as a macOS grouped-list / Settings table.
   Markup is a real <table>; only the visual treatment changes.
   ========================================================================== */
.ops-table-wrap { overflow-x: auto; border-radius: var(--ops-radius-lg); }
.ops-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ops-table th { padding: 11px 14px; color: var(--ops-muted); background: var(--ops-canvas-2); border-bottom: 1px solid var(--ops-line); font: 700 11px/1.2 var(--ops-font); letter-spacing: .07em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.ops-table td { padding: 13px 14px; border-bottom: 1px solid var(--ops-line); vertical-align: middle; }
.ops-table tbody tr { transition: background-color .12s ease; }
.ops-table tbody tr:hover { background: var(--ops-accent-tint); }
.ops-table tbody tr:last-child td { border-bottom: 0; }
.ops-company { display: grid; gap: 2px; min-width: 190px; }
.ops-company a { color: var(--ops-ink); font-weight: 650; text-decoration: none; }
.ops-company a:hover { color: var(--ops-accent); text-decoration: underline; }
.ops-company small { color: var(--ops-muted); }
.ops-actions { display: flex; justify-content: flex-end; gap: 7px; }

/* ==========================================================================
   Status pills — every modifier used anywhere in the app, plus a sane
   neutral default so an unrecognized `ops-status--<value>` never renders
   unstyled.
   ========================================================================== */
.ops-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--ops-radius-pill);
  background: var(--ops-neutral-tint);
  color: var(--ops-muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.ops-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ops-status--ready, .ops-status--verified, .ops-status--active { color: var(--ops-ok); background: var(--ops-ok-tint); }
.ops-status--attention, .ops-status--pending, .ops-status--draft_ready { color: var(--ops-warn); background: var(--ops-warn-tint); }
.ops-status--blocked, .ops-status--failed, .ops-status--expired, .ops-status--missing, .ops-status--revoked { color: var(--ops-danger); background: var(--ops-danger-tint); }
.ops-status--neutral, .ops-status--waived, .ops-status--not_required, .ops-status--none { color: var(--ops-muted); background: var(--ops-neutral-tint); }
.ops-status--sent { color: var(--ops-accent); background: var(--ops-accent-tint); }

/* ==========================================================================
   Progress
   ========================================================================== */
.ops-progress { min-width: 138px; }
.ops-progress__meta { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; color: var(--ops-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ops-progress__track { height: 6px; overflow: hidden; border-radius: var(--ops-radius-pill); background: var(--ops-line-strong); }
.ops-progress__bar { height: 100%; width: var(--progress, 0%); border-radius: inherit; background: var(--bar, var(--ops-accent)); transition: width .2s ease; }

/* ==========================================================================
   Empty states
   ========================================================================== */
.ops-empty { padding: 54px 24px; text-align: center; }
.ops-empty__mark { display: grid; width: 52px; height: 52px; place-items: center; margin: 0 auto 14px; border: 2px solid var(--ops-line-strong); border-radius: var(--ops-radius); color: var(--ops-accent); font: 700 22px/1 var(--ops-font-display); }
.ops-empty h2 { margin: 0 0 5px; color: var(--ops-ink); font-size: 19px; }
.ops-empty p { margin: 0; color: var(--ops-muted); }

/* ==========================================================================
   Detail layout
   ========================================================================== */
.ops-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.ops-detail-card { padding: 18px; }
.ops-detail-card h2 { margin: 0; color: var(--ops-ink); font: 700 18px/1.2 var(--ops-font-display); }
.ops-detail-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ops-line); }
.ops-definition { display: grid; grid-template-columns: 140px 1fr; gap: 9px 14px; margin: 16px 0 0; }
.ops-definition dt { color: var(--ops-muted); }
.ops-definition dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ops-side-stack { display: grid; gap: 14px; }
.ops-callout { padding: 16px; border-left: 3px solid var(--callout, var(--ops-accent)); border-radius: var(--ops-radius); background: var(--ops-surface); }
.ops-callout h2 { margin: 0 0 5px; font-size: 15px; }
.ops-callout p { margin: 0; color: var(--ops-muted); font-size: 13px; }
.ops-callout--danger { --callout: var(--ops-danger); }
.ops-callout--ok { --callout: var(--ops-ok); }

/* ==========================================================================
   Checklist categories
   ========================================================================== */
.ops-category { margin-top: 14px; border: 1px solid var(--ops-line); border-radius: var(--ops-radius); background: var(--ops-surface); overflow: hidden; }
.ops-category[open] { box-shadow: var(--ops-shadow-sm); }
.ops-category summary { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 13px 16px; cursor: pointer; list-style: none; transition: background-color .12s ease; }
.ops-category summary:hover { background: var(--ops-canvas-2); }
.ops-category summary::-webkit-details-marker { display: none; }
.ops-category summary::after { content: "+"; color: var(--ops-accent); font-size: 18px; font-weight: 500; }
.ops-category[open] summary::after { content: "−"; }
.ops-category__name { color: var(--ops-ink); font-weight: 700; }
.ops-category__count { color: var(--ops-muted); font-size: 12px; }
.ops-checklist { border-top: 1px solid var(--ops-line); }
.ops-check { display: grid; grid-template-columns: minmax(180px, 1fr) 130px minmax(150px, .7fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--ops-line); scroll-margin-top: 100px; }
.ops-check:last-child { border-bottom: 0; }
.ops-check__label { font-weight: 600; }
.ops-check__meta { color: var(--ops-muted); font-size: 12px; overflow-wrap: anywhere; }
.ops-check__evidence { overflow-wrap: anywhere; }
.ops-check details[open] { grid-column: 1 / -1; }
.ops-check details form { min-width: 0 !important; }

/* ==========================================================================
   Notices / utility
   ========================================================================== */
.ops-notice { margin-bottom: 16px; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--ops-accent) 35%, var(--ops-line-strong)); border-radius: var(--ops-radius); background: var(--ops-accent-tint); color: var(--ops-ink); }
.ops-notice--error { border-color: color-mix(in srgb, var(--ops-danger) 45%, var(--ops-line-strong)); background: var(--ops-danger-tint); color: var(--ops-ink); }
.ops-results-note { padding: 10px 14px; color: var(--ops-muted); font-size: 12px; border-bottom: 1px solid var(--ops-line); }
.ops-hidden { display: none !important; }
.ops-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; }

/* ==========================================================================
   Secondary nav / misc existing components
   ========================================================================== */
.ops-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; padding: 8px; border: 1px solid var(--ops-line); border-radius: var(--ops-radius); background: var(--ops-surface); }
.ops-nav a { padding: 8px 13px; border-radius: var(--ops-radius-sm); color: var(--ops-ink); text-decoration: none; font-weight: 650; transition: background-color .12s ease, color .12s ease; }
.ops-nav a:hover { background: var(--ops-canvas-2); }
.ops-nav a[aria-current="page"] { background: var(--ops-accent); color: var(--ops-on-accent); }
.ops-button-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ops-button-row form { margin: 0; }
.ops-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.ops-form-grid .full { grid-column: 1 / -1; }
.ops-section { scroll-margin-top: 96px; margin-bottom: 22px; }
.ops-muted { color: var(--ops-muted); font-size: 13px; }
.ops-activity { list-style: none; padding: 0; margin: 16px 0 0; }
.ops-activity li { padding: 12px 0 12px 18px; border-left: 2px solid var(--ops-line); overflow-wrap: anywhere; }
.ops-activity strong, .ops-activity time { display: block; }
.ops-activity time { font-size: 12px; color: var(--ops-muted); font-variant-numeric: tabular-nums; }
.ops-integration { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 18px; border-radius: var(--ops-radius); background: var(--ops-accent-tint); border-left: 3px solid var(--ops-accent); }
.ops-sign-request { padding: 15px 0; border-bottom: 1px solid var(--ops-line); }
.ops-sign-request:last-child { border-bottom: 0; }
.ops-sign-recipients { list-style: none; padding: 0; margin: 12px 0; }
.ops-sign-recipients li { padding: 8px 0; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .ops-form-grid { grid-template-columns: 1fr; }
  .ops-nav a { flex: 1 1 auto; text-align: center; }
  .ops-button-row { width: 100%; }
  .ops-button-row > * { flex: 1 1 auto; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1050px) {
  .ops-metrics { grid-template-columns: repeat(3, 1fr); }
  .ops-detail-grid { grid-template-columns: 1fr; }
  .ops-side-stack { grid-template-columns: repeat(2, 1fr); }
  .ops-app { grid-template-columns: 1fr; grid-template-areas: "topbar" "content"; }
  .ops-sidebar { display: none; } /* rail collapses below this width; page-level agents may wire a toggle later */
}
@media (max-width: 760px) {
  .ops-topbar { padding: 0 16px; }
  .ops-brand img { width: 112px; }
  .ops-brand__division, .ops-user { display: none; }
  .ops-app > .ops-topbar .ops-user { display: none; }
  .ops-main { width: min(100% - 24px, 1480px); padding-top: 22px; }
  .ops-title-row { display: grid; align-items: start; }
  .ops-title-row .ops-btn { width: 100%; }
  .ops-metrics { grid-template-columns: repeat(2, 1fr); }
  .ops-toolbar { grid-template-columns: 1fr; }
  .ops-side-stack { grid-template-columns: 1fr; }
  .ops-definition { grid-template-columns: 1fr; gap: 2px; }
  .ops-definition dd { margin-bottom: 8px; }
  .ops-check { grid-template-columns: 1fr auto; }
  .ops-check__meta, .ops-check__evidence { grid-column: 1 / -1; }
  .ops-table-wrap { overflow: visible; }
  .ops-table, .ops-table tbody { display: block; }
  .ops-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .ops-table tr { display: block; margin: 12px; padding: 12px; border: 1px solid var(--ops-line); border-left: 3px solid var(--ops-accent); border-radius: var(--ops-radius); background: var(--ops-surface); }
  .ops-table td { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ops-line); }
  .ops-table td::before { content: attr(data-label); color: var(--ops-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .ops-table td:last-child { border-bottom: 0; }
  .ops-actions { justify-content: flex-start; }
}
@media (max-width: 460px) {
  .ops-metrics { grid-template-columns: 1fr; }
  .ops-metric { min-height: 92px; }
  .ops-topbar__tools .ops-btn { padding: 7px 9px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Work-order forms reuse the admin field system; scoped to avoid other screens. */
.ops-work-orders .ops-field { min-width: 0; margin-block: 12px; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.5; }
.ops-work-orders .ops-form-grid { gap: 16px 24px; margin-block: 16px; align-items: start; }
.ops-work-orders .ops-form-grid .ops-field { margin: 0; }
.ops-work-orders .ops-input, .ops-work-orders .ops-textarea { display: block; box-sizing: border-box; min-width: 0; min-height: 44px; font: inherit; font-weight: 400; }
.ops-work-orders .ops-textarea { resize: vertical; min-height: 84px; }
.ops-work-orders details { margin-block: 20px; padding: 16px; border: 1px solid var(--ops-line-strong); border-radius: var(--ops-radius-sm); }
.ops-work-orders summary { cursor: pointer; font-weight: 650; line-height: 1.5; min-height: 28px; }
.ops-work-orders summary:focus-visible { outline: 3px solid #41A6DA; outline-offset: 4px; border-radius: 4px; }
.ops-work-orders fieldset { min-width: 0; margin-block: 20px; padding: 16px; border: 1px solid var(--ops-line-strong); border-radius: var(--ops-radius-sm); }
.ops-work-orders legend { padding-inline: 8px; font-weight: 650; }
.ops-work-orders .ops-work-checkbox { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.ops-work-orders .ops-work-checkbox input { flex: 0 0 auto; width: 20px; height: 20px; accent-color: #143A4E; }
.ops-work-orders form > .ops-btn { margin: 8px 8px 0 0; }
.ops-work-orders dd { margin: 4px 0 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .ops-work-orders .ops-form-grid { grid-template-columns: minmax(0, 1fr); }
  .ops-work-orders details, .ops-work-orders fieldset { padding: 12px; }
  .ops-work-orders form > .ops-btn { width: 100%; margin-inline: 0; white-space: normal; }
}