/* =============================================================================
   OdsPanel — "Instrument" design layer
   Structure from hairlines and alignment. Color only where it means something.
   Loaded after Bootstrap 5; overrides it through tokens.
   ========================================================================== */

/* ---- 1. Tokens ------------------------------------------------------------ */
:root {
  color-scheme: light;
  /* neutral ramp */
  --n-0:#ffffff; --n-25:#fafbfc; --n-50:#f5f6f8; --n-100:#eceef1; --n-200:#e0e3e8;
  --n-300:#cbd0d8; --n-400:#656c77; --n-500:#5f6672; --n-600:#4b5158; --n-900:#15171c;

  --canvas:#f6f7fb; --surface:var(--n-0); --surface-2:var(--n-50); --surface-3:var(--n-100);
  --line:var(--n-200); --line-strong:var(--n-300);
  --ink:var(--n-900); --ink-2:var(--n-600); --ink-muted:var(--n-500); --ink-faint:var(--n-400);

  --ac:#5a3ff0; --ac-hover:#4a31d6; --ac-bright:#8a72ff; --ac-ink:#4a31d6;
  --ac-tint:rgba(90,63,240,.09); --ac-ring:rgba(90,63,240,.30);

  /* the rail is its own small dark world; it keeps its colours in either theme */
  --rail-bg:#14161e; --rail-ink:#8b93a6; --rail-ink-strong:#e6e9f2;
  --rail-hover:rgba(255,255,255,.07); --rail-active:rgba(255,255,255,.13); --rail-line:rgba(255,255,255,.12);
  --ok:#126b33; --ok-tint:rgba(18,107,51,.10);
  --warn:#9a4708; --warn-tint:rgba(154,71,8,.11);
  --err:#c0271d; --err-tint:rgba(192,39,29,.10);

  /* the primary action is the accent; it is the one filled thing on a page */
  --btn-ink-bg:var(--ac); --btn-ink-fg:#ffffff; --btn-ink-hover:var(--ac-hover);

  --sh-1:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --sh-2:0 2px 4px -1px rgba(16,24,40,.05), 0 4px 12px -2px rgba(16,24,40,.08);
  --sh-pop:0 12px 32px -8px rgba(16,24,40,.20), 0 3px 8px rgba(16,24,40,.07);

  /* the mark and the wordmark: one colour, one script face, in both themes */
  --brand:#008374; --brand-hover:#00695d; --brand-ink:#ffffff;

  --font:"Inter var","Inter",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --font-brand:"Brush Script MT","Brush Script Std","Segoe Script","Bradley Hand","Lucida Handwriting",cursive;
  --mono:"JetBrains Mono","SFMono-Regular",ui-monospace,Consolas,"Liberation Mono",monospace;

  --fs-11:.6875rem; --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem;
  --fs-16:1rem; --fs-20:1.25rem; --fs-26:1.625rem;

  --r-ctl:7px; --r-box:10px;
  --rail-w:60px; --side-w:230px; --top-h:56px;
  --dur:140ms; --ease:cubic-bezier(.32,.72,.35,1);

  /* Bootstrap bridge */
  --bs-body-bg:var(--canvas); --bs-body-color:var(--ink); --bs-border-color:var(--line);
  --bs-body-font-size:var(--fs-13); --bs-border-radius:var(--r-ctl);
  --bs-primary:var(--ac); --bs-primary-rgb:90,63,240; --bs-link-color:var(--ac); --bs-link-hover-color:var(--ac-hover);
  --bs-font-sans-serif:var(--font); --bs-font-monospace:var(--mono);
  --bs-emphasis-color:var(--ink); --bs-secondary-color:var(--ink-muted);
  --bs-tertiary-bg:var(--surface-2); --bs-secondary-bg:var(--surface-2);
}
[data-bs-theme="dark"] {
  color-scheme: dark;
  --n-0:#16181c; --n-25:#15171b; --n-50:#101216; --n-100:#1c1f24; --n-200:#282c33;
  --n-300:#363b44; --n-400:#878e99; --n-500:#969ca6; --n-600:#c2c7ce; --n-900:#e8eaed;

  --canvas:#0e1016; --surface:#16181c; --surface-2:#1b1e23; --surface-3:#23272e;
  --line:#262a31; --line-strong:#343941;
  --ink:#e8eaed; --ink-2:#c2c7ce; --ink-muted:#a2aab4; --ink-faint:#8a919b;

  --ac:#8a72ff; --ac-hover:#a08fff; --ac-bright:#a08fff; --ac-ink:#a99bff;
  --ac-tint:rgba(138,114,255,.16); --ac-ring:rgba(138,114,255,.38);
  --rail-bg:#0b0d13; --rail-ink:#7f8799; --rail-ink-strong:#e6e9f2;
  --rail-hover:rgba(255,255,255,.07); --rail-active:rgba(255,255,255,.13); --rail-line:rgba(255,255,255,.11);
  --ok:#4ade80; --ok-tint:rgba(74,222,128,.13);
  --warn:#fbbf24; --warn-tint:rgba(251,191,36,.14);
  --err:#f87171; --err-tint:rgba(248,113,113,.14);

  --btn-ink-bg:#6d55ff; --btn-ink-fg:#ffffff; --btn-ink-hover:#7f69ff;
  --sh-1:0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.30);
  --sh-2:0 2px 4px -1px rgba(0,0,0,.4), 0 4px 12px -2px rgba(0,0,0,.45);
  --sh-pop:0 10px 30px -8px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.4);
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ---- 2. Base -------------------------------------------------------------- */
html { font-size:16px; -webkit-text-size-adjust:100%; }
body.ods {
  font-family:var(--font); font-size:var(--fs-13); line-height:1.5;
  background:var(--canvas); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6 { font-weight:600; letter-spacing:-.011em; color:var(--ink); }
h5 { font-size:var(--fs-14); }
a { color:var(--ac); text-decoration:none; }
a:hover { color:var(--ac-hover); text-decoration:underline; text-underline-offset:2px; }
hr { border-color:var(--line); opacity:1; }
.font-monospace,code,pre,.mono { font-family:var(--mono); font-size:.92em; font-variant-ligatures:none; }
.num,.stat-val { font-variant-numeric:tabular-nums; }
.text-muted { color:var(--ink-muted) !important; }
.small { font-size:var(--fs-12); }
code { color:var(--ink-2); background:var(--surface-3); padding:.12em .34em; border-radius:4px; }
::selection { background:var(--ac-tint); }

:focus-visible { outline:2px solid var(--ac); outline-offset:2px; border-radius:4px; }
.skip-link { position:absolute; left:-9999px; top:8px; z-index:3000; background:var(--ink); color:var(--surface);
  padding:.5rem .8rem; border-radius:var(--r-ctl); font-size:var(--fs-13); }
.skip-link:focus { left:8px; }

/* ---- 3. Shell ------------------------------------------------------------- */
/* Three columns. A dark rail carries the four areas of the product, a light panel
   carries the pages inside the area the rail selects, and the rest is work surface.
   Eighteen links in one flat list made every page look equally likely; this way the
   rail answers "where am I" and the panel answers "what is here". */
.ods-shell { display:flex; min-height:100vh; background:var(--rail-bg); }
/* rail and panel travel as one unit: side by side on a desktop, one drawer on a phone */
.ods-drawer { display:flex; flex:0 0 auto; }

/* rail ---------------------------------------------------------------------- */
.ods-rail {
  width:var(--rail-w); flex:0 0 auto; position:sticky; top:0; height:100vh; z-index:1041;
  background:var(--rail-bg); color:var(--rail-ink);
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  padding:.7rem .5rem .6rem;
}
.rail-brand { display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  background:var(--brand); color:var(--brand-ink); margin-bottom:.5rem; flex:0 0 auto; }
.rail-brand:hover { background:var(--brand-hover); color:var(--brand-ink); }
.rail-brand .brand-mark { width:21px; height:21px; }
.rail-group {
  position:relative; width:40px; height:40px; border:0; background:transparent; cursor:pointer;
  display:grid; place-items:center; border-radius:11px; color:var(--rail-ink); font-size:1.06rem;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ods-rail a.rail-group:hover { text-decoration:none; }
.rail-group:hover { background:var(--rail-hover); color:var(--rail-ink-strong); }
.rail-group.active { background:var(--rail-active); color:#fff; }
.rail-group.active::before { content:""; position:absolute; left:-8px; top:9px; bottom:9px; width:3px;
  border-radius:0 3px 3px 0; background:var(--ac-bright); }
.rail-group:focus-visible { outline:2px solid var(--ac-bright); outline-offset:2px; }
.rail-sep { width:22px; height:1px; background:var(--rail-line); margin:.45rem 0; flex:0 0 auto; }
.rail-foot { margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:.25rem; }
.rail-avatar { width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  background:var(--rail-active); color:#fff; font-size:var(--fs-12); font-weight:600;
  border:1px solid var(--rail-line); }
.rail-avatar:hover { text-decoration:none; color:#fff; border-color:var(--rail-ink); }

/* panel --------------------------------------------------------------------- */
.ods-side {
  width:var(--side-w); flex:0 0 auto; position:sticky; top:0; height:100vh; z-index:1040;
  display:flex; flex-direction:column; background:var(--surface); border-right:1px solid var(--line);
}
.ods-brand { display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  min-height:var(--top-h); padding:0 .5rem 0 .85rem; border-bottom:1px solid var(--line); }
.brand-link { display:flex; align-items:center; color:var(--ink); font-weight:600;
  font-size:var(--fs-14); letter-spacing:-.014em; min-width:0; }
.brand-link:hover { color:var(--ink); text-decoration:none; }
.brand-link .host { font-size:var(--fs-11); font-weight:400; color:var(--ink-faint);
  letter-spacing:0; line-height:1.2; font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; }

.ods-nav { flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:.6rem .55rem 1rem; }
.ods-nav .nav-section { font-size:var(--fs-11); font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-faint); padding:.85rem .55rem .35rem; }
.ods-nav .nav-section:first-child { padding-top:.15rem; }
.ods-nav .nav-item { position:relative; display:flex; align-items:center; gap:.6rem;
  height:34px; padding:0 .55rem; border-radius:8px; color:var(--ink-2); font-size:var(--fs-13);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.ods-nav .nav-item i { width:1.05rem; font-size:.95rem; text-align:center; color:var(--ink-faint);
  transition:color var(--dur) var(--ease); }
.ods-nav .nav-item:hover { background:var(--surface-2); color:var(--ink); text-decoration:none; }
.ods-nav .nav-item:hover i { color:var(--ink-2); }
.ods-nav .nav-item.active { background:var(--ac-tint); color:var(--ac-ink); font-weight:550; }
.ods-nav .nav-item.active i { color:var(--ac-ink); }

.ods-side-foot { padding:.5rem .55rem; border-top:1px solid var(--line); display:flex; align-items:center; gap:.4rem; }
.ods-powered { padding:0 .8rem .7rem; font-size:var(--fs-11); color:var(--ink-faint); }
.ods-powered a { color:var(--ink-muted); }
.ods-powered a:hover { color:var(--ink); text-decoration:none; }
.user-chip { display:flex; align-items:center; gap:.55rem; min-width:0; flex:1 1 auto; }
.user-chip .who { font-size:var(--fs-13); font-weight:500; line-height:1.25; }
.user-chip .role { font-size:var(--fs-11); color:var(--ink-muted); line-height:1.25; }
.avatar { width:26px; height:26px; flex:0 0 auto; border-radius:8px; display:grid; place-items:center;
  background:var(--ac-tint); color:var(--ac-ink); font-size:var(--fs-12); font-weight:600; }
.ods-backdrop { position:fixed; inset:0; background:rgba(7,10,18,.5); z-index:1035; }

/* work surface -------------------------------------------------------------- */
.ods-body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; background:var(--canvas); }
.ods-top { min-height:var(--top-h); display:flex; align-items:center; gap:.4rem; padding:0 1.15rem;
  background:var(--canvas); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:1020; }
.top-title { font-size:var(--fs-13); font-weight:600; color:var(--ink-2); letter-spacing:-.006em;
  font-family:var(--mono); }
.top-host-icon { color:var(--ink-faint); font-size:.95rem; }
.ods-main { padding:1.35rem 1.15rem 4rem; width:100%; max-width:1560px; }

/* ---- 4. Controls ---------------------------------------------------------- */
.btn {
  --bs-btn-font-size:var(--fs-13); --bs-btn-font-weight:500; --bs-btn-border-radius:var(--r-ctl);
  --bs-btn-padding-y:.375rem; --bs-btn-padding-x:.7rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:32px;
  white-space:nowrap;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn i { font-size:.95em; line-height:1; }
.btn:focus-visible { outline:2px solid var(--ac); outline-offset:1px; box-shadow:none; }
.btn-sm,.btn-group-sm > .btn { --bs-btn-font-size:var(--fs-12); --bs-btn-padding-y:.25rem; --bs-btn-padding-x:.55rem; min-height:28px; }
.btn-lg { --bs-btn-font-size:var(--fs-14); min-height:38px; }
.btn:disabled,.btn.disabled { opacity:.5; }

.btn-primary { --bs-btn-bg:var(--btn-ink-bg); --bs-btn-border-color:var(--btn-ink-bg); --bs-btn-color:var(--btn-ink-fg);
  --bs-btn-hover-bg:var(--btn-ink-hover); --bs-btn-hover-border-color:var(--btn-ink-hover); --bs-btn-hover-color:var(--btn-ink-fg);
  --bs-btn-active-bg:var(--btn-ink-hover); --bs-btn-active-border-color:var(--btn-ink-hover); --bs-btn-active-color:var(--btn-ink-fg);
  --bs-btn-disabled-bg:var(--btn-ink-bg); --bs-btn-disabled-border-color:var(--btn-ink-bg); --bs-btn-disabled-color:var(--btn-ink-fg); }
.btn-outline-secondary,.btn-secondary { --bs-btn-color:var(--ink-2); --bs-btn-bg:var(--surface); --bs-btn-border-color:var(--line-strong);
  --bs-btn-hover-bg:var(--surface-2); --bs-btn-hover-border-color:var(--line-strong); --bs-btn-hover-color:var(--ink);
  --bs-btn-active-bg:var(--surface-3); --bs-btn-active-border-color:var(--line-strong); --bs-btn-active-color:var(--ink);
  --bs-btn-disabled-color:var(--ink-faint); --bs-btn-disabled-bg:var(--surface); --bs-btn-disabled-border-color:var(--line); }
.btn-outline-primary { --bs-btn-color:var(--ac); --bs-btn-bg:transparent; --bs-btn-border-color:var(--line-strong);
  --bs-btn-hover-bg:var(--ac-tint); --bs-btn-hover-border-color:var(--ac); --bs-btn-hover-color:var(--ac);
  --bs-btn-active-bg:var(--ac-tint); --bs-btn-active-border-color:var(--ac); --bs-btn-active-color:var(--ac); }
.btn-outline-danger { --bs-btn-color:var(--err); --bs-btn-bg:transparent; --bs-btn-border-color:var(--line-strong);
  --bs-btn-hover-bg:var(--err-tint); --bs-btn-hover-border-color:var(--err); --bs-btn-hover-color:var(--err);
  --bs-btn-active-bg:var(--err-tint); --bs-btn-active-border-color:var(--err); --bs-btn-active-color:var(--err); }
.btn-danger { --bs-btn-bg:var(--err); --bs-btn-color:#fff; --bs-btn-border-color:var(--err);
  --bs-btn-hover-bg:var(--err); --bs-btn-hover-color:#fff; --bs-btn-hover-border-color:var(--err);
  --bs-btn-active-bg:var(--err); --bs-btn-active-color:#fff; --bs-btn-active-border-color:var(--err); }
.btn-light,.btn-outline-light { --bs-btn-color:var(--ink-2); --bs-btn-bg:var(--surface); --bs-btn-border-color:var(--line-strong);
  --bs-btn-hover-bg:var(--surface-2); --bs-btn-hover-color:var(--ink); --bs-btn-hover-border-color:var(--line-strong); }
.btn-link { --bs-btn-color:var(--ac); --bs-btn-hover-color:var(--ac-hover); text-decoration:none; }
.btn-quiet { border:1px solid transparent; background:transparent; color:var(--ink-muted);
  --bs-btn-color:var(--ink-muted); --bs-btn-bg:transparent; --bs-btn-border-color:transparent;
  --bs-btn-hover-bg:var(--surface-2); --bs-btn-hover-color:var(--ink); --bs-btn-hover-border-color:transparent; }

.btn-icon { width:32px; height:32px; display:inline-grid; place-items:center; border:0; background:transparent;
  color:var(--ink-muted); border-radius:var(--r-ctl); font-size:1rem; cursor:pointer; flex:0 0 auto;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.btn-icon:hover { background:var(--surface-2); color:var(--ink); text-decoration:none; }
.btn-icon:focus-visible { outline:2px solid var(--ac); outline-offset:1px; }

/* busy state driven by app.js */
.btn[aria-busy="true"] { position:relative; color:transparent !important; pointer-events:none; }
.btn[aria-busy="true"]::after { content:""; position:absolute; width:13px; height:13px; border-radius:50%;
  border:2px solid var(--ink-2); border-top-color:transparent; animation:ods-spin .6s linear infinite; }
.btn-primary[aria-busy="true"]::after { border-color:var(--btn-ink-fg); border-top-color:transparent; }
@keyframes ods-spin { to { transform:rotate(360deg); } }

/* ---- 5. Forms ------------------------------------------------------------- */
.form-label { font-size:var(--fs-12); font-weight:500; color:var(--ink-2); margin-bottom:.25rem; }
.form-control,.form-select {
  min-height:32px; padding:.3rem .55rem; font-size:var(--fs-13); border-radius:var(--r-ctl);
  background:var(--surface); color:var(--ink); border:1px solid var(--line-strong);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-control::placeholder { color:var(--ink-faint); }
.form-control:hover:not(:focus),.form-select:hover:not(:focus) { border-color:var(--ink-faint); }
.form-control:focus,.form-select:focus { border-color:var(--ac); box-shadow:0 0 0 3px var(--ac-ring); outline:0; }
.form-control:disabled,.form-select:disabled,.form-control[readonly] { background:var(--surface-2); color:var(--ink-muted); }
.form-control-sm,.form-select-sm { min-height:28px; font-size:var(--fs-12); padding:.2rem .45rem; }
textarea.form-control { min-height:auto; line-height:1.5; }
.form-text { font-size:var(--fs-11); color:var(--ink-muted); margin-top:.25rem; }
.form-check-input { border-color:var(--line-strong); background-color:var(--surface); }
.form-check-input:checked { background-color:var(--ac); border-color:var(--ac); }
.form-check-input:focus { border-color:var(--ac); box-shadow:0 0 0 3px var(--ac-ring); }
.form-check-label { font-size:var(--fs-13); color:var(--ink-2); }
.input-group .btn { border-color:var(--line-strong); }
.input-group-text { background:var(--surface-2); border-color:var(--line-strong); color:var(--ink-muted); font-size:var(--fs-12); }
.was-validated .form-control:invalid,.form-control.is-invalid { border-color:var(--err); }
.invalid-feedback { font-size:var(--fs-11); color:var(--err); }

/* ---- 6. Page chrome, cards, tables --------------------------------------- */
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-bottom:1.15rem; }
.page-title { font-size:var(--fs-20); font-weight:650; letter-spacing:-.021em; margin:0; line-height:1.2; }
.page-sub { margin:.3rem 0 0; font-size:var(--fs-12); color:var(--ink-muted); }
.page-actions { display:flex; align-items:center; gap:.5rem; }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-box);
  box-shadow:var(--sh-1); }
.card-header { background:transparent; border-bottom:1px solid var(--line); padding:.75rem .95rem;
  font-size:var(--fs-13); font-weight:600; color:var(--ink); letter-spacing:-.008em;
  min-height:44px; display:flex; align-items:center; gap:.5rem; }
.card-header .btn-sm { margin:-.2rem 0; }
.card-body { padding:1rem .95rem; }
.card-footer { background:var(--surface-2); border-top:1px solid var(--line); padding:.65rem .95rem;
  font-size:var(--fs-12); color:var(--ink-muted); }
.card > .card-body:first-child { border-top-left-radius:var(--r-box); border-top-right-radius:var(--r-box); }

/* Tables carry most of this product, so they get the attention: a quiet header that reads
   as a label rather than a row, room enough to scan a hostname without squinting, and the
   per-row controls held back until the row is under the pointer — present, but not eleven
   competing outlines down the page. */
.table { --bs-table-bg:transparent; --bs-table-color:var(--ink);
  --bs-table-hover-bg:var(--surface-2); --bs-table-hover-color:var(--ink);
  font-size:var(--fs-13); margin-bottom:0; border-color:var(--line); }
.table > :not(caption) > * > * { padding:.72rem .95rem; border-bottom-color:var(--line);
  box-shadow:none; vertical-align:middle; }
.table thead th { font-size:var(--fs-11); font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-faint); background:var(--surface-2); border-bottom:1px solid var(--line);
  white-space:nowrap; padding-top:.55rem; padding-bottom:.55rem; }
.table tbody tr { transition:background-color var(--dur) var(--ease); }
.table tbody tr:hover { background:var(--surface-2); }
.table tbody tr:last-child > * { border-bottom:0; }
.table-sm > :not(caption) > * > * { padding:.45rem .8rem; }
.table td .btn-sm + .btn-sm { margin-left:.25rem; }
.table .num,.table .text-end { font-variant-numeric:tabular-nums; }
/* row controls: outline only once the row is live */
.table tbody td .btn-outline-secondary,
.table tbody td .btn-outline-danger { border-color:transparent; background:transparent; }
.table tbody tr:hover td .btn-outline-secondary,
.table tbody tr:focus-within td .btn-outline-secondary { border-color:var(--line-strong); background:var(--surface); }
.table tbody tr:hover td .btn-outline-danger,
.table tbody tr:focus-within td .btn-outline-danger { border-color:color-mix(in srgb,var(--err) 40%,var(--line)); background:var(--surface); }
/* the identifying cell: name on top, the detail that disambiguates it underneath */
.table td strong,.t-main { font-weight:600; color:var(--ink); letter-spacing:-.006em; }
.table td .small.text-muted,.t-sub { font-size:var(--fs-11); line-height:1.35; color:var(--ink-faint) !important; }
.card > .table-responsive:last-child,.card > .table:last-child {
  border-bottom-left-radius:var(--r-box); border-bottom-right-radius:var(--r-box); overflow:hidden; }
.card > .table-responsive:first-child > .table > thead th:first-child { border-top-left-radius:var(--r-box); }
.card > .table-responsive:first-child > .table > thead th:last-child { border-top-right-radius:var(--r-box); }

.badge { font-size:var(--fs-11); font-weight:500; border-radius:5px; padding:.25em .5em; }
.nav-tabs { border-bottom:1px solid var(--line); gap:.15rem; }
.nav-tabs .nav-link { border:0; border-bottom:2px solid transparent; border-radius:0; padding:.5rem .75rem;
  font-size:var(--fs-13); color:var(--ink-muted); font-weight:500; }
.nav-tabs .nav-link:hover { color:var(--ink); border-bottom-color:var(--line-strong); background:transparent; }
.nav-tabs .nav-link.active { color:var(--ac-ink); background:transparent; border-bottom-color:var(--ac); font-weight:600; }

.alert { border-radius:var(--r-box); border:1px solid var(--line); font-size:var(--fs-13); padding:.7rem .85rem;
  background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); }
.alert-success { border-color:color-mix(in srgb,var(--ok) 35%,var(--line)); background:var(--ok-tint); color:var(--ink); }
.alert-warning { border-color:color-mix(in srgb,var(--warn) 35%,var(--line)); background:var(--warn-tint); color:var(--ink); }
.alert-danger  { border-color:color-mix(in srgb,var(--err) 35%,var(--line)); background:var(--err-tint); color:var(--ink); }
.alert-info    { border-color:color-mix(in srgb,var(--ac) 30%,var(--line)); background:var(--ac-tint); color:var(--ink); }

.modal-content { background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--sh-pop); }
.modal-header,.modal-footer { border-color:var(--line); padding:.85rem 1rem; }
.modal-title { font-size:var(--fs-14); font-weight:600; letter-spacing:-.01em; }
.modal-body { padding:1rem; font-size:var(--fs-13); }
.dropdown-menu { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-box);
  box-shadow:var(--sh-pop); font-size:var(--fs-13); padding:.25rem; }
