:root {
  color-scheme: dark;
  --bg: #050b14;
  --bg-2: #07111f;
  --panel: #0b1626;
  --panel-2: #101e32;
  --line: rgba(148, 163, 184, .16);
  --text: #f8fafc;
  --text-strong: #ffffff;
  --muted: #91a2b8;
  --muted-2: #7890aa;
  --success: #22c55e;
  --success-text: #5ee889;
  --success-wash: rgba(34, 197, 94, .1);
  --warning: #f59e0b;
  --warning-text: #ffbd39;
  --warning-wash: rgba(245, 158, 11, .1);
  --fail: #ef4444;
  --fail-text: #ff6565;
  --fail-wash: rgba(239, 68, 68, .1);
  --neutral: #64748b;
  --neutral-text: #a8b3c2;
  --neutral-wash: rgba(100, 116, 139, .12);
  --running: #60a5fa;
  --running-text: #93c5fd;
  --running-wash: rgba(96, 165, 250, .12);
  --veeam: #22c55e;
  --proxmox: #8b5cf6;
  --nas: #06b6d4;
  --blue: #2f80ed;
  --blue-soft: #3a8bff;
  --cyan: #24d6e8;
  --violet: #8b7cff;
  --shadow: 0 18px 55px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .035);
  --border-strong: #27415f;
  --input-bg: rgba(10, 23, 39, .8);
  --input-text: #dfe8f2;
  --hover-overlay: rgba(255, 255, 255, .045);
  --body-glow: rgba(25, 75, 130, .17);
  --sidebar-bg: linear-gradient(180deg, rgba(8, 23, 38, .98), rgba(5, 14, 25, .99)), #06101c;
  --brand-mark-grad: radial-gradient(circle at 70% 22%, rgba(86, 130, 255, .24), transparent 38%), linear-gradient(145deg, #10273a, #07131f 68%);
  --overlay-panel: #0d1d2f;
  --modal-scrim: rgba(2, 6, 15, .72);
  --title-gradient: linear-gradient(100deg, #ffffff 0%, #e8f5ff 60%, #9edcff 100%);
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
}

/* Refined application density and handbook */
@media (min-width:1001px) {
  .app-layout { grid-template-columns:220px minmax(0,1fr); }
  .sidebar { padding:20px 14px; }
  .sidebar .brand { margin:0 7px 25px; gap:10px; }
  .sidebar .brand-mark { width:38px; height:38px; flex-basis:38px; }
  .sidebar .brand-copy strong { font-size:14px; }
  .sidebar .brand-copy small { font-size:9px; }
  .sidebar .nav-section-label { margin:0 10px 10px; font-size:9px; }
  .sidebar .nav-item { min-height:42px; padding:8px 10px; gap:10px; font-size:13px; }
  .sidebar .nav-icon { width:27px; height:27px; font-size:9px; }
  .page-content { width:100%; max-width:1540px; padding:22px 26px 46px; }
}
.topbar { min-height:66px; padding:10px 26px; }
.topbar h1 { font-size:17px; letter-spacing:-.015em; }
.topbar p { margin-top:2px; font-size:11px; }
.page-heading { margin-bottom:17px; }
.page-heading h2 { font-size:clamp(22px,2vw,29px); line-height:1.15; }
.page-heading>div>p:last-child { margin-top:7px; font-size:13px; }
.noc-heading h2 { font-size:clamp(27px,2.35vw,35px); }
.eyebrow { font-size:9px; letter-spacing:.18em; }
.metric-grid { gap:13px; }
.metric { min-height:128px; padding:18px 19px; }
.metric strong { font-size:29px; }
.filters { padding:15px; gap:11px; border-radius:14px; }
.filters label, .report-options label { font-size:10px; }
.filters input,.filters select,.report-options input,.report-options select { min-height:42px; padding:9px 11px; font-size:12px; }
.site-grid { gap:14px; }
.site-card { min-height:0; padding:15px; border-radius:13px; }
.site-card h3 { font-size:14px; line-height:1.35; }
.site-card>p { font-size:10px; }
.site-summary { gap:8px; }
.site-summary div { min-height:72px; padding:9px; }
.site-summary strong { font-size:12px; }
.btn { min-height:40px; padding:9px 14px; font-size:12px; }

.guide-toolbar { display:flex; align-items:center; justify-content:space-between; width:min(1180px,100%); margin:0 auto 14px; }
.guide-readonly { color:var(--muted); font:700 9px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.14em; }
.guide-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:16px; width:min(1180px,100%); margin:0 auto; align-items:start; }
.guide-side { position:sticky; top:82px; display:grid; gap:3px; padding:16px; border:1px solid var(--line); border-radius:13px; background:var(--panel); box-shadow:var(--shadow); }
.guide-side strong { margin:0 8px 9px; color:var(--text-strong); font-size:12px; }
.guide-side a { padding:8px; border-radius:8px; color:var(--muted); font-size:11px; text-decoration:none; transition:.18s ease; }
.guide-side a:hover { color:var(--text-strong); background:rgba(34,211,238,.08); transform:translateX(2px); }
.guide-paper { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:var(--shadow); }
.guide-paper>header,.guide-paper>footer { display:flex; justify-content:space-between; gap:16px; padding:16px 32px; color:var(--muted); font:700 9px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.12em; }
.guide-paper>header { border-bottom:1px solid var(--line); }
.guide-paper>footer { border-top:1px solid var(--line); }
.guide-hero { position:relative; overflow:hidden; padding:40px 40px 34px; background:radial-gradient(circle at 88% 20%,rgba(34,211,238,.17),transparent 30%),linear-gradient(135deg,rgba(35,95,140,.18),transparent 62%); }
.guide-hero::after { content:""; position:absolute; width:220px; height:220px; right:-85px; top:-105px; border:1px solid rgba(34,211,238,.19); border-radius:50%; }
.guide-hero>span,.guide-kicker { color:var(--cyan); font:700 9px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.17em; }
.guide-hero h2 { margin:9px 0 8px; color:var(--text-strong); font-size:clamp(27px,3vw,38px); letter-spacing:-.04em; }
.guide-hero>p { max-width:700px; margin:0; color:var(--muted); font-size:13px; line-height:1.75; }
.guide-quick { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:23px; }
.guide-quick a { display:flex; align-items:center; gap:8px; min-height:44px; padding:9px 11px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:rgba(8,22,38,.24); font-size:11px; text-decoration:none; }
.guide-quick b { color:var(--cyan); font:700 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.guide-section { padding:30px 40px; border-top:1px solid var(--line); scroll-margin-top:82px; }
.guide-section h3 { margin:6px 0 18px; color:var(--text-strong); font-size:21px; letter-spacing:-.025em; }
.guide-section h4 { margin:24px 0 8px; color:var(--text-strong); font-size:14px; }
.guide-section>p:not(.guide-kicker) { color:var(--muted); font-size:12px; line-height:1.75; }
.guide-steps { display:grid; gap:0; margin:0; padding:0; list-style:none; counter-reset:guide-step; }
.guide-steps li { position:relative; display:grid; grid-template-columns:180px 1fr; gap:22px; padding:15px 0 15px 34px; border-top:1px solid var(--line); counter-increment:guide-step; }
.guide-steps li::before { content:counter(guide-step,decimal-leading-zero); position:absolute; top:17px; left:0; color:var(--cyan); font:700 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.guide-steps b { color:var(--text-strong); font-size:12px; }
.guide-steps span { color:var(--muted); font-size:12px; line-height:1.7; }
.guide-note { margin-top:18px; padding:13px 15px; border-left:2px solid var(--cyan); border-radius:0 9px 9px 0; color:var(--text); background:rgba(34,211,238,.07); font-size:11px; line-height:1.65; }
.guide-note.warning { border-left-color:var(--amber); background:rgba(245,158,11,.07); }
.guide-grid,.status-guide-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.guide-grid>div,.status-guide-grid>div { padding:14px; border:1px solid var(--line); border-radius:10px; background:rgba(8,22,38,.22); }
.guide-grid b,.status-guide-grid b { color:var(--text-strong); font-size:12px; }
.guide-grid p,.status-guide-grid p { margin:5px 0 0; color:var(--muted); font-size:11px; line-height:1.55; }
.status-guide-grid .success b { color:var(--green); }.status-guide-grid .warning b { color:var(--amber); }.status-guide-grid .fail b { color:var(--red); }
.guide-checklist { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
.guide-checklist li { position:relative; padding:11px 14px 11px 37px; border:1px solid var(--line); border-radius:9px; color:var(--muted); font-size:11px; line-height:1.6; }
.guide-checklist li::before { content:"✓"; position:absolute; left:14px; color:var(--green); font-weight:800; }

:root[data-theme="light"] {
  --bg:#edf3f8; --bg-2:#e8eef5; --panel:rgba(255,255,255,.9); --panel-2:#f1f5f9;
  --text:#334155; --text-strong:#0f172a; --muted:#64748b; --line:rgba(51,65,85,.13);
  --shadow:0 14px 35px rgba(50,75,105,.09); --sidebar-bg:linear-gradient(180deg,#fbfdff,#f3f7fb);
}
:root[data-theme="light"] body { background:radial-gradient(circle at 82% -8%,rgba(14,165,233,.12),transparent 34%),linear-gradient(145deg,#edf3f8,#f8fafc); }
:root[data-theme="light"] .site-card,
:root[data-theme="light"] .metric,
:root[data-theme="light"] .card,
:root[data-theme="light"] .solution-group,
:root[data-theme="light"] .filters,
:root[data-theme="light"] .guide-paper,
:root[data-theme="light"] .guide-side { color:var(--text); background:rgba(255,255,255,.91); border-color:var(--line); box-shadow:var(--shadow); }
:root[data-theme="light"] .site-card h3,
:root[data-theme="light"] .site-card strong,
:root[data-theme="light"] .guide-paper h2,
:root[data-theme="light"] .guide-paper h3,
:root[data-theme="light"] .guide-paper h4 { color:#0f172a; }
:root[data-theme="light"] .site-summary div,
:root[data-theme="light"] .guide-grid>div,
:root[data-theme="light"] .status-guide-grid>div { background:#f2f6fa; }
:root[data-theme="light"] .btn.secondary,
:root[data-theme="light"] .icon-btn,
:root[data-theme="light"] .theme-switch { color:#334155; background:#f8fafc; border-color:rgba(51,65,85,.18); }
:root[data-theme="light"] .guide-quick a { background:rgba(255,255,255,.7); }

@media(max-width:900px) {
  .guide-layout { grid-template-columns:1fr; }
  .guide-side { position:static; grid-template-columns:repeat(3,1fr); }
  .guide-side strong { grid-column:1/-1; }
}
@media(max-width:620px) {
  .topbar { padding-inline:14px; }
  .guide-toolbar { align-items:flex-start; gap:10px; flex-direction:column; }
  .guide-side { grid-template-columns:repeat(2,1fr); }
  .guide-paper>header,.guide-paper>footer,.guide-hero,.guide-section { padding-left:20px; padding-right:20px; }
  .guide-quick,.guide-grid,.status-guide-grid { grid-template-columns:1fr; }
  .guide-steps li { grid-template-columns:1fr; gap:5px; }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1f8;
  --bg-2: #e3e8f3;
  --panel: #ffffff;
  --panel-2: #f3f5fb;
  --line: rgba(15, 23, 42, .12);
  --text: #101827;
  --text-strong: #05070d;
  --muted: #55607d;
  --muted-2: #6b7690;
  --success: #16a34a;
  --success-text: #15803d;
  --success-wash: rgba(22, 163, 74, .12);
  --warning: #b45309;
  --warning-text: #92400e;
  --warning-wash: rgba(180, 83, 9, .12);
  --fail: #dc2626;
  --fail-text: #b91c1c;
  --fail-wash: rgba(220, 38, 38, .1);
  --neutral: #64748b;
  --neutral-text: #475569;
  --neutral-wash: rgba(100, 116, 139, .12);
  --running: #2563eb;
  --running-text: #1d4ed8;
  --running-wash: rgba(37, 99, 235, .1);
  --veeam: #16a34a;
  --proxmox: #7c3aed;
  --nas: #0891b2;
  --blue: #1d4ed8;
  --blue-soft: #3b82f6;
  --cyan: #0e7490;
  --violet: #7c3aed;
  --shadow: 0 8px 24px -8px rgba(16, 24, 39, .15), 0 2px 6px rgba(16, 24, 39, .06);
  --border-strong: #cbd5e1;
  --input-bg: #ffffff;
  --input-text: #101827;
  --hover-overlay: rgba(15, 23, 42, .045);
  --body-glow: rgba(59, 130, 246, .08);
  --sidebar-bg: #ffffff;
  --brand-mark-grad: radial-gradient(circle at 70% 22%, rgba(37, 99, 235, .16), transparent 38%), linear-gradient(145deg, #eaf1ff, #ffffff 68%);
  --overlay-panel: #ffffff;
  --modal-scrim: rgba(15, 23, 42, .38);
  --title-gradient: linear-gradient(100deg, #05070d 0%, #1d4ed8 100%);
}

* { box-sizing: border-box; }
html { font-family: "IBM Plex Sans Thai", "Segoe UI", Tahoma, sans-serif; color: var(--text); background: var(--bg); }
body { margin: 0; background: radial-gradient(circle at 80% 0%, var(--body-glow), transparent 34%), var(--bg); min-height: 100vh; }
button, input, select { font: inherit; }
button { cursor: pointer; color: inherit; }
a { color: inherit; }

.boot-loader { padding: 60px; text-align: center; color: var(--muted); }

/* Layout */
.app-layout { min-height: 100vh; display: grid; grid-template-columns: 248px 1fr; }
.sidebar { position: relative; background: var(--sidebar-bg); border-right: 1px solid var(--line); padding: 24px 18px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow-y: auto; }
.sidebar::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--cyan), var(--blue), var(--violet), transparent 88%); opacity: .9; }
.sidebar .brand { display: flex; gap: 12px; align-items: center; margin: 2px 8px 24px; text-decoration: none; color: var(--text); }
.sidebar .brand-mark { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--text-strong); font-weight: 800; border: 1px solid rgba(80, 200, 237, .34); background: var(--brand-mark-grad); box-shadow: 0 12px 30px rgba(0, 0, 0, .18); flex-shrink: 0; }
.sidebar .brand span > small { display: block; color: var(--muted-2); font-size: 10px; letter-spacing: 1.2px; font-weight: 600; }
.sidebar .nav-label { color: var(--cyan); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; margin: 8px 10px; }
.sidebar nav { display: grid; gap: 4px; }
.sidebar .nav-item { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--muted); padding: 11px 12px; border-radius: 10px; font-weight: 600; font-size: 14px; transition: .2s ease; }
.sidebar .nav-item:hover { background: var(--hover-overlay); color: var(--text-strong); }
.sidebar .nav-item.active { color: var(--text-strong); background: linear-gradient(90deg, rgba(36, 214, 232, .15), rgba(79, 140, 255, .09)); box-shadow: inset 3px 0 var(--cyan); }
.sidebar .nav-item b { font-style: normal; width: 26px; height: 26px; border: 1px solid var(--border-strong); border-radius: 8px; display: grid; place-items: center; font-size: 10px; flex-shrink: 0; color: var(--blue); }
.sidebar-foot { margin-top: auto; border-top: 1px solid var(--line); padding: 16px 10px 0; display: grid; gap: 10px; }
.sidebar-foot a { color: var(--cyan); text-decoration: none; font-weight: 600; font-size: 13px; }
.theme-switch { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border-strong); background: var(--input-bg); border-radius: 9px; padding: 8px 10px; font-size: 12.5px; color: var(--muted); }
.theme-switch button { border: none; background: transparent; color: inherit; font-size: 15px; padding: 2px 6px; border-radius: 6px; }
.theme-switch button[aria-pressed="true"] { color: var(--text-strong); background: var(--hover-overlay); }
.logout-btn { border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--fail-text); border-radius: 9px; padding: 9px 12px; font-weight: 650; font-size: 13px; text-align: left; }
.logout-btn:hover { background: var(--fail-wash); border-color: rgba(239, 68, 68, .35); }

.main-shell { min-width: 0; }
.topbar { min-height: 72px; background: color-mix(in srgb, var(--panel) 55%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 20; flex-wrap: wrap; }
.topbar h1 { font-size: 19px; margin: 0; background: var(--title-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topbar p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.top-actions { display: flex; gap: 9px; align-items: center; position: relative; }
.mobile-menu { display: none; }

.icon-btn { position: relative; width: 41px; height: 41px; padding: 0; border: 1px solid var(--border-strong); background: var(--input-bg); border-radius: 9px; font-size: 16px; color: var(--text); }
.icon-btn:hover { background: var(--hover-overlay); }
.notification-count { position: absolute; right: -5px; top: -6px; background: var(--fail); color: #fff; border-radius: 20px; padding: 1px 6px; font-size: 10px; min-width: 16px; }
.refresh-icon { display: inline-block; }
.is-loading .refresh-icon { animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.notification-panel { position: absolute; right: 32px; top: 63px; width: 340px; max-width: calc(100vw - 40px); background: var(--overlay-panel); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 13px; z-index: 50; display: none; max-height: 60vh; overflow: auto; }
.notification-panel.show { display: block; }
.panel-title { padding: 14px 16px; border-bottom: 1px solid var(--line); font-weight: 700; display: flex; align-items: center; justify-content: space-between; }
.panel-title button { border: none; background: none; font-size: 18px; color: var(--muted); }
.notification-item { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; align-items: flex-start; }
.notification-item:hover { background: var(--hover-overlay); }
.notification-item p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--warning); }
.dot.red { background: var(--fail); }
.dot.amber { background: var(--warning); }

.page-content { padding: 28px 32px 50px; max-width: 1540px; margin: auto; }
.loading-card { padding: 60px; text-align: center; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }

.page-heading { display: flex; justify-content: space-between; gap: 22px; align-items: flex-start; margin-bottom: 22px; flex-wrap: wrap; }
.page-heading h2 { margin: 4px 0 7px; font-size: 26px; letter-spacing: -.5px; color: var(--text-strong); }
.page-heading p { margin: 0; color: var(--muted); max-width: 60ch; }
.eyebrow { display: block; color: var(--cyan); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 4px; }

.btn { border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--input-text); border-radius: 9px; padding: 10px 16px; font-weight: 650; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { background: var(--hover-overlay); }
.btn.primary { background: linear-gradient(180deg, var(--blue-soft), var(--blue)); border-color: var(--blue); color: #fff; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.secondary { background: var(--input-bg); }
.btn.full { display: flex; justify-content: center; width: 100%; margin-top: 14px; }

.metrics { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 16px; margin: 0 0 18px; }
.metric, .card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.metric { padding: 19px; border-top: 3px solid var(--blue); }
.metric.green { border-top-color: var(--success); }
.metric.purple { border-top-color: var(--violet); }
.metric.amber { border-top-color: var(--warning); }
.metric p { color: var(--muted); font-size: 13px; margin: 0; }
.metric strong { display: block; font-size: 29px; margin-top: 7px; color: var(--text-strong); }
.metric span { color: var(--muted); font-size: 12px; }

.content-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 16px; }
.card-head { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-head h3 { margin: 0; font-size: 17px; }
.card-head a { color: var(--cyan); text-decoration: none; font-weight: 600; font-size: 13px; }
.count-pill { background: var(--neutral-wash); color: var(--neutral-text); border-radius: 20px; padding: 5px 11px; font-size: 12px; font-weight: 700; }

.attention-list { display: grid; }
.attention-list a { display: grid; grid-template-columns: 6px minmax(0,1fr) minmax(150px,auto); gap: 12px; align-items: center; padding: 13px 20px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.attention-list a:last-child { border-bottom: 0; }
.attention-list a:hover { background: var(--hover-overlay); }
.attention-list strong { display: block; font-size: 13px; }
.attention-copy { min-width: 0; }
.attention-company { display: block; margin-top: 2px; color: var(--muted-2); font-size: 10px; line-height: 1.35; }
.attention-list p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; }
.attention-list time { color: var(--muted); font: 600 10px/1.45 var(--font-mono); white-space: normal; text-align: right; }
.status-line { height: 34px; border-radius: 9px; background: var(--neutral); }
.status-line.success { background: var(--success); }
.status-line.warning { background: var(--warning); }
.status-line.fail { background: var(--fail); }
.status-line.running { background: var(--running); }

.solution-list { display: grid; gap: 10px; padding: 16px 20px; }
.solution-card { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; }
.solution-card:hover { background: var(--hover-overlay); }
.solution-card strong { display: block; font-size: 14px; }
.solution-card p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.solution-card > span { color: var(--cyan); font-size: 12px; font-weight: 600; }
.solution-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; background: var(--blue); flex-shrink: 0; }
.solution-icon.small { width: 30px; height: 30px; font-size: 13px; }

.table-wrap { overflow: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; color: var(--muted-2); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; padding: 12px 11px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 13px 11px; border-bottom: 1px solid var(--line); font-size: 13px; }
.table tr:hover td { background: var(--hover-overlay); }
.table td.num, .table td.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); }

.pill { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; border-radius: 20px; padding: 5px 10px; font-size: 11px; font-weight: 750; line-height: 1.2; white-space: nowrap; word-break: keep-all; background: var(--neutral-wash); color: var(--neutral-text); }
.pill.success { color: var(--success-text); background: var(--success-wash); }
.pill.warning { color: var(--warning-text); background: var(--warning-wash); }
.pill.fail { color: var(--fail-text); background: var(--fail-wash); }
.pill.running { color: var(--running-text); background: var(--running-wash); }
.pill.neutral { color: var(--neutral-text); background: var(--neutral-wash); }

.link-btn { border: none; background: none; color: var(--cyan); font-weight: 650; padding: 4px 6px; }
.link-btn:hover { text-decoration: underline; }

.filters { display: flex; gap: 12px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); padding: 16px; border-radius: 13px; margin-bottom: 16px; align-items: end; }
.filters label { display: grid; gap: 5px; min-width: 150px; flex: 1; font-size: 11px; color: var(--muted); font-weight: 700; }
.filters input, .filters select { width: 100%; min-width: 0; border: 1px solid var(--border-strong); border-radius: 8px; padding: 10px; background: var(--input-bg); color: var(--input-text); font-weight: 500; text-overflow: ellipsis; }
.filters .btn { align-self: end; white-space: nowrap; }

.date-presets { display: flex; gap: 8px; flex-wrap: wrap; clear: both; margin: 14px 0 18px; padding-top: 2px; }
.preset-btn { border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--muted); border-radius: 20px; padding: 6px 13px; font-size: 12px; font-weight: 650; }
.preset-btn:hover { color: var(--text-strong); border-color: var(--cyan); background: var(--hover-overlay); }

.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.site-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 18px; transition: .2s ease; }
.site-card:hover { border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); transform: translateY(-1px); }
.site-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.site-card h3 { margin: 0 0 4px; font-size: 16px; }
.site-card > p { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.collector { border-radius: 20px; padding: 4px 10px; font-size: 11px; font-weight: 700; background: var(--neutral-wash); color: var(--neutral-text); }
.collector.online { color: var(--success-text); background: var(--success-wash); }
.collector.offline { color: var(--fail-text); background: var(--fail-wash); }
.collector.unknown { color: var(--neutral-text); background: var(--neutral-wash); }
.site-solutions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.system-pill { border: 1px solid currentColor; border-radius: 20px; padding: 3px 9px; font-size: 11px; font-weight: 700; }
.site-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.site-summary div { background: var(--bg-2); padding: 10px; border-radius: 9px; }
.site-summary span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 3px; }
.site-summary strong { font-size: 13px; }
.text-success { color: var(--success-text); }
.text-warning { color: var(--warning-text); }
.text-fail { color: var(--fail-text); }
.text-running { color: var(--running-text); }
.text-neutral { color: var(--muted); }

.empty-state { padding: 40px; text-align: center; color: var(--muted); background: var(--panel); border: 1px dashed var(--line); border-radius: 14px; grid-column: 1 / -1; }
.empty-state h2 { color: var(--text-strong); }
.empty-mini { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; }

.report-builder { padding: 20px; }
.report-options { display: grid; grid-template-columns: repeat(5,minmax(140px,1fr)) auto auto; gap: 12px; align-items: end; }
.report-options label { display: grid; gap: 5px; min-width: 0; font-size: 11px; color: var(--muted); font-weight: 700; }
.report-options input, .report-options select { width: 100%; min-width: 0; border: 1px solid var(--border-strong); border-radius: 8px; padding: 10px; background: var(--input-bg); color: var(--input-text); }
.report-summary { margin: 16px 0; display: flex; gap: 8px; align-items: baseline; }
.report-summary strong { font-size: 24px; color: var(--text-strong); }
.report-summary span { color: var(--muted); font-size: 13px; }

.guide-toolbar { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.guide-paper { max-width: 900px; margin: auto; background: var(--panel); padding: 50px 60px; box-shadow: var(--shadow); border: 1px solid var(--line); border-radius: 16px; }
.guide-paper header { display: flex; justify-content: space-between; border-bottom: 3px solid var(--blue); padding-bottom: 15px; margin-bottom: 20px; color: var(--muted); font-size: 12px; letter-spacing: 1px; }
.guide-paper h2 { color: var(--cyan); margin-top: 0; }
.guide-paper h3 { margin-top: 28px; }
.guide-paper p, .guide-paper li { line-height: 1.7; }
.guide-paper footer { margin-top: 30px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); padding-top: 14px; }

.modal { position: fixed; inset: 0; background: var(--modal-scrim); display: none; place-items: center; z-index: 100; padding: 20px; }
.modal.show { display: grid; }
.modal-card { background: var(--overlay-panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); width: min(680px, 100%); max-height: 90vh; overflow: auto; }
.modal-head { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 17px; }
.modal-head button { border: none; background: none; font-size: 20px; color: var(--muted); }
.detail-grid { padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.detail-grid div { display: grid; gap: 4px; }
.detail-grid span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.detail-grid strong { font-size: 14px; word-break: break-word; }
.items-block { padding: 0 22px 22px; }
.items-block h4 { margin: 0 0 10px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

.toast { position: fixed; right: 25px; bottom: 25px; background: var(--overlay-panel); border: 1px solid rgba(34, 197, 94, .35); color: var(--text-strong); padding: 13px 18px; border-radius: 10px; box-shadow: var(--shadow); z-index: 150; display: none; }
.toast.show { display: block; }
.toast.error { border-color: rgba(239, 68, 68, .4); }

/* ---------- Site Status Board (grouped by solution, company, branch) ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.section-head h3 { margin: 0; font-size: 15.5px; }
.section-head a { color: var(--cyan); text-decoration: none; font-weight: 600; font-size: 13px; }

.solution-groups { display: flex; flex-direction: column; gap: 16px; }
.solution-group { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--tone, var(--blue)); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.solution-group-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; }
.solution-group-id { display: flex; align-items: center; gap: 13px; }
.solution-group-id .solution-icon { width: 36px; height: 36px; font-size: 16px; }
.solution-group-id strong { font-size: 15px; display: block; }
.solution-group-id span { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }

.health-ring {
  --pct: 100; --ring: var(--success);
  width: 46px; height: 46px; border-radius: 50%; position: relative; flex: none;
  background: conic-gradient(var(--ring) calc(var(--pct) * 1%), var(--line) 0);
}
.health-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--panel); }
.health-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--text-strong); }

.company-group { display: flex; flex-direction: column; }
.company-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 10px; padding: 10px 22px 6px;
}
.company-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

details.site-row { border-top: 1px solid var(--line); }
details.site-row summary {
  display: grid; grid-template-columns: 18px 1.6fr repeat(3, 60px) 90px 80px 16px;
  align-items: center; gap: 14px; padding: 13px 22px; cursor: pointer; list-style: none;
}
details.site-row summary::-webkit-details-marker { display: none; }
details.site-row:hover summary, details[open].site-row summary { background: var(--hover-overlay); }

.collector-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none; }
.collector-dot.offline { background: var(--fail); }
.collector-dot.unknown { background: var(--neutral); }

.site-id strong { font-size: 13.5px; display: block; }
.site-id span { font-size: 11.5px; color: var(--muted); }

.row-metric { text-align: right; }
.row-metric span.k { display: block; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.row-metric strong { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.row-metric.success strong { color: var(--success-text); }
.row-metric.fail strong { color: var(--fail-text); }

.spark { display: flex; align-items: flex-end; gap: 2px; height: 22px; justify-content: flex-end; }
.spark i { width: 4px; border-radius: 1px; background: var(--line); display: block; }
.spark i.success { background: var(--success); }
.spark i.warning { background: var(--warning); }
.spark i.fail { background: var(--fail); }

.chevron { justify-self: end; color: var(--muted); font-size: 11px; transition: transform .15s ease; }
details[open].site-row .chevron { transform: rotate(180deg); color: var(--cyan); }

.site-row-detail { padding: 4px 22px 18px 54px; }
.job-console-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb,var(--bg-2) 72%,transparent); }

.job-mini-table { width: 100%; min-width: 1040px; border-collapse: collapse; font-size: 11.5px; }
.job-mini-table th {
  text-align: left; padding: 9px 10px; font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line);
}
.job-mini-table th.num, .job-mini-table td.num { text-align: right; }
.job-mini-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.job-mini-table tbody tr { transition: background .16s ease; }
.job-mini-table tbody tr:hover { background: var(--hover-overlay); }
.job-mini-table tr:last-child td { border-bottom: none; }
.job-mini-table td.name { min-width: 170px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.job-mini-table td.name strong { display: block; color: var(--text-strong); }
.job-mini-table td.name small { display: block; font-weight: 400; color: var(--muted); font-size: 10px; }
.job-mini-table td.num { font-family: var(--font-mono); color: var(--muted); white-space: nowrap; }
.job-mini-table td.schedule { min-width: 105px; color: var(--muted); white-space: nowrap; }
.job-type-badge { display: inline-flex; align-items: center; white-space: nowrap; padding: 4px 8px; border: 1px solid color-mix(in srgb,var(--tone,var(--cyan)) 45%,var(--line)); border-radius: 999px; color: var(--tone,var(--cyan)); font: 600 9.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .03em; }
.job-path { min-width: 235px; }
.job-path > span { display: inline-grid; gap: 2px; max-width: 100px; vertical-align: middle; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-path b { color: var(--muted); font-size: 8.5px; text-transform: uppercase; letter-spacing: .04em; }
.job-path i { display: inline-block; margin: 0 8px; color: var(--tone,var(--cyan)); font-style: normal; }
.pill.sm { padding: 2px 8px; font-size: 10.5px; }

@media (prefers-reduced-motion: reduce) { .chevron { transition: none; } }

@media (max-width: 860px) {
  details.site-row summary { grid-template-columns: 18px 1fr auto auto; }
  details.site-row summary > :nth-child(3), details.site-row summary > :nth-child(4), .spark { display: none; }
}

@media (max-width: 1000px) {
  .app-layout { grid-template-columns: 76px 1fr; }
  .sidebar { padding: 20px 8px; }
  .sidebar .brand span, .sidebar .nav-item span, .sidebar .nav-label, .sidebar-foot { display: none; }
  .sidebar .brand { margin-left: 6px; justify-content: center; }
  .sidebar .nav-item { justify-content: center; }
  .content-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1280px) {
  .report-options { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 650px) {
  .topbar { padding: 12px 16px; }
  .page-content { padding: 20px 15px; }
  .metrics { grid-template-columns: 1fr; }
  .page-heading { display: block; }
  .guide-paper { padding: 30px 22px; }
  .notification-panel { right: 12px; width: calc(100vw - 24px); }
  .detail-grid { grid-template-columns: 1fr; }
  .report-options { grid-template-columns: 1fr; }
  .report-options .btn { width: 100%; justify-content: center; }
  .site-row-detail { padding-left: 18px; padding-right: 18px; }
}

/* คู่มือสำหรับผู้ดูระบบไม่แสดงในเมนูของผู้ใช้ทั่วไป */
body[data-page="guide"] a[href*="admin-guide"] {
  display: none !important;
}

/* Cyber Dark Luxury Enterprise refinement */
:root {
  --bg: #090d16;
  --bg-2: #0b1220;
  --panel: rgba(15, 23, 42, .76);
  --panel-2: rgba(20, 31, 52, .82);
  --line: rgba(255, 255, 255, .085);
  --success: #10b981;
  --success-text: #34d399;
  --blue: #0ea5e9;
  --blue-soft: #38bdf8;
  --cyan: #38bdf8;
}
:root:not([data-theme="light"]) body {
  background: radial-gradient(circle at 78% -6%, rgba(14,165,233,.16), transparent 35%), radial-gradient(circle at 5% 90%, rgba(139,92,246,.09), transparent 28%), linear-gradient(145deg,#090d16,#0f172a);
  background-attachment: fixed;
}
:root:not([data-theme="light"]) .topbar { background: rgba(9,13,22,.72); backdrop-filter: blur(18px) saturate(130%); }
.metric, .card, .solution-group, .filters, .site-card, .guide-paper { backdrop-filter: blur(16px) saturate(125%); }
.metric { position: relative; overflow: hidden; border-top-width: 1px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.metric::after { content: ""; position: absolute; width: 110px; height: 110px; right: -46px; top: -48px; border-radius: 50%; background: var(--blue); filter: blur(36px); opacity: .11; pointer-events: none; }
.metric:hover { transform: translateY(-3px); border-color: color-mix(in srgb,var(--blue) 45%,var(--line)); box-shadow: 0 24px 65px rgba(0,0,0,.32); }
.btn { transition: transform .14s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease; }
.btn:active, .preset-btn:active, .icon-btn:active { transform: scale(.975); }
.btn.primary { background: linear-gradient(135deg,#0284c7,#0ea5e9 60%,#38bdf8); border-color:#38bdf8; box-shadow:0 10px 28px rgba(14,165,233,.18),inset 0 1px rgba(255,255,255,.18); }
.btn.primary:hover { box-shadow: 0 14px 34px rgba(14,165,233,.28); }
.site-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.site-card { background: linear-gradient(145deg,rgba(17,28,48,.82),rgba(10,18,31,.78)); border-radius:16px; transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; overflow:hidden; }
.site-card:hover { border-color:color-mix(in srgb,var(--blue) 48%,var(--line)); transform:translateY(-4px); box-shadow:0 26px 70px rgba(0,0,0,.34),0 0 28px rgba(14,165,233,.07); }
.collector { display:inline-flex;align-items:center;gap:6px; }

/* ---------- Viewer NOC command center ---------- */
.noc-heading { align-items: center; margin-bottom: 24px; }
.noc-heading h2 { font-size: clamp(30px, 3vw, 42px); font-style: italic; line-height: 1; letter-spacing: -1.5px; }
.noc-heading h2 em { color: var(--blue-soft); font-style: inherit; text-shadow: 0 0 30px rgba(56,189,248,.26); }
.heading-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.telemetry-chip { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border-strong); background: rgba(7,16,29,.76); border-radius: 999px; padding: 7px 13px; color: var(--muted); font: 600 10px/1 var(--font-mono); letter-spacing: .08em; white-space: nowrap; }
.telemetry-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 12px var(--success); animation: telemetry-pulse 1.8s ease-in-out infinite; }
.telemetry-chip b { color: var(--text-strong); font-weight: 600; }
.telemetry-chip.small { min-height: 29px; padding: 5px 9px; font-size: 9px; color: var(--cyan); }
@keyframes telemetry-pulse { 50% { opacity: .38; box-shadow: 0 0 3px var(--success); } }

.noc-metrics { grid-template-columns: repeat(6,minmax(125px,1fr)); }
.noc-metrics .metric { min-height: 132px; padding: 17px 18px; }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.metric-icon { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--blue) 48%,var(--line)); border-radius: 50%; color: var(--blue-soft); font: 700 15px/1 var(--font-mono); }
.metric.green .metric-icon { color: var(--success-text); border-color: color-mix(in srgb,var(--success) 48%,var(--line)); }
.metric.purple .metric-icon { color: #a78bfa; border-color: rgba(167,139,250,.42); }
.metric.amber .metric-icon { color: var(--warning-text); border-color: color-mix(in srgb,var(--warning) 48%,var(--line)); }
.metric.red .metric-icon { color: var(--fail-text); border-color: color-mix(in srgb,var(--fail) 48%,var(--line)); }
.metric.cyan .metric-icon { color: var(--cyan); border-color: color-mix(in srgb,var(--cyan) 48%,var(--line)); }
.metric.red::after { background: var(--fail); }
.metric.amber::after { background: var(--warning); }
.metric.purple::after { background: var(--violet); }
.metric.green::after { background: var(--success); }

.ops-health-panel { display: grid; grid-template-columns: minmax(0,2.3fr) minmax(280px,1fr); margin-bottom: 18px; overflow: hidden; }
.health-gauges { display: grid; grid-template-columns: repeat(4,minmax(130px,1fr)); gap: 12px; align-items: center; padding: 25px 22px; }
.ops-gauge { min-width: 0; text-align: center; }
.ops-gauge-ring { --gauge: 0; --gauge-color: var(--cyan); width: 116px; height: 116px; margin: auto; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(var(--gauge-color) calc(var(--gauge)*1%),rgba(255,255,255,.055) 0); filter: drop-shadow(0 0 14px color-mix(in srgb,var(--gauge-color) 18%,transparent)); }
.ops-gauge-ring::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle at 50% 35%,rgba(255,255,255,.045),transparent 55%),var(--bg-2); border: 1px solid var(--line); }
.ops-gauge-ring > div { position: relative; width: 76px; min-width: 0; display: grid; place-items: center; z-index: 1; }
.ops-gauge-ring strong { color: var(--text-strong); font: 800 22px/1 var(--font-mono); }
.ops-gauge-ring span { width: 100%; margin-top: 7px; color: var(--muted); font: 700 7.5px/1.15 var(--font-mono); letter-spacing: .045em; text-align: center; text-transform: uppercase; white-space: normal; overflow-wrap: anywhere; }
.ops-gauge > p { margin: 10px 0 0; color: var(--muted); font-size: 11px; }
.ops-forecast { padding: 24px; border-left: 1px solid var(--line); background: linear-gradient(145deg,rgba(14,165,233,.07),rgba(139,92,246,.035)); display: flex; flex-direction: column; justify-content: center; }
.ops-forecast h3 { margin: 7px 0; font-size: 17px; }
.ops-forecast h3 strong { color: var(--warning-text); }
.ops-forecast > div > p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.forecast-meter { margin-top: 20px; }
.forecast-meter span { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font: 600 9px/1 var(--font-mono); }
.forecast-meter span strong { color: var(--cyan); font-size: 12px; }
.forecast-meter > i { display: block; height: 5px; margin-top: 8px; border-radius: 10px; background: linear-gradient(90deg,var(--cyan) var(--w),rgba(255,255,255,.07) var(--w)); box-shadow: 0 0 16px rgba(56,189,248,.18); }

.viewer-command-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(360px,1fr); gap: 18px; margin-bottom: 18px; }
.fleet-inventory,.solution-map { overflow: hidden; }
.fleet-list { padding: 8px 18px 14px; }
.fleet-row { display: grid; grid-template-columns: 9px minmax(180px,1fr) auto 82px 52px; gap: 12px; align-items: center; min-height: 58px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.fleet-row:last-child { border-bottom: none; }
.fleet-row:hover { background: var(--hover-overlay); }
.fleet-name { min-width: 0; }
.fleet-name strong,.fleet-name span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-name strong { font-size: 13px; }
.fleet-name span { margin-top: 3px; color: var(--muted); font-size: 10.5px; }
.fleet-activity { display: grid; gap: 5px; }
.fleet-activity i { height: 4px; width: var(--w); border-radius: 3px; background: linear-gradient(90deg,var(--success),var(--cyan)); box-shadow: 0 0 8px rgba(16,185,129,.25); }
.fleet-row time { color: var(--muted); font: 600 10px/1 var(--font-mono); text-align: right; }

.solution-map-canvas { min-height: 348px; position: relative; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 47%,rgba(14,165,233,.11),transparent 20%),linear-gradient(rgba(56,189,248,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.025) 1px,transparent 1px); background-size: auto,28px 28px,28px 28px; }
.map-orbit { position: absolute; width: 250px; height: 250px; border: 1px solid rgba(56,189,248,.14); border-radius: 50%; box-shadow: inset 0 0 40px rgba(56,189,248,.04); }
.map-orbit::before,.map-orbit::after { content: ''; position: absolute; background: rgba(56,189,248,.18); transform-origin: left center; width: 100px; height: 1px; left: 125px; top: 125px; }
.map-orbit::before { transform: rotate(25deg); }
.map-orbit::after { transform: rotate(155deg); }
.map-core { width: 92px; height: 92px; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(56,189,248,.5); border-radius: 22px; background: rgba(7,22,38,.94); box-shadow: 0 0 35px rgba(14,165,233,.2),inset 0 0 22px rgba(56,189,248,.08); }
.map-core > span { color: var(--cyan); font-size: 19px; }
.map-core strong { margin-top: 5px; font: 700 10px/1 var(--font-mono); color: var(--text-strong); }
.map-core small { margin-top: 4px; font: 600 7px/1 var(--font-mono); letter-spacing: .06em; color: var(--muted); }
.solution-map-nodes.solution-list { position: absolute; inset: 0; display: block; padding: 0; }
.solution-map-node { --node-tone: var(--cyan); position: absolute; z-index: 3; width: 122px; min-height: 72px; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 10px; color: inherit; text-decoration: none; border: 1px solid color-mix(in srgb,var(--node-tone) 42%,var(--line)); border-radius: 12px; background: rgba(9,18,32,.94); box-shadow: 0 10px 25px rgba(0,0,0,.23); }
.solution-map-node > span { grid-row: 1/3; width: 28px; height: 28px; display: grid; place-items: center; color: #fff; border-radius: 8px; background: var(--node-tone); box-shadow: 0 0 16px color-mix(in srgb,var(--node-tone) 24%,transparent); }
.solution-map-node strong { align-self: end; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.solution-map-node small { align-self: start; color: var(--muted); font: 600 8.5px/1.4 var(--font-mono); }
.solution-map-node.node-1 { left: 22px; top: 42px; }
.solution-map-node.node-2 { right: 22px; top: 42px; }
.solution-map-node.node-3 { left: 50%; bottom: 24px; transform: translateX(-50%); }
.solution-map-node:hover { filter: brightness(1.18); border-color: var(--node-tone); }
.action-center-card { margin-bottom: 18px; }

:root[data-theme="light"] .telemetry-chip { background: rgba(255,255,255,.82); }
:root[data-theme="light"] .ops-gauge-ring::before { background: #f8fbff; }
:root[data-theme="light"] .solution-map-node { background: rgba(255,255,255,.94); }
:root[data-theme="light"] .map-core { background: #f5faff; }

@media (max-width: 1280px) {
  .noc-metrics { grid-template-columns: repeat(3,1fr); }
  .health-gauges { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 1050px) {
  .ops-health-panel,.viewer-command-grid { grid-template-columns: 1fr; }
  .ops-forecast { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .noc-metrics { grid-template-columns: repeat(2,1fr); }
  .heading-actions { width: 100%; }
  .health-gauges { grid-template-columns: repeat(2,1fr); padding: 20px 10px; }
  .ops-gauge-ring { width: 98px; height: 98px; }
  .fleet-row { grid-template-columns: 9px 1fr auto; }
  .fleet-row .fleet-activity,.fleet-row time { display: none; }
  .viewer-command-grid { display: block; }
  .viewer-command-grid > .card + .card { margin-top: 16px; }
  .solution-map-node { width: 104px; }
}
@media (prefers-reduced-motion: reduce) { .telemetry-chip i { animation: none; } }
.collector::before { content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8; }
.collector.online::before { box-shadow:0 0 0 0 rgba(52,211,153,.55);animation:collectorPulse 2s infinite; }
.modal { place-items:stretch end;padding:0;backdrop-filter:blur(8px); }
.modal-card { background:rgba(9,19,34,.97);backdrop-filter:blur(20px);border:0;border-left:1px solid var(--line);border-radius:22px 0 0 22px;box-shadow:-30px 0 90px rgba(0,0,0,.45);width:min(640px,100%);height:100vh;max-height:none;animation:drawerIn .24s cubic-bezier(.16,1,.3,1); }
.table-pager { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:12px; }
.table-pager div { display:flex;gap:7px; }
.table-pager button { border:1px solid var(--border-strong);background:var(--input-bg);color:var(--text);padding:7px 11px;border-radius:8px; }
.table-pager button:disabled { opacity:.35;cursor:not-allowed; }
.guide-layout { display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;align-items:start; }
.guide-side { position:sticky;top:96px;background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:14px;backdrop-filter:blur(16px); }
.guide-side strong { display:block;padding:7px 8px;color:var(--cyan);font-size:11px;letter-spacing:.12em; }
.guide-side a { display:block;padding:9px 8px;border-radius:8px;text-decoration:none;color:var(--muted);font-size:13px; }
.guide-side a:hover { color:var(--text);background:var(--hover-overlay); }
@keyframes collectorPulse { 70% { box-shadow:0 0 0 7px rgba(52,211,153,0); } 100% { box-shadow:0 0 0 0 rgba(52,211,153,0); } }
@keyframes drawerIn { from { opacity:.5;transform:translateX(40px); } to { opacity:1;transform:none; } }
@media (max-width:1200px) { .site-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px) { .site-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .guide-layout{grid-template-columns:1fr}.guide-side{position:static;display:flex;overflow:auto}.guide-side strong{display:none}.guide-side a{white-space:nowrap} }
@media (max-width:650px) { .site-grid { grid-template-columns:1fr; } }

/* Final density overrides: keep the operations UI compact at desktop scale. */
@media (min-width:1001px) {
  .app-layout{grid-template-columns:220px minmax(0,1fr)}
  .sidebar{padding:20px 14px}
  .sidebar .brand{margin:0 7px 23px;gap:10px}.sidebar .brand-mark{width:38px;height:38px}
  .sidebar .nav-item{min-height:42px;padding:8px 10px;gap:10px;font-size:13px}
  .page-content{max-width:1540px;padding:22px 26px 46px}
}
.topbar{min-height:66px;padding:10px 26px}.topbar h1{font-size:17px}.topbar p{font-size:11px}
.page-heading{margin-bottom:17px}.page-heading h2{font-size:clamp(22px,2vw,29px)}.noc-heading h2{font-size:clamp(27px,2.35vw,35px)}
.metric{min-height:128px;padding:18px 19px}.metric strong{font-size:29px}.filters{padding:15px;gap:11px}
.site-grid{gap:14px}.site-card{min-height:0;padding:15px;border-radius:13px}.site-card h3{font-size:14px;line-height:1.35}.site-summary div{min-height:72px;padding:9px}
.guide-layout{grid-template-columns:190px minmax(0,1fr);gap:16px;width:min(1180px,100%);margin:0 auto}.guide-side{top:82px}.guide-side a{font-size:11px}
:root[data-theme="light"]{--bg:#edf3f8;--bg-2:#e8eef5;--panel:rgba(255,255,255,.91);--panel-2:#f1f5f9;--text:#334155;--text-strong:#0f172a;--muted:#64748b;--line:rgba(51,65,85,.13);--shadow:0 14px 35px rgba(50,75,105,.09);--sidebar-bg:linear-gradient(180deg,#fbfdff,#f3f7fb)}
:root[data-theme="light"] body{background:radial-gradient(circle at 82% -8%,rgba(14,165,233,.12),transparent 34%),linear-gradient(145deg,#edf3f8,#f8fafc)}
:root[data-theme="light"] .site-card,:root[data-theme="light"] .metric,:root[data-theme="light"] .card,:root[data-theme="light"] .solution-group,:root[data-theme="light"] .filters,:root[data-theme="light"] .guide-paper,:root[data-theme="light"] .guide-side{color:var(--text);background:rgba(255,255,255,.91);border-color:var(--line);box-shadow:var(--shadow)}
:root[data-theme="light"] .site-card h3,:root[data-theme="light"] .site-card strong,:root[data-theme="light"] .guide-paper h2,:root[data-theme="light"] .guide-paper h3{color:#0f172a}
:root[data-theme="light"] .site-summary div,:root[data-theme="light"] .guide-grid>div,:root[data-theme="light"] .status-guide-grid>div{background:#f2f6fa}
@media(max-width:900px){.guide-layout{grid-template-columns:1fr;width:100%}}

/* Prevent the local role switcher from covering topbar actions on narrow screens. */
@media(max-width:720px){
  .topbar{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 12px;height:auto;min-height:0;padding:10px 14px}
  .topbar>.mobile-menu{grid-column:1;grid-row:1}
  .topbar>div:not(.top-actions):not(.notification-panel){grid-column:2;grid-row:1;min-width:0}
  .topbar .top-actions{grid-column:1/-1;grid-row:2;width:100%;display:flex;justify-content:flex-end;align-items:center;gap:7px;min-width:0;flex-wrap:nowrap}
  .topbar .top-actions>.local-test-switcher.in-header{position:static!important;inset:auto!important;z-index:auto!important;margin:0!important;flex:0 0 auto;max-width:150px;box-shadow:none!important}
  .topbar .top-actions>.local-test-switcher.in-header span{display:none}
  .topbar .top-actions>.icon-btn{flex:0 0 40px}
  .topbar .top-actions>.btn{flex:0 1 auto;white-space:nowrap}
  .topbar .notification-panel{grid-column:1/-1;grid-row:3}
}
@media(max-width:430px){
  .topbar .top-actions>.btn.secondary{width:40px;padding-inline:0;font-size:0}
  .topbar .top-actions>.btn.secondary .refresh-icon{font-size:15px}
}

/* Keep multiple executions from the same reporting day visible (for example 12:00 and 18:00). */
.run-day-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line);color:var(--muted);background:rgba(34,211,238,.045);font-size:10px}
.run-day-strip strong{color:var(--cyan);font:700 9px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:620px){.run-day-strip{align-items:flex-start;flex-direction:column}}

/* ========================================================================== 
   PREMIUM OPERATIONS CONSOLE — final visual authority
   ========================================================================== */
:root{
  --green:var(--success);--amber:var(--warning);--red:var(--fail);
  --panel-hi:rgba(16,31,51,.88);--panel-lo:rgba(7,16,29,.94);
  --hairline:rgba(125,211,252,.13);--cyan-glow:rgba(34,211,238,.18);
  --premium-shadow:0 24px 70px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.04);
}
html{background:#040a12}
body{position:relative;background:
  radial-gradient(900px 520px at 88% -12%,rgba(14,165,233,.15),transparent 62%),
  radial-gradient(720px 520px at 18% 112%,rgba(99,102,241,.10),transparent 66%),
  linear-gradient(145deg,#050b14 0%,#07111e 48%,#040a12 100%);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.32;background-image:linear-gradient(rgba(125,211,252,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(125,211,252,.025) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,black,transparent 88%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(115deg,transparent 0 47%,rgba(56,189,248,.025) 48%,transparent 49% 100%)}

.app-layout{grid-template-columns:232px minmax(0,1fr)}
.main-shell{min-width:0;isolation:isolate}
.sidebar{padding:22px 14px;background:linear-gradient(180deg,rgba(7,20,34,.97),rgba(4,12,22,.995));border-right-color:rgba(125,211,252,.13);box-shadow:22px 0 70px rgba(0,0,0,.16)}
.sidebar::before{height:2px;background:linear-gradient(90deg,#22d3ee,#3b82f6 52%,#8b5cf6 82%,transparent)}
.sidebar::after{content:"";position:absolute;inset:90px 16px auto;height:160px;pointer-events:none;opacity:.28;background:radial-gradient(circle at 20% 20%,#22d3ee 0 1px,transparent 2px),radial-gradient(circle at 70% 35%,#60a5fa 0 1px,transparent 2px),linear-gradient(145deg,transparent 40%,rgba(34,211,238,.12) 40.5%,transparent 41%);background-size:90px 80px,110px 90px,100% 100%;mask-image:linear-gradient(black,transparent)}
.sidebar .brand{position:relative;z-index:1;margin:0 8px 31px;padding:4px 0}
.sidebar .brand-mark{width:40px;height:40px;border-radius:12px;color:#dffcff;border-color:rgba(103,232,249,.36);background:radial-gradient(circle at 65% 20%,rgba(96,165,250,.34),transparent 36%),linear-gradient(145deg,#102b40,#07131f 72%);box-shadow:0 12px 34px rgba(0,0,0,.3),0 0 28px rgba(34,211,238,.08)}
.sidebar .brand>span:last-child{font-weight:750;letter-spacing:-.02em}.sidebar .brand small{margin-top:5px;color:#65cbe4!important;font:600 8px/1 var(--font-mono)!important;letter-spacing:.18em!important}
.sidebar .nav-label{margin:0 11px 10px;color:#5e7891;font:700 8px/1 var(--font-mono);letter-spacing:.22em}
.sidebar nav{gap:5px;position:relative;z-index:1}
.sidebar .nav-item{position:relative;min-height:44px;padding:8px 10px;border:1px solid transparent;border-radius:10px;color:#8599ad;font-size:12px;font-weight:600;letter-spacing:.005em}
.sidebar .nav-item b{width:28px;height:28px;border-radius:8px;border-color:#213a53;color:#58cbe5;background:rgba(5,15,27,.52);font:700 8px/1 var(--font-mono)}
.sidebar .nav-item:hover{border-color:rgba(125,211,252,.1);background:rgba(125,211,252,.035);transform:translateX(2px)}
.sidebar .nav-item.active{color:#f2f9ff;border-color:rgba(56,189,248,.20);background:linear-gradient(90deg,rgba(14,165,233,.15),rgba(37,99,235,.06));box-shadow:inset 2px 0 #22d3ee,0 12px 30px rgba(0,0,0,.13)}
.sidebar .nav-item.active b{border-color:rgba(34,211,238,.35);color:#8debf4;box-shadow:inset 0 0 14px rgba(34,211,238,.05)}
.sidebar-foot{position:relative;z-index:1;padding:15px 7px 0}.theme-switch,.logout-btn{border-color:#223a51!important;background:rgba(6,17,30,.56)!important}

.topbar{min-height:72px;padding:12px 28px;border-bottom-color:var(--hairline);background:rgba(5,14,25,.74);backdrop-filter:blur(22px) saturate(145%);box-shadow:0 12px 40px rgba(0,0,0,.12)}
.topbar h1{font-size:15px;font-weight:700;letter-spacing:-.01em}.topbar p{font-size:10px;color:#6f849a}
.top-actions{gap:8px}.topbar .icon-btn,.topbar .btn.secondary{border-color:#233d56;background:rgba(8,20,35,.72);box-shadow:inset 0 1px rgba(255,255,255,.025)}
.page-content{max-width:1680px;padding:28px 32px 64px}
.page-heading{position:relative;margin-bottom:20px;padding:0 0 18px;border-bottom:1px solid rgba(125,211,252,.10)}
.page-heading::after{content:"";position:absolute;left:0;bottom:-1px;width:120px;height:1px;background:linear-gradient(90deg,#22d3ee,transparent)}
.page-heading h2{margin-top:6px;font-size:clamp(23px,2.1vw,31px);font-weight:760;letter-spacing:-.035em}.page-heading h2 em{color:#36cbed;font-style:italic;font-weight:780}
.page-heading>div>p:last-child{font-size:11px;color:#7d91a6}.eyebrow{color:#56d8ea;font:700 8px/1.2 var(--font-mono);letter-spacing:.22em}

.metric,.card,.solution-group,.filters,.site-card,.guide-paper,.guide-side{border-color:rgba(125,211,252,.13);background:linear-gradient(145deg,var(--panel-hi),var(--panel-lo));box-shadow:var(--premium-shadow);backdrop-filter:blur(18px) saturate(125%)}
.metrics{gap:11px}.noc-metrics{grid-template-columns:repeat(6,minmax(130px,1fr))}
.metric{min-height:118px;padding:17px 18px;border-radius:14px;overflow:hidden}
.metric::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:linear-gradient(180deg,transparent,var(--blue),transparent);opacity:.8}
.metric.green::before{background:linear-gradient(180deg,transparent,var(--success),transparent)}.metric.amber::before{background:linear-gradient(180deg,transparent,var(--warning),transparent)}.metric.red::before{background:linear-gradient(180deg,transparent,var(--fail),transparent)}.metric.purple::before{background:linear-gradient(180deg,transparent,var(--violet),transparent)}.metric.cyan::before{background:linear-gradient(180deg,transparent,var(--cyan),transparent)}
.metric p{font:700 8px/1.2 var(--font-mono);letter-spacing:.11em}.metric strong{margin:12px 0 7px;font:750 27px/1 var(--font-mono);letter-spacing:-.05em}.metric span{font-size:9px}.metric-icon{width:25px;height:25px;font-size:12px;border-radius:8px}
.card,.solution-group{border-radius:16px}.card-head{min-height:67px;padding:15px 18px;background:linear-gradient(90deg,rgba(255,255,255,.018),transparent);border-bottom-color:rgba(125,211,252,.10)}.card-head h3{margin-top:4px;font-size:14px;letter-spacing:-.015em}
.btn{min-height:38px;border-radius:9px;font-size:11px}.btn.primary{background:linear-gradient(115deg,#0369a1,#0284c7 55%,#22b8d6);border-color:#2bc6df;box-shadow:0 12px 30px rgba(14,165,233,.2),inset 0 1px rgba(255,255,255,.18)}

.ops-health-panel{grid-template-columns:minmax(0,2.5fr) minmax(260px,.9fr)}
.health-gauges{padding:24px 22px}.ops-gauge-ring{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--gauge-color) 18%,transparent))}.ops-forecast{background:linear-gradient(145deg,rgba(5,16,29,.2),rgba(26,32,58,.48));border-left-color:rgba(125,211,252,.12)}
.fleet-row{min-height:55px;padding-inline:16px}.fleet-row:hover{background:linear-gradient(90deg,rgba(34,211,238,.05),transparent)}
.solution-map-canvas{background:radial-gradient(circle at 50% 47%,rgba(14,165,233,.13),transparent 22%),linear-gradient(rgba(56,189,248,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.025) 1px,transparent 1px);background-size:auto,32px 32px,32px 32px}
.solution-map-node{border-radius:10px;background:rgba(5,15,28,.9);box-shadow:0 16px 38px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035);backdrop-filter:blur(12px)}
.map-core{box-shadow:0 0 0 8px rgba(34,211,238,.025),0 0 55px rgba(34,211,238,.13)}

.filters{padding:14px;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.22)}
.filters input,.filters select,.report-options input,.report-options select{min-height:40px;border-color:#25415c;border-radius:8px;background:rgba(4,14,26,.7);box-shadow:inset 0 1px 5px rgba(0,0,0,.18)}
.filters input:focus,.filters select:focus,.report-options input:focus,.report-options select:focus{outline:none;border-color:#22c8df;box-shadow:0 0 0 3px rgba(34,211,238,.09)}
.site-card{border-radius:15px;background:linear-gradient(150deg,rgba(15,30,50,.94),rgba(6,15,27,.96))}.site-card:hover{transform:translateY(-3px);box-shadow:0 25px 60px rgba(0,0,0,.34),0 0 0 1px rgba(34,211,238,.08)}
.site-summary div{border:1px solid rgba(125,211,252,.08);background:rgba(4,13,24,.48)}
.solution-group{border-left-width:2px}.solution-group-head{padding:15px 18px;background:linear-gradient(90deg,color-mix(in srgb,var(--tone) 7%,transparent),transparent 55%)}
.company-label{font-size:8px!important;letter-spacing:.14em!important}.site-row summary{min-height:62px}.site-row[open] summary{background:linear-gradient(90deg,rgba(34,211,238,.035),transparent)}

.table-wrap,.job-console-scroll{scrollbar-width:thin;scrollbar-color:#254c69 transparent}.table th,.job-mini-table th{position:sticky;top:0;z-index:2;background:#081725;color:#6f8aa3;font:700 8px/1.2 var(--font-mono);letter-spacing:.10em}.table td,.job-mini-table td{border-bottom-color:rgba(125,211,252,.09)}.table tbody tr:hover,.job-mini-table tbody tr:hover{background:linear-gradient(90deg,rgba(34,211,238,.045),transparent)}
.pill{border:1px solid currentColor;box-shadow:inset 0 0 12px color-mix(in srgb,currentColor 7%,transparent)}
.notification-panel,.modal-card{background:linear-gradient(155deg,rgba(15,31,51,.98),rgba(5,14,26,.99));border-color:#29455e;box-shadow:-32px 0 100px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.04)}
.toast{backdrop-filter:blur(16px);box-shadow:0 18px 50px rgba(0,0,0,.34)}

:root[data-theme="light"]{--bg:#dfe7ef;--bg-2:#d8e2ec;--panel:#f5f8fb;--panel-2:#e9eff5;--panel-hi:rgba(250,252,254,.96);--panel-lo:rgba(236,242,247,.96);--text:#334155;--text-strong:#07111f;--muted:#62748a;--line:rgba(15,39,64,.13);--hairline:rgba(15,82,120,.13);--premium-shadow:0 20px 55px rgba(42,67,91,.13),inset 0 1px #fff;--sidebar-bg:linear-gradient(180deg,#0a1a2a,#06121f)}
:root[data-theme="light"] body{background:radial-gradient(850px 500px at 88% -10%,rgba(14,165,233,.14),transparent 62%),linear-gradient(145deg,#dbe5ee,#eef3f7)}
:root[data-theme="light"] .sidebar{color:#dbeafe;background:linear-gradient(180deg,#091a2a,#06121f)}
:root[data-theme="light"] .sidebar .nav-item{color:#8da4b8}:root[data-theme="light"] .sidebar .nav-item.active{color:#f8fafc}
:root[data-theme="light"] .topbar{background:rgba(239,245,249,.82)}
:root[data-theme="light"] .solution-map-node{background:rgba(244,248,251,.96)}
:root[data-theme="light"] .table th,:root[data-theme="light"] .job-mini-table th{background:#e4ebf2;color:#496176}
:root[data-theme="light"] .filters input,:root[data-theme="light"] .filters select,:root[data-theme="light"] .report-options input,:root[data-theme="light"] .report-options select{background:#f7fafc;color:#1e293b}

@media(max-width:1280px){.noc-metrics{grid-template-columns:repeat(3,minmax(140px,1fr))}}
@media(max-width:1000px){.app-layout{grid-template-columns:1fr}.page-content{padding:22px 18px 52px}.sidebar{box-shadow:25px 0 70px rgba(0,0,0,.45)}}
@media(max-width:680px){.noc-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metric{min-height:108px;padding:14px}.page-heading{padding-bottom:15px}.page-heading h2{font-size:24px}}
@media(prefers-reduced-motion:no-preference){.page-content>section,.page-content>.guide-layout{animation:premium-enter .42s cubic-bezier(.16,1,.3,1) both}.page-content>section:nth-child(2){animation-delay:.04s}.page-content>section:nth-child(3){animation-delay:.08s}.page-content>section:nth-child(4){animation-delay:.12s}.collector-dot.online{animation:collectorPulse 2s infinite}.telemetry-chip i{animation:premium-live 1.8s ease-in-out infinite}}
@keyframes premium-enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes premium-live{50%{opacity:.35;box-shadow:0 0 2px currentColor}}

/* Backup timestamp and actionable failure context */
.backup-run-table{min-width:1260px}
.backup-time{min-width:175px;white-space:normal;font:600 10px/1.5 var(--font-mono);color:var(--text)}
.reason-cell{min-width:220px;max-width:360px;color:var(--muted);font-size:10px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.reason-cell.has-issue{color:var(--warning-text);font-weight:600}
tr:has(.pill.fail) .reason-cell.has-issue{color:var(--fail-text)}
@media(max-width:1400px){
  .backup-run-table{width:100%;min-width:900px;table-layout:fixed}
  .backup-run-table th:nth-child(1),.backup-run-table td:nth-child(1){width:24%}
  .backup-run-table th:nth-child(2),.backup-run-table td:nth-child(2){width:15%}
  .backup-run-table th:nth-child(3),.backup-run-table td:nth-child(3){width:11%}
  .backup-run-table th:nth-child(4),.backup-run-table td:nth-child(4){width:10%}
  .backup-run-table th:nth-child(5),.backup-run-table td:nth-child(5){width:22%}
  .backup-run-table th:nth-child(6),.backup-run-table td:nth-child(6){width:18%}
  .backup-run-table th:nth-child(7),.backup-run-table td:nth-child(7),
  .backup-run-table th:nth-child(8),.backup-run-table td:nth-child(8),
  .backup-run-table th:nth-child(9),.backup-run-table td:nth-child(9){display:none}
  .backup-time{min-width:0}
  .reason-cell{min-width:0;max-width:none}
}
@media(max-width:700px){.attention-list a{grid-template-columns:5px minmax(0,1fr);align-items:start}.attention-list time{grid-column:2;text-align:left}.attention-company{white-space:normal;overflow-wrap:anywhere}}
.site-issue{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start;margin-top:10px;padding:9px 10px;border:1px solid color-mix(in srgb,var(--warning) 28%,var(--line));border-radius:9px;background:var(--warning-wash)}
.site-issue>span{padding-top:1px;color:var(--warning-text);font:700 8px/1.4 var(--font-mono);letter-spacing:.07em;text-transform:uppercase}
.site-issue p{min-width:0;margin:0;color:var(--warning-text);font-size:10px;line-height:1.45;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.site-issue.fail{border-color:color-mix(in srgb,var(--fail) 30%,var(--line));background:var(--fail-wash)}
.site-issue.fail>span,.site-issue.fail p{color:var(--fail-text)}
.site-card:has(.site-issue) .btn.full{margin-top:10px}
:root[data-theme="light"] .site-issue{background:rgba(180,83,9,.08)}
:root[data-theme="light"] .site-issue.fail{background:rgba(220,38,38,.07)}

/* Progressive disclosure keeps the dashboard readable while History retains every event. */
.job-mini-table td.name{white-space:normal;line-height:1.35}
.job-mini-table .inline-issue{display:block;max-width:300px;margin-top:4px;color:var(--warning-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.job-mini-table .inline-issue.fail{color:var(--fail-text)}
.veeam-session-list{display:grid;gap:12px;padding-top:10px}
.veeam-session{overflow:hidden;border:1px solid var(--line);border-left:3px solid var(--neutral);border-radius:13px;background:linear-gradient(135deg,rgba(12,29,47,.78),rgba(7,20,34,.5));box-shadow:0 12px 26px rgba(0,0,0,.14)}
.veeam-session.success{border-left-color:var(--success)}.veeam-session.warning{border-left-color:var(--warning)}.veeam-session.fail{border-left-color:var(--fail)}
.veeam-session>header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(125,211,252,.1);background:linear-gradient(90deg,rgba(34,197,94,.045),transparent 58%)}
.veeam-session>header h4{margin:0;color:var(--text-strong);font-size:14px;line-height:1.35}.veeam-session>header p{margin:3px 0 0;color:var(--muted);font:600 9px/1.2 var(--font-mono);letter-spacing:.08em}
.session-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:1px;background:var(--line)}
.session-fact{display:grid;gap:5px;min-height:65px;padding:12px 16px;background:rgba(7,20,34,.86)}.session-fact span,.session-route small{color:var(--muted);font-size:10px}.session-fact strong{color:var(--text-strong);font:600 12px/1.35 var(--font-mono)}
.session-route{display:flex;align-items:center;gap:14px;padding:13px 16px;border-top:1px solid rgba(125,211,252,.08)}.session-route span{display:grid;gap:3px;min-width:0}.session-route strong{color:var(--text);font-size:12px;overflow-wrap:anywhere}.session-route i{color:var(--cyan);font-style:normal}
.session-issue{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;margin:0 16px 13px;padding:10px 12px;border:1px solid rgba(245,158,11,.2);border-radius:9px;color:var(--warning-text);background:rgba(245,158,11,.055);font-size:11px}.session-issue.fail{border-color:rgba(239,68,68,.24);color:var(--fail-text);background:rgba(239,68,68,.06)}
.protected-list{margin:0 16px 15px;border:1px solid var(--line);border-radius:10px;overflow:hidden}.protected-head,.protected-row{display:grid;align-items:center;gap:10px;padding:9px 11px}.protected-head{grid-template-columns:1fr auto;color:var(--muted);background:rgba(125,211,252,.045);font-size:10px}.protected-head strong{color:var(--text-strong)}
.protected-row{grid-template-columns:30px minmax(0,1fr) auto auto;border-top:1px solid var(--line)}.protected-icon{display:grid;place-items:center;width:28px;height:24px;border:1px solid rgba(34,211,238,.22);border-radius:7px;color:var(--cyan);font:700 8px/1 var(--font-mono)}.protected-row div{min-width:0}.protected-row strong{display:block;color:var(--text-strong);font-size:11px}.protected-row small{display:block;margin-top:3px;color:var(--muted);font-size:9px}.protected-row>b{color:var(--text);font:600 10px/1 var(--font-mono);white-space:nowrap}
:root[data-theme="light"] .veeam-session{background:linear-gradient(135deg,#fff,#f7fafc)}:root[data-theme="light"] .session-fact{background:#f8fafc}:root[data-theme="light"] .veeam-session>header{background:linear-gradient(90deg,rgba(22,163,74,.06),transparent)}
@media(max-width:700px){.veeam-session>header{grid-template-columns:auto 1fr}.veeam-session>header>.pill{grid-column:1/-1;width:max-content}.session-route{align-items:flex-start;flex-direction:column}.session-route i{transform:rotate(90deg)}.session-issue{grid-template-columns:1fr}.protected-row{grid-template-columns:30px 1fr auto}.protected-row>b{grid-column:2/3}.site-row-detail{padding-left:12px;padding-right:12px}}
.platform-session-list{display:grid;gap:14px;padding-top:10px}
.platform-session{overflow:hidden;border:1px solid var(--line);border-left:3px solid var(--neutral);border-radius:14px;background:linear-gradient(145deg,rgba(10,28,46,.84),rgba(6,18,31,.58));box-shadow:0 14px 30px rgba(0,0,0,.14)}
.platform-session.success{border-left-color:var(--success)}.platform-session.warning{border-left-color:var(--warning)}.platform-session.fail{border-left-color:var(--fail)}
.platform-session>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 17px;border-bottom:1px solid rgba(125,211,252,.1);background:radial-gradient(circle at 0 0,rgba(56,189,248,.09),transparent 45%)}
.platform-session>header h4{margin:4px 0 0;color:var(--text-strong);font-size:14px;line-height:1.35}.platform-kicker{color:var(--cyan);font:700 9px/1.2 var(--font-mono);letter-spacing:.14em}
.platform-items{border-top:1px solid rgba(125,211,252,.1)}
.platform-item{display:grid;grid-template-columns:minmax(210px,1fr) minmax(280px,1.4fr) auto;gap:14px;align-items:center;padding:11px 17px;border-top:1px solid rgba(125,211,252,.07)}.platform-item:first-of-type{border-top:0}
.platform-item-id{display:flex;align-items:center;gap:10px;min-width:0}.platform-item-id>span{display:grid;place-items:center;width:31px;height:31px;border:1px solid rgba(56,189,248,.25);border-radius:8px;color:var(--cyan);background:rgba(14,165,233,.08);font:700 9px/1 var(--font-mono)}
.platform-item-id div{min-width:0}.platform-item-id strong,.platform-item-id small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.platform-item-id strong{color:var(--text-strong);font-size:12px}.platform-item-id small{margin-top:3px;color:var(--muted);font:600 9px/1.2 var(--font-mono)}
.platform-item-time{min-width:0;color:var(--muted);font-size:10px}.platform-item-time span,.platform-item-time b{display:block}.platform-item-time b{margin-top:4px;color:var(--text);font:700 11px/1.2 var(--font-mono)}
:root[data-theme="light"] .platform-session{background:linear-gradient(145deg,#fff,#f6f9fc)}:root[data-theme="light"] .platform-session>header{background:radial-gradient(circle at 0 0,rgba(14,165,233,.09),transparent 48%)}
@media(max-width:760px){.platform-item{grid-template-columns:1fr auto}.platform-item-time{grid-column:1/-1;padding-left:41px}.platform-session>header{align-items:flex-start}}
.nas-summary-table{min-width:760px;font-size:12px}
.nas-summary-table .nas-time{width:160px;white-space:nowrap}
.nas-summary-table .nas-time strong,.nas-summary-table .nas-time small{display:block}
.nas-summary-table .nas-time strong{color:var(--text-strong);font:700 14px/1.2 var(--font-mono)}
.nas-summary-table .nas-time small{margin-top:4px;color:var(--muted);font-size:10px}
.nas-summary-table td.name{min-width:240px;max-width:360px}
.nas-summary-table .nas-result{min-width:260px;color:var(--muted);line-height:1.45}
.nas-summary-table .nas-result.has-issue{color:var(--warning-text)}
.nas-summary-table .nas-result strong,.nas-summary-table .nas-result span{display:block}.nas-summary-table .nas-result strong{margin-bottom:3px;font-size:10px}.nas-summary-table .nas-result span{color:var(--text);font-size:11px}
.nas-summary-table .nas-cycle-row{border-left:3px solid transparent}
.nas-summary-table .nas-cycle-row:has(.pill.success){border-left-color:var(--success)}
.nas-summary-table .nas-cycle-row:has(.pill.warning){border-left-color:var(--warning)}
.nas-summary-table .nas-cycle-row:has(.pill.fail){border-left-color:var(--fail)}
.solution-empty-state{display:flex;align-items:center;gap:16px;padding:20px;border-top:1px solid var(--line);background:linear-gradient(90deg,rgba(14,165,233,.055),transparent)}
.solution-empty-state>span{display:grid;place-items:center;min-width:66px;height:30px;border:1px solid var(--cyan);border-radius:999px;color:var(--cyan);font:700 9px/1 var(--font-mono);letter-spacing:.08em}
.solution-empty-state div{min-width:0;flex:1}.solution-empty-state strong{display:block;color:var(--text-strong);font-size:13px}.solution-empty-state p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.5}
.solution-empty-state a{color:var(--cyan);font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap}
@media(max-width:700px){.solution-empty-state{align-items:flex-start;flex-wrap:wrap}.solution-empty-state div{flex-basis:calc(100% - 86px)}.solution-empty-state a{margin-left:82px}}
.run-list-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;border-top:1px solid var(--line);background:rgba(3,12,22,.26);color:var(--muted);font-size:9px}
.run-list-footer a{color:var(--cyan);font-weight:700;text-decoration:none;white-space:nowrap}.run-list-footer a:hover{text-decoration:underline}
@media(max-width:620px){.run-list-footer{align-items:flex-start;flex-direction:column}}

/* Separate same-day backups by their real repository/storage destination. */
.job-mini-table .repository-group td{padding:0;border-bottom-color:rgba(125,211,252,.14);background:linear-gradient(90deg,rgba(14,165,233,.10),rgba(14,165,233,.025) 62%,transparent)}
.job-mini-table .repository-group td>div{display:grid;grid-template-columns:28px minmax(130px,auto) minmax(180px,1fr) auto;gap:10px;align-items:center;min-height:42px;padding:7px 11px}
.repository-icon{width:26px;height:26px;display:grid;place-items:center;border:1px solid rgba(34,211,238,.27);border-radius:7px;color:var(--cyan);background:rgba(3,13,24,.48);font:700 11px/1 var(--font-mono)}
.repository-group strong{color:var(--text-strong);font-size:11px;letter-spacing:.015em}.repository-group small{color:var(--muted);font:600 9px/1.35 var(--font-mono)}
.repository-group.warning td{background:linear-gradient(90deg,rgba(245,158,11,.09),rgba(245,158,11,.018) 62%,transparent)}.repository-group.fail td{background:linear-gradient(90deg,rgba(239,68,68,.10),rgba(239,68,68,.018) 62%,transparent)}
.repository-group.warning .repository-icon{border-color:rgba(245,158,11,.3);color:var(--warning-text)}.repository-group.fail .repository-icon{border-color:rgba(239,68,68,.32);color:var(--fail-text)}
@media(max-width:700px){.job-mini-table .repository-group td>div{grid-template-columns:28px 1fr auto}.repository-group small{display:none}}

/* Stable one-page status board: details open in a drawer and never push the page. */
.solution-tabs{display:flex;align-items:center;gap:7px;overflow-x:auto;padding:4px}
.solution-tab{display:flex;align-items:center;gap:8px;min-height:36px;padding:7px 12px;border:1px solid var(--line);border-radius:10px;background:var(--input-bg);color:var(--muted);font:700 10px/1 var(--font-mono);white-space:nowrap;cursor:pointer}
.solution-tab>span{width:7px;height:7px;border-radius:50%;background:var(--tab-tone);box-shadow:0 0 12px color-mix(in srgb,var(--tab-tone) 60%,transparent)}
.solution-tab.active{color:var(--text-strong);border-color:color-mix(in srgb,var(--cyan) 55%,var(--line));background:rgba(14,165,233,.09)}
.solution-group{display:none}.solution-group.active{display:block}
.company-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line)}
.company-group{min-width:0;background:var(--panel)}
article.site-row{border-top:1px solid var(--line)}
.site-row-summary{appearance:none;width:100%;display:grid;grid-template-columns:18px minmax(170px,1fr) auto 20px;align-items:center;gap:12px;min-height:72px;padding:12px 18px;border:0;background:transparent;color:var(--text);text-align:left;cursor:pointer}
.site-row-summary:hover,.site-row-summary:focus-visible{background:linear-gradient(90deg,rgba(34,211,238,.07),transparent);outline:none}
.site-row-summary .chevron{display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--line);border-radius:6px;color:var(--cyan)}
.row-status-counts{display:flex;align-items:center;justify-content:flex-end;gap:5px}.row-status-counts span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;padding:5px 6px;border:1px solid var(--line);border-radius:8px;background:rgba(100,116,139,.06);font:700 9px/1 var(--font-mono)}.row-status-counts .success{color:var(--success-text)}.row-status-counts .warning{color:var(--warning-text)}.row-status-counts .fail{color:var(--fail-text)}.row-status-counts .neutral{color:var(--neutral-text)}
.site-detail-modal{width:min(980px,calc(100vw - 300px))}
.site-detail-modal .modal-head{position:sticky;top:0;z-index:10;background:rgba(9,19,34,.98);backdrop-filter:blur(18px)}
.site-detail-modal .session-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
.site-detail-drawer{padding:18px 20px 30px}
body.modal-open{overflow:hidden}

.activity-list{display:grid}
.activity-row{position:relative;display:grid;grid-template-columns:5px minmax(150px,.9fr) minmax(210px,1.35fr) minmax(190px,1fr) auto auto;align-items:center;gap:14px;min-height:76px;padding:12px 16px;border-top:1px solid var(--line)}
.activity-row:first-child{border-top:0}.activity-row:hover{background:linear-gradient(90deg,rgba(34,211,238,.04),transparent)}
.activity-signal{align-self:stretch;width:3px;border-radius:3px;background:var(--neutral)}.activity-row.success .activity-signal{background:var(--success)}.activity-row.warning .activity-signal{background:var(--warning)}.activity-row.fail .activity-signal{background:var(--fail)}
.activity-site strong,.activity-site small,.activity-job strong,.activity-job small{display:block}.activity-site strong,.activity-job strong{color:var(--text-strong);font-size:12px}.activity-site small{margin-top:4px;color:var(--muted);font:600 9px/1.2 var(--font-mono);letter-spacing:.06em}.activity-reason{margin-top:5px;color:var(--warning-text);line-height:1.35}
.activity-meta{display:flex;flex-wrap:wrap;gap:4px 10px;color:var(--muted);font:600 10px/1.35 var(--font-mono)}.activity-meta span+span:before{content:'·';margin-right:10px;color:var(--line)}
.activity-empty{padding:28px}

:root[data-theme="light"] .company-directory{background:#d8e1ea}:root[data-theme="light"] .site-detail-modal .modal-head{background:rgba(248,250,252,.98)}
:root[data-theme="light"] .modal{background:rgba(51,65,85,.36)}
:root[data-theme="light"] .modal-card{color:#334155;background:linear-gradient(155deg,rgba(248,250,252,.99),rgba(237,243,248,.99));border-color:rgba(51,65,85,.15);box-shadow:-28px 0 70px rgba(51,65,85,.18)}
.site-card.compact{display:flex;flex-direction:column;gap:9px;min-height:225px}.site-card.compact h3{margin:2px 0 0}.site-card.compact>p{margin:0}.site-card.compact .site-solutions{margin:0}.site-card.compact .btn{margin-top:auto}
.site-compact-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.site-compact-summary time{color:var(--muted);font:600 10px/1.35 var(--font-mono);text-align:right}
@media(max-width:1180px){.company-directory{grid-template-columns:1fr}.site-detail-modal{width:min(860px,calc(100vw - 90px))}.activity-row{grid-template-columns:5px minmax(140px,.8fr) minmax(190px,1.2fr) minmax(160px,1fr) auto}.activity-row>.link-btn{grid-column:2/-1;justify-self:end}}
@media(max-width:760px){.solution-board-section .section-head{align-items:flex-start;flex-direction:column}.solution-tabs{width:100%}.site-row-summary{grid-template-columns:14px 1fr auto;gap:10px;padding:12px}.row-status-counts{grid-column:2/4;justify-content:flex-start}.site-row-summary .chevron{grid-column:3;grid-row:1}.site-detail-modal{width:100%;border-radius:0}.site-detail-modal .session-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.site-detail-drawer{padding:12px}.activity-row{grid-template-columns:4px 1fr auto;gap:9px;min-height:0}.activity-site,.activity-job,.activity-meta{grid-column:2/4}.activity-row>.pill{grid-column:2}.activity-row>.link-btn{grid-column:3;grid-row:auto}.activity-meta{font-size:9px}}

@media(max-width:900px){.guide-side{flex-wrap:wrap;overflow:visible}}

/* Notification controls and correct light-theme contrast. */
.panel-title>div{display:flex;align-items:center;gap:7px}
.panel-title .clear-notifications{min-height:28px;padding:5px 9px;border:1px solid var(--border-strong);border-radius:7px;color:var(--cyan);background:rgba(34,211,238,.055);font-size:9px;font-weight:700;cursor:pointer}
.panel-title .clear-notifications:hover{border-color:var(--cyan);background:rgba(34,211,238,.11)}
.panel-title .close-notifications{width:28px;height:28px;padding:0;border-radius:7px;cursor:pointer}
.notification-count[hidden]{display:none}
:root[data-theme="light"] .notification-panel{color:#24364a;background:linear-gradient(155deg,rgba(250,252,254,.99),rgba(231,238,245,.99));border-color:rgba(32,72,104,.22);box-shadow:0 28px 80px rgba(36,58,78,.25),inset 0 1px #fff}
:root[data-theme="light"] .notification-panel .panel-title{color:#0b1d2f;border-bottom-color:rgba(32,72,104,.14)}
:root[data-theme="light"] .notification-item{color:#17283b;border-bottom-color:rgba(32,72,104,.12)}
:root[data-theme="light"] .notification-item:hover{background:rgba(14,116,144,.065)}
:root[data-theme="light"] .notification-item p{color:#5c7085}
:root[data-theme="light"] .panel-title .clear-notifications{color:#036c83;border-color:rgba(3,105,128,.22);background:rgba(6,182,212,.07)}
:root[data-theme="light"] .panel-title .close-notifications{color:#536a80}

/* Preserve the original inline board. Only a user's summary click opens a site. */
.solution-board-section{overflow-anchor:none}
.solution-board-section .solution-group{display:block}
.solution-board-section .company-directory{display:block;background:transparent}
.board-hint{font-size:12px;color:var(--muted)}
.main-shell,.page-content,.card,.solution-group,.site-row,.site-row-detail{min-width:0}
.site-id strong{font-size:15px;overflow-wrap:anywhere}
.site-id span,.row-metric span.k,.company-label{font-size:12px}
.row-metric strong{font-size:15px}
details.site-row summary{grid-template-columns:14px minmax(160px,1fr) repeat(3,64px) 60px 60px 24px;min-height:82px}
details.site-row summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px}
details.site-row summary time{font-size:13px;color:var(--muted)}
details.site-row .chevron{font-size:20px;line-height:24px}
.job-console-scroll{overflow:visible}
.job-mini-table,.backup-run-table,.nas-summary-table{width:100%;min-width:0;table-layout:fixed;font-size:14px}
.job-mini-table th{font-size:11px;white-space:normal;overflow-wrap:anywhere;letter-spacing:0}
.job-mini-table td,.job-mini-table td.name,.job-mini-table td.num,.job-mini-table td.schedule{min-width:0;max-width:none;white-space:normal;overflow-wrap:anywhere;overflow:visible;text-overflow:clip}
.job-mini-table td.name small,.job-path b{font-size:12px}
.job-mini-table:not(.nas-summary-table) th:nth-child(2){width:18%}
.job-mini-table:not(.nas-summary-table) th:nth-child(3){width:22%}
.job-mini-table:not(.nas-summary-table) th:nth-child(6){width:15%}
.nas-summary-table th:nth-child(2){width:22%}
.nas-summary-table th:nth-child(4){width:32%}
.job-path>span{display:block;max-width:none;white-space:normal;overflow-wrap:anywhere}
.job-path i{margin:3px 0}
.job-type-badge{white-space:normal;line-height:1.4;font-size:10px}
.job-mini-table .repository-group>td>div{flex-wrap:wrap}
.activity-row{grid-template-columns:4px minmax(0,.9fr) minmax(0,1.3fr) minmax(0,1fr) auto auto}
.activity-site,.activity-job,.activity-meta{min-width:0;overflow-wrap:anywhere}
.activity-site strong,.activity-job strong{font-size:14px}
.activity-site small,.activity-meta,.activity-reason{font-size:12px}
.session-fact span,.protected-row small,.session-route small{font-size:12px}
.session-fact strong,.protected-row strong,.session-route strong{font-size:14px;overflow-wrap:anywhere}
.filters{min-width:0;flex-wrap:wrap}
.job-mini-table .inline-issue{max-width:none;white-space:normal;overflow:visible;overflow-wrap:anywhere}
.job-path b{display:block;margin-bottom:3px}
:root[data-theme="light"] .sidebar .brand{color:#e5f4ff}
.metric-top{min-width:0;flex-wrap:wrap}
.metric-top p{white-space:normal;overflow-wrap:anywhere}
@media(max-width:1180px){
  details.site-row summary{grid-template-columns:12px minmax(0,1fr) repeat(3,56px) 55px 24px;gap:10px;padding:16px}
  details.site-row summary .spark{display:none}
  details.site-row summary>.row-metric{display:block}
  .site-row-detail{padding:4px 16px 18px}
  .activity-row{grid-template-columns:4px minmax(0,1fr) minmax(0,1.4fr) auto}
  .activity-meta{grid-column:2/4}.activity-row>.pill{grid-column:4;grid-row:1}
  .activity-row>.link-btn{grid-column:4;grid-row:2}
}
@media(max-width:1100px){
  .job-mini-table,.job-mini-table tbody{display:block}
  .job-mini-table thead{display:none}
  .job-mini-table tbody>tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:10px;border-bottom:1px solid var(--line)}
  .job-mini-table td{display:block;text-align:left!important;border:0;padding:8px}
  .job-mini-table td[data-label]::before{content:attr(data-label);display:block;color:var(--muted);font-size:11px;margin-bottom:5px}
  .job-mini-table .repository-group{display:block}
}
@media(max-width:650px){
  details.site-row summary{grid-template-columns:12px repeat(3,minmax(0,1fr)) 24px}
  details.site-row summary .site-id{grid-column:2/5}
  details.site-row summary .chevron{grid-column:5;grid-row:1}
  details.site-row summary>.row-metric{grid-row:2;text-align:left}
  details.site-row summary>.row-metric:nth-child(3){grid-column:2}
  details.site-row summary>.row-metric:nth-child(4){grid-column:3}
  details.site-row summary>.row-metric:nth-child(5){grid-column:4}
  details.site-row summary>time{grid-column:2/5;grid-row:3;text-align:left}
  details.site-row summary .row-metric .k{display:block;font-size:10px}
  .job-mini-table tbody>tr{grid-template-columns:1fr}
  .activity-row{grid-template-columns:4px minmax(0,1fr) auto}
  .activity-site,.activity-job,.activity-meta{grid-column:2/4}
  .activity-row>.pill{grid-column:2;grid-row:auto}
  .activity-row>.link-btn{grid-column:3;grid-row:auto}
}