/* Atlas design system: tokens, app shell, components. Dark only.
   Text/background pairs below are WCAG AA checked (lowest: --atlas-dim on --atlas-hover, 4.6:1). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("../lib/fonts/inter/inter-latin-wght.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("../lib/fonts/inter/inter-latin-ext-wght.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
    src: url("../lib/fonts/jetbrains-mono/jetbrains-mono-latin-wght.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
    src: url("../lib/fonts/jetbrains-mono/jetbrains-mono-latin-ext-wght.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    color-scheme: dark;   /* native selects, scrollbars, date pickers follow the theme */
    /* surfaces */
    --atlas-bg: #0b1220;
    --atlas-surface: #121d2e;
    --atlas-surface-2: #0f1928;      /* inset: inputs, table headers */
    --atlas-raised: #1a2840;         /* menus, dialogs */
    --atlas-hover: #21314b;
    --atlas-chrome: #0e1626;         /* top bar, sidebar */
    /* borders */
    --atlas-border: #263449;
    --atlas-border-strong: #33445f;
    --atlas-border-control: #72839d; /* inputs: 3:1 against their background */
    /* text */
    --atlas-text: #edf2fa;
    --atlas-muted: #adbbd0;
    --atlas-dim: #8a9ab3;
    /* roles */
    --atlas-accent: #8eaeff;
    --atlas-accent-hover: #b4c9ff;
    --atlas-accent-soft: rgba(142, 174, 255, .12);
    --atlas-accent-line: #3a5390;
    --atlas-primary-fill: #2459d3;   /* filled buttons, white label 6.1:1 */
    --atlas-primary-fill-hover: #1e4fc0;
    --atlas-ok: #67d8a0;
    --atlas-warn: #f3c56b;
    --atlas-bad: #ff8f9b;
    --atlas-info: #73cbef;
    --atlas-ok-soft: rgba(103, 216, 160, .12);
    --atlas-warn-soft: rgba(243, 197, 107, .12);
    --atlas-bad-soft: rgba(255, 143, 155, .12);
    --atlas-info-soft: rgba(115, 203, 239, .12);
    --atlas-neutral-soft: rgba(173, 187, 208, .10);
    --atlas-ok-line: #2b6b4c;
    --atlas-warn-line: #7a5f26;
    --atlas-bad-line: #8a3a44;
    --atlas-info-line: #2f6680;
    --atlas-focus: #8eaeff;
    /* type */
    --atlas-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --atlas-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
    /* shape */
    --atlas-sidebar-w: 232px;
    --atlas-topbar-h: 56px;
    --atlas-section-nav-h: 47px;
    --atlas-radius: 8px;
    --atlas-radius-sm: 4px;
    --atlas-radius-lg: 12px;
}

/* Bootstrap 5.3 dark theme, mapped to the Atlas tokens (the page sets data-bs-theme="dark"). */
[data-bs-theme=dark] {
    --bs-body-bg: var(--atlas-bg); --bs-body-color: var(--atlas-text);
    --bs-body-font-family: var(--atlas-font); --bs-body-font-size: .875rem;
    --bs-font-sans-serif: var(--atlas-font); --bs-font-monospace: var(--atlas-mono);
    --bs-emphasis-color: #ffffff; --bs-secondary-color: var(--atlas-muted); --bs-tertiary-color: var(--atlas-dim);
    --bs-secondary-bg: var(--atlas-surface-2); --bs-tertiary-bg: var(--atlas-surface);
    --bs-border-color: var(--atlas-border); --bs-border-color-translucent: rgba(173, 187, 208, .15);
    --bs-link-color: var(--atlas-accent); --bs-link-color-rgb: 142, 174, 255;
    --bs-link-hover-color: var(--atlas-accent-hover); --bs-link-hover-color-rgb: 180, 201, 255;
    --bs-code-color: #c8d5ff;
    --bs-focus-ring-color: rgba(142, 174, 255, .5);
    --bs-border-radius: var(--atlas-radius-sm); --bs-border-radius-sm: var(--atlas-radius-sm); --bs-border-radius-lg: var(--atlas-radius);
}

.atlas-page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.atlas-h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 4px; }
.atlas-muted { color: var(--atlas-muted); }
.atlas-dim { color: var(--atlas-dim); }
.atlas-ok { color: var(--atlas-ok); }
.atlas-bad { color: var(--atlas-bad); }

.atlas-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.atlas-stat { background: var(--atlas-surface); border: 1px solid var(--atlas-border); border-radius: 10px; padding: 8px 16px; min-width: 92px; text-align: center; }
.atlas-stat-value { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.atlas-stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--atlas-muted); }

.atlas-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; align-items: end;
    background: var(--atlas-surface); border: 1px solid var(--atlas-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.atlas-filters .form-label { font-size: .75rem; color: var(--atlas-muted); margin-bottom: 2px; }
.atlas-filters .form-select, .atlas-filters .form-control { background-color: var(--atlas-surface-2); color: var(--atlas-text); border-color: var(--atlas-border-strong); }
.atlas-filter-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.atlas-device-table th a { color: var(--atlas-muted); text-decoration: none; font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.atlas-device-table th a:hover { color: var(--atlas-text); }
.atlas-device-link { color: var(--atlas-accent); font-weight: 600; text-decoration: none; }
.atlas-device-link:hover { text-decoration: underline; }

.atlas-status { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--atlas-border); }
.atlas-status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.atlas-status-online { color: var(--atlas-ok); border-color: var(--atlas-ok-line); background: var(--atlas-ok-soft); }
.atlas-status-offline { color: var(--atlas-bad); border-color: var(--atlas-bad-line); background: var(--atlas-bad-soft); }
.atlas-status-unknown { color: var(--atlas-dim); }
.atlas-status-warning { color: var(--atlas-warn); border-color: var(--atlas-warn-line); background: var(--atlas-warn-soft); }

.atlas-empty { border: 1px dashed var(--atlas-border-strong); border-radius: 10px; padding: 28px; text-align: center; color: var(--atlas-muted); }
.atlas-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 14px 0; }

