:root {
    --ink: #172033;
    --muted: #6c778a;
    --line: #d9e1ec;
    --surface: #ffffff;
    --soft: #f5f7fa;
    --accent: #0f766e;
    --accent-blue: #2563eb;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    color: var(--ink);
    background: #eef3f8;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { text-decoration: none; }
.app-shell { min-height: 100vh; }
.sidebar {
    width: 250px;
    flex: 0 0 250px;
    position: fixed;
    inset: 0 auto 0 0;
    height: 100vh;
    overflow-y: auto;
    background: #101827;
    color: #fff;
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.brand {
    display: grid;
    gap: 12px;
    align-items: center;
    text-align: center;
}
.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #14b8a6;
    display: grid;
    place-items: center;
    font-weight: 800;
}
.brand-logo,
.auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    width: fit-content;
    justify-self: center;
    border: 1px solid transparent;
    border-radius: 12px;
    background:
        linear-gradient(#101827, #101827) padding-box,
        linear-gradient(135deg, #38bdf8, #14b8a6, #f59e0b) border-box;
    padding: 10px;
    box-shadow: 0 12px 26px rgba(0,0,0,.22);
}
.brand-logo img,
.auth-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 190px;
    max-height: 86px;
    object-fit: contain;
}
.auth-logo {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 18px;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #38bdf8, #14b8a6, #f59e0b) border-box;
    box-shadow: 0 12px 28px rgba(15, 118, 110, .13);
}
.auth-logo img {
    max-width: 260px;
    max-height: 110px;
}
.brand small, .user-chip small { display: block; color: #9aa6b8; font-size: 12px; }
.side-nav { display: grid; gap: 4px; }
.side-nav a, .logout, .nav-group summary {
    color: #cfd8e5;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}
.side-nav a:hover, .logout:hover, .nav-group summary:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-group {
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
}
.nav-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after {
    content: "+";
    color: #9aa6b8;
    font-weight: 800;
}
.nav-group[open] summary::after { content: "-"; }
.nav-group a {
    display: block;
    margin: 0 8px 6px 16px;
    padding: 8px 10px;
    color: #aeb9ca;
}
.logout { margin-top: auto; }
.content {
    min-height: 100vh;
    margin-left: 250px;
    padding: 24px;
}
.topbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
}
/* Keeps the menu button on the same line as the page title instead of pushing
   the heading down a row on small screens. */
.topbar-lead {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}
.topbar-lead .topbar-title { min-width: 0; }

/* Hidden on desktop, where the sidebar is always visible. */
.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    margin-right: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
    color: var(--ink);
}
.sidebar-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sidebar-toggle-bars { display: grid; gap: 4px; width: 18px; }
.sidebar-toggle-bars span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
}
/* Bars morph into a cross so the control reads as "close" while the drawer is open. */
.app-shell.nav-open .sidebar-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.app-shell.nav-open .sidebar-toggle-bars span:nth-child(2) { opacity: 0; }
.app-shell.nav-open .sidebar-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.sidebar-scrim { display: none; }
@media (max-width: 980px) { .sidebar-scrim:not([hidden]) { display: block; } }

.topbar h1 { font-size: 26px; line-height: 1.15; margin: 0; font-weight: 750; }
.topbar p { margin: 5px 0 0; color: var(--muted); }
.nps-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(15, 23, 42, .52);
    backdrop-filter: blur(10px);
}
.nps-modal {
    width: min(620px, 100%);
    border: 1px solid rgba(20, 184, 166, .28);
    border-radius: 18px;
    background:
        radial-gradient(circle at 18% 0%, rgba(20, 184, 166, .14), transparent 30%),
        #fff;
    box-shadow: 0 26px 90px rgba(15, 23, 42, .32);
    padding: clamp(20px, 4vw, 34px);
}
.nps-kicker {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.nps-modal h2 {
    margin: 0 0 18px;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.08;
    font-weight: 850;
}
.nps-score-grid {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 6px;
}
.nps-score-grid label {
    min-width: 0;
}
.nps-score-grid input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.nps-score-grid span {
    display: grid;
    place-items: center;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fafc;
    color: #1f2a44;
    font-weight: 800;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
.nps-score-grid span:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, .52);
}
.nps-score-grid input:checked + span {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #2563eb, #14b8a6);
    box-shadow: 0 12px 28px rgba(20, 184, 166, .22);
}
.nps-scale-labels,
.nps-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.nps-scale-labels {
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.nps-actions {
    align-items: center;
    margin-top: 18px;
}
.panel-subtitle {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}
.status-pill.ok {
    color: #047857;
    background: #d1fae5;
}
.status-pill.warning {
    color: #92400e;
    background: #fef3c7;
}
.compact-table {
    margin: 0;
    font-size: 13px;
}
.compact-table th {
    width: 170px;
    color: var(--muted);
    font-weight: 800;
}
.compact-table td,
.compact-table th {
    padding: 8px 0;
    border-color: var(--line);
}
.user-chip {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 14px 10px 10px;
    min-width: 220px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}
.user-chip-avatar {
    width: 44px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #2563eb, #14b8a6, #f59e0b) border-box;
    border: 2px solid transparent;
}
.user-chip-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.user-chip-avatar span {
    color: #0f766e;
    font-size: 13px;
    font-weight: 800;
}
.user-chip-text {
    min-width: 0;
}
.user-chip-text span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 750;
}
.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.metric {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
}
.metric span { color: var(--muted); font-size: 13px; }
.metric strong { display: block; font-size: 28px; margin-top: 6px; }
.mttr-metric {
    grid-column: 1 / -1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(150px, .7fr) minmax(220px, 1.3fr) minmax(210px, 1fr);
    align-items: center;
    gap: 8px 24px;
}
.mttr-metric > span {
    align-self: end;
}
.mttr-metric > strong {
    align-self: start;
}
.mttr-metric .metric-empty {
    font-size: 20px;
}
.mttr-metric .metric-definition,
.mttr-metric .metric-comparison {
    display: block;
    margin-top: 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.mttr-metric .metric-definition {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--muted);
    font-size: 12px;
}
.mttr-metric .metric-comparison {
    grid-column: 3;
    grid-row: 1 / span 2;
    font-size: 12px;
    font-weight: 800;
}
.mttr-metric .metric-comparison.is-improved { color: #047857; }
.mttr-metric .metric-comparison.is-worsened { color: #b45309; }
.mttr-metric .metric-comparison.is-neutral { color: var(--muted); }
.usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.usage-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #f8fafc);
    padding: 14px;
    display: grid;
    gap: 10px;
}
.usage-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}
.usage-card-head span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}
.usage-meter {
    height: 10px;
    border-radius: 999px;
    background: #e8edf4;
    overflow: hidden;
}
.usage-meter span {
    display: block;
    height: 100%;
    max-width: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #0f766e);
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}
.pricing-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 16px;
    display: grid;
    gap: 12px;
    align-content: start;
}
.pricing-card.current {
    border-color: #0f766e;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .14), 0 14px 28px rgba(15, 118, 110, .08);
}
.pricing-card.pending {
    border-color: #0891b2;
    box-shadow: inset 0 0 0 1px rgba(8, 145, 178, .14), 0 14px 28px rgba(8, 145, 178, .08);
}
.plan-request-form {
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}
.subscription-request-note {
    display: grid;
    gap: 4px;
    margin-top: 8px;
    min-width: 150px;
}
.subscription-request-note small {
    color: var(--muted);
    line-height: 1.35;
}
.pricing-card-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}
.pricing-card h3 {
    margin: 0;
    font-size: 18px;
}
.pricing-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}
.price {
    font-size: 28px;
    line-height: 1;
}
.price small,
.annual-price {
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
}
.pricing-card ul {
    margin: 0;
    padding-left: 18px;
    color: #2d3748;
    display: grid;
    gap: 6px;
    font-size: 13px;
}
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 18px;
}
.danger-panel {
    border-color: #fecaca;
    background: #fff7f7;
}
.panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.panel-title h2 { margin: 0; font-size: 18px; }
.panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}
.table { vertical-align: middle; }
.table th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.admin-edit-table .form-control-sm,
.admin-edit-table .form-select-sm {
    min-width: 130px;
}
.admin-edit-table td { min-width: 120px; }
.assignment-inline-form { min-width: 260px; }
.wide-admin-table { min-width: 1700px; }
.platform-subscription-table {
    min-width: 2300px;
}
.platform-subscription-table td {
    vertical-align: top;
}
.table-action-stack {
    display: grid;
    gap: 6px;
    min-width: 120px;
}
.compact-switch {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    margin: 0;
    white-space: nowrap;
}
.compact-switch .form-check-input { margin-top: 0; }
.compact-switch span {
    color: var(--muted);
    font-size: 13px;
}
.demo-seed-panel {
    border-color: #b8ddeb;
    background: linear-gradient(135deg, #f7fcff 0%, #ffffff 72%);
}
.demo-workspace-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid #8fd3e2;
    border-radius: 10px;
    background: #ecfeff;
    color: #155e75;
    font-size: 13px;
}
.demo-workspace-banner strong {
    color: #0e7490;
    font-weight: 850;
    white-space: nowrap;
}
.demo-workspace-banner span {
    color: #155e75;
}
.insight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}
.insight-grid.three {
    grid-template-columns: 1.1fr 1fr 1fr;
}
.chart-panel .panel-title { margin-bottom: 16px; }
.chart-empty {
    min-height: 178px;
    display: grid;
    place-items: center;
    color: var(--muted);
    background: var(--soft);
    border: 1px dashed var(--line);
    border-radius: 8px;
    text-align: center;
    padding: 16px;
}
.locked-feature-wrap {
    position: relative;
    min-height: 420px;
    display: grid;
    gap: 18px;
}
.locked-feature-preview {
    filter: blur(4px);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}
