/*
 * System Monitoring dashboard styling (2026-08-08) — same real,
 * hand-written-CSS-not-Tailwind approach as business-dashboard.css/
 * weekly-issue.css (Filament's precompiled admin bundle never scans this
 * app's custom widget Blade views, so Tailwind classes referenced there
 * silently do nothing — confirmed the hard way building the Business
 * Overview dashboard, documented in that file's own header comment).
 * Registered alongside the other 3 via the same FilamentAsset::register()
 * call in AdminPanelProvider::boot().
 *
 * `--mon-*` custom properties, not the `--slate-amber-*`/`--desert-dusk-*`
 * palette those other files use — monitoring's status colors (healthy/
 * warning/critical) are a functional signal, not a brand palette choice,
 * so they get their own semantic token set. `rf-mon-*` class prefix
 * mirrors `rf-dash-*`'s naming convention.
 */
:root {
    --mon-healthy: #0D8A50;
    --mon-healthy-bg: #E7F8EF;
    --mon-healthy-border: #B4E8CD;

    --mon-warning: #B54708;
    --mon-warning-bg: #FFF6E8;
    --mon-warning-border: #FBDBA7;

    --mon-critical: #D42620;
    --mon-critical-bg: #FEF0EF;
    --mon-critical-border: #F7C6C3;

    --mon-info: #175CD3;
    --mon-info-bg: #EFF6FF;
    --mon-info-border: #C2DDFC;

    --mon-neutral: #5D6673;
    --mon-neutral-bg: #F2F4F7;
    --mon-neutral-border: #E4E7EC;

    --mon-text-primary: #101828;
    --mon-text-secondary: #5D6673;
    --mon-text-tertiary: #98A2B3;
    --mon-border: #E4E7EC;
}

/* `.dark` is the selector that actually matches — Filament toggles a `dark`
 * class on <html>, never a `data-theme` attribute (confirmed in
 * vendor/filament/filament/resources/js/dark-mode.js). `[data-theme="dark"]`
 * alone never matched anything, so these dark-mode text colors never
 * activated; dark mode showed the light-mode dark text on a dark
 * background — unreadable headings (2026-08-12 fix). Kept alongside
 * `[data-theme="dark"]` in case something else ever sets that attribute,
 * matching the belt-and-suspenders pattern already used in
 * weekly-issue.css/business-dashboard.css. */
:root[data-theme="dark"],
:root.dark {
    --mon-text-primary: #F2F4F7;
    --mon-text-secondary: #98A2B3;
    --mon-text-tertiary: #6B7280;
    --mon-border: #344054;
    /* Real bug fixed (2026-08-12) — --mon-neutral-bg had no dark override
     * at all, so table-row hover (.rf-mon-row-hover:hover), the infra
     * progress tracks, and chip/badge backgrounds all stayed on the LIGHT
     * #F2F4F7 value even in dark mode, while text correctly went to its
     * light dark-mode color — invisible text on a light-gray hover. */
    --mon-neutral: #98A2B3;
    --mon-neutral-bg: #29303B;
    --mon-neutral-border: #344054;
}

.rf-mon * { box-sizing: border-box; }
.rf-mon { font-family: ui-sans-serif, -apple-system, system-ui, sans-serif; }

/* ── Layout ─────────────────────────────────────────────── */

.rf-mon-stack { display: flex; flex-direction: column; gap: 24px; }

.rf-mon-grid { display: grid; gap: 14px; }
.rf-mon-grid-4 { grid-template-columns: repeat(4, 1fr); }
.rf-mon-grid-2 { grid-template-columns: repeat(2, 1fr); }
.rf-mon-grid-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1100px) {
    .rf-mon-grid-4, .rf-mon-grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .rf-mon-grid-4, .rf-mon-grid-5, .rf-mon-grid-2 { grid-template-columns: 1fr; }
}

.rf-mon-two-col { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .rf-mon-two-col { grid-template-columns: 1fr; } }

/* ── Cards ──────────────────────────────────────────────── */

