/* ============================================
   SPANSENSE - DASHBOARD PAGE
   Matching spanSense theme - FLOATING NAVBAR ONLY
   ============================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Hide native scrollbar */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { display: none; }

body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f7fb;
    color: #2c3e44;
    transition: background 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
}

/* ============================================
   FLOATING NAVBAR - MATCHING SPANSENSE (60% width, centered)
   ============================================ */

/* ---------- NAVIGATION BAR (60% width, centered) ---------- */
.navbar {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 67%;
    max-width: 1190px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 60px;
    border: 1px solid rgba(138, 180, 176, 0.35);
    box-shadow: 0 8px 28px rgba(44, 90, 87, 0.12);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    height: 64px;
}

/* Metric-card clicks (scrollToDashboardSection in dashboard.js) use
   scrollIntoView, which respects scroll-margin-top — without this, "start"
   lands the section flush with the viewport top, right under the fixed
   navbar (20px top + 64px tall = 84px), covering its heading. */
#assetInventoryChartCard,
#avgBciByTypeChartCard,
#bciDistributionChartCard,
#criticalStructuresSection,
#pending-review-section {
    scroll-margin-top: 108px;
}
.navbar .left { display: flex; align-items: center; gap: 24px; }
.navbar .logo {
    font-size: 1.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #5b8c8a 0%, #7ba8a5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.navbar .menu { display: flex; gap: 16px; }
.navbar .menu a {
    text-decoration: none;
    color: #4a5b6e;
    font-weight: 500;
    font-size: 0.85rem;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.navbar .menu a:hover, .navbar .menu a.active { color: #5b8c8a; }
.navbar .menu a.active {
    background: rgba(91, 140, 138, 0.1);
    padding: 6px 14px;
    border-radius: 20px;
}
.navbar .right { display: flex; align-items: center; gap: 10px; }
.night-mode-toggle {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    color: #5b8c8a;
    background: #f0f2f5;
    transition: all 0.2s;
}
.night-mode-toggle:hover { background: #e2e8f0; color: #5b8c8a; }
.navbar .account-links { display: flex; align-items: center; gap: 10px; }
.navbar .account-links a {
    text-decoration: none;
    color: #5f6b73;
    font-size: 1.2rem;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.2s, transform 0.15s, background 0.2s;
}
.navbar .account-links a:hover { background: #f0f4f8; color: #5b8c8a; transform: scale(1.1); }

/* ============================================
   BACK BUTTON - GLASS PILL STYLE
   ============================================ */

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(138, 180, 176, 0.3);
    color: #5b8c8a;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(91, 140, 138, 0.1);
    font-family: inherit;
    user-select: none;
}

.back-button:hover {
    background: #5b8c8a;
    color: white;
    border-color: #5b8c8a;
    transform: translateX(-4px);
    box-shadow: 0 4px 20px rgba(91, 140, 138, 0.25);
}

/* ============================================
   MAIN CONTAINER - 75% WIDTH
   ============================================ */

.container {
    max-width: 75%;
    margin: 0 auto;
    padding: 100px 0 60px 0;
}

/* ============================================
   PAGE HEADER
   ============================================ */

.page-header {
    margin-bottom: 28px;
}

.page-header h1 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #2c5a57;
    border-left: 4px solid #8ab4b0;
    padding-left: 14px;
    margin-bottom: 8px;
}

.page-header p {
    color: #5f6b73;
    font-size: 0.85rem;
    padding-left: 18px;
}
.night-mode .page-header h1 { color: #8ab4b0; }
.night-mode .page-header p { color: #a8b8bf; }

/* ============================================
   METRICS CARDS
   ============================================ */

.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.metric {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-radius: 24px;
    border: 1px solid rgba(138, 180, 176, 0.28);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.metric:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    border-color: #c5dbd8;
}

/* Every metric card is clickable and jumps to the section it summarizes
   (see scrollToDashboardSection() in dashboard.js) — the chevron is the
   affordance that tells you so, since cursor:pointer alone is too easy to miss. */
.metric-clickable {
    cursor: pointer;
}

.metric-arrow {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #c5d0d8;
    transition: transform 0.25s ease, color 0.25s ease;
}

.metric:hover .metric-arrow {
    color: #5b8c8a;
    transform: translateX(3px);
}

.metric-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.metric-icon-green {
    background: #eef4f2;
    color: #5b8c8a;
}

.metric-icon-red {
    background: #fdf2f2;
    color: #c47070;
}

.metric-icon-blue {
    background: #f0f9ff;
    color: #4a90b8;
}

.metric-icon-yellow {
    background: #fff7ed;
    color: #c28b5a;
}

.metric-icon-purple {
    background: #f5f0fc;
    color: #7c6fc4;
}

.metric-content {
    flex: 1;
    min-width: 0;
}

.metric-content h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #2c4a48;
    line-height: 1.2;
}

.metric-content p {
    font-size: 0.7rem;
    color: #5f6b73;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.night-mode .metric-content p { color: #a8b8bf; }

/* BCI(ave) / BCI(crit) combined card — two number+label pairs side by side
   in place of the single h3/p a normal metric card has. */
.metric-content-split {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.metric-split-item {
    min-width: 0;
}

.metric-split-item h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c4a48;
    line-height: 1.2;
}

.metric-split-item p {
    font-size: 0.7rem;
    color: #5f6b73;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.night-mode .metric-split-item p { color: #a8b8bf; }

.metric-split-item p sub {
    font-size: 0.85em;
    bottom: -0.2em;
    text-transform: none;
}

.metric-split-divider {
    width: 1px;
    height: 30px;
    background: #e9edf2;
    flex-shrink: 0;
}

/* ============================================
   CHARTS SECTION
   ============================================ */

.charts-section {
    margin-bottom: 32px;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #cbd5df;
}

.section-header h2 {
    font-size: 1rem;
    font-weight: 700;
    color: #2c4a48;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-header h2 i {
    color: #8ab4b0;
}

.section-badge {
    padding: 4px 12px;
    background: #eef4f2;
    color: #5b8c8a;
    border: 1px solid #d6e6e3;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
}

.charts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.chart-card {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-radius: 28px;
    border: 1px solid rgba(138, 180, 176, 0.28);
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(44, 90, 87, 0.1);
}

.chart-header {
    padding: 16px 20px;
    border-bottom: 1px solid #cbd5df;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafbfc;
}

.chart-header h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2c4a48;
}

.chart-badge {
    padding: 4px 10px;
    background: #eef4f2;
    color: #5b8c8a;
    border: 1px solid #d6e6e3;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
}

.chart-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chart-toggle {
    display: flex;
    gap: 2px;
    background: #eef4f2;
    border: 1px solid #d6e6e3;
    border-radius: 20px;
    padding: 2px;
}

.chart-toggle-btn {
    padding: 4px 12px;
    border: none;
    background: transparent;
    color: #5b8c8a;
    border-radius: 18px;
    font-size: 0.65rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}

.chart-toggle-btn:hover {
    color: #2c4a48;
}

.chart-toggle-btn.active {
    background: #5b8c8a;
    color: white;
}

.chart-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    position: relative;
}

/* Styled HTML tooltip for Chart.js's `external` callback (see
   externalTooltipHandler in dashboard.js) - matches the tooltip already
   shipped on twinView's BCI trend chart instead of Chart.js's plain
   canvas-drawn default. */
.chart-tooltip {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s;
    background: #2c4a48;
    color: #f2f6f5;
    font-size: 0.74rem;
    line-height: 1.5;
    border-radius: 8px;
    padding: 7px 11px;
    white-space: nowrap;
    z-index: 20;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transform: translate(-50%, calc(-100% - 10px));
}
.chart-tooltip b { display: block; font-size: 0.78rem; }
.night-mode .chart-tooltip { background: #0f1619; }

.wide-chart .chart-body {
    min-height: 220px;
}

.wide-chart .chart-body canvas {
    max-height: 220px;
}

.bci-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
    font-size: 0.75rem;
    color: #4d5960;
}

.bci-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bci-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* Same 5-band palette as bciTier()/dashboard.js's histogram bars - was
   raw Tailwind severity colours hardcoded inline with no dark variant at
   all, clashing with the rest of the app's muted teal/amber/red bands. */
.bci-legend-dot.bci-excellent { background: #2d7a6e; }
.bci-legend-dot.bci-good { background: #5b8c8a; }
.bci-legend-dot.bci-fair { background: #BA7517; }
.bci-legend-dot.bci-poor { background: #c47070; }
.bci-legend-dot.bci-critical { background: #c0392b; }
.night-mode .bci-legend-dot.bci-excellent { background: #8ab4b0; }
.night-mode .bci-legend-dot.bci-good { background: #6fa39d; }
.night-mode .bci-legend-dot.bci-fair { background: #d4a84a; }
.night-mode .bci-legend-dot.bci-poor { background: #e8a0a0; }
.night-mode .bci-legend-dot.bci-critical { background: #e07070; }

.chart-body canvas {
    max-width: 100%;
    height: auto !important;
    max-height: 280px;
}

/* ============================================
   DETERIORATION FORECAST
   ============================================ */

.forecast-section {
    margin-bottom: 24px;
}

.fc-view { display: none; }
.fc-view.active { display: block; }

.fc-status {
    font-size: 0.78rem;
    color: #8a9aa0;
    font-style: italic;
}
.night-mode .fc-status { color: #7f9490; }

.fc-status-crit {
    color: #c0392b;
    font-style: normal;
    font-weight: 600;
}
.night-mode .fc-status-crit { color: #e8a0a0; }

.fc-when .date {
    font-weight: 700;
    font-size: 0.85rem;
    color: #2c4a48;
}
.night-mode .fc-when .date { color: #d4dfe3; }

.fc-when .rel {
    font-size: 0.7rem;
    color: #5f6b73;
    margin-top: 1px;
}
.night-mode .fc-when .rel { color: #a8b8bf; }

.fc-when.fc-soon .date { color: #c0392b; }
.night-mode .fc-when.fc-soon .date { color: #e8a0a0; }

/* History sparkline (per-row in Structures/By category) - solid line
   through real readings, dashed continuation for whatever's projected
   past the last one. Vertically centered against the row's other cells. */
.fc-spark { vertical-align: middle; }

/* Search box above the Structures view - reuses .pr-search-wrap's look
   (Pending Review's search field) rather than a new input style. Full
   width of the section, same as the toggle/badge row above it. */
.fc-search-wrap {
    margin: 0 0 14px;
}

.fc-more-wrap {
    display: flex;
    justify-content: center;
    padding-top: 6px;
}

/* ---------- Whole-stock chart card ----------
   Deliberately bigger than any other single element in this widget - it's
   the one number that answers "is the portfolio as a whole getting worse,"
   which matters more than any individual row. */
.fc-portfolio-card {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(138, 180, 176, 0.28);
    border-radius: 20px;
    padding: 22px 26px 18px;
}
.night-mode .fc-portfolio-card {
    background: rgba(51, 68, 79, 0.88);
    border-color: rgba(255, 255, 255, 0.1);
}

.fc-portfolio-graph { margin-bottom: 18px; position: relative; }
.fc-portfolio-graph .fc-hit { cursor: crosshair; }
.fc-chart-empty {
    color: #5f6b73;
    font-size: 0.85rem;
    padding: 40px 0;
    text-align: center;
}
.night-mode .fc-chart-empty { color: #a8b8bf; }

/* Condition-band backdrop rects (Very Good -> Very Poor, same colours as
   the BCI Score Distribution legend) sit behind everything else, so they
   stay faint - the point is context, not competing with the line itself. */
.fc-band-zone { fill-opacity: 0.10; }
.night-mode .fc-band-zone { fill-opacity: 0.16; }

.fc-band { fill: #5b8c8a; fill-opacity: 0.22; stroke: none; }
.night-mode .fc-band { fill: #8ab4b0; fill-opacity: 0.22; }

.fc-avg-line { fill: none; stroke: #5b8c8a; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.night-mode .fc-avg-line { stroke: #8ab4b0; }
.fc-avg-dot { fill: #5b8c8a; }
.night-mode .fc-avg-dot { fill: #8ab4b0; }

.fc-ext-line, .fc-ext-line-soon {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 5 5;
}
.fc-ext-line { stroke: #c28b5a; }
.fc-ext-line-soon { stroke: #c0392b; }
.night-mode .fc-ext-line { stroke: #d4a84a; }
.night-mode .fc-ext-line-soon { stroke: #e8a0a0; }
.fc-ext-line-dot { fill: none; stroke: #c28b5a; stroke-width: 2; }
.fc-ext-line-soon-dot { fill: none; stroke: #c0392b; stroke-width: 2; }
.night-mode .fc-ext-line-dot { stroke: #d4a84a; }
.night-mode .fc-ext-line-soon-dot { stroke: #e8a0a0; }

.fc-threshold-line { stroke: #c28b5a; stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.6; }
.night-mode .fc-threshold-line { stroke: #d4a84a; }
/* font-family set explicitly, not left to inherit - SVG text inherits
   font-family through the DOM same as any other element, so leaving this
   unset was still pulling in body's 'Inter' stack (too wide/spaced-out at
   9-10px), not some tighter SVG default. Chart.js's canvas-rendered
   labels in Asset Inventory etc. above never inherit page CSS at all -
   they render with Chart.js's own built-in default font
   ('Helvetica Neue'/Helvetica/Arial) - matching that here directly gets
   the same tight, familiar look instead of approximating it. */
.fc-threshold-label, .fc-year-label {
    font-size: 10px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    fill: #5f6b73;
}
.night-mode .fc-threshold-label, .night-mode .fc-year-label { fill: #a8b8bf; }

.fc-portfolio-stats {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    padding-top: 14px;
    border-top: 1px solid #e9edf2;
}
.night-mode .fc-portfolio-stats { border-color: #2f3e45; }

.fc-portfolio-stat { flex: 1; min-width: 0; }
.fc-portfolio-stat-end { text-align: right; }

.fc-portfolio-stat .h-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #5f6b73;
    font-weight: 700;
    margin-bottom: 6px;
}
.night-mode .fc-portfolio-stat .h-label { color: #a8b8bf; }

.fc-portfolio-stat .h-value-lg {
    font-size: 2.2rem;
    font-weight: 700;
    color: #2c4a48;
    line-height: 1.1;
}
.night-mode .fc-portfolio-stat .h-value-lg { color: #d4dfe3; }
.fc-portfolio-stat .h-value-lg.fc-crit { color: #c0392b; }
.night-mode .fc-portfolio-stat .h-value-lg.fc-crit { color: #e8a0a0; }

.fc-portfolio-stat .h-value-lg span {
    font-size: 0.95rem;
    font-weight: 500;
    color: #5f6b73;
    margin-left: 6px;
}
.night-mode .fc-portfolio-stat .h-value-lg span { color: #a8b8bf; }

.fc-portfolio-stat .h-sub {
    font-size: 0.8rem;
    color: #5f6b73;
    margin-top: 4px;
}
.night-mode .fc-portfolio-stat .h-sub { color: #a8b8bf; }

/* ============================================
   BOTTOM ROW: CRITICAL + ACTIVITY
   ============================================ */

.dashboard-bottom-row {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 20px;
    margin-top: 8px;
}

.critical-bridges-section {
    margin-top: 0;
}

.critical-bridges {
    padding: 0;
}

/* ---------- CARD-STYLE TABLE (mirrors database.html's .data-table.card-rows) ---------- */
.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th {
    padding: 14px 16px;
    text-align: left;
    color: #5a6e7a;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.data-table td {
    padding: 12px 16px;
    color: #2c3e44;
    font-size: 0.82rem;
}
.data-table th:last-child,
.data-table td:last-child {
    text-align: right;
}
.data-table.card-rows { border-collapse: separate; border-spacing: 0 8px; }
.data-table.card-rows thead tr { background: transparent; }
.data-table.card-rows thead th {
    background: #fafbfc;
    border-top: 1px solid #cbd5df;
    border-bottom: 1px solid #cbd5df;
}
.data-table.card-rows thead th:first-child {
    border-left: 1px solid #cbd5df;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.data-table.card-rows thead th:last-child {
    border-right: 1px solid #cbd5df;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.data-table.card-rows tbody tr td {
    background: white;
    border-top: 1px solid #cbd5df;
    border-bottom: 1px solid #cbd5df;
    transition: background 0.15s, border-color 0.15s;
}
.data-table.card-rows tbody tr:hover td { background: #fafbfc; border-color: #c5dbd8; }
.data-table.card-rows tbody tr td:first-child {
    border-left: 1px solid #cbd5df;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.data-table.card-rows tbody tr td:last-child {
    border-right: 1px solid #cbd5df;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.bridge-name {
    font-weight: 600;
    color: #2c4a48;
    font-size: 0.85rem;
}

.bridge-location {
    display: block;
    font-size: 0.7rem;
    color: #5f6b73;
    margin-top: 2px;
}
.night-mode .bridge-location { color: #a8b8bf; }

.risk-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    width: fit-content;
}

.risk-high {
    background: #fdf2f2;
    color: #c47070;
}

.risk-critical {
    background: #fdf2f2;
    color: #c0392b;
    border-left: 3px solid #c0392b;
}

.action-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 24px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

.download-btn {
    background: #eef4f2;
    color: #5b8c8a;
    border: 1px solid #8ab4b0 !important;
}

.download-btn:hover {
    background: #5b8c8a;
    color: white;
}

/* Activity Feed Panel - no outer card (background/border/shadow) by design:
   matches database.html's tables, which sit directly on the page with only
   the individual pill rows as visually distinct elements. */
.activity-feed {
    display: flex;
    flex-direction: column;
    /* Grid items default to min-width:auto (their content's natural width),
       not 0 - without this, a long structure name refuses to let this
       column shrink below its own width at narrower viewports, so it
       pushes past the grid track instead of the row's ellipsis truncation
       (already set up on .activity-title) ever getting a chance to apply. */
    min-width: 0;
}

.activity-list {
    padding: 4px 0;
    flex: 1;
}

/* Mirrors .data-table th's typography - the list itself is flex/card-rows,
   not a literal table, so this is a plain row shaped to roughly line up
   with .activity-item's own avatar/content/bci/status flex children. */
.activity-list-header {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Matches Poor Structures' 28px gap under the section header: that
       side gets it for free from its table's border-spacing running above
       the first row too, not just between rows - this needs an explicit
       top margin to match since it isn't a table. Left/right at 0 (not
       14px) so this pill goes flush to the same edges as the section
       header's badge and Poor Structures' table, instead of stopping
       short of the panel's right edge. */
    margin: 8px 0;
    padding: 14px 18px;
    background: #fafbfc;
    border: 1px solid #cbd5df;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5a6e7a;
}
.activity-list-header .alh-avatar-spacer { width: 34px; flex-shrink: 0; }
.activity-list-header .alh-structure { flex: 1; min-width: 0; }
.activity-list-header .alh-bci { min-width: 45px; text-align: center; flex-shrink: 0; }
.activity-list-header .alh-status { flex-shrink: 0; min-width: 74px; text-align: right; }

.activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    border-bottom: 1px solid #cbd5df;
    transition: background 0.15s;
}

.activity-item:hover {
    background: #fafbfc;
}

.activity-item:last-child {
    border-bottom: none;
}

/* ---------- CARD-STYLE ROWS (Recent Activity) - same pill-row look as
   .data-table.card-rows, without going all the way to a literal table:
   each item's content (avatar/title/meta/badge/status) doesn't map to
   fixed columns the way Critical Structures' bridge/BCI/date/report does. */
.activity-list.card-rows {
    /* Left/right at 0 (not 14px) so item rows go flush to the same edges
       as .activity-list-header above and Poor Structures' table, instead
       of finishing short of the panel's right edge. */
    padding: 0 0 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.activity-list.card-rows .activity-item {
    background: white;
    border: 1px solid #cbd5df;
    border-radius: 20px;
    padding: 12px 18px;
}
.activity-list.card-rows .activity-item:last-child {
    border: 1px solid #cbd5df;
}
.activity-list.card-rows .activity-item:hover {
    background: #fafbfc;
    border-color: #c5dbd8;
}

/* ---------- Pending Review table cell (Structure column: avatar + name/meta) ---------- */
.pending-review-table-wrap {
    padding: 0 0 14px;
}
.pr-structure-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.activity-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.activity-avatar-green  { background: #eef4f2; color: #5b8c8a; }
.activity-avatar-blue   { background: #f0f9ff; color: #4a90b8; }
.activity-avatar-orange { background: #fff7ed; color: #c28b5a; }
.activity-avatar-red    { background: #fdf2f2; color: #c47070; }

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #2c4a48;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.activity-meta {
    font-size: 0.7rem;
    color: #5f6b73;
}
.night-mode .activity-meta { color: #a8b8bf; }

.activity-status {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.status-completed   { background: #eef4f2; color: #5b8c8a; }
.status-in-progress { background: #f0f9ff; color: #4a90b8; }
.status-overdue     { background: #fdf2f2; color: #c47070; }

.activity-bci {
    font-family: 'SF Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 6px;
    min-width: 45px;
    text-align: center;
    flex-shrink: 0;
}

.bci-excellent { background: #eef4f2; color: #5b8c8a; }
.bci-good      { background: #eef4f2; color: #2d7a6e; }
.bci-fair      { background: #fff7ed; color: #c28b5a; }
.bci-poor      { background: #fff1e6; color: #c2703a; }
.bci-critical  { background: #fdf2f2; color: #c47070; }

/* ============================================
   GLASS SCROLLBAR
   ============================================ */

.glass-scrollbar {
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 55vh;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(238, 244, 242, 0.5));
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    border-radius: 20px;
    border: 1px solid rgba(138, 180, 176, 0.3);
    box-shadow: 0 4px 16px rgba(44, 90, 87, 0.12);
    z-index: 1000;
    overflow: hidden;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}

.glass-scrollbar .thumb {
    width: 100%;
    background: linear-gradient(180deg, #a0c8c4, #5b8c8a);
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 0 12px rgba(91, 140, 138, 0.35), 0 0 24px rgba(91, 140, 138, 0.15);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.glass-scrollbar .thumb:active {
    cursor: grabbing;
}

/* ============================================
   NIGHT MODE
   ============================================ */

.night-mode {
    background-color: #1a2428 !important;
    color: #d4dfe3;
}

.night-mode .navbar {
    background: rgba(47, 62, 72, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.night-mode .navbar .menu a,
.night-mode .navbar .account-links a {
    color: #9ab0b8 !important;
}

.night-mode .navbar .account-links a:hover {
    background: #2f3e45 !important;
    color: #8ab4b0 !important;
}

.night-mode .navbar .menu a:hover,
.night-mode .navbar .menu a.active {
    color: #8ab4b0 !important;
}

.night-mode .navbar .menu a.active {
    background: rgba(138, 180, 176, 0.15);
}

.night-mode .night-mode-toggle {
    background: rgba(62, 82, 94, 0.8) !important;
    color: #c5e0e6 !important;
}

.night-mode .night-mode-toggle:hover {
    background: #4a6570 !important;
}

.night-mode .metric,
.night-mode .chart-card {
    background: rgba(51, 68, 79, 0.88);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.night-mode .back-button {
    background: rgba(51, 68, 79, 0.82);
    border-color: rgba(255, 255, 255, 0.12);
    color: #8ab4b0;
}

.night-mode .back-button:hover {
    background: #5b8c8a;
    color: white;
}

.night-mode .metric-content h3 {
    color: #d4dfe3;
}

.night-mode .metric-split-item h3 {
    color: #d4dfe3;
}

.night-mode .metric-split-divider {
    background: #2f3e45;
}

.night-mode .metric-icon-green {
    background: #1e3a3e;
    color: #8ab4b0;
}

.night-mode .metric-icon-red {
    background: #3a2020;
    color: #e8a0a0;
}

.night-mode .metric-icon-blue {
    background: #1a2a3a;
    color: #7aa0b0;
}

.night-mode .metric-icon-yellow {
    background: #3a3020;
    color: #d4a84a;
}

.night-mode .metric-icon-purple {
    background: #2a2440;
    color: #a89bd6;
}

.night-mode .metric-arrow {
    color: #3f4d54;
}

.night-mode .metric:hover .metric-arrow {
    color: #8ab4b0;
}

.night-mode .section-header { border-color: #2f3e45; }

.night-mode .chart-header {
    background: #1e2a2f;
    border-color: #2f3e45;
}

.night-mode .section-header h2 {
    color: #d4dfe3;
}

.night-mode .section-badge,
.night-mode .chart-badge {
    background: #2f4a48;
    color: #8ab4b0;
    border-color: transparent;
}

.night-mode .chart-toggle {
    background: #2f4a48;
    border-color: transparent;
}

.night-mode .chart-toggle-btn {
    color: #8ab4b0;
}

.night-mode .chart-toggle-btn:hover {
    color: #d4dfe3;
}

.night-mode .chart-toggle-btn.active {
    background: #5b8c8a;
    color: white;
}

.night-mode .bci-legend {
    color: #a8b8bf;
}

.night-mode .data-table.card-rows thead th {
    background: #1e2a2f;
    border-color: #2f3e45;
    color: #a8b8bf;
}
.night-mode .activity-list-header {
    background: #1e2a2f;
    border-color: #2f3e45;
    color: #a8b8bf;
}
.night-mode .data-table.card-rows tbody tr td {
    background: #232e34;
    border-color: #2f3e45;
}
.night-mode .data-table.card-rows tbody tr:hover td {
    background: #2a3a40;
    border-color: #3a4b53;
}
.night-mode .data-table td {
    color: #d4dfe3;
}

.night-mode .bridge-name {
    color: #d4dfe3;
}

.night-mode .risk-high,
.night-mode .risk-critical {
    background: #3a2020;
    color: #e8a0a0;
}

.night-mode .download-btn {
    background: #2f4a48;
    color: #8ab4b0;
    border-color: #4a8a7e !important;
}

.night-mode .activity-item {
    border-bottom-color: #2f3e45;
}

.night-mode .activity-item:hover {
    background: #2a3a40;
}

.night-mode .activity-list.card-rows .activity-item {
    background: #232e34;
    border-color: #2f3e45;
}
.night-mode .activity-list.card-rows .activity-item:hover {
    background: #2a3a40;
    border-color: #3a4b53;
}

.night-mode .activity-title {
    color: #d4dfe3;
}

.night-mode .activity-avatar-green  { background: #1e3a3e; color: #8ab4b0; }
.night-mode .activity-avatar-blue   { background: #1a2a3a; color: #7aa0b0; }
.night-mode .activity-avatar-orange { background: #3a3020; color: #d4a84a; }
.night-mode .activity-avatar-red    { background: #3a2020; color: #e8a0a0; }

.night-mode .status-completed   { background: #1e3a3e; color: #8ab4b0; }
.night-mode .status-in-progress { background: #1a2a3a; color: #7aa0b0; }
.night-mode .status-overdue     { background: #3a2020; color: #e8a0a0; }

.night-mode .bci-excellent { background: #1e3a3e; color: #8ab4b0; }
.night-mode .bci-good      { background: #1e3a3e; color: #8ab4b0; }
.night-mode .bci-fair      { background: #3a3020; color: #d4a84a; }
.night-mode .bci-poor      { background: #3a2a1a; color: #d4915a; }
.night-mode .bci-critical  { background: #3a2020; color: #e8a0a0; }

/* Glass scrollbar night mode */
body.night-mode .glass-scrollbar,
html.night-mode .glass-scrollbar {
    background: linear-gradient(180deg, rgba(51, 68, 79, 0.75), rgba(35, 46, 52, 0.65)) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

body.night-mode .glass-scrollbar .thumb,
html.night-mode .glass-scrollbar .thumb {
    background: linear-gradient(180deg, #ff6b6b, #c0392b) !important;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1), 0 0 14px rgba(138, 180, 176, 0.45), 0 0 28px rgba(138, 180, 176, 0.2) !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1100px) {
    .navbar {
        width: 70%;
    }
}

@media (max-width: 1000px) {
    .container {
        max-width: 90%;
        padding: 100px 16px 16px 16px;
        overflow-x: auto;
    }

    .dashboard-bottom-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .navbar {
        width: 90%;
        padding: 0 18px;
    }

    .navbar .menu a .nav-label {
        display: none;
    }

    .navbar .menu a {
        gap: 0;
        padding: 0;
        width: 36px;
        height: 36px;
        justify-content: center;
        border-radius: 50%;
    }

    .navbar .menu a.active {
        padding: 0;
    }

    .navbar .menu {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .navbar .menu::-webkit-scrollbar {
        display: none;
    }

    .container {
        max-width: 95%;
    }

    .glass-scrollbar {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .navbar {
        width: 95%;
        padding: 0 16px;
    }

    .metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .charts {
        grid-template-columns: 1fr;
        min-width: auto;
    }
    
    .action-btn {
        padding: 4px 10px;
        font-size: 0.65rem;
    }

    .section-header h2 {
        font-size: 0.95rem;
    }

    .back-button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .navbar {
        width: 95%;
        padding: 0 12px;
    }

    .metrics {
        grid-template-columns: 1fr;
    }

    .action-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   PENDING REVIEW (engineer/admin only, dashboard.js)
   ============================================================ */
.pending-review-section {
    margin-top: 24px;
}

.pending-review-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #cbd5df;
    flex-wrap: wrap;
}

.pr-search-wrap {
    position: relative;
    flex: 1;
    min-width: 180px;
}

.pr-search-wrap i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #5f6b73;
    font-size: 0.7rem;
    pointer-events: none;
}

.pr-search-wrap input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px 8px 30px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 0.78rem;
    font-family: inherit;
    color: #2c4a48;
    background: white;
}

.pr-search-wrap input:focus {
    outline: none;
    border-color: #8ab4b0;
}

.pr-critical-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: transparent;
    color: #5f6b73;
    font-size: 0.68rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.pr-critical-toggle:hover {
    border-color: #c47070;
    color: #c47070;
}

.pr-critical-toggle.active {
    background: #fdf2f2;
    border-color: #c47070;
    color: #c47070;
}

/* ID selectors here so these reliably beat .pr-critical-toggle.active's red
   regardless of source order (that base rule was written only with the
   Critical-only button in mind, and equal-specificity class rules resolve
   by order, not intent - see the appbar padding-top bug in spanSense Field
   for what happens when that's left to chance). */
#pendingReviewFieldToggle:hover { border-color: #5b8c8a; color: #5b8c8a; }
#pendingReviewFieldToggle.active { background: #eef4f2; border-color: #5b8c8a; color: #5b8c8a; }
.night-mode #pendingReviewFieldToggle:hover { border-color: #8ab4b0; color: #8ab4b0; }
.night-mode #pendingReviewFieldToggle.active { background: #1e3a3e; border-color: #8ab4b0; color: #8ab4b0; }

.pr-field-badge {
    display: inline-flex; align-items: center; gap: 4px; font-size: 0.65rem; font-weight: 700;
    padding: 2px 8px; border-radius: 10px; background: #eef4f2; color: #5b8c8a; vertical-align: middle;
}
.night-mode .pr-field-badge { background: #1e3a3e; color: #8ab4b0; }

/* Inspection-type badges - same GI/PI/SI color language as the Previous
   Inspections modal's .ss-badge-* (map.css), so the type reads the same
   way across the app instead of only being distinguishable via the type
   filter buttons above the table. */
.pr-type-badge {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    font-size: 0.65rem; font-weight: 700; border: 1px solid transparent;
}
.pr-type-gi { background: #eef4f2; color: #5b8c8a; border-color: #c5dbd8; }
.pr-type-pi { background: #f0f4ff; color: #5b7c8a; border-color: #c5d0db; }
.pr-type-si { background: #fff8e6; color: #b8953a; border-color: #e8d8a8; }
.night-mode .pr-type-gi { background: #2f4a48; color: #8ab4b0; border-color: #3a6b62; }
.night-mode .pr-type-pi { background: #2a3a4a; color: #7aa0b0; border-color: #3a5a6a; }
.night-mode .pr-type-si { background: #2f2a1a; color: #c8a84a; border-color: #4a3a20; }

.night-mode .pending-review-filters { border-bottom-color: #2f3e45; }
.night-mode .pr-search-wrap input { background: #1e2a2f; border-color: #3a4b53; color: #d4dfe3; }
.night-mode .pr-search-wrap input:focus { border-color: #8ab4b0; }
.night-mode .pr-search-wrap i { color: #a8b8bf; }
.night-mode .pr-critical-toggle { border-color: #3a4b53; color: #a8b8bf; }
.night-mode .pr-critical-toggle:hover { border-color: #e57373; color: #e57373; }
.night-mode .pr-critical-toggle.active { background: #3a2020; border-color: #e57373; color: #e8a0a0; }

.review-btn {
    background: #eef4f2;
    color: #5b8c8a;
    border: 1px solid #8ab4b0 !important;
}

.review-btn:hover {
    background: #5b8c8a;
    color: white;
}

.night-mode .review-btn {
    background: #2f4a48;
    color: #8ab4b0;
    border-color: #4a8a7e !important;
}

/* Pending review pagination — same visual language as database.html's table
   pagination, reimplemented here since that one lives in injected JS styles
   scoped to that page. */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 14px 22px 4px;
    flex-wrap: wrap;
}

.pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #4d5960;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}

.pagination-btn:hover:not(:disabled) {
    background: #eef4f2;
    border-color: #8ab4b0;
    color: #5b8c8a;
}

.pagination-btn.active {
    background: #5b8c8a;
    border-color: #5b8c8a;
    color: white;
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-ellipsis {
    padding: 0 4px;
    color: #5f6b73;
}
.night-mode .pagination-ellipsis { color: #a8b8bf; }

.night-mode .pagination-btn {
    background: #1e2a2f;
    border-color: #3a4b53;
    color: #9ab0b8;
}

.night-mode .pagination-btn:hover:not(:disabled) {
    background: #2f4a48;
    border-color: #6e9c98;
    color: #8ab4b0;
}

.night-mode .pagination-btn.active {
    background: #5b8c8a;
    border-color: #5b8c8a;
    color: white;
}

/* Review modal — same visual language as the confirm-style modal already
   used elsewhere in the app (see inspection.css .modal-overlay/.modal-card),
   copied here rather than pulling that whole stylesheet into the dashboard. */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30, 46, 52, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.modal-card {
    background: rgba(244, 248, 247, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 32px;
    padding: 36px 40px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    border: 1px solid rgba(138, 180, 176, 0.32);
    box-shadow:
        0 8px 24px rgba(44, 90, 87, 0.08),
        0 24px 48px rgba(44, 90, 87, 0.12);
    transform: scale(0.96) translateY(16px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-overlay.active .modal-card {
    transform: scale(1) translateY(0);
}
.modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2c4a48;
    margin-bottom: 14px;
    letter-spacing: -0.3px;
}
.modal-message {
    font-size: 0.9rem;
    color: #5f6b73;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: left;
}
.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.modal-btn {
    padding: 13px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.2px;
    min-width: 100px;
    border: none;
    font-family: inherit;
}
.modal-btn.primary {
    background: #5b8c8a;
    color: white;
    box-shadow: 0 4px 16px rgba(91, 140, 138, 0.25);
}
.modal-btn.primary:hover {
    background: #4a7876;
    box-shadow: 0 6px 20px rgba(91, 140, 138, 0.35);
    transform: translateY(-2px);
}
.modal-btn.secondary {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #4d5960;
}
.modal-btn.secondary:hover {
    background: #f1f5f4;
    border-color: #c5dbd8;
    color: #5b8c8a;
}
.modal-btn.danger {
    background: #c07070;
    color: white;
    box-shadow: 0 4px 16px rgba(192, 112, 112, 0.2);
}
.modal-btn.danger:hover {
    background: #a85a5a;
    box-shadow: 0 6px 20px rgba(192, 112, 112, 0.3);
    transform: translateY(-2px);
}

.review-modal-card {
    max-width: 440px;
}
.review-edit-link {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #5b8c8a;
    text-decoration: none;
    padding: 8px 12px;
    background: #eef4f2;
    border-radius: 12px;
    margin-bottom: 16px;
    transition: background 0.15s;
}
.review-edit-link:hover { background: #dcebe8; }
.night-mode .review-edit-link { background: #1e3a35; color: #8ab4b0; }
.night-mode .review-edit-link:hover { background: #234840; }
.review-comments-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 0.85rem;
    color: #2c4a48;
    resize: vertical;
    margin-bottom: 20px;
}
.review-comments-input:focus {
    outline: none;
    border-color: #8ab4b0;
}

.night-mode .modal-overlay { background: rgba(15, 24, 28, 0.5); }
.night-mode .modal-card {
    background: rgba(51, 68, 79, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 24px 48px rgba(0, 0, 0, 0.3);
}
.night-mode .modal-title { color: #d4dfe3; }
.night-mode .modal-message { color: #a8b8bf; }
.night-mode .modal-btn.secondary {
    border-color: #3a4b53;
    color: #a8b8bf;
}
.night-mode .modal-btn.secondary:hover {
    background: #2f3e45;
    color: #d4dfe3;
}
.night-mode .review-comments-input {
    background: #1e2a2f;
    border-color: #3a4b53;
    color: #d4dfe3;
}