.dropdown-item { border-radius:var(--r-ctl); color:var(--ink-2); padding:.35rem .55rem; }
.dropdown-item:hover,.dropdown-item:focus { background:var(--surface-2); color:var(--ink); }
.list-group-item { background:transparent; color:var(--ink); border-color:var(--line); font-size:var(--fs-13); }
.list-group-item-action:hover { background:var(--surface-2); color:var(--ink); }
.list-group-item.active { background:var(--ac-tint); color:var(--ac-ink); border-color:var(--line); font-weight:550; }
.breadcrumb { font-size:var(--fs-12); margin:0; }
.breadcrumb-item + .breadcrumb-item::before { color:var(--ink-faint); }
.progress { background:var(--surface-3); height:6px; border-radius:999px; }
.progress-bar { background:var(--ac); }

/* ---- 7. Instruments (stats, meters, state) -------------------------------- */
.stat { display:flex; flex-direction:column; gap:.2rem; padding:.95rem 1rem 1rem; }
.stat-icon { display:none; } /* an icon per metric is noise, not signal */
.stat-label { font-size:var(--fs-11); font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-faint); }
.stat-val { font-size:1.75rem; font-weight:650; line-height:1.1; letter-spacing:-.028em;
  font-variant-numeric:tabular-nums; color:var(--ink); margin-top:.15rem; }
