/* =====================================================================
   RedMimicry webinterface — design system
   ---------------------------------------------------------------------
   Warm graphite surfaces + refined crimson accent. Single source of
   truth for visual tokens, primitives (buttons / chips / cards /
   tables / inputs), and the app shell (sidebar / topbar / page).

   Layered so Bootstrap pages still look coherent: legacy rules that
   re-theme .btn-primary / .card / .form-control etc. live after the
   primitives and keep existing templates on brand during the port.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
    /* Surfaces — warm graphite */
    --bg:            #1b1b1d;
    --bg-1:          #222224;
    --bg-2:          #27272a;
    --bg-3:          #2e2e31;
    --bg-4:          #343438;
    --bg-header:     #1e1e20;
    --bg-sidebar:    #161618;
    --bg-input:      #1a1a1c;

    /* Borders */
    --line:          #2e2e31;
    --line-strong:   #3a3a3e;
    --line-hairline: #242426;

    /* Text */
    --fg:            #ededee;
    --fg-1:          #c8c8ca;
    --fg-2:          #909094;
    --fg-3:          #6b6b6f;
    --fg-4:          #4a4a4e;

    /* Accent (refined crimson) */
    --accent:        #c8323c;
    --accent-1:      #e14651;
    --accent-2:      #9b242b;
    --accent-tint:   rgba(200, 50, 60, 0.12);
    --accent-tint-2: rgba(200, 50, 60, 0.20);
    --accent-ring:   rgba(200, 50, 60, 0.35);

    /* Semantic */
    --ok:   #4ea674;
    --warn: #d49a3a;
    --err:  #c8323c;
    --info: #5b8fcb;

    --ok-tint:   rgba(78, 166, 116, 0.14);
    --warn-tint: rgba(212, 154, 58, 0.16);
    --err-tint:  rgba(200, 50, 60, 0.16);
    --info-tint: rgba(91, 143, 203, 0.16);

    /* Radii */
    --r-1: 4px;
    --r-2: 6px;
    --r-3: 8px;
    --r-4: 10px;

    /* Shadow */
    --shadow-1: 0 1px 0 rgba(0,0,0,0.25), 0 0 0 1px var(--line) inset;
    --shadow-2: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px var(--line-strong) inset;

    /* Type */
    --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* Density (tweakable) */
    --row-h: 40px;
    --cell-pad-y: 10px;
    --cell-pad-x: 14px;

    /* Layout */
    --sidebar-w: 232px;
    --topbar-h: 44px;

    /* Legacy aliases kept for backward compatibility during port. */
    --background-dark:       var(--bg);
    --background-light-dark: var(--bg-2);
    --background-darker:     var(--bg-1);
    --border-color:          var(--line-strong);
    --text-color:            var(--fg);
    --accent-color:          var(--accent);
    --accent-hover:          var(--accent-2);
    --placeholder-color:     var(--fg-3);
    --input-focus-color:     var(--accent);
    --background-header:     var(--bg-header);
    --header-border-color:   var(--line);
    --background-hover:      var(--bg-3);
    --input-padding:         0.5rem;
}

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

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    font-size: 13.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "cv11";
}

/* Cross-document view transitions: the browser snapshots the outgoing
   page, navigates, snapshots the incoming page, and cross-fades between
   them. Eliminates the white flash between full-page navigations. Chrome
   126+ / Edge support this; other browsers fall back to instant nav. */
@view-transition { navigation: auto; }

/* Anchor the sidebar across cross-document transitions. By giving it its
   own view-transition-name, the browser pulls it out of the root
   crossfade group; with animation:none the sidebar's old/new snapshots
   never animate. Net effect: the sidebar (icons, labels, collapse state)
   visually stays put while the page content fades. */
.sidebar { view-transition-name: rm-sidebar; }
::view-transition-group(rm-sidebar),
::view-transition-old(rm-sidebar),
::view-transition-new(rm-sidebar) {
    animation: none;
}
body { min-height: 100vh; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #38383c; border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #48484c; }

.mono, code, kbd, samp, pre {
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0;
}
code {
    background: var(--bg-2);
    border: 1px solid var(--line);
    padding: 1px 6px;
    border-radius: var(--r-1);
    color: var(--fg-1);
}

:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-ring);
    border-radius: var(--r-2);
}

h1, h2, h3, h4, h5 {
    color: var(--fg);
    font-weight: 600;
    letter-spacing: -0.01em;
}
h1 { font-size: 22px; margin: 0 0 12px; }
h2 { font-size: 17px; margin: 18px 0 10px; }
h3 { font-size: 14px; margin: 0 0 8px; }

hr.hr-soft { height: 1px; background: var(--line); border: none; margin: 16px 0; }

/* ---------- Chips ---------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--fg-1);
    font-size: 11.5px;
    line-height: 18px;
    white-space: nowrap;
}
/* When a chip is rendered as a link (e.g., MITRE ATT&CK technique tags
   pointing at attack.mitre.org), drop the underline and brighten on hover
   so it reads as a chip first, link second. */
a.chip {
    text-decoration: none;
    transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}