.rf-mon-card {
    background: var(--rf-mon-card-bg, #fff);
    border: 1px solid var(--mon-border);
    border-radius: 14px;
    padding: 16px;
}

/* Real contrast bug fixed (2026-08-12) — this used to be scoped to
 * `.rf-mon-card` only, so any element using `--rf-mon-card-bg` WITHOUT a
 * `.rf-mon-card` ancestor (`.rf-mon-table-wrap` on the API Performance/
 * Infrastructure/Queues pages is exactly this — a plain wrapping <div>, not
 * `.rf-mon-card`) never received the variable and fell back to its `#fff`
 * default, even in dark mode. Meanwhile `--mon-text-primary` (a plain
 * :root-level variable, not scoped to any class) correctly switched to its
 * light dark-mode color — light text on a white card, unreadable. Defining
 * this at :root.dark directly means every consumer inherits it regardless
 * of ancestry, not just descendants of .rf-mon-card. */
:root[data-theme="dark"],
:root.dark { --rf-mon-card-bg: #292524; }

.rf-mon-card-hoverable { cursor: pointer; transition: border-color .12s ease; }
.rf-mon-card-hoverable:hover { border-color: var(--mon-text-tertiary); }

.rf-mon-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.rf-mon-section-title { font-size: 15px; font-weight: 700; color: var(--mon-text-primary); margin: 0; }
.rf-mon-section-link { font-size: 12.5px; font-weight: 600; color: var(--mon-info); cursor: pointer; }

/* ── Status badge ───────────────────────────────────────── */

.rf-mon-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    border: 1px solid transparent;
}
.rf-mon-badge .rf-mon-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.rf-mon-badge-healthy { background: var(--mon-healthy-bg); color: var(--mon-healthy); border-color: var(--mon-healthy-border); }
.rf-mon-badge-healthy .rf-mon-dot { background: var(--mon-healthy); }
.rf-mon-badge-warning { background: var(--mon-warning-bg); color: var(--mon-warning); border-color: var(--mon-warning-border); }
.rf-mon-badge-warning .rf-mon-dot { background: var(--mon-warning); }
.rf-mon-badge-critical { background: var(--mon-critical-bg); color: var(--mon-critical); border-color: var(--mon-critical-border); }
.rf-mon-badge-critical .rf-mon-dot { background: var(--mon-critical); }
.rf-mon-badge-info { background: var(--mon-info-bg); color: var(--mon-info); border-color: var(--mon-info-border); }
.rf-mon-badge-info .rf-mon-dot { background: var(--mon-info); }
.rf-mon-badge-neutral { background: var(--mon-neutral-bg); color: var(--mon-neutral); border-color: var(--mon-neutral-border); }
.rf-mon-badge-neutral .rf-mon-dot { background: var(--mon-text-tertiary); }

/* ── Overall system status banner ──────────────────────────*/

.rf-mon-overall-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--mon-healthy-border);
    background: var(--mon-healthy-bg);
    width: fit-content;
}
.rf-mon-overall-status.warning { border-color: var(--mon-warning-border); background: var(--mon-warning-bg); }
.rf-mon-overall-status.critical { border-color: var(--mon-critical-border); background: var(--mon-critical-bg); }
.rf-mon-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--mon-healthy); box-shadow: 0 0 0 3px rgba(13,138,80,.18); flex-shrink: 0; }
.rf-mon-overall-status.warning .rf-mon-pulse { background: var(--mon-warning); box-shadow: 0 0 0 3px rgba(181,71,8,.16); }
.rf-mon-overall-status.critical .rf-mon-pulse { background: var(--mon-critical); box-shadow: 0 0 0 3px rgba(212,38,32,.16); }
.rf-mon-overall-status-text { font-size: 13.5px; font-weight: 700; color: var(--mon-text-primary); }
.rf-mon-overall-status-sub { font-size: 12px; color: var(--mon-text-secondary); font-weight: 500; }

/* ── Health card (top 4) ────────────────────────────────── */