.stat-sub { font-size:var(--fs-11); color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.stat .meter { margin:.55rem 0 .4rem; }
.meter { height:5px; background:var(--surface-3); border-radius:999px; overflow:hidden; }
.meter > span { display:block; height:100%; border-radius:999px; background:var(--ac);
  transition:width var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.meter > span.warn { background:var(--warn); }
.meter > span.crit { background:var(--err); }

.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ink-faint); flex:0 0 auto; }
.dot-active { background:var(--ok); box-shadow:0 0 0 3px var(--ok-tint); }
.dot-inactive { background:var(--ink-faint); }
.dot-failed { background:var(--err); box-shadow:0 0 0 3px var(--err-tint); }
.dot-activating,.dot-deactivating { background:var(--warn); box-shadow:0 0 0 3px var(--warn-tint); }
.dot-missing { background:transparent; box-shadow:inset 0 0 0 1.5px var(--ink-faint); }

.badge-state { display:inline-flex; align-items:center; gap:.35rem; font-size:var(--fs-11); font-weight:550;
  padding:.22em .55em; border-radius:999px; white-space:nowrap; letter-spacing:.005em; }
.state-active { color:var(--ok); background:var(--ok-tint); }
.state-inactive { color:var(--ink-muted); background:var(--surface-3); }
.state-failed { color:var(--err); background:var(--err-tint); }
.state-activating,.state-deactivating { color:var(--warn); background:var(--warn-tint); }
.state-missing { color:var(--ink-faint); background:transparent; box-shadow:inset 0 0 0 1px var(--line); }
.svc-table td.svc-state { width:26px; }
.svc-table tr[aria-busy="true"] { opacity:.5; }