a.chip:hover {
    background: var(--bg-3);
    border-color: var(--accent);
    color: var(--fg);
}
.chip .dot {
    width: 6px; height: 6px; border-radius: 999px; background: var(--fg-3);
    flex-shrink: 0;
}
.chip.chip-ok     { color: #b9e0c9; background: var(--ok-tint);   border-color: rgba(78,166,116,0.3); }
.chip.chip-ok .dot   { background: var(--ok); box-shadow: 0 0 0 3px rgba(78,166,116,0.18); }
.chip.chip-warn   { color: #e9cf9a; background: var(--warn-tint); border-color: rgba(212,154,58,0.3); }
.chip.chip-warn .dot { background: var(--warn); box-shadow: 0 0 0 3px rgba(212,154,58,0.18); }
.chip.chip-err    { color: #ecb5b9; background: var(--err-tint);  border-color: rgba(200,50,60,0.3); }
.chip.chip-err .dot  { background: var(--err); box-shadow: 0 0 0 3px rgba(200,50,60,0.18); }
.chip.chip-info   { color: #c2d7ee; background: var(--info-tint); border-color: rgba(91,143,203,0.3); }
.chip.chip-info .dot { background: var(--info); box-shadow: 0 0 0 3px rgba(91,143,203,0.18); }
.chip.chip-accent { color: #ecb5b9; background: var(--accent-tint); border-color: rgba(200,50,60,0.3); }
.chip.chip-off     { color: var(--fg-3); background: var(--bg-2); border-color: var(--line); }
.chip.chip-off .dot { background: var(--fg-3); box-shadow: none; }

/* ---------- Buttons (new primitives) ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--r-2);
    border: 1px solid var(--line-strong);
    background: var(--bg-2);
    color: var(--fg);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 60ms ease;
}
.btn:hover { background: var(--bg-3); border-color: #45454a; color: var(--fg); text-decoration: none; }
.btn:active { transform: translateY(0.5px); }
.btn.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.btn.btn-primary:hover { background: var(--accent-1); border-color: var(--accent-1); color: #fff; }
.btn.btn-primary:active { background: var(--accent-2); border-color: var(--accent-2); }
.btn.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--fg-1);
}
.btn.btn-ghost:hover { background: var(--bg-2); color: var(--fg); }
.btn.btn-danger {
    background: transparent;
    border-color: rgba(200,50,60,0.4);
    color: #e9a7ab;
}
.btn.btn-danger:hover { background: var(--accent-tint); border-color: var(--accent); color: #fff; }
.btn.btn-sm { height: 26px; font-size: 12px; padding: 0 10px; gap: 6px; }
.btn.btn-icon { padding: 0; width: 32px; justify-content: center; }
.btn.btn-icon.btn-sm { width: 26px; }
.btn.disabled, .btn:disabled { opacity: 0.5; pointer-events: none; }
.btn .icon { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }

/* ---------- Inputs / selects ---------- */
.input {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 10px;
    border-radius: var(--r-2);
    background: var(--bg-input);
    border: 1px solid var(--line-strong);
    color: var(--fg);
    font-size: 13px;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
    width: 100%;
}
.input:hover { border-color: #45454a; }
.input:focus-within { border-color: transparent; box-shadow: 0 0 0 2px var(--accent); }
.input > input,
.input > select,
.input > textarea {
    background: transparent;
    border: none;
    outline: none;
    /* Pin the filled-text color explicitly to --fg rather than relying
       on `color: inherit`. On some user-agents / extensions the
       inherited color can land at the muted placeholder tone, which
       was indistinguishable from ::placeholder in user testing.
       --fg and --fg-3 are separate tokens; keep them separate in the
       rule set. */
    color: var(--fg);
    flex: 1;
    min-width: 0;
    font: inherit;
    padding: 0;
}
.input > input:focus,
.input > select:focus,
.input > textarea:focus { box-shadow: none !important; outline: none; }
.input > .icon { color: var(--fg-3); fill: var(--fg-3); width: 14px; height: 14px; flex-shrink: 0; }
.input-lg { height: 40px; font-size: 14px; padding: 0 14px; }

/* Use `opacity: 1` because some browsers apply ~0.54 to placeholder
   text by default, which when combined with our muted --fg-3 tone
   pushed the placeholder against the input background far enough to
   read as "empty filled value" rather than "placeholder". */
input::placeholder, textarea::placeholder { color: var(--fg-3); opacity: 1; }

.select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-input);
    border: 1px solid var(--line-strong);
    color: var(--fg);
    height: 32px;
    padding: 0 32px 0 12px;
    border-radius: var(--r-2);
    font: inherit;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23909094' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.select:hover { border-color: #45454a; }
.select:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px var(--accent); }
.select option { background: var(--bg-2); color: var(--fg); }

.label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-1);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.help {
    margin-top: 6px;
    font-size: 12px;
    color: var(--fg-3);
    line-height: 1.5;
}
.help code { font-size: 11.5px; padding: 1px 5px; }

/* ---------- Cards ---------- */
.card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    overflow: hidden;
    color: var(--fg);
}
.card-header {
    padding: 14px 18px;
    background: var(--bg-1);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0;
}
.card-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--fg);
}
.card-header .sub {
    color: var(--fg-3);
    font-size: 12.5px;
    font-weight: 400;
    margin-top: 2px;
    line-height: 1.5;
}
.card-body { padding: 18px; }
.card-body.flush { padding: 0; }

/* ---------- Page scaffolding ---------- */
.page { padding: 24px 32px 48px; max-width: 1440px; }
.page.wide { max-width: 1680px; }
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.page-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}
.page-subtitle {
    color: var(--fg-3);
    font-size: 13px;
    margin-top: 4px;
}
.crumbs { display: flex; align-items: center; gap: 8px; color: var(--fg-3); font-size: 12.5px; margin-bottom: 10px; }
.crumbs a:hover { color: var(--fg); }
.crumbs .sep { color: var(--fg-4); width: 12px; height: 12px; }

.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.toolbar > .spacer { flex: 1; }
.toolbar-count { color: var(--fg-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ---------- App shell ---------- */
.shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}
.shell.collapsed,
html.sidebar-collapsed .shell { --sidebar-w: 56px; }

/* Sidebar */
.sidebar {
    background: var(--bg-sidebar);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar-brand {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-hairline);
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
}
.sidebar-logo-link { display: flex; align-items: center; text-decoration: none; }
.sidebar-logo { height: 18px; width: auto; display: block; }
.sidebar-logo-icon { display: none; height: 26px; width: 26px; object-fit: contain; }

.nav-section {
    padding: 12px 10px 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-4);
}
.nav {
    flex: 1;
    overflow-y: auto;
    padding: 6px 10px;
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--r-2);
    color: var(--fg-1);
    font-size: 13px;
    cursor: pointer;
    position: relative;
    transition: background 100ms ease, color 100ms ease;
    height: 32px;
    text-decoration: none;
}
.nav-item:hover { background: var(--bg-2); color: var(--fg); text-decoration: none; }
.nav-item .icon { color: var(--fg-3); fill: var(--fg-3); flex-shrink: 0; width: 16px; height: 16px; }
.nav-item.active {
    background: var(--bg-2);
    color: var(--fg);
}
.nav-item.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 6px; bottom: 6px;
    width: 2px;
    background: var(--accent-1);
    border-radius: 2px;
}
.nav-item.active .icon { color: var(--accent-1); fill: var(--accent-1); }
.nav-item .count {
    margin-left: auto;
    color: var(--fg-3);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}
.shell.collapsed .nav-item .nav-label,
html.sidebar-collapsed .nav-item .nav-label,
.shell.collapsed .nav-item .count,
html.sidebar-collapsed .nav-item .count,
.shell.collapsed .nav-section,
html.sidebar-collapsed .nav-section { display: none; }
.shell.collapsed .sidebar-brand,
html.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 14px 0; cursor: pointer; }
.shell.collapsed .sidebar-logo-word,
html.sidebar-collapsed .sidebar-logo-word { display: none; }
.shell.collapsed .sidebar-logo-icon,
html.sidebar-collapsed .sidebar-logo-icon { display: block; }
.shell.collapsed .nav-item,
html.sidebar-collapsed .nav-item { justify-content: center; }

/* Topbar */
.topbar {
    height: var(--topbar-h);
    background: var(--bg-header);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    padding: 0 18px;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 5;
}
.topbar .spacer { flex: 1; }
.topbar .ib-item {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--fg-2);
    font-size: 12.5px;
    text-decoration: none;
}
.topbar a.ib-item:hover { color: var(--fg); text-decoration: none; }
.topbar .ib-item b { color: var(--fg-1); font-weight: 600; }
.topbar .ib-item .icon { width: 14px; height: 14px; fill: currentColor; }
.topbar .ib-sep { width: 1px; height: 14px; background: var(--line-strong); }
.topbar .admin-tag { color: var(--accent-1); margin-left: 2px; }
.topbar-sidebar-btn {
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    color: var(--fg-3);
    border-radius: var(--r-1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}
.topbar-sidebar-btn:hover { background: var(--bg-2); color: var(--fg); }
.topbar-sidebar-btn .icon { width: 16px; height: 16px; }

.main-area {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

/* ---------- Internal settings safety gate ---------- */
.internal-gate {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.internal-gate-card {
    background: var(--bg-1);
    border: 1px solid var(--line-strong);
    border-top: 3px solid var(--warn);
    border-radius: var(--r-3);
    padding: 28px 28px 24px;
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.internal-gate-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--r-2);
    background: var(--warn-tint);
    border: 1px solid rgba(212,154,58,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--warn);
}
.internal-gate-icon .icon { width: 20px; height: 20px; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; }
.form-section + .form-section { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }

/* ---------- Prose (briefings) ---------- */
.prose { color: var(--fg-1); font-size: 13.5px; line-height: 1.65; }
.prose p { margin: 0 0 12px 0; }
.prose p:last-child { margin-bottom: 0; }
.prose ol, .prose ul { margin: 0; padding-left: 20px; }
.prose ol li, .prose ul li { margin-bottom: 6px; }
.prose ol li::marker { color: var(--fg-3); }
.prose strong { color: var(--fg); font-weight: 600; }
.prose code {
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: #e9a7ab;
}
.prose a { color: var(--accent-1); }
.prose a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- KV list ---------- */
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; font-size: 13px; }
.kv dt { color: var(--fg-3); }
.kv dd { margin: 0; color: var(--fg); }

/* ---------- Empty / placeholder ---------- */
.empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--fg-3);
}
.empty .icon { color: var(--fg-4); fill: var(--fg-4); width: 24px; height: 24px; margin-bottom: 10px; }

