:root {
    color-scheme: dark;
    --bg: #0d1117;
    --panel: #151b23;
    --panel-soft: #1d2530;
    --border: #303a47;
    --border-soft: #26303c;
    --text: #e9edf0;
    --muted: #9ba5ad;
    --amber: #ffbd45;
    --brand-vision: #edf1f5;
    --brand-track: #e7ad48;
    --control-bg: #10161e;
    --scroll-track: #151b23;
    --scroll-thumb: #505d6c;
    --radius-panel: 12px;
    --space-section: 24px;
}

* { box-sizing: border-box; }

html, body {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    margin: 0;
    overflow-x: clip;
}

body {
    padding: 0 22px 22px 250px;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.5 "Segoe UI", Arial, sans-serif;
}

.page { width: 100%; max-width: 1600px; margin: 0 auto; }

.topbar {
    position: static;
    z-index: 9000;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 24px;
    padding-bottom: 24px;
    margin-top: 0;
    margin-bottom: var(--space-section);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.brand-lockup { grid-column: 1; grid-row: 1; display: flex; align-items: center; min-width: 0; }
.brand-copy { min-width: 0; }
.brand-wordmark { display: block; width: 232px; height: 38px; max-width: 100%; }
.brand-wordmark .brand-vision { fill: var(--brand-vision); }
.brand-wordmark .brand-track { fill: var(--brand-track); }
.mobile-menu-toggle { display: none; }
.subtitle, .status { color: var(--muted); }
.subtitle { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.controls { display: grid; grid-column: 1 / -1; grid-row: 2; grid-template-columns: minmax(245px, .95fr) minmax(300px, 1.15fr) minmax(260px, 1fr); align-items: center; gap: 16px; width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--panel); }
.unit-control { display: flex; align-items: center; gap: 8px; }
.unit-control label { color: var(--muted); font-size: 12px; }
.unit-select { width: 100%; min-width: 0; height: 40px; padding: 0 30px 0 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--control-bg); color: var(--text); font: inherit; cursor: pointer; }
.unit-select:focus { border-color: var(--amber); outline: 2px solid rgb(255 189 69 / 16%); }
.unit-online-badge { min-height: 30px; padding: 5px 8px; font-size: 10px; }
.range-navigation { display: flex; align-items: center; gap: 6px; min-width: 0; }
.range-picker { position: relative; flex: 1; min-width: 0; }
.range-toggle { display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; justify-content: space-between; white-space: nowrap; }
.range-toggle span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.range-toggle span:first-child { color: var(--amber); font-size: 16px; }
.range-arrow { width: 36px; flex: 0 0 36px; padding: 0; font-size: 22px; color: var(--muted); }
.range-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 15000; display: grid; grid-template-columns: minmax(280px, .9fr) minmax(330px, 1.1fr); width: min(720px, calc(100vw - 280px)); border: 1px solid #3b4248; border-radius: 9px; background: #222629; box-shadow: 0 12px 32px rgb(0 0 0 / 45%); }
.range-custom { display: grid; align-content: start; gap: 13px; padding: 18px; border-right: 1px solid #343a40; }
.range-date-field { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 10px; color: #cbd1d5; }
.range-date-field input { width: 100%; min-width: 0; }
.range-apply { justify-self: end; min-width: 92px; border-color: #637887; background: #667c89; color: #fff; }
.range-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 3px 12px; padding: 13px; }
.range-presets button { height: auto; min-height: 36px; border-color: transparent; background: transparent; color: #77b7e3; text-align: left; white-space: normal; }
.range-presets button:hover { border-color: #3c464d; background: #2a3034; color: #b6dcf5; }
.refresh-group { display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 16px; border-left: 1px solid var(--border); }
.refresh-group > button { flex: 1; }
.refresh-group label { color: var(--muted); font-size: 11px; white-space: nowrap; }
.refresh-select { min-width: 110px; height: 40px; padding: 0 27px 0 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--control-bg); color: var(--text); font: inherit; }

input, button {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--control-bg);
    color: var(--text);
    font: inherit;
}

button { cursor: pointer; }
button:hover { border-color: var(--amber); color: var(--amber); }
button:disabled { opacity: .6; cursor: wait; }

.panel { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--panel); }
.panel-title { padding: 16px 20px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 14px; line-height: 20px; font-weight: 650; }
.vt-table-scroll {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: auto;
    isolation: isolate;
    border-radius: 0 0 11px 11px;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.vt-table-scroll::-webkit-scrollbar { height: 8px; }
.vt-table-scroll::-webkit-scrollbar-track { background: var(--scroll-track); }
.vt-table-scroll::-webkit-scrollbar-thumb { border-radius: 8px; background: var(--scroll-thumb); }
.vt-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--amber); }

table {
    width: 100%;
    min-width: 1120px;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

th, td {
    padding: 15px 12px;
    border-right: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--panel-soft);
    color: #f2f4f5;
    font-size: clamp(13px, .9vw, 16px);
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

tbody th, td:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
    width: 280px;
    min-width: 280px;
    padding-right: 16px;
    padding-left: 16px;
    background: #171a1d;
    color: var(--text);
    text-align: left;
    white-space: nowrap;
}