.kv { display:grid; grid-template-columns:minmax(110px,auto) 1fr; gap:.45rem .9rem; font-size:var(--fs-13); margin:0; }
.kv dt { color:var(--ink-muted); font-weight:400; }
.kv dd { margin:0; font-variant-numeric:tabular-nums; }

.agent-chip { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:var(--r-ctl); }
.impersonate-bar { display:flex; align-items:center; gap:.5rem; padding:.4rem 1rem; font-size:var(--fs-12);
  background:var(--warn-tint); color:var(--ink); border-bottom:1px solid color-mix(in srgb,var(--warn) 35%,var(--line)); }

/* ---- 8. Log viewer & file manager ---------------------------------------- */
.log-toolbar { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; padding:.5rem .75rem;
  border-bottom:1px solid var(--line); }
.log-view { margin:0; padding:.75rem .875rem; font-family:var(--mono); font-size:var(--fs-12); line-height:1.55;
  background:var(--surface-2); color:var(--ink-2); min-height:50vh; max-height:65vh; overflow:auto;
  white-space:pre-wrap; word-break:break-word;
  border-bottom-left-radius:var(--r-box); border-bottom-right-radius:var(--r-box); }
.log-view .err { color:var(--err); }
.log-view .warn { color:var(--warn); }

.fm-table td { white-space:nowrap; }
.fm-table td:nth-child(2) { white-space:normal; word-break:break-all; }
.fm-editor { font-family:var(--mono); font-size:var(--fs-12); line-height:1.55; min-height:60vh; tab-size:4;
  border:0; border-radius:0; resize:vertical; background:var(--surface-2); color:var(--ink); padding:.875rem; }