/* ---------- Progress ---------- */
.progress {
    height: 6px;
    background: var(--bg-3) !important;
    border-radius: 999px;
    overflow: hidden;
}
.progress > .bar, .progress-bar {
    height: 100%;
    background: var(--accent) !important;
    color: var(--fg);
    transition: width 0.4s ease;
}
.progress-bar-striped, .progress-bar-animated {
    background-image: linear-gradient(
        45deg,
        rgba(200, 50, 60, 0.25) 25%,
        transparent 25%,
        transparent 50%,
        rgba(200, 50, 60, 0.25) 50%,
        rgba(200, 50, 60, 0.25) 75%,
        transparent 75%,
        transparent
    ) !important;
    background-size: 1rem 1rem;
}

/* ---------- Tables: new .tbl primitive ---------- */
table.tbl {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    background: transparent;
    color: var(--fg);
}
table.tbl thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding: 10px var(--cell-pad-x);
    background: var(--bg-1);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0;
    z-index: 1;
}
table.tbl tbody td,
table.tbl tbody th {
    padding: var(--cell-pad-y) var(--cell-pad-x);
    border-bottom: 1px solid var(--line-hairline);
    vertical-align: top;
    color: var(--fg);
    background: transparent;
    font-weight: normal;
}
table.tbl tbody tr:last-child td,
table.tbl tbody tr:last-child th { border-bottom: none; }
table.tbl tbody tr.clickable,
table.tbl.hover tbody tr { cursor: pointer; transition: background 90ms ease; }
table.tbl tbody tr.clickable:hover td,
table.tbl tbody tr.clickable:hover th,
table.tbl.hover tbody tr:hover td,
table.tbl.hover tbody tr:hover th { background: var(--bg-2); }
table.tbl tbody tr.selected td,
table.tbl tbody tr.is-selected td { background: var(--accent-tint); }
table.tbl tbody td.truncate {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Logs treatment ---------- */
.log-row { cursor: pointer; }
.log-row.level-info   { box-shadow: inset 2px 0 0 var(--info); }
.log-row.level-warn   { box-shadow: inset 2px 0 0 var(--warn); }
.log-row.level-error  { box-shadow: inset 2px 0 0 var(--err); }
.log-row.level-debug  { box-shadow: inset 2px 0 0 var(--fg-4); }
.log-row td { font-family: var(--mono); font-size: 12px; color: var(--fg-1); }
.log-row td.col-msg {
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;
}
.log-row td.col-msg .hash { color: var(--fg-3); }
.log-row td.col-msg .kw { color: #d7a3a7; }

.hint-bar {
    display: flex; justify-content: center; gap: 16px;
    padding: 10px 0 2px;
    color: var(--fg-3);
    font-size: 11.5px;
}
.hint-bar kbd {
    font-family: var(--mono);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    color: var(--fg-1);
}

.filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Login surface ---------- */
.login-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(in oklch 1600px 900px at 75% -5%,
            rgba(200,50,60,0.09)   0%,
            rgba(200,50,60,0.051) 20%,
            rgba(200,50,60,0.025) 40%,
            rgba(200,50,60,0.009) 60%,
            rgba(200,50,60,0.002) 80%,
            rgba(200,50,60,0)    100%),
        radial-gradient(in oklch 1200px 700px at -5% 105%,
            rgba(91,143,203,0.07)   0%,
            rgba(91,143,203,0.040) 20%,
            rgba(91,143,203,0.020) 40%,
            rgba(91,143,203,0.007) 60%,
            rgba(91,143,203,0.001) 80%,
            rgba(91,143,203,0)    100%),
        var(--bg);
}
.login-logo { height: 112px; width: auto; }
.login-card {
    width: 400px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
    padding: 32px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}

/* ---------- Icon sprite ---------- */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .page { padding: 16px; }
}

/* =====================================================================
   Legacy adapters
   ---------------------------------------------------------------------
   Pages still written against the previous Bootstrap-based markup pick
   up the new palette via these overrides until each template is ported
   to the new primitives above.
   ===================================================================== */

.btn-dark,
.btn-primary {
    background-color: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    color: #fff !important;
    border-radius: var(--r-2) !important;
    padding: 0.4rem 0.85rem !important;
    font-weight: 500 !important;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn-dark:hover,
.btn-primary:hover {
    background-color: var(--accent-1) !important;
    border-color: var(--accent-1) !important;
    color: #fff !important;
}
.btn-dark:active, .btn-dark:focus, .btn-dark:active:focus, .btn-dark.active,
.btn-primary:active, .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active,
.show > .btn-dark.dropdown-toggle,
.btn-check:focus + .btn-dark, .btn-check:active + .btn-dark,
.show > .btn-primary.dropdown-toggle,
.btn-check:focus + .btn-primary, .btn-check:active + .btn-primary {
    background-color: var(--accent-2) !important;
    border-color: var(--accent-2) !important;
    box-shadow: none !important;
    outline: none !important;
    color: #fff !important;
}

.btn-secondary {
    background: var(--bg-2) !important;
    border: 1px solid var(--line-strong) !important;
    color: var(--fg) !important;
}

/* Bootstrap .card inside main body still looks right under the new tokens. */
.card.bg-dark,
.card.bg-dark-dark {
    background-color: var(--bg-1) !important;
    color: var(--fg) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-3) !important;
}
.card.bg-dark .card-header,
.card.bg-dark-dark .card-header {
    background-color: var(--bg-1) !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--fg) !important;
}

.list-group-item {
    background: transparent !important;
    border-color: var(--line) !important;
    color: var(--fg-1) !important;
}
.list-group-item-action.bg-dark.text-white {
    border: 0 !important;
    background: transparent !important;
    padding: 7px 10px !important;
    border-radius: var(--r-2) !important;
}
.list-group-item-action.bg-dark.text-white:hover,
.list-group-item-action.bg-dark.text-white:focus {
    background: var(--bg-2) !important;
    color: var(--fg) !important;
    box-shadow: none !important;
    outline: none !important;
}

.form-control, .form-select {
    width: 100% !important;
    background: var(--bg-input) !important;
    border: 1px solid var(--line-strong) !important;
    color: var(--fg) !important;
    border-radius: var(--r-2) !important;
    padding: 0.4rem 0.65rem !important;
}
.form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 2rem !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23909094' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    cursor: pointer !important;
}
.form-control:hover, .form-select:hover { border-color: #45454a !important; }
.form-control:focus, .form-select:focus {
    border-color: transparent !important;
    box-shadow: 0 0 0 2px var(--accent) !important;
    outline: none !important;
}
.form-label { color: var(--fg-1); font-weight: 500; font-size: 12px; margin-bottom: 6px; }

/* Input padding for raw inputs */
input, textarea {
    padding: 0.4em;
}
input:hover, input:focus, textarea:hover, textarea:focus { outline: none; }
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus {
    box-shadow: 0 0 0 2px var(--accent);
}
input::placeholder { color: var(--fg-3); }

.bg-dark {
    background-color: var(--bg-1) !important;
    color: var(--fg) !important;
    border: 0 !important;
}

/* Legacy clickable helper */
.clickable { cursor: pointer; }

/* ---------- Error banner (preserved) ---------- */
#error-container {
    display: none;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
}
#error-container .error-message {
    background-color: var(--accent);
    color: #fff;
    padding: 0.5rem 1rem !important;
    margin: 0 !important;
    min-height: 2.6em;
    border-bottom: 2px solid var(--accent-2);
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    transition: opacity 0.5s ease-out;
    opacity: 1;
    cursor: pointer;
}
.fade-out { opacity: 0 !important; }