thead th:first-child { left: 0; z-index: 20; background: #202428; text-align: left; }
tbody th { cursor: help; font-weight: 700; }
tbody td { min-width: 78px; background: #101214; color: #e6e9eb; text-align: center; white-space: nowrap; }
tbody tr { transition: background-color 160ms ease; }
tbody tr:hover td { background: #1c2023; }
tbody tr:hover th { background: #292d30; color: var(--amber); }
tr:last-child th, tr:last-child td { border-bottom: 0; }
th:last-child, td:last-child { border-right: 0; }
#hourly-performance-table { min-width: 1020px; table-layout: fixed; font-size: 13px; }
#hourly-performance-table th, #hourly-performance-table td { padding: 14px 8px; height: 52px; }
#hourly-performance-table thead th { font-size: 12px; font-weight: 650; }
#hourly-performance-table th:first-child { width: 228px; min-width: 228px; padding-left: 20px; padding-right: 16px; }
#hourly-performance-table tbody th { font-size: 12px; line-height: 20px; font-weight: 600; background: var(--panel-soft); }
#hourly-performance-table tbody td { min-width: 0; background: var(--panel); }
.status { margin: 12px 2px 0; font-size: 12px; }
[hidden] { display: none !important; }
.page-message { padding: 20px; color: var(--muted); line-height: 1.6; }
.complaint-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.complaint-form label,
.complaint-response-form label { display: grid; min-width: 0; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 650; }
.complaint-form-wide { grid-column: 1 / -1; }
.complaint-form input,
.complaint-form select,
.complaint-form textarea,
.complaint-response-form select,
.complaint-response-form textarea { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; }
.complaint-form input,
.complaint-form select,
.complaint-response-form select { height: 42px; padding-top: 0; padding-bottom: 0; }
.complaint-form textarea,
.complaint-response-form textarea { min-height: 78px; resize: vertical; line-height: 1.5; }
.complaint-form input:focus,
.complaint-form select:focus,
.complaint-form textarea:focus,
.complaint-response-form select:focus,
.complaint-response-form textarea:focus { border-color: var(--amber); outline: 2px solid rgb(255 189 69 / 16%); }
.complaint-form button,
.complaint-response-form button { min-height: 42px; padding: 0 16px; border-color: var(--amber); background: var(--amber); color: #17130a; font-weight: 700; }
.complaint-form button:hover,
.complaint-response-form button:hover { background: #ffd078; color: #17130a; }
.complaint-section-title { margin: 20px 0 10px; color: var(--amber); font-size: 14px; }
.complaint-toolbar { padding: 12px 16px; }
.complaint-toolbar select { height: 38px; padding: 0 30px 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
.complaint-list { display: grid; gap: 12px; padding: 16px; }
.complaint-card { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.complaint-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.complaint-card-head h3 { margin: 5px 0 0; color: var(--text); font-size: 15px; }
.complaint-category { color: var(--amber); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.complaint-status { flex: 0 0 auto; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 700; }
.complaint-status--new { border-color: #d9b24c; background: rgb(231 181 53 / 12%); color: #d8aa36; }
.complaint-status--in_review { border-color: #5b9dc8; background: rgb(69 144 197 / 12%); color: #69add8; }
.complaint-status--resolved { border-color: #4b9b68; background: rgb(55 185 108 / 12%); color: #56bd78; }
.complaint-status--dismissed { border-color: #8a7777; background: rgb(130 115 115 / 12%); color: var(--muted); }
.complaint-meta { display: flex; flex-wrap: wrap; gap: 7px 18px; margin-top: 12px; color: var(--muted); font-size: 11px; }
.complaint-meta strong { color: var(--text); font-weight: 600; }
.complaint-description { margin: 12px 0 0; color: var(--text); font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.complaint-response-form { display: grid; grid-template-columns: minmax(170px, .75fr) minmax(240px, 1.7fr) auto; align-items: end; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.complaint-admin-response { margin-top: 13px; padding: 12px; border-left: 3px solid var(--amber); border-radius: 0 7px 7px 0; background: var(--bg); color: var(--text); font-size: 12px; }
.complaint-admin-response p { margin: 5px 0 0; line-height: 1.55; white-space: pre-wrap; }
#complaint-message:empty { display: none; }
.page-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
.page-toolbar label { color: var(--muted); }
.page-toolbar a { color: var(--amber); text-decoration: none; }
.page-toolbar a:hover { text-decoration: underline; }
.table-empty { padding: 22px; color: var(--muted); text-align: center; }
.status-cell--green { background: rgb(25 115 65 / 36%) !important; color: #b8f3cb !important; box-shadow: inset 0 0 0 1px rgb(60 190 110 / 35%); }
.status-cell--yellow { background: rgb(153 111 15 / 38%) !important; color: #ffe19a !important; box-shadow: inset 0 0 0 1px rgb(235 185 55 / 38%); }
.status-cell--red { background: rgb(147 43 43 / 38%) !important; color: #ffc0c0 !important; box-shadow: inset 0 0 0 1px rgb(220 80 80 / 38%); }
.dashboard-section { margin-top: var(--space-section); }
.dashboard-heading { margin: 0 0 16px; color: var(--text); font-size: 17px; line-height: 24px; font-weight: 650; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi-card, .dashboard-panel { border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--panel); }
.kpi-card { min-width: 0; padding: 20px; }
.kpi-label { color: var(--muted); font-size: 12px; }
.kpi-value { margin-top: 10px; font-size: clamp(20px, 2vw, 28px); line-height: 1.3; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-unit { display: inline-block; margin-left: 6px; color: var(--muted); font-size: 12px; line-height: 1.5; font-weight: 500; white-space: nowrap; }
.calculation-basis-note { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--muted); font-size: 12px; line-height: 1.7; }
.cycle-correction-note { display: block; margin-top: 4px; color: var(--amber); font-size: 11px; font-weight: 600; }
.dashboard-panel { margin-top: 12px; overflow: hidden; }
.dashboard-panel-title { padding: 16px 20px; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 20px; font-weight: 650; }
.status-summary { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
.status-chip { padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; }
.status-chip--green { color: #a8edbd; }
.status-chip--yellow { color: #ffe19a; }
.status-chip--red { color: #ffb7b7; }
.hourly-chart { display: grid; grid-template-columns: repeat(13, minmax(90px, 1fr)); gap: 8px; min-width: 1180px; padding: 14px; }
.hourly-chart-scroll { overflow-x: auto; }
.hour-card { padding: 10px; border: 1px solid var(--border-soft); border-radius: 8px; background: #0d1012; }
.hour-card-title { margin-bottom: 10px; color: var(--muted); font-size: 12px; text-align: center; }
.chart-label { display: flex; justify-content: space-between; gap: 6px; margin: 8px 0 4px; font-size: 11px; }
.bar-track { height: 7px; overflow: hidden; border-radius: 999px; background: #292e32; }
.bar-fill { height: 100%; border-radius: inherit; background: #7b858d; }
.bar-fill.status-cell--green, .bar-fill.status-cell--yellow, .bar-fill.status-cell--red { box-shadow: none; }
.bar-fill.status-cell--green { background: #37b96c !important; }
.bar-fill.status-cell--yellow { background: #e7b535 !important; }
.bar-fill.status-cell--red { background: #db5757 !important; }
.dashboard-insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.insight-card { display: grid; gap: 7px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 9px; background: #0e1113; }
.insight-card span { color: var(--muted); font-size: 11px; }
.insight-card strong { color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
.analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.analytics-grid .dashboard-panel { min-width: 0; margin: 0; }
.analytics-grid .chart-wide { grid-column: 1 / -1; }
.analytics-grid .status-panel, .analytics-grid .distribution-panel { grid-column: span 1; }
.chart-container { min-height: 250px; padding: 22px 24px 12px; }
.chart-container svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-panel-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--border); }
.chart-panel-header .dashboard-panel-title { padding: 0; border: 0; }
.chart-select { min-width: 210px; height: 36px; border: 1px solid #343a40; border-radius: 6px; background: #0d1013; color: var(--text); padding: 0 10px; font: inherit; }
.chart-grid-line { stroke: #2a3035; stroke-width: 1; }
.chart-axis-label { fill: #89939b; font: 11px "Segoe UI", Arial, sans-serif; }
.chart-axis-unit { fill: #89939b; font: 10px "Segoe UI", Arial, sans-serif; }
.chart-value-label { fill: #dce1e5; font: 10px "Segoe UI", Arial, sans-serif; }
.chart-target-line { stroke: #ffbd45; stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart-line { fill: none; stroke: #55a7ff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart-area { fill: rgb(85 167 255 / 12%); }
.chart-dot { stroke: #111416; stroke-width: 2; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 22px 18px; color: var(--muted); font-size: 11px; }
.chart-legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend-mark { display: inline-block; width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #55a7ff; }
.legend-mark.target { background: var(--amber); }
.legend-mark.status { background: linear-gradient(90deg, #37b96c 0 33%, #e7b535 33% 66%, #db5757 66%); }
.status-dashboard { display: flex; min-height: 190px; align-items: center; justify-content: flex-start; gap: 22px; padding: 18px 24px; }
.status-donut { display: grid; width: 142px; height: 142px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: conic-gradient(#343a40 0 100%); }
.status-donut-center { display: grid; width: 98px; height: 98px; place-content: center; border-radius: 50%; background: var(--panel); text-align: center; }
.status-donut-center strong { font-size: 24px; }
.status-donut-center span { color: var(--muted); font-size: 10px; }
.status-legend { display: grid; gap: 11px; color: #d9dee2; font-size: 12px; }
.status-legend-item { display: flex; align-items: center; gap: 8px; }
.distribution-percent { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.status-swatch { width: 9px; height: 9px; border-radius: 50%; }
.status-swatch.volume-morning { background: #55a7ff; }
.status-swatch.volume-midday { background: #ffbd45; }
.status-swatch.volume-afternoon { background: #37b96c; }
.distribution-note { padding: 0 24px 16px; color: var(--muted); font-size: 11px; }
.status-swatch.green { background: #37b96c; }
.status-swatch.yellow { background: #e7b535; }
.status-swatch.red { background: #db5757; }
.status-swatch.neutral { border: 1.5px solid #7e8890; background: transparent; }
.hourly-detail-panel { margin-top: 12px; }
.hourly-detail-table { min-width: 680px; }
.vt-table-scroll .hourly-detail-table th:first-child, .vt-table-scroll .hourly-detail-table td:first-child { width: 110px; min-width: 110px; }
.hourly-detail-table tbody td { text-align: center; }
.vt-table-scroll .audit-table th:first-child, .vt-table-scroll .audit-table td:first-child { width: 170px; min-width: 170px; }
.audit-table { min-width: 920px; }
.alert-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
.alert-intro { margin: 0; padding: 14px 16px 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.alert-toolbar select { height: 38px; padding: 0 32px 0 10px; border: 1px solid #343a40; border-radius: 6px; background: #0d1013; color: var(--text); font: inherit; }
.alert-summary { display: flex; flex-wrap: wrap; gap: 9px; padding: 0 16px 14px; }
.alert-count { padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 12px; }
.alert-count.warning { border-color: rgb(231 181 53 / 35%); color: #ffe19a; }
.alert-count.critical { border-color: rgb(219 87 87 / 38%); color: #ffb7b7; }
.alert-badge { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.alert-badge.warning { background: rgb(153 111 15 / 30%); color: #ffe19a; }
.alert-badge.critical { background: rgb(147 43 43 / 34%); color: #ffc0c0; }
.alert-table { min-width: 980px; }
.alert-table th:first-child, .alert-table td:first-child { width: 165px; min-width: 165px; }
.report-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.user-row-actions { display: grid; grid-template-columns: 112px 80px; align-items: center; gap: 8px; width: 200px; margin-inline: auto; }
.user-row-actions button { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 40px; padding: 0 10px; border-radius: 7px; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; }
.user-management-table th:last-child, .user-management-table td:last-child { width: 240px; min-width: 220px; padding: 12px 16px; }
@media (max-width: 760px) {
    .user-row-actions button { height: 44px; }
}
.user-delete-button { border-color: #b65a5a; background: #392023; color: #ffc0c0; }
.user-delete-button:hover { background: #54282c; }
html[data-theme="light"] .user-delete-button { border-color: #c17878; background: #fbe8e8; color: #882424; }
html[data-theme="light"] .user-delete-button:hover { background: #f3cccc; }
.report-toolbar .settings-note { flex: 1 1 280px; }
.report-sheet { display: grid; gap: 16px; padding: 22px; background: #e7eaed; }
.report-page { position: relative; min-height: 269mm; padding: 11mm 12mm 18mm; overflow: hidden; border: 1px solid #d3d7da; background: #fff; color: #202428; box-shadow: 0 8px 25px rgb(0 0 0 / 18%); }
.report-page h2, .report-page h3, .report-page p { color: #202428; }
.report-page-header { display: grid; grid-template-columns: 106px 1fr 130px; align-items: center; gap: 14px; padding-bottom: 13px; border-bottom: 1px solid #7b8185; }
.report-logo-stack { display: flex; align-items: center; gap: 6px; }
.report-page-header .report-icon { width: 50px; height: 50px; object-fit: contain; }
.report-page-header .report-ppa-logo { width: 44px; height: 58px; object-fit: contain; }
.report-page-header .report-wordmark { width: 130px; height: auto; }
.report-title { margin: 0; text-align: center; font-size: 20px; font-weight: 800; letter-spacing: .04em; }
.report-subtitle { margin: 4px 0 0; color: #596168 !important; text-align: center; font-size: 10px; }
.report-meta-list { display: grid; gap: 6px; margin: 13px 0 14px; font-size: 10px; }
.report-meta-list div { display: grid; grid-template-columns: 130px 1fr; gap: 8px; }
.report-meta-list span { font-weight: 700; }
.report-section-title { margin: 15px 0 8px; color: #25292d; font-size: 12px; font-weight: 800; }
.report-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 13px; }
.report-kpi { min-height: 48px; padding: 9px; border: 1px solid #c6cbd0; border-radius: 7px; background: #f8f9fa; }
.report-kpi span { display: block; margin-bottom: 5px; color: #667078; font-size: 9px; }
.report-kpi strong { font-size: 12px; }
.report-distribution { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.report-status-card { padding: 9px 10px; border: 1px solid #c6cbd0; border-radius: 7px; background: #fafbfc; }
.report-status-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; font-weight: 750; }
.report-status-head > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.report-status-dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #7e8890; }
.report-status-dot.green { background: #43ac62; }
.report-status-dot.yellow { background: #e6bf31; }
.report-status-dot.red { background: #d64c4c; }
.report-status-dot.neutral { border: 1px solid #7e8890; background: transparent; }
.report-status-count { margin-top: 4px; color: #69727a !important; font-size: 8px; }
.report-status-track { height: 5px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: #e0e3e6; }
.report-status-fill { height: 100%; border-radius: inherit; }
.report-status-fill.green { background: #43ac62; }
.report-status-fill.yellow { background: #e6bf31; }
.report-status-fill.red { background: #d64c4c; }
.report-status-fill.neutral { background: #7e8890; }
.report-volume-distribution { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.report-volume-card { min-width: 0; padding: 8px 9px; border: 1px solid #c6cbd0; border-radius: 7px; background: #fafbfc; }
.report-volume-head { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: #30363b; font-size: 8px; font-weight: 700; }
.report-volume-head strong { white-space: nowrap; }
.report-volume-value { margin-top: 7px; color: #202428; font-size: 10px; font-weight: 700; }
.report-volume-fill { height: 100%; border-radius: inherit; }
.report-volume-fill.morning { background: #438bd4; }
.report-volume-fill.midday { background: #d79a20; }
.report-volume-fill.afternoon { background: #43ac62; }
.report-status-value.warning { color: #b18d00; }
.report-status-value.critical { color: #c23d3d; }
.report-status-value.normal { color: #31864b; }
.report-hourly-table { min-width: 0; width: 100%; table-layout: fixed; border-collapse: collapse; border: 1px solid #bec4c9; border-radius: 0; background: #fff; color: #202428; box-shadow: none; }
.report-hourly-table th, .report-hourly-table td { position: static !important; width: auto !important; min-width: 0 !important; padding: 5px 4px; border: 1px solid #c7ccd1; background: #fff !important; color: #202428; font-size: 8px; text-align: center; white-space: nowrap; }
.report-hourly-table thead th { background: #30363b !important; color: #fff !important; font-size: 8px; }
.report-hourly-table th:first-child, .report-hourly-table td:first-child { width: 55px !important; min-width: 0 !important; text-align: left; }
.report-target-table th:first-child, .report-target-table td:first-child { width: 155px !important; text-align: left; }
.report-target-table { min-width: 0; }
.report-target-table th, .report-target-table td { font-size: 8px; }
.report-conclusion { margin: 12px 0 0; font-size: 9px; line-height: 1.5; }
.report-page-footer { position: absolute; right: 12mm; bottom: 7mm; left: 12mm; display: flex; justify-content: space-between; padding-top: 5px; border-top: 1px solid #aab0b5; color: #586169; font-size: 8px; }
.report-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.report-heading img { width: 210px; height: auto; }
.report-heading h2 { margin: 0; color: var(--amber); font-size: 21px; }
.report-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.report-meta div, .report-kpi { padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: #0d1012; }
.report-meta span, .report-kpi span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
.report-meta strong, .report-kpi strong { font-size: 14px; }
.report-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.report-section-title { margin: 20px 0 9px; color: var(--amber); font-size: 14px; }
.report-table { min-width: 900px; }
.report-table th:first-child, .report-table td:first-child { width: 95px; min-width: 95px; }
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.about-card { padding: 18px; border: 1px solid var(--border); border-radius: 9px; background: #0d1012; }
.about-card h3 { margin: 0 0 10px; color: var(--amber); font-size: 14px; }
.about-card p, .about-card li { color: #c4cbd0; font-size: 13px; line-height: 1.7; }
.about-card p { margin: 0; }
.about-card ul { margin: 0; padding-left: 18px; }
.about-copyright { grid-column: 1 / -1; padding: 14px 18px; color: var(--muted); text-align: center; font-size: 12px; }
.settings-wrap { padding: 16px; }
.settings-intro { margin: 0 0 14px; color: var(--muted); line-height: 1.55; }
#user-form {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) minmax(210px, 1fr) minmax(160px, .75fr) auto;
    align-items: end;
    gap: 14px;
    margin: 0 0 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--panel);
}
#user-form label { display: grid; min-width: 0; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 650; }
#user-form input,
#user-form select { width: 100%; min-width: 0; height: 42px; padding: 0 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; }
#user-form input:focus,
#user-form select:focus { border-color: var(--amber); outline: 2px solid rgb(255 189 69 / 16%); }
#user-form button { min-width: 122px; height: 42px; border-color: var(--amber); background: var(--amber); color: #17130a; font-weight: 700; }
#user-form button:hover { background: #ffd078; color: #17130a; }
#user-message:not(:empty) { margin: 0 0 12px; }
.settings-table { min-width: 760px; }
.settings-table th, .settings-table td { padding: 10px; }
.settings-table th:first-child, .settings-table td:first-child { position: static; width: auto; min-width: 0; padding: 10px; text-align: left; }
.settings-table select, .settings-table input { width: 100%; min-width: 120px; }
.settings-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.settings-note { color: var(--muted); font-size: 12px; }
.header-actions { display: contents; }
.theme-toggle { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 104px; min-width: 104px; height: 40px; }
.theme-toggle span:first-child { color: var(--amber); font-size: 16px; }
body.auth-required > main, body.auth-required #vt-sidebar { visibility: hidden; }
.auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 30000;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(410px, .85fr);
    padding: 0;
    background: linear-gradient(90deg, rgb(4 7 8 / 30%) 0%, rgb(4 7 8 / 48%) 48%, rgb(4 7 8 / 62%) 100%), url("/static/images/login-excavator.jpeg") center 64% / cover no-repeat;
}
.auth-overlay::before { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 43% 78% at 78% 52%, rgb(3 5 6 / 58%) 0%, rgb(3 5 6 / 39%) 55%, rgb(3 5 6 / 0%) 100%); content: ""; pointer-events: none; }
.auth-visual {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: flex;
    min-height: 100vh;
    align-items: flex-start;
    padding: clamp(32px, 6vw, 84px);
    overflow: hidden;
    background: transparent;
}
.auth-visual::before { display: none; }
.auth-visual::after { display: none; }
.auth-visual-content { position: relative; z-index: 1; width: 100%; margin-top: clamp(30px, 8vh, 88px); animation: login-logo-enter .9s cubic-bezier(.2, .7, .2, 1) both; }
.auth-brand { display: inline-flex; align-items: center; gap: 18px; }
.auth-brand-icon { display: block; width: clamp(58px, 6vw, 82px); height: clamp(58px, 6vw, 82px); object-fit: contain; filter: drop-shadow(0 4px 10px rgb(255 189 69 / 16%)); animation: logo-icon-float 4.2s ease-in-out infinite; }
.auth-brand-wordmark { display: block; width: clamp(260px, 34vw, 480px); height: auto; filter: drop-shadow(0 2px 3px rgb(255 189 69 / 10%)); animation: logo-wordmark-glow 5s ease-in-out infinite; }
.auth-tagline { display: flex; align-items: center; gap: 13px; margin: 20px 0 0 4px; color: #e9edf0; font-size: clamp(12px, 1.2vw, 16px); font-weight: 600; letter-spacing: .22em; line-height: 1.6; text-transform: uppercase; }
.auth-tagline::before { width: 32px; height: 2px; flex: 0 0 auto; border-radius: 2px; background: linear-gradient(90deg, var(--amber), rgb(255 189 69 / 20%)); content: ""; }
.auth-tagline strong { color: var(--amber); font-weight: 750; }
.auth-form-panel { position: relative; z-index: 1; display: grid; min-height: 100vh; place-items: center; padding: 48px clamp(28px, 6vw, 80px); background: transparent; }
.auth-card { width: min(100%, 430px); padding: clamp(25px, 3vw, 38px); border: 1px solid rgb(255 255 255 / 17%); border-radius: 17px; background: rgb(8 11 13 / 54%); box-shadow: 0 20px 70px rgb(0 0 0 / 28%); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); animation: login-card-enter .75s .12s cubic-bezier(.2, .7, .2, 1) both; }
.auth-card h2 { margin: 0 0 8px; color: #f3f5f6; font-size: 29px; font-weight: 700; letter-spacing: -.3px; }
.auth-card > p { margin: 0 0 32px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.auth-form { display: grid; gap: 17px; }
.auth-form label { display: grid; gap: 8px; color: #d7dce0; font-size: 13px; font-weight: 600; }
.auth-form input { width: 100%; height: 46px; border-color: rgb(255 255 255 / 18%); border-radius: 7px; background: rgb(20 24 27 / 68%); color: #f3f5f6; }
.auth-form .remember-row { display: inline-flex; align-items: center; justify-self: start; gap: 9px; color: var(--muted); font-size: 13px; font-weight: 500; }
.auth-form .remember-row input { width: 16px; height: 16px; margin: 0; accent-color: var(--amber); }
.auth-form input:focus { border-color: var(--amber); outline: 2px solid rgb(255 189 69 / 16%); }
.password-field { position: relative; display: block; min-width: 0; }
.auth-form .password-field input { padding-right: 52px; }
.auth-form .password-toggle { position: absolute; top: 1px; right: 1px; display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--amber); }
.password-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.password-eye-slash { display: none; }
.password-toggle[aria-pressed="true"] .password-eye-slash { display: block; }
button:focus-visible, select:focus-visible, .vt-table-scroll:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.auth-form button[type="submit"] { height: 46px; margin-top: 3px; border-color: var(--amber); background: var(--amber); color: #17130a; font-weight: 750; }
.auth-form button[type="submit"]:hover { background: #ffd078; color: #17130a; }
.captcha-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.captcha-image { display: block; width: 220px; max-width: 100%; height: 68px; margin-top: 2px; border: 1px solid #3b4247; border-radius: 7px; }
.captcha-refresh { height: 38px; padding: 0 10px; color: #d7dce0; font-size: 12px; }
.auth-message { min-height: 20px; margin-top: -7px; color: #ffb7b7; font-size: 13px; }
.auth-footnote { margin-top: 20px; padding-top: 15px; border-top: 1px solid rgb(255 255 255 / 9%); color: #77818a; font-size: 11px; line-height: 1.6; letter-spacing: .02em; text-align: center; }
@keyframes login-photo-drift { from { transform: scale(1); } to { transform: scale(1.075); } }
@keyframes login-logo-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes logo-icon-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-1deg); } }
@keyframes logo-wordmark-glow { 0%, 100% { filter: drop-shadow(0 2px 3px rgb(255 189 69 / 10%)); } 50% { filter: drop-shadow(0 0 12px rgb(255 189 69 / 22%)); } }
@keyframes login-card-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .auth-visual::before, .auth-visual-content, .auth-brand-icon, .auth-brand-wordmark, .auth-card { animation: none; }
}
@media (max-width: 900px) {
    .auth-overlay { grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); }
    .auth-visual { padding: 42px; }
    .auth-form-panel { padding: 36px 30px; }
}
@media (max-width: 680px) {
    .auth-overlay { display: block; overflow-y: auto; background-image: linear-gradient(180deg, rgb(4 7 8 / 28%), rgb(4 7 8 / 54%)), url("/static/images/login-excavator.jpeg"); background-position: center, 58% center; background-size: cover; background-attachment: scroll; }
    .auth-overlay::before { background: radial-gradient(ellipse 100% 52% at 50% 72%, rgb(3 5 6 / 58%) 0%, rgb(3 5 6 / 35%) 58%, rgb(3 5 6 / 0%) 100%); }
    .auth-visual { position: absolute; inset: 0; min-height: 100%; align-items: flex-start; padding: 32px 24px; }
    .auth-visual-content { align-self: flex-start; margin-top: clamp(18px, 5vh, 44px); }
    .auth-brand { gap: 10px; }
    .auth-brand-icon { width: 40px; height: 40px; }
    .auth-brand-wordmark { width: min(220px, 62vw); }
    .auth-tagline { gap: 9px; margin-top: 16px; font-size: 10px; letter-spacing: .13em; }
    .auth-tagline::before { width: 22px; }
    .auth-form-panel { position: relative; min-height: auto; width: min(calc(100% - 32px), 460px); margin: min(32vh, 250px) auto 24px; padding: 0; background: transparent; }
    .auth-card { width: 100%; padding: 25px 22px; border-color: rgb(255 255 255 / 20%); border-radius: 15px; background: rgb(8 11 13 / 57%); box-shadow: 0 16px 48px rgb(0 0 0 / 25%); }
    .auth-card h2 { font-size: 25px; }
    .auth-card > p { margin-bottom: 22px; }
}

#vt-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 10000;
    display: flex;
    width: 230px;
    flex-direction: column;
    padding: 24px 14px;
    border-right: 1px solid #34383d;
    background: #111315;
}

#vt-sidebar .vt-profile { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 66px; margin: 0 0 25px; padding: 10px; border: 1px solid #30363b; border-radius: 10px; background: rgb(255 255 255 / 3%); }
#vt-sidebar .vt-profile-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid rgb(255 189 69 / 50%); border-radius: 50%; background: rgb(255 189 69 / 12%); color: #ffbd45; font-size: 15px; font-weight: 800; text-transform: uppercase; }
#vt-sidebar .vt-profile-copy { display: grid; min-width: 0; gap: 3px; }
#vt-sidebar .vt-profile-name { overflow: hidden; color: #e9edf0; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
#vt-sidebar .vt-profile-role { color: #9ba5ad; font-size: 10px; }
#vt-sidebar .vt-menu-title { padding: 0 12px 10px; color: #858b91; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
#vt-sidebar .vt-nav { display: flex; min-height: 0; flex-direction: column; gap: 5px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
#vt-sidebar .vt-nav::-webkit-scrollbar:horizontal { display: none; }
#vt-sidebar .vt-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 7px; color: #c5c9ce; font-size: 14px; font-weight: 600; text-decoration: none; }
#vt-sidebar .vt-nav a:hover { background: #25292d; color: #fff; }
#vt-sidebar .vt-nav a.active { border-left: 3px solid var(--amber); background: #3a3020; color: var(--amber); }
#vt-sidebar .vt-icon { width: 20px; font-size: 17px; text-align: center; }
#vt-sidebar .vt-nav-badge { display: inline-grid; min-width: 20px; height: 20px; place-items: center; margin-left: auto; padding: 0 6px; border: 1px solid rgb(255 189 69 / 35%); border-radius: 999px; background: rgb(255 189 69 / 14%); color: var(--amber); font-size: 10px; font-variant-numeric: tabular-nums; line-height: 1; }
#vt-sidebar .vt-footer { margin-top: auto; padding: 18px 12px 0; border-top: 1px solid #252a2e; color: #77818a; font-size: 10px; line-height: 1.6; }
#vt-sidebar .vt-footer-copy { margin-top: 12px; }
#vt-sidebar .vt-complaint-link { display: flex; min-height: 44px; align-items: center; gap: 11px; margin-bottom: 9px; padding: 0 11px; border: 1px solid #39352b; border-radius: 8px; background: linear-gradient(110deg, rgb(255 189 69 / 10%), rgb(255 255 255 / 2%)); color: #e8d6ad; font-size: 12px; font-weight: 650; text-decoration: none; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
#vt-sidebar .vt-complaint-link:hover { transform: translateY(-1px); border-color: rgb(255 189 69 / 55%); background: rgb(255 189 69 / 14%); color: var(--amber); }
#vt-sidebar .vt-complaint-link.active { border-color: rgb(255 189 69 / 60%); background: rgb(255 189 69 / 16%); color: var(--amber); }
#vt-sidebar .vt-complaint-icon { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
#vt-sidebar .vt-logout-button { display: flex; width: 100%; align-items: center; justify-content: flex-start; gap: 11px; padding-inline: 11px; border-color: #54383a; background: rgb(180 65 65 / 9%); color: #e5a3a3; font-weight: 650; text-align: left; }
#vt-sidebar .vt-logout-button:hover { border-color: #b85a5a; background: rgb(180 65 65 / 18%); color: #ffd3d3; }
#vt-sidebar .vt-logout-button span:first-child { width: 19px; flex: 0 0 19px; font-size: 17px; line-height: 1; text-align: center; }
#vt-sidebar-backdrop { display: none; }

#vt-formula-tooltip {
    position: fixed;
    z-index: 20000;
    display: none;
    width: max-content;
    max-width: min(320px, calc(100vw - 24px));
    padding: 11px 14px;
    border: 1px solid #4b5359;
    border-radius: 8px;
    background: #24282b;
    color: #f4f5f6;
    font-size: 13px;
    line-height: 1.55;
    pointer-events: none;
    white-space: normal;
    box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
}

@media (max-width: 1199px) {
    .controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
    .refresh-group { grid-column: 1 / -1; justify-content: flex-end; border: 0; padding: 0; }
    .refresh-group > button { flex: 0 0 auto; }
    table { min-width: 1120px; }
    tbody th, td:first-child { width: 240px; min-width: 240px; }
    th, td { padding: 12px 8px; }
}

@media (max-width: 768px) {
    body { padding: 0 12px 12px; }
    .chart-container { min-height: 220px; padding: 16px 14px 10px; }
    .chart-panel-header { gap: 10px; padding: 13px 14px; }
    .chart-legend { gap: 10px; padding: 0 14px 14px; }
    body.vt-menu-open { overflow: hidden; }
    .topbar { position: relative; top: auto; z-index: 10; gap: 12px; padding-top: 14px; padding-bottom: 12px; margin-top: 0; margin-bottom: 12px; background: var(--bg); }
    .brand-lockup { display: flex; min-width: 0; align-items: center; gap: 12px; }
    .brand-copy { min-width: 0; }
    .mobile-menu-toggle { display: flex; width: 42px; height: 42px; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; border-color: var(--border); background: var(--panel); }
    .mobile-menu-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--amber); transition: transform .18s ease, opacity .18s ease; }
    body.vt-menu-open .mobile-menu-toggle span:first-child { transform: translateY(7px) rotate(45deg); }
    body.vt-menu-open .mobile-menu-toggle span:nth-child(2) { opacity: 0; }
    body.vt-menu-open .mobile-menu-toggle span:last-child { transform: translateY(-7px) rotate(-45deg); }
    .header-actions { width: 100%; justify-content: flex-end; gap: 8px; }
    .controls { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 8px; }
    #vt-sidebar { width: min(290px, 86vw); padding: 18px 14px; transform: translateX(-102%); transition: transform .24s ease; }
    body.vt-menu-open #vt-sidebar { transform: translateX(0); }
    #vt-sidebar .vt-profile { justify-content: flex-start; min-height: 58px; margin: 0 0 20px; padding: 9px; border-color: #30363b; background: rgb(255 255 255 / 3%); }
    #vt-sidebar .vt-profile-copy { display: grid; }
    #vt-sidebar .vt-profile-avatar { width: 38px; height: 38px; }
    #vt-sidebar .vt-footer { display: block; padding: 14px 8px 0; }
    #vt-sidebar .vt-footer-copy { display: block; margin-top: 10px; }
    #vt-sidebar .vt-logout-button { height: 40px; justify-content: flex-start; padding: 0 11px; border-color: #54383a; background: rgb(180 65 65 / 9%); color: #e5a3a3; }
    #vt-sidebar .vt-logout-button span:last-child { display: inline; }
    #vt-sidebar .vt-menu-title { display: block; }
    #vt-sidebar .vt-nav { gap: 5px; }
    #vt-sidebar .vt-nav a { justify-content: flex-start; min-height: 46px; padding: 12px 14px; font-size: 14px; }
    #vt-sidebar .vt-icon { flex: 0 0 20px; font-size: 18px; }
    .brand-wordmark { width: min(205px, 52vw); height: 34px; }
    .subtitle { font-size: 9px; letter-spacing: .11em; }
    .theme-toggle { min-width: 40px; padding: 0 9px; }
    .theme-toggle span:last-child { display: none; }
    #vt-sidebar-backdrop { position: fixed; inset: 0; z-index: 9999; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: rgb(0 0 0 / 58%); opacity: 0; pointer-events: none; transition: opacity .24s ease; }
    body.vt-menu-open #vt-sidebar-backdrop { opacity: 1; pointer-events: auto; }
    .unit-control { min-width: 0; }
    .unit-select { flex: 1; min-width: 0; }
    .range-navigation { min-width: 0; }
    .range-picker { min-width: 0; flex: 1; }
    .range-toggle { width: 100%; min-width: 0; }
    .range-toggle span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .refresh-group { min-width: 0; padding: 0; border: 0; }
    .refresh-group > button { flex: 1; }
    .refresh-select { min-width: 102px; }
    table { min-width: 1050px; }
    tbody th, td:first-child { width: 210px; min-width: 210px; }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .analytics-grid { grid-template-columns: 1fr; }
    .analytics-grid .chart-wide { grid-column: auto; }
    .analytics-grid .status-panel, .analytics-grid .distribution-panel { grid-column: auto; }
    .dashboard-insights { grid-template-columns: 1fr; }
    .status-dashboard { flex-wrap: wrap; }
    .report-meta { grid-template-columns: 1fr; }
    .report-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-grid { grid-template-columns: 1fr; }
    .about-copyright { grid-column: auto; }
    #user-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
    #user-form button { width: 100%; }
    .complaint-form { gap: 12px; padding: 14px; }
    .complaint-response-form { grid-template-columns: 1fr; }
    .range-menu { right: 0; left: auto; grid-template-columns: 1fr; width: min(420px, calc(100vw - 24px)); }
    .range-custom { border-right: 0; border-bottom: 1px solid #343a40; }
    .range-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    body { padding: 10px; }
    .brand-wordmark { width: min(176px, 48vw); height: 30px; }
    .subtitle { margin-top: 5px; font-size: 8px; }
    .header-actions { align-items: center; }
    .controls { gap: 7px; }
    .range-arrow { width: 34px; flex: 0 0 34px; }
    .refresh-group { flex-wrap: wrap; }
    .refresh-group > button { min-width: 90px; }
    .range-menu { position: fixed; top: auto; right: 10px; left: 10px; width: auto; max-height: calc(100dvh - 24px); overflow-y: auto; }
    .range-presets { gap: 2px 6px; padding: 9px; }
    .kpi-grid, .report-kpi-grid { grid-template-columns: 1fr; }
    .kpi-card { min-height: 94px; }
    #user-form { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .complaint-form { grid-template-columns: minmax(0, 1fr); }
    .complaint-form-wide { grid-column: auto; }
    .complaint-form button { width: 100%; }
    .complaint-list { padding: 12px; }
    .complaint-card { padding: 13px; }
    .complaint-card-head { flex-direction: column; }
    .complaint-status { align-self: flex-start; }
    .panel-title, .dashboard-panel-title { padding: 12px; }
}
@media print {
    body.printing-report { padding: 0 !important; background: #fff !important; color: #111 !important; }
    body.printing-report #vt-sidebar,
    body.printing-report .topbar,
    body.printing-report #dashboard-view,
    body.printing-report .report-toolbar,
    body.printing-report #login-overlay { display: none !important; }
    body.printing-report > main.page { width: 100%; max-width: none; margin: 0; }
    body.printing-report #secondary-view { display: block !important; overflow: visible; border: 0; border-radius: 0; background: #fff; color: #111; }
    body.printing-report #secondary-view * { color: #111 !important; box-shadow: none !important; }
    body.printing-report #secondary-view .panel-title,
    body.printing-report #secondary-view .report-section-title,
    body.printing-report #secondary-view .report-heading h2 { color: #111 !important; }
    body.printing-report #secondary-view .report-sheet { display: block; padding: 0; background: #fff; }
    body.printing-report #secondary-view .report-page { min-height: 269mm; margin: 0; border: 0; box-shadow: none; break-after: page; page-break-after: always; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    body.printing-report #secondary-view .report-page:last-child { break-after: auto; page-break-after: auto; }
    body.printing-report #secondary-view .report-page-header { border-color: #777; }
    body.printing-report #secondary-view .report-page-header img { object-fit: contain; }
    body.printing-report #secondary-view .report-status-fill { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    body.printing-report #secondary-view .report-status-value.warning { color: #9c7b00 !important; }
    body.printing-report #secondary-view .report-status-value.critical { color: #b52c2c !important; }
    body.printing-report #secondary-view .report-status-value.normal { color: #277b3f !important; }
    body.printing-report #secondary-view .report-meta div,
    body.printing-report #secondary-view .report-kpi { background: #fff !important; border-color: #bbb; }
    body.printing-report #secondary-view .vt-table-scroll { overflow: visible; border-color: #aaa; }
    body.printing-report #secondary-view .report-table { width: 100%; min-width: 0; table-layout: auto; }
    body.printing-report #secondary-view .report-table th,
    body.printing-report #secondary-view .report-table td { position: static !important; width: auto !important; min-width: 0 !important; padding: 5px; background: #fff !important; border-color: #bbb; font-size: 8px; white-space: normal; }
    @page { size: A4 portrait; margin: 0; }
}
html[data-theme="light"] {
    color-scheme: light;
    --bg: #f2f4f6;
    --panel: #ffffff;
    --panel-soft: #e8edf0;
    --border: #cbd2d8;
    --border-soft: #dce1e5;
    --text: #20272d;
    --muted: #66727a;
    --amber: #a96c00;
    --brand-vision: #263441;
    --brand-track: #ad741e;
    --control-bg: #ffffff;
    --scroll-track: #eef1f4;
    --scroll-thumb: #b5bec8;
}
html[data-theme="light"] body { background: var(--bg); color: var(--text); }
html[data-theme="light"] .topbar { border-color: var(--border); }
html[data-theme="light"] .subtitle { color: #53616a; }
html[data-theme="light"] .controls { border-color: var(--border); background: #fff; box-shadow: 0 3px 12px rgb(24 39 48 / 5%); }
html[data-theme="light"] .refresh-group { border-color: var(--border); }
html[data-theme="light"] input,
html[data-theme="light"] button,
html[data-theme="light"] select { border-color: #c4ccd2; background: #fff; color: var(--text); }
html[data-theme="light"] button:hover { border-color: var(--amber); color: #8a5900; }
html[data-theme="light"] .panel,
html[data-theme="light"] .dashboard-panel,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .insight-card,
html[data-theme="light"] .hour-card { border-color: var(--border); background: var(--panel); }
html[data-theme="light"] .panel-title,
html[data-theme="light"] .dashboard-panel-title { border-color: var(--border); color: var(--text); }
html[data-theme="light"] .vt-table-scroll { border-color: var(--border); }
html[data-theme="light"] .vt-table-scroll thead th { background: #e8edf0; color: #20272d; border-color: #cbd2d8; }
html[data-theme="light"] .vt-table-scroll table tbody td { background: #fff; color: #273139; border-color: #e0e4e7; }
html[data-theme="light"] .vt-table-scroll table th:first-child,
html[data-theme="light"] .vt-table-scroll table td:first-child { background: #f0f3f5; color: #20272d; border-color: #d4dade; }
html[data-theme="light"] .vt-table-scroll table thead th:first-child { background: #e1e7eb; }
html[data-theme="light"] .vt-table-scroll tbody tr:hover td { background: #f0f4f6; }
html[data-theme="light"] .vt-table-scroll tbody tr:hover td:first-child { background: #e4eaee; color: #8b5900; }
html[data-theme="light"] .vt-table-scroll table td.status-cell--green { background: #e1f2e6 !important; color: #176535 !important; box-shadow: inset 0 0 0 1px #a6d8b5; }
html[data-theme="light"] .vt-table-scroll table td.status-cell--yellow { background: #fff2cc !important; color: #765300 !important; box-shadow: inset 0 0 0 1px #e4c66b; }
html[data-theme="light"] .vt-table-scroll table td.status-cell--red { background: #f8e0e0 !important; color: #8f2626 !important; box-shadow: inset 0 0 0 1px #e0aaaa; }
html[data-theme="light"] .mobile-metric-card.status-cell--green { background: #edf7f0 !important; color: #176535 !important; box-shadow: inset 0 0 0 1px #badcc5; }
html[data-theme="light"] .mobile-metric-card.status-cell--yellow { background: #fff7e2 !important; color: #765300 !important; box-shadow: inset 0 0 0 1px #e9d59b; }
html[data-theme="light"] .mobile-metric-card.status-cell--red { background: #fbeeee !important; color: #8f2626 !important; box-shadow: inset 0 0 0 1px #e8c0c0; }

/* Stronger daylight contrast for hourly readings on desktop and mobile. */
html[data-theme="light"] .hourly-performance-panel { border-color: #aebdc9; }
html[data-theme="light"] .hourly-table-scroll { border-color: #aebdc9; }
html[data-theme="light"] #hourly-performance-table th,
html[data-theme="light"] #hourly-performance-table td { border-color: #afbec9; }
html[data-theme="light"] #hourly-performance-table thead th { background: #cdd8e2; color: #172c3d; font-weight: 750; }
html[data-theme="light"] #hourly-performance-table thead th:first-child { background: #bdcdda; }
html[data-theme="light"] #hourly-performance-table tbody th { background: #e0e8ef; color: #20374a; font-weight: 700; }
html[data-theme="light"] #hourly-performance-table tbody td { color: #33485a; font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-theme="light"] #hourly-performance-table td.status-cell--green,
html[data-theme="light"] .hourly-performance-panel .mobile-metric-card.status-cell--green { background: #c5e7cf !important; color: #124d2a !important; box-shadow: inset 0 0 0 1px #6ca780; }
html[data-theme="light"] #hourly-performance-table td.status-cell--yellow,
html[data-theme="light"] .hourly-performance-panel .mobile-metric-card.status-cell--yellow { background: #ffe5a3 !important; color: #634300 !important; box-shadow: inset 0 0 0 1px #c49a38; }
html[data-theme="light"] #hourly-performance-table td.status-cell--red,
html[data-theme="light"] .hourly-performance-panel .mobile-metric-card.status-cell--red { background: #efc5c5 !important; color: #7a2020 !important; box-shadow: inset 0 0 0 1px #c17878; }
html[data-theme="light"] .hourly-performance-panel .mobile-metric-card { border-color: #aebdc9; }
html[data-theme="light"] .hourly-performance-panel .mobile-metric-label { font-weight: 700; }
html[data-theme="light"] .hourly-performance-panel .mobile-metric-unit { opacity: 1; }
html[data-theme="light"] .hourly-performance-panel .mobile-hour-navigation select,
html[data-theme="light"] .hourly-performance-panel .mobile-hour-navigation button { border-color: #96aabc; color: #20374a; background: #e0e8ef; }
html[data-theme="light"] .range-menu { border-color: #c8d0d5; background: #fff; box-shadow: 0 12px 32px rgb(0 0 0 / 16%); }
html[data-theme="light"] .range-custom { border-color: #d7dde1; }
html[data-theme="light"] .range-date-field { color: #39454d; }
html[data-theme="light"] .range-presets button { color: #276b99; }
html[data-theme="light"] .range-presets button:hover { border-color: #d8e0e5; background: #f0f4f6; color: #174b70; }
html[data-theme="light"] .chart-grid-line { stroke: #d9dfe3; }
html[data-theme="light"] .chart-axis-label,
html[data-theme="light"] .chart-axis-unit { fill: #59656d; }
html[data-theme="light"] .chart-value-label { fill: #28343b; }
html[data-theme="light"] .chart-dot { stroke: #fff; }
html[data-theme="light"] .chart-panel-header { border-color: var(--border); }
html[data-theme="light"] .status-dashboard { color: var(--text); }
html[data-theme="light"] .status-donut-center { background: #fff; color: var(--text); }
html[data-theme="light"] .status-legend { color: #354149; }
html[data-theme="light"] .dashboard-insights { color: var(--text); }
html[data-theme="light"] .bar-track { background: #dfe4e7; }
html[data-theme="light"] #vt-sidebar { border-color: #d1d8dd; background: #fff; }
html[data-theme="light"] #vt-sidebar .vt-nav a { color: #47545c; }
html[data-theme="light"] #vt-sidebar .vt-nav a:hover { background: #eef2f4; color: #20272d; }
html[data-theme="light"] #vt-sidebar .vt-nav a.active { border-color: var(--amber); background: #fff3d9; color: #8b5900; }
html[data-theme="light"] #vt-sidebar .vt-complaint-link { border-color: #ead9b4; background: linear-gradient(110deg, #fff8e9, #fff 88%); color: #72500f; }
html[data-theme="light"] #vt-sidebar .vt-complaint-link:hover,
html[data-theme="light"] #vt-sidebar .vt-complaint-link.active { border-color: #e2bf74; background: #fff1d1; color: #805100; }
html[data-theme="light"] #vt-sidebar .vt-menu-title,
html[data-theme="light"] #vt-sidebar .vt-footer { color: #727e86; }
html[data-theme="light"] #vt-sidebar .vt-footer { border-color: #e0e4e7; }
/* Sidebar visual identity for both themes */
#vt-sidebar {
    background: linear-gradient(165deg, #171a1d 0%, #101214 46%, #0c0e10 100%);
    border-right-color: #30363b;
    box-shadow: 10px 0 32px rgb(0 0 0 / 12%);
}
#vt-sidebar .vt-profile { border-color: #2d3338; background: linear-gradient(120deg, rgb(255 189 69 / 8%), rgb(255 255 255 / 2%)); }
#vt-sidebar .vt-menu-title { padding-bottom: 12px; font-weight: 700; }
#vt-sidebar .vt-nav a {
    min-height: 46px;
    border: 1px solid transparent;
    border-left-width: 3px;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
#vt-sidebar .vt-nav a:hover { transform: translateX(2px); }
#vt-sidebar .vt-nav a.active { box-shadow: inset 0 0 18px rgb(255 189 69 / 5%); }
#vt-sidebar .vt-nav a.active .vt-icon { filter: drop-shadow(0 0 5px rgb(255 189 69 / 30%)); }
#vt-sidebar .vt-footer { padding-top: 16px; }
#vt-sidebar .vt-logout-button { transition: background .18s ease, border-color .18s ease, color .18s ease; }
html[data-theme="light"] #vt-sidebar {
    background: linear-gradient(160deg, #ffffff 0%, #f8fafb 52%, #f0f4f6 100%);
    border-right-color: #d7dfe4;
    box-shadow: 10px 0 32px rgb(34 50 60 / 7%);
}
html[data-theme="light"] #vt-sidebar .vt-profile { border-color: #e1e7eb; background: linear-gradient(120deg, #fff7e6, #ffffff 78%); }
html[data-theme="light"] #vt-sidebar .vt-profile-avatar { border-color: #e5c57b; background: #fff0c8; color: #875600; }
html[data-theme="light"] #vt-sidebar .vt-profile-name { color: #27343d; }
html[data-theme="light"] #vt-sidebar .vt-profile-role { color: #75828a; }
html[data-theme="light"] #vt-sidebar .vt-menu-title { color: #85919a; }
html[data-theme="light"] #vt-sidebar .vt-nav a { color: #43515a; }
html[data-theme="light"] #vt-sidebar .vt-nav a:hover {
    border-color: #e5eaed;
    background: #f1f4f6;
    color: #20272d;
}
html[data-theme="light"] #vt-sidebar .vt-nav a.active {
    border-color: #f0d59c;
    border-left-color: #b87500;
    background: linear-gradient(105deg, #fff1d1, #fff9ec);
    color: #805100;
    box-shadow: 0 5px 14px rgb(114 79 12 / 8%);
}
html[data-theme="light"] #vt-sidebar .vt-nav a.active .vt-icon { color: #a86900; filter: none; }
html[data-theme="light"] #vt-sidebar .vt-nav-badge { border-color: #e5c57b; background: #fff0c8; color: #875600; }
html[data-theme="light"] #vt-sidebar .vt-complaint-link .vt-nav-badge { border-color: #e5c57b; background: #fff0c8; color: #875600; }
html[data-theme="light"] #vt-sidebar .vt-footer {
    border-top-color: #e1e7eb;
    color: #74818a;
}
html[data-theme="light"] #vt-sidebar .vt-logout-button { border-color: #ecd6d6; background: #fff7f7; color: #934545; }
html[data-theme="light"] #vt-sidebar .vt-logout-button:hover { border-color: #d8a2a2; background: #fceaea; color: #762d2d; }
html[data-theme="light"] .page-toolbar,
html[data-theme="light"] .alert-toolbar { color: #354149; }
html[data-theme="light"] .status-chip { border-color: #cbd2d8; }
html[data-theme="light"] .status-chip--green { color: #237640; }
html[data-theme="light"] .status-chip--yellow { color: #8b6900; }
html[data-theme="light"] .status-chip--red { color: #a83535; }
html[data-theme="light"] .alert-count.warning { border-color: #e2c46b; background: #fff6d8; color: #765300; }
html[data-theme="light"] .alert-count.critical { border-color: #e0aaaa; background: #fbe9e9; color: #8f2626; }
html[data-theme="light"] .alert-badge.warning { background: #fff0bd; color: #765300; }
html[data-theme="light"] .alert-badge.critical { background: #f8dddd; color: #8f2626; }
html[data-theme="light"] .alert-intro { color: #53616a; }
html[data-theme="light"] .alert-toolbar select { border-color: #c4ccd2; background: #fff; color: #20272d; }
html[data-theme="light"] .complaint-form button,
html[data-theme="light"] .complaint-response-form button { border-color: var(--amber); background: var(--amber); color: #17130a; }
html[data-theme="light"] .about-card,
html[data-theme="light"] .report-meta div,
html[data-theme="light"] .report-kpi { border-color: var(--border); background: #fff; }
html[data-theme="light"] .about-card p,
html[data-theme="light"] .about-card li { color: #43515a; }
html[data-theme="light"] .auth-overlay { background-image: linear-gradient(90deg, rgb(5 10 15 / 22%) 0%, rgb(5 10 15 / 38%) 48%, rgb(5 10 15 / 48%) 100%), url("/static/images/login-excavator.jpeg"); }
html[data-theme="light"] .auth-overlay::before { background: radial-gradient(ellipse 43% 78% at 78% 52%, rgb(3 5 6 / 38%) 0%, rgb(3 5 6 / 23%) 55%, rgb(3 5 6 / 0%) 100%); }
html[data-theme="light"] .auth-form-panel { background: transparent; }
html[data-theme="light"] .auth-card { border-color: rgb(255 255 255 / 48%); background: rgb(248 250 251 / 82%); box-shadow: 0 18px 55px rgb(5 15 22 / 18%); }
html[data-theme="light"] .auth-card h2 { color: #20272d; }
html[data-theme="light"] .auth-card > p,
html[data-theme="light"] .auth-form label { color: #56636b; }
html[data-theme="light"] .auth-form input { border-color: rgb(52 65 74 / 28%); background: rgb(255 255 255 / 76%); color: #20272d; }
html[data-theme="light"] .auth-form .remember-row { color: #56636b; }
html[data-theme="light"] .auth-footnote { border-color: #dce2e6; color: #69757d; }
html[data-theme="light"] .table-empty,
html[data-theme="light"] .page-message { color: #66727a; }
html[data-theme="light"] #vt-formula-tooltip { border-color: #cbd2d8; background: #fff; color: #20272d; box-shadow: 0 8px 24px rgb(0 0 0 / 16%); }
/* Jetson heartbeat connection timeline */
.device-availability-panel { padding-bottom: 10px; }
.device-metrics-panel { margin-top: 12px; }
.device-metrics-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border); }
.device-metrics-header .dashboard-panel-title { border: 0; }
.device-metrics-header label { display: flex; align-items: center; gap: 8px; padding: 8px 14px; color: var(--muted); font-size: 12px; }
.device-metrics-header select { min-width: 180px; max-width: 300px; height: 36px; padding: 0 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
.device-metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.device-metric-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); }
.device-metric-card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px 4px; color: var(--muted); font-size: 12px; }
.device-metric-card-title strong { color: var(--text); font-size: 17px; }
.device-metric-card svg { display: block; width: 100%; height: auto; overflow: visible; }
.device-metric-gridline { stroke: var(--border); stroke-dasharray: 3 4; }
.device-metric-axis { fill: var(--muted); font: 10px "Segoe UI", Arial, sans-serif; }
.device-metric-empty { display: grid; min-height: 135px; place-items: center; padding: 12px; color: var(--muted); font-size: 12px; text-align: center; }
.device-availability-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 16px; border-bottom: 1px solid var(--border); }
.device-availability-header .dashboard-panel-title { border: 0; }
.device-state-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.device-state-badge::before { width: 8px; height: 8px; border-radius: 50%; background: currentColor; content: ""; }
.device-state-badge.is-online { border-color: rgb(55 185 108 / 45%); background: rgb(55 185 108 / 12%); color: #46c878; }
.device-state-badge.is-offline { border-color: rgb(219 87 87 / 45%); background: rgb(219 87 87 / 12%); color: #e26c6c; }
.device-state-badge.is-unknown { color: var(--muted); }
.device-availability-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; padding: 14px 16px 2px; }
.device-availability-summary div { display: grid; gap: 4px; }
.device-availability-summary div span, .device-availability-summary p { color: var(--muted); font-size: 12px; }
.device-availability-summary div strong { font-size: 14px; }
.device-availability-summary p { flex: 1 1 300px; margin: 0; }
.device-timeline-wrap { padding: 4px 12px 0; }
.device-timeline-wrap svg { display: block; width: 100%; height: auto; min-height: 92px; overflow: visible; }
.device-timeline-track { fill: #752f33; }
.device-timeline-segment.online { fill: #36b96b; }
.device-timeline-segment.offline { fill: #bf4b50; }
.device-timeline-grid { stroke: var(--border); stroke-dasharray: 3 4; }
.device-timeline-label { fill: var(--muted); font: 12px "Segoe UI", Arial, sans-serif; }
.device-timeline-legend { display: flex; gap: 18px; padding: 0 16px 10px; color: var(--muted); font-size: 12px; }
.device-timeline-legend span { display: inline-flex; align-items: center; gap: 7px; }
.device-timeline-legend i { width: 10px; height: 10px; border-radius: 3px; background: #36b96b; }
.device-timeline-legend i.is-offline { background: #bf4b50; }
html[data-theme="light"] .device-state-badge.is-online { color: #217a43; }
html[data-theme="light"] .device-state-badge.is-offline { color: #a33030; }
html[data-theme="light"] .device-timeline-track { fill: #f2dede; }
.device-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: end;
    gap: 12px;
    margin: 0 0 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--panel);
}
.device-form label { display: grid; min-width: 0; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 650; }
.device-form input, .device-form select {
    width: 100%; min-width: 0; height: 42px; padding: 0 11px;
    border: 1px solid var(--border); border-radius: 7px;
    background: var(--bg); color: var(--text); font: inherit;
}
.device-form button { min-height: 42px; border-color: var(--amber); background: var(--amber); color: #17130a; font-weight: 700; }
.device-form button:hover { background: #ffd078; color: #17130a; }
.device-snmp-field[hidden] { display: none; }
.device-message:not(:empty) { margin: 10px 0; }
.device-table { min-width: 950px; }
.device-table th, .device-table td { vertical-align: middle; }
.device-table th { white-space: nowrap; }
.device-table td { max-width: 250px; overflow-wrap: anywhere; }
.device-table td:nth-child(2) { min-width: 140px; }
.device-table td:nth-child(6), .device-table td:nth-child(7), .device-table td:nth-child(8) { white-space: nowrap; }
.device-list-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.device-list-status::before { width: 8px; height: 8px; border-radius: 50%; background: currentColor; content: ""; }
.device-list-status.is-online { color: #36b96b; }
.device-list-status.is-offline { color: #dc6262; }
html[data-theme="light"] .device-list-status.is-online { color: #217a43; }
html[data-theme="light"] .device-list-status.is-offline { color: #a33030; }
@media (max-width: 600px) {
    .unit-control { flex-wrap: wrap; }
    .unit-control label { flex: 0 0 auto; }
    .unit-online-badge { flex: 0 0 auto; }
    .device-availability-header { padding-right: 10px; }
    .device-availability-summary { align-items: flex-start; gap: 10px 18px; padding: 12px; }
    .device-availability-summary p { flex-basis: 100%; line-height: 1.5; }
    .device-timeline-wrap { padding: 4px 8px 0; }
    .device-timeline-label { font-size: 11px; }
    .device-metrics-header { align-items: flex-start; flex-direction: column; }
    .device-metrics-header label { width: 100%; padding-top: 0; }
    .device-metrics-header select { flex: 1; min-width: 0; max-width: none; }
    .device-metrics-grid { grid-template-columns: 1fr; padding: 10px; }
}
@media (min-width: 601px) and (max-width: 960px) {
    .device-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Read-only passing simulation: shared geometry for dark and light themes. */
.simulation-panel { margin-top: var(--space-section); }
.performance-basis-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--panel-soft); }
.performance-basis-bar p { flex: 1; min-width: 0; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.performance-basis-bar > div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.performance-basis-bar button, .performance-basis-bar a { font-size: 12px; }
.performance-basis-bar a { color: var(--amber); text-decoration: underline; }
.simulation-save-actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border); }
.simulation-save-actions button { height: auto; min-height: 44px; white-space: normal; text-align: left; }
#simulation-save { border-color: var(--amber); font-weight: 700; }
.simulation-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 768px) {
    .performance-basis-bar { align-items: stretch; flex-direction: column; padding: 12px 14px; }
    .simulation-save-actions { flex-direction: column; }
    .simulation-save-actions button { width: 100%; padding: 10px 12px; }
}
.simulation-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; border-bottom: 1px solid var(--border); }
.simulation-heading h2 { margin: 0; color: var(--amber); font-size: 16px; line-height: 1.4; }
.simulation-heading p, .simulation-help { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.simulation-badge { flex-shrink: 0; border: 1px solid var(--border); padding: 6px 10px; border-radius: 20px; color: var(--amber); font-size: 11px; font-weight: 650; }
.simulation-body { padding: 20px; }
.simulation-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.simulation-controls label { display: grid; align-content: end; min-width: 0; gap: 7px; color: var(--muted); font-size: 12px; }
.simulation-controls input, .simulation-controls select { width: 100%; min-width: 0; height: 44px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 14px; color-scheme: dark; }
html[data-theme="light"] .simulation-controls input, html[data-theme="light"] .simulation-controls select { color-scheme: light; }
.simulation-parameters { margin: 16px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-soft); font-size: 12px; line-height: 1.65; }
.simulation-stage-control { display: grid; grid-template-columns: auto minmax(80px, 1fr) auto; gap: 18px; align-items: center; margin: 18px 0; }
.simulation-stage-control label { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.simulation-stage-control input { width: 100%; margin: 0; padding: 0; min-width: 0; accent-color: var(--amber); cursor: pointer; }
.simulation-stage-control button { min-height: 40px; font-size: 12px; }
.simulation-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.simulation-results article { display: grid; align-content: start; min-width: 0; gap: 8px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.simulation-results article > span { color: var(--muted); font-size: 12px; }
.simulation-results strong { font-size: 26px; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.simulation-results small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.simulation-results .simulation-highlight { border-color: var(--amber); }
.simulation-highlight strong { color: var(--amber); }
.simulation-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; margin: 16px 0; }
.simulation-step { display: grid; justify-items: start; gap: 6px; min-width: 0; height: auto; min-height: 96px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); text-align: left; font-variant-numeric: tabular-nums; line-height: 1.4; }
.simulation-step span { font-size: 11px; color: var(--muted); }
.simulation-step strong { font-size: 17px; }
.simulation-step[aria-pressed="true"] { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.simulation-volume-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.simulation-volume-details > div { display: grid; gap: 7px; min-width: 0; }
.simulation-volume-details span { font-size: 11px; color: var(--muted); }
.simulation-volume-details strong { font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.simulation-message { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.simulation-message.is-invalid { color: #d65d54; }
@media (max-width: 1100px) { .simulation-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
    .simulation-heading { align-items: flex-start; padding: 14px; }
    .simulation-heading h2 { font-size: 14px; }
    .simulation-badge { display: none; }
    .simulation-body { padding: 14px; }
    .simulation-controls, .simulation-results, .simulation-volume-details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .simulation-controls input, .simulation-controls select { font-size: 16px; }
    .simulation-stage-control { grid-template-columns: 1fr auto; gap: 12px; }
    .simulation-stage-control input { grid-column: 1 / -1; grid-row: 2; min-height: 36px; }
    .simulation-results article { padding: 12px; }
    .simulation-results strong { font-size: 22px; }
}
/* Compact hourly details keep every metric visible on a phone. */
.mobile-hourly { display: none; }
@media (max-width: 768px) {
    body { padding: 0 12px max(18px, env(safe-area-inset-bottom)); }
    .page, #dashboard-view, #secondary-view { min-width: 0; }
    .topbar { position: static; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 14px 10px; padding-top: max(14px, env(safe-area-inset-top)); }
    .brand-lockup { grid-column: 1; grid-row: 1; }
    .header-actions { display: contents; }
    .header-actions .theme-toggle { grid-column: 2; grid-row: 1; width: 44px; height: 44px; min-width: 0; }
    .header-actions .controls { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
    .unit-control { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; width: 100%; }
    .unit-online-badge { font-size: 10px; letter-spacing: .03em; padding: 7px 8px; }
    .controls button, .controls select { min-height: 44px; }
    .controls input, .controls select { font-size: 16px; }
    .range-toggle { gap: 8px; padding: 0 10px; font-size: 12px; }
    .range-toggle span:nth-child(2) { flex: 1; }
    .range-arrow { height: 44px; }
    .refresh-group { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
    .refresh-select { width: 100%; min-width: 0; }
    .range-menu { position: fixed; top: auto; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; right: 12px; width: auto; max-height: 80dvh; overflow-y: auto; z-index: 9500; box-shadow: 0 10px 50px rgb(0 0 0 / 40%); }
    .hourly-table-scroll { display: none; }
    .mobile-hourly { display: block; padding: 14px; }
    .hourly-performance-panel > .panel-title { padding: 14px; font-size: 13px; line-height: 1.5; }
    .mobile-hour-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
    #mobile-hour-unit { color: var(--text); font-weight: 650; }
    .mobile-hour-navigation { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; align-items: end; margin-top: 13px; }
    .mobile-hour-navigation label { display: grid; min-width: 0; gap: 5px; color: var(--muted); font-size: 11px; }
    .mobile-hour-navigation select { width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 16px; font-weight: 650; }
    .mobile-hour-navigation button { height: 44px; padding: 0; border-color: var(--border); background: var(--panel-soft); color: var(--amber); font-size: 26px; }
    .mobile-hour-navigation button:disabled { opacity: .35; cursor: default; }
    .mobile-hour-note { margin: 11px 0 14px; color: var(--muted); font-size: 11px; line-height: 1.6; }
    .mobile-hour-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .mobile-metric-card { display: flex; min-width: 0; min-height: 110px; flex-direction: column; align-items: flex-start; gap: 7px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); font-variant-numeric: tabular-nums; }
    .mobile-metric-label { font-size: 12px; font-weight: 600; line-height: 1.5; }
    .mobile-metric-card strong { font-size: clamp(19px, 5.5vw, 25px); line-height: 1.2; overflow-wrap: anywhere; }
    .mobile-metric-unit { margin-top: auto; font-size: 10px; opacity: .8; }
    .mobile-hourly[aria-busy="true"] .mobile-hour-metrics { opacity: .55; }
    .dashboard-heading { font-size: 15px; line-height: 1.5; }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .kpi-card { min-width: 0; min-height: 100px; padding: 13px; }
    .kpi-label { font-size: 11px; line-height: 1.5; }
    .kpi-value { font-size: 20px; line-height: 1.4; overflow-wrap: anywhere; }
    .chart-panel-header { align-items: stretch; }
    .chart-panel-header .dashboard-panel-title { width: 100%; font-size: 13px; }
    .chart-panel-header label { display: grid; width: 100%; gap: 6px; }
    .chart-select { width: 100%; min-width: 0; height: 44px; font-size: 16px; }
    .chart-container { min-height: 0; overflow-x: auto; padding: 16px 12px 8px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
    .chart-container svg { min-width: 620px; }
    .chart-legend { line-height: 1.6; }
    .status-dashboard { gap: 16px; padding: 16px; }
    .status-legend { min-width: 0; }
    .status-legend-item { flex-wrap: wrap; font-size: 11px; }
    .settings-wrap { padding: 12px; }
    #vt-sidebar { height: 100dvh; overflow-y: auto; }
    #vt-sidebar .vt-nav { flex-shrink: 0; }
    .auth-form input { font-size: 16px; }
}
@media (max-width: 680px) {
    .auth-visual { position: relative; min-height: 0; padding: 28px 24px 22px; }
    .auth-visual-content { margin-top: 0; }
    .auth-form-panel { margin: 0 auto 24px; }
    .auth-card { padding: 24px 20px; }
    .captcha-row { grid-template-columns: minmax(0, 1fr); }
    .captcha-refresh { justify-self: start; min-height: 40px; }
}
#dashboard-view #calculation-basis-note, #performance-basis { display:none !important; }
#sync-monitor,.heatmap-panel,.chart-wide { margin-bottom:20px; }
.sync-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;padding:12px 20px; }
.sync-grid article {display:grid;gap:6px;padding:12px;border:1px solid var(--border);border-radius:8px;min-width:0;}
.sync-grid span {font-size:12px;color:var(--muted)} .sync-grid strong{overflow-wrap:anywhere;}
.shift-picker {display:flex;gap:12px;align-items:center;margin:16px 0;}.shift-picker select{background:var(--panel);color:var(--text);padding:10px;border:1px solid var(--border);border-radius:8px;}
.heatmap-row{display:grid;grid-template-columns:80px repeat(6,minmax(0,1fr));gap:8px;padding:12px;}.heatmap-cell{padding:10px;border-radius:6px;font-size:12px;}.heatmap-cell.good{background:#276c44;color:white}.heatmap-cell.medium{background:#80651c;color:white}.heatmap-cell.low{background:#873d3d;color:white}.heatmap-cell.missing{background:var(--panel-soft);color:var(--muted);}
.report-graphs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 12px 0 20px; }
.report-graph { min-width: 0; padding: 14px; border: 1px solid #d6dde3; border-radius: 10px; background: #fff; break-inside: avoid; }
.report-graph:first-child { grid-column: 1 / -1; }
.report-graph h3 { margin: 0 0 10px; font-size: 13px; line-height: 1.4; }
.report-graph-viewport { overflow-x: auto; }
.report-graph svg { display: block; width: 100%; height: 175px; }
.report-graph:first-child svg { height: 220px; }
.report-page .report-graph-legend { margin: 8px 0 0; color: #667078; font-size: 10px; }
.report-page .chart-axis-label, .report-page .chart-axis-unit { fill: #59646e; }
.report-page .chart-value-label { fill: #25313b; }
.report-page .chart-grid-line { stroke: #e0e5e9; }
.report-page .chart-target-line { stroke: #ab7419; }
.report-graphs-empty { grid-template-columns: 1fr; }
.report-empty { display: grid; gap: 7px; padding: 30px 16px; border: 1px dashed #c6cfd6; border-radius: 10px; background: #f8fafb; text-align: center; }
.report-empty span { color: #667078; font-size: 12px; }
#report-content { min-width: 0; }
#report-content .report-sheet { max-width: 1140px; margin: 0 auto; padding: 24px; gap: 24px; background: transparent; }
#report-content .report-page { min-width: 0; min-height: 0; padding: 28px; border-radius: 12px; }
#report-content .report-title { color: #202428; font-size: 19px; line-height: 1.4; }
#report-content .report-section-title { margin-top: 22px; color: #795417; font-size: 13px; letter-spacing: .03em; }
#report-content .report-kpi { min-width: 0; padding: 12px; border-color: #d6dde3; background: #f8fafb; color: #202428; }
#report-content .report-kpi span { color: #667078; font-size: 11px; }
#report-content .report-kpi strong { font-size: 15px; overflow-wrap: anywhere; }
#report-content .report-meta-list { gap: 8px; font-size: 12px; }
#report-content .report-meta-list div { grid-template-columns: 140px minmax(0, 1fr); }
#report-content .report-meta-list strong { overflow-wrap: anywhere; }
#report-content .report-page-footer { position: static; margin-top: 24px; font-size: 10px; }
#report-content .report-table { min-width: 660px; }
#report-content .report-table th, #report-content .report-table td { font-size: 11px; padding: 9px 7px; }
#report-content .report-table th { white-space: normal; }
#report-content .report-conclusion { font-size: 12px; }
#report-content .calculation-basis-note { padding: 6px 10px; color: #59646e; background: #f1f4f6; font-size: 11px; }
@media (max-width: 760px) {
    #report-content .report-sheet { padding: 12px; gap: 14px; }
    #report-content .report-page { padding: 18px; }
    #report-content .report-page-header { grid-template-columns: 1fr auto; gap: 12px; }
    #report-content .report-page-header > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    #report-content .report-wordmark { width: 115px; }
    #report-content .report-title { font-size: 17px; }
    #report-content .report-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #report-content .report-meta-list div { grid-template-columns: 1fr; gap: 3px; }
    #report-content .report-graphs { grid-template-columns: 1fr; }
    #report-content .report-graph svg { min-width: 430px; height: 190px; }
    #report-content .report-distribution, #report-content .report-volume-distribution { grid-template-columns: 1fr; }
    #report-content .report-page-footer { flex-wrap: wrap; gap: 7px; }
}
@media print {
    body.printing-report #report-content .report-sheet { max-width: none; margin: 0; padding: 0; }
    body.printing-report #report-content .report-page { min-height: 269mm; padding: 10mm 8mm; border: 0; border-radius: 0; }
    body.printing-report #report-content .report-page-header { grid-template-columns: 106px 1fr 130px; }
    body.printing-report #report-content .report-page-header > div:nth-child(2) { grid-column: auto; grid-row: auto; }
    body.printing-report #report-content .report-meta-list { gap: 5px; font-size: 10px; }
    body.printing-report #report-content .report-meta-list div { grid-template-columns: 110px 1fr; }
    body.printing-report #report-content .report-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
    body.printing-report #report-content .report-kpi { padding: 8px; }
    body.printing-report #report-content .report-kpi span { font-size: 9px; }
    body.printing-report #report-content .report-kpi strong { font-size: 11px; }
    body.printing-report #report-content .report-graphs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    body.printing-report #report-content .report-graph { padding: 8px; }
    body.printing-report #report-content .report-graph svg { min-width: 0; height: 145px; }
    body.printing-report #report-content .report-graph:first-child svg { height: 185px; }
    body.printing-report #report-content .report-graph-viewport { overflow: visible; }
    body.printing-report #report-content .report-graphs-empty { grid-template-columns: 1fr; }
    body.printing-report #report-content .report-table { min-width: 0; }
    body.printing-report #report-content .report-table th, body.printing-report #report-content .report-table td { padding: 5px; font-size: 8px; }
    body.printing-report #report-content .report-distribution { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.printing-report #report-content .report-volume-distribution { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.printing-report #report-content .chart-axis-label, body.printing-report #report-content .chart-axis-unit, body.printing-report #report-content .chart-value-label { fill: #333 !important; }
}
@media(max-width:768px){.sync-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px}.heatmap-row{grid-template-columns:repeat(2,minmax(0,1fr))}.heatmap-row>strong{grid-column:1/-1}.performance-basis-bar{padding:8px 14px}}