.fm-editor:focus { box-shadow:none; background:var(--surface-2); }

/* ---- 9. Auth -------------------------------------------------------------- */
.ods-auth-body { min-height:100vh; display:grid; place-items:center; padding:1.5rem; background:var(--canvas); }
.ods-auth-wrap { width:100%; max-width:360px; }
.ods-auth-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-box); box-shadow:var(--sh-1); }
/* Only "ODS" carries the script face, and it is set large because a script face has a
   small x-height; "Panel" stays in the interface font so the two read as one word rather
   than as a heading. Script capitals do not join the way lowercase letters do, so they get
   a little air between them. */
.ods-brand-lg { display:inline-flex; align-items:baseline; gap:.45rem; color:var(--ink);
  font-size:var(--fs-16); font-weight:600; letter-spacing:-.01em; }
.ods-brand-lg .brand-mark { width:22px; height:22px; align-self:center; color:var(--brand); }
.brand-ods { font-family:var(--font-brand); font-size:1.9rem; font-weight:400; line-height:1;
  letter-spacing:.02em; color:var(--brand); }
.auth-title { font-size:var(--fs-13); color:var(--ink-muted); margin:.5rem 0 0; }
.auth-foot { text-align:center; font-size:var(--fs-11); color:var(--ink-faint); margin-top:.9rem;
  font-family:var(--mono); line-height:1.8; }