/* ---------- Disabled <select> option styling ---------- */
select option:disabled {
    color: var(--accent-1) !important;
    font-style: italic;
    text-decoration: line-through;
    opacity: 0.7;
}

/* ---------- Legacy bits still referenced by templates ---------- */
.logo { max-width: 100%; height: auto; }

.table-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    background: var(--bg-2);
    color: var(--fg-1);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-2);
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.table-action-button:hover, .table-action-button:focus {
    background: var(--bg-3);
    color: var(--fg);
    border-color: var(--accent);
    text-decoration: none;
}

/* ---------- Shared data-table primitives (back-compat) ---------- */
.data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    background: var(--bg-1);
}

.data-table {
    width: 100%;
    background: transparent;
    color: var(--fg);
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    font-size: 13px;
}
.data-table thead th {
    background: var(--bg-1);
    color: var(--fg-3);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
}
.data-table tbody td,
.data-table tbody th {
    background: transparent;
    color: var(--fg);
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--line-hairline);
    vertical-align: top;
    font-weight: normal;
}
.data-table tbody tr:last-child td,
.data-table tbody tr:last-child th { border-bottom: 0; }

.data-table-hover tbody tr {
    cursor: pointer;
    transition: background-color 0.1s;
}
.data-table-hover tbody tr:hover td,
.data-table-hover tbody tr:hover th { background: var(--bg-2); }

.data-table tbody tr.is-selected td,
.data-table tbody tr.is-selected th { background: var(--accent-tint); }
.data-table tbody tr.is-selected td:first-child,
.data-table tbody tr.is-selected th:first-child { box-shadow: inset 3px 0 0 var(--accent); }

.data-table-compact thead th { padding: 6px 10px; font-size: 0.7rem; }
.data-table-compact tbody td,
.data-table-compact tbody th { padding: 5px 10px; font-size: 12px; }

.data-table .col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* Action buttons inside tables */
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    background: var(--bg-2);
    color: var(--fg-1);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-2);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.action-btn:hover, .action-btn:focus {
    background: var(--bg-3);
    color: var(--fg);
    border-color: var(--accent);
    text-decoration: none;
    outline: none;
}
.action-btn .icon { width: 0.9rem; height: 0.9rem; fill: currentColor; }
.action-btn-icon { padding: 0.25rem 0.4rem; }
.action-btn-warn { color: var(--warn); }
.action-btn-warn:hover, .action-btn-warn:focus { color: #fff; background: rgba(212,154,58,0.25); border-color: var(--warn); }
.action-btn-danger { color: #ecb5b9; }
.action-btn-danger:hover, .action-btn-danger:focus { color: #fff; background: var(--accent); border-color: var(--accent); }
.action-btn.disabled, .action-btn:disabled { opacity: 0.4; pointer-events: none; cursor: default; }
.action-btn-group { display: inline-flex; gap: 0.25rem; align-items: center; }

/* Data-table placeholder states */
.data-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    margin: 1rem 0;
    border-radius: var(--r-3);
    background: var(--bg-1);
    border: 1px dashed var(--line-strong);
    color: var(--fg-3);
}
.data-placeholder .icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    fill: var(--fg-3);
}
.data-placeholder-loading { border-style: solid; }
.data-placeholder-empty {
    background: rgba(91, 143, 203, 0.08);
    border-style: solid;
    border-color: rgba(91, 143, 203, 0.3);
    color: #8fb7f5;
}
.data-placeholder-empty .icon { fill: #8fb7f5; }
.data-placeholder-error {
    background: var(--err-tint);
    border-style: solid;
    border-color: rgba(200,50,60,0.4);
    color: #ecb5b9;
}
.data-placeholder-error .icon { fill: #ecb5b9; }
.data-placeholder .action-btn { margin-left: auto; }

/* ---------- Legacy column widths (settings tables) ---------- */
.custodian-table { table-layout: fixed; }
.custodian-table .col1 { width: 20%; }
.custodian-table .col2 { width: 40%; }
.custodian-table .col3 { width: 40%; }
.custodian-table th, .custodian-table td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.user-table { table-layout: fixed; }
.user-table td div:hover { cursor: pointer; background-color: var(--bg-3); }
.user-table td div { display: inline; }
.user-table .col1 { width: 20%; }
.user-table .col2 { width: 40%; }
.user-table .col3 { width: 40%; }

.editable-alias input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line-strong);
    padding: 0 6px;
    margin: 0;
    background: var(--bg-input);
    color: var(--fg);
}
.editable-alias .edit-container {
    display: flex;
    gap: 4px;
    width: 100%;
    height: 1.6em;
    align-items: center;
}
.editable-alias input.alias-input {
    flex-grow: 1;
    border-radius: var(--r-1);
    outline: none;
    margin: 0;
}
.editable-alias .confirm-edit {
    cursor: pointer;
    background-color: var(--accent);
    color: #fff;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: var(--r-1);
    font-size: 0.75rem;
    margin: 0;
}
.editable-alias .confirm-edit:hover { background-color: var(--accent-1); }
.editable-alias input.alias-input:focus {
    box-shadow: 0 0 0 2px var(--accent);
}
.editable-alias:hover { background-color: var(--bg-3); cursor: pointer; }

/* ---------- Modal ---------- */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
}
.modal-content {
    background-color: var(--bg-1);
    margin: 10% auto;
    padding: 24px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-3);
    width: 80%;
    max-width: 720px;
    color: var(--fg);
}
.close {
    color: var(--fg-3);
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.close:hover, .close:focus { color: var(--fg); text-decoration: none; }

/* Sessions / API key tables */
.session-time { width: 30%; }
.session-ip { width: 20%; }
.session-user { width: 50%; }
.api-key-time { width: 20%; }
.api-key-partial { width: 10%; }
.api-key-comment { width: 30%; }
.api-key-actions { width: 40%; }
.api-key-table { width: 100%; table-layout: fixed; }
.api-key-table td div { display: inline; }
.api-key-table td div:hover { cursor: pointer; background-color: var(--bg-3); }
.api-key-table, .api-key-table th, .api-key-table td {
    border: none;
    background-color: transparent;
}

/* ---------- System messages ---------- */
.system-messages { margin-top: 15px; }
.system-message {
    background-color: var(--bg-1);
    border-left: 3px solid var(--accent);
    padding: 14px 16px;
    margin-bottom: 12px;
    border-radius: var(--r-2);
}
.message-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--fg-3);
}
.message-date { font-style: italic; }
.message-component { font-weight: 600; color: var(--accent-1); }
.message-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--fg); }
.message-content { white-space: pre-line; color: var(--fg-1); }

