/* Octopus UI — IT management theme with dark/light support
 *
 * v3.1.0 Phase 2 (Gitea 545): hardcoded hex codes replaced with design-token
 * references from /css/design-tokens.css. The :root block here remains the
 * source-of-truth for the legacy --bg/--surface/--border/--text/--muted/--primary
 * /--success/--warning/--danger/--info aliases that every page-level rule
 * already consumes. Phase 2 swaps the right-hand sides only — left-hand alias
 * names unchanged so no page rule needs to migrate.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * v3.1.0 PRIMITIVES STANDARD (Gitea 547) — single source of truth for sizes
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Reach for these classes BEFORE inventing per-tab/per-page overrides. If a
 * primitive doesn't fit, change the primitive (and document why) — do not
 * shadow it with a context-specific rule.
 *
 * BUTTONS
 *   .btn         default action button — height 36px, font 14px / 500
 *   .btn-sm      compact action button — height 28px, font 12px / 500
 *                (matches .filt-chip so they align in toolbars)
 *   .btn i       icon inside any button — 13px square
 *   .btn-primary cyan filled            .btn-secondary surface + border
 *   .btn-ghost   transparent            .btn-danger    critical filled
 *
 * CHIPS / PILLS
 *   .filt-chip   filter toggle chip — 28px height, 5px radius, mono uppercase
 *                NOT a pill (999px). Active state uses brand-cyan-50/300/700.
 *   .pill        status pill — 20px height, mono uppercase, .pill-online /
 *                .pill-warn / .pill-offline / .pill-info variants
 *
 * TEXT (utility classes — use these instead of inline font-size styles)
 *   .label-mono  10px mono uppercase muted — eyebrow labels, table THEADs,
 *                column headers, "STORED IP" / "IP VALIDITY" stat labels
 *   .subline-mono 11px mono muted no-transform — timestamps, paths, IDs,
 *                inline metadata, sublines under primary values
 *   .mono        12px mono — body cells with hostnames, IPs, IDs
 *
 * CARDS
 *   .card-head + .card-title  mono-uppercase 12px / 600 — chrome title
 *   .card-title is intentionally MONO UPPERCASE in v3.x design — do not
 *   replace with sentence-case "section title" semantics.
 *
 * INPUTS
 *   .input  height 32px, padding 0 10px, font 13px, focus 3px brand-cyan-100
 *           shadow. Applies to <input>, <select>, <textarea>.
 *
 * SPACING SCALE (pick from these only — no arbitrary values)
 *   4 / 6 / 8 / 10 / 12 / 14 / 18 / 24 / 32 / 48
 *
 * ICON SIZE TIER
 *   13px  — inline body icons, inside buttons
 *   14px  — section / card / accordion-head icons
 *   16-18px — hero / KPI / drawer-header icons
 *   stroke-width 2 always
 *
 * COLORS — never hardcode hex; reach for design tokens (status-online-500,
 * brand-cyan-700, neutral-100, etc.) or theme-aware aliases (--surface,
 * --bg, --border, --text, --muted, --primary). audit-integration.js
 * section 17 NO_HARDCODED_HEX enforces this on style.css.
 */

:root {
  --bg:       var(--brand-abyss-900);
  --surface:  var(--brand-abyss-800);
  --border:   var(--brand-abyss-700);
  --text:     var(--neutral-200);
  --muted:    var(--neutral-500);
  --primary:  var(--brand-cyan-500);
  --success:  var(--status-online-500);
  --warning:  var(--status-warning-500);
  --danger:   var(--status-critical-500);
  --info:     var(--status-info-500);
  --nav-h:    56px;
}