.auth-foot .powered { font-family:var(--font); }
.auth-foot a { color:var(--ink-muted); }
.auth-foot a:hover { color:var(--ink); text-decoration:none; }

/* ---- 10. Empty / toast ---------------------------------------------------- */
.toast { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-box);
  box-shadow:var(--sh-pop); color:var(--ink); font-size:var(--fs-13); }
.toast .bi { flex:0 0 auto; }

/* ---- 11. Responsive ------------------------------------------------------- */
@media (max-width:991.98px) {
  .ods-drawer { position:fixed; left:0; top:0; height:100vh; display:flex; z-index:1041;
    transform:translateX(-100%); transition:transform 180ms var(--ease); }
  .ods-drawer.open { transform:none; box-shadow:var(--sh-pop); }
  body:has(.ods-drawer.open) { overflow:hidden; }
  .page-head { gap:.75rem; }
  .page-head > .btn, .page-head > form > .btn { width:100%; }
  .table-responsive { -webkit-overflow-scrolling:touch; }
  .modal-body .log-toolbar > * { flex:1 1 auto; }
  .ods-main { padding:1rem .9rem 3rem; }
  .ods-top { padding:0 .6rem; }
  .page-title { font-size:var(--fs-16); }
  .stat-val { font-size:var(--fs-20); }
}
@media print { .ods-drawer,.ods-top,.ods-backdrop { display:none !important; } .ods-main { padding:0; } }

