/* PortalMonitor styles.
   Color roles from the validated reference palette:
   surface #fcfcfb · text #0b0b0b / #52514e · series-1 #2a78d6
   status: good #0ca30c · warning #fab219 · serious #ec835a · critical #d03b3b */

:root {
    --surface-0: #f4f4f2;
    --surface-1: #fcfcfb;
    --border: #e4e3df;
    --text-primary: #0b0b0b;
    --text-secondary: #52514e;
    --text-muted: #8a8985;
    --series-1: #2a78d6;
    --series-1-soft: #cde2fb;
    --good: #0ca30c;
    --low: #fab219;      /* warning  → Low severity  */
    --medium: #ec835a;   /* serious  → Medium        */
    --critical: #d03b3b;
    --sidebar-bg: #1c1e21;
    --sidebar-text: #c9cbcf;
    --radius: 8px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--surface-0);
    color: var(--text-primary);
    font-size: 14.5px;
}

h1 { font-size: 1.35rem; margin: 0 0 4px; }
h2 { font-size: 1.05rem; margin: 0 0 10px; color: var(--text-primary); }
a { color: var(--series-1); }

/* ---------------------------------------------------------------- shell */
.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 210px; flex-shrink: 0;
    background: var(--sidebar-bg); color: var(--sidebar-text);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; padding: 18px 16px 14px; font-size: 1.02rem; }