[data-theme="light"] {
  --bg:       var(--bg-canvas);
  --surface:  var(--bg-surface);
  --border:   var(--border-subtle);
  --text:     var(--neutral-800);
  --muted:    var(--neutral-500);
  --primary:  var(--brand-cyan-500);
  --success:  var(--status-online-700);
  --warning:  var(--status-warning-700);
  --danger:   var(--status-critical-700);
  --info:     var(--status-info-700);
}
[data-theme="light"] .terminal { background: var(--bg-surface-2); color: var(--neutral-800); }
[data-theme="light"] .alert-error  { color: var(--status-critical-700); }
[data-theme="light"] .alert-info   { color: var(--status-info-700); }
[data-theme="light"] .alert-success { color: var(--status-online-700); }
[data-theme="light"] .modal-overlay { background: rgba(0,0,0,0.3); }
[data-theme="light"] .context-menu { box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
[data-theme="light"] .btn:hover { background: rgba(0,0,0,0.08); }
[data-theme="light"] .btn-primary:hover { background: var(--brand-cyan-600); }
[data-theme="light"] .btn-danger:hover { background: var(--status-critical-700); }
[data-theme="light"] .btn-ghost:hover { background: rgba(0,0,0,0.05); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[x-cloak] { display: none !important; }

/* Readonly view — hides write actions, disables form inputs */
.readonly-view [data-action="write"] { display: none !important; }
.readonly-view input:not([type="search"]):not([type="checkbox"]):not(.readonly-ok),
.readonly-view select:not(.readonly-ok),
.readonly-view textarea:not(.readonly-ok) { pointer-events: none; opacity: 0.6; }
.readonly-banner { background: var(--status-warning-50); color: var(--status-warning-700); border: 1px solid var(--status-warning-300); border-radius: 6px; padding: 8px 16px; margin-bottom: 16px; font-size: 13px; font-weight: 600; text-align: center; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px; padding: 0 24px;
}
.nav-brand   { font-weight: 700; font-size: 18px; margin-right: 8px; }
.nav-links   { display: flex; gap: 4px; flex: 1; }
.nav-link    { padding: 6px 12px; border-radius: 6px; color: var(--muted); text-decoration: none; transition: all 0.15s; visibility: hidden; }
.nav-link.nav-ready { visibility: visible; }
.nav-link:hover { background: rgba(128,128,128,0.12); color: var(--text); }
.nav-link.active { background: var(--brand-cyan-50); color: var(--brand-cyan-700); }
.nav-link.active:hover { background: var(--brand-cyan-100); }
.nav-user    { display: flex; align-items: center; gap: 10px; margin-left: auto; }
octopus-nav  { display: contents; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.main       { padding: calc(var(--nav-h) + var(--banner-h, 0px) + 24px) 24px 40px; max-width: 1600px; margin: 0 auto; }
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box  { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 40px; width: 380px; }
.login-brand { font-size: 28px; font-weight: 800; text-align: center; margin-bottom: 24px; }

/* ── Surface 9.7 — Login screen redesign (per LogonScreen.png) ─────────── */
/* 2-col split-screen: LEFT marketing panel (dark navy gradient), RIGHT form
   panel. Mobile fallback at ≤900px hides the marketing panel. */
.login-shell { background: var(--neutral-900); margin: 0; padding: 0; min-height: 100vh; color: var(--text); }
.login-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
@media (max-width: 900px) {
  .login-grid { grid-template-columns: 1fr; }
  .login-marketing { display: none; }
}

/* LEFT — marketing panel */
.login-marketing {
  position: relative; padding: 32px 48px;
  display: flex; flex-direction: column;
  background: radial-gradient(circle at 20% 20%, rgba(34, 211, 238, 0.08) 0%, transparent 60%),
              linear-gradient(135deg, var(--neutral-900) 0%, var(--brand-abyss-900, #0b1224) 100%);
  color: #fff; overflow: hidden;
}
.login-marketing::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.login-mk-head {
  display: flex; align-items: center; gap: 10px;
  position: relative; z-index: 1;
}
.login-mk-logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 17px; color: #fff;
}
.login-mk-logo-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(34, 211, 238, 0.10);
  border: 1px solid rgba(34, 211, 238, 0.25);
  font-size: 18px; line-height: 1;
}
.login-mk-version {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 10px; font-weight: 500; letter-spacing: 0.05em;
  color: var(--brand-cyan-300, #67e8f9);
  padding: 3px 8px; border-radius: 4px;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.20);
}
.login-mk-body {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  max-width: 460px; position: relative; z-index: 1;
  /* Surface 9.7 FF1 — pull body content toward the center divider so it
     pairs visually with the form on the right panel. */
  margin-left: auto;
  padding-right: 32px;
}
.login-mk-eyebrow {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-cyan-300, #67e8f9);
  margin-bottom: 28px;
}
.login-mk-headline {
  font-size: clamp(40px, 5vw, 64px); font-weight: 800; color: #fff;
  margin: 0 0 24px 0; line-height: 1.05; letter-spacing: -0.02em;
}
.login-mk-lede {
  color: var(--neutral-300); font-size: 14px; line-height: 1.7;
  margin: 0 0 56px 0; max-width: 420px;
}
.login-mk-stats {
  display: grid; grid-template-columns: repeat(3, auto); gap: 40px;
  align-items: end;
}
.login-mk-stat-num {
  font-size: 28px; font-weight: 700; color: #fff; line-height: 1;
  letter-spacing: -0.02em;
}
.login-mk-stat-lbl {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-cyan-300, #67e8f9);
  margin-top: 6px;
}
.login-mk-foot {
  display: flex; gap: 8px; align-items: center;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 11px; color: var(--neutral-400);
  position: relative; z-index: 1;
}
.login-mk-foot-sep { color: var(--neutral-500); }

/* RIGHT — form panel */
.login-form-panel {
  background: var(--neutral-900);
  padding: 32px 48px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
}
.login-form-inner {
  width: 360px; max-width: 100%;
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  /* Surface 9.7 FF1 — pull form toward the center divider so it pairs visually
     with the marketing body on the left panel. */
  margin-left: 32px;
}
.login-form-foot { width: 100%; }
@media (max-width: 1100px) {
  .login-form-inner { margin-left: 0; }
  .login-form-panel { align-items: center; }
}
.login-form-greet {
  color: var(--neutral-400); font-size: 13px;
  margin-bottom: 32px; text-align: left;
}
.login-form-label {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--neutral-400);
  display: block; margin-bottom: 6px;
}
.login-form-input {
  background: var(--neutral-800, #1e293b);
  border: 1px solid var(--neutral-700, #334155);
  color: #fff;
  padding: 10px 12px; font-size: 13px;
  border-radius: 6px; width: 100%;
}
.login-form-input:focus {
  border-color: var(--brand-cyan-700);
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}
.login-form-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--neutral-400); margin: 14px 0 18px 0;
}
.login-form-keep { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.login-form-keep input[type="checkbox"] { accent-color: var(--brand-cyan-700); }
.login-form-forgot { color: var(--brand-cyan-700); text-decoration: none; font-weight: 500; }
.login-form-forgot:hover { color: var(--brand-cyan-300, #67e8f9); }
.login-form-cta {
  width: 100%; height: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; font-weight: 600;
}
.login-form-cta i { width: 16px; height: 16px; }
.login-form-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--neutral-500); font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  margin: 18px 0;
}
.login-form-divider::before, .login-form-divider::after {
  content: ''; flex: 1; height: 1px;
  background: var(--neutral-700, #334155);
}
.login-form-hint {
  color: var(--neutral-500); font-size: 11px; margin-top: 6px;
}
.login-form-foot {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 11px; color: var(--neutral-500);
  text-align: right; padding-top: 16px;
}

.page-header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.page-header h1 { font-size: 24px; font-weight: 700; }

/* ── Tiles ───────────────────────────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.tile  { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px 24px; }
.tile-num   { font-size: 36px; font-weight: 800; }
.tile-label { font-size: 13px; color: var(--muted); margin-top: 4px; }
.tile-green .tile-num { color: var(--success); }
.tile-red   .tile-num { color: var(--danger); }
.tile-orange .tile-num { color: var(--warning); }
.tile-grey  .tile-num { color: var(--muted); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card        { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
/* WP-9 (#1009) — accent top-line on the assets Devices + Users frames only */
.frame-accent-top { border-top: 3px solid var(--primary); }
.card-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.card-header h2 { font-size: 15px; font-weight: 600; }
.card-body   { padding: 20px; }
.row2  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.mt    { margin-top: 16px; }

/* ── Table ───────────────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
/* #998 — scroll container for wide tables inside .card (which is overflow:hidden
   for the border-radius): a row wider than the card scrolls horizontally instead
   of silently clipping its rightmost cells (the Alerts Actions column lost its
   Ack button this way). */
.table-scroll { overflow-x: auto; }
.table th {
  text-align: left; padding: 10px 12px;
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .table th { background: var(--bg-surface-2); }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: rgba(255,255,255,0.03); }
.table .checkbox-col { width: 32px; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge        { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.badge-green  { background: rgba(34,197,94,0.15);  color: var(--success); }
.badge-red    { background: rgba(239,68,68,0.15);   color: var(--danger); }
.badge-orange { background: rgba(245,158,11,0.15);  color: var(--warning); }
.badge-blue   { background: rgba(59,130,246,0.15);  color: var(--info); }
.badge-grey   { background: rgba(100,116,139,0.15); color: var(--muted); }

/* ── Nav badge (v3.0.9 Alert Center Gitea 440) ──────────────────────────── */
.nav-badge    { display: inline-block; min-width: 16px; padding: 1px 6px; margin-left: 6px; border-radius: 10px; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; vertical-align: middle; }
.nav-badge-critical { background: rgba(239,68,68,0.85); color: var(--neutral-0); }
.nav-badge-warning  { background: rgba(245,158,11,0.85); color: var(--neutral-0); }
.nav-badge-info     { background: rgba(59,130,246,0.70); color: var(--neutral-0); }

/* ── Buttons (v3.1.0 primitives standard — see file header) ──────────────── */
.btn         { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; text-decoration: none; transition: all 0.15s; color: var(--text); background: rgba(128,128,128,0.12); white-space: nowrap; }
.btn:hover   { background: rgba(255,255,255,0.14); }
.btn-danger:hover { background: var(--status-critical-700); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: var(--neutral-0); }
.btn-primary:hover { background: var(--brand-cyan-400); }
.btn-danger  { background: var(--danger); color: var(--neutral-0); }
.btn-ghost   { background: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,0.07); }
.btn-sm      { height: 28px; padding: 0 10px; font-size: 12px; font-weight: 500; }
.btn i       { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Typography utilities (v3.1.0 primitives standard) ───────────────────── */
/* Eyebrow / column-header / stat-label — 10px mono uppercase muted.
   Use this anywhere a small uppercase mono label sits above a value
   (e.g., "STORED IP", "IP VALIDITY", THEAD cells, "HOSTNAME") instead
   of inventing a tab-specific class for the same role. */
.label-mono {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
/* Subline / inline metadata — 11px mono muted, NO transform.
   Use for timestamps, paths, IDs, descriptions UNDER a primary value
   (e.g., "winrm_probe verified · 01/05 09:44", "10.5.5.193 (active)"). */
.subline-mono {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; font-weight: 400;
  color: var(--muted);
}
/* v3.1.0 Phase 3a.4 (Gitea 546) — design-preview .btn-secondary.
   Phase 3b POST-10 (Gitea 547) — made theme-aware:
     light → surface (white) + border-subtle (matches design preview)
     dark  → surface (brand-abyss-800) + border (brand-abyss-700) — visible
             outline against drawer header so the Edit button reads clearly */
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--bg); }
/* Light-mode tightening — explicit neutral-300 border instead of border-subtle
   to match the design preview's stronger outline */
[data-theme="light"] .btn-secondary {
  background: var(--bg-surface);
  border-color: var(--border-default);
}
[data-theme="light"] .btn-secondary:hover { background: var(--bg-surface-2); }
/* Active state: cyan-tinted (matches .filt-chip.active) — used by toolbar
   toggle buttons (Alerts / Monitoring / Sort / Enhanced view / etc.) */
.btn-secondary.active {
  background: var(--brand-cyan-50);
  color: var(--brand-cyan-700);
  border-color: var(--brand-cyan-300, var(--brand-cyan-100));
}
.btn-secondary.active:hover { background: var(--brand-cyan-100); }
.btn-full    { width: 100%; justify-content: center; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-group       { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
/* Inputs — pinned to v3.1.0 primitives standard (32px height / 13px font) */
.input            { width: 100%; height: 32px; padding: 0 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; transition: box-shadow 0.12s, border-color 0.12s; }
.input:focus      { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--brand-cyan-100); }
textarea.input    { height: auto; padding: 8px 10px; line-height: 1.4; }
select.input option { background: var(--surface); }

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .sep { flex: 1; }

/* ── Filter bar (sub-phase 2.22.5 — unified across assets/alerts/alerts-admin/investigate) ── */
.filter-bar           { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 16px; }
.filter-bar-row       { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px 14px; }
.filter-bar-row + .filter-bar-row { border-top: 1px solid var(--border); }
.filter-chip          { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.filter-chip > label  { font-size: 11px; color: var(--muted); white-space: nowrap; line-height: 1.3; }
.filter-chip select, .filter-chip input { width: 100%; }
.filter-chip--narrow  { width: 100px; }
.filter-chip--medium  { width: 140px; }
.filter-chip--wide    { width: 200px; }
.filter-chip--flex    { flex: 1; min-width: 200px; }
.filter-bar-actions   { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.filter-bar-counter   { font-size: 13px; color: var(--muted); margin-left: 8px; white-space: nowrap; }
.action-row           { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-bottom: 10px; flex-wrap: wrap; }

/* ── Design-preview card / dl / pill / chip (v3.1.0 Phase 3a.4 Gitea 546) ── */
/* Token-based — used by the assets.html Overview body 4-card layout. */
.card-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: 1px solid var(--border);
}
.card-title {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text);
}
.card-meta {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; color: var(--muted); white-space: nowrap;
}
.card-body { padding: 14px; }
.dl {
  display: grid; grid-template-columns: 130px 1fr; gap: 10px 14px;
  align-items: baseline;
}
.dl dt {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 10px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
  padding-top: 2px; align-self: start;
}
.dl dd { font-size: 13px; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.dl dd.mono { font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace); font-size: 12.5px; }
.dl dd .helper {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; color: var(--muted); margin-left: 6px;
}
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 8px; border-radius: 999px;
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
}
.pill .dot { width: 5px; height: 5px; border-radius: 999px; }
.pill-online   { background: var(--status-online-50);   color: var(--status-online-700); }
.pill-online   .dot { background: var(--status-online-500); }
.pill-offline  { background: var(--status-critical-50); color: var(--status-critical-700); }
.pill-offline  .dot { background: var(--status-critical-500); }
.pill-warn     { background: var(--status-warning-50);  color: var(--status-warning-700); }
.pill-warn     .dot { background: var(--status-warning-500); }
.pill-neutral  { background: var(--status-neutral-50);  color: var(--status-neutral-500); }
.pill-neutral  .dot { background: var(--status-neutral-500); }
/* ── Account Providers list (v3.1 redesign) ─────────────────────────── */
.ap-prov { display: inline-flex; align-items: center; gap: 11px; }
.ap-icon {
  width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-surface-2); color: var(--brand-cyan-600);
}
.ap-icon svg { width: 16px; height: 16px; }
.key-chip {
  display: inline-block; padding: 2px 7px; border-radius: 5px;
  background: var(--bg-surface-2); color: var(--muted);
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace); font-size: 11px;
}
.table th.num, .table td.num { text-align: right; }
.num-muted { color: var(--muted); }
.ap-row-off td { opacity: 0.5; }
/* ── Edit-Provider modal (v3.1 redesign) ────────────────────────────── */
/* .modal.ap-modal (not .ap-modal) so it beats the later `.modal { width:480px; padding:28px }` rule on specificity regardless of source order */
.modal.ap-modal { width: 680px; max-width: 95vw; max-height: 90vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
/* read-only attributes table fits the modal at any width: table-layout fixed pins
   the table to the modal; KEY/LABEL/OPTIONS wrap AND break long unbroken tokens
   (account_state, Directory\Account) so nothing overflows into the next column. */
.ap-modal-body table.table { table-layout: fixed; }
.ap-modal-body table.table th, .ap-modal-body table.table td { padding-left: 8px; padding-right: 8px; vertical-align: top; }
.ap-modal-body table.table .badge { font-size: 11px; padding: 2px 6px; }
.ap-modal-body table.table th:nth-child(1), .ap-modal-body table.table td:nth-child(1) { width: 26%; white-space: normal; overflow-wrap: anywhere; }
.ap-modal-body table.table th:nth-child(2), .ap-modal-body table.table td:nth-child(2) { width: 27%; white-space: normal; overflow-wrap: anywhere; }
.ap-modal-body table.table th:nth-child(3), .ap-modal-body table.table td:nth-child(3) { width: 16%; white-space: nowrap; }
.ap-modal-body table.table th:nth-child(4), .ap-modal-body table.table td:nth-child(4) { width: 21%; white-space: normal; overflow-wrap: anywhere; }
.ap-modal-body table.table th:nth-child(5), .ap-modal-body table.table td:nth-child(5) { width: 10%; white-space: nowrap; text-align: center; }
.ap-modal-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ap-modal-head-titles { flex: 1; min-width: 0; }
.ap-modal-head-titles h3 { font-size: 20px; font-weight: 700; margin: 2px 0 0 0; }
.ap-icon-lg { width: 40px; height: 40px; border-radius: 9px; }
.ap-icon-lg svg { width: 20px; height: 20px; }
.ap-modal-body { padding: 20px 22px; overflow-y: auto; flex: 1; background: var(--bg); }
.ap-id-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 22px; }
.input-icon-wrap { position: relative; display: flex; align-items: center; }
.input-icon-wrap .input { padding-left: 30px; }
.input-lucide { position: absolute; left: 9px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.toggle-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; height: 32px; user-select: none; }
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-slider { position: relative; width: 38px; height: 20px; border-radius: 999px; background: var(--status-neutral-50); border: 1px solid var(--border); transition: background 0.15s; flex-shrink: 0; }
.toggle-slider::before { content: ''; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 999px; background: var(--neutral-0); transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.toggle-switch input:checked + .toggle-slider { background: var(--primary); border-color: var(--primary); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }
.toggle-label { font-size: 12px; color: var(--muted); }
/* curated icon-grid picker */
.ap-ico-current { font-family: var(--font-mono, 'Fira Code', monospace); font-size: 11px; color: var(--brand-cyan-600); margin-left: 6px; }
.ap-ico-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; margin-top: 6px; }
.ap-ico-tile { display: inline-flex; align-items: center; justify-content: center; height: 36px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--muted); cursor: pointer; padding: 0; transition: border-color 0.12s, color 0.12s, background 0.12s; }
.ap-ico-tile:hover { border-color: var(--brand-cyan-400); color: var(--text); }
.ap-ico-tile.selected { border-color: var(--primary); background: var(--brand-cyan-50); color: var(--brand-cyan-600); }
.ap-ico-tile svg { width: 17px; height: 17px; }
.field-tip { font-size: 11px; color: var(--muted); margin-top: 4px; }
/* provider picker tiles (Add-account modal) */
.ap-prov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 6px; }
.ap-prov-tile { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); cursor: pointer; font-size: 13px; text-align: left; transition: border-color 0.12s, background 0.12s; }
.ap-prov-tile:hover { border-color: var(--brand-cyan-400); }
.ap-prov-tile.selected { border-color: var(--primary); background: var(--brand-cyan-50); }
.ap-prov-tile-ico { width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-surface-2); color: var(--brand-cyan-600); }
.ap-prov-tile.selected .ap-prov-tile-ico { background: var(--brand-cyan-100); }
.ap-prov-tile-ico svg { width: 15px; height: 15px; }
/* Toolkit COLLECTS — compact pill tiles */
.tk-collects { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2px; }
.tk-collects .ap-prov-tile { padding: 6px 13px; border-radius: 999px; font-size: 12px; }
.tk-collects .ap-prov-tile-ico { width: 17px; height: 17px; background: transparent; color: var(--muted); }
.tk-collects .ap-prov-tile.selected { color: var(--brand-cyan-700); }
.tk-collects .ap-prov-tile.selected .ap-prov-tile-ico { color: var(--brand-cyan-600); }
/* Person Overview — linked-account sub-cards (SCR-jtpz) */
.acct-card { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--surface); }
.acct-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.acct-head:hover { background: var(--bg); }
/* item 4: overview account cards are static (collapsed only — no expand) */
.acct-head--static { cursor: default; }
.acct-head--static:hover { background: transparent; }
/* item 2b: account notes shown inside its provider section on the Attributes tab */
.attr-prov-notes { padding: 4px 12px 12px; }
.attr-prov-notes .attr-value { font-size: 12.5px; overflow-wrap: anywhere; }
.acct-caret { color: var(--muted); width: 12px; font-size: 11px; flex-shrink: 0; }
.acct-ico { width: 28px; height: 28px; }
.acct-ico svg { width: 15px; height: 15px; }
.acct-prov { font-weight: 600; font-size: 13px; }
.acct-id { color: var(--muted); font-size: 12px; margin-left: auto; }
.acct-open { flex-shrink: 0; }
.acct-attrs { padding: 10px 12px 12px 12px; border-top: 1px solid var(--border); background: var(--bg); }
.acct-attr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
/* SCR-jtpz: label stacked ABOVE value (small grey caps → value), not inline */
.acct-attr { display: flex; flex-direction: column; gap: 2px; font-size: 12px; min-width: 0; }
.acct-attr-k { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.acct-attr-v { overflow-wrap: anywhere; font-size: 12.5px; }
.acct-hint { font-size: 11px; color: var(--muted); padding: 0 16px 12px 16px; }
.rel-line { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.rel-arrow { color: var(--muted); font-size: 11px; }
/* Attributes tab — set-progress + provider sections + mini-card grid (SCR-jtko) */
.attr-summary { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.attr-summary-label, .attr-summary-pct { font-size: 11px; color: var(--muted); white-space: nowrap; font-family: var(--font-mono, 'Fira Code', monospace); }
.attr-progress { flex: 1; height: 6px; border-radius: 999px; background: var(--bg-surface-2); overflow: hidden; }
.attr-progress-bar { height: 100%; background: var(--primary); border-radius: 999px; transition: width 0.2s; }
.attr-prov-card { border: 1px solid var(--border); border-radius: 9px; margin-bottom: 12px; overflow: hidden; background: var(--surface); }
.attr-prov-head { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--bg); }
.attr-prov-name { font-weight: 600; font-size: 13px; }
.attr-prov-sub { font-size: 11px; color: var(--muted); }
.attr-prov-count { font-size: 11px; color: var(--muted); margin-left: auto; }
/* item 5a: the read-view grid is a single child of the 2-col .accord-body grid —
   span both columns so the cards fill the full drawer width (was confined to col 1). */
.attr-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px; grid-column: 1 / -1; }
.attr-mini { border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; background: var(--bg); min-width: 0; }
.attr-mini--empty { opacity: 0.75; }
.attr-mini-k { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono, 'Fira Code', monospace); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.attr-mini-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; background: var(--muted); }
.attr-mini-dot.dot-auto { background: var(--brand-cyan-500); }
.attr-mini-dot.dot-manual { background: var(--neutral-400); }
.attr-mini-dot.dot-import { background: var(--status-warning-500); }
.attr-mini-lock { margin-left: auto; cursor: pointer; color: var(--muted); display: inline-flex; }
.attr-mini-lock i, .attr-mini-lock svg { width: 11px; height: 11px; }
/* item 5b: per-card actions (history + lock) pushed right; AUTO/MANUAL/IMPORT badge inline after the label */
.attr-mini-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.attr-mini-k .method-badge { margin-left: 2px; }
.attr-mini .attr-history { margin-top: 6px; }
.attr-mini .attr-value { font-size: 13px; overflow-wrap: anywhere; }
.attr-mini .attr-value.mono { font-family: var(--font-mono, 'Fira Code', monospace); font-size: 12px; }
.attr-mini .attr-value.empty { color: var(--muted); font-style: italic; }
.ap-section-head { display: flex; align-items: center; gap: 7px; margin-top: 4px; }
.ap-section-head i, .ap-section-head svg { width: 14px; height: 14px; color: var(--muted); }
.ap-section-sub { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); margin-top: 4px; }
.ap-section-sub i, .ap-section-sub svg { width: 12px; height: 12px; }
.ap-attr-key { font-family: var(--font-mono, 'Fira Code', monospace); font-size: 12px; color: var(--brand-cyan-600); }
.ap-auto { color: var(--status-online-500); font-weight: 700; }
.ap-empty { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); background: var(--bg-surface-2); border-radius: 7px; padding: 10px 12px; margin-top: 8px; }
.ap-empty i, .ap-empty svg { width: 14px; height: 14px; }
.ap-collected-list { margin: 6px 0 0 0; padding-left: 18px; font-size: 12px; }
.ap-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); flex-shrink: 0; }
.ap-foot-right { display: flex; gap: 8px; }
.btn-danger-outline { background: transparent; border: 1px solid var(--status-critical-500); color: var(--status-critical-700); }
.btn-danger-outline:hover { background: var(--status-critical-50); }
.badge-purple { background: rgba(168,85,247,0.15); color: rgb(147,51,234); }
.badge-pink   { background: rgba(236,72,153,0.15); color: rgb(219,39,119); }
.verified {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--status-online-700); font-weight: 500;
}
.verified .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--status-online-500); }
.protochip, .alert-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 4px;
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
}
.protochip--on    { background: var(--status-online-50);   color: var(--status-online-700); }
.protochip--check { background: var(--status-warning-50);  color: var(--status-warning-700); }
.protochip--off   { background: var(--neutral-100);        color: var(--muted); }
.alert-chip--on  { background: var(--status-warning-50); color: var(--status-warning-700); }
.alert-chip--off { background: var(--neutral-100);       color: var(--muted); }
.kpi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kpi-val { font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-bar {
  flex: 1; height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--neutral-100); min-width: 60px; max-width: 160px;
}
.kpi-bar > span { display: block; height: 100%; background: var(--status-online-500); }
.kpi-bar.warn > span { background: var(--status-warning-500); }
.kpi-bar.crit > span { background: var(--status-critical-500); }