/* System messages / update indicators in topbar */
.system-messages-indicator,
.update-indicator {
    color: var(--accent-1);
    text-decoration: none;
    padding: 0.2rem 0.5rem;
    border-radius: var(--r-1);
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.system-messages-indicator:hover,
.update-indicator:hover {
    background-color: var(--bg-2);
    color: var(--accent-1);
    text-decoration: none;
}

/* Legacy info-bar hooks (kept for JS selectors that may still reference them). */
.info-bar-container { display: flex; align-items: center; gap: 12px; }
.user-info, .version-info, .system-messages-container, .info-bar-separator { display: inline-flex; align-items: center; }

/* ---------- Loaders ---------- */
.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
}
.loader {
    border: 6px solid var(--bg-3);
    border-top: 6px solid var(--accent);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 1.4s linear infinite;
    margin: 3em;
}
.loader-sm {
    border: 3px solid var(--bg-3);
    border-top: 3px solid var(--accent);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.9s linear infinite;
    flex-shrink: 0;
}
.timer {
    position: absolute;
    font-size: 18px;
    font-family: var(--mono);
    text-align: center;
    line-height: 80px;
    color: var(--fg-1);
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes rm-dot-pulse {
    0%, 60%, 100% { opacity: 0.15; transform: scale(0.7); }
    30%            { opacity: 1;    transform: scale(1); }
}
.dots-loader { display: flex; gap: 7px; align-items: center; justify-content: center; }
.dots-loader > span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: rm-dot-pulse 1.4s ease-in-out infinite both; }
.dots-loader > span:nth-child(2) { animation-delay: 0.18s; }
.dots-loader > span:nth-child(3) { animation-delay: 0.36s; }
.deploy-overlay { display: none; position: fixed; inset: 0; background: rgba(27,27,29,0.82); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 9999; justify-content: center; align-items: center; }
.deploy-overlay.visible { display: flex; }
.deploy-overlay-body { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.deploy-overlay-label { color: var(--fg-1); font-size: 13px; letter-spacing: 0.03em; }
.scroll-indicator { opacity: 0.8; transition: opacity 0.3s; }

/* ---------- Agent row (agents-interact) ---------- */
.agent-row {
    margin-left: 1rem;
    padding: 0.5rem;
    border-radius: var(--r-2);
}
.agent-row:hover {
    background-color: var(--bg-3);
    cursor: pointer;
}
.agent-process {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--fg-1);
}

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    border-radius: var(--r-1);
    margin-left: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.badge-green  { background-color: var(--ok-tint);   color: #b9e0c9; border: 1px solid rgba(78,166,116,0.3); }
.badge-orange { background-color: var(--warn-tint); color: #e9cf9a; border: 1px solid rgba(212,154,58,0.3); }
.badge-red    { background-color: var(--err-tint);  color: #ecb5b9; border: 1px solid rgba(200,50,60,0.3); }

/* ---------- Text / loader containers ---------- */
.text-container {
    padding: 1em;
    margin: 0.5em;
}

/* ---------- Search box (legacy) ---------- */
.search-box input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-2);
    padding: 0.45rem 0.75rem;
    color: var(--fg);
}

/* =====================================================================
   Logs — virtualized viewer
   =====================================================================
   The logs page renders a virtualized list of .log-row absolute-positioned
   inside a scroll viewport, with a sticky header on top and a preview
   pane at the bottom. The shell is a .card; the inner widget replaces
   the previous bespoke .log-toolbar / .log-workspace styles.
   ===================================================================== */

/* Level pills used in the toolbar as toggle chips (hidden checkboxes). */
.level-toggles {
    display: inline-flex;
    gap: 4px;
    padding: 2px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--bg-input);
}
.level-toggles label {
    position: relative;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    line-height: 18px;
    color: var(--fg-3);
    white-space: nowrap;
    transition: background 120ms ease, color 120ms ease;
}
.level-toggles input { position: absolute; opacity: 0; pointer-events: none; }
.level-toggles label .lvl-dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: var(--fg-4);
    flex: 0 0 6px;
}
.level-toggles label:hover { color: var(--fg-1); }
.level-toggles label:has(input:checked) {
    background: var(--bg-3);
    color: var(--fg);
}
.level-toggles label:has(input[value="debug"]:checked) .lvl-dot   { background: var(--fg-2); box-shadow: 0 0 0 3px rgba(144,144,148,0.15); }
.level-toggles label:has(input[value="info"]:checked)  .lvl-dot   { background: var(--info); box-shadow: 0 0 0 3px rgba(91,143,203,0.18); }
.level-toggles label:has(input[value="warn"]:checked)  .lvl-dot,
.level-toggles label:has(input[value="warning"]:checked) .lvl-dot { background: var(--warn); box-shadow: 0 0 0 3px rgba(212,154,58,0.18); }
.level-toggles label:has(input[value="error"]:checked) .lvl-dot   { background: var(--err);  box-shadow: 0 0 0 3px rgba(200,50,60,0.18); }

/* Stream status pill on the right of the toolbar. */
.stream-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--fg-2);
    font-size: 11.5px;
}
.stream-status .stream-dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: var(--info);
    box-shadow: 0 0 6px var(--info);
}
.stream-status.paused .stream-dot { background: var(--fg-3); box-shadow: none; }
.stream-status.reconnecting .stream-dot {
    background: var(--warn);
    box-shadow: 0 0 6px var(--warn);
    animation: stream-blink 1s infinite;
}
@keyframes stream-blink { 50% { opacity: 0.35; } }

/* Filter-chips row below the toolbar. */
.logs-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px 0; }
.logs-filter-chips:empty { display: none; }
.logs-filter-chips .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px 2px 10px;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid var(--line-strong);
    color: var(--fg-1);
    font-size: 11.5px;
}
.logs-filter-chips .filter-chip .chip-key {
    color: var(--fg-3);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.logs-filter-chips .filter-chip button {
    background: transparent; border: 0;
    color: var(--fg-3); cursor: pointer;
    padding: 0; display: inline-flex;
    align-items: center; justify-content: center;
    width: 16px; height: 16px;
    border-radius: 999px;
    transition: background 120ms ease, color 120ms ease;
}
.logs-filter-chips .filter-chip button:hover {
    background: var(--bg-3);
    color: var(--fg);
}
.logs-filter-chips .filter-chip button .icon { width: 10px; height: 10px; }

/* Workspace: sticky-header table + scrolling viewport + preview pane. */
.logs-workspace {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 16rem);
    min-height: 400px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    overflow: hidden;
}

