/* Shared UI for Active Gauges Overview and hydrograph pages */

:root {
    --bg: #0b0b0b;
    --bg-raised: #161616;
    --bg-header: #1c1c1c;
    --border: #3a3a3a;
    --text: #f2f2f2;
    --muted: #a3a3a3;
    --accent: #4da6ff;
    --accent-hover: #6bb6ff;
    --row-hover: #242424;
    --action: #ffff00;
    --minor: #ffa500;
    --moderate: #ff4444;
    --major: #cc66ff;
    --focus: #7ec4ff;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: dark;
}

body.hydro-ui {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 16px 20px 28px;
    background: var(--bg);
    color: var(--text);
    line-height: 1.4;
}

a {
    color: var(--accent);
}

a:hover {
    color: var(--accent-hover);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.page-header h1 {
    margin: 0 0 4px;
    font-size: 1.45rem;
    font-weight: 650;
}

.page-kicker {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.refresh-meta {
    text-align: right;
    color: var(--muted);
    font-size: 0.9rem;
}

.refresh-meta strong,
#refresh-countdown,
#refresh-indicator {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.btn {
    background: var(--accent);
    color: #041018;
    border: none;
    padding: 7px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 650;
    font-size: 0.9rem;
}

.btn:hover {
    background: var(--accent-hover);
}

.btn:focus-visible,
input:focus-visible,
button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
}

.toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.search-input {
    min-width: 220px;
    flex: 1;
    max-width: 360px;
    background: #111;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 0.95rem;
}

.filter-status {
    color: var(--muted);
    font-size: 0.9rem;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    color: var(--muted);
    font-size: 0.82rem;
}

.legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: -1px;
}

.swatch-action { background: var(--action); }
.swatch-minor { background: var(--minor); }
.swatch-moderate { background: var(--moderate); }
.swatch-flash { background: #990000; }
.swatch-areal { background: #66cc66; }

.table-wrap {
    overflow: auto;
    max-height: calc(100vh - 230px);
    border: 1px solid var(--border);
    border-radius: 8px;
}

table.gauges {
    border-collapse: collapse;
    width: 100%;
    min-width: 1100px;
    font-size: 0.9rem;
}

table.gauges th,
table.gauges td {
    border-bottom: 1px solid #2e2e2e;
    border-right: 1px solid #2a2a2a;
    padding: 7px 8px;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

table.gauges thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-header);
    color: #ddd;
    font-weight: 650;
    box-shadow: 0 1px 0 var(--border);
}

table.gauges tbody tr:hover {
    background: var(--row-hover);
    cursor: pointer;
}

table.gauges th.sortable {
    cursor: pointer;
    user-select: none;
}

table.gauges th.sorted {
    color: #fff;
    box-shadow: inset 0 -3px 0 var(--accent);
}

.sort-indicator {
    margin-left: 4px;
    color: var(--accent);
}

.gauge-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 650;
}

.gauge-link:hover {
    text-decoration: underline;
}

.page-footer {
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.9rem;
}

.areal-flood-bg { background-color: #2d6a2d; }
.flash-flood-bg { background-color: #7a0000; }

.action-stage-color, .action-exceeded { color: var(--action); }
.minor-stage-color, .minor-exceeded { color: var(--minor); }
.moderate-stage-color, .moderate-exceeded { color: var(--moderate); }
.major-stage-color, .major-exceeded { color: var(--major); }

.extrapolation-forecast { color: #fff; font-weight: 700; }
.snapshot-1h { color: #888; font-size: 0.82em; }
.snapshot-2h { color: #666; font-size: 0.82em; }
.snapshot-3h { color: #555; font-size: 0.82em; }

.forecast-diff-positive { color: #5dff7a; font-weight: 700; }
.forecast-diff-negative { color: #ff5a5a; font-weight: 700; }
.forecast-diff-zero { color: #fff; font-weight: 700; }

/* Hydrograph page */
.nav-row {
    margin-bottom: 10px;
}

.nav-row a {
    text-decoration: none;
    font-weight: 650;
}

.hydro-header {
    text-align: left;
    margin-bottom: 12px;
}

.hydro-header h1 {
    margin: 0 0 8px;
    font-size: 1.35rem;
}

.hydro-controls form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hydro-controls label {
    color: var(--muted);
    font-size: 0.9rem;
}

.hydro-controls input[type="text"] {
    background: #111;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 10px;
    width: 8rem;
    text-transform: uppercase;
}

.stage-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.95rem;
}

.stage-chip .value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.chart-container {
    position: relative;
    height: min(70vh, 720px);
    width: 100%;
    margin: 12px 0;
    background: #0e0e0e;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
}

.loading {
    text-align: center;
    font-size: 1.05rem;
    color: var(--muted);
    padding: 40px 0;
}

.gauge-info {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    padding: 12px 14px;
    border-radius: 8px;
    margin: 12px 0;
}

.gauge-info h3 {
    margin: 0 0 6px;
    font-size: 1rem;
}

.gauge-info p {
    margin: 4px 0;
    color: #ddd;
}

.flood-warning {
    background: #2a120f;
    border: 1px solid #c62828;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 10px 0;
    display: none;
}

.flood-warning-title {
    color: #ff8a80;
    font-weight: 700;
    margin-bottom: 6px;
}

.flood-warning-item { margin: 4px 0; }
.warning-action { color: var(--action); }
.warning-minor { color: var(--minor); }
.warning-moderate { color: var(--moderate); }
.warning-major { color: var(--major); font-weight: 700; }
.warning-current { color: #fff; }

#flood-time-table {
    margin: 16px 0;
    width: 100%;
    overflow: auto;
}

#flood-time-table h3 {
    color: var(--muted);
    margin: 0 0 8px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ftt {
    border-collapse: collapse;
    width: 100%;
    background: #111;
    color: #ddd;
    font-size: 0.9em;
}

.ftt th {
    background: #222;
    color: #aaa;
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid #444;
    white-space: nowrap;
}

.ftt td {
    padding: 5px 10px;
    border-bottom: 1px solid #2a2a2a;
    white-space: nowrap;
}

.ftt-stage-action { color: var(--action); font-weight: 700; }
.ftt-stage-minor { color: var(--minor); font-weight: 700; }
.ftt-stage-moderate { color: var(--moderate); font-weight: 700; }
.ftt-stage-major { color: var(--major); font-weight: 700; }
.ftt-exceeded { color: #ff6b6b; font-style: italic; }
.ftt-urgent { color: #ff8a3d; font-weight: 700; }
.ftt-soon { color: #ffd166; }
.ftt-later { color: #aaa; }
.ftt-none { color: #555; font-style: italic; }
.ftt-snap-1h { color: #888; }
.ftt-snap-2h { color: #666; }
.ftt-snap-3h { color: #555; }

#update-indicator {
    position: fixed;
    top: 12px;
    right: 12px;
    background: #2e7d32;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    z-index: 1000;
}

@media (max-width: 720px) {
    body.hydro-ui {
        padding: 12px;
    }

    .table-wrap {
        max-height: none;
    }

    .chart-container {
        height: 55vh;
    }
}