.min-w-0 { min-width:0; }

/* metric cluster: one instrument, hairline-divided cells */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }
.stat-grid > .stat { background:var(--surface); }
@media (max-width:1199.98px) { .stat-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:575.98px) { .stat-grid { grid-template-columns:1fr; } }
.card-link { font-size:var(--fs-12); font-weight:500; color:var(--ink-muted); }
.card-link:hover { color:var(--ink); text-decoration:none; }

/* error pages */
.err-page { text-align:center; padding:4rem 1rem; }
.err-page .err-code { font-family:var(--mono); font-size:3rem; font-weight:600; letter-spacing:-.03em;
  color:var(--ink-faint); line-height:1; margin-bottom:.5rem; }
.err-page p { color:var(--ink-muted); margin-bottom:1.25rem; }

/* semantic text + success outline button */
.text-success { color:var(--ok) !important; }
.text-danger  { color:var(--err) !important; }
.text-warning { color:var(--warn) !important; }
.btn-outline-success { --bs-btn-color:var(--ok); --bs-btn-bg:transparent; --bs-btn-border-color:var(--line-strong);
  --bs-btn-hover-bg:var(--ok-tint); --bs-btn-hover-border-color:var(--ok); --bs-btn-hover-color:var(--ok);
  --bs-btn-active-bg:var(--ok-tint); --bs-btn-active-border-color:var(--ok); --bs-btn-active-color:var(--ok); }