.locked-feature-bar {
    height: 14px;
    border-radius: 999px;
    background: var(--soft);
    border: 1px solid var(--line);
    margin-bottom: 10px;
}
.locked-feature-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, 90%);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.16);
    padding: 28px 26px;
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 10px;
}
.locked-feature-card svg { color: var(--accent); }
.locked-feature-card h2 { font-size: 18px; margin: 0; }
.locked-feature-card p { color: var(--muted); margin: 0 0 6px; font-size: 14px; }
.empty-state {
    min-height: 88px;
    display: grid;
    place-items: center;
    color: var(--muted);
    background: var(--soft);
    border: 1px dashed var(--line);
    border-radius: 8px;
    text-align: center;
    padding: 16px;
}
.empty-state.success {
    color: #0f766e;
    background: #ecfdf5;
    border-color: #99f6e4;
}
.donut-wrap {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}
.donut-chart {
    width: 178px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--donut);
    display: grid;
    place-items: center;
    position: relative;
}
.donut-chart::after {
    content: "";
    position: absolute;
    inset: 34px;
    background: var(--surface);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--line);
}
.donut-chart > div {
    position: relative;
    z-index: 1;
    text-align: center;
}
.donut-chart strong {
    display: block;
    font-size: 28px;
    line-height: 1;
}
.donut-chart span {
    color: var(--muted);
    font-size: 12px;
}
.chart-legend {
    display: grid;
    gap: 10px;
}
.chart-legend div {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: 8px;
    align-items: center;
    font-size: 13px;
}
.chart-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.chart-legend strong { font-size: 12px; color: var(--muted); }
.bar-list { display: grid; gap: 12px; }
.bar-row { display: grid; gap: 6px; }
.bar-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}
.bar-meta strong { color: var(--muted); }
.bar-track {
    height: 10px;
    background: #e8edf4;
    border-radius: 999px;
    overflow: hidden;
}
.bar-track div {
    height: 100%;
    border-radius: inherit;
}
.trend-chart {
    min-height: 210px;
    display: grid;
    grid-template-columns: repeat(var(--trend-count), minmax(22px, 1fr));
    gap: 8px;
    align-items: end;
    padding-top: 10px;
}
.trend-bar {
    height: 185px;
    display: grid;
    /* auto 1fr auto: the count sits in its own row at the top, so every number lines up
       at the same height instead of riding up and down with the bar it belongs to. */
    grid-template-rows: auto 1fr auto;
    gap: 8px;
    align-items: end;
    text-align: center;
}
.trend-value {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    min-height: 1em;
}
.trend-bar span {
    display: block;
    width: 100%;
    min-height: 8px;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, #2563eb, #0f766e);
}
.trend-bar small {
    color: var(--muted);
    font-size: 11px;
}
.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: linear-gradient(135deg, #0f172a, #134e4a);
}
.auth-card {
    width: min(420px, 100%);
    background: #fff;
    border-radius: 10px;
    padding: 28px;
    box-shadow: 0 22px 70px rgba(0,0,0,.22);
}
.auth-secondary-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 750;
}
.auth-secondary-actions a {
    color: #0f766e;
}
.auth-secondary-actions a:hover {
    color: #0f172a;
}
.auth-link-button {
    border: 0;
    background: transparent;
    padding: 0;
    color: #0f766e;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}
.auth-link-button:hover,
.auth-link-button:focus-visible {
    color: #0f172a;
}
.form-label { font-weight: 650; font-size: 14px; }
.badge { font-weight: 650; }
.requester-combobox {
    position: relative;
}
.requester-combobox .form-control {
    padding-right: 42px;
}
.requester-source-select {
    display: none;
}
.requester-clear {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 26px;
    height: 26px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: #e8edf4;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    display: grid;
    place-items: center;
}
.requester-clear:hover {
    background: #dce4ee;
    color: var(--ink);
}
.requester-suggestions {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: 270px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(23, 32, 51, .18);
    padding: 6px;
}
.requester-option {
    width: 100%;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    text-align: left;
}
.requester-option:hover,
.requester-option.is-active {
    background: #edf4ff;
}
.requester-option strong {
    font-size: 14px;
}
.requester-option small {
    color: var(--muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}
.requester-empty {
    color: var(--muted);
    padding: 12px;
    text-align: center;
}
.detail-grid {
    display: grid;
    grid-template-columns: 1.5fr .9fr;
    gap: 18px;
}
.comment {
    border-left: 3px solid var(--line);
    padding: 10px 12px;
    background: var(--soft);
    border-radius: 0 8px 8px 0;
    margin-bottom: 10px;
}
.comment.internal { border-left-color: #f59e0b; }
.filter-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.table-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    padding-top: 12px;
}
.table-pager span { margin-right: auto; }
.import-panel .form-check {
    margin-bottom: 8px;
}
.import-errors {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
}
.logo-settings-grid {
    display: grid;
    grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.logo-settings-grid.compact {
    grid-template-columns: minmax(180px, 300px) minmax(0, 1fr);
}
.logo-preview-box {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    min-width: 220px;
    min-height: 120px;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: var(--soft);
    padding: 18px;
}
.logo-preview-box img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(320px, 100%);
    max-height: 180px;
    object-fit: contain;
}
.logo-placeholder {
    color: var(--muted);
    font-size: 14px;
}
.wallboard {
    display: grid;
    gap: 18px;
}
.wallboard-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--muted);
}
.wallboard-topline strong {
    display: block;
    color: var(--ink);
    font-size: 22px;
}
.wallboard-topline span {
    display: block;
    font-size: 13px;
}
.wallboard-metrics {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
}
.wall-metric {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 14px;
}
.wall-metric span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}
.wall-metric strong {
    display: block;
    font-size: clamp(28px, 3vw, 46px);
    line-height: 1;
    margin-top: 8px;
}
.wall-metric.alert-metric strong { color: #dc2626; }
.wall-metric.warn-metric strong { color: #b45309; }
.wallboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.wallboard-grid .panel {
    margin-bottom: 0;
}
.wall-feed-list {
    display: grid;
    gap: 10px;
}
.wall-feed-list div {
    border-bottom: 1px solid var(--line);
    padding-bottom: 9px;
}
.wall-feed-list div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.wall-feed-list strong,
.wall-feed-list span,
.wall-feed-list small {
    display: block;
}
.wall-feed-list span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wall-feed-list small {
    color: var(--muted);
}
.settings-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 18px;
}
.profile-settings-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}
.profile-settings-card h3 {
    margin: 0 0 4px;
    font-size: 20px;
}
.profile-settings-card p {
    margin: 0 0 14px;
    color: var(--muted);
}
.team-avatar {
    width: 74px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #2563eb, #14b8a6, #f59e0b) border-box;
    border: 3px solid transparent;
    box-shadow: 0 8px 22px rgba(23, 32, 51, .14);
}
.team-avatar.xl { width: 104px; }
.team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.team-avatar span {
    font-weight: 800;
    color: #0f766e;
    font-size: 22px;
}
.team-avatar.xl span { font-size: 30px; }
.org-tree {
    display: grid;
    gap: 0;
    justify-items: center;
}
.org-tier {
    width: 100%;
    display: grid;
    gap: 14px;
    justify-items: center;
}
.org-tier-title {
    display: grid;
    gap: 2px;
    text-align: center;
}
.org-tier-title h2 {
    margin: 0;
    font-size: 20px;
}
.org-tier-title span {
    color: var(--muted);
    font-weight: 650;
}
.org-line {
    position: relative;
    width: min(960px, 88%);
    height: 64px;
}
.org-line::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 32px;
    transform: translateX(-50%);
    background: var(--line);
}
.org-line::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 32px;
    width: 2px;
    height: 32px;
    transform: translateX(-50%);
    background: var(--line);
}
.org-line span {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 32px;
    height: 2px;
    background: var(--line);
}
.org-line span::before,
.org-line span::after {
    content: "";
    position: absolute;
    top: 0;
    width: 2px;
    height: 20px;
    background: var(--line);
}
.org-line span::before { left: 0; }
.org-line span::after { right: 0; }
.org-member-grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.lead-tier .org-member-grid { max-width: 760px; }
.engineer-tier .org-member-grid { align-items: stretch; }
.org-location-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
}
.org-location-group {
    background: rgba(255,255,255,.55);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    display: grid;
    gap: 12px;
}
.org-location-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}
.org-location-title h3 {
    margin: 0;
    font-size: 17px;
}
.org-location-title span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.org-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    width: min(360px, 100%);
    min-width: 0;
    box-shadow: 0 8px 24px rgba(23, 32, 51, .06);
}
.org-card h3 {
    margin: 0;
    font-size: 17px;
}
.org-card p {
    margin: 2px 0 8px;
    color: var(--accent);
    font-weight: 700;
}
.org-meta {
    color: var(--muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}
.coverage-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.coverage-list span {
    background: #edf7f6;
    border: 1px solid #c9e8e4;
    color: #115e59;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
}
.wallboard-only {
    --ink: #e9f1fb;
    --muted: #8f9db3;
    --line: #263247;
    --surface: #0d1422;
    --soft: #111a2a;
    height: 100vh;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #000;
    color: var(--ink);
}
.tv-frame {
    width: min(100vw, calc(100vh * 16 / 9));
    aspect-ratio: 16 / 9;
    max-height: 100vh;
    overflow: hidden;
    padding: clamp(10px, 1vw, 18px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(6px, .7vw, 10px);
    background: #02050b;
    color: var(--ink);
    position: relative;
}
/* Compact chrome: title/live-dot/clock/settings/logout all live in one slim row so the
   rest of the screen (the metrics + charts the team actually watches) gets the space. */
.tv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 0;
    padding-bottom: clamp(6px, .6vw, 10px);
    border-bottom: 1px solid var(--line);
    position: relative;
}
.tv-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, #38bdf8, #14b8a6, #f59e0b, transparent 70%);
    opacity: .55;
}
.tv-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.tv-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border: 1px solid transparent;
    border-radius: 8px;
    background:
        linear-gradient(#050914, #050914) padding-box,
        linear-gradient(135deg, #38bdf8, #14b8a6, #f59e0b) border-box;
    padding: 3px;
    box-shadow: 0 0 16px rgba(56, 189, 248, .12);
}
.tv-logo img {
    display: block;
    max-width: 100px;
    max-height: 26px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.tv-title {
    font-size: clamp(13px, 1.1vw, 17px);
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
}
.tv-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4ade80;
    font-size: clamp(9px, .68vw, 11px);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 8px 2px 6px;
    border: 1px solid rgba(74, 222, 128, .3);
    border-radius: 999px;
    background: rgba(74, 222, 128, .08);
}
.tv-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
    animation: tv-live-pulse 2s ease-in-out infinite;
}
.tv-live.is-down {
    color: #f87171;
    border-color: rgba(248, 113, 113, .35);
    background: rgba(248, 113, 113, .08);
}
.tv-live.is-down .tv-live-dot {
    background: #f87171;
    animation: none;
    box-shadow: none;
}
@keyframes tv-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
    70% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.tv-locked {
    display: grid;
    place-items: center;
}
.tv-locked-card {
    width: min(520px, 90%);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 40px 34px;
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 12px;
}
.tv-locked-card svg { color: #38bdf8; }
.tv-locked-card h1 { font-size: 22px; margin: 0; }
.tv-locked-card p { color: var(--muted); margin: 0 0 6px; font-size: 14px; line-height: 1.5; }
.wallboard-only .chart-panel,
.wallboard-only .panel {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 16px 36px rgba(0,0,0,.24);
}
.wallboard-only .chart-empty {
    background: #0a111e;
    border-color: var(--line);
    color: var(--muted);
}
.wallboard-only .donut-chart::after {
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
}
.wallboard-only .donut-chart span,
.wallboard-only .chart-legend strong,
.wallboard-only .bar-meta strong,
.wallboard-only .trend-bar small {
    color: var(--muted);
}
.wallboard-only .bar-track {
    background: #172235;
}
.wallboard-only .trend-bar span {
    background: linear-gradient(180deg, #60a5fa, #14b8a6);
    box-shadow: 0 0 12px rgba(20, 184, 166, .2);
}
.tv-clock {
    font-variant-numeric: tabular-nums;
    font-size: clamp(16px, 1.5vw, 24px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: .02em;
    color: #dbeafe;
}
.tv-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}
.tv-display-controls {
    position: relative;
    z-index: 20;
}
.tv-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: #0c1422;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.tv-icon-btn .tv-icon {
    width: 16px;
    height: 16px;
}
.tv-icon-btn:hover,
.tv-icon-btn:focus-visible,
.tv-icon-btn[aria-expanded="true"] {
    border-color: #14b8a6;
    background: #102536;
    color: #fff;
}
#tv-sound-toggle[aria-pressed="false"] {
    color: #f87171;
    border-color: rgba(248, 113, 113, .35);
}
/* Browsers block audio until a real click/keypress happens on the page - there is no
   legitimate way around that. Sound starts muted by default (see assets/js/wallboard.js)
   and this pulsing ring is the discoverability cue that gets someone to click it once,
   which both unmutes AND satisfies the browser's gesture requirement in the same action. */
