/* =============================================================================
   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:#767d87; --n-500:#5f6672; --n-600:#4b5158; --n-900:#15171c;

  --canvas:var(--n-50); --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:#2f52c8; --ac-hover:#26449f; --ac-tint:rgba(47,82,200,.09); --ac-ring:rgba(47,82,200,.28);
  --ok:#15803d; --ok-tint:rgba(21,128,61,.10);
  --warn:#b45309; --warn-tint:rgba(180,83,9,.11);
  --err:#c0271d; --err-tint:rgba(192,39,29,.10);

  /* primary action is ink, not blue */
  --btn-ink-bg:var(--n-900); --btn-ink-fg:#ffffff; --btn-ink-hover:#000000;

  --sh-1:0 1px 2px rgba(15,23,42,.05);
  --sh-pop:0 8px 24px -6px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.06);

  --font:"Inter var","Inter",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --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:6px; --r-box:8px;
  --side-w:236px; --top-h:52px;
  --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:47,82,200; --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:#7d848f; --n-500:#969ca6; --n-600:#c2c7ce; --n-900:#e8eaed;

  --canvas:#0d0f12; --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:#7d9bff; --ac-hover:#9db3ff; --ac-tint:rgba(125,155,255,.14); --ac-ring:rgba(125,155,255,.35);
  --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:#e8eaed; --btn-ink-fg:#0d0f12; --btn-ink-hover:#ffffff;
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --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 ------------------------------------------------------------- */
.ods-shell { display:flex; min-height:100vh; }

.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;
  height:var(--top-h); padding:0 .875rem; border-bottom:1px solid var(--line); }
.brand-link { display:flex; align-items:center; gap:.5rem; color:var(--ink); font-weight:600;
  font-size:var(--fs-14); letter-spacing:-.01em; min-width:0; }
.brand-link:hover { color:var(--ink); text-decoration:none; }
.brand-mark { width:22px; height:22px; flex:0 0 auto; color:var(--ac); }
.brand-link .host { display:block; 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:.5rem .5rem 1rem; }
.ods-nav .nav-section { font-size:var(--fs-11); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); padding:.9rem .5rem .3rem; }
.ods-nav .nav-section:first-child { padding-top:.35rem; }
.ods-nav .nav-item { position:relative; display:flex; align-items:center; gap:.6rem;
  height:32px; padding:0 .5rem; border-radius:var(--r-ctl); 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(--surface-3); color:var(--ink); font-weight:500; }
.ods-nav .nav-item.active i { color:var(--ac); }
.ods-nav .nav-item.active::before { content:""; position:absolute; left:-.5rem; top:6px; bottom:6px;
  width:2px; border-radius:0 2px 2px 0; background:var(--ac); }

.ods-side-foot { padding:.5rem; border-top:1px solid var(--line); display:flex; align-items:center; gap:.4rem; }
.ods-powered { padding:0 .6rem .6rem; 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:var(--r-ctl); display:grid; place-items:center;
  background:var(--surface-3); color:var(--ink-2); font-size:var(--fs-12); font-weight:600; }
.ods-backdrop { position:fixed; inset:0; background:rgba(2,6,23,.45); z-index:1035; }

.ods-body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.ods-top { height:var(--top-h); display:flex; align-items:center; gap:.4rem; padding:0 1rem;
  background:var(--surface); 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); }
.ods-main { padding:1.25rem 1.25rem 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:1rem; }
.page-title { font-size:var(--fs-20); font-weight:600; letter-spacing:-.015em; margin:0; }
.page-sub { margin:.2rem 0 0; font-size:var(--fs-12); color:var(--ink-muted); }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-box); box-shadow:none; }
.card-header { background:transparent; border-bottom:1px solid var(--line); padding:.6rem .875rem;
  font-size:var(--fs-12); font-weight:600; color:var(--ink); min-height:40px; display:flex; align-items:center; }
.card-header .btn-sm { margin:-.15rem 0; }
.card-body { padding:.875rem; }
.card-footer { background:var(--surface-2); border-top:1px solid var(--line); padding:.6rem .875rem; font-size:var(--fs-12); }

.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; }
.table > :not(caption) > * > * { padding:.5rem .875rem; border-bottom-color:var(--line); box-shadow:none; vertical-align:middle; }
.table thead th { font-size:var(--fs-11); font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-muted); background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap; }
.table tbody tr:last-child > * { border-bottom:0; }
.table-sm > :not(caption) > * > * { padding:.35rem .75rem; }
.table td .btn-sm + .btn-sm { margin-left:.25rem; }
.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; }

.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:.45rem .7rem;
  font-size:var(--fs-13); color:var(--ink-muted); }
.nav-tabs .nav-link:hover { color:var(--ink); border-bottom-color:var(--line-strong); background:transparent; }
.nav-tabs .nav-link.active { color:var(--ink); background:transparent; border-bottom-color:var(--ac); font-weight:500; }

.alert { border-radius:var(--r-box); border:1px solid var(--line); font-size:var(--fs-13); padding:.6rem .8rem;
  background:var(--surface); color:var(--ink); }
.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:var(--r-box); box-shadow:var(--sh-pop); }
.modal-header,.modal-footer { border-color:var(--line); padding:.75rem .95rem; }
.modal-title { font-size:var(--fs-14); font-weight:600; }
.modal-body { padding:.95rem; 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); }
.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:.15rem; padding:.75rem .875rem; }
.stat-icon { display:none; } /* an icon per metric is noise, not signal */
.stat-label { font-size:var(--fs-11); font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-muted); }
.stat-val { font-size:var(--fs-26); font-weight:600; line-height:1.15; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--ink); }
.stat-sub { font-size:var(--fs-11); color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.stat .meter { margin:.4rem 0 .3rem; }
.meter { height:4px; background:var(--surface-3); border-radius:999px; overflow:hidden; }
.meter > span { display:block; height:100%; border-radius:999px; background:var(--ink-faint);
  transition: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); }
.dot-inactive { background:var(--ink-faint); }
.dot-failed { background:var(--err); }
.dot-activating,.dot-deactivating { background:var(--warn); }
.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:500;
  padding:.15em .45em; border-radius:5px; white-space:nowrap; }
.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:.3rem .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); }
.ods-brand-lg { display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-16); font-weight:600;
  letter-spacing:-.01em; color:var(--ink); }
.ods-brand-lg .brand-mark { width:24px; height:24px; }
.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 ---------------------------------------------------- */
.empty { text-align:center; padding:2.25rem 1rem; color:var(--ink-muted); font-size:var(--fs-13); }
.empty i { display:block; font-size:1.4rem; margin-bottom:.5rem; color:var(--ink-faint); }
.empty .btn { margin-top:.75rem; }
.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-side { position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform 180ms var(--ease); }
  .ods-side.open { transform:none; box-shadow:var(--sh-pop); }
  body:has(.ods-side.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 .875rem 3rem; }
  .ods-top { padding:0 .6rem; }
  .page-title { font-size:var(--fs-16); }
  .stat-val { font-size:var(--fs-20); }
}
@media print { .ods-side,.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); }