/* service groups: masonry columns so short groups do not leave voids */
.svc-groups { column-gap:1rem; }
@media (min-width:1200px) { .svc-groups { column-count:2; } }
.svc-groups > section { break-inside:avoid; margin-bottom:1rem; display:inline-block; width:100%; }

/* database privilege picker */
.priv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.15rem .75rem;
  padding:.6rem .7rem; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface-2); }
.priv-grid .form-check-label { font-size:var(--fs-12); }
button.badge-state { cursor:pointer; }
button.badge-state:hover { background:var(--surface-3); color:var(--ink); }

/* ---- 12. Browser surfaces ------------------------------------------------- */
/* Scrollbars, the caret and the selection ship with defaults that belong to no design
   system; on a tool this dense they are on screen constantly. */
* { scrollbar-width:thin; scrollbar-color:var(--n-300) transparent; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:var(--n-300); border-radius:999px;
  border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover { background:var(--n-400); background-clip:content-box; }
*::-webkit-scrollbar-corner { background:transparent; }
.ods-rail { scrollbar-color:rgba(255,255,255,.2) transparent; }
::selection { background:var(--ac-tint); color:var(--ink); }
input,textarea,select,[contenteditable] { caret-color:var(--ac); }
:focus-visible { outline:2px solid var(--ac); outline-offset:2px; border-radius:4px; }
a:hover { text-underline-offset:3px; text-decoration-thickness:1px; }

/* ---- 13. Record lists ------------------------------------------------------
   A list page is not a spreadsheet. Each row is a record with one thing that
   identifies it, a mark that carries the state worth knowing at a glance, and the
   supporting detail folded underneath instead of competing for a column of its own.
   Eight equal columns made the document root as loud as the hostname. */

.toolbar { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  padding:.6rem .95rem; border-bottom:1px solid var(--line); background:var(--surface); }
.toolbar .filter-box { position:relative; flex:0 1 20rem; min-width:12rem; }
.toolbar .filter-box i { position:absolute; left:.6rem; top:50%; transform:translateY(-50%);
  color:var(--ink-faint); font-size:.9rem; pointer-events:none; }
.toolbar .filter-box input { padding-left:1.9rem; }
.toolbar-count { margin-left:auto; font-size:var(--fs-12); color:var(--ink-muted);
  font-variant-numeric:tabular-nums; white-space:nowrap; }

/* chip filters */
.chips { display:flex; gap:.3rem; flex-wrap:wrap; }
.chip { border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  font-size:var(--fs-12); font-weight:500; border-radius:999px; padding:.2rem .65rem; cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.chip:hover { background:var(--surface-2); color:var(--ink); }
.chip.on { background:var(--ac-tint); border-color:color-mix(in srgb,var(--ac) 35%,var(--line)); color:var(--ac-ink); }
.chip:focus-visible { outline:2px solid var(--ac); outline-offset:1px; }

/* the record cell */
.rec { display:flex; align-items:center; gap:.7rem; min-width:0; }
.rec-mark { width:34px; height:34px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--surface-3); color:var(--ink-muted); font-size:.95rem;
  box-shadow:inset 0 0 0 1px var(--line); }
.rec-mark.on  { background:var(--ok-tint);  color:var(--ok);  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 28%,transparent); }
.rec-mark.off { background:var(--warn-tint); color:var(--warn); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 28%,transparent); }
.rec-mark.bad { background:var(--err-tint);  color:var(--err);  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--err) 28%,transparent); }
.rec-mark.mono { font-family:var(--font); font-weight:650; font-size:var(--fs-13); letter-spacing:-.01em; }
.rec-body { min-width:0; }
.rec-name { font-weight:600; color:var(--ink); letter-spacing:-.008em; display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
a.rec-name:hover { color:var(--ac-ink); text-decoration:none; }
.rec-meta { font-size:var(--fs-11); color:var(--ink-faint); display:flex; align-items:center;
  gap:.4rem; flex-wrap:wrap; line-height:1.4; margin-top:.1rem; }
.rec-meta > * { min-width:0; }
.rec-meta .mono { font-family:var(--mono); }
.rec-meta .dotsep::before { content:"·"; color:var(--line-strong); }

/* an empty list should teach the page, not announce nothing */
.empty { text-align:center; padding:2.75rem 1.25rem; color:var(--ink-muted); font-size:var(--fs-13); }
.empty .empty-mark { width:44px; height:44px; margin:0 auto .75rem; border-radius:12px; display:grid;
  place-items:center; background:var(--surface-2); color:var(--ink-faint); font-size:1.25rem;
  box-shadow:inset 0 0 0 1px var(--line); }
.empty i { display:block; font-size:1.25rem; color:inherit; margin:0; }
.empty h2 { font-size:var(--fs-14); font-weight:600; color:var(--ink); margin:0 0 .25rem; }
.empty p { margin:0 auto; max-width:46ch; }
.empty .btn { margin-top:1rem; }
.empty-row td { padding:2rem 1rem !important; text-align:center; color:var(--ink-muted); }