@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
/* ---- Theme tokens. data-theme on <html> is set before first paint by index.html (Dark / System / Light). ---- */
:root, [data-theme="light"] {
    color-scheme: light;
    --bg: #f4f6fa; --surface: #ffffff; --surface-2: #f8fafc; --surface-hover: #f1f5f9; --surface-active: #e8eefc;
    --border: #e2e8f0; --border-strong: #cbd5e1;
    --text: #1e2633; --text-muted: #5b6676; --text-strong: #0f172a; --text-faint: #8a94a3;
    --accent: #2563eb; --accent-fg: #ffffff; --accent-soft: #dbe7ff; --focus: #3b82f6;
    --topbar-bg: #ffffff; --topbar-fg: #1e2633; --topbar-border: #e2e8f0;
    --shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.06); --shadow-lg: 0 10px 32px rgba(15,23,42,.18);
    --backdrop: rgba(15,23,42,.35); --radius: 14px;
    --dot-running: #3b82f6; --dot-ok: #16a34a; --dot-warning: #f59e0b; --dot-error: #dc2626; --dot-neutral: #9ca3af;
    --error-fg: #b91c1c; --warn-text: #b45309;
    --error-bg: #fef2f2; --error-border: #fecaca; --error-strong: #7f1d1d;
    --warn-bg: #fffbeb; --warn-border: #fde68a; --warn-fg: #78350f;
    --ok-bg: #f0fdf4; --ok-border: #bbf7d0; --ok-fg: #14532d;
    --badge-bg: #eef1f5; --badge-fg: #3f4856;
    --badge-crit-bg: #fde2e1; --badge-crit-fg: #a61b1b; --badge-err-bg: #fff1d6; --badge-err-fg: #8a5a00;
    --badge-local-bg: #2563eb; --badge-local-fg: #ffffff; --badge-remote-bg: #b45309; --badge-remote-fg: #ffffff;
    --progress-track: #e5e7eb; --progress-fill: #2563eb;
    --chart-bg: #ffffff; --chart-grid: #e5e7eb; --chart-label: #6b7280; --chart-internet: #2563eb; --chart-router: #9ca3af; --chart-lost: #dc2626;
    --font: "Segoe UI", system-ui, -apple-system, "DejaVu Sans", sans-serif; --font-num: inherit;
    --glow: none; --glow-soft: none; --text-glow: none; --grid-bg: none;
    --banner-bg: linear-gradient(90deg, #eaf7ef 0%, #f6fbff 45%, #ffffff 100%); --icon-badge-bg: #e8f0fe; --icon-badge-border: transparent; --icon-badge-radius: 50%;
    --chip-ok: #16a34a; --chip-warn: #d97706; --chip-err: #dc2626; --chip-na: #6b7280; --rail-bg: #ffffff; --pc-fg: #3f4856;
}
[data-theme="dark"] {
    color-scheme: dark;
    --bg: #07090c; --surface: #0d1218; --surface-2: #0e141b; --surface-hover: #16212c; --surface-active: #0f2a33;
    --border: #163a44; --border-strong: #2b3a49;
    --text: #d6e2ea; --text-muted: #8fa3b3; --text-strong: #f1f7fb; --text-faint: #6b7f8f;
    --accent: #00e5ff; --accent-fg: #001318; --accent-soft: rgba(0,229,255,.08); --focus: #00e5ff;
    --topbar-bg: #0b0f14; --topbar-fg: #d6e2ea; --topbar-border: #12323a;
    --shadow: none; --shadow-lg: 0 10px 32px rgba(0,0,0,.6);
    --backdrop: rgba(0,0,0,.6); --radius: 6px;
    --glow: 0 0 14px rgba(0,229,255,.35); --glow-soft: 0 0 18px rgba(0,229,255,.13); --text-glow: 0 0 10px rgba(0,229,255,.55);
    --grid-bg: linear-gradient(rgba(0,229,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0,229,255,.045) 1px, transparent 1px);
    --banner-bg: rgba(13,18,24,.9); --icon-badge-bg: rgba(0,229,255,.07); --icon-badge-border: rgba(0,229,255,.2); --icon-badge-radius: 7px;
    --chip-ok: #22e58a; --chip-warn: #f5b800; --chip-err: #ff5b5b; --chip-na: #8b98a0; --rail-bg: rgba(10,13,17,.85); --pc-fg: #77ffaa;
    --dot-running: #38bdf8; --dot-ok: #22c55e; --dot-warning: #f5b800; --dot-error: #ef4444; --dot-neutral: #6b7280;
    --error-fg: #f87171; --warn-text: #fbbf24;
    --error-bg: #2a1215; --error-border: #5c1d22; --error-strong: #fecaca;
    --warn-bg: #2a2109; --warn-border: #5c4710; --warn-fg: #fde68a;
    --ok-bg: #0d2318; --ok-border: #1d4d33; --ok-fg: #bbf7d0;
    --badge-bg: #1a2430; --badge-fg: #c3d0db;
    --badge-crit-bg: #3a1417; --badge-crit-fg: #fca5a5; --badge-err-bg: #33270b; --badge-err-fg: #fcd34d;
    --badge-local-bg: #0f2a33; --badge-local-fg: #22d3ee; --badge-remote-bg: #33270b; --badge-remote-fg: #fbbf24;
    --progress-track: #1a2430; --progress-fill: #00e5ff;
    --chart-bg: #0e141b; --chart-grid: #1e2a36; --chart-label: #8fa3b3; --chart-internet: #00e5ff; --chart-router: #6b7f8f; --chart-lost: #ef4444;
    --font-num: "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
}