/* ── Lock / status / banner classes (v3.1.0 Phase 3a.4 Gitea 546) ────── */
/* Token-based replacements for the assets.html inline-style hex sites swept
   in 3a.4. All values reference /css/design-tokens.css — 0 hardcoded hex. */
.lock-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 3px;
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px;
  background: var(--status-warning-50);
  color: var(--status-warning-700);
  vertical-align: middle;
}
/* Locked-attribute indicator — mirrors .attr-action--locked at style.css:628 so
   the lock chrome in Overview drawer + enhanced-view rows is visually identical
   to the Attributes tab toggle's locked state. Indicator only — not clickable. */
.lock-indicator {
  margin-left: 6px;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 3px;
  color: var(--status-warning-700);
  background: var(--status-warning-300);
  cursor: default;
  vertical-align: middle;
}
.lock-indicator svg, .lock-indicator i { width: 12px; height: 12px; }
.active-tag {
  margin-left: 6px;
  font-size: 11px;
  color: var(--status-online-500);
}
.duplicate-warn { color: var(--status-warning-500); }
.banner-critical {
  background: var(--status-critical-50);
  border: 1px solid var(--status-critical-300);
  color: var(--status-critical-700);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  font-size: 13px;
}
.import-stat-new    { color: var(--status-online-500); }
.import-stat-update { color: var(--status-warning-500); }