.rf-mon-health-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rf-mon-health-title { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; color: var(--mon-text-primary); }
.rf-mon-icon {
    width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rf-mon-icon svg { width: 16px; height: 16px; display: block; }

.rf-mon-metric-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.rf-mon-metric-value { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--mon-text-primary); }
.rf-mon-metric-value-sm { font-size: 14px; }
.rf-mon-metric-label { font-size: 11.5px; color: var(--mon-text-tertiary); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.rf-mon-metric-secondary { text-align: right; }

.rf-mon-trend {
    display: flex; align-items: center; gap: 4px;
    font-size: 11.5px; font-weight: 600;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--mon-border);
    color: var(--mon-text-tertiary);
}
.rf-mon-trend svg { width: 12px; height: 12px; }
.rf-mon-trend.up { color: var(--mon-healthy); }
.rf-mon-trend.down { color: var(--mon-critical); }

/* ── KPI strip ──────────────────────────────────────────── */

.rf-mon-kpi-box { background: var(--rf-mon-card-bg, #fff); border: 1px solid var(--mon-border); border-radius: 10px; padding: 14px 16px; }
.rf-mon-kpi-value { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 20px; font-weight: 700; color: var(--mon-text-primary); }
.rf-mon-kpi-label { font-size: 11.5px; color: var(--mon-text-tertiary); font-weight: 600; margin-top: 3px; }
.rf-mon-kpi-box.flag-danger .rf-mon-kpi-value { color: var(--mon-critical); }
.rf-mon-kpi-box.flag-warning .rf-mon-kpi-value { color: var(--mon-warning); }

/* ── Infra usage rows ───────────────────────────────────── */

.rf-mon-infra-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--mon-border); }
.rf-mon-infra-item:last-child { border-bottom: none; }
.rf-mon-infra-label { width: 110px; flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--mon-text-primary); }
.rf-mon-infra-track { flex: 1; height: 7px; border-radius: 999px; background: var(--mon-neutral-bg); overflow: hidden; }
.rf-mon-infra-fill { height: 100%; border-radius: 999px; }
.rf-mon-infra-value { width: 56px; text-align: right; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 700; font-size: 13px; color: var(--mon-text-primary); flex-shrink: 0; }

/* ── Table ──────────────────────────────────────────────── */

.rf-mon-table-wrap { background: var(--rf-mon-card-bg, #fff); border: 1px solid var(--mon-border); border-radius: 14px; overflow: hidden; overflow-x: auto; }
.rf-mon-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.rf-mon-table thead th {
    text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--mon-text-tertiary); background: var(--mon-neutral-bg);
    padding: 10px 16px; border-bottom: 1px solid var(--mon-border); white-space: nowrap;
}
.rf-mon-table tbody td { padding: 11px 16px; border-bottom: 1px solid var(--mon-border); vertical-align: middle; color: var(--mon-text-primary); }
.rf-mon-table tbody tr:last-child td { border-bottom: none; }
.rf-mon-table tbody tr.rf-mon-row-hover:hover { background: var(--mon-neutral-bg); cursor: pointer; }
.rf-mon-cell-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; }
.rf-mon-cell-muted { color: var(--mon-text-secondary); }
.rf-mon-row-flag-danger td:first-child { box-shadow: inset 3px 0 0 var(--mon-critical); }
.rf-mon-row-flag-warning td:first-child { box-shadow: inset 3px 0 0 var(--mon-warning); }

/* ── Error / alert list items ───────────────────────────── */