/* ===== RemoteWebViewAdmin restyle: matches RemotePCDiagnostics (tokens above copied from it). ===== */
* { box-sizing: border-box; }
html, body { margin: 0; font-family: var(--font); background: var(--bg); background-image: var(--grid-bg); background-size: 28px 28px; color: var(--text); line-height: 1.45; font-size: 14px; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
a:hover { color: var(--accent); }
h1 { font-size: 24px; font-weight: 700; color: var(--text-strong); margin: 4px 0 8px; letter-spacing: -.01em; }
h2 { font-size: 17px; font-weight: 700; color: var(--text-strong); }
h3 { font-size: 15px; color: var(--text-strong); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
code, pre { font-family: "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace; background: var(--surface-2); color: var(--text-strong); border-radius: 4px; padding: 0 3px; }
.icon { flex: none; display: inline-block; vertical-align: middle; }

/* Buttons (override bootstrap) */
button, .btn { font: inherit; font-weight: 600; font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; padding: 6px 14px; cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s; }
button:hover:not(:disabled), .btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn-primary, button.btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); box-shadow: var(--glow); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); color: var(--accent-fg); background: var(--accent); }
.btn-link, .linklike { background: none; border: none; color: var(--accent); padding: 0; font-size: 12.5px; text-decoration: underline; font-weight: 500; box-shadow: none; }

/* Shell */
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr); height: 100vh; height: 100dvh; }
.topbar { grid-column: 1 / 3; display: flex; gap: 12px; align-items: center; padding: 0 22px; background: var(--topbar-bg); color: var(--topbar-fg); border-bottom: 1px solid var(--topbar-border); min-width: 0; }
.topbar .title { font-weight: 700; font-size: 17px; display: inline-flex; gap: 10px; align-items: center; color: var(--text-strong); text-decoration: none; white-space: nowrap; }
.topbar .title .logo { color: var(--accent); }
[data-theme="dark"] .topbar .title { color: var(--accent); text-shadow: var(--text-glow); }
.topbar-spacer { flex: 1; }
.topbar .about-link { font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.topbar .about-link:hover { color: var(--accent); }
.topbar .login { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; }
.topbar .user-chip { font-family: var(--font-num); color: var(--pc-fg); white-space: nowrap; }
.topbar .groups { margin: 0; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--badge-bg); color: var(--badge-fg); }
.badge-local { background: var(--accent-soft); color: var(--accent); }
[data-theme="light"] .badge-local { background: #e3ecfd; color: #1d4ed8; }
[data-theme="dark"] .badge-local { background: transparent; border: 1px solid var(--accent); box-shadow: 0 0 8px rgba(0,229,255,.33); }

.theme-switch { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2); }
.theme-switch button { border: 0; border-radius: 99px; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 600; padding: 3px 10px; }
.theme-switch button:hover:not(.on) { color: var(--text); background: var(--surface-hover); }
.theme-switch button.on { background: var(--accent); color: var(--accent-fg); box-shadow: var(--glow); }

.rail { background: var(--rail-bg); border-right: 1px solid var(--topbar-border); padding: 12px 10px; display: flex; flex-direction: column; gap: 1px; overflow: auto; }
.rail a { display: flex; gap: 11px; align-items: center; padding: 0 12px; min-height: 34px; border-radius: 8px; color: var(--text-muted); text-decoration: none; font-size: 13px; transition: background-color .15s, color .15s; }
.rail a .nav-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail a:hover { background: var(--surface-hover); color: var(--text); }
.rail a.active { background: var(--surface-active); color: var(--accent); font-weight: 600; }
[data-theme="dark"] .rail a.active { background: rgba(0,229,255,.08); box-shadow: inset 3px 0 0 var(--accent); }
.content { position: relative; padding: 20px 24px 32px; overflow: auto; min-width: 0; }
.nav-toggle { display: none; }

/* Page furniture */
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.toolbar h1 { margin-right: auto; }
.meta { color: var(--text-muted); font-size: 12.5px; }
.section-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 22px 0 10px; }
[data-theme="dark"] .section-title { color: var(--accent); font-family: var(--font-num); }
.card { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); min-width: 0; }
[data-theme="light"] .card { border-color: transparent; }