/* ── Method badge (v3.1.0 Phase 3a.2 Gitea 546 — AUTO/MANUAL/IMPORT) ─── */
/* Per design preview ui_kits/asset-detail.html:211. Visual indicator on each
   attribute card showing which source last populated the value. */
.method-badge {
  display: inline-block;
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  vertical-align: middle;
}
.method-badge--auto    { background: var(--brand-cyan-50);     color: var(--brand-cyan-700); }
.method-badge--manual  { background: var(--neutral-100);       color: var(--neutral-700); }
.method-badge--import  { background: var(--status-warning-50); color: var(--status-warning-700); }

/* ── Attributes tab — 5 collapsible group cards (Phase 3b Gitea 547) ───── */
/* Per design preview ui_kits/asset-detail.html PaneAttributes (lines 433-471).
   5 fixed groups + OTHER fallback; each group is a card with a chevron + icon
   + name + counts header and a 2-col grid body of attr-row entries. */
.attr-toolbar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.attr-toolbar .attr-search {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 0 10px; height: 34px; min-width: 200px;
}
.attr-toolbar .attr-search input {
  flex: 1; border: none; outline: none; background: transparent;
  height: 100%; font-size: 13px; color: var(--text);
}
.attr-banner {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; color: var(--neutral-700);
  margin-bottom: 10px; padding: 8px 12px;
  background: var(--brand-cyan-50);
  border: 1px solid var(--brand-cyan-100, var(--brand-cyan-50));
  border-radius: 6px;
}
.attr-banner b.auto    { color: var(--brand-cyan-700);    font-weight: 600; }
.attr-banner b.manual  { color: var(--neutral-800);       font-weight: 600; }
.attr-banner b.import  { color: var(--status-warning-700); font-weight: 600; }
.accord {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; margin-bottom: 10px; overflow: hidden;
}
.accord-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; cursor: pointer; user-select: none;
}
.accord-chev {
  width: 14px; height: 14px; flex-shrink: 0;
  color: var(--muted); transition: transform 0.15s;
}
.accord-chev.open { transform: rotate(90deg); }
.accord-icon {
  width: 13px; height: 13px; color: var(--muted); flex-shrink: 0;
}
.row-asset-icon {
  width: 14px; height: 14px;
  color: var(--brand-cyan-700);
  margin-right: 6px;
  vertical-align: -2px;
}
[data-theme="light"] .row-asset-icon { color: var(--brand-cyan-700); }

/* ── Enhanced row inline view (Phase 3b Surface 8 POST-10) ───────────────── */
.enhanced-row > td {
  padding: 0 !important;
  background: var(--bg);
  border-top: none;
}
[data-theme="light"] .enhanced-row > td { background: var(--bg-surface-2); }

.enh-container {
  padding: 14px 18px;
}

.enh-tabs {
  display: flex; gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.enh-tab {
  height: 28px; padding: 0 10px;
  background: transparent; color: var(--muted);
  border: none; border-bottom: 2px solid transparent;
  font-family: var(--font, 'Geist', system-ui, sans-serif);
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.enh-tab:hover { color: var(--text); }

.enh-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 24px;
}
@media (max-width: 1100px) {
  .enh-grid { grid-template-columns: repeat(2, 1fr); }
}
.enh-col {
  display: flex; flex-direction: column; gap: 8px;
}
.enh-col-title {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--neutral-400);
  margin-bottom: 4px;
}
.enh-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
}
.enh-row-stack {
  flex-direction: column; align-items: flex-start; gap: 4px;
}
.enh-key {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--neutral-400);
  min-width: 84px; flex-shrink: 0;
}
.enh-row-stack .enh-key { min-width: auto; }
.enh-val { color: var(--text); font-size: 12px; }
.enh-chips {
  display: inline-flex; gap: 4px; flex-wrap: wrap;
}
.enh-chips-wrap { gap: 6px; }
.enh-kpi {
  flex-wrap: wrap; gap: 8px; width: 100%;
}
.enh-kpi .kpi-bar { flex: 1; min-width: 80px; max-width: 140px; }

/* ── Assets-page chrome / compact row (Phase 3b Surface 8 POST-1) ────────── */
.action-row .btn i {
  width: 13px; height: 13px;
  margin-right: 5px; vertical-align: -2px;
}
.row-menu-btn {
  padding: 4px 6px;
  background: transparent;
  color: var(--muted);
}
.row-menu-btn i { width: 14px; height: 14px; }
.row-menu-btn:hover { color: var(--text); background: var(--bg); }

.tcp-triplet {
  display: inline-flex; flex-direction: column;
  gap: 2px; align-items: center; vertical-align: middle;
}
.tcp-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--muted);
  display: inline-block;
}
.tcp-dot.ok   { background: var(--status-online-500); }
.tcp-dot.warn { background: var(--status-warning-500); }
.tcp-dot.crit { background: var(--status-critical-500); }