.atlas-panel { background: var(--atlas-surface); border: 1px solid var(--atlas-border); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.atlas-panel-danger { border-color: var(--atlas-bad-line); }
.atlas-card-mini { background: var(--atlas-surface); border: 1px solid var(--atlas-border); border-radius: 10px; padding: 8px 14px; }
.atlas-form-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.atlas-form-row .form-label { font-size: .75rem; color: var(--atlas-muted); margin-bottom: 2px; }

.atlas-bl { font-size: .8rem; font-weight: 600; }
.atlas-bl-escrowed { color: var(--atlas-ok); }
.atlas-bl-pending { color: var(--atlas-warn); }
.atlas-bl-failed { color: var(--atlas-bad); }
.atlas-bl-not_enabled, .atlas-bl-unsupported, .atlas-bl-off, .atlas-bl-none { color: var(--atlas-dim); }
.atlas-bl-needs_attention { color: var(--atlas-warn); }

.atlas-auth-card { max-width: 420px; margin: 48px auto; background: var(--atlas-surface); border: 1px solid var(--atlas-border); border-radius: 12px; padding: 24px 28px; }
.atlas-auth-card-wide { max-width: 560px; }
.atlas-qr { background: #fff; display: block; width: fit-content; margin: 12px auto; padding: 8px; border-radius: 8px; }
.atlas-qr svg { width: 240px; height: 240px; max-width: 70vw; max-height: 70vw; display: block; }
.atlas-recovery-codes { background: var(--atlas-surface-2); border: 1px solid var(--atlas-border-strong); border-radius: 8px; padding: 10px 14px; font-size: 1rem; letter-spacing: .05em; }
.atlas-steps { padding-left: 1.2rem; color: var(--atlas-muted); }

/* ---------- base ---------- */
html, body { min-height: 100%; }
body { background: var(--atlas-bg); color: var(--atlas-text); margin: 0; font-family: var(--atlas-font); font-size: .875rem; line-height: 1.45;
    font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
code, kbd, pre, samp, .atlas-mono { font-family: var(--atlas-mono); font-size: .92em; }
a { color: var(--atlas-accent); }
a:hover { color: var(--atlas-accent-hover); }
.atlas-h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 10px; }
.atlas-content h2, .atlas-content h3 { font-weight: 700; }
.atlas-content h3 { font-size: 1.15rem; }

/* ---------- top bar ---------- */
.atlas-topbar { position: sticky; top: 0; z-index: 30; height: var(--atlas-topbar-h); display: flex; align-items: center; gap: 16px;
    padding: 0 20px; background: var(--atlas-chrome); border-bottom: 1px solid var(--atlas-border); }
.atlas-brand { color: #ffffff; font-size: 19px; font-weight: 800; letter-spacing: 2px; text-decoration: none; }
.atlas-brand:hover { color: var(--atlas-accent); }
.atlas-tenant { display: flex; align-items: center; gap: 8px; padding-left: 16px; border-left: 1px solid var(--atlas-border); }
.atlas-tenant-name, .atlas-tenant-select { color: var(--atlas-text); font-size: 14px; font-weight: 700; }
.atlas-tenant-select { background: var(--atlas-surface-2); border: 1px solid var(--atlas-border-strong); border-radius: 8px; padding: 5px 10px; }
.atlas-tenant-role { color: var(--atlas-accent); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    border: 1px solid var(--atlas-accent-line); border-radius: 999px; padding: 2px 8px; }
.atlas-nav-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.atlas-username { color: var(--atlas-muted); font-size: 13px; text-decoration: none; }
.atlas-username:hover { color: var(--atlas-text); }
.atlas-logout-form { margin: 0; }
.atlas-logout-button { background: transparent; border: 1px solid var(--atlas-border-strong); border-radius: 8px; color: var(--atlas-text); padding: 6px 14px; font-size: 13px; font-weight: 600; }
.atlas-logout-button:hover { background: var(--atlas-hover); border-color: var(--atlas-border-control); }
.atlas-nav-burger { display: none; cursor: pointer; font-size: 20px; color: var(--atlas-muted); margin: 0; }
.atlas-nav-toggle { display: none; }

/* ---------- sidebar ---------- */
.atlas-sidebar { position: fixed; top: var(--atlas-topbar-h); bottom: 0; left: 0; width: var(--atlas-sidebar-w); overflow-y: auto; z-index: 20;
    background: var(--atlas-chrome); border-right: 1px solid var(--atlas-border); padding: 14px 10px 24px; }
.atlas-nav-section { margin-bottom: 18px; }
.atlas-nav-heading { color: var(--atlas-dim); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 0 10px 6px; }
/* Administration: one expandable group (details/summary, no script). */
.atlas-nav-group > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.atlas-nav-group > summary::-webkit-details-marker { display: none; }
.atlas-nav-group > summary::after { content: "\25B8"; font-size: .8rem; transition: transform .15s; }
.atlas-nav-group[open] > summary::after { transform: rotate(90deg); }
.atlas-nav-group > summary:hover { color: var(--atlas-text, #e6e9ef); }
.atlas-nav-subheading { color: var(--atlas-dim); font-size: .68rem; padding: 8px 10px 2px; opacity: .8; }
/* Administration home. */
.atlas-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.atlas-admin-link { display: block; padding: 8px 0; border-top: 1px solid var(--atlas-border, rgba(255,255,255,.08)); text-decoration: none; }
.atlas-admin-link:first-of-type { border-top: 0; }
.atlas-admin-link strong { display: block; }
.atlas-admin-link span { display: block; color: var(--atlas-dim); font-size: .85rem; }
.atlas-sidebar a { display: block; color: var(--atlas-muted); font-size: 14px; font-weight: 600; text-decoration: none; padding: 7px 10px; border-radius: 8px; }
.atlas-sidebar a:hover { color: var(--atlas-text); background: var(--atlas-hover); }
.atlas-sidebar a.active { color: var(--atlas-accent); background: var(--atlas-accent-soft); }

/* ---------- main ---------- */
.atlas-main { min-height: calc(100vh - var(--atlas-topbar-h)); display: flex; flex-direction: column; }
.atlas-shell .atlas-main { margin-left: var(--atlas-sidebar-w); }
.atlas-content { flex: 1; width: 100%; max-width: 1920px; padding: 24px 28px 40px; }
/* The Dashboard uses the whole screen: more width means more widget columns. */
.atlas-content:has(#dashboard-widgets) { max-width: none; }
.atlas-bare .atlas-content { margin: 0 auto; max-width: 1100px; }
.atlas-footer { padding: 16px 28px; border-top: 1px solid var(--atlas-border); color: var(--atlas-dim); font-size: 12px; }

@media (max-width: 991.98px) {
    .atlas-nav-burger { display: block; }
    .atlas-sidebar { transform: translateX(-100%); transition: transform .15s ease; box-shadow: 0 0 24px rgba(0,0,0,.5); }
    .atlas-nav-toggle:checked ~ .atlas-sidebar { transform: none; }
    .atlas-shell .atlas-main { margin-left: 0; }
    .atlas-content { padding: 18px 16px 32px; }
    .atlas-tenant { display: none; }
}
@media (max-width: 575.98px) { .atlas-username { display: none; } }

/* ---------- components ---------- */
.atlas-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.atlas-kpi { display: flex; flex-direction: column; gap: 2px; background: var(--atlas-surface); border: 1px solid var(--atlas-border);
    border-left: 3px solid var(--atlas-accent); border-radius: var(--atlas-radius); padding: 14px 16px; color: var(--atlas-text); text-decoration: none; }
.atlas-kpi:hover { border-color: var(--atlas-border-strong); color: var(--atlas-text); background: var(--atlas-hover); }
.atlas-kpi-active { border-color: var(--atlas-accent); box-shadow: inset 0 0 0 1px var(--atlas-accent); }
.atlas-kpi-ok { border-left-color: var(--atlas-ok); }
.atlas-kpi-bad { border-left-color: var(--atlas-bad); }
.atlas-kpi-warn { border-left-color: var(--atlas-warn); }
.atlas-kpi-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--atlas-muted); font-weight: 700; }
.atlas-kpi-value { font-size: 1.9rem; font-weight: 800; line-height: 1.15; }
.atlas-kpi-sub { font-size: .8rem; color: var(--atlas-dim); }
.atlas-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.atlas-grid-2 > .atlas-panel { margin-bottom: 0; }
.atlas-callout { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--atlas-accent-soft); border: 1px solid var(--atlas-accent-line);
    border-radius: var(--atlas-radius); padding: 10px 14px; margin-bottom: 16px; }
.atlas-tabs { display: inline-flex; border: 1px solid var(--atlas-border-strong); border-radius: 8px; overflow: hidden; }
.atlas-tabs a { padding: 6px 12px; font-size: .85rem; font-weight: 600; color: var(--atlas-muted); text-decoration: none; }
.atlas-tabs a + a { border-left: 1px solid var(--atlas-border-strong); }
.atlas-tabs a.active { background: var(--atlas-accent-soft); color: var(--atlas-accent); }
.atlas-meter-list { list-style: none; padding: 0; margin: 0; }
.atlas-meter-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--atlas-border); }
.atlas-meter-list li > :last-child { margin-left: auto; }
.atlas-meter-list li:last-child { border-bottom: 0; }

/* ---------- Bootstrap, themed to the tokens ---------- */
/* Every table follows the Atlas dark theme, with or without .table-dark (Bootstrap 5.3 variables). */
.table, .table-dark {
    --bs-table-color: var(--atlas-text); --bs-table-bg: var(--atlas-surface); --bs-table-border-color: var(--atlas-border);
    --bs-table-striped-color: var(--atlas-text); --bs-table-striped-bg: rgba(173, 187, 208, .03);
    --bs-table-hover-color: var(--atlas-text); --bs-table-hover-bg: var(--atlas-hover);
    --bs-table-active-color: var(--atlas-text); --bs-table-active-bg: var(--atlas-hover);
    color: var(--atlas-text); border-color: var(--atlas-border);
}
.table > thead th, .table-dark > thead th { color: var(--atlas-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; background: var(--atlas-surface-2); }
.table > thead th a { color: var(--atlas-muted); text-decoration: none; }
.table > thead th a:hover, .table > thead th a:focus-visible { color: var(--atlas-text); }
.table > tbody tr:focus-within { --bs-table-bg-state: var(--atlas-hover); }
.table td.atlas-muted, .table .text-muted { color: var(--atlas-muted) !important; }
.table caption { color: var(--atlas-muted); }
.form-control, .form-select { background-color: var(--atlas-surface-2); color: var(--atlas-text); border-color: var(--atlas-border-strong); }
.form-control:focus, .form-select:focus { background-color: var(--atlas-surface-2); color: var(--atlas-text); border-color: var(--atlas-accent); }
.form-control::placeholder { color: var(--atlas-dim); }
.form-label { color: var(--atlas-muted); }
.text-secondary, .text-muted { color: var(--atlas-muted) !important; }
.btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--atlas-primary-fill); --bs-btn-border-color: var(--atlas-primary-fill);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--atlas-primary-fill-hover); --bs-btn-hover-border-color: var(--atlas-primary-fill-hover);
    --bs-btn-active-bg: var(--atlas-primary-fill-hover); --bs-btn-active-border-color: var(--atlas-primary-fill-hover);
    --bs-btn-disabled-bg: var(--atlas-primary-fill); --bs-btn-disabled-border-color: var(--atlas-primary-fill); }
.alert { border-radius: var(--atlas-radius); }