.rf-mon-error-item {
    display: flex; gap: 12px; padding: 14px 16px;
    border: 1px solid var(--mon-border); border-radius: 12px;
    background: var(--rf-mon-card-bg, #fff); margin-bottom: 10px;
}
.rf-mon-error-sev-bar { width: 4px; border-radius: 4px; flex-shrink: 0; }
.rf-mon-sev-critical { background: var(--mon-critical); }
.rf-mon-sev-high { background: #E8752B; }
.rf-mon-sev-medium { background: var(--mon-warning); }
.rf-mon-sev-low { background: var(--mon-text-tertiary); }
.rf-mon-error-body { flex: 1; min-width: 0; }
.rf-mon-error-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.rf-mon-error-type { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 700; font-size: 13px; color: var(--mon-text-primary); }
.rf-mon-error-msg { font-size: 13px; color: var(--mon-text-secondary); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-mon-error-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--mon-text-tertiary); }
.rf-mon-error-freq { text-align: right; flex-shrink: 0; }
.rf-mon-error-freq-value { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 700; font-size: 16px; color: var(--mon-text-primary); }
.rf-mon-error-freq-label { font-size: 10.5px; color: var(--mon-text-tertiary); font-weight: 600; text-transform: uppercase; }

.rf-mon-alert-item {
    display: flex; gap: 14px; align-items: flex-start; padding: 16px;
    border-radius: 12px; border: 1px solid var(--mon-border);
    background: var(--rf-mon-card-bg, #fff); margin-bottom: 12px;
}
.rf-mon-alert-icon { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.rf-mon-alert-icon svg { width: 17px; height: 17px; }
.rf-mon-alert-icon.crit { background: var(--mon-critical-bg); color: var(--mon-critical); }
.rf-mon-alert-icon.warn { background: var(--mon-warning-bg); color: var(--mon-warning); }
.rf-mon-alert-icon.note { background: var(--mon-info-bg); color: var(--mon-info); }
.rf-mon-alert-body { flex: 1; min-width: 0; }
.rf-mon-alert-title { font-weight: 700; font-size: 13.5px; color: var(--mon-text-primary); }
.rf-mon-alert-desc { font-size: 13px; color: var(--mon-text-secondary); margin: 3px 0 8px; }
.rf-mon-alert-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.rf-mon-alert-time { font-size: 11.5px; color: var(--mon-text-tertiary); font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* ── Simple bar chart (queue activity — no charting library) ─ */

.rf-mon-bars { display: flex; align-items: flex-end; gap: 3px; height: 170px; padding-top: 8px; }
.rf-mon-bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; border-radius: 2px 2px 0 0; overflow: hidden; background: var(--mon-neutral-bg); }
.rf-mon-bar-seg-completed { background: var(--mon-healthy); }
.rf-mon-bar-seg-failed { background: var(--mon-critical); }

.rf-mon-chart-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--mon-text-secondary); font-weight: 500; }
.rf-mon-legend-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* ── Mobile crash list ──────────────────────────────────── */

.rf-mon-crash-list { list-style: none; margin: 0; padding: 0; }
.rf-mon-crash-list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--mon-border); font-size: 13px; }
.rf-mon-crash-list li:last-child { border-bottom: none; }
.rf-mon-crash-rank {
    width: 22px; height: 22px; border-radius: 6px; background: var(--mon-neutral-bg); color: var(--mon-text-secondary);
    display: flex; align-items: center; justify-content: center;
    font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 700; font-size: 11.5px; flex-shrink: 0;
}
.rf-mon-crash-name { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; flex: 1; min-width: 0; color: var(--mon-text-primary); }
.rf-mon-crash-count { font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--mon-text-secondary); font-size: 12.5px; }

/* ── Chips / tags ───────────────────────────────────────── */

.rf-mon-chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--mon-neutral-bg); color: var(--mon-text-secondary); border: 1px solid var(--mon-border); }
.rf-mon-chip-accent { background: var(--mon-info-bg); color: var(--mon-info); border-color: var(--mon-info-border); }

/* ── Banner ─────────────────────────────────────────────── */

.rf-mon-banner {
    display: flex; align-items: center; gap: 12px; padding: 13px 16px;
    border-radius: 10px; border: 1px solid var(--mon-critical-border); background: var(--mon-critical-bg);
    margin-bottom: 16px;
}
.rf-mon-banner-icon { width: 20px; height: 20px; color: var(--mon-critical); flex-shrink: 0; }
.rf-mon-banner-text { font-size: 13px; font-weight: 600; color: var(--mon-critical); flex: 1; }

.rf-mon-empty-note { font-size: 12.5px; color: var(--mon-text-tertiary); padding: 10px 2px; }

.rf-mon-mobile-flag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #6941C6; background: #F9F5FF; border: 1px solid #E9D7FE;
    padding: 4px 10px; border-radius: 999px; margin-bottom: 6px;
}