.brand-mark { color: var(--series-1); }
.sidebar nav { display: flex; flex-direction: column; padding: 4px 8px; gap: 2px; }
.sidebar nav a {
    color: var(--sidebar-text); text-decoration: none;
    padding: 8px 10px; border-radius: 6px; font-size: .95rem;
}
.sidebar nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar nav a.active { background: rgba(42,120,214,.28); color: #fff; }
.nav-section { padding: 14px 10px 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #6f7278; }
.sidebar-foot { margin-top: auto; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: .88rem; }
.whoami { color: #fff; margin-bottom: 6px; }
.btn-link { background: none; border: none; color: var(--sidebar-text); cursor: pointer; padding: 0; font-size: .88rem; text-decoration: underline; }

.content { flex: 1; padding: 22px 26px; max-width: 1500px; }
.page-sub { color: var(--text-secondary); margin: 0 0 18px; }

/* ---------------------------------------------------------------- cards & grids */
.card {
    background: var(--surface-1); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px;
}
.card-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.card-title h2 { margin: 0; }
.card-title .hint { color: var(--text-muted); font-size: .85rem; }

.tile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-tile {
    background: var(--surface-1); border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--radius); padding: 12px 16px;
}
.stat-tile.accent-critical { border-left-color: var(--critical); }
.stat-tile.accent-medium   { border-left-color: var(--medium); }
.stat-tile.accent-low      { border-left-color: var(--low); }
.stat-tile.accent-good     { border-left-color: var(--good); }
.stat-label { color: var(--text-secondary); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.stat-value { font-size: 1.9rem; font-weight: 650; line-height: 1.25; font-variant-numeric: tabular-nums; }
.stat-sub { color: var(--text-muted); font-size: .82rem; }

.grid-2 { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- tables */
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.data th {
    text-align: left; color: var(--text-secondary); font-weight: 600;
    padding: 7px 10px; border-bottom: 1px solid var(--border);
    font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
    white-space: nowrap;
}
table.data td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: #f6f8fb; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.compact-feed td { padding: 5px 8px; font-size: .86rem; }
table.compact-feed .msg-cell { max-width: 260px; white-space: nowrap; }
.mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: .86rem; }
.muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.msg-cell { max-width: 480px; overflow: hidden; text-overflow: ellipsis; }
.clickable { cursor: pointer; }

/* ---------------------------------------------------------------- severity */
.sev-badge {
    display: inline-block; padding: 1px 8px; border-radius: 10px;
    font-size: .74rem; font-weight: 650; letter-spacing: .03em; white-space: nowrap;
    border: 1px solid transparent;
}
.sev-badge.sev-critical { background: #fbeaea; color: #a02020; border-color: #efc4c4; }
.sev-badge.sev-medium   { background: #fdf0e9; color: #a4491f; border-color: #f3d1bf; }
.sev-badge.sev-low      { background: #fdf5df; color: #7a5a00; border-color: #f0dfae; }
.sev-badge.sev-info     { background: #eef0f3; color: var(--text-secondary); border-color: #dfe2e7; }

.sev-fill-critical { fill: var(--critical); }
.sev-fill-medium   { fill: var(--medium); }
.sev-fill-low      { fill: var(--low); }
.series-fill       { fill: var(--series-1); }

.origin-chip { font-size: .72rem; border-radius: 4px; padding: 1px 6px; background: #eef0f3; color: var(--text-secondary); }
.origin-chip.onsite { background: #e8f1fb; color: #1c5cab; }
.origin-chip.azure  { background: #eaf6ef; color: #1e7b3c; }

/* ---------------------------------------------------------------- charts */
.chart-root { width: 100%; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-tick, .chart-label, .chart-value { font-size: 11px; fill: var(--text-muted); }
.chart-label { fill: var(--text-secondary); }
.chart-value { fill: var(--text-secondary); }
.bar:hover { opacity: .82; }
.chart-empty { color: var(--text-muted); padding: 26px 0; text-align: center; }
.chart-legend { display: flex; gap: 18px; margin-top: 8px; font-size: .84rem; color: var(--text-secondary); }
.chart-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }
.chart-legend .dot.sev-fill-critical { background: var(--critical); }
.chart-legend .dot.sev-fill-medium   { background: var(--medium); }
.chart-legend .dot.sev-fill-low      { background: var(--low); }

/* ---------------------------------------------------------------- site cards */
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.site-card {
    background: var(--surface-1); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px 14px;
    border-top: 3px solid var(--good);
}
.site-card.worst-critical { border-top-color: var(--critical); }
.site-card.worst-medium   { border-top-color: var(--medium); }
.site-card.worst-low      { border-top-color: var(--low); }
.site-card h3 { margin: 0 0 4px; font-size: 1rem; display: flex; justify-content: space-between; align-items: baseline; }
.site-card .count { font-variant-numeric: tabular-nums; }
.site-card .last-msg {
    color: var(--text-secondary); font-size: .82rem; margin-top: 6px;
    max-height: 3.6em; overflow: hidden;
}

/* ---------------------------------------------------------------- forms */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; }
label.fld { display: flex; flex-direction: column; gap: 4px; font-size: .84rem; color: var(--text-secondary); }
input[type=text], input[type=password], input[type=email], input[type=number], select {
    padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px;
    font-size: .92rem; background: #fff; color: var(--text-primary); font-family: inherit;
}
input:focus, select:focus { outline: 2px solid var(--series-1-soft); border-color: var(--series-1); }
.btn {
    background: var(--series-1); color: #fff; border: none; border-radius: 6px;
    padding: 8px 16px; font-size: .92rem; cursor: pointer; font-family: inherit;
}
.btn:hover { background: #1c5cab; }
.btn.secondary { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); }
.btn.secondary:hover { background: var(--surface-0); }

/* prominent action buttons (e.g. System status → Run now) */
.btn.action {
    background: #fff; color: var(--text-primary);
    border: 1px solid #c6c5c0;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
    font-weight: 600; padding: 10px 18px;
}
.btn.action:hover {
    border-color: var(--series-1); color: var(--series-1);
    background: #f6faff; box-shadow: 0 2px 6px rgba(42,120,214,.25);
}
.btn.action:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.btn.action:disabled { opacity: .55; cursor: default; transform: none; }

/* hover tooltip: <element class="tip" data-tip="..."> */
.tip { position: relative; }
.tip::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 10px); left: 0;
    width: 320px; max-width: 70vw;
    background: var(--sidebar-bg); color: #e8e9eb;
    padding: 10px 12px; border-radius: 7px;
    font-size: .8rem; font-weight: 400; line-height: 1.45; text-align: left;
    box-shadow: 0 6px 22px rgba(0,0,0,.3);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .15s ease .1s;
    z-index: 60; white-space: normal;
}
.tip::before {
    content: "";
    position: absolute; bottom: calc(100% + 4px); left: 24px;
    border: 6px solid transparent; border-top-color: var(--sidebar-bg);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .15s ease .1s;
    z-index: 60;
}
.tip:hover::after, .tip:hover::before { opacity: 1; visibility: visible; }
.btn.danger { background: var(--critical); }
.btn.sm { padding: 4px 10px; font-size: .82rem; }
.actions { display: flex; gap: 8px; }

/* ---------------------------------------------------------------- login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--sidebar-bg); }
.login-card {
    background: var(--surface-1); border-radius: 10px; padding: 34px 38px;
    width: 380px; box-shadow: 0 18px 50px rgba(0,0,0,.4);
}
.login-card h1 { margin-bottom: 18px; }
.login-card form { display: flex; flex-direction: column; gap: 12px; }
.login-error { background: #fbeaea; color: #a02020; border-radius: 6px; padding: 8px 12px; font-size: .88rem; }
.login-ok { background: #eaf6ef; color: #1e7b3c; border-radius: 6px; padding: 8px 12px; font-size: .88rem; }

/* ---------------------------------------------------------------- misc */
.poll-status { display: flex; gap: 10px; align-items: center; font-size: .84rem; color: var(--text-muted); }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--good); display: inline-block; }
.pulse.stale { background: var(--low); }
.pulse.err { background: var(--critical); }
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--series-1-soft); color: #1c5cab;
    border-radius: 14px; padding: 5px 10px; font-size: .88rem;
}
.chip-x { background: none; border: none; cursor: pointer; color: #1c5cab; font-size: .8rem; padding: 0; }
.detail-box {
    background: #1c1e21; color: #d6d8dc; border-radius: 6px; padding: 12px 14px;
    font-family: Consolas, "Cascadia Mono", monospace; font-size: .82rem;
    white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow: auto;
}

#blazor-error-ui {
    background: #fdf5df; bottom: 0; box-shadow: 0 -1px 4px rgba(0,0,0,.2);
    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; }