/* ---------- unified device page (milestone Phase 3) ---------- */
.atlas-device-header { background: var(--atlas-surface); border: 1px solid var(--atlas-border); border-radius: var(--atlas-radius); padding: 14px 18px 0; margin-bottom: 16px; }
.atlas-device-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.atlas-device-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 18px; margin: 0 0 8px; }
.atlas-device-facts dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--atlas-dim); font-weight: 700; }
.atlas-device-facts dd { margin: 0; font-size: .9rem; word-break: break-word; }
.atlas-device-tabs { display: flex; gap: 2px; overflow-x: auto; margin: 10px -18px 0; padding: 0 12px; border-top: 1px solid var(--atlas-border); }
.atlas-device-tabs a { padding: 10px 12px; color: var(--atlas-muted); font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.atlas-device-tabs a:hover { color: var(--atlas-text); }
.atlas-device-tabs a.active { color: var(--atlas-accent); border-bottom-color: var(--atlas-accent); }
.atlas-kv { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 6px 14px; margin: 0; }
.atlas-kv dt { color: var(--atlas-muted); font-weight: 600; font-size: .85rem; }
.atlas-kv dd { margin: 0; }
.atlas-reveal-box { border: 2px solid var(--atlas-warn); border-radius: var(--atlas-radius); padding: 12px 14px; margin: 8px 0 12px; }
.atlas-reveal-key { font-family: var(--atlas-mono); font-size: 1.3rem; letter-spacing: .05em; word-break: break-all; }
.atlas-sev-warning td:first-child { border-left: 3px solid var(--atlas-warn); }
.atlas-sev-error td:first-child { border-left: 3px solid var(--atlas-bad); }
.atlas-collapsible > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; }
.atlas-collapsible > summary::-webkit-details-marker { display: none; }
.atlas-collapsible > summary::before { content: "\25B8"; color: var(--atlas-muted); margin-right: 8px; transition: transform .15s; display: inline-block; }
.atlas-collapsible[open] > summary::before { transform: rotate(90deg); }
.atlas-collapsible > summary .atlas-h2 { margin: 0; }

/* ---- Remote tools inside the device page ---- */
.atlas-remote-panel { border: 1px solid var(--atlas-border); border-radius: var(--atlas-radius); overflow: hidden; background: var(--atlas-bg); }
.atlas-remote-panel-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--atlas-border); }
.atlas-remote-panel iframe { display: block; width: 100%; height: 78vh; border: 0; background: var(--atlas-bg); }
body.atlas-embed { background: var(--atlas-bg); }
.atlas-embed-main { padding: 12px; }
.atlas-embed #terminal { height: 62vh; }

/* ---- Performance history charts ---- */
.atlas-chart { width: 100%; height: 140px; display: block; }
.atlas-chart-grid { stroke: var(--atlas-border); stroke-width: 1; }
.atlas-chart-axis { fill: var(--atlas-dim); font-size: 10px; }
.atlas-chart-line { fill: none; stroke: var(--atlas-accent); stroke-width: 1.6; }
.atlas-chart-max { fill: none; stroke: var(--atlas-accent); stroke-opacity: .35; stroke-width: 1; }
.atlas-chart-gap { fill: var(--atlas-warn); fill-opacity: .10; }

/* ---------- Foundations (UI modernization) ---------- */
/* Type scale: 28 / 20 / 16 / 14 / 12; numbers line up in tables and tiles. */
.atlas-h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -.01em; }
.atlas-content h2:not(.atlas-h2) { font-size: 1.25rem; font-weight: 600; }
.atlas-h2 { font-size: 1rem; font-weight: 600; }
.table, .atlas-kpi-value, .atlas-stat-value, .atlas-meter-list, .atlas-device-facts dd { font-variant-numeric: tabular-nums; }
.atlas-section-help { color: var(--atlas-muted); font-size: .85rem; margin: -6px 0 12px; }