#tv-sound-toggle.needs-attention {
    animation: tv-sound-attention 1.6s ease-in-out infinite;
}
@keyframes tv-sound-attention {
    0%, 100% { box-shadow: 0 0 0 0 rgba(103, 232, 249, .55); }
    50% { box-shadow: 0 0 0 8px rgba(103, 232, 249, 0); }
}
.tv-mode-button {
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: #0c1422;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.tv-mode-button:hover,
.tv-mode-button.is-active {
    border-color: #14b8a6;
    background: #102536;
    color: #fff;
}
.tv-control-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(310px, 72vw);
    padding: 12px;
    background: #0b1422;
    border: 1px solid #334155;
    border-radius: 10px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .5);
}
.tv-control-panel.is-open { display: block; }
.tv-control-panel-title {
    color: #fff;
    font-size: clamp(11px, .8vw, 14px);
    font-weight: 800;
    margin-bottom: 9px;
}
.tv-mode-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}
.tv-mode-button {
    width: 100%;
    padding: 8px 10px;
    text-align: left;
    font-size: clamp(11px, .75vw, 14px);
}
.tv-mode-button::after {
    content: 'Enter';
    float: right;
    color: var(--muted);
    font-size: .82em;
    font-weight: 600;
}
.tv-mode-button.is-active::after {
    content: 'Selected';
    color: #67e8f9;
}
.tv-mode-button:disabled { cursor: not-allowed; opacity: .42; }
.tv-controls-hint {
    margin: 10px 2px 0;
    color: var(--muted);
    font-size: clamp(9px, .65vw, 11px);
}
.tv-icon-btn:focus-visible,
.tv-mode-button:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 3px;
}
.tv-metrics {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: clamp(6px, .65vw, 12px);
}
.tv-metrics div {
    background: linear-gradient(180deg, #0f1726, #0b111d);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: clamp(8px, .8vw, 14px);
    min-width: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.tv-metrics span {
    display: block;
    color: var(--muted);
    font-size: clamp(9px, .75vw, 13px);
    white-space: nowrap;
}
.tv-metrics strong {
    display: block;
    font-size: clamp(26px, 3vw, 48px);
    line-height: .95;
    margin-top: 6px;
}
.tv-metrics .danger {
    border-color: rgba(248, 113, 113, .42);
    background: linear-gradient(180deg, rgba(127, 29, 29, .44), #0b111d);
}
.tv-metrics .warning {
    border-color: rgba(251, 191, 36, .38);
    background: linear-gradient(180deg, rgba(113, 63, 18, .38), #0b111d);
}
.tv-metrics .danger strong { color: #f87171; }
.tv-metrics .warning strong { color: #fbbf24; }
.tv-metrics [data-metric] {
    transition: box-shadow .3s ease, border-color .3s ease;
}
.tv-metrics [data-metric].is-updated {
    animation: tv-metric-flash 1.1s ease;
}
@keyframes tv-metric-flash {
    0% { box-shadow: 0 0 0 0 rgba(103, 232, 249, 0); border-color: var(--line); }
    18% { box-shadow: 0 0 0 3px rgba(103, 232, 249, .35); border-color: #67e8f9; }
    100% { box-shadow: 0 0 0 0 rgba(103, 232, 249, 0); border-color: var(--line); }
}

/* ---------- Live alert popups (SLA breach / near-breach) ---------- */
/* Dead-center, large, and glowing on purpose - this needs to be impossible to miss from
   across a room, which a small corner toast never achieves. The dim backdrop is a second
   attention cue that doesn't rely on the glow/sound alone. */
.tv-alert-backdrop {
    position: fixed;
    inset: 0;
    z-index: 44;
    background: rgba(2, 5, 14, .6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.tv-alert-backdrop.is-visible {
    opacity: 1;
}
.tv-alert-stack {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    pointer-events: none;
}
.tv-alert {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    width: min(680px, 92vw);
    padding: 28px 32px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
}
.tv-alert-breach {
    background: linear-gradient(135deg, rgba(127, 29, 29, .95), rgba(15, 20, 34, .97));
    border: 2px solid rgba(248, 113, 113, .7);
    animation: tv-alert-in .4s cubic-bezier(.2, .8, .2, 1) both,
        tv-alert-glow-breach 1.8s ease-in-out infinite;
}
.tv-alert-warning {
    background: linear-gradient(135deg, rgba(113, 63, 18, .95), rgba(15, 20, 34, .97));
    border: 2px solid rgba(251, 191, 36, .65);
    animation: tv-alert-in .4s cubic-bezier(.2, .8, .2, 1) both,
        tv-alert-glow-warning 1.8s ease-in-out infinite;
}
.tv-alert-icon {
    flex: none;
    width: 48px;
    height: 48px;
}
.tv-alert-breach .tv-alert-icon { color: #f87171; }
.tv-alert-warning .tv-alert-icon { color: #fbbf24; }
.tv-alert-icon svg { width: 100%; height: 100%; }
.tv-alert-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tv-alert-body strong {
    font-size: clamp(20px, 2.4vw, 30px);
    font-weight: 800;
    color: #fff;
}
.tv-alert-body span {
    font-size: clamp(13px, 1.1vw, 17px);
    color: #dbeafe;
    opacity: .9;
}
.tv-alert-close {
    flex: none;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border-radius: 8px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.tv-alert-close:hover { background: rgba(255, 255, 255, .2); }
@keyframes tv-alert-in {
    from { opacity: 0; transform: scale(.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes tv-alert-glow-breach {
    0%, 100% { box-shadow: 0 0 24px 0 rgba(248, 113, 113, .35), 0 24px 60px rgba(0, 0, 0, .55); }
    50% { box-shadow: 0 0 52px 10px rgba(248, 113, 113, .55), 0 24px 60px rgba(0, 0, 0, .55); }
}
@keyframes tv-alert-glow-warning {
    0%, 100% { box-shadow: 0 0 24px 0 rgba(251, 191, 36, .3), 0 24px 60px rgba(0, 0, 0, .55); }
    50% { box-shadow: 0 0 52px 10px rgba(251, 191, 36, .5), 0 24px 60px rgba(0, 0, 0, .55); }
}
.tv-screen {
    display: none;
    min-height: 0;
    opacity: 0;
    transform: translateY(8px);
}
.tv-screen.is-active {
    display: grid;
    opacity: 1;
    transform: none;
    animation: tv-screen-in .45s ease both;
}
.tv-screen.is-leaving {
    display: grid;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .35s ease, transform .35s ease;
}
@keyframes tv-screen-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.tv-screen-tickets {
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(8px, .9vw, 14px);
}
.tv-screen-network {
    align-content: start;
    gap: clamp(10px, 1vw, 16px);
    overflow: hidden;
}
.tv-network-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
}
.tv-network-kicker {
    display: block;
    color: #67e8f9;
    font-size: clamp(9px, .7vw, 12px);
    font-weight: 800;
    letter-spacing: .09em;
}
.tv-network-hero h2 {
    margin: 4px 0 0;
    color: #fff;
    font-size: clamp(24px, 2.7vw, 48px);
    line-height: 1;
}
.tv-network-hero p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: clamp(10px, .8vw, 14px);
}
.tv-network-signal {
    flex: 0 0 auto;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #0b1422;
    text-align: right;
}
.tv-network-signal span,
.tv-network-signal strong { display: block; }
.tv-network-signal span {
    color: var(--muted);
    font-size: clamp(9px, .65vw, 11px);
}
.tv-network-signal strong {
    margin-top: 4px;
    color: #dbeafe;
    font-size: clamp(11px, .8vw, 14px);
}
.tv-network-overview {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(7px, .75vw, 12px);
}
.tv-network-overview-card {
    min-width: 0;
    padding: clamp(9px, .85vw, 15px);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #101a2a, #0b111d);
}
.tv-network-overview-card span {
    display: block;
    color: var(--muted);
    font-size: clamp(9px, .7vw, 12px);
    white-space: nowrap;
}
.tv-network-overview-card strong {
    display: block;
    margin-top: 5px;
    color: #e2e8f0;
    font-size: clamp(24px, 2.6vw, 44px);
    line-height: .95;
}
.tv-network-overview-card.is-up { border-color: rgba(45, 212, 191, .45); }
.tv-network-overview-card.is-up strong { color: #2dd4bf; }
.tv-network-overview-card.is-degraded { border-color: rgba(251, 191, 36, .45); }
.tv-network-overview-card.is-degraded strong { color: #fbbf24; }
.tv-network-overview-card.is-down { border-color: rgba(248, 113, 113, .5); }
.tv-network-overview-card.is-down strong { color: #f87171; }
.tv-network-overview-card.is-unknown strong { color: #94a3b8; }
.tv-network-overview-card.is-maintenance strong { color: #a78bfa; }
.tv-network-overview-card.is-total { border-color: #3b82f6; }
.tv-network-overview-card.is-total strong { color: #93c5fd; }
.tv-network-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(230px, .7fr);
    gap: clamp(8px, .85vw, 14px);
    min-height: 0;
}
.tv-network-devices-panel,
.tv-network-source-panel {
    min-width: 0;
    min-height: 0;
    padding: clamp(10px, .95vw, 16px);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #0d1422;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 16px 36px rgba(0,0,0,.24);
}
.tv-network-panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    margin-bottom: 10px;
}
.tv-network-panel-heading h3,
.tv-network-source-panel h3 {
    margin: 3px 0 0;
    color: #fff;
    font-size: clamp(15px, 1.2vw, 22px);
}
.tv-network-panel-heading > span {
    color: var(--muted);
    font-size: clamp(9px, .7vw, 12px);
}
/* Card count is decided by the screen, not by the data.
   This grid used to render every device and let overflow:hidden clip the remainder, so a
   device could be on the wallboard and invisible with nothing saying so - the worst
   possible failure for the one screen whose job is to show you what is broken.
   Cards now come worst-first from the query, the breakpoints below cap how many are
   shown, and .tv-network-more reports the healthy tail that was dropped. Nothing is
   clipped: what is not shown is deliberately hidden and accounted for. */
/* The panel is a column so the grid can take whatever height is left after the heading,
   rather than the cards deciding the height and overflowing the box they sit in. */
.tv-network-devices-panel {
    display: flex;
    flex-direction: column;
}
.tv-network-device-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Rows share the space instead of each taking a fixed 218px. Two rows of fixed-height
       cards overflowed a 465px panel by 45px on a 745px-tall screen, and since a wallboard
       must not scroll, that content was simply gone. */
    grid-auto-rows: minmax(0, 1fr);
    gap: clamp(7px, .7vw, 11px);
    flex: 1;
    min-height: 0;
}
/* Small panel or a modest screen: six, two columns. */
.tv-network-device-card:nth-child(n + 7) { display: none; }
/* Roomier displays take a third column and eight cards. */
@media (min-width: 1280px) {
    .tv-network-device-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tv-network-device-card:nth-child(n + 7) { display: block; }
    .tv-network-device-card:nth-child(n + 9) { display: none; }
}
/* A large TV: ten cards. Kept at three columns rather than four - at TV viewing distance
   a wider card with bigger type reads better than more of them. */
@media (min-width: 1700px) {
    .tv-network-device-card:nth-child(n + 9) { display: block; }
    .tv-network-device-card:nth-child(n + 11) { display: none; }
}
/* Short screens cannot take the rows regardless of width, so height gets its own say. */
@media (max-height: 800px) {
    .tv-network-device-card:nth-child(n + 7) { display: none; }
}
.tv-network-more {
    margin: clamp(6px, .6vw, 10px) 0 0;
    color: var(--muted);
    font-size: clamp(11px, .78vw, 14px);
    letter-spacing: .01em;
}
.tv-network-more strong { color: #cfe0f5; font-weight: 700; }
.tv-network-device-card {
    /* A column so the trace can absorb the leftover height; min-height:0 so a grid item
       is actually allowed to shrink below its content. */
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    min-width: 0;
    padding: clamp(9px, .8vw, 13px);
    border: 1px solid var(--line);
    border-left: 3px solid #64748b;
    border-radius: 7px;
    background: #101a2a;
}
.tv-network-device-card.is-up { border-left-color: #2dd4bf; }
.tv-network-device-card.is-degraded { border-left-color: #fbbf24; }
.tv-network-device-card.is-down { border-left-color: #f87171; }
.tv-network-device-card.is-maintenance { border-left-color: #a78bfa; }
.tv-network-device-card h4,
.tv-network-device-card p,
.tv-network-device-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tv-network-device-card h4 {
    margin: 7px 0 0;
    color: #f8fafc;
    font-size: clamp(11px, .8vw, 14px);
}
.tv-network-device-card p,
.tv-network-device-card small {
    display: block;
    margin: 4px 0 0;
    color: var(--muted);
    font-size: clamp(8px, .62vw, 11px);
}
.tv-network-device-status {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #94a3b8;
    font-size: clamp(8px, .62vw, 11px);
    font-weight: 800;
    text-transform: uppercase;
}
.tv-network-device-card.is-up .tv-network-device-status { color: #2dd4bf; }
.tv-network-device-card.is-degraded .tv-network-device-status { color: #fbbf24; }
.tv-network-device-card.is-down .tv-network-device-status { color: #f87171; }
.tv-network-device-card.is-maintenance .tv-network-device-status { color: #a78bfa; }
.tv-network-status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}
.tv-network-source-panel { display: flex; flex-direction: column; }
.tv-network-source-panel > p {
    margin: 8px 0 15px;
    color: var(--muted);
    font-size: clamp(10px, .75vw, 13px);
    line-height: 1.4;
}
.tv-network-source-stat {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid var(--line);
}
.tv-network-source-stat span { color: var(--muted); font-size: clamp(9px, .7vw, 12px); }
.tv-network-source-stat strong { color: #e2e8f0; font-size: clamp(15px, 1.3vw, 23px); }
.tv-network-source-panel > small {
    margin-top: auto;
    padding-top: 14px;
    color: #64748b;
    font-size: clamp(8px, .62vw, 11px);
    line-height: 1.35;
}
.tv-network-empty {
    grid-column: 1 / -1;
    display: grid;
    place-content: center;
    min-height: 130px;
    border: 1px dashed #334155;
    border-radius: 7px;
    text-align: center;
}
.tv-network-empty strong { color: #cbd5e1; font-size: clamp(11px, .8vw, 14px); }
.tv-network-empty span { color: var(--muted); font-size: clamp(9px, .65vw, 11px); margin-top: 5px; }
.tv-network-strip {
    display: grid;
    grid-template-columns: minmax(160px, .8fr) minmax(280px, 1.2fr) minmax(360px, 2fr);
    gap: clamp(8px, .8vw, 14px);
    align-items: center;
    padding: clamp(8px, .8vw, 14px);
    background: linear-gradient(180deg, #0f1726, #0b111d);
    border: 1px solid var(--line);
    border-radius: 8px;
    min-width: 0;
}
.tv-network-heading span {
    display: block;
    color: #67e8f9;
    font-weight: 800;
    font-size: clamp(12px, 1vw, 18px);
}
.tv-network-heading small {
    display: block;
    color: var(--muted);
    margin-top: 3px;
    font-size: clamp(9px, .65vw, 12px);
}
.tv-network-statuses {
    display: flex;
    gap: clamp(6px, .6vw, 10px);
    flex-wrap: wrap;
}
.tv-network-status {
    min-width: 62px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--line);
}
.tv-network-status span {
    display: block;
    color: var(--muted);
    font-size: clamp(8px, .6vw, 11px);
}
.tv-network-status strong {
    display: block;
    font-size: clamp(16px, 1.5vw, 26px);
    line-height: 1;
    margin-top: 4px;
}
.tv-network-status.is-up strong { color: #2dd4bf; }
.tv-network-status.is-degraded strong { color: #fbbf24; }
.tv-network-status.is-down strong { color: #f87171; }
.tv-network-status.is-unknown strong { color: #94a3b8; }
.tv-network-devices {
    display: flex;
    gap: 6px;
    overflow: hidden;
}
.tv-network-device {
    min-width: 112px;
    padding: 7px 8px;
    border-left: 2px solid #64748b;
    background: rgba(255, 255, 255, .025);
    overflow: hidden;
}
.tv-network-device strong,
.tv-network-device small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tv-network-device strong { font-size: clamp(9px, .7vw, 13px); }
.tv-network-device small { color: var(--muted); font-size: clamp(8px, .6vw, 11px); margin-top: 3px; }
.tv-network-device.is-up { border-left-color: #2dd4bf; }
.tv-network-device.is-degraded { border-left-color: #fbbf24; }
.tv-network-device.is-down { border-left-color: #f87171; }
.tv-network-device.is-maintenance { border-left-color: #a78bfa; }
.network-status-badge {
    background: transparent;
    border: 1px solid currentColor;
}
.network-status-up { color: #0f766e; }
.network-status-degraded { color: #b45309; }
.network-status-down { color: #b91c1c; }
.network-status-unknown { color: #64748b; }
.network-status-maintenance { color: #6d28d9; }
@media (max-width: 1100px) {
    .tv-network-strip { grid-template-columns: 1fr; }
    .tv-network-devices { overflow: auto; }
    .tv-network-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tv-network-layout { grid-template-columns: 1fr; }
}
/* Explicit named areas, not implicit auto-flow + :first-child/span hacks - those broke
   silently when the trend/sla/engineer/category panels got wrapped in #tv-chart-* divs
   for JS live-update targeting, leaving a genuinely empty grid cell (bottom-right) and a
   feed card that only ever occupied one row instead of two. Naming each panel's cell
   explicitly means it can never drift out of sync with the markup again. */
.tv-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "trend    sla      feed"
        "engineer category feed";
    gap: clamp(8px, .85vw, 14px);
}
#tv-chart-trend { grid-area: trend; }
#tv-chart-sla { grid-area: sla; }
#tv-chart-engineer { grid-area: engineer; }
#tv-chart-category { grid-area: category; }
.tv-feed-card { grid-area: feed; }
.tv-grid > * {
    min-height: 0;
    height: 100%;
}
.tv-grid .chart-panel {
    min-height: 0;
    height: 100%;
    margin: 0;
    padding: clamp(10px, .9vw, 16px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.tv-grid .chart-panel .panel-title {
    flex: none;
}
/* Chart bodies vary a lot in intrinsic height depending on how much data there is (one
   engineer vs seven, for instance). Centering them in the remaining card height - instead
   of leaving them pinned to the top with dead space below - is what actually makes each
   card look intentional and full rather than sparse. */
.tv-grid .chart-panel > *:not(.panel-title) {
    margin-top: auto;
    margin-bottom: auto;
    max-height: 100%;
    width: 100%;
    min-height: 0;
}
/* The hourly trend is the one exception: it always has the same 24 bars, so it should
   stretch to fill the card rather than center a small fixed-height chart in a big box.

   Every bar used to collapse to its 8px min-height, so all 24 hours looked identical and
   empty even with tickets raised today. Each bar's fill is a percentage, and a percentage
   height needs an ancestor whose height is definite. Two separate things were missing:

     1. The container was height:100% inside a flex item, which is not definite. It is a
        vh clamp now.
     2. The bars sit in an *implicit* grid row, and an implicit row is auto-sized. Even
        with a 174px container the row measured 27px - the height of a label plus an 8px
        stub - so height:100% on a bar resolved against 27px, not 174px. grid-auto-rows
        makes the row fill the container, which is what finally lets the fill resolve.

   align-content must be stretch rather than end for that: with end, a single auto row is
   pushed to the bottom of the box at its content height instead of filling it. */
#tv-chart-trend .trend-chart {
    flex: 0 0 auto;
    margin: 0;
    height: clamp(120px, 20vh, 240px);
    max-height: none;
    min-height: 0;
    grid-auto-rows: 1fr;
    align-content: stretch;
}
#tv-chart-trend .trend-bar {
    height: 100%;
}
.wallboard-only .panel-title {
    margin-bottom: 8px;
}
.wallboard-only .panel-title h2 {
    font-size: clamp(13px, 1vw, 18px);
}
.wallboard-only .trend-chart {
    min-height: 0;
    height: 100%;
    max-height: 190px;
    gap: 4px;
}
.wallboard-only .trend-bar {
    height: 100%;
    min-height: 0;
    gap: 4px;
}
.wallboard-only .trend-bar small {
    font-size: clamp(7px, .55vw, 10px);
}
/* Read from across a room, so brighter and larger than the hour label beneath it. */
.wallboard-only .trend-value {
    font-size: clamp(9px, .75vw, 14px);
    color: #cfe0f5;
}
.wallboard-only .donut-wrap {
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 10px;
}
.wallboard-only .donut-chart {
    width: 120px;
}
.wallboard-only .donut-chart::after {
    inset: 24px;
}
.wallboard-only .donut-chart strong {
    font-size: 22px;
}
.wallboard-only .chart-legend {
    gap: 5px;
}
.wallboard-only .chart-legend div {
    font-size: clamp(9px, .75vw, 12px);
    grid-template-columns: 9px 1fr auto;
}
.wallboard-only .chart-legend strong {
    font-size: clamp(8px, .68vw, 11px);
}
.wallboard-only .bar-list {
    gap: 7px;
}
.wallboard-only .bar-meta {
    font-size: clamp(9px, .75vw, 12px);
}
.wallboard-only .bar-track {
    height: 8px;
}
.tv-feed {
    display: grid;
    gap: 7px;
    font-size: clamp(9px, .75vw, 12px);
}
.tv-feed div {
    border-bottom: 1px solid var(--line);
    padding-bottom: 6px;
}
.tv-feed div:last-child {
    border-bottom: 0;
}
.tv-feed strong,
.tv-feed span,
.tv-feed small {
    display: block;
}
.tv-feed span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tv-feed small {
    color: var(--muted);
}
@media (max-width: 720px) {
    .tv-header { align-items: start; }
    .tv-brand { align-items: start; }
    .tv-title { display: none; }
    .tv-actions { gap: 4px; }
    .tv-network-hero { align-items: start; flex-direction: column; gap: 8px; }
    .tv-network-signal { text-align: left; }
    .tv-network-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tv-network-device-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .tv-screen.is-active,
    .tv-screen.is-leaving {
        animation: none;
        transition: none;
    }
    .tv-live-dot { animation: none; }
    .sidebar,
    .sidebar-scrim,
    .sidebar-toggle-bars span { transition: none; }
    .tv-metrics [data-metric].is-updated { animation: none; }
    .tv-alert-breach,
    .tv-alert-warning { animation: none; }
    #tv-sound-toggle.needs-attention { animation: none; }
}

/* Modern product shell inspired by the InfraCue command dashboard visuals. */
:root {
    --ink: #0f172a;
    --muted: #64748b;
    --line: #e2e8f0;
    --surface: #ffffff;
    --soft: #f7fafc;
    --accent: #0f948d;
    --accent-strong: #008c87;
    --accent-blue: #2563eb;
    --sidebar-bg: #071827;
    --sidebar-bg-2: #082338;
}
body {
    background: #f6f9fc;
    color: var(--ink);
}
.app-shell {
    min-height: 100vh;
    background: #f6f9fc;
}
.sidebar {
    width: 248px;
    flex-basis: 248px;
    background:
        radial-gradient(circle at 0 0, rgba(20, 184, 166, .14), transparent 34%),
        linear-gradient(180deg, #071827 0%, #061321 100%);
    border-right: 1px solid rgba(148, 163, 184, .16);
    padding: 18px 12px;
    gap: 16px;
}
.content {
    margin-left: 248px;
    padding: 0;
}
.page-body {
    padding: 24px 28px 34px;
}
.brand {
    grid-template-columns: auto 1fr;
    gap: 12px;
    text-align: left;
    justify-items: start;
    align-items: center;
    padding: 2px 8px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, .14);
}
.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient(135deg, #19d3c5, #0284c7);
    box-shadow: 0 12px 28px rgba(20, 184, 166, .2);
}
.brand strong {
    display: block;
    color: #fff;
    font-size: 22px;
    line-height: 1.05;
    max-width: 154px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.brand small {
    margin-top: 3px;
    color: #9eb0c6;
    font-size: 12px;
}
.brand-copy {
    min-width: 0;
}
.brand-logo {
    width: auto;
    min-width: 52px;
    height: 52px;
    max-width: 92px;
    padding: 6px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(#071827, #071827) padding-box,
        linear-gradient(135deg, rgba(56, 189, 248, .85), rgba(20, 184, 166, .9), rgba(245, 158, 11, .72)) border-box;
    box-shadow: 0 12px 28px rgba(20, 184, 166, .12);
}
.brand.has-logo strong {
    max-width: 128px;
}
.brand-logo img {
    display: block;
    max-width: 76px;
    max-height: 38px;
    object-fit: contain;
    margin: auto;
}
.side-nav {
    gap: 6px;
}
.sidebar .nav-link,
.side-nav a,
.logout,
.nav-group summary {
    min-height: 42px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    color: #c8d3e2;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.1;
}
.sidebar .nav-link span,
.nav-group summary span {
    min-width: 0;
}
.sidebar .nav-link:hover,
.side-nav a:hover,
.logout:hover,
.nav-group summary:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}
.sidebar .nav-link.is-active {
    color: #fff;
    background: linear-gradient(135deg, rgba(20, 184, 166, .95), rgba(15, 118, 110, .92));
    box-shadow: 0 12px 28px rgba(20, 184, 166, .2);
}
.sidebar .nav-icon {
    width: 18px;
    height: 18px;
    color: currentColor;
}
.sidebar .nav-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef442f;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 850;
}
.nav-group {
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 10px;
    background: rgba(5, 15, 28, .2);
    overflow: hidden;
}
.nav-group summary {
    list-style: none;
    cursor: pointer;
}
.nav-group summary::after {
    content: "+";
    color: #92a3b8;
    font-size: 18px;
    line-height: 1;
}
.nav-group[open] summary::after {
    content: "-";
}
.nav-group .nav-link,
.nav-group a.nav-link {
    margin: 3px 6px 6px 14px;
    min-height: 36px;
    padding: 8px 10px;
    color: #aebbd0;
    font-size: 13px;
}
.nav-group .nav-link .nav-icon {
    width: 15px;
    height: 15px;
    opacity: .82;
}
.sidebar-site-card {
    margin-top: auto;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(15, 148, 141, .13), rgba(255,255,255,.03));
    color: #e5edf7;
    padding: 12px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}
.sidebar-site-card span {
    display: block;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 750;
}
.sidebar-site-card strong {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 13px;
}
.sidebar-product-brand {
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 10px;
    background: rgba(2, 6, 23, .28);
    color: #dbeafe;
    padding: 11px 12px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}
.sidebar-product-brand .product-mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #19d3c5, #0284c7);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}
.sidebar-product-brand span,
.sidebar-product-brand small {
    display: block;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sidebar-product-brand strong {
    display: block;
    color: #fff;
    font-size: 14px;
    line-height: 1.1;
}
.sidebar-product-brand small {
    margin-top: 2px;
    color: #7dd3fc;
    font-size: 10px;
    letter-spacing: 0;
    text-transform: none;
}
.sidebar .logout.nav-link {
    margin-top: 0;
}
.topbar {
    min-height: 78px;
    margin: 0;
    padding: 14px 28px;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid #e6edf5;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
    position: sticky;
    top: 0;
    z-index: 40;
}
.topbar-title {
    min-width: 220px;
}
.topbar h1 {
    font-size: 24px;
    font-weight: 820;
    letter-spacing: 0;
}
.topbar p {
    margin-top: 4px;
    color: #66758a;
    font-size: 13px;
}
.topbar-actions {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
}
.topbar-search {
    width: min(360px, 32vw);
    height: 44px;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid #dce5ef;
    border-radius: 9px;
    background: #fff;
    color: #7b8798;
}
.topbar-search svg,
.date-chip svg,
.notification-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.topbar-search svg path,
.date-chip svg path,
.notification-button svg path {
    fill: none;
    stroke: currentColor;
}
.topbar-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #142033;
    font-size: 13px;
}
.topbar-search span {
    border-left: 1px solid #e5ebf2;
    padding-left: 9px;
    color: #9aa6b8;
    font-size: 12px;
    font-weight: 700;
}
.date-chip,
.notification-button {
    height: 42px;
    border: 1px solid #dce5ef;
    background: #fff;
    color: #172033;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}
.date-chip {
    grid-template-columns: auto 18px;
    gap: 10px;
    padding: 0 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
}
.date-filter-menu {
    position: relative;
    height: 42px;
}
.date-filter-menu summary {
    list-style: none;
}
.date-filter-menu summary::marker {
    content: "";
}
.date-filter-menu summary::-webkit-details-marker {
    display: none;
}
.date-filter-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    z-index: 80;
    width: 300px;
    padding: 14px;
    border: 1px solid #dce5ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 22px 70px rgba(15, 23, 42, .18);
    display: grid;
    gap: 12px;
}
.date-filter-panel label {
    display: grid;
    gap: 6px;
    margin: 0;
}
.date-filter-panel label span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}
.date-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.notification-button {
    width: 42px;
    border-radius: 50%;
}
.notification-menu {
    position: relative;
    height: 42px;
}
.notification-button {
    position: relative;
    list-style: none;
    appearance: none;
    -webkit-appearance: none;
}
.notification-button::marker {
    content: "";
}
.notification-button::-webkit-details-marker {
    display: none;
}
.notification-button span {
    position: absolute;
    display: grid;
    place-items: center;
    top: -5px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    background: #ef442f;
    color: #fff;
    border: 2px solid #fff;
    font-size: 10px;
}
.notification-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    z-index: 80;
    width: min(360px, calc(100vw - 36px));
    padding: 10px;
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
    border-color: #dce5ef;
    box-shadow: 0 22px 70px rgba(15, 23, 42, .18);
}
.notification-panel h2 {
    margin: 0;
    font-size: 14px;
}
.notification-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 6px 10px;
    border-bottom: 1px solid #e8edf3;
}
.notification-panel-head small {
    font-size: 11px;
}
.notification-panel-head button {
    border: 0;
    padding: 5px;
    background: transparent;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
}
.notification-item {
    margin: 4px 0 0;
}
.notification-item > button {
    width: 100%;
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #172033;
}
.notification-item > button:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.notification-item.is-unread > button {
    background: #f1f7ff;
}
.notification-dot {
    width: 7px;
    height: 7px;
    margin-top: 5px;
    border-radius: 50%;
    background: transparent;
}
.notification-item.is-unread .notification-dot {
    background: #2563eb;
}
.notification-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.notification-copy strong {
    font-size: 12px;
    line-height: 1.35;
}
.notification-copy span,
.notification-copy small {
    overflow-wrap: anywhere;
    font-size: 11px;
}
.notification-panel span,
.notification-panel small,
.notification-empty {
    color: #64748b;
}
.notification-empty {
    margin: 8px 6px;
}
.user-menu {
    position: relative;
}
.user-menu summary {
    list-style: none;
}
.user-menu summary::marker {
    content: "";
}
.user-menu summary::-webkit-details-marker {
    display: none;
}
.user-chip {
    min-width: 0;
    width: auto;
    max-width: 240px;
    border: 0;
    border-left: 1px solid #e5ebf2;
    border-radius: 0;
    padding: 0 0 0 14px;
    background: transparent;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    cursor: pointer;
}
.user-chip-avatar {
    width: 42px;
    border-width: 0;
    background: #e9fbf8;
    box-shadow: inset 0 0 0 1px rgba(20, 184, 166, .14);
}
.user-chip-avatar span {
    color: #0f766e;
}
.user-chip-text span {
    color: #172033;
    font-size: 13px;
}
.user-chip small {
    color: #738095;
    font-size: 11px;
}
.user-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    z-index: 90;
    width: min(320px, calc(100vw - 28px));
    padding: 12px;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 22px 70px rgba(15, 23, 42, .2);
}
.user-menu-head {
    display: grid;
    gap: 2px;
    padding: 8px 8px 12px;
    border-bottom: 1px solid #edf2f7;
}
.user-menu-head strong {
    color: #172033;
    font-size: 15px;
}
.user-menu-head span {
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}
.user-menu-panel dl {
    display: grid;
    gap: 8px;
    margin: 12px 8px;
}
.user-menu-panel dl div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.user-menu-panel dt {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}
.user-menu-panel dd {
    margin: 0;
    color: #172033;
    font-size: 12px;
    font-weight: 750;
    text-align: right;
}
.user-menu-panel a {
    display: block;
    padding: 10px 8px;
    border-radius: 10px;
    color: #172033;
    font-size: 13px;
    font-weight: 800;
}
.user-menu-panel a:hover {
    background: #f8fafc;
}
.user-menu-panel a.danger {
    color: #dc2626;
}
.settings-password-form {
    display: grid;
    gap: 12px;
    max-width: 460px;
}
.settings-inline-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
}
.setup-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.setup-alert strong,
.setup-alert span {
    display: block;
}
.plan-upgrade-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid #f4cf72;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    background: #fffbeb;
    color: #713f12;
}
.plan-upgrade-icon {
    width: 34px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fef3c7;
    font-size: 18px;
    font-weight: 900;
}
.plan-upgrade-alert strong,
.plan-upgrade-alert small {
    display: block;
}
.plan-upgrade-alert p {
    margin: 2px 0;
    color: #854d0e;
    font-size: 13px;
}
.plan-upgrade-alert small,
.plan-upgrade-admin-note {
    color: #92400e;
    font-size: 12px;
    font-weight: 750;
}
.onboarding-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    background:
        radial-gradient(circle at 8% 0%, rgba(20, 184, 166, .14), transparent 34%),
        #fff;
}
.section-kicker {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.onboarding-hero h2 {
    margin: 0 0 8px;
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.05;
    font-weight: 850;
}
.onboarding-score {
    width: 142px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #2563eb, #14b8a6, #f59e0b) border-box;
    border: 8px solid transparent;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
}
.onboarding-score strong {
    display: block;
    font-size: 34px;
    line-height: 1;
}
.onboarding-score span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}
.onboarding-progress {
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: #e8eef6;
}
.onboarding-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #14b8a6);
}
.onboarding-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}
.onboarding-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px;
    background: #fff;
}
.onboarding-step.is-done {
    background: #f8fffc;
    border-color: rgba(16, 185, 129, .24);
}
.onboarding-step-icon {
    width: 34px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e8f7f5;
    color: var(--accent);
    font-size: 18px;
    font-weight: 900;
}
.onboarding-step-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.onboarding-step-title h3 {
    margin: 0;
    font-size: 17px;
}
.onboarding-step-title span {
    border-radius: 999px;
    padding: 4px 8px;
    color: #075985;
    background: #e0f2fe;
    font-size: 11px;
    font-weight: 850;
}
.onboarding-step-title span.optional {
    color: #64748b;
    background: #f1f5f9;
}
.onboarding-step p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
}
.onboarding-step-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.setup-guide-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1040;
    width: min(430px, calc(100vw - 48px));
    overflow: hidden;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .2);
    backdrop-filter: blur(14px);
}
.setup-guide-widget-progress {
    height: 4px;
    background: #e7edf5;
}
.setup-guide-widget-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #14b8a6);
}
.setup-guide-widget-copy {
    display: grid;
    gap: 2px;
    padding: 14px 16px 10px;
}
.setup-guide-widget-copy > span {
    color: var(--accent);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.setup-guide-widget-copy strong {
    color: #111827;
    font-size: 14px;
    line-height: 1.35;
}
.setup-guide-widget-copy small {
    color: var(--muted);
    font-size: 12px;
}
.setup-guide-widget-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 16px 14px;
}
.setup-guide-widget-actions .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.setup-guide-widget-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    width: 30px;
    height: 30px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.setup-guide-widget-toggle:hover,
.setup-guide-widget-toggle:focus-visible {
    border-color: #cbd8e8;
    background: #f2f6fb;
    color: #111827;
}
.setup-guide-widget-toggle-shut,
.setup-guide-widget-pill {
    display: none;
}
/* Minimised: a pill small enough to sit clear of table controls, still one click
   from the full card. Dismissing it entirely would leave no way back to setup. */
.setup-guide-widget.is-collapsed {
    width: auto;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
}
.setup-guide-widget.is-collapsed .setup-guide-widget-progress,
.setup-guide-widget.is-collapsed .setup-guide-widget-copy,
.setup-guide-widget.is-collapsed .setup-guide-widget-actions,
.setup-guide-widget.is-collapsed .setup-guide-widget-toggle-open {
    display: none;
}
.setup-guide-widget.is-collapsed .setup-guide-widget-pill {
    display: block;
    padding: 9px 44px 9px 16px;
    color: #111827;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}
.setup-guide-widget.is-collapsed .setup-guide-widget-toggle-shut {
    display: block;
}
.setup-guide-widget.is-collapsed .setup-guide-widget-toggle {
    top: 50%;
    transform: translateY(-50%);
}
/* Room to scroll the last row of a table clear of the widget, whatever its state. */
body:has(.setup-guide-widget) main.content {
    padding-bottom: 200px;
}
body:has(.setup-guide-widget.is-collapsed) main.content {
    padding-bottom: 90px;
}
.rollout-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.rollout-grid div {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px;
    background: #f8fafc;
}
.rollout-grid strong {
    width: 30px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #14b8a6);
}
.rollout-grid span {
    color: #1f2a44;
    font-size: 13px;
    font-weight: 750;
}
.metric,
.panel,
.chart-panel,
.pricing-card,
.usage-card {
    border-color: #dde7f2;
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .035);
}
.metric {
    padding: 18px 20px;
}
.metric strong {
    font-weight: 850;
}

@media (max-width: 980px) {
    .app-shell { display: block; }
    /* Off-canvas drawer rather than a stacked block. Left static, the full nav sat
       above every page, so reaching any content meant scrolling past ~15 links. */
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(84vw, 300px);
        height: 100dvh;
        min-height: 0;
        overflow-y: auto;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: none;
    }
    .app-shell.nav-open .sidebar {
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(2, 6, 23, .45);
    }
    .sidebar-toggle { display: inline-flex; }
    .sidebar-scrim {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(2, 6, 23, .5);
        opacity: 0;
        transition: opacity .22s ease;
    }
    .app-shell.nav-open .sidebar-scrim { opacity: 1; }
    /* Stops the page behind the drawer scrolling under the user's finger. */
    body.nav-locked { overflow: hidden; }
    .content { margin-left: 0; padding: 0; }
    .page-body { padding: 16px; }
    .metric-grid, .detail-grid, .filter-row, .insight-grid, .insight-grid.three { grid-template-columns: 1fr; }
    .insight-grid > * { min-width: 0; }
    .trend-chart {
        grid-template-columns: repeat(var(--trend-count), minmax(16px, 1fr));
        gap: 4px;
    }
    .trend-bar { gap: 5px; }
    .trend-bar small { font-size: 9px; }
    .mttr-metric {
        grid-column: auto;
        display: block;
    }
    .mttr-metric .metric-definition,
    .mttr-metric .metric-comparison { margin-top: 5px; }
    .donut-wrap { grid-template-columns: 1fr; justify-items: center; }
    .topbar { align-items: stretch; flex-direction: column; padding: 16px; position: static; }
    .topbar-actions { justify-content: flex-start; flex-wrap: wrap; }
    .topbar-search { width: 100%; order: 10; }
    .date-chip { flex: 1; min-width: 220px; }
    .date-filter-menu { width: 100%; height: auto; }
    .date-filter-panel { position: static; width: 100%; margin-top: 8px; }
    .user-chip { border-left: 0; padding-left: 0; }
    .user-menu { width: 100%; }
    .user-menu-panel { position: static; width: 100%; margin-top: 8px; }
    .panel-title { align-items: flex-start; flex-direction: column; }
    .panel-actions { justify-content: flex-start; width: 100%; }
    .panel-actions .form-control { max-width: none !important; }
    .settings-grid, .logo-settings-grid, .wallboard-grid, .wallboard-metrics { grid-template-columns: 1fr; }
    .wallboard-topline { align-items: flex-start; flex-direction: column; }
    .auth-logo img { max-width: 220px; }
    .profile-settings-card, .org-card { grid-template-columns: 1fr; }
    .org-line {
        width: 70%;
        height: 34px;
    }
    .org-line::before { height: 100%; }
    .org-line::after { display: none; }
    .org-line span { display: none; }
    .org-location-grid { grid-template-columns: 1fr; }
    .org-location-title { align-items: flex-start; flex-direction: column; }
    .org-member-grid { flex-direction: column; align-items: stretch; }
    .org-card { width: 100%; }
    .nps-score-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .nps-actions { flex-direction: column-reverse; align-items: stretch; }
    .plan-upgrade-alert { grid-template-columns: auto minmax(0, 1fr); }
    .plan-upgrade-alert .btn,
    .plan-upgrade-admin-note { grid-column: 1 / -1; }
    .setup-guide-widget {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
    }
}

@media (max-width: 520px) {
    .setup-guide-widget-actions { grid-template-columns: 1fr; }
    .setup-guide-widget-copy { padding: 12px 14px 8px; }
    .setup-guide-widget-actions { padding: 0 14px 12px; }
}

.password-field-wrap {
    position: relative;
}

.password-field-wrap .form-control {
    padding-right: 2.75rem;
}

.password-field-wrap .form-control-sm {
    padding-right: 2.25rem;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.password-toggle-btn:hover,
.password-toggle-btn:focus-visible {
    color: var(--ink);
    background: var(--soft);
}

.password-toggle-btn .icon-eye-off {
    display: none;
}

.password-field-wrap.is-visible .icon-eye {
    display: none;
}

.password-field-wrap.is-visible .icon-eye-off {
    display: block;
}

/* ---------- Network Pulse admin console ---------- */
.np-setup-progress .np-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.np-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--soft);
}
.np-step a { color: var(--ink); font-weight: 600; }
.np-step-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}
.np-step.is-done { border-color: rgba(15, 118, 110, .35); background: rgba(15, 118, 110, .06); }
.np-step.is-done .np-step-marker { background: var(--accent); border-color: var(--accent); color: #fff; }
.np-step.is-current { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15, 118, 110, .12); }
.np-step.is-current .np-step-marker { border-color: var(--accent); color: var(--accent); }

.np-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.np-tab {
    padding: 10px 16px;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    color: var(--muted);
    font-weight: 600;
    /* Active state must not rely on colour alone - the underline carries it too. */
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.np-tab:hover { color: var(--ink); background: var(--soft); }
.np-tab.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: #fff;
}
.np-tab-badge {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    margin-left: 4px;
    border-radius: 999px;
    background: #d97706;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.np-collector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}
.np-collector-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    background: #fff;
}
.np-collector-card header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.np-collector-state { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); }
.np-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.np-collector-card.is-online { border-color: rgba(15, 118, 110, .4); }
.np-collector-card.is-online .np-dot { background: #0f766e; box-shadow: 0 0 0 3px rgba(15, 118, 110, .18); }
.np-collector-card.is-online .np-collector-state { color: #0f766e; }
.np-collector-card.is-stale .np-dot { background: #d97706; }
.np-collector-card.is-stale .np-collector-state { color: #b45309; }
.np-collector-card.is-offline { border-color: rgba(220, 38, 38, .4); }
.np-collector-card.is-offline .np-dot { background: #dc2626; }
.np-collector-card.is-offline .np-collector-state { color: #dc2626; }
.np-collector-card dl { display: grid; gap: 8px; margin: 0; }
.np-collector-card dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.np-collector-card dt { color: var(--muted); font-weight: 500; }
.np-collector-card dd { margin: 0; text-align: right; }
.np-collector-hint {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
}

.np-download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.np-download {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
}
.np-download h3 { font-size: 16px; margin: 0 0 6px; }
.np-download p { font-size: 13px; }
.np-signing-note { font-size: 13px; }
.np-subhead { font-size: 15px; margin: 20px 0 10px; }
.np-install-steps { padding-left: 20px; display: grid; gap: 14px; }
.np-install-steps li { line-height: 1.6; }
.np-code {
    margin: 8px 0 0;
    padding: 12px 14px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.55;
    overflow-x: auto;
    white-space: pre;
}

.np-filters {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
}
.np-filter-actions { display: flex; gap: 8px; }

.np-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.np-status-up { background: rgba(15, 118, 110, .12); color: #0f766e; }
.np-status-down { background: rgba(220, 38, 38, .12); color: #dc2626; }
.np-status-degraded { background: rgba(217, 119, 6, .14); color: #b45309; }
.np-status-unknown { background: var(--soft); color: var(--muted); }
.np-status-maintenance { background: rgba(37, 99, 235, .12); color: #2563eb; }

/* ---- Network Pulse guided setup ------------------------------------------ */

.np-figure {
    margin: 0 0 22px;
    padding: 18px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.np-diagram {
    display: block;
    width: 100%;
    height: auto;
    max-width: 600px;
    margin: 0 auto;
}
.np-figure figcaption {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
    text-align: center;
}
/* The diagram is drawn with theme variables rather than fixed hex so it stays
   legible if the surrounding palette changes. */
.np-d-zone { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 5 4; }
.np-d-zonelabel { fill: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .09em; }
.np-d-node rect { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.np-d-collector { fill: rgba(15, 118, 110, .10) !important; fill: color-mix(in srgb, var(--accent) 10%, transparent) !important; stroke: var(--accent) !important; }
.np-d-saas { fill: rgba(37, 99, 235, .10) !important; fill: color-mix(in srgb, var(--accent-blue) 10%, transparent) !important; stroke: var(--accent-blue) !important; }
.np-d-nodetext { fill: var(--ink); font-size: 12px; font-weight: 600; text-anchor: middle; }
.np-d-sub { fill: var(--muted); font-size: 10px; text-anchor: middle; }
.np-d-label { fill: var(--ink); font-size: 11px; font-weight: 600; }
.np-d-arrow { stroke: var(--muted); stroke-width: 1.6; fill: none; }
.np-d-arrow-main { stroke: var(--accent); stroke-width: 2.2; marker-end: none; }
.np-d-arrow-blocked { stroke: #dc2626; stroke-dasharray: 4 4; }
.np-d-head { fill: var(--accent); }
.np-d-noinbound line { stroke: #dc2626; stroke-width: 2.4; stroke-linecap: round; }

.np-guide-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: np-guide;
}
.np-guide-step {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 16px;
    padding: 0 0 26px 0;
    position: relative;
}
/* Connecting spine between the step markers; the last step has no tail. */
.np-guide-step::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 36px;
    bottom: 0;
    width: 2px;
    background: var(--line);
}
.np-guide-step:last-child::before { display: none; }
.np-guide-marker {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    background: var(--soft);
    color: var(--muted);
    border: 2px solid var(--line);
    position: relative;
    z-index: 1;
}
.np-guide-step.is-done .np-guide-marker {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.np-guide-step.is-current .np-guide-marker {
    background: var(--surface);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 4px rgba(15, 118, 110, .14);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.np-guide-body { min-width: 0; }
.np-guide-body h3 {
    margin: 4px 0 6px;
    font-size: 17px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.np-guide-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--muted);
}
.np-guide-tag.is-now { background: rgba(15, 118, 110, .12); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.np-guide-note { color: var(--accent); font-weight: 600; }
.np-guide-step.is-todo .np-guide-body { opacity: .82; }
.np-hint { font-size: 13px; line-height: 1.55; }

.np-callout {
    padding: 12px 14px;
    border-radius: 9px;
    background: var(--soft);
    border-left: 3px solid var(--accent-blue);
    margin: 12px 0;
    font-size: 14px;
}
.np-callout-warn { border-left-color: #d97706; background: rgba(217, 119, 6, .07); }

.np-example {
    margin: 12px 0;
    border: 1px solid var(--line);
    border-radius: 9px;
    overflow: hidden;
}
.np-example-label {
    display: block;
    padding: 7px 12px;
    background: var(--soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
}
.np-example-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.np-example-table th,
.np-example-table td { padding: 8px 12px; text-align: left; border-top: 1px solid var(--line); }
.np-example-table th { font-weight: 600; color: var(--muted); font-size: 12px; }

/* OS switch: the two platforms are alternatives, so showing both at once would
   double the reading length for no benefit. */
.np-os { display: inline-flex; gap: 4px; padding: 4px; background: var(--soft); border-radius: 9px; margin: 14px 0 6px; }
.np-os-tab {
    border: 0;
    background: transparent;
    padding: 7px 18px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}
.np-os-tab.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }

.np-substeps { padding-left: 20px; margin: 10px 0 0; }
.np-substeps > li { margin-bottom: 16px; line-height: 1.6; }

.np-filerow { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.np-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: var(--ink);
    transition: border-color .15s ease, transform .15s ease;
}
.np-file:hover { border-color: var(--accent); transform: translateY(-1px); }
.np-file-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 7px;
    background: rgba(15, 118, 110, .11);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
}
.np-file span span, .np-file > span:last-child { display: flex; flex-direction: column; }
.np-file small { color: var(--muted); font-size: 12px; }

.np-copyblock { position: relative; margin: 10px 0; }
.np-copy {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .10);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 6px;
    cursor: pointer;
}
.np-copy:hover { background: rgba(255, 255, 255, .19); }
.np-copy.is-copied { background: var(--accent); border-color: var(--accent); color: #fff; }
.np-copyblock-inline { margin: 8px 0; }

.np-expect-lead { margin-top: 18px; }
.np-terminal {
    border-radius: 10px;
    overflow: hidden;
    background: #0f172a;
    border: 1px solid #1e293b;
    margin: 10px 0;
}
.np-terminal-bar { display: flex; gap: 6px; padding: 9px 12px; background: #1e293b; }
.np-terminal-bar span { width: 10px; height: 10px; border-radius: 50%; background: #475569; }
.np-terminal pre {
    margin: 0;
    padding: 14px 16px;
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.65;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.np-t-ok { color: #4ade80; }
.np-t-bad { color: #f87171; }
.np-t-good { color: #4ade80; font-weight: 700; }

.np-trouble {
    margin-top: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--soft);
}
.np-trouble summary { cursor: pointer; font-weight: 600; }
.np-trouble dl { margin: 14px 0 0; }
.np-trouble dt { font-weight: 600; margin-top: 14px; font-size: 14px; }
.np-trouble dd { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

@media (max-width: 720px) {
    .np-guide-step { grid-template-columns: 26px 1fr; gap: 12px; }
    .np-guide-step::before { left: 12px; }
    .np-guide-marker { width: 26px; height: 26px; font-size: 12px; }
    .np-filerow { flex-direction: column; }
    .np-file { width: 100%; }
    /* A copy button overlapping a narrow code block hides the command it copies. */
    .np-copy { position: static; display: block; margin: 0 0 6px auto; }
}

/* Adding one device and importing many are separate jobs, so the bulk form is
   visually detached rather than sitting flush against the single-device fields. */
.np-target-forms {
    display: grid;
    gap: 18px;
}
.np-target-import {
    padding-top: 18px;
    border-top: 1px dashed var(--line);
}
/* A paused device is still listed, but should not read as actively monitored. */
.np-target-paused > td {
    opacity: .55;
}

.np-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 36px 20px;
    text-align: center;
    background: var(--soft);
    border: 1px dashed var(--line);
    border-radius: 10px;
}
.np-empty p { max-width: 46ch; margin: 0; }

.np-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
.np-detail-grid > div { display: grid; gap: 3px; }
.np-detail-grid span { color: var(--muted); font-size: 12.5px; }
.np-back { display: inline-block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }

.np-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.np-timeline-item {
    display: flex;
    gap: 12px;
    padding: 10px 0 10px 4px;
    border-left: 2px solid var(--line);
    margin-left: 5px;
    padding-left: 16px;
    position: relative;
}
.np-timeline-dot {
    position: absolute;
    left: -6px;
    top: 15px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--muted);
    border: 2px solid #fff;
}
.np-timeline-item.is-up .np-timeline-dot { background: #0f766e; }
.np-timeline-item.is-down .np-timeline-dot { background: #dc2626; }
.np-timeline-item.is-degraded .np-timeline-dot { background: #d97706; }
.np-timeline-item strong { margin-right: 8px; }
.np-timeline-item span { font-size: 13px; }

@media (max-width: 860px) {
    .np-filters { grid-template-columns: 1fr; }
    .np-collector-card dl > div { flex-direction: column; gap: 2px; }
    .np-collector-card dd { text-align: left; }
}
.np-alert-form .np-alert-toggle {
    padding: 14px 16px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--soft);
}

/* Policy acceptance on account activation. */
.auth-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px;
    font-size: 13.5px; line-height: 1.5; color: #4b5c6f; cursor: pointer; }
.auth-consent input { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; cursor: pointer; }

/* Live latency trace. Shown only on cards under per-second observation, so the
   presence of a trace is itself the signal that a device is being watched closely. */
.tv-network-device-card.is-live { position: relative; }
.tv-pulse-reading {
    font: 700 30px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: -0.02em;
    margin: 6px 0 2px;
    font-variant-numeric: tabular-nums;   /* stops the card twitching as digits change */
}
.tv-pulse-canvas {
    display: block;
    width: 100%;
    /* Takes the space the rest of the card does not need, so a taller screen gets a taller
       trace rather than more empty card. pulse.js re-reads clientWidth/clientHeight on
       every draw and rebuilds the backing store, so this scales without blurring. */
    flex: 1 1 auto;
    height: auto;
    min-height: 26px;
    margin: 2px 0 6px;
}
.tv-pulse-note {
    font: 600 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: rgba(148, 163, 184, 0.85);
    margin: -2px 0 4px;
    letter-spacing: 0.01em;
}

/* Focus view: one device, full attention. Sized for a wall-mounted screen read from
   across a room, which is why the numbers are large and the chrome is minimal. */
.tv-pulse-focus {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(2, 6, 16, 0.86);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 3vh 3vw;
}
.tv-pulse-focus[hidden] { display: none; }
.tv-pulse-focus-inner {
    width: min(1400px, 100%);
    background: #0b1220;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px; padding: 24px 28px 20px;
}
.tv-pulse-focus-inner header { display: flex; align-items: flex-start; gap: 24px; }
.tv-pulse-focus-inner header h3 { margin: 4px 0 2px; font-size: 30px; letter-spacing: -0.02em; }
.tv-pulse-focus-inner header code { color: #94a3b8; font-size: 15px; }
.tv-pulse-focus-reading { margin-left: auto; text-align: right; }
.tv-pulse-focus-reading strong {
    display: block;
    font: 700 46px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
}
.tv-pulse-focus-reading small { color: #94a3b8; font: 600 13px/1.4 ui-monospace, monospace; }
.tv-pulse-focus-close {
    background: none; border: 0; color: #94a3b8; font-size: 34px; line-height: 1;
    cursor: pointer; padding: 0 4px; align-self: flex-start;
}
.tv-pulse-focus-close:hover { color: #e2e8f0; }
.tv-pulse-focus canvas { display: block; width: 100%; height: 280px; margin: 14px 0 4px; }
.tv-pulse-focus-stats { display: flex; gap: 34px; margin: 0; padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.14); }
.tv-pulse-focus-stats dt { color: #94a3b8; font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: 3px; }
.tv-pulse-focus-stats dd { margin: 0; font: 700 20px/1 ui-monospace, monospace;
    font-variant-numeric: tabular-nums; }
.tv-network-device-card.is-live { cursor: pointer; }
.tv-network-device-card.is-live:hover,
.tv-network-device-card.is-live:focus-visible { outline: 2px solid rgba(56, 189, 248, 0.55); outline-offset: 2px; }

/* Ping reply log. Deliberately styled as a console: this is the format an engineer
   already reads without translating, and the familiarity is the point. */
.tv-pulse-log { margin: 10px 0 4px; }
.tv-pulse-log-head {
    display: flex; align-items: center; gap: 14px;
    font: 700 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.11em; text-transform: uppercase; color: #94a3b8;
    margin-bottom: 6px;
}
.tv-pulse-log-head label { display: flex; align-items: center; gap: 6px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.tv-pulse-log pre {
    margin: 0; height: 148px; overflow-y: auto; overflow-x: hidden;
    background: #05090f;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px; padding: 10px 12px;
    font: 500 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #cbd5e1; white-space: pre-wrap; word-break: break-word;
}
.tv-pulse-log pre:focus-visible { outline: 2px solid #38bdf8; outline-offset: 1px; }
.tv-pulse-log .ln-down { color: #fca5a5; }
.tv-pulse-log .ln-slow { color: #fcd34d; }

/* Recovery steps on an unhealthy collector card. Numbered and copyable because the
   previous version said "check the service is running", which is a suggestion that
   somebody else knows how, not an instruction. */
.np-recovery {
    margin: 8px 0 10px;
    padding-left: 20px;
    display: grid;
    gap: 8px;
}
.np-recovery li { font-size: 13px; }
.np-recovery span { display: block; color: var(--muted); margin-bottom: 3px; }
.np-recovery code {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    padding: 4px 8px;
    border-radius: 5px;
    background: #f2f5f8;
    font-size: 12.5px;
    vertical-align: middle;
}
.np-copy-step {
    margin-left: 6px;
    padding: 2px 8px;
    border: 1px solid #cbd8e8;
    border-radius: 5px;
    background: #fff;
    font-size: 11.5px;
    cursor: pointer;
}
.np-copy-step:hover { background: #f2f6fb; }

/* Row actions in Network Pulse.
   These were three unrelated Bootstrap variants plus a bare text link, so the most
   significant control on the row - opening a full-screen live trace - read as a caption
   rather than something you could press. One family now, matching the pill radius and
   weight the console already uses for status, so the row looks designed rather than
   assembled from whatever was to hand. */
.np-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: #33485c;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    /* Two-word labels wrapped mid-button in a narrow column, which reads as two broken
       controls stacked rather than one. */
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.np-btn:hover { background: #f2f6fb; border-color: #b9c8dc; color: #0f172a; }
.np-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The live trace is the one action worth pulling forward, so it carries the accent. */
.np-btn-pulse {
    border-color: rgba(15, 118, 110, .35);
    background: rgba(15, 118, 110, .10);
    color: var(--accent);
}
.np-btn-pulse:hover { background: rgba(15, 118, 110, .18); border-color: var(--accent); color: var(--accent); }
.np-btn-pulse svg { flex: none; }

/* Destructive stays quiet until reached for - red text on white, not a red slab. */
.np-btn-danger { color: #b91c1c; border-color: rgba(220, 38, 38, .35); }
.np-btn-danger:hover { background: rgba(220, 38, 38, .10); border-color: #dc2626; color: #b91c1c; }

/* Points at the guided setup from the integrations form, where the collector used to be
   just another dropdown option. Styled as a route rather than a warning: choosing the
   wizard is the normal path, not a correction. */
.np-route-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(15, 118, 110, .28);
    border-radius: 10px;
    background: rgba(15, 118, 110, .06);
}
.np-route-card strong { display: block; font-size: 14.5px; margin-bottom: 2px; }
.np-route-card span { color: var(--muted); font-size: 13px; }

/* Arriving from "Show me how": the linked collector card announces itself, because a jump
   that lands mid-page with no change looks like nothing happened. Fades rather than
   staying lit, so it does not read as a permanent error state. */
.np-collector-card:target {
    animation: np-card-arrive 2.4s ease-out 1;
    scroll-margin-top: 90px;
}
@keyframes np-card-arrive {
    0%, 40% { box-shadow: 0 0 0 3px rgba(15, 118, 110, .45); }
    100% { box-shadow: 0 0 0 3px rgba(15, 118, 110, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .np-collector-card:target { animation: none; box-shadow: 0 0 0 3px rgba(15, 118, 110, .45); }
}