.logs-top {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.logs-header {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 12.5rem 6.5rem 10rem 1fr;
    background: var(--bg-1);
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
}
.logs-header > .col { padding: 10px 14px; }

.logs-viewport {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow-y: auto;
    background: var(--bg);
}

.log-row {
    position: absolute;
    left: 0; right: 0;
    height: 28px;
    display: grid;
    grid-template-columns: 12.5rem 6.5rem 10rem 1fr;
    align-items: center;
    cursor: pointer;
    box-shadow: inset 3px 0 0 transparent;
    color: var(--fg-1);
    font-size: 12px;
    font-family: var(--mono);
    border-bottom: 1px solid var(--line-hairline);
    transition: background 90ms ease, box-shadow 90ms ease;
}
.log-row > .col {
    padding: 0 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.log-row > .col .cell-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.log-row:hover { background: var(--bg-2); }
.log-row.selected {
    background: var(--accent-tint);
    box-shadow: inset 3px 0 0 var(--accent);
}

.log-row.lvl-debug   { box-shadow: inset 3px 0 0 var(--fg-4); }
.log-row.lvl-info    { box-shadow: inset 3px 0 0 var(--info); }
.log-row.lvl-warn,
.log-row.lvl-warning { box-shadow: inset 3px 0 0 var(--warn); background: rgba(212,154,58,0.04); }
.log-row.lvl-error   { box-shadow: inset 3px 0 0 var(--err);  background: rgba(200,50,60,0.06); }
.log-row.lvl-fatal   { box-shadow: inset 3px 0 0 var(--err);  background: rgba(200,50,60,0.14); }

.log-row .col-level .lvl-dot {
    width: 6px; height: 6px; border-radius: 999px;
    flex: 0 0 6px;
}
.log-row.lvl-debug   .col-level { color: var(--fg-2); }
.log-row.lvl-debug   .col-level .lvl-dot { background: var(--fg-2); }
.log-row.lvl-info    .col-level { color: #a8c5e9; }
.log-row.lvl-info    .col-level .lvl-dot { background: var(--info); }
.log-row.lvl-warn    .col-level,
.log-row.lvl-warning .col-level { color: #e9cf9a; font-weight: 600; }
.log-row.lvl-warn    .col-level .lvl-dot,
.log-row.lvl-warning .col-level .lvl-dot { background: var(--warn); }
.log-row.lvl-error   .col-level { color: #ecb5b9; font-weight: 600; }
.log-row.lvl-error   .col-level .lvl-dot { background: var(--err); }
.log-row.lvl-fatal   .col-level { color: #fff; font-weight: 700; }
.log-row.lvl-fatal   .col-level .lvl-dot { background: #fff; box-shadow: 0 0 0 1px var(--accent); }

/* Hover-revealed filter icon per cell. */
.log-row .col.filterable { position: relative; padding-right: 1.75rem; }
.log-row .col .filter-action {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    padding: 0;
    background: var(--bg-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-1);
    color: var(--fg-3);
    cursor: pointer;
    opacity: 0;
    transition: opacity 100ms ease, color 100ms ease, border-color 100ms ease, background-color 100ms ease;
    pointer-events: none;
}
.log-row .col .filter-action .icon { width: 10px; height: 10px; }
.log-row .col.filterable:hover .filter-action {
    opacity: 1;
    pointer-events: auto;
}
.log-row .col .filter-action:hover {
    color: var(--accent-1);
    border-color: var(--accent);
    background: var(--bg-3);
}

.log-row .col-msg .has-fields-icon {
    color: var(--fg-3);
    flex: 0 0 1rem;
    display: none;
}
.log-row.has-fields .col-msg .has-fields-icon { display: inline-flex; }
.log-row .col-msg {
    color: var(--fg);
}

/* Bottom preview pane. */
.log-preview {
    flex: 0 0 15rem;
    border-top: 1px solid var(--line);
    background: var(--bg-1);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    font-size: 13px;
}
.log-preview .preview-hint {
    margin: auto;
    color: var(--fg-3);
    font-size: 12.5px;
    text-align: center;
}
.log-preview .preview-hint kbd {
    font-family: var(--mono);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--fg-1);
}
.log-preview .preview-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
}
.log-preview .preview-ts {
    font-family: var(--mono);
    color: var(--fg);
}
.log-preview .preview-meta {
    color: var(--fg-3);
    font-size: 12px;
    word-break: break-all;
    font-family: var(--mono);
}
.log-preview .preview-meta .sep { margin: 0 4px; color: var(--fg-4); }
.log-preview .preview-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}
.log-preview .preview-msg {
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 10px 12px;
    border-radius: var(--r-2);
    white-space: pre-wrap;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--fg);
    flex: 0 0 auto;
}
.log-preview .preview-fields {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 10px 12px;
    border-radius: var(--r-2);
    font-size: 12.5px;
}
.log-preview .preview-fields dt {
    color: var(--fg-3);
    margin: 0;
    font-family: var(--mono);
    font-size: 12px;
}
.log-preview .preview-fields dd {
    color: var(--fg);
    margin: 0;
    word-break: break-all;
    font-family: var(--mono);
}

/* Severity badge in preview header. */
.lvl-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.lvl-badge .lvl-dot { width: 5px; height: 5px; border-radius: 999px; }
.lvl-badge.lvl-debug   { background: var(--bg-2); color: var(--fg-1); border-color: var(--line); }
.lvl-badge.lvl-debug   .lvl-dot { background: var(--fg-2); }
.lvl-badge.lvl-info    { background: var(--info-tint); color: #c2d7ee; border-color: rgba(91,143,203,0.3); }
.lvl-badge.lvl-info    .lvl-dot { background: var(--info); }
.lvl-badge.lvl-warn,
.lvl-badge.lvl-warning { background: var(--warn-tint); color: #e9cf9a; border-color: rgba(212,154,58,0.3); }
.lvl-badge.lvl-warn    .lvl-dot,
.lvl-badge.lvl-warning .lvl-dot { background: var(--warn); }
.lvl-badge.lvl-error   { background: var(--err-tint); color: #ecb5b9; border-color: rgba(200,50,60,0.3); }
.lvl-badge.lvl-error   .lvl-dot { background: var(--err); }
.lvl-badge.lvl-fatal   { background: var(--accent); color: #fff; border-color: var(--accent-2); }
.lvl-badge.lvl-fatal   .lvl-dot { background: #fff; }

/* "N new" / "N dropped" callouts used by the log toolbar. */
.logs-pending-badge {
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-tint);
    border: 1px solid rgba(200,50,60,0.35);
    color: #ecb5b9;
    font-size: 11.5px;
    font-weight: 600;
}
.logs-drop-badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--warn-tint);
    border: 1px solid rgba(212,154,58,0.35);
    color: #e9cf9a;
    font-size: 11.5px;
    font-weight: 600;
}

/* =====================================================================
   Settings — forms, tabs, accordion, password strength, modal wrappers
   ===================================================================== */

.password-strength {
    display: flex;
    gap: 3px;
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--bg-3);
}
.password-strength .strength-bar {
    flex-grow: 1;
    background-color: var(--bg-3);
    transition: background-color 0.3s ease;
}


/* Inline actions used in the Users / API-keys tables on the settings page.
   The template renders these as <div>s with an emoji prefix; restyle them
   as button-looking chips so they feel consistent with .action-btn. */
.action-set-password,
.action-reset-totp,
.action-make-admin,
.action-remove-admin,
.action-delete-user,
.action-delete-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--r-2);
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--fg-1);
    font-size: 12px;
    cursor: pointer;
    margin-bottom: 4px;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.action-set-password:hover,
.action-reset-totp:hover,
.action-make-admin:hover {
    background: var(--bg-2);
    color: var(--fg);
    border-color: var(--accent);
}
.action-remove-admin,
.action-delete-user,
.action-delete-key {
    color: #ecb5b9;
    border-color: rgba(200,50,60,0.4);
}
.action-remove-admin:hover,
.action-delete-user:hover,
.action-delete-key:hover {
    background: var(--accent-tint);
    color: #fff;
    border-color: var(--accent);
}

/* Stack of settings cards gets a consistent gap */
.settings-stack { display: grid; gap: 16px; }

/* Playbook briefing/configure page spacing:
   - briefing: gap between the sections stack and the Configure action button
   - configure: gap between stacked form cards and above the Deploy button    */
.settings-stack + .btn { margin-top: 24px; }
main.page > form > .card + .card { margin-top: 16px; }
main.page > form > button.btn,
main.page > form > a.btn { margin-top: 24px; }

/* =====================================================================
   Bootstrap-shaped utility layer
   ---------------------------------------------------------------------
   Replaces the Bootstrap CSS we used to ship. The class names match
   Bootstrap 5 so existing template markup (and the 54 playbook
   briefing/configuration files) keeps working without edits. Scales:

     0 = 0,  1 = 0.25rem,  2 = 0.5rem,  3 = 1rem,  4 = 1.5rem,  5 = 3rem

   Breakpoint for *-md-* variants mirrors Bootstrap's 768px.
   ===================================================================== */

/* Containers */
.container,
.container-fluid {
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-right: auto;
    margin-left: auto;
}
.container { max-width: 1320px; }

/* 12-column flex grid — row + col-*/col-md-*/col-auto/offset-md-* */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}
.row > [class^="col-"],
.row > [class*=" col-"] {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    width: 100%;
}
.col        { flex: 1 0 0%; }
.col-auto   { flex: 0 0 auto; width: auto; }
.col-1      { flex: 0 0 auto; width:  8.33333333%; }
.col-2      { flex: 0 0 auto; width: 16.66666667%; }
.col-3      { flex: 0 0 auto; width: 25%; }
.col-4      { flex: 0 0 auto; width: 33.33333333%; }
.col-5      { flex: 0 0 auto; width: 41.66666667%; }
.col-6      { flex: 0 0 auto; width: 50%; }
.col-7      { flex: 0 0 auto; width: 58.33333333%; }
.col-8      { flex: 0 0 auto; width: 66.66666667%; }
.col-9      { flex: 0 0 auto; width: 75%; }
.col-10     { flex: 0 0 auto; width: 83.33333333%; }
.col-11     { flex: 0 0 auto; width: 91.66666667%; }
.col-12     { flex: 0 0 auto; width: 100%; }

@media (min-width: 768px) {
    .col-md        { flex: 1 0 0%; }
    .col-md-auto   { flex: 0 0 auto; width: auto; }
    .col-md-1      { flex: 0 0 auto; width:  8.33333333%; }
    .col-md-2      { flex: 0 0 auto; width: 16.66666667%; }
    .col-md-3      { flex: 0 0 auto; width: 25%; }
    .col-md-4      { flex: 0 0 auto; width: 33.33333333%; }
    .col-md-5      { flex: 0 0 auto; width: 41.66666667%; }
    .col-md-6      { flex: 0 0 auto; width: 50%; }
    .col-md-7      { flex: 0 0 auto; width: 58.33333333%; }
    .col-md-8      { flex: 0 0 auto; width: 66.66666667%; }
    .col-md-9      { flex: 0 0 auto; width: 75%; }
    .col-md-10     { flex: 0 0 auto; width: 83.33333333%; }
    .col-md-11     { flex: 0 0 auto; width: 91.66666667%; }
    .col-md-12     { flex: 0 0 auto; width: 100%; }

    .offset-md-0   { margin-left: 0; }
    .offset-md-1   { margin-left:  8.33333333%; }
    .offset-md-2   { margin-left: 16.66666667%; }
    .offset-md-3   { margin-left: 25%; }
    .offset-md-4   { margin-left: 33.33333333%; }
    .offset-md-5   { margin-left: 41.66666667%; }
    .offset-md-6   { margin-left: 50%; }
    .offset-md-7   { margin-left: 58.33333333%; }
    .offset-md-8   { margin-left: 66.66666667%; }
}

/* Display utilities */
.d-none          { display: none !important; }
.d-inline        { display: inline !important; }
.d-inline-block  { display: inline-block !important; }
.d-block         { display: block !important; }
.d-flex          { display: flex !important; }
.d-inline-flex   { display: inline-flex !important; }
.d-grid          { display: grid !important; }
.d-table         { display: table !important; }

/* Visibility utilities */
.invisible       { visibility: hidden !important; }
.visible         { visibility: visible !important; }

/* Flex utilities */
.flex-row        { flex-direction: row !important; }
.flex-column     { flex-direction: column !important; }
.flex-row-reverse    { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-wrap       { flex-wrap: wrap !important; }
.flex-nowrap     { flex-wrap: nowrap !important; }
.flex-grow-0     { flex-grow: 0 !important; }
.flex-grow-1     { flex-grow: 1 !important; }
.flex-shrink-0   { flex-shrink: 0 !important; }
.flex-shrink-1   { flex-shrink: 1 !important; }
.flex-fill       { flex: 1 1 auto !important; }

.justify-content-start   { justify-content: flex-start !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around  { justify-content: space-around !important; }
.justify-content-evenly  { justify-content: space-evenly !important; }

.align-items-start    { align-items: flex-start !important; }
.align-items-end      { align-items: flex-end !important; }
.align-items-center   { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch  { align-items: stretch !important; }

.align-self-start    { align-self: flex-start !important; }
.align-self-end      { align-self: flex-end !important; }
.align-self-center   { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch  { align-self: stretch !important; }

/* Spacing utilities — 0..5 scale. */
.m-0  { margin: 0 !important; }
.m-1  { margin: 0.25rem !important; }
.m-2  { margin: 0.5rem !important; }
.m-3  { margin: 1rem !important; }
.m-4  { margin: 1.5rem !important; }
.m-5  { margin: 3rem !important; }
.m-auto { margin: auto !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mt-auto { margin-top: auto !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mb-auto { margin-bottom: auto !important; }

.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }
.ms-auto { margin-left: auto !important; }

.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }
.me-auto { margin-right: auto !important; }

.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

.p-0  { padding: 0 !important; }
.p-1  { padding: 0.25rem !important; }
.p-2  { padding: 0.5rem !important; }
.p-3  { padding: 1rem !important; }
.p-4  { padding: 1.5rem !important; }
.p-5  { padding: 3rem !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }

.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }

.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

/* Sizing */
.w-25   { width: 25% !important; }
.w-50   { width: 50% !important; }
.w-75   { width: 75% !important; }
.w-100  { width: 100% !important; }
.w-auto { width: auto !important; }

.h-25   { height: 25% !important; }
.h-50   { height: 50% !important; }
.h-75   { height: 75% !important; }
.h-100  { height: 100% !important; }
.h-auto { height: auto !important; }

.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }

.min-vh-100 { min-height: 100vh !important; }
.vh-100     { height: 100vh !important; }
.vw-100     { width: 100vw !important; }

/* Text alignment + weight */
.text-start  { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end    { text-align: right !important; }

.fw-light      { font-weight: 300 !important; }
.fw-normal     { font-weight: 400 !important; }
.fw-medium     { font-weight: 500 !important; }
.fw-semibold   { font-weight: 600 !important; }
.fw-bold       { font-weight: 700 !important; }

.fst-italic    { font-style: italic !important; }
.fst-normal    { font-style: normal !important; }

.text-nowrap   { white-space: nowrap !important; }
.text-wrap     { white-space: normal !important; }
.text-break    { word-wrap: break-word !important; word-break: break-word !important; }

.text-lowercase  { text-transform: lowercase !important; }
.text-uppercase  { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }

/* Font-size small helpers that a handful of templates still use. */
.small, small { font-size: 0.85em; }

/* Border-none / rounded utilities used sparingly by the playbooks. */
.border       { border: 1px solid var(--line) !important; }
.border-0     { border: 0 !important; }
.rounded      { border-radius: var(--r-2) !important; }
.rounded-0    { border-radius: 0 !important; }
.rounded-pill { border-radius: 999px !important; }

/* Position utilities (a couple of modals use position: relative). */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed    { position: fixed !important; }
.position-sticky   { position: sticky !important; }

/* Overflow utilities */
.overflow-auto    { overflow: auto !important; }
.overflow-hidden  { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll  { overflow: scroll !important; }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* =====================================================================
   Collapse — animated max-height transition (used by config accordion).
   ===================================================================== */
.collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.collapse.show { max-height: 3000px; }

/* =====================================================================
   Tabs — .tabs-nav / .tab-btn / .tabs-content / .tab-pane
   Used by the Advanced Config section of /settings.
   ===================================================================== */
.tabs-nav {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--line);
    padding: 0;
    list-style: none;
}
.tab-btn {
    padding: 7px 14px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    color: var(--fg-2);
    font-size: 13px;
    font-weight: 500;
    transition: color 100ms, border-color 100ms;
    border-radius: var(--r-1) var(--r-1) 0 0;
    white-space: nowrap;
}
.tab-btn:hover { color: var(--fg); }
.tab-btn.active { color: var(--fg); border-bottom-color: var(--accent-1); }
.tabs-content > .tab-pane { display: none; }
.tabs-content > .tab-pane.active { display: block; }

/* =====================================================================
   Toggle switch — .toggle-row / .toggle-input / .toggle-label
   Replaces Bootstrap form-check form-switch.
   ===================================================================== */
.toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.125rem;
}
.toggle-input {
    position: relative;
    width: 2em;
    height: 1em;
    flex-shrink: 0;
    background-color: var(--bg-input);
    border: 1px solid var(--line-strong);
    border-radius: 2em;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23909094'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    transition: background-position 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    cursor: pointer;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.toggle-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-position: right center;
}
.toggle-input:focus { box-shadow: 0 0 0 2px var(--accent); outline: 0; }
.toggle-input:disabled { opacity: 0.5; pointer-events: none; }
.toggle-label { color: var(--fg-1); font-size: 13px; cursor: pointer; }

/* =====================================================================
   Notice — inline status messages (replaces Bootstrap alert).
   ===================================================================== */
.notice {
    padding: 10px 14px;
    border-radius: var(--r-2);
    font-size: 13px;
    border: 1px solid transparent;
    line-height: 1.5;
}
.notice-info { background: var(--info-tint); border-color: var(--info);   color: var(--fg-1); }
.notice-err  { background: var(--err-tint);  border-color: var(--err);    color: var(--fg-1); }
.notice-warn { background: var(--warn-tint); border-color: var(--warn);   color: var(--fg-1); }
.notice-ok   { background: var(--ok-tint);   border-color: var(--ok);     color: var(--fg-1); }

/* =====================================================================
   Internal settings — two-column layout with left nav.
   ===================================================================== */

.settings-layout {
    display: grid;
    grid-template-columns: 188px 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 768px) {
    .settings-layout { grid-template-columns: 1fr; }
}

.settings-nav {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 16px;
}
.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--r-2);
    border: none;
    background: transparent;
    color: var(--fg-2);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 120ms ease, color 120ms ease;
}
.settings-nav-item:hover { background: var(--bg-2); color: var(--fg); }
.settings-nav-item.active { background: var(--accent-tint); color: var(--fg); }
.settings-nav-item .icon { width: 14px; height: 14px; flex-shrink: 0; }

.settings-nav-badge {
    margin-left: auto;
    background: var(--warn-tint);
    color: var(--warn);
    border-radius: 999px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
}

.settings-content { min-width: 0; }

/* Section head: title/desc + optional action button */
.settings-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.settings-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--fg);
    margin-bottom: 3px;
}
.settings-section-desc {
    font-size: 12.5px;
    color: var(--fg-2);
    line-height: 1.5;
}