/* Banners (connection error, empty state) */
.banner { display: flex; align-items: center; gap: 16px; padding: 16px 20px; margin: 4px 0 14px; border-radius: var(--radius); background: var(--banner-bg); border: 1px solid var(--border); box-shadow: var(--shadow), var(--glow-soft); }
[data-theme="light"] .banner { border-color: transparent; }
.banner-icon { flex: none; display: inline-grid; place-items: center; color: var(--chip-ok); }
[data-theme="light"] .banner-icon { width: 44px; height: 44px; border-radius: 50%; background: #d6f2e0; }
[data-theme="dark"] .banner-icon { color: var(--accent); }
.banner-err .banner-icon, [data-theme="dark"] .banner-err .banner-icon { color: var(--chip-err); }
[data-theme="light"] .banner-err .banner-icon { background: #fde4e4; }
[data-theme="light"] .banner-err { background: linear-gradient(90deg, #fef2f2 0%, #fffafa 45%, #fff 100%); }
[data-theme="dark"] .banner-err { border-color: var(--error-border); box-shadow: 0 0 18px rgba(255,91,91,.12); }
.banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.banner-title { font-size: 17px; font-weight: 700; color: var(--text-strong); overflow-wrap: anywhere; line-height: 1.3; }
.banner-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.conn-banner { position: relative; z-index: 1; }

/* Cloud loading icon */
.waiting { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 8vh auto 24px; width: max-content; max-width: 100%; padding: 22px 30px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow), var(--glow-soft); color: var(--text-muted); font-size: 13px; font-weight: 600; }
[data-theme="light"] .waiting { border-color: transparent; }
.waiting img { width: 96px; height: auto; border-radius: 12px; background: #fff; padding: 6px; }
[data-theme="dark"] .waiting img { filter: invert(1) hue-rotate(180deg) brightness(1.1); background: transparent; mix-blend-mode: screen; }
.waiting span::after { content: ""; }

/* Clients grid (server-rendered markup) */
.client-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 0 0 14px; }
.client-row > .client-card { width: auto; max-width: none; padding: 16px 18px; margin: 0; overflow-wrap: anywhere; }
.client-card .card { background: transparent; border: 0; box-shadow: none; padding: 0; }
.client-card table, .client-card .table { color: var(--text); }

/* Tables */
.table-card { padding: 4px 0; overflow-x: auto; margin-bottom: 14px; }
.table, .data-table { width: 100%; margin: 0; color: var(--text); border-collapse: collapse; background: transparent; --bs-table-bg: transparent; --bs-table-color: var(--text); }
.data-table th { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); border-top: 0; border-bottom: 1px solid var(--border); padding: 10px 16px; white-space: nowrap; background: transparent; }
[data-theme="dark"] .data-table th { color: var(--accent); font-family: var(--font-num); }
.data-table td { padding: 9px 16px; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; font-family: var(--font-num); vertical-align: top; background: transparent; color: var(--text); }
.data-table tbody tr:first-child td { border-top: 0; }
.data-table tbody tr:hover td { background: var(--surface-hover); }
.events-table td { font-family: var(--font); overflow-wrap: anywhere; }
.events-table td.ts { font-family: var(--font-num); white-space: nowrap; color: var(--text-muted); width: 1%; }

/* Blazor error / validation */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--dot-ok); }
.invalid { outline: 1px solid var(--dot-error); }
.validation-message { color: var(--error-fg); }
#blazor-error-ui { background: var(--error-bg); color: var(--error-strong); border-top: 1px solid var(--error-border); bottom: 0; box-shadow: var(--shadow-lg); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* Boot loader */
.loading-progress { position: relative; display: block; width: 7rem; height: 7rem; margin: 22vh auto 1rem; }
.loading-progress circle { fill: none; stroke: var(--progress-track); stroke-width: .5rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray .05s ease-in-out; }
[data-theme="dark"] .loading-progress circle:last-child { filter: drop-shadow(0 0 4px var(--accent)); }
.loading-progress-text { position: absolute; text-align: center; font-weight: 700; color: var(--text-strong); font-family: var(--font-num); inset: calc(22vh + 2.8rem) 0 auto 0; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }
.loading-brand { text-align: center; color: var(--text-muted); font-weight: 600; }

@media (max-width: 600px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .topbar { grid-column: 1; grid-row: 1; flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .topbar .title { font-size: 14px; gap: 5px; }
  .topbar-spacer { display: none; }
  .topbar .login { order: 10; flex-basis: 100%; }
  .nav-toggle { display: inline-block; }
  .rail { grid-row: 2; max-height: 40dvh; border-right: 0; border-bottom: 1px solid var(--border); }
  .app:not(.nav-open) .rail { display: none; }
  .content { grid-row: 3; padding: 12px; }
  .client-row { grid-template-columns: minmax(0, 1fr); }
}