.validity-text {
  font-size: 12px; font-weight: 500;
}
.validity-text.ok    { color: var(--status-online-700); }
.validity-text.warn  { color: var(--status-warning-700); }
.validity-text.crit  { color: var(--status-critical-700); }
.validity-text.muted { color: var(--muted); }
.accord-title {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text);
}
.accord-meta {
  margin-left: auto;
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; color: var(--muted); white-space: nowrap;
}
.accord-body {
  padding: 12px 14px 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;
  border-top: 1px solid var(--border);
}
.attr-row {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.attr-row .attr-label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 10px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.attr-row .attr-value {
  font-size: 13px; color: var(--text); overflow-wrap: anywhere;
}
.attr-row .attr-value.mono {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 12.5px;
}
.attr-row .attr-value.empty { color: var(--muted); }
.attr-row .attr-input {
  width: 100%;
  font-size: 13px;
  padding: 6px 10px;
  height: 32px;
}
/* Overview-edit (Phase 3b — IDENTITY/MONITORING fields use the same compact input shape) */
.dl dd .attr-input {
  width: 100%;
  font-size: 13px;
  padding: 6px 10px;
  height: 32px;
}
/* Alert Settings card row (Phase 3b — Overview edit mode) */
.alert-toggle-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 4px; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.alert-toggle-row input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.alert-toggle-row .alert-toggle-title {
  font-size: 13px; font-weight: 500; color: var(--text);
}
.alert-toggle-row .alert-toggle-desc {
  font-size: 11px; color: var(--muted); margin-top: 1px;
}
.attr-actions {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
}
.attr-action {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted);
  border-radius: 3px;
  transition: color 0.1s, background 0.1s;
}
.attr-action:hover { color: var(--text); background: rgba(128,128,128,0.15); }
.attr-action svg, .attr-action i { width: 12px; height: 12px; }
.attr-action--locked {
  color: var(--status-warning-700);
  background: var(--status-warning-300);
}
.attr-action--locked:hover { color: var(--status-warning-700); background: var(--status-warning-300); }
.attr-action--active {
  color: var(--status-warning-700);
  background: var(--status-warning-300);
}
.attr-action--active:hover { color: var(--status-warning-700); background: var(--status-warning-300); }
.attr-history {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.attr-history-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 5px;
}
.attr-history-close {
  cursor: pointer; padding: 0 6px; line-height: 1; color: var(--muted);
  font-size: 14px; user-select: none;
}
.attr-history-close:hover { color: var(--text); }
.attr-history-row {
  display: flex; gap: 6px; padding: 3px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.4; flex-wrap: wrap;
}
.attr-history-row:last-child { border-bottom: none; }
.attr-history-row .mono {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px;
}
.attr-history-empty {
  padding: 6px 0; font-size: 12px; color: var(--muted); text-align: center;
}
.btn-secondary--active {
  background: var(--brand-cyan-50);
  color: var(--brand-cyan-700);
  border-color: var(--brand-cyan-100, var(--brand-cyan-50));
}

/* ── Credentials tab — Phase 3b Surface 2 (Gitea 547) ─────────────────── */
/* Per design preview ui_kits/asset-detail.html PaneCredentials (lines 473-508).
   .cred-card per linked credential + per-card Link/Unlink buttons (POST-4) +
   .cred-rbac-hint when linked creds are hidden by group permissions (POST-2)
   + "How credentials work" footer explainer. All token-based, theme-aware. */
.cred-toolbar {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.cred-search {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 0 10px; height: 34px;
}
.cred-search .cred-link-select {
  flex: 1; border: none; outline: none; background: transparent;
  height: 100%; font-size: 13px; color: var(--text);
}
.cred-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
  margin-bottom: 8px;
}
.cred-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--brand-cyan-50); color: var(--brand-cyan-700);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cred-icon i { width: 16px; height: 16px; }
.cred-body { flex: 1; min-width: 0; }
.cred-name {
  font-size: 14px; font-weight: 500; color: var(--text);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.cred-name i { width: 12px; height: 12px; color: var(--muted); }
.cred-meta {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; color: var(--muted); margin-top: 3px;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.cred-meta b { color: var(--text); font-weight: 600; }
.cred-protos { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.cred-actions {
  display: flex; gap: 4px; align-items: flex-start; flex-shrink: 0;
}
.cred-actions .btn { padding: 4px 8px; font-size: 11px; }
.cred-actions .unlink { color: var(--status-critical-700); }
.cred-actions .unlink:hover { background: var(--status-critical-50); }
.cred-actions .link    { color: var(--brand-cyan-700); }
.cred-actions .link:hover { background: var(--brand-cyan-50); }
/* Every .link element is clickable — show the hand cursor (was added ad-hoc
   inline in most spots; the clickable asset-name cells in the Devices/Users
   tables missed it, so make it global). */
.link { cursor: pointer; }
.cred-explainer {
  padding: 14px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px;
  margin-top: 14px;
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; color: var(--muted); line-height: 1.5;
}
.cred-explainer b { color: var(--text); font-weight: 600; }
/* Phase 3b Surface 2 (Gitea 547) — RBAC-hidden hint when linked_hidden > 0 */
.cred-rbac-hint {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--status-warning-50);
  border: 1px solid var(--status-warning-300);
  border-radius: 8px;
}
.cred-rbac-hint .helper-text {
  flex: 1; font-size: 12.5px; color: var(--status-warning-700);
}

/* ── Relations tab (Phase 3b Surface 3) ──────────────────────────────────── */
.rel-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.rel-type-select {
  height: 34px; padding: 0 10px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; min-width: 160px;
}
.rel-search {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 0 10px; height: 34px;
  min-width: 200px;
}
.rel-search i { width: 13px; height: 13px; color: var(--muted); }
.rel-search input {
  flex: 1; border: none; outline: none; background: transparent;
  height: 100%; font-size: 13px; color: var(--text);
}
.rel-link-btn i { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }
.rel-target-select {
  width: 100%; margin-bottom: 12px;
}

.rel-empty {
  padding: 30px 20px; text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 10px;
  margin-bottom: 18px;
}
.rel-empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--brand-cyan-50); color: var(--brand-cyan-700);
  margin-bottom: 10px;
}
.rel-empty-icon i { width: 22px; height: 22px; }
.rel-empty-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.rel-empty-explainer {
  font-size: 12.5px; color: var(--muted);
  max-width: 380px; margin: 0 auto; line-height: 18px;
}

.rel-list { display: flex; flex-direction: column; gap: 6px; }
.rel-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px;
}
.rel-icon {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 5px;
  background: var(--brand-cyan-50); color: var(--brand-cyan-700);
  flex-shrink: 0;
}
.rel-icon i { width: 13px; height: 13px; }
.rel-name { font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; }
.rel-name.link:hover { text-decoration: underline; }
.rel-relation-type {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; color: var(--brand-cyan-700);
  text-transform: lowercase;
}
.rel-context {
  flex: 1;
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; color: var(--muted);
}
.rel-unlink i { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; }