/* Config sections (replace old accordion) */
.config-section {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    margin-bottom: 12px;
    overflow: hidden;
}
.config-section:last-child { margin-bottom: 0; }
.config-section-title {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-3);
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
}
.config-section-body { padding: 16px; }

.config-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 900px) {
    .config-fields { grid-template-columns: 1fr 1fr; }
}
.config-field { display: flex; flex-direction: column; gap: 4px; }
.config-field-check { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.config-field-check small.help { flex: 0 0 100%; color: var(--fg-3); font-size: 12px; }

/* System message rows */
.sys-message-row {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    padding: 14px 16px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sys-message-row:last-child { margin-bottom: 0; }
.sys-message-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sys-message-date {
    font-size: 11.5px;
    color: var(--fg-3);
}
.sys-message-component {
    font-size: 11.5px;
    color: var(--fg-3);
    background: var(--bg-3);
    padding: 1px 6px;
    border-radius: var(--r-1);
}
.sys-message-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fg);
}
.sys-message-content {
    font-size: 13px;
    color: var(--fg-1);
    line-height: 1.55;
}

/* ---------- API Documentation page ----------
   Used by the auto-generated config/webinterface/templates/pages/
   api-documentation.gohtml (emitted by cmd/redmimicry-apidoc-generator).
   Lives here so the renderer doesn't have to inline ~200 lines of CSS
   into every regenerated template. */