/* Focus: one visible ring everywhere. */
:focus-visible { outline: 2px solid var(--atlas-focus); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus, .atlas-tenant-select:focus {
    outline: none; box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.atlas-sidebar a:focus-visible, .atlas-tabs a:focus-visible, .atlas-device-tabs a:focus-visible { outline-offset: -2px; }

/* Forms: every control on the same tokens (no white browser menus: color-scheme + data-bs-theme). */
.form-control, .form-select, .atlas-tenant-select { border-color: var(--atlas-border-control); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--atlas-surface); color: var(--atlas-dim); }
.form-select option { background-color: var(--atlas-raised); color: var(--atlas-text); }
.form-check-input { background-color: var(--atlas-surface-2); border-color: var(--atlas-border-control); }
.form-check-input:checked { background-color: var(--atlas-primary-fill); border-color: var(--atlas-primary-fill); }
.form-text, .invalid-feedback { font-size: .8rem; }
.form-text { color: var(--atlas-muted); }
.invalid-feedback, .text-danger { color: var(--atlas-bad) !important; }
.text-success { color: var(--atlas-ok) !important; }
.text-warning { color: var(--atlas-warn) !important; }
.text-info { color: var(--atlas-info) !important; }

/* Floating layers and cards. */
.dropdown-menu { --bs-dropdown-bg: var(--atlas-raised); --bs-dropdown-border-color: var(--atlas-border-strong); --bs-dropdown-color: var(--atlas-text);
    --bs-dropdown-link-color: var(--atlas-text); --bs-dropdown-link-hover-bg: var(--atlas-hover); --bs-dropdown-link-hover-color: var(--atlas-text);
    --bs-dropdown-link-active-bg: var(--atlas-primary-fill); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.modal { --bs-modal-bg: var(--atlas-raised); --bs-modal-border-color: var(--atlas-border-strong); --bs-modal-color: var(--atlas-text);
    --bs-modal-header-border-color: var(--atlas-border); --bs-modal-footer-border-color: var(--atlas-border); --bs-modal-border-radius: var(--atlas-radius-lg); }
.card { --bs-card-bg: var(--atlas-surface); --bs-card-border-color: var(--atlas-border); --bs-card-cap-bg: var(--atlas-surface-2);
    --bs-card-color: var(--atlas-text); --bs-card-border-radius: var(--atlas-radius); }
.list-group { --bs-list-group-bg: var(--atlas-surface); --bs-list-group-color: var(--atlas-text); --bs-list-group-border-color: var(--atlas-border); }
.popover { --bs-popover-bg: var(--atlas-raised); --bs-popover-border-color: var(--atlas-border-strong); }
.tooltip { --bs-tooltip-bg: var(--atlas-raised); --bs-tooltip-color: var(--atlas-text); }
.btn-outline-secondary { --bs-btn-color: var(--atlas-muted); --bs-btn-border-color: var(--atlas-border-control);
    --bs-btn-hover-bg: var(--atlas-hover); --bs-btn-hover-border-color: var(--atlas-border-control); --bs-btn-hover-color: var(--atlas-text); }
.btn-outline-light { --bs-btn-color: var(--atlas-text); --bs-btn-border-color: var(--atlas-border-control);
    --bs-btn-hover-bg: var(--atlas-hover); --bs-btn-hover-color: var(--atlas-text); --bs-btn-hover-border-color: var(--atlas-border-control); }
.btn-outline-danger { --bs-btn-color: var(--atlas-bad); --bs-btn-border-color: var(--atlas-bad-line);
    --bs-btn-hover-bg: var(--atlas-bad-soft); --bs-btn-hover-color: var(--atlas-bad); --bs-btn-hover-border-color: var(--atlas-bad); }
.btn-danger { --bs-btn-bg: #b42335; --bs-btn-border-color: #b42335; --bs-btn-hover-bg: #9a1d2d; --bs-btn-hover-border-color: #9a1d2d; }

/* Alerts (messages) on the severity tokens. */
.alert { --bs-alert-color: var(--atlas-text); border-width: 1px; }
.alert-success { --bs-alert-bg: var(--atlas-ok-soft); --bs-alert-border-color: var(--atlas-ok-line); }
.alert-warning { --bs-alert-bg: var(--atlas-warn-soft); --bs-alert-border-color: var(--atlas-warn-line); }
.alert-danger { --bs-alert-bg: var(--atlas-bad-soft); --bs-alert-border-color: var(--atlas-bad-line); }
.alert-info, .alert-primary, .alert-secondary { --bs-alert-bg: var(--atlas-info-soft); --bs-alert-border-color: var(--atlas-info-line); }

/* Badges: one chip style on every page. Colour is never alone: the badge text is the label. */
.badge { font-weight: 600; font-size: .75rem; letter-spacing: .01em; padding: .3em .65em; border-radius: 999px; border: 1px solid var(--atlas-border-strong);
    background-color: var(--atlas-neutral-soft); color: var(--atlas-muted); }
.badge.bg-danger, .badge.text-bg-danger { background-color: var(--atlas-bad-soft) !important; color: var(--atlas-bad) !important; border-color: var(--atlas-bad-line); }
.badge.bg-warning, .badge.text-bg-warning { background-color: var(--atlas-warn-soft) !important; color: var(--atlas-warn) !important; border-color: var(--atlas-warn-line); }
.badge.bg-success, .badge.text-bg-success { background-color: var(--atlas-ok-soft) !important; color: var(--atlas-ok) !important; border-color: var(--atlas-ok-line); }
.badge.bg-info, .badge.text-bg-info, .badge.bg-primary, .badge.text-bg-primary { background-color: var(--atlas-info-soft) !important; color: var(--atlas-info) !important; border-color: var(--atlas-info-line); }
.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-dark, .badge.text-bg-dark, .badge.bg-light, .badge.text-bg-light {
    background-color: var(--atlas-neutral-soft) !important; color: var(--atlas-muted) !important; border-color: var(--atlas-border-strong); }
.atlas-sev { display: inline-flex; align-items: center; gap: 5px; }
.atlas-sev::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* States: empty / no results / loading / error / stale, each distinct. */
.atlas-state { border: 1px dashed var(--atlas-border-strong); border-radius: var(--atlas-radius); padding: 20px; text-align: center; color: var(--atlas-muted); margin-bottom: 16px; }
.atlas-state-error { border-style: solid; border-color: var(--atlas-bad-line); background: var(--atlas-bad-soft); color: var(--atlas-text); text-align: left; }
.atlas-state-stale { border-style: solid; border-color: var(--atlas-warn-line); background: var(--atlas-warn-soft); color: var(--atlas-text); text-align: left; padding: 8px 12px; }
.atlas-state-loading { border-style: solid; }
.atlas-state-loading::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px;
    border: 2px solid var(--atlas-border-control); border-top-color: var(--atlas-accent); border-radius: 50%; animation: atlas-spin .8s linear infinite; }
@keyframes atlas-spin { to { transform: rotate(360deg); } }
tr.atlas-empty-row > td { text-align: center; color: var(--atlas-muted); padding: 18px; }

/* Disclosure (details/summary) used for "View JSON" and advanced options. */
details.atlas-disclosure > summary { cursor: pointer; color: var(--atlas-accent); font-size: .85rem; width: fit-content; }
details.atlas-disclosure > summary:hover { color: var(--atlas-accent-hover); }
details.atlas-disclosure pre { background: var(--atlas-surface-2); border: 1px solid var(--atlas-border); border-radius: var(--atlas-radius-sm);
    padding: 8px 10px; margin: 6px 0 0; max-height: 18rem; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: .78rem; color: var(--atlas-muted); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
/* Stacked page sections with an in-page jump bar (Notifications). */
.atlas-section-nav { position: sticky; top: var(--atlas-topbar-h); z-index: 5; display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; margin: 0 0 18px;
    padding: 8px 0; min-height: var(--atlas-section-nav-h); box-sizing: border-box; background: var(--atlas-bg); border-bottom: 1px solid var(--atlas-border); }
.atlas-section-nav a { color: var(--atlas-muted); font-weight: 600; font-size: .85rem; text-decoration: none; padding: 5px 10px; border-radius: var(--atlas-radius-sm); }
.atlas-section-nav a:hover { color: var(--atlas-text); background: var(--atlas-hover); }
.atlas-section { margin-bottom: 36px; scroll-margin-top: calc(var(--atlas-topbar-h) + 56px); }
.atlas-section-title { font-size: 1.25rem; font-weight: 600; margin: 0 0 4px; }
.atlas-section .atlas-section-help { margin: 0 0 14px; }
.atlas-provider-list { display: flex; flex-direction: column; gap: 4px; }
details.atlas-add-panel > summary { cursor: pointer; font-weight: 600; color: var(--atlas-accent); }
details.atlas-add-panel > summary:hover { color: var(--atlas-accent-hover); }
details.atlas-add-panel[open] > summary { margin-bottom: 6px; }
.atlas-steps-list { padding-left: 1.1rem; }
.atlas-steps-list li + li { margin-top: 2px; }
.atlas-kv-compact { grid-template-columns: minmax(90px, max-content) 1fr; gap: 1px 12px; font-size: .8rem; }
.atlas-kv-compact dt { font-size: .8rem; font-weight: 500; color: var(--atlas-dim); }
.atlas-kv-compact dd { word-break: break-word; }
/* Performance history (uPlot). */
.atlas-perf-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.atlas-perf-chart { margin-top: 10px; }
.atlas-perf-title { font-size: .8rem; font-weight: 600; color: var(--atlas-muted); margin-bottom: 2px; }
.atlas-perf-chart .uplot { font-family: var(--atlas-font); color: var(--atlas-muted); }
.atlas-perf-chart .u-legend { font-size: .78rem; text-align: left; margin-top: 2px; }
.atlas-perf-chart .u-legend th { font-weight: 500; color: var(--atlas-muted); }
.atlas-perf-chart .u-legend td { font-variant-numeric: tabular-nums; color: var(--atlas-text); }
.atlas-perf-chart .u-select { background: rgba(142, 174, 255, .16); }
.atlas-perf-chart .u-cursor-x, .atlas-perf-chart .u-cursor-y { border-color: var(--atlas-border-control) !important; }
/* ---------- Tables and navigation ---------- */
.atlas-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .82rem; color: var(--atlas-dim); margin-bottom: 6px; }
.atlas-breadcrumb a { color: var(--atlas-muted); text-decoration: none; }
.atlas-breadcrumb a:hover { color: var(--atlas-text); text-decoration: underline; }
.atlas-breadcrumb [aria-current] { color: var(--atlas-text); }
.atlas-density-button { background: transparent; border: 1px solid var(--atlas-border-strong); border-radius: var(--atlas-radius-sm); color: var(--atlas-muted);
    font-size: 12px; font-weight: 600; padding: 4px 10px; }
.atlas-density-button:hover { color: var(--atlas-text); background: var(--atlas-hover); }
.atlas-density-button[aria-pressed="true"] { color: var(--atlas-accent); border-color: var(--atlas-accent-line); background: var(--atlas-accent-soft); }
@media (max-width: 767.98px) { .atlas-density-button { display: none; } }
.atlas-table-tools { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.atlas-table-tools .dropdown-menu { min-width: 220px; }
.atlas-row-disabled > td { color: var(--atlas-dim); }
.atlas-row-disabled > td .fw-semibold { color: var(--atlas-muted); }
/* Row density: comfortable by default, compact on request. */
.table > :not(caption) > * > * { padding-top: .55rem; padding-bottom: .55rem; }
.table-sm > :not(caption) > * > * { padding-top: .4rem; padding-bottom: .4rem; }
html.atlas-compact .table > :not(caption) > * > * { padding-top: .2rem; padding-bottom: .2rem; }
html.atlas-compact .table { font-size: .82rem; }
/* Sticky table headers on wide screens (narrow screens keep horizontal scrolling instead). */
@media (min-width: 1200px) {
    .atlas-content .table-responsive { overflow-x: visible; }
    .atlas-content .table > thead th { position: sticky; top: var(--atlas-topbar-h); z-index: 3; box-shadow: inset 0 -1px 0 var(--atlas-border); }
    /* Inside a scrolling dialog the header sticks to the dialog, not below the top bar. */
    .atlas-content:has(.atlas-section-nav) .table > thead th { top: calc(var(--atlas-topbar-h) + var(--atlas-section-nav-h)); }
    .atlas-content .modal .table > thead th { top: 0; }
}
#rule-form .col-md-auto .form-select, .atlas-panel .col-md-auto .form-select { min-width: 8rem; }
/* Job Tracker progress: succeeded | failed | canceled | running, on a track that is the queued rest. */
.atlas-job-progress { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--atlas-surface-2); border: 1px solid var(--atlas-border); }
.atlas-job-progress .seg { display: block; height: 100%; transition: width .4s ease; }
.atlas-job-progress .seg-ok { background: var(--atlas-ok); }
.atlas-job-progress .seg-bad { background: var(--atlas-bad); }
.atlas-job-progress .seg-cancel { background: var(--atlas-dim); }
.atlas-job-progress .seg-run { background: repeating-linear-gradient(45deg, var(--atlas-info), var(--atlas-info) 6px, rgba(115, 203, 239, .55) 6px, rgba(115, 203, 239, .55) 12px); }
.atlas-bulk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.atlas-kpis-compact { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

/* Dashboard widgets (2026-10-26). */
.atlas-widgets { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; align-items: start; }
.atlas-widgets > .atlas-widget { margin-bottom: 0; }
.atlas-widget-wide { grid-column: 1 / -1; }
.atlas-widget .atlas-kpis { margin-bottom: 0; }
.atlas-widget h2 a { color: inherit; text-decoration: none; }
.atlas-widget h2 a:hover { text-decoration: underline; }
.atlas-warn { color: var(--atlas-warn); }
.atlas-attention { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.atlas-attention li { padding: 8px 12px; border-radius: 6px; border-left: 4px solid var(--atlas-dim); background: rgba(255,255,255,.03); }
.atlas-attention li a { color: inherit; text-decoration: none; display: block; }
.atlas-attention li a:hover { text-decoration: underline; }
.atlas-attention-critical { border-left-color: var(--atlas-bad) !important; }
.atlas-attention-warning { border-left-color: var(--atlas-warn) !important; }
.atlas-attention-info { border-left-color: var(--atlas-accent, #4ea1ff) !important; }
.atlas-overall { padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; margin-right: 8px; }
.atlas-overall-good { background: rgba(46,204,113,.15); color: var(--atlas-ok, #2ecc71); }
.atlas-overall-warning { background: rgba(241,196,15,.15); color: var(--atlas-warn); }
.atlas-overall-critical { background: rgba(231,76,60,.18); color: var(--atlas-bad); }
.atlas-mini-kpis { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 10px; }
.atlas-mini-kpis a { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.atlas-mini-kpis strong { font-size: 1.6rem; line-height: 1.1; }
.atlas-mini-kpis span { color: var(--atlas-dim); font-size: .8rem; }
.atlas-mini-kpis a.atlas-bad strong { color: var(--atlas-bad); }
.atlas-mini-kpis a.atlas-warn strong { color: var(--atlas-warn); }
.atlas-health, .atlas-sev { padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.atlas-health-ok { background: rgba(46,204,113,.15); color: var(--atlas-ok, #2ecc71); }
.atlas-health-warn, .atlas-sev-warning { background: rgba(241,196,15,.15); color: var(--atlas-warn); }
.atlas-health-bad, .atlas-sev-critical { background: rgba(231,76,60,.18); color: var(--atlas-bad); }
.atlas-sev-info { background: rgba(78,161,255,.15); color: var(--atlas-accent, #4ea1ff); }
/* Donut charts (SVG). */
.atlas-donut { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.atlas-donut svg { width: 140px; height: 140px; flex: 0 0 140px; }
.atlas-donut circle { transition: stroke-width .15s; }
.atlas-donut a:hover circle { stroke-width: 17; }
.atlas-donut-value { fill: var(--atlas-text, #e6e9ef); font-size: 22px; font-weight: 700; }
.atlas-donut-label { fill: var(--atlas-dim); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.atlas-donut-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: .85rem; }
.atlas-donut-legend a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.atlas-donut-legend a:hover { text-decoration: underline; }
.atlas-donut-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.atlas-donut-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
/* Device overview (2026-10-26): graphs | information | activity. */
.atlas-overview { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.6fr) minmax(280px, 1.1fr); gap: 16px; align-items: start; }
@media (max-width: 1200px) { .atlas-overview { grid-template-columns: 1fr 1fr; } .atlas-overview-activity { grid-column: 1 / -1; } }
@media (max-width: 760px) { .atlas-overview { grid-template-columns: 1fr; } }
.atlas-overview > .atlas-panel { margin-bottom: 0; }
.atlas-overview-metrics { display: grid; gap: 12px; }
.atlas-metric-card { display: block; text-decoration: none; color: inherit; margin-bottom: 0; padding: 12px 14px; }
.atlas-metric-card:hover { border-color: var(--atlas-accent, #4ea1ff); }
.atlas-metric-head { display: flex; justify-content: space-between; font-weight: 600; }
.atlas-metric-value { font-size: 1.3rem; font-weight: 700; margin: 2px 0 4px; }
.atlas-metric-card svg { width: 100%; height: auto; }
.atlas-overview-sub { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--atlas-dim); margin: 14px 0 6px; }
.atlas-overview-info .atlas-kv { grid-template-columns: minmax(140px, 38%) 1fr; }
.atlas-feed { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
.atlas-feed li { padding-left: 10px; border-left: 3px solid var(--atlas-dim); }
.atlas-feed-warning { border-left-color: var(--atlas-warn) !important; }
.atlas-feed-error { border-left-color: var(--atlas-bad) !important; }
.atlas-feed-head { display: flex; justify-content: space-between; gap: 8px; }
.atlas-feed-head strong { font-weight: 500; }
/* Drag to reorder (dashboard Customize). */
.atlas-drag-row { cursor: grab; }
.atlas-drag-handle { color: var(--atlas-dim); width: 1.5rem; user-select: none; }
.atlas-dragging { opacity: .45; }
/* Actions menus. */
.atlas-bulk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.atlas-bulk-bar .dropdown-menu { background: var(--atlas-panel, #1b2230); border-color: var(--atlas-border, rgba(255,255,255,.1)); }
.atlas-bulk-bar .dropdown-item { color: var(--atlas-text, #e6e9ef); }
.atlas-bulk-bar .dropdown-item:hover { background: rgba(255,255,255,.06); }
.atlas-bulk-bar .dropdown-header { color: var(--atlas-dim); }
/* Alerts over time. */
.atlas-trend { width: 100%; height: auto; }
.atlas-trend-axis { fill: var(--atlas-dim); font-size: 10px; }
.atlas-trend-legend { display: flex; gap: 16px; margin-top: 6px; }
/* Clients table (dashboard): a severity edge on the first cell; rows past the tenth wait for "Show all". */
.atlas-clients tr.atlas-org-row > td:first-child { box-shadow: inset 3px 0 0 var(--atlas-ok); }
.atlas-clients tr.atlas-org-bad > td:first-child { box-shadow: inset 3px 0 0 var(--atlas-bad); }
.atlas-clients tr.atlas-org-warn > td:first-child { box-shadow: inset 3px 0 0 var(--atlas-warn); }
.atlas-clients td { padding-top: .55rem; padding-bottom: .55rem; }
.atlas-clients .atlas-org-count + .atlas-org-count { margin-left: 12px; }
.atlas-clients tr.atlas-collapsed { display: none; }
.atlas-org-count { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.atlas-ico-critical { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: var(--atlas-bad); color: #fff; font-size: 12px; font-weight: 700; align-items: center; justify-content: center; }
.atlas-ico-warning { color: var(--atlas-warn); font-size: 14px; }
/* Device health summary. */
.atlas-health-pct { margin-bottom: 8px; } .atlas-health-pct strong { font-size: 1.2rem; }
.atlas-health-bar { display: flex; height: 18px; border-radius: 3px; overflow: hidden; gap: 2px; }
.atlas-health-seg { display: block; min-width: 4px; }
.atlas-health-seg-ok { background: var(--atlas-ok, #2ecc71); }
.atlas-health-seg-warn { background: var(--atlas-warn); }
.atlas-health-seg-bad { background: var(--atlas-bad); }
.atlas-health-seg-unknown { background: #7f8c8d; }
.atlas-health-legend { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 14px; font-size: .85rem; }
.atlas-health-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
/* Dashboard slots and Edit layout mode. */
.atlas-widgets > .atlas-widget-slot { min-width: 0; container-type: inline-size; }
/* Widget tables scroll inside their card (no sticky headers there), never over the next card. */
.atlas-widget .table-responsive { overflow-x: auto !important; }
.atlas-widget .table > thead th { position: static !important; }
.atlas-widget-slot > .atlas-widget { margin-bottom: 0; height: 100%; }
.atlas-edit-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 14px; margin-bottom: 12px; border: 1px dashed var(--atlas-accent, #4ea1ff); border-radius: 8px; }
.atlas-widgets-editing .atlas-widget-slot { outline: 1px dashed rgba(255,255,255,.25); outline-offset: 4px; border-radius: 6px; cursor: grab; }
.atlas-widgets-editing .atlas-widget-slot > .atlas-widget { pointer-events: none; opacity: .85; }
.atlas-slot-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.atlas-slot-handle { cursor: grab; color: var(--atlas-dim); font-size: 1.1rem; }
.atlas-slot-title { font-weight: 600; margin-right: auto; }
/* Scripts. */
.atlas-script-editor { font-size: .85rem; line-height: 1.4; tab-size: 4; }
.atlas-script-preview { background: rgba(0,0,0,.25); border: 1px solid var(--atlas-border, rgba(255,255,255,.08)); border-radius: 6px; padding: 10px 12px; max-height: 420px; overflow: auto; white-space: pre-wrap; font-size: .82rem; }

/* ---------- Cards, pills, controls (2026-11-02) ---------- */
/* atlas-card was used on many pages without a style; it is the standard surface. */
.atlas-card { background: var(--atlas-surface); border: 1px solid var(--atlas-border); border-radius: var(--atlas-radius-lg); }
.atlas-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; line-height: 1.5; padding: 1px 9px; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--atlas-border-strong); color: var(--atlas-muted); background: var(--atlas-neutral-soft); }
.atlas-pill-accent { color: var(--atlas-accent); border-color: var(--atlas-accent-line); background: var(--atlas-accent-soft); }
.atlas-pill-ok { color: var(--atlas-ok); border-color: var(--atlas-ok-line); background: var(--atlas-ok-soft); }
.atlas-pill-warn { color: var(--atlas-warn); border-color: var(--atlas-warn-line); background: var(--atlas-warn-soft); }
.atlas-pill-bad { color: var(--atlas-bad); border-color: var(--atlas-bad-line); background: var(--atlas-bad-soft); }
.atlas-pill-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.atlas-link-btn { background: none; border: 0; padding: 0; color: var(--atlas-accent); font-size: .78rem; font-weight: 600; cursor: pointer; }
.atlas-link-btn:hover { color: var(--atlas-accent-hover); text-decoration: underline; }
.atlas-link-btn-danger { color: var(--atlas-bad); }
.atlas-link-btn-danger:hover { color: var(--atlas-bad); }
.atlas-eyebrow { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--atlas-dim); }

/* Segmented choice (radio buttons that look like one control). */
.atlas-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--atlas-surface-2); border: 1px solid var(--atlas-border-strong); border-radius: 9px; }
.atlas-seg input { position: absolute; opacity: 0; pointer-events: none; }
.atlas-seg label { padding: 5px 12px; border-radius: 6px; font-size: .82rem; font-weight: 600; color: var(--atlas-muted); cursor: pointer; user-select: none; transition: background .12s, color .12s; }
.atlas-seg label:hover { color: var(--atlas-text); background: var(--atlas-hover); }
.atlas-seg input:checked + label { background: var(--atlas-primary-fill); color: #fff; }
.atlas-seg input:focus-visible + label { outline: 2px solid var(--atlas-focus); outline-offset: 1px; }
fieldset:disabled .atlas-seg label, fieldset:disabled .atlas-days label { cursor: default; }
fieldset:disabled .atlas-seg label:hover { background: none; color: var(--atlas-muted); }
fieldset:disabled .atlas-seg input:checked + label { background: var(--atlas-border-strong); color: var(--atlas-text); }
/* Day chips. */
.atlas-days { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.atlas-days input { position: absolute; opacity: 0; pointer-events: none; }
.atlas-days label { min-width: 42px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; user-select: none;
    border: 1px solid var(--atlas-border-strong); background: var(--atlas-surface-2); color: var(--atlas-muted); font-size: .8rem; font-weight: 600; }
.atlas-days label:hover { color: var(--atlas-text); border-color: var(--atlas-border-control); }
.atlas-days input:checked + label { background: var(--atlas-accent-soft); border-color: var(--atlas-accent); color: var(--atlas-accent); }
.atlas-days input:focus-visible + label { outline: 2px solid var(--atlas-focus); outline-offset: 1px; }
/* Switches. */
.atlas-switch { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 0; cursor: pointer; font-weight: 600; min-height: 0; }
.atlas-switch .form-check-input { width: 2.5em; height: 1.35em; margin: 0; float: none; cursor: pointer; }
/* Small labelled fields side by side. */
.atlas-fields { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.atlas-field { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.atlas-field > span { font-size: .72rem; font-weight: 600; color: var(--atlas-muted); }
.atlas-unit { display: inline-flex; align-items: center; gap: 8px; color: var(--atlas-muted); font-size: .82rem; }
.atlas-unit .form-control { width: 6.5rem; }
.atlas-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.atlas-stack > .atlas-preview, .atlas-stack > textarea { align-self: stretch; }
.atlas-preview { padding: 8px 12px; border-radius: var(--atlas-radius); background: var(--atlas-accent-soft); border: 1px solid var(--atlas-accent-line); font-size: .82rem; color: var(--atlas-text); }
.atlas-preview strong { color: var(--atlas-accent); font-weight: 600; }

/* ---------- Settings editor (policies, overrides) ---------- */
.atlas-editor { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 24px; align-items: start; }
.atlas-editor-nav { position: sticky; top: calc(var(--atlas-topbar-h) + 16px); display: flex; flex-direction: column; gap: 2px; }
.atlas-editor-nav a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--atlas-radius);
    color: var(--atlas-muted); font-weight: 600; text-decoration: none; }
.atlas-editor-nav a:hover { background: var(--atlas-hover); color: var(--atlas-text); }
.atlas-editor-nav a.active { background: var(--atlas-accent-soft); color: var(--atlas-accent); }
.atlas-editor-nav a.atlas-editor-sub { padding: 4px 12px 4px 26px; font-size: .8rem; font-weight: 500; color: var(--atlas-dim); }
.atlas-editor-nav a.atlas-editor-sub:hover { color: var(--atlas-text); }
.atlas-editor-nav .atlas-eyebrow { padding: 0 12px 6px; }
.atlas-count { min-width: 22px; padding: 0 7px; border-radius: 999px; font-size: .7rem; font-weight: 700; text-align: center; background: var(--atlas-neutral-soft); color: var(--atlas-muted); }
.atlas-editor-nav a.active .atlas-count { background: var(--atlas-accent); color: var(--atlas-bg); }
@media (max-width: 991.98px) {
    .atlas-editor { grid-template-columns: 1fr; gap: 12px; }
    .atlas-editor-nav { position: static; flex-direction: row; overflow-x: auto; }
    .atlas-editor-nav a { white-space: nowrap; }
    .atlas-editor-nav a.atlas-editor-sub, .atlas-editor-nav .atlas-eyebrow { display: none; }
}
.atlas-settings-card { background: var(--atlas-surface); border: 1px solid var(--atlas-border); border-radius: var(--atlas-radius-lg); margin-bottom: 16px; overflow: hidden;
    scroll-margin-top: calc(var(--atlas-topbar-h) + 16px); }
.atlas-settings-card > header { padding: 14px 20px 12px; border-bottom: 1px solid var(--atlas-border); }
.atlas-settings-card > header h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.atlas-settings-card > header p { margin: 2px 0 0; color: var(--atlas-muted); font-size: .82rem; }
.atlas-settings-card > .atlas-settings-body { padding: 14px 20px; }
.atlas-setting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 1.15fr); gap: 10px 36px; padding: 14px 20px; border-top: 1px solid var(--atlas-border); transition: background .15s; }
.atlas-settings-card > header + .atlas-setting { border-top: 0; }
.atlas-setting-label { font-weight: 600; }
.atlas-setting-help { color: var(--atlas-dim); font-size: .8rem; margin-top: 3px; max-width: 62ch; }
.atlas-setting-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; }
.atlas-setting-control { min-width: 0; }
.atlas-setting-control .form-control, .atlas-setting-control .form-select { max-width: 26rem; }
.atlas-setting-control textarea.form-control { max-width: none; }
.atlas-setting.is-set { box-shadow: inset 3px 0 0 var(--atlas-accent-line); }
.atlas-setting.is-dirty { box-shadow: inset 3px 0 0 var(--atlas-warn); background: rgba(243, 197, 107, .04); }
@media (max-width: 991.98px) { .atlas-setting { grid-template-columns: 1fr; gap: 10px; } }
.atlas-summary-list { margin: 0; padding-left: 1.1rem; color: var(--atlas-muted); font-size: .85rem; }
.atlas-summary-list li + li { margin-top: 2px; }
.atlas-glance { background: var(--atlas-surface-2); }
.atlas-savebar { position: sticky; bottom: 16px; z-index: 25; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px 10px 18px; margin-top: 8px;
    background: var(--atlas-raised); border: 1px solid var(--atlas-border-strong); border-radius: var(--atlas-radius-lg); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.atlas-savebar-text { font-weight: 600; margin-right: auto; }
.atlas-savebar .form-check { margin: 0; color: var(--atlas-muted); font-size: .82rem; }
html.atlas-js .atlas-savebar:not(.is-dirty) { display: none; }
html.atlas-js .atlas-js-hide { display: none !important; }

/* ---------- Policy library and assignments ---------- */
.atlas-viewtabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--atlas-border); margin-bottom: 18px; }
.atlas-viewtabs a { padding: 9px 14px; color: var(--atlas-muted); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.atlas-viewtabs a:hover { color: var(--atlas-text); }
.atlas-viewtabs a.active { color: var(--atlas-accent); border-bottom-color: var(--atlas-accent); }
.atlas-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.atlas-search { max-width: 320px; }
.atlas-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Row-link tables: the whole row opens the first link (policy-editor.js). */
.atlas-rowlink tbody tr { cursor: pointer; }
.atlas-rowlink tbody tr:hover > * { background: var(--atlas-hover); }
.atlas-rowlink-main { color: var(--atlas-text); font-weight: 600; text-decoration: none; }
.atlas-rowlink tbody tr:hover .atlas-rowlink-main { color: var(--atlas-accent); }
.atlas-rowlink td:first-child { min-width: 14rem; }
@media (max-width: 767.98px) {
    .atlas-rowlink thead { display: none; }
    .atlas-rowlink tbody tr { display: block; padding: 10px 4px; border-bottom: 1px solid var(--atlas-border); }
    .atlas-rowlink tbody tr:last-child { border-bottom: 0; }
    .atlas-rowlink tbody td { display: block; border: 0; padding: 3px 12px; text-align: left !important; min-width: 0 !important; }
}
.atlas-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 991.98px) { .atlas-split { grid-template-columns: 1fr; } .atlas-orgpick { position: static !important; max-height: 340px !important; } }
.atlas-orgpick { padding: 10px; position: sticky; top: calc(var(--atlas-topbar-h) + 16px); max-height: calc(100vh - var(--atlas-topbar-h) - 32px); display: flex; flex-direction: column; }
.atlas-orgpick-list { overflow-y: auto; display: flex; flex-direction: column; gap: 1px; margin-top: 8px; }
.atlas-orgpick-list a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: var(--atlas-radius); color: var(--atlas-text); text-decoration: none; font-size: .86rem; }
.atlas-orgpick-list a:hover { background: var(--atlas-hover); }
.atlas-orgpick-list a.active { background: var(--atlas-accent-soft); color: var(--atlas-accent); }
.atlas-orgpick-list a > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atlas-orgpick-list a[hidden] { display: none; }
.atlas-orgpick-divider { border-top: 1px solid var(--atlas-border); margin: 6px 4px; }
.atlas-role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 16px; }
.atlas-role-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.atlas-role-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.atlas-role-head a { text-decoration: none; }
.atlas-accent-text { color: var(--atlas-accent); }
.atlas-role-policy { font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.atlas-role-policy a { color: var(--atlas-text); text-decoration: none; }
.atlas-role-policy a:hover { color: var(--atlas-accent); }
.atlas-list { list-style: none; margin: 0; padding: 0; }
.atlas-list > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--atlas-border); }
.atlas-list > li:first-child { border-top: 0; }
.atlas-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
html:not(.atlas-js) .atlas-js-only { display: none !important; }
.atlas-seg a { padding: 5px 12px; border-radius: 6px; font-size: .82rem; font-weight: 600; color: var(--atlas-muted); text-decoration: none; }
.atlas-seg a:hover { color: var(--atlas-text); background: var(--atlas-hover); }
.atlas-seg a.active { background: var(--atlas-primary-fill); color: #fff; }

/* ---------- App-wide polish (2026-11-02): one surface, quieter tables, softer controls ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--atlas-border-strong) transparent; }
.atlas-content { padding-top: 28px; }
.atlas-page-header { margin-bottom: 22px; }
.atlas-page-header .atlas-muted { max-width: 80ch; }

/* Surfaces: panels and cards share one look. */
.atlas-panel, .atlas-card, .atlas-card-mini, .atlas-settings-card, .atlas-filters {
    border-radius: var(--atlas-radius-lg); border-color: var(--atlas-border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .025) inset, 0 1px 2px rgba(0, 0, 0, .25); }
.atlas-panel { padding: 18px 20px; }
.atlas-panel > h2:first-child, .atlas-panel > .h5:first-child, .atlas-panel > .h6:first-child,
.atlas-card > h2:first-child, .atlas-card > .h5:first-child { font-size: 1rem; font-weight: 600; margin-bottom: 12px; }
a.atlas-card:hover, a.atlas-panel:hover { border-color: var(--atlas-accent-line); }

/* Tables: no heavy header band; rows separated by hairlines, the last one without. */
.table > thead th, .table-dark > thead th { background: transparent; color: var(--atlas-dim); font-size: .7rem; letter-spacing: .07em;
    border-bottom: 1px solid var(--atlas-border-strong); }
@media (min-width: 1200px) { .atlas-content .table > thead th { background: var(--atlas-bg); } .atlas-panel .table > thead th, .atlas-card .table > thead th, .atlas-settings-card .table > thead th { background: var(--atlas-surface); } }
.table > tbody > tr:last-child > * { border-bottom-width: 0; }
.table { --bs-table-bg: transparent; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--atlas-hover); }
.atlas-panel > .table:last-child, .atlas-panel > .table-responsive:last-child > .table, .atlas-card > .table:last-child { margin-bottom: 0; }

/* Controls: rounder, same height family, clear focus. */
.btn { --bs-btn-border-radius: 8px; font-weight: 600; letter-spacing: .005em; }
.btn-sm { --bs-btn-border-radius: 7px; --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .75rem; }
.btn-outline-light, .btn-outline-secondary { --bs-btn-bg: var(--atlas-surface); --bs-btn-border-color: var(--atlas-border-strong);
    --bs-btn-hover-bg: var(--atlas-hover); --bs-btn-hover-border-color: var(--atlas-border-control); --bs-btn-active-bg: var(--atlas-hover);
    --bs-btn-active-border-color: var(--atlas-border-control); --bs-btn-active-color: var(--atlas-text); }
.btn-outline-secondary { --bs-btn-color: var(--atlas-text); }
.btn-primary { box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.form-control, .form-select { border-radius: 8px; border-color: var(--atlas-border-strong); }
.form-control:hover:not(:disabled):not(:focus), .form-select:hover:not(:disabled):not(:focus) { border-color: var(--atlas-border-control); }
.form-control-sm, .form-select-sm { border-radius: 7px; }
.form-check-input { border-radius: .3em; }
.form-switch .form-check-input { border-radius: 2em; }

/* KPI tiles: tone on the number, not a stripe. */
.atlas-kpi { border-left-width: 1px; border-left-color: var(--atlas-border); border-radius: var(--atlas-radius-lg); padding: 16px 18px; }
.atlas-kpi:hover { border-left-color: var(--atlas-border-strong); }
.atlas-kpi-ok .atlas-kpi-value { color: var(--atlas-ok); }
.atlas-kpi-bad .atlas-kpi-value { color: var(--atlas-bad); }
.atlas-kpi-warn .atlas-kpi-value { color: var(--atlas-warn); }
.atlas-kpi-label { font-size: .7rem; letter-spacing: .07em; color: var(--atlas-dim); }
.atlas-kpi-value { font-weight: 700; letter-spacing: -.01em; }
.atlas-kpi-active { border-color: var(--atlas-accent); box-shadow: 0 0 0 1px var(--atlas-accent) inset; }
.atlas-stat { border-radius: var(--atlas-radius-lg); }

/* Tab groups: the same segmented look as the settings controls. */
.atlas-tabs { gap: 2px; padding: 3px; background: var(--atlas-surface-2); border-color: var(--atlas-border-strong); border-radius: 9px; overflow: visible; flex-wrap: wrap; }
.atlas-tabs a { border-radius: 6px; padding: 5px 12px; }
.atlas-tabs a + a { border-left: 0; }
.atlas-tabs a:hover { color: var(--atlas-text); background: var(--atlas-hover); }
.atlas-tabs a.active { background: var(--atlas-primary-fill); color: #fff; }
.atlas-device-header { border-radius: var(--atlas-radius-lg); }

/* Messages, empty states, menus. */
.alert { border-radius: var(--atlas-radius-lg); padding: .75rem 1rem; }
.atlas-state, .atlas-empty { border-radius: var(--atlas-radius-lg); }
.dropdown-menu { border-radius: 10px; padding: 4px; }
.dropdown-item { border-radius: 6px; }
.modal-content { box-shadow: 0 24px 64px rgba(0, 0, 0, .55); }
.badge { font-weight: 600; }

/* Sidebar: a little more air, softer active state. */
.atlas-sidebar a { padding: 7px 12px; }
.atlas-sidebar a.active { box-shadow: inset 2px 0 0 var(--atlas-accent); }

/* ---------- Dashboard command center (2026-11-02): fleet, act now, health by area ---------- */
.atlas-widget-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.atlas-widget-head .atlas-h2 { margin: 0; }
.atlas-widget-head .atlas-search { max-width: 16rem; }
@media (min-width: 1200px) { .atlas-widget-slot[data-slot="attention"]:not(.atlas-widget-wide) { grid-column: span 2; } }
.atlas-ok-text { color: var(--atlas-ok); }

.atlas-fleet-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 14px; }
.atlas-fleet-nums { display: flex; gap: 8px 36px; flex-wrap: wrap; }
.atlas-fleet-nums a { display: flex; flex-direction: column; color: var(--atlas-text); text-decoration: none; }
.atlas-fleet-nums strong { font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.atlas-fleet-nums span { font-size: .78rem; color: var(--atlas-dim); }
.atlas-fleet-nums a:hover span { color: var(--atlas-text); }
.atlas-fleet-nums a.is-ok strong { color: var(--atlas-ok); }
.atlas-fleet-nums a.is-bad strong { color: var(--atlas-bad); }
.atlas-fleet-nums a.is-muted strong { color: var(--atlas-muted); }
.atlas-fleet-health { text-align: right; }
.atlas-fleet-health strong { font-size: 1.75rem; font-weight: 700; line-height: 1.1; display: block; font-variant-numeric: tabular-nums; }
.atlas-fleet-health span { font-size: .78rem; color: var(--atlas-dim); }
.atlas-fleet-bar { height: 10px; border-radius: 999px; }
.atlas-fleet .atlas-health-legend { font-size: .8rem; color: var(--atlas-muted); align-items: center; }
.atlas-fleet .atlas-health-legend li { display: inline-flex; align-items: center; gap: 4px; }
.atlas-fleet .atlas-health-legend .ms-auto { margin-left: auto; }

.atlas-act { list-style: none; margin: 0; padding: 0; }
.atlas-act li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--atlas-border); }
.atlas-act li:first-child { border-top: 0; padding-top: 2px; }
.atlas-act-mark { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; }
.atlas-act-critical .atlas-act-mark { background: var(--atlas-bad); color: #fff; }
.atlas-act-warning .atlas-act-mark { background: rgba(243, 197, 107, .16); color: var(--atlas-warn); }
.atlas-act-text > a { color: var(--atlas-text); font-weight: 600; text-decoration: none; }
.atlas-act-text > a:hover { color: var(--atlas-accent); }
.atlas-act-text .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atlas-allclear { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: var(--atlas-radius); background: rgba(46, 204, 113, .08); color: var(--atlas-ok); font-weight: 600; }

.atlas-pillars { list-style: none; margin: 0; padding: 0; }
.atlas-pillars li { border-top: 1px solid var(--atlas-border); }
.atlas-pillars li:first-child { border-top: 0; }
.atlas-pillars li > a { display: grid; grid-template-columns: 10px 7.5rem minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 0; color: var(--atlas-text); text-decoration: none; }
.atlas-pillars li:first-child > a { padding-top: 2px; }
.atlas-pillars li > a:hover .atlas-pillar-name { color: var(--atlas-accent); }
.atlas-pillar-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--atlas-dim); }
.atlas-pillar-name { font-weight: 600; font-size: .88rem; }
.atlas-pillar-value { font-size: .85rem; color: var(--atlas-muted); text-align: right; font-variant-numeric: tabular-nums; }
.atlas-pillars .is-ok .atlas-pillar-dot { background: var(--atlas-ok); }
.atlas-pillars .is-warn .atlas-pillar-dot { background: var(--atlas-warn); }
.atlas-pillars .is-bad .atlas-pillar-dot { background: var(--atlas-bad); }
.atlas-pillars .is-bad .atlas-pillar-value { color: var(--atlas-bad); font-weight: 600; }
.atlas-pillars .is-warn .atlas-pillar-value { color: var(--atlas-warn); }
.atlas-pillars .is-off .atlas-pillar-dot { background: transparent; border: 1.5px solid var(--atlas-dim); }
.atlas-pillars .is-off .atlas-pillar-value { color: var(--atlas-dim); }
.atlas-pillar-links { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 0 10px 20px; font-size: .8rem; }
/* One-line cells in narrow widgets: the full text is in the link's title. */
.atlas-widget td.atlas-truncate { max-width: 0; width: 100%; }
.atlas-widget td.atlas-truncate > a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atlas-trend-legend li { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--atlas-muted); }
.atlas-trend-legend strong { color: var(--atlas-text); }
/* Clients in a narrow card (phone, or a narrow column on a wide screen): name and status,
   then the numbers in one labelled line. */
@container (max-width: 620px) {
    .atlas-clients thead { display: none; }
    .atlas-clients, .atlas-clients tbody { display: block; }
    .atlas-clients tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; padding: 10px 12px; }
    .atlas-clients tbody td { display: inline-block; padding: 0 !important; width: auto !important; font-size: .82rem; }
    .atlas-clients tbody td:first-child { flex: 1 1 60%; font-size: .9rem; box-shadow: none !important; }
    .atlas-clients tbody td:last-child { order: -1; margin-left: auto; }
    .atlas-clients tbody td:first-child { order: -2; }
    .atlas-clients td[data-label]::before { content: attr(data-label) " "; color: var(--atlas-dim); }
    .atlas-clients td.atlas-clients-alerts:has(.atlas-dim:only-child) { display: none; }
    .atlas-clients tr.atlas-org-bad { box-shadow: inset 3px 0 0 var(--atlas-bad); }
    .atlas-clients tr.atlas-org-warn { box-shadow: inset 3px 0 0 var(--atlas-warn); }
    .atlas-clients tr.atlas-org-ok { box-shadow: inset 3px 0 0 var(--atlas-ok); }
}
/* Where a value comes from, the same everywhere: assigned here (blue, solid), inherited (outline),
   overridden here (amber, solid), overridden above (amber, outline). */
.atlas-src { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; line-height: 1.5; padding: 0 8px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; vertical-align: middle; }
.atlas-src-assigned { background: var(--atlas-accent-soft); color: var(--atlas-accent); border-color: var(--atlas-accent-line); }
.atlas-src-inherited { color: var(--atlas-muted); border: 1px dashed var(--atlas-border-strong); }
.atlas-src-inherited::before { content: "\21B3"; }
.atlas-src-override { background: rgba(243, 197, 107, .14); color: var(--atlas-warn); border-color: rgba(243, 197, 107, .45); }
.atlas-src-override-above { color: var(--atlas-warn); border-color: rgba(243, 197, 107, .45); }
.atlas-setting.is-override:not(.is-dirty) { box-shadow: inset 3px 0 0 var(--atlas-warn); }
/* Offline (reported before, silent now) is its own colour, apart from never reported (grey). */
.atlas-health-seg-offline { background: #8b6cf0; }
/* Rows hidden by a filter tab (Clients "show all", Alert rules filters). */
tr.atlas-collapsed { display: none; }

/* Alert rules: one quiet "⋯" per row, the channels note, the advanced section, the drawer. */
.atlas-icon-btn { --bs-btn-padding-x: .55rem; --bs-btn-padding-y: .1rem; font-size: 1.1rem; line-height: 1; color: var(--atlas-muted); border: 1px solid transparent; background: transparent; }
.atlas-icon-btn:hover, .atlas-icon-btn[aria-expanded="true"] { color: var(--atlas-text); background: var(--atlas-hover); border-color: var(--atlas-border-strong); }
.atlas-rules td { padding-top: .6rem; padding-bottom: .6rem; }
.atlas-rules td:first-child { min-width: 16rem; }
.atlas-inline-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; }
.atlas-advanced > summary { cursor: pointer; color: var(--atlas-muted); font-size: .85rem; }
.atlas-advanced > summary:hover { color: var(--atlas-text); }
.atlas-advanced[open] { padding: 12px 16px; border: 1px solid var(--atlas-border); border-radius: var(--atlas-radius-lg); background: var(--atlas-surface); }
.atlas-drawer { --bs-offcanvas-width: min(460px, 100vw); --bs-offcanvas-bg: var(--atlas-raised); --bs-offcanvas-border-color: var(--atlas-border-strong); }

/* Device policy: a value opens in place to be changed; overrides carry the amber edge. */
.atlas-inline-edit > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.atlas-inline-edit > summary::-webkit-details-marker { display: none; }
.atlas-edit-hint { font-size: .75rem; font-weight: 600; color: var(--atlas-accent); opacity: .75; }
.atlas-inline-edit > summary:hover .atlas-edit-hint, .atlas-inline-edit > summary:focus-visible .atlas-edit-hint { opacity: 1; text-decoration: underline; }
.atlas-inline-edit[open] > summary .atlas-edit-hint { display: none; }
.atlas-inline-edit-body { margin-top: 10px; padding: 12px; border-radius: var(--atlas-radius); background: var(--atlas-surface-2); border: 1px solid var(--atlas-border); }
.device-policy-table tr.is-override > td:first-child { box-shadow: inset 3px 0 0 var(--atlas-warn); }
.device-policy-table tr.is-dirty > td:first-child { box-shadow: inset 3px 0 0 var(--atlas-warn); background: rgba(243, 197, 107, .04); }
.device-policy-label { font-weight: 600; min-width: 12rem; }
@media (max-width: 767.98px) {
    .device-policy-table thead { display: none; }
    .device-policy-table tbody tr { display: block; padding: 10px 12px; border-bottom: 1px solid var(--atlas-border); }
    .device-policy-table tbody td { display: block; border: 0; padding: 2px 0; min-width: 0; }
}

/* A dropdown that saves on change says so while it saves. */
.atlas-saving { font-size: .75rem; color: var(--atlas-muted); margin-left: 8px; white-space: nowrap; }
.device-policy-table { table-layout: fixed; }
.device-policy-table td { overflow-wrap: anywhere; }
.device-policy-section > th { background: transparent !important; color: var(--atlas-muted) !important; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; padding-top: 14px !important; border-bottom: 1px solid var(--atlas-border) !important; }
@media (max-width: 767.98px) { .device-policy-table { table-layout: auto; } .device-policy-table colgroup { display: none; } .device-policy-section { display: block; } }
/* Phones: toolbars stack (search full width); alert rules become cards (name + menu, then the details). */
@media (max-width: 767.98px) {
    .atlas-toolbar .atlas-search { flex: 1 1 100%; max-width: none; margin-left: 0 !important; }
    .atlas-rules thead { display: none; }
    .atlas-rules tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 12px; border-bottom: 1px solid var(--atlas-border); }
    .atlas-rules tbody tr.atlas-collapsed, .atlas-rules tbody tr[hidden] { display: none; }
    .atlas-rules tbody td { display: block; border: 0; padding: 0 !important; min-width: 0 !important; }
    .atlas-rules tbody td:first-child { flex: 1 1 70%; order: -2; }
    .atlas-rules tbody td:last-child { order: -1; margin-left: auto; }
    .atlas-rules tbody td:nth-child(3) .atlas-dim { display: inline; }
    .atlas-rules tbody td:nth-child(3) .atlas-dim::before { content: " · "; }
    .atlas-rules .atlas-empty-row td { flex: 1 1 100%; }
}
@media (max-width: 767.98px) { .atlas-rules tbody tr[data-kind="policy"] td:last-child { order: 9; flex-basis: 100%; margin-left: 0; text-align: left !important; } }
/* Very wide screens: wide cards (except Fleet) span three columns and smaller cards fill the gaps
   beside them, so no row is left half empty. While customizing, the order stays exactly as placed. */
@media (min-width: 1900px) {
    .atlas-widgets:not(.atlas-widgets-editing) { grid-auto-flow: row dense; }
    .atlas-widgets > .atlas-widget-wide:not([data-slot="fleet"]) { grid-column: span 3; }
}