/* ── Jobs tab (Phase 3b Surface 4) ───────────────────────────────────────── */
.job-toolbar {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.job-toolbar-spacer { flex: 1; }
/* ── .filt-chip — CANONICAL filter chip for v3.x ──────────────────────────
   Per design-preview/design_handoff_octopus/ui_kits/asset-detail.html:54-55
   Use this class for any "All / Done / Failed / …" style filter row.
   Slightly-rounded rectangle (5px), NOT a pill (999px). 28px height.
*/
.filt-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 10px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px;
  font-size: 12px; font-weight: 500; cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.filt-chip:hover { background: var(--bg); }
.filt-chip.active {
  background: var(--brand-cyan-50); color: var(--brand-cyan-700);
  border-color: var(--brand-cyan-300, var(--brand-cyan-100));
}
.filt-chip .num {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; color: var(--muted); font-weight: 400;
}
.filt-chip.active .num { color: var(--brand-cyan-700); }
.job-toolbar .btn {
  height: 28px; padding: 0 12px; font-size: 12px;
  display: inline-flex; align-items: center;
}
.job-toolbar .btn-primary i {
  width: 12px; height: 12px; margin-right: 4px;
}

.job-tbl {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.job-tbl thead th {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.job-tbl-col-id     { width: 54px; }
.job-tbl-col-action { width: 32px; text-align: right; }
.job-tbl tbody td {
  padding: 12px 14px; font-size: 12px; color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.job-tbl-row { cursor: pointer; }
.job-tbl-row:hover { background: var(--bg); }
.job-tbl-row.open { background: var(--bg); }
.job-tbl-row-expanded > td {
  padding: 8px 14px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.job-tbl tbody:last-child .job-tbl-row-expanded > td { border-bottom: none; }
.job-tbl tbody:last-child .job-tbl-row > td { border-bottom: none; }
.job-tbl .job-id          { color: var(--muted); font-size: 11px; }
.job-tbl .job-script-folder   { color: var(--muted); }
.job-tbl .job-script-basename { color: var(--text); }
.job-tbl .job-when        { color: var(--muted); font-size: 11px; white-space: nowrap; }
.job-tbl .collected {
  display: inline-block; padding: 2px 8px;
  background: var(--status-online-50); color: var(--status-online-700);
  border-radius: 4px;
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px;
}
.job-tbl .collected.zero {
  background: var(--bg); color: var(--muted);
}
.job-tbl .job-result-dash { color: var(--muted); font-size: 11px; }
.job-tbl .job-link-icon   { width: 12px; height: 12px; color: var(--muted); }

.job-expanded {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px;
}
.job-expanded .job-output {
  font-size: 11px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 5px; padding: 10px;
  max-height: 300px; overflow: auto;
  white-space: pre-wrap; word-break: break-all;
  margin: 0;
}

/* ── Changes tab (Phase 3b Surface 5) ────────────────────────────────────── */
.changes-toolbar {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.changes-toolbar-spacer { flex: 1; }
.changes-range-label {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; color: var(--muted);
}
.changes-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 18px;
}
.timeline {
  padding: 0 0 0 18px; border-left: 1px solid var(--border);
  position: relative;
}
.tl-item {
  position: relative; padding: 0 0 18px 18px;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -23px; top: 6px;
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--surface);
  border: 2px solid var(--brand-cyan-500);
}
.tl-item.create::before    { border-color: var(--status-online-500); }
.tl-item.delete::before    { border-color: var(--status-critical-500); }
.tl-item.automated::before { border-color: var(--brand-cyan-500); }
.tl-item.manual::before    { border-color: var(--neutral-500, var(--muted)); }
.tl-head {
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.tl-actor {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 12px; font-weight: 600; color: var(--text);
}
.tl-action { font-size: 12.5px; color: var(--muted); }
.tl-time {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; color: var(--muted);
  margin-left: auto;
}
.tl-diff {
  background: var(--brand-abyss-700); border-radius: 6px;
  padding: 8px 10px; margin-top: 4px;
  display: flex; flex-direction: column; gap: 6px;
}
[data-theme="light"] .tl-diff { background: var(--bg-surface-3); }
.tl-diff-row {
  display: grid; grid-template-columns: 120px 1fr 1fr;
  gap: 6px 10px; align-items: center;
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11.5px;
}
.tl-diff-key {
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px;
}
.tl-diff-old {
  color: var(--muted);
  text-decoration: line-through; text-decoration-thickness: 1px;
}
.tl-diff-new { color: var(--text); font-weight: 500; }

/* ── Identity tab (Phase 3b Surface 6) ───────────────────────────────────── */
.id-summary {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px;
  margin-bottom: 14px;
}
.id-stat-label {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 10px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 5px;
}
.id-stat-val {
  font-size: 14px; font-weight: 600; color: var(--text);
}
.id-stat-val.ok   { color: var(--status-online-700); }
.id-stat-val.warn { color: var(--status-warning-700); }
.id-stat-val.crit { color: var(--status-critical-700); }
.id-summary-subline {
  font-size: 11px; color: var(--muted); margin-top: 4px;
}
.id-summary-subline b { color: var(--text); font-weight: 500; }
.id-summary-actions {
  display: flex; flex-direction: column;
  align-items: flex-end; justify-content: center;
}
.id-summary-actions .btn-primary i {
  width: 13px; height: 13px; margin-right: 4px;
}
.id-dot {
  width: 8px; height: 8px; border-radius: 999px;
  display: inline-block; margin-right: 5px;
  background: var(--muted);
}
.id-dot-ok   { background: var(--status-online-500); }
.id-dot-warn { background: var(--status-warning-500); }
.id-dot-crit { background: var(--status-critical-500); }

.id-history-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; flex-wrap: wrap; gap: 8px;
}
.id-history-title { font-size: 13px; font-weight: 600; color: var(--text); }
.id-history-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.v-tbl {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
  font-size: 12.5px;
}
.v-tbl thead th {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  text-align: left; padding: 9px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .v-tbl thead th { background: var(--bg-surface-2); }
.v-tbl tbody td {
  padding: 9px 12px; vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
.v-tbl tbody tr:last-child td { border-bottom: none; }
.v-tbl tbody tr:hover { background: var(--bg); }
[data-theme="light"] .v-tbl tbody tr:hover { background: var(--bg-surface-2); }
.v-tbl-col-id { width: 36px; }
.v-tbl .v-id   { color: var(--muted); }
.v-tbl .v-time { white-space: nowrap; }
.v-tbl .v-ip   { white-space: nowrap; }
.v-tbl .v-detail {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 240px;
}
.v-method-badge {
  display: inline-block;
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 10px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--text);
  background: var(--bg);
  padding: 2px 7px; border-radius: 3px;
  text-transform: lowercase;
}
[data-theme="light"] .v-method-badge { background: var(--bg-surface-3); }
.score {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.score .dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--muted);
}
.score-5         { color: var(--status-online-700); }
.score-5 .dot    { background: var(--status-online-500); }
.score-3         { color: var(--status-warning-700); }
.score-3 .dot    { background: var(--status-warning-500); }
.score-1         { color: var(--status-critical-700); }
.score-1 .dot    { background: var(--status-critical-500); }
.score-0         { color: var(--muted); }
.score-0 .dot    { background: var(--muted); }
.id-loadmore {
  margin-top: 10px; text-align: center;
}

/* ── Alert ───────────────────────────────────────────────────────────────── */
.alert        { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 13px; }
.alert-error  { background: rgba(239,68,68,0.15); color: var(--status-critical-300); border: 1px solid rgba(239,68,68,0.3); }
.alert-info   { background: rgba(59,130,246,0.15); color: var(--status-info-300); border: 1px solid rgba(59,130,246,0.3); }
.alert-success { background: rgba(34,197,94,0.15); color: var(--status-online-300); border: 1px solid rgba(34,197,94,0.3); }

/* ── Output terminal ─────────────────────────────────────────────────────── */
.terminal { background: var(--bg-inverse); border: 1px solid var(--border); border-radius: 6px; padding: 16px; font-family: 'Fira Code', 'Consolas', monospace; font-size: 13px; line-height: 1.6; height: 400px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; }

/* ── Slide panel ─────────────────────────────────────────────────────────── */
.panel-overlay { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; }
.panel { display: block; position: fixed; top: 0; right: 0; bottom: 0; width: 520px; background: var(--surface); border-left: 1px solid var(--border); z-index: 201; overflow-y: auto; padding: 24px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay { display: flex; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 300; align-items: center; justify-content: center; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 28px; width: 480px; max-width: 95vw; }
.modal h3 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }

/* ── Asset modal (Phase 3b Surface 8 POST-12) ─────────────────────────── */
.asset-modal {
  width: 760px; max-width: 95vw;
  max-height: 90vh;
  padding: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.asset-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.asset-modal-title {
  font-size: 16px; font-weight: 600; color: var(--text); margin: 0;
}
.asset-modal-required-hint {
  font-size: 11px; color: var(--muted);
}
.req { color: var(--status-critical-500); }

.asset-modal-body {
  flex: 1; overflow-y: auto;
  padding: 4px 0;
}
.asset-modal-section {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}
.asset-modal-section:last-child { border-bottom: none; }
.asset-modal-section-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  margin-bottom: 14px;
}
.asset-modal-section-helper {
  font-weight: 400; color: var(--muted); font-size: 12px;
}

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field:last-child { margin-bottom: 0; }
.field-label {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.field-helper {
  font-weight: 400; color: var(--muted); font-size: 11px; text-transform: none; letter-spacing: 0;
}
.field-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px;
  margin-bottom: 12px;
}

/* Check-cards (Monitoring + Alert templates rows) */
.check-card-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.check-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.check-card:hover { background: var(--bg); }
.check-card.active {
  background: var(--brand-cyan-50);
  border-color: var(--brand-cyan-300, var(--brand-cyan-100));
}
[data-theme="light"] .check-card { background: var(--bg-surface); }
[data-theme="light"] .check-card:hover { background: var(--bg-surface-2); }
.check-card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--bg);
  color: var(--brand-cyan-700);
  flex-shrink: 0;
}
[data-theme="light"] .check-card-icon { background: var(--bg-surface-2); }
.check-card.active .check-card-icon {
  background: var(--brand-cyan-100, var(--brand-cyan-50));
  color: var(--brand-cyan-700);
}
.check-card-icon i { width: 18px; height: 18px; }
.check-card-body { flex: 1; min-width: 0; }
.check-card-row1 { display: flex; align-items: center; gap: 6px; }
.check-card-name { font-size: 13px; font-weight: 600; color: var(--text); }
.check-card-port {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 10px; color: var(--muted);
  background: var(--bg);
  padding: 1px 6px; border-radius: 3px;
}
[data-theme="light"] .check-card-port { background: var(--bg-surface-2); }
.check-card-subline {
  font-size: 11.5px; color: var(--muted);
  margin-top: 2px;
}
.check-card-input {
  width: 16px; height: 16px;
  flex-shrink: 0; cursor: pointer;
  accent-color: var(--brand-cyan-500);
}

.asset-modal-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
[data-theme="light"] .asset-modal-footer { background: var(--bg-surface-2); }
.asset-modal-footer-status {
  display: inline-flex; align-items: center; gap: 5px;
}
.asset-modal-footer-actions {
  display: flex; gap: 8px;
}

/* ── Context menu ────────────────────────────────────────────────────────── */
.context-menu { position: fixed; z-index: 500; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px; min-width: 180px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.context-item { padding: 8px 14px; border-radius: 5px; cursor: pointer; font-size: 13px; }
.context-item:hover { background: rgba(128,128,128,0.12); }
.context-sep  { height: 1px; background: var(--border); margin: 4px 0; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.tabs      { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab       { padding: 10px 20px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ── Misc ────────────────────────────────────────────────────────────────── */
.text-muted   { color: var(--muted); }
.text-center  { text-align: center; }
.mono         { font-family: 'Fira Code', 'Consolas', monospace; }
.truncate     { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.gap          { gap: 10px; }
.full-width   { width: 100%; }

/* ── Protocol step view ──────────────────────────────────────────────────── */
.step-list    { display: flex; flex-direction: column; gap: 8px; }
.step-item    { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.step-icon    { font-size: 18px; flex-shrink: 0; }
.step-body    { flex: 1; }
.step-name    { font-weight: 600; }
.step-detail  { font-size: 13px; color: var(--muted); margin-top: 4px; }
.step-waiting { border-color: var(--warning); background: rgba(245,158,11,0.05); }
.step-done    { opacity: 0.6; }

/* ── Live monitor grid ───────────────────────────────────────────────────── */
.monitor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.monitor-card { background: var(--surface); border: 2px solid var(--border); border-radius: 8px; padding: 14px; }
.monitor-card.online  { border-color: var(--success); }
.monitor-card.offline { border-color: var(--danger); }

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.spinner { display:inline-block; width:14px; height:14px; border:2px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin 0.8s linear infinite; vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Alert Center (Surface 9.1) ─────────────────────────────────────────── */
.ac-page-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 16px;
}
.ac-page-header h1 { margin: 0 0 4px 0; }
.ac-count-subline {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; color: var(--muted); text-transform: lowercase;
}
.ac-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ac-toolbar .btn-group { display: inline-flex; gap: 0; }
.ac-toolbar .btn-group .btn-sm { border-radius: 0; }
.ac-toolbar .btn-group .btn-sm:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.ac-toolbar .btn-group .btn-sm:last-child  { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: none; }

/* Status-tab strip (Open / Ack / Resolved / Snoozed) */
.ac-tabs { display: flex; gap: 4px; align-items: center; }
.ac-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 5px; cursor: pointer; user-select: none;
  background: transparent; border: 1px solid transparent;
  color: var(--muted); font-size: 13px; font-weight: 500;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ac-tab:hover { background: var(--bg); color: var(--text); }
.ac-tab-active {
  background: var(--brand-cyan-50); color: var(--brand-cyan-700);
  border-color: var(--brand-cyan-300, var(--brand-cyan-100));
}
.ac-tab .num {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; color: var(--muted); font-weight: 400;
}
.ac-tab-active .num { color: var(--brand-cyan-700); }

/* Severity-bucket chips (Critical / Warning / Info) */
.sev-bucket {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border-radius: 5px; cursor: pointer; user-select: none;
  border: 1px solid var(--border); background: transparent;
  font-size: 12px; font-weight: 500; color: var(--text);
  transition: background 0.12s, border-color 0.12s;
}
.sev-bucket:hover { background: var(--bg); }
.sev-bucket .sev-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sev-bucket .num {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; color: var(--muted); font-weight: 400;
}
.sev-bucket-crit.active { background: var(--status-critical-50, rgba(239,68,68,0.08)); border-color: var(--status-critical-300, rgba(239,68,68,0.4)); color: var(--status-critical-700, var(--danger)); }
.sev-bucket-warn.active { background: var(--status-warning-50,  rgba(234,179,8,0.08));  border-color: var(--status-warning-300,  rgba(234,179,8,0.4));  color: var(--status-warning-700,  var(--warning)); }
.sev-bucket-info.active { background: var(--status-info-50,     rgba(59,130,246,0.08)); border-color: var(--status-info-300,     rgba(59,130,246,0.4)); color: var(--status-info-700,     var(--info)); }
.sev-bucket.active .num { color: inherit; }

/* Severity dots (used inside the ALERT cell + sev-bucket) */
.sev-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; vertical-align: middle; }
.sev-dot-crit { background: var(--status-critical-500, var(--danger)); }
.sev-dot-warn { background: var(--status-warning-500,  var(--warning)); }
.sev-dot-info { background: var(--status-info-500,     var(--info)); }

/* Alert row — ALERT cell (severity-dot + bold-title + subline-mono detail) */
/* #998 — same truncation contract as .alert-cell-detail below: a long title
   must not widen the table past the card (the clip ate the Actions column).
   Full text stays reachable via the hover title attr + the row expansion. */
.alert-cell-title {
  display: flex; align-items: baseline; gap: 8px;
  font-weight: 500; cursor: pointer; user-select: none;
  /* #1004: 26vw→21vw + 220→180 min — at 1280px the 332px title cap still pushed the
     capped 11-column table ~36px past the card; 21vw (268px) leaves slack. */
  max-width: clamp(180px, 21vw, 600px);
}
.alert-cell-title .alert-title-text {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alert-cell-title .chev {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; color: var(--muted);
}
.alert-cell-detail {
  font-size: 12px; color: var(--muted); margin-top: 2px;
  /* #998: share the title's adaptive cap — a long DESCRIPTION widens the table
     past the card exactly like a long title did (fixed 600px overflowed 1280px
     viewports once the other 10 columns took their ~840px). */
  max-width: clamp(180px, 21vw, 600px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Asset cell (lucide icon + name + IP subline) */
.alert-asset {
  display: inline-flex; align-items: center; gap: 8px;
}
.alert-asset .row-asset-icon { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
.alert-asset .alert-asset-body { display: inline-flex; flex-direction: column; line-height: 1.2; min-width: 0; }
/* #1004 — the last un-capped expanders after #998 (title/detail already capped):
   production-shaped long asset + customer names widen the 11-column table past the
   card, pushing the Actions column (Ack) beyond the .table-scroll edge. Same
   truncation contract; full values stay reachable via title tooltip + drawer. */
.alert-asset .alert-asset-name { font-size: 13px; color: var(--text); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.alert-asset .alert-asset-ip { font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace); font-size: 11px; color: var(--muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.ac-cell-customer { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Alert row — severity-colored vertical stripe at LEFT edge (always visible).
   Uses box-shadow inset on the first <td> so the stripe paints inside the cell
   without shifting layout (border-left would push the column 3px to the right). */
tr.alert-row.alert-row-crit > td:first-child { box-shadow: inset 3px 0 0 var(--status-critical-500, var(--danger)); }
tr.alert-row.alert-row-warn > td:first-child { box-shadow: inset 3px 0 0 var(--status-warning-500,  var(--warning)); }
tr.alert-row.alert-row-info > td:first-child { box-shadow: inset 3px 0 0 var(--status-info-500,     var(--info)); }

/* Enhanced view — gray bg on alert rows so each row visually separates from
   the next; the inline-explain panel keeps its var(--surface) bg (set inline
   on the <td>) so the white panel sits on top of the gray row above. */
[data-acmode="enhanced"] tr.alert-row > td {
  background: var(--bg-surface-2, var(--bg));
}
[data-acmode="enhanced"] tr.alert-row:hover > td {
  background: var(--bg);
}

/* Surface 9.2 — Inline expansion two-panel layout (DETAILS / AVAILABLE ACTIONS).
   Header + label cells use the primitives .label-mono utility class directly
   in the HTML (no per-page redefine). Timestamp values use .subline-mono. */
.ac-explain-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  align-items: start;
}
.ac-explain-panel {
  background: var(--bg-surface-2, var(--bg));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.ac-explain-header { margin: 0 0 12px 0; }   /* .label-mono in HTML provides font; this just resets margin */
.ac-detail-list {
  display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px;
  margin: 0;
}
.ac-detail-list dt { align-self: center; }   /* font from .label-mono utility class in HTML */
.ac-detail-list dd { margin: 0; color: var(--text); font-size: 14px; }
/* os_event alert detail lists one matched event per line — honor the newlines
   in the detail string instead of collapsing them (Gitea #638). */
.ac-detail-list dd[data-testid="ac-detail-cause"] { white-space: pre-line; }
/* Keep the row Resolve/Ack buttons on one line — the narrow actions column was
   letting the inline-flex buttons wrap (Ack dropping under Resolve). Gitea #638. */
.ac-row-actions { white-space: nowrap; }
.ac-row-actions .btn-sm { margin-right: 6px; }

/* Gitea #599 — diagnostic-hint pill icon next to the alert title in compact view.
   Lucide lightbulb, cyan-tinted, sized to align with the chevron + sev-dot. */
.hint-pill {
  display: inline-block; width: 14px; height: 14px;
  margin-left: 6px; vertical-align: middle;
  color: var(--brand-cyan-500); flex-shrink: 0;
  cursor: help;
}

/* Gitea #599 — diagnostic-hint callout in the expanded DETAILS panel.
   Cyan-tinted box below the metadata list; preserves paragraph breaks via
   white-space: pre-wrap so the hint text renders naturally. */
.ac-hint-callout {
  margin-top: 16px; padding: 12px 14px;
  background: var(--brand-cyan-50);
  border: 1px solid var(--brand-cyan-300);
  border-radius: 6px;
  display: flex; gap: 12px; align-items: flex-start;
}
.ac-hint-icon {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
  color: var(--brand-cyan-700);
}
.ac-hint-body { flex: 1; min-width: 0; }
.ac-hint-header {
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--brand-cyan-700);
  margin-bottom: 4px;
}
.ac-hint-text {
  font-size: 13px; color: var(--text);
  line-height: 1.5; white-space: pre-wrap;
}

/* Available-actions stacked clickable cards */
.ac-action-cards { display: flex; flex-direction: column; gap: 8px; }
/* Pair of nav-style action cards (Run script + Show asset) on one row so the
   panel height stays close to the DETAILS panel beside it. */
.ac-action-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ac-action-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  text-align: left; cursor: pointer; width: 100%;
  font: inherit; color: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.ac-action-card:hover {
  background: var(--brand-cyan-50);
  border-color: var(--brand-cyan-300, var(--brand-cyan-100));
}
.ac-action-card-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--brand-cyan-700);
  margin-top: 2px;
}
.ac-action-card-body { flex: 1; min-width: 0; }
.ac-action-card-title {
  font-size: 14px; font-weight: 500; color: var(--text);
  margin-bottom: 2px;
}
.ac-action-card-sub {
  font-size: 12px; color: var(--muted); line-height: 1.45;
}
.ac-action-empty { font-size: 13px; padding: 6px 4px; }

/* Surface 9.3 — alerts-admin Rules-tab primitives (per Alerts-Admin.png) */

/* Cyan-tinted Lookup-by-asset card header — re-uses existing .card chrome but
   with a cyan-50 wash to match the design. overflow:visible so the absolute-
   positioned results dropdown anchored to the search input wrapper isn't
   clipped by the card's bottom edge. */
.aa-lookup-card {
  background: var(--brand-cyan-50);
  border-color: var(--brand-cyan-300, var(--brand-cyan-100));
  overflow: visible;
}
[data-theme="light"] .aa-lookup-card { background: var(--brand-cyan-50); }
/* Search-input wrapper inside the lookup card — relative-positioned so the
   absolute results dropdown anchors here; high z-index so it renders above
   the surrounding cyan card + filter bar below. */
.aa-lookup-search { position: relative; flex: 1; min-width: 240px; max-width: 480px; z-index: 60; }
.aa-lookup-results {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border); border-top: none;
  max-height: 260px; overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  z-index: 60;
}

/* Rules-table Edit + Delete actions — flex right-aligned inline group */
.rule-actions {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
/* Icon-only critical-tinted button — matches the design's right-edge trash
   icon. Square, no fill, hover lifts to a subtle red-50 background. */
.btn-icon-danger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 5px;
  border: 1px solid transparent; background: transparent;
  color: var(--status-critical-700, var(--danger));
  cursor: pointer; padding: 0;
  transition: background 0.12s, border-color 0.12s;
}
.btn-icon-danger:hover {
  background: var(--status-critical-50, rgba(239,68,68,0.08));
  border-color: var(--status-critical-300, rgba(239,68,68,0.4));
}
.btn-icon-danger i { width: 14px; height: 14px; }

/* Rule row — same severity LEFT-stripe pattern as alerts.html (.alert-row) */
tr.rule-row.rule-row-crit > td:first-child { box-shadow: inset 3px 0 0 var(--status-critical-500, var(--danger)); }
tr.rule-row.rule-row-warn > td:first-child { box-shadow: inset 3px 0 0 var(--status-warning-500,  var(--warning)); }
tr.rule-row.rule-row-info > td:first-child { box-shadow: inset 3px 0 0 var(--status-info-500,     var(--info)); }

/* Rule TYPE / CATEGORY pills — mono-uppercase 10/600 chrome, per-value tint */
.rule-pill {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.rule-pill-type-status     { background: var(--brand-cyan-50);     color: var(--brand-cyan-700);     border-color: var(--brand-cyan-300, var(--brand-cyan-100)); }
.rule-pill-type-threshold  { background: var(--status-warning-50); color: var(--status-warning-700); border-color: var(--status-warning-300); }
.rule-pill-type-os_event   { background: var(--status-info-50);    color: var(--status-info-700);    border-color: var(--status-info-300); }
.rule-pill-type-ingest     { background: var(--bg-surface-2);      color: var(--muted);              border-color: var(--border); }
.rule-pill-type-custom     { background: var(--bg-surface-2);      color: var(--text);               border-color: var(--border); }
.rule-pill-type-signin     { background: var(--status-critical-50, rgba(239,68,68,0.08)); color: var(--status-critical-700, var(--danger)); border-color: var(--status-critical-300, rgba(239,68,68,0.4)); } /* #707 */
.rule-pill-type-unknown    { background: var(--bg-surface-2);      color: var(--muted);              border-color: var(--border); }
.rule-pill-cat-availability { background: var(--brand-cyan-50);     color: var(--brand-cyan-700);     border-color: var(--brand-cyan-300, var(--brand-cyan-100)); }
.rule-pill-cat-capacity     { background: var(--status-warning-50); color: var(--status-warning-700); border-color: var(--status-warning-300); }
.rule-pill-cat-security     { background: var(--status-critical-50, rgba(239,68,68,0.08)); color: var(--status-critical-700, var(--danger)); border-color: var(--status-critical-300, rgba(239,68,68,0.4)); }
.rule-pill-cat-resources    { background: var(--status-warning-50); color: var(--status-warning-700); border-color: var(--status-warning-300); }
.rule-pill-cat-identity     { background: var(--status-info-50);    color: var(--status-info-700);    border-color: var(--status-info-300); }
.rule-pill-cat-backup       { background: var(--bg-surface-2);      color: var(--text);               border-color: var(--border); }
.rule-pill-cat-external     { background: var(--bg-surface-2);      color: var(--text);               border-color: var(--border); }
.rule-pill-cat-unknown      { background: var(--bg-surface-2);      color: var(--muted);              border-color: var(--border); }

/* Severity text label with colored dot (matches alerts.html sev-bucket pattern but inline) */
.rule-sev-text {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
}
.rule-sev-text-crit { color: var(--status-critical-700, var(--danger)); }
.rule-sev-text-warn { color: var(--status-warning-700,  var(--warning)); }
.rule-sev-text-info { color: var(--status-info-700,     var(--info)); }

/* Per-row NOTIFY indicator — bell icon + channel count when configured;
   muted bell-off when not. Surface 9.3 FF3. */
.rule-notify {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; font-weight: 500;
}
.rule-notify i { width: 14px; height: 14px; }
.rule-notify-on  { color: var(--brand-cyan-700); }
.rule-notify-off { color: var(--muted); }

/* Per-row ON checkbox — slightly larger than default for tap-target on touch devices */
.rule-on-check {
  width: 18px; height: 18px;
  cursor: pointer;
  accent-color: var(--brand-cyan-700);
}
.rule-on-check:disabled { cursor: not-allowed; opacity: 0.5; }

/* Group-by header row (presentation-only client-side grouping) */
.alert-group-header td {
  background: var(--bg-surface-2, var(--bg));
  border-top: 1px solid var(--border);
  padding: 8px 16px;
}
.alert-group-header .group-label {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 600;
}
.alert-group-header .group-count {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; color: var(--muted); margin-left: 8px;
}

/* ── Surface 9.5 — Scheduler page rows (per scheduler.png) ──────────────── */
/* Row-level severity stripe + muted-row pattern for disabled tasks. Mirrors
   the alerts.html .alert-row + alerts-admin .rule-row LEFT-stripe approach
   (box-shadow inset on td:first-child to avoid layout shift). */
.sched-row > td { vertical-align: middle; }
.sched-row-failing > td:first-child {
  box-shadow: inset 3px 0 0 var(--status-critical-500);
}
.sched-row-disabled > td {
  opacity: 0.65;
}

/* ── Surface 9.4 — New Rule modal (per Alerts-admin-new-rule.png) ───────── */
/* 95vw two-column modal: LEFT rule-definition form, RIGHT live affected-assets
   sidebar. Wide modal because the form is dense and the sidebar needs room
   for asset rows. Sticky header + footer; LEFT and RIGHT panels each scroll
   independently. */
.rule-modal-card {
  width: 95vw; max-width: 1280px; max-height: 92vh;
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.rule-modal-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 16px 24px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.rule-modal-header h3 { margin: 0; font-size: 16px; }
.rule-modal-header .rule-modal-subline {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; color: var(--neutral-400);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.rule-modal-grid {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 7fr 3fr; gap: 0;
}
.rule-modal-left {
  overflow-y: auto; padding: 20px 24px;
}
.rule-modal-right {
  overflow-y: auto; padding: 16px 20px;
  border-left: 1px solid var(--border);
  background: var(--bg-surface-2, var(--bg));
  display: flex; flex-direction: column; gap: 10px;
}
.rule-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 24px; border-top: 1px solid var(--border);
  flex-shrink: 0;
}
@media (max-width: 1100px) {
  .rule-modal-grid { grid-template-columns: 1fr; }
  .rule-modal-right { border-left: none; border-top: 1px solid var(--border); }
}

/* Section blocks inside the LEFT form */
.rule-section { padding: 6px 0 14px 0; border-bottom: 1px solid var(--border); }
.rule-section:last-child { border-bottom: none; }
.rule-section-title {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--neutral-400);
  margin: 4px 0 10px 0;
}
.rule-section-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rule-section-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* RIGHT panel — affected-assets list */
.rule-affected-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
}
.rule-affected-title {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--neutral-400);
}
.rule-affected-count {
  font-size: 13px; font-weight: 600; color: var(--brand-cyan-700);
}
.rule-affected-search {
  width: 100%; padding: 6px 8px; font-size: 12px;
}
.rule-affected-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.rule-affected-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 4px;
  background: var(--surface, var(--bg));
  border: 1px solid var(--border);
  font-size: 12px;
}
.rule-affected-row:hover { background: var(--bg-surface-2, var(--bg)); }
.rule-affected-row .rule-aff-icon { width: 16px; height: 16px; color: var(--neutral-400); flex-shrink: 0; }
.rule-affected-row .rule-aff-name { flex: 1 1 auto; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rule-affected-row .rule-aff-meta { font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace); font-size: 11px; color: var(--neutral-400); flex-shrink: 0; }
.rule-affected-empty {
  padding: 14px; text-align: center; font-size: 12px; color: var(--neutral-400);
}
.rule-affected-footer {
  font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
  font-size: 11px; color: var(--neutral-400);
  text-align: center; padding: 6px 0 0 0;
  border-top: 1px solid var(--border); margin-top: 4px;
}

/* ── Alpine x-cloak ──────────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* L-A (#938) — global license banner (rendered by octopus-nav.js).
   D3 (#960): tokenized so it honors LIGHT + dark theme like .readonly-banner
   (was hardcoded dark hex → unreadable on light theme on EVERY page). */
/* Full-width strip pinned directly under the fixed nav — its own row, never inside
   the nav flex. `.main` reserves --banner-h (set by octopus-nav.js) so content clears it. */
.license-banner { position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 90;
  padding: 10px 24px; font-size: 13px; line-height: 1.4; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(10,22,40,.06); }
.license-banner-info   { background: var(--status-info-50);     color: var(--status-info-700);     border-bottom: 1px solid var(--status-info-300); }
.license-banner-warn   { background: var(--status-warning-50);  color: var(--status-warning-700);  border-bottom: 1px solid var(--status-warning-300); }
.license-banner-danger { background: var(--status-critical-50); color: var(--status-critical-700); border-bottom: 1px solid var(--status-critical-300); }
.license-banner-link { margin-left: 6px; font-weight: 600; text-decoration: underline; cursor: pointer; color: inherit; }