.api-operation {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-2);
    padding: 16px;
    margin: 14px 0;
    transition: background 120ms ease, border-color 120ms ease;
}
.api-operation:hover { background: var(--bg-2); }
.api-operation:target {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-ring);
}

.api-operation-header { margin-bottom: 12px; }

.api-operation-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.http-method {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: var(--r-1);
    font-family: var(--mono);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    min-width: 56px;
    color: #fff;
}
.http-method.get    { background: #4178b8; }
.http-method.post   { background: var(--ok); }
.http-method.put    { background: var(--warn); }
.http-method.delete { background: var(--err); }
.http-method.patch  { background: #3aa997; }

.endpoint-path {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--fg);
    word-break: break-all;
}

.security-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-tint);
    border: 1px solid rgba(200, 50, 60, 0.35);
    color: #ecb5b9;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.api-operation-summary {
    color: var(--fg);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.api-operation-description {
    color: var(--fg-1);
    line-height: 1.55;
    margin-bottom: 10px;
    font-size: 13px;
}
.api-operation-description p { margin: 0 0 8px; }
.api-operation-description p:last-child { margin-bottom: 0; }
.api-operation-description code {
    background: var(--bg-2);
    border: 1px solid var(--line);
    padding: 1px 5px;
    border-radius: var(--r-1);
    color: #e9a7ab;
    font-family: var(--mono);
    font-size: 12px;
}

.api-subsection-title {
    color: var(--fg-3);
    font-size: 11px;
    font-weight: 600;
    margin: 14px 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.param-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 8px 0 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    overflow: hidden;
    font-size: 12.5px;
}
.param-table th {
    background: var(--bg-1);
    color: var(--fg-3);
    padding: 8px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--line);
}
.param-table td {
    padding: 8px 12px;
    border-top: 1px solid var(--line-hairline);
    color: var(--fg-1);
    vertical-align: top;
}
.param-table tr:first-child td { border-top: none; }
.param-table tr:hover td { background: var(--bg-2); }

.param-name {
    font-family: var(--mono);
    color: var(--fg);
    font-weight: 600;
}
.param-type {
    color: #a8c5e9;
    font-family: var(--mono);
    font-size: 12px;
}
.param-required {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--r-1);
    background: var(--err-tint);
    border: 1px solid rgba(200, 50, 60, 0.3);
    color: #ecb5b9;
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-right: 6px;
}
.param-required-glyph {
    color: var(--err);
    font-family: var(--mono);
    font-weight: 700;
    margin-left: 2px;
}

.code-block-container {
    margin: 10px 0;
    border-radius: var(--r-2);
    overflow: hidden;
    border: 1px solid var(--line);
}
.code-block-header {
    background: var(--bg-1);
    padding: 6px 12px;
    color: var(--fg-3);
    font-size: 11.5px;
    font-weight: 600;
    font-family: var(--mono);
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--line);
}
.code-block {
    background: var(--bg);
    padding: 12px;
    overflow-x: auto;
    max-height: 420px;
}
.code-block pre {
    margin: 0;
    color: var(--fg);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.5;
}

.response-item { margin: 12px 0; }
.response-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.status-code {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    font-family: var(--mono);
    font-size: 11.5px;
}
.status-code.success      { background: var(--ok-tint);   color: #b9e0c9; border-color: rgba(78,166,116,0.3); }
.status-code.client-error { background: var(--warn-tint); color: #e9cf9a; border-color: rgba(212,154,58,0.3); }
.status-code.server-error { background: var(--err-tint);  color: #ecb5b9; border-color: rgba(200,50,60,0.3); }
.response-description {
    color: var(--fg-1);
    font-size: 13px;
}