/* ============================================
   SPANSENSE - DATABASE EXPORT PAGE STYLES
   (Navbar width reduced to 60%)
   ============================================ */

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

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;
}

/* ---------- 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;
}
.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); }

/* ---------- MAIN WRAPPER ---------- */
.page-wrapper {
    max-width: 75%;
    margin: 0 auto;
    padding: 100px 0 60px 0;
}

/* ---------- BACK PILL ---------- */
.back-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    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);
    user-select: none;
}

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

.back-pill:active {
    transform: translateX(-2px) scale(0.98);
}

.back-pill i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.back-pill:hover i {
    transform: translateX(-3px);
}

/* ---------- PAGE HEADER ---------- */
.page-header { margin-bottom: 32px; }
.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.9rem;
    padding-left: 18px;
}

/* ---------- EXPORT CARDS GRID ---------- */
.export-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}
.export-card {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-radius: 20px;
    border: 1px solid rgba(138, 180, 176, 0.28);
    padding: 16px 18px 18px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.export-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    border-color: #c5dbd8;
}
.export-card.active {
    border-color: #8ab4b0;
    box-shadow: 0 8px 24px rgba(91, 140, 138, 0.15);
}
.export-card.active::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: #8ab4b0;
}
.export-card .card-icon {
    width: 38px; height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-bottom: 8px;
    transition: all 0.3s;
}
.export-card:hover .card-icon { transform: scale(1.1) rotate(-5deg); }
.export-card.bridges .card-icon { background: #eef4f2; color: #5b8c8a; }
.export-card.inspections .card-icon { background: #fdf2f2; color: #e8a87c; }
.export-card.reports .card-icon { background: #f0f9ff; color: #4a90b8; }
.export-card .card-title {
    font-size: 0.94rem;
    font-weight: 600;
    color: #2c4a48;
    margin-bottom: 3px;
}
.export-card .card-desc {
    font-size: 0.74rem;
    color: #5f6b73;
    line-height: 1.4;
    margin-bottom: 10px;
    /* Capped at 2 lines instead of wrapping freely - on a card this much
       shorter, a long description (e.g. Shares') would otherwise push the
       count pill/arrow down a variable amount card to card. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.export-card .card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    font-size: 0.7rem;
    color: #5f6b73;
    /* Always the pill on its own row, file-type list on the row below -
       fixed two-row layout rather than one row that only wraps once a
       longer file-type list (e.g. Reports' "CSV, XLSX, BCI, DOCX, PDF")
       forces it, so all three export cards read as the same shape
       regardless of how long their own file-type list is. Room on the
       right for .card-arrow (28px, positioned bottom:14px right:14px). */
    padding-right: 34px;
}
.export-card .card-meta .count {
    background: #f8fafc;
    padding: 3px 9px;
    border-radius: 20px;
    font-weight: 600;
    color: #5b8c8a;
    white-space: nowrap;
}
.export-card .card-arrow {
    position: absolute;
    bottom: 14px; right: 14px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5f6b73;
    font-size: 0.75rem;
    transition: all 0.3s;
}
.export-card:hover .card-arrow {
    background: #5b8c8a;
    color: white;
    transform: translateX(4px);
}
.export-card.active .card-arrow {
    background: #5b8c8a;
    color: white;
}

/* ---------- EXPORT PANEL ---------- */
/* No card/box here on purpose - the header, filters and table sit directly
   on the page background (matching inspection.html's pill rows), rather
   than nested inside another white box on top of it. The pieces that
   still read as distinct groupings (.option-group, each format/column-
   visibility block) already have their own small card - see below. */
.export-panel {
    margin-bottom: 24px;
}
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}
.panel-header h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: #2c4a48;
    display: flex;
    align-items: center;
    gap: 10px;
}
.panel-header h2 i { color: #8ab4b0; }
.panel-actions { display: flex; gap: 10px; }
.btn-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: white;
    color: #4d5960;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.btn-icon:hover { background: #f8fafc; color: #5b8c8a; border-color: #8ab4b0; }

/* ---------- FILTERS ---------- */
.filters-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    container-type: inline-size;
    container-name: filters-row;
}
.filters-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}
.db-search-wrap {
    position: relative;
    flex: 1 1 160px;
    min-width: 140px;
    max-width: 340px;
}
/* Below this the chip labels + a comfortably-wide search box no longer fit
   on one line - drop to icon-only chips (title attr covers the tooltip)
   before letting anything wrap. */
@container filters-row (max-width: 760px) {
    .filter-chip .chip-label { display: none; }
    .filter-chip { padding: 8px 11px; }
}
.db-search-wrap > i.fa-search {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #5f6b73;
    font-size: 0.7rem;
    pointer-events: none;
}
.db-search-wrap input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 30px 8px 30px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 0.8rem;
    font-family: inherit;
    color: #2c4a48;
    background: #fafbfc;
    transition: border-color 0.2s;
}
.db-search-wrap input:focus {
    outline: none;
    border-color: #8ab4b0;
}
.db-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #5f6b73;
    font-size: 0.7rem;
    cursor: pointer;
}
.db-search-clear:hover { color: #5b8c8a; }
.filter-chip {
    padding: 8px 16px;
    border-radius: 30px;
    border: 1px solid #e2e8f0;
    background: #fafbfc;
    font-size: 0.8rem;
    color: #4d5960;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
}
.filter-chip:hover { border-color: #8ab4b0; color: #5b8c8a; }
.filter-chip.active {
    background: #eef4f2;
    border-color: #8ab4b0;
    color: #2c5a57;
    font-weight: 500;
}
.filter-chip i { font-size: 0.75rem; }

/* ---------- DATA TABLE ---------- */
/* No wrapping box here either (see .export-panel above) - pagination.js
   still needs this element to exist in the DOM (addPaginationControls()
   inserts the pager right after it), so it stays, just visually plain. */
.data-table-wrap {
    margin-bottom: 20px;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table thead tr { background: #f8fafc; }
.data-table th {
    padding: 14px 16px;
    text-align: left;
    color: #5a6e7a;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid #cbd5df;
}
.data-table th sub { text-transform: none; }
.data-table td {
    padding: 14px 16px;
    color: #2c3e44;
    font-size: 0.85rem;
    border-bottom: 1px solid #cbd5df;
    transition: background 0.15s;
}
.data-table tbody tr:hover td { background: #fafbfc; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .col-check { width: 40px; text-align: center; }
.data-table .col-check input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: #5b8c8a;
    cursor: pointer;
}
.data-table .row-actions {
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}
.data-table tbody tr:hover .row-actions { opacity: 1; }
.data-table .row-actions button {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: white;
    color: #5f6b73;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all 0.2s;
}
.data-table .row-actions button:hover {
    background: #5b8c8a;
    border-color: #5b8c8a;
    color: white;
}

/* ---------- CARD-STYLE ROWS (all three categories) ----------
   .card-rows is added by rebuildBridgesTable()/rebuildInspectionsTable()/
   rebuildReportsTable() in database.js, since #dataTable's innerHTML is
   what all three categories share and rebuild in turn. Mirrors
   inspection.html's rounded pill-row look (#inspectionElementsTable
   tr.main-row) but keeps every column inline - no expand/collapse. */
.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: #eef2f6;
    border-top: 1px solid #e3e9ef;
    border-bottom: 1px solid #e3e9ef;
    color: #4d5960;
}
.data-table.card-rows thead th:first-child {
    border-left: 1px solid #e3e9ef;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}
.data-table.card-rows thead th:last-child {
    border-right: 1px solid #e3e9ef;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
.data-table.card-rows tbody tr td {
    background: white;
    border-top: 1px solid #cbd5df;
    border-bottom: 1px solid #cbd5df;
}
.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: 30px;
    border-bottom-left-radius: 30px;
}
.data-table.card-rows tbody tr td:last-child {
    border-right: 1px solid #cbd5df;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
.data-table.card-rows .bridge-name .meta {
    display: block; font-size: 0.7rem; font-weight: 500; color: #5f6b73; margin-top: 2px;
}
.data-table.card-rows .type-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; color: white; font-size: 0.68rem;
    margin-right: 8px; flex-shrink: 0;
}

/* Circular select checkbox (replaces the plain square one) */
.data-table.card-rows .col-check input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid #c5dbd8; background: white; cursor: pointer;
    position: relative; transition: all 0.15s ease; accent-color: unset;
}
.data-table.card-rows .col-check input[type="checkbox"]:hover { border-color: #8ab4b0; }
.data-table.card-rows .col-check input[type="checkbox"]:checked {
    background: #5b8c8a; border-color: #5b8c8a;
}
.data-table.card-rows .col-check input[type="checkbox"]:checked::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    color: white; font-size: 10px; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

.night-mode .data-table.card-rows thead th { 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.card-rows .col-check input[type="checkbox"] {
    background: #232e34; border-color: #3a4b53;
}

/* ---------- STRUCTURE REGISTER: GRC/DRC column + element drawer ---------- */
.data-table .col-valuation {
    text-align: right;
    white-space: nowrap;
}
/* Stacked GRC (neutral) above DRC (coloured by depreciation, set inline by
   populateValuationCells) - both stay visible in about half the width of
   the old two-column layout. */
.val-stack { display: flex; flex-direction: column; gap: 3px; }
.val-row { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.val-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a9ba8;
    width: 26px;
    text-align: left;
    flex-shrink: 0;
}
.val-amt { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.85rem; }
.night-mode .val-label { color: #7d939b; }
.data-table .col-expand { width: 44px; text-align: center; }
.data-table .col-depreciated { width: 130px; }
.depreciated-cell { display: flex; align-items: center; gap: 8px; }
.depreciated-bar {
    width: 56px; height: 7px;
    background: #eef2f6;
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
}
.depreciated-bar-fill { height: 100%; border-radius: 5px; }
.depreciated-cell span { font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.condition-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; color: #4d5960; }
.condition-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.valuation-loading { color: #8ab4b0; font-size: 0.8rem; }
.valuation-unavailable { color: #8a9ba8; font-weight: 400; cursor: help; }

/* ---------- PORTFOLIO VALUATION OVERVIEW (Asset Valuation panel) ---------- */
.valuation-overview { margin-bottom: 28px; }
.valuation-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.valuation-stat {
    background: #fafbfc;
    border-radius: 16px;
    padding: 16px 18px;
    border: 1px solid #cbd5df;
}
.valuation-stat h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c4a48;
    line-height: 1.2;
}
.valuation-stat p {
    font-size: 0.7rem;
    color: #5f6b73;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}
.night-mode .valuation-stat { background: #1e2a2f; border-color: #2f3e45; }
.night-mode .valuation-stat h3 { color: #d4dfe3; }
.night-mode .valuation-stat p { color: #a8b8bf; }

.valuation-breakdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.valuation-breakdown-header h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2c4a48;
    display: flex;
    align-items: center;
    gap: 8px;
}
.valuation-breakdown-header h3 i { color: #8ab4b0; font-size: 0.9rem; }
.night-mode .valuation-breakdown-header h3 { color: #d4dfe3; }

.valuation-records-link {
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; font-size: 0.8rem; font-weight: 500; color: #5b8c8a;
    display: inline-flex; align-items: center; gap: 6px;
}
.valuation-records-link i { font-size: 0.7rem; }
.valuation-records-link:hover { color: #2c5a57; text-decoration: underline; }
.night-mode .valuation-records-link { color: #8ab4b0; }
.night-mode .valuation-records-link:hover { color: #b8d4d1; }

/* ---------- LIFECYCLE PLANNER (Asset Valuation panel) ---------- */
.lifecycle-planner {
    margin-bottom: 24px;
    padding: 22px 0 6px;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}
.night-mode .lifecycle-planner { border-color: #2f3e45; }

.lp-beta {
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px; background: #e6f0ef; color: #3f6f6c;
}
.night-mode .lp-beta { background: #26393b; color: #8ab4b0; }
.lp-intro { font-size: 0.8rem; color: #5f6b73; margin: -4px 0 16px; line-height: 1.5; }
.night-mode .lp-intro { color: #a8b8bf; }
.lp-horizon { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: #5f6b73; font-weight: 600; }
.night-mode .lp-horizon { color: #a8b8bf; }
.lp-scenario-row input {
    font-family: inherit; font-size: 0.82rem; color: #2c3e44;
    background: #fff; border: 1px solid #cbd5df; border-radius: 10px; padding: 7px 10px;
}
.night-mode .lp-scenario-row input { background: #1a2228; border-color: #3a4b53; color: #c5d3d9; }
.lp-scenario-row input:focus { outline: none; border-color: #5b8c8a; box-shadow: 0 0 0 3px rgba(91, 140, 138, 0.15); }

/* Planner dropdowns - spanSense's custom-select (inspection.css's
   .custom-date-dropdown), radius trimmed to match the inputs beside them.
   lifecyclePlanner.js's enhanceSelect() builds these over hidden <select>s. */
.lp-dd { position: relative; min-width: 0; }
.lp-horizon .lp-dd { width: 130px; }
.lp-dd-trigger {
    width: 100%; font-family: inherit; font-size: 0.82rem; font-weight: 500; color: #2c3e44;
    background: #fff; border: 1px solid #cbd5df; border-radius: 10px; padding: 7px 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    cursor: pointer; text-align: left; transition: border-color 0.2s ease, background 0.2s ease;
}
.lp-dd-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-dd-trigger:hover,
.lp-dd.open .lp-dd-trigger { border-color: #8ab4b0; }
.lp-dd-trigger:focus-visible { outline: none; border-color: #5b8c8a; box-shadow: 0 0 0 3px rgba(91, 140, 138, 0.15); }
.lp-dd-chevron { font-size: 0.7rem; color: #5f6b73; transition: transform 0.2s ease; flex-shrink: 0; }
.lp-dd.open .lp-dd-chevron { transform: rotate(180deg); }
.lp-dd-panel {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1001;
    background: #fff; border: 1px solid #e9edf2; border-radius: 12px; overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1); display: none;
}
.lp-dd.open .lp-dd-panel { display: block; }
.lp-dd-item {
    padding: 10px 14px; font-size: 0.82rem; color: #4d5960; cursor: pointer;
    border-bottom: 1px solid #e9edf2; transition: background 0.15s, color 0.15s;
}
.lp-dd-item:last-child { border-bottom: none; }
.lp-dd-item:hover, .lp-dd-item.active { background: #eef4f2; color: #5b8c8a; }
.night-mode .lp-dd-trigger { background: #1a2228; border-color: #3a4b53; color: #c5d3d9; }
.night-mode .lp-dd-trigger:hover,
.night-mode .lp-dd.open .lp-dd-trigger { background: #2a3a40; border-color: #8ab4b0; }
.night-mode .lp-dd-chevron { color: #a8b8bf; }
.night-mode .lp-dd-panel { background: #2f3e48; border-color: #3e525e; }
.night-mode .lp-dd-item { color: #a8c4cc; border-bottom-color: #3e525e; }
.night-mode .lp-dd-item:hover, .night-mode .lp-dd-item.active { background: #3a6b62; color: #fff; }

.lp-scenarios {
    background: #fafbfc; border: 1px solid #cbd5df; border-radius: 16px;
    padding: 14px 16px; margin-bottom: 18px;
}
.night-mode .lp-scenarios { background: #1e2a2f; border-color: #2f3e45; }
.lp-scenarios-head,
.lp-scenario-row {
    display: grid;
    grid-template-columns: 14px minmax(120px, 1.2fr) minmax(150px, 1fr) minmax(120px, 1fr);
    gap: 10px; align-items: center;
}
.lp-scenarios-head {
    font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    color: #5f6b73; margin-bottom: 8px;
}
.lp-scenarios-head span:first-child { grid-column: 2; }
.night-mode .lp-scenarios-head { color: #a8b8bf; }
.lp-scenario-row { margin-bottom: 8px; }

/* Budget cell: amount + "vary by period" toggle, or a period summary */
.lp-budget-cell { display: flex; gap: 6px; min-width: 0; }
.lp-budget-cell .lp-budget { flex: 1; min-width: 0; }
.lp-period-btn {
    flex-shrink: 0; width: 34px; border-radius: 10px; cursor: pointer;
    background: #fff; border: 1px solid #cbd5df; color: #5f6b73; font-size: 0.8rem;
}
.lp-period-btn:hover { border-color: #8ab4b0; color: #2c5a57; }
.lp-period-btn.active { background: #5b8c8a; border-color: #5b8c8a; color: #fff; }
.lp-period-summary {
    flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-family: inherit; font-size: 0.82rem; font-weight: 500; color: #2c3e44; text-align: left;
    background: #fff; border: 1px solid #cbd5df; border-radius: 10px; padding: 7px 12px; cursor: pointer;
}
.lp-period-summary:hover { border-color: #8ab4b0; }
.lp-period-summary i { font-size: 0.7rem; color: #5f6b73; }
.night-mode .lp-period-btn { background: #1a2228; border-color: #3a4b53; color: #a8b8bf; }
.night-mode .lp-period-btn:hover { border-color: #8ab4b0; color: #d4dfe3; }
.night-mode .lp-period-btn.active { background: #5b8c8a; border-color: #5b8c8a; color: #fff; }
.night-mode .lp-period-summary { background: #1a2228; border-color: #3a4b53; color: #c5d3d9; }
.night-mode .lp-period-summary i { color: #a8b8bf; }

/* Budget periods editor (SAVI Main Page style), full width under the row */
.lp-periods {
    grid-column: 2 / -1; margin: 2px 0 6px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px;
}
.lp-periods-head,
.lp-period-row {
    display: grid; grid-template-columns: 90px 110px minmax(140px, 1fr) 30px; gap: 10px; align-items: center;
}
.lp-periods-head {
    font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #5f6b73; margin-bottom: 6px;
}
.lp-period-row { margin-bottom: 6px; font-size: 0.82rem; color: #2c3e44; }
.lp-period-from, .lp-period-to-fixed { padding-left: 11px; font-weight: 500; }
.lp-period-row input {
    font-family: inherit; font-size: 0.82rem; color: #2c3e44; min-width: 0;
    background: #fafbfc; border: 1px solid #cbd5df; border-radius: 10px; padding: 6px 10px;
}
.lp-period-row input:focus { outline: none; border-color: #5b8c8a; box-shadow: 0 0 0 3px rgba(91, 140, 138, 0.15); }
.lp-period-to::-webkit-inner-spin-button, .lp-period-to::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.lp-period-to { -moz-appearance: textfield; appearance: textfield; }
.lp-period-remove {
    width: 28px; height: 28px; border-radius: 50%; border: 1px solid transparent; background: transparent;
    color: #8a9ba8; cursor: pointer;
}
.lp-period-remove:hover { color: #c0392b; border-color: #f0d5d1; background: #fdf3f1; }
.lp-periods-actions { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.lp-period-add, .lp-period-reset {
    font-family: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer;
    border-radius: 10px; padding: 6px 12px; background: transparent;
}
.lp-period-add { color: #2c5a57; border: 1px dashed #8ab4b0; display: inline-flex; align-items: center; gap: 6px; }
.lp-period-add:hover:not(:disabled) { background: #eef4f2; }
.lp-period-add:disabled { opacity: 0.5; cursor: default; }
.lp-period-reset { color: #5f6b73; border: 1px solid transparent; }
.lp-period-reset:hover { color: #2c5a57; }
.night-mode .lp-periods { background: #1a2228; border-color: #2f3e45; }
.night-mode .lp-periods-head { color: #a8b8bf; }
.night-mode .lp-period-row { color: #c5d3d9; }
.night-mode .lp-period-row input { background: #1e2a2f; border-color: #3a4b53; color: #c5d3d9; }
.night-mode .lp-period-remove { color: #7c8b93; }
.night-mode .lp-period-remove:hover { color: #e66767; border-color: #4a2f2f; background: #2c2020; }
.night-mode .lp-period-add { color: #8ab4b0; border-color: #4f7a77; }
.night-mode .lp-period-add:hover:not(:disabled) { background: #243a3b; }
.night-mode .lp-period-reset { color: #a8b8bf; }
.night-mode .lp-period-reset:hover { color: #d4dfe3; }
.lp-swatch { width: 12px; height: 12px; border-radius: 3px; }
.lp-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.lp-hint { font-size: 0.75rem; color: #5f6b73; }
.night-mode .lp-hint { color: #a8b8bf; }
.lp-run-btn {
    font-family: inherit; font-size: 0.8rem; font-weight: 600; color: #fff;
    background: #5b8c8a; border: none; border-radius: 10px; padding: 8px 16px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
}
.lp-run-btn:hover:not(:disabled) { background: #4a7775; }
.lp-run-btn:disabled { opacity: 0.7; cursor: default; }

.lp-results .valuation-breakdown-header { flex-wrap: wrap; gap: 10px; }
.lp-chart-wrap { position: relative; height: 320px; }

@media (max-width: 640px) {
    .lp-scenarios-head { display: none; }
    .lp-scenario-row { grid-template-columns: 14px 1fr; }
    .lp-scenario-row .lp-dd, .lp-scenario-row .lp-budget-cell { grid-column: 2; }
    .lp-periods-head, .lp-period-row { grid-template-columns: 50px 70px 1fr 30px; }
    .lp-chart-wrap { height: 260px; }
}

.valuation-expand-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: white;
    color: #5f6b73;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all 0.2s;
}
.valuation-expand-btn:hover { background: #5b8c8a; border-color: #5b8c8a; color: white; }
.valuation-expand-btn i { transition: transform 0.15s; }

.valuation-drawer-loading {
    padding: 18px 24px;
    color: #5f6b73;
    font-size: 0.82rem;
    display: flex; align-items: center; gap: 10px;
}
.valuation-drawer-empty {
    padding: 18px 24px;
    color: #8a9ba8;
    font-size: 0.82rem;
}
.valuation-drawer {
    background: #fafbfc;
    border: 1px solid #e3e9ef;
    border-radius: 16px;
    padding: 18px 22px;
    margin: 2px 0;
}
.valuation-drawer-summary {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e3e9ef;
    font-size: 0.82rem;
    color: #5f6b73;
}
.valuation-drawer-summary strong { color: #2c5a57; font-size: 0.95rem; margin-right: 4px; }
.valuation-drawer-table { width: 100%; border-collapse: collapse; }
.valuation-drawer-table th {
    text-align: left;
    padding: 6px 10px;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a9ba8;
    border-bottom: 1px solid #e3e9ef;
}
.valuation-drawer-table td {
    padding: 7px 10px;
    font-size: 0.8rem;
    color: #2c3e44;
    border-bottom: 1px solid #eef1f3;
}
.valuation-drawer-unavailable {
    margin-top: 12px;
    font-size: 0.74rem;
    color: #8a9ba8;
    line-height: 1.5;
}
.valuation-unpriced-toggle {
    font-family: inherit; font-size: 0.74rem; font-weight: 600; color: #5f6b73;
    background: none; border: none; padding: 2px 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.valuation-unpriced-toggle i { color: #8ab4b0; font-size: 0.8rem; }
.valuation-unpriced-toggle:hover, .valuation-unpriced-toggle.open { color: #2c5a57; }
.valuation-unpriced-list { margin-top: 6px; padding-left: 10px; border-left: 2px solid #e3e9ef; }
.valuation-unpriced-reason { font-weight: 600; color: #5f6b73; }
.night-mode .valuation-unpriced-toggle { color: #a8b8bf; }
.night-mode .valuation-unpriced-toggle:hover, .night-mode .valuation-unpriced-toggle.open { color: #d4dfe3; }
.night-mode .valuation-unpriced-list { border-left-color: #2f3e45; }
.night-mode .valuation-unpriced-reason { color: #c5d3d9; }

/* Whole-life cost (lifecycle assessment) section inside the drawer */
.wlc-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e3e9ef; }
.wlc-header { font-size: 0.85rem; font-weight: 600; color: #2c4a48; margin-bottom: 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wlc-sub { font-size: 0.72rem; font-weight: 500; color: #8a9ba8; }
.valuation-drawer-table tr.wlc-best td { background: #eef6f5; }
.valuation-cond-note { color: #8a9ba8; font-size: 0.74rem; }
.night-mode .valuation-cond-note { color: #7c8b93; }
.wlc-best-pill {
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 2px 7px; border-radius: 999px; background: #5b8c8a; color: #fff; margin-left: 6px;
}
.night-mode .wlc-section { border-color: #2f3e45; }
.night-mode .wlc-header { color: #d4dfe3; }
.night-mode .wlc-sub { color: #7c8b93; }
.night-mode .valuation-drawer-table tr.wlc-best td { background: #243a3b; }

.night-mode .valuation-drawer { background: #1e2a2f; border-color: #2f3e45; }
.night-mode .valuation-drawer-summary { border-color: #2f3e45; color: #a8b8bf; }
.night-mode .valuation-drawer-summary strong { color: #8ab4b0; }
.night-mode .valuation-drawer-table th { color: #7c8b93; border-color: #2f3e45; }
.night-mode .valuation-drawer-table td { color: #dce4e8; border-color: #2f3e45; }
.night-mode .valuation-drawer-loading, .night-mode .valuation-drawer-empty, .night-mode .valuation-drawer-unavailable { color: #a8b8bf; }
.night-mode .valuation-expand-btn { background: #232e34; border-color: #3a4b53; color: #a8b8bf; }
.night-mode .valuation-expand-btn:hover { background: #5b8c8a; border-color: #5b8c8a; color: white; }
.night-mode .valuation-unavailable { color: #7c8b93; }
.night-mode .depreciated-bar { background: #2f3e45; }
.night-mode .condition-pill { color: #dce4e8; }

/* ---------- EXPORT OPTIONS ---------- */
.export-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}
.option-group {
    background: #fafbfc;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #cbd5df;
}
.option-group h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2c4a48;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.option-group h3 i { color: #8ab4b0; font-size: 0.9rem; }
.format-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.format-btn {
    padding: 10px 20px;
    border-radius: 30px;
    border: 2px solid #e2e8f0;
    background: white;
    font-size: 0.8rem;
    font-weight: 500;
    color: #4d5960;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
}
.format-btn:hover { border-color: #8ab4b0; color: #5b8c8a; }
.format-btn.active {
    border-color: #5b8c8a;
    background: #eef4f2;
    color: #2c5a57;
}
.format-btn i { font-size: 0.9rem; }

/* Date range */
.date-range {
    display: flex;
    gap: 12px;
    align-items: center;
}
.date-range input {
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 0.85rem;
    font-family: inherit;
    color: #2c4a48;
    background: white;
    transition: all 0.2s;
}
.date-range input:focus {
    outline: none;
    border-color: #8ab4b0;
}
.date-range span {
    color: #5f6b73;
    font-size: 0.8rem;
}

/* Built-year range - custom stepper replacing the browser's native
   number-input spin arrows, styled to match the rest of the app. */
.year-stepper {
    position: relative;
    display: inline-flex;
}
.year-stepper input {
    width: 110px;
    padding-right: 26px !important;
}
.year-stepper input[type=number]::-webkit-inner-spin-button,
.year-stepper input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.year-stepper input[type=number] {
    -moz-appearance: textfield;
}
.year-stepper-btns {
    position: absolute;
    right: 4px;
    top: 3px;
    bottom: 3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}
.year-step-btn {
    width: 18px;
    height: 15px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #8a9ba8;
    font-size: 0.55rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.year-step-btn:hover {
    background: #eef4f2;
    color: #5b8c8a;
}
.year-step-btn i { pointer-events: none; }

/* Report date range - spanSense-styled flatpickr calendar (see
   inspection1.css/planning.html) instead of the browser-native
   <input type="date"> popup, for the same reason. */
.flatpickr-calendar .flatpickr-day {
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
}
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange {
    background: #5b8c8a !important;
    color: white !important;
    border-radius: 8px !important;
}
.flatpickr-calendar .flatpickr-day.today {
    font-weight: 700 !important;
    color: #5b8c8a !important;
}
/* today AND selected needs to win over the plain .today rule above - same
   specificity, so make it explicit rather than relying on source order. */
.flatpickr-calendar .flatpickr-day.today.selected {
    color: white !important;
}
.flatpickr-calendar .flatpickr-day:hover:not(.flatpickr-disabled):not(.notAllowed):not(.selected) {
    background: #eef4f2 !important;
    border-radius: 8px !important;
    color: #2c5a57 !important;
}
.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay {
    color: #b0c0c8 !important;
    opacity: 0.6 !important;
}
.flatpickr-calendar .flatpickr-months,
.flatpickr-calendar .flatpickr-month,
.flatpickr-calendar .flatpickr-current-month {
    background: #f8fafc !important;
    color: #2c4a48 !important;
}
.flatpickr-calendar .flatpickr-months { border-bottom: 1px solid #e9edf2 !important; }
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
    fill: #5f6b73 !important;
}
.flatpickr-calendar .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-next-month:hover {
    fill: #5b8c8a !important;
    background: rgba(91, 140, 138, 0.1) !important;
    border-radius: 50% !important;
}

/* ---------- EXPORT BUTTON ---------- */
.export-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}
.export-action-bar .selection-info {
    font-size: 0.85rem;
    color: #5f6b73;
}
.export-action-bar .selection-info strong {
    color: #2c4a48;
    font-weight: 600;
}
.export-action-bar .selection-info .selection-action {
    color: #5b8c8a;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.export-action-bar .selection-info .selection-action:hover {
    text-decoration: underline;
}
.btn-export {
    padding: 12px 32px;
    border: none;
    border-radius: 30px;
    background: #5b8c8a;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
    box-shadow: 0 4px 14px rgba(91, 140, 138, 0.3);
}
.btn-export:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(91, 140, 138, 0.4);
}
.btn-export:active { transform: translateY(0); }
.btn-export i { font-size: 1rem; }

.export-action-buttons { display: flex; gap: 10px; }
/* Wins over share.js's own inline style.display (role-based) when the
   active category isn't Structures - see database.js's selectCategory(). */
.btn-export-secondary.share-cat-hidden { display: none !important; }
.btn-export-secondary {
    background: rgba(248, 250, 252, 0.8);
    color: #4d5960;
    border: 1px solid #c5dbd8;
    box-shadow: none;
}
.btn-export-secondary:hover {
    background: #f8fafc;
    border-color: #8ab4b0;
    color: #5b8c8a;
    box-shadow: 0 4px 14px rgba(91, 140, 138, 0.15);
}
.night-mode .btn-export-secondary {
    background: rgba(30, 42, 47, 0.6);
    color: #a8b8bf;
    border-color: #3e525e;
}
.night-mode .btn-export-secondary:hover { background: #1e2a2f; border-color: #8ab4b0; color: #8ab4b0; }

/* ---------- ACTIVITY LOG ---------- */
.activity-panel {
    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);
    padding: 28px;
    box-shadow: 0 10px 28px rgba(44, 90, 87, 0.1);
}
.activity-panel h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c4a48;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.activity-panel h2 i { color: #8ab4b0; }
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.activity-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 14px;
    background: #fafbfc;
    transition: all 0.2s;
}
.activity-item:hover { background: #f0f4f8; }
.activity-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.activity-icon.success { background: #e8f5f0; color: #2d7a6e; }
.activity-icon.warning { background: #fff7ed; color: #c28b5a; }
.activity-icon.info { background: #f0f9ff; color: #4a90b8; }
.activity-content {
    flex: 1;
    min-width: 0;
}
.activity-content .activity-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2c4a48;
    margin-bottom: 2px;
}
.activity-content .activity-meta {
    font-size: 0.75rem;
    color: #5f6b73;
}
.activity-time {
    font-size: 0.75rem;
    color: #5f6b73;
    flex-shrink: 0;
}

/* ---------- TOAST NOTIFICATION ---------- */
.toast-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.toast {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 10px 30px rgba(44, 90, 87, 0.14);
    border: 1px solid rgba(138, 180, 176, 0.3);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.toast.show { transform: translateX(0); }
.toast-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.toast-icon.success { background: #e8f5f0; color: #2d7a6e; }
.toast-icon.error { background: #fdf2f2; color: #c47070; }
.toast-content { flex: 1; }
.toast-content .toast-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #2c4a48;
    margin-bottom: 2px;
}
.toast-content .toast-msg {
    font-size: 0.8rem;
    color: #5f6b73;
}
.toast-close {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: none;
    background: #f8fafc;
    color: #5f6b73;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.toast-close:hover { background: #e9ecef; color: #4a5b6e; }

/* ---------- PROGRESS BAR ---------- */
.progress-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    z-index: 1500;
    justify-content: center;
    align-items: center;
}
.progress-overlay.active { display: flex; }
.progress-card {
    background: rgba(244, 248, 247, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(138, 180, 176, 0.32);
    border-radius: 24px;
    padding: 40px 48px;
    text-align: center;
    box-shadow: 0 24px 48px rgba(44, 90, 87, 0.16);
    min-width: 320px;
}
.progress-card h3 {
    font-size: 1.1rem;
    color: #2c4a48;
    margin-bottom: 8px;
}
.progress-card p {
    font-size: 0.85rem;
    color: #5f6b73;
    margin-bottom: 24px;
}
.progress-track {
    width: 100%;
    height: 8px;
    background: #eef2f6;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}
.progress-fill {
    height: 100%;
    background: #8ab4b0;
    border-radius: 10px;
    width: 0%;
    transition: width 0.3s ease;
}
.progress-percent {
    font-size: 0.85rem;
    font-weight: 600;
    color: #5b8c8a;
}


/* ========== SORTABLE TABLE HEADERS ========== */
.data-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s, color 0.2s;
    position: relative;
}

.data-table th.sortable:hover {
    background: #e8f0ee;
    color: #2c5a57;
}

.data-table th.sortable .sort-icon {
    font-size: 0.7rem;
    margin-left: 6px;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.data-table th.sortable:hover .sort-icon {
    opacity: 0.8;
}

.data-table th.sortable.active {
    /* Soft tinted underline instead of a solid fill - same translucent-teal
       language as the navbar's own active-link pill, rather than reading
       like a cell selection highlight. */
    background: rgba(91, 140, 138, 0.1);
    color: #2c5a57;
    box-shadow: inset 0 -2px 0 0 #5b8c8a;
}

.data-table th.sortable.active .sort-icon {
    opacity: 1;
    color: #5b8c8a;
    font-weight: 700;
}

.night-mode .data-table th.sortable:hover {
    background: #2a3a40;
    color: #8ab4b0;
}

.night-mode .data-table th.sortable.active {
    background: rgba(138, 180, 176, 0.15);
    color: #8ab4b0;
    box-shadow: inset 0 -2px 0 0 #8ab4b0;
}

.night-mode .data-table th.sortable.active .sort-icon {
    color: #8ab4b0;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
    .page-wrapper { max-width: 90%; }
    .navbar { width: 70%; }
    .export-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .page-wrapper { max-width: 95%; }
    .export-grid { grid-template-columns: 1fr; }
    .export-options { grid-template-columns: 1fr; }
    .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; }
    .navbar { width: 90%; padding: 0 18px; }
}
@media (max-width: 768px) {
    .db-search-wrap { flex: 1 1 100%; max-width: none; }
    .data-table-wrap { overflow-x: auto; }
    .export-action-bar { flex-direction: column; gap: 16px; align-items: stretch; }
    .export-action-buttons { flex-direction: column; }
    .btn-export, .btn-export-secondary { width: 100%; justify-content: center; }
    .navbar { width: 95%; }
}

/* ---------- 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 .logo { background: linear-gradient(135deg, #8ab4b0 0%, #a0c8c4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.night-mode .navbar .menu a { color: #9ab0b8; }
.night-mode .navbar .menu a.active { background: rgba(138, 180, 176, 0.15); color: #8ab4b0; }
.night-mode .navbar .account-links a { color: #9ab0b8; }
.night-mode .navbar .account-links a:hover { background: #2f3e45; color: #8ab4b0; }
.night-mode .night-mode-toggle { background: rgba(62, 82, 94, 0.8); color: #c5e0e6; }
.night-mode .night-mode-toggle:hover { background: #4a6570; }

.night-mode .page-header h1 { color: #8ab4b0; }

/* Night mode back pill */
.night-mode .back-pill {
    background: rgba(35, 46, 52, 0.8) !important;
    border-color: rgba(138, 180, 176, 0.3) !important;
    color: #8ab4b0 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
}
.night-mode .back-pill:hover {
    background: #5b8c8a !important;
    color: white !important;
    border-color: #5b8c8a !important;
    box-shadow: 0 4px 20px rgba(91, 140, 138, 0.3) !important;
}

.night-mode .export-card, .night-mode .activity-panel {
    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 .progress-card {
    background: rgba(51, 68, 79, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}
.night-mode .toast {
    background: rgba(51, 68, 79, 0.88);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.night-mode .export-card .card-title,
.night-mode .panel-header h2,
.night-mode .activity-content .activity-title,
.night-mode .toast-content .toast-title {
    color: #d4dfe3;
}
.night-mode .export-card .card-desc,
.night-mode .page-header p,
.night-mode .card-meta,
.night-mode .activity-meta,
.night-mode .activity-time,
.night-mode .toast-content .toast-msg,
.night-mode .progress-card p {
    color: #a8b8bf;
}
.night-mode .option-group { background: #1e2a2f; border-color: #2f3e45; }
.night-mode .option-group h3 { color: #d4dfe3; }
.night-mode .data-table thead tr { background: #1e2a2f; }
.night-mode .data-table th { color: #a8b8bf; border-color: #2f3e45; }
.night-mode .data-table td { color: #c5d3d9; border-color: #2a3a40; }
.night-mode .data-table tbody tr:hover td { background: #2a3a40; }
.night-mode .filter-chip { background: #1e2a2f; border-color: #3a4b53; color: #9ab0b8; }
.night-mode .filter-chip.active { background: #2f4a48; border-color: #6e9c98; color: white; }
.night-mode .db-search-wrap input { background: #1e2a2f; border-color: #3a4b53; color: #d4dfe3; }
.night-mode .db-search-wrap input:focus { border-color: #8ab4b0; }
.night-mode .db-search-wrap > i.fa-search { color: #a8b8bf; }
.night-mode .db-search-clear { color: #a8b8bf; }
.night-mode .db-search-clear:hover { color: #8ab4b0; }
.night-mode .format-btn { background: #1e2a2f; border-color: #3a4b53; color: #9ab0b8; }
.night-mode .format-btn.active { background: #2f4a48; border-color: #6e9c98; color: white; }
.night-mode .date-range input { background: #1e2a2f; border-color: #3a4b53; color: #c5d3d9; }
.night-mode .year-step-btn { color: #7f959c; }
.night-mode .year-step-btn:hover { background: #2a3a40; color: #8ab4b0; }
.night-mode .flatpickr-calendar { background: #232e34 !important; border-color: #2f3e45 !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3) !important; }
.night-mode .flatpickr-calendar .flatpickr-months { background: #1e2a2f !important; border-bottom: 1px solid #2f3e45 !important; border-radius: 8px 8px 0 0 !important; }
.night-mode .flatpickr-calendar .flatpickr-month,
.night-mode .flatpickr-calendar .flatpickr-current-month { background: #1e2a2f !important; color: #d4dfe3 !important; }
.night-mode .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.night-mode .flatpickr-calendar .flatpickr-current-month input.cur-year { background: #1e2a2f !important; color: #d4dfe3 !important; }
.night-mode .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: #232e34 !important; color: #c5d3d9 !important; }
.night-mode .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:hover { background: #2f4a48 !important; color: white !important; }
.night-mode .flatpickr-calendar .flatpickr-prev-month,
.night-mode .flatpickr-calendar .flatpickr-next-month { fill: #8ab4b0 !important; }
.night-mode .flatpickr-calendar .flatpickr-prev-month:hover,
.night-mode .flatpickr-calendar .flatpickr-next-month:hover { fill: #a0c8c4 !important; background: rgba(138, 180, 176, 0.1) !important; border-radius: 50% !important; }
.night-mode .flatpickr-calendar .flatpickr-weekdays,
.night-mode .flatpickr-calendar .flatpickr-weekday { background: #232e34 !important; color: #a8b8bf !important; }
.night-mode .flatpickr-calendar .flatpickr-day { color: #c5d3d9 !important; background: transparent !important; border: none !important; border-radius: 8px !important; box-shadow: none !important; }
.night-mode .flatpickr-calendar .flatpickr-day.selected,
.night-mode .flatpickr-calendar .flatpickr-day.startRange,
.night-mode .flatpickr-calendar .flatpickr-day.endRange { background: #5b8c8a !important; color: white !important; }
.night-mode .flatpickr-calendar .flatpickr-day.today { color: #8ab4b0 !important; font-weight: 700 !important; }
.night-mode .flatpickr-calendar .flatpickr-day.today.selected { color: white !important; }
.night-mode .flatpickr-calendar .flatpickr-day:hover:not(.flatpickr-disabled):not(.notAllowed):not(.selected) { background: #2f4a48 !important; color: white !important; }
.night-mode .flatpickr-calendar .flatpickr-day.prevMonthDay,
.night-mode .flatpickr-calendar .flatpickr-day.nextMonthDay { color: #a8b8bf !important; opacity: 0.5 !important; }
.night-mode .btn-icon { background: #1e2a2f; border-color: #3a4b53; color: #9ab0b8; }
.night-mode .btn-icon:hover { background: #2a3a40; color: #8ab4b0; }
.night-mode .activity-item { background: #1e2a2f; }
.night-mode .activity-item:hover { background: #2a3a40; }
.night-mode .progress-track { background: #2f3e45; }
.night-mode .progress-card h3 { color: #d4dfe3; }
.night-mode .progress-percent { color: #8ab4b0; }
.night-mode .export-action-bar { border-color: #2f3e45; }
.night-mode .export-action-bar .selection-info { color: #a8b8bf; }
.night-mode .export-action-bar .selection-info strong { color: #d4dfe3; }
.night-mode .export-action-bar .selection-info .selection-action { color: #8ab4b0; }
.night-mode .panel-header { border-color: #2f3e45; }




/* ========== HIDE NATIVE SCROLLBAR ========== */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { display: none; }

/* ========== 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 (both body and html variants) ========== */
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;
}

@media (max-width: 860px) {
    .glass-scrollbar { display: none !important; }
}


.night-mode .data-table td { color: #c5d3d9; border-color: #2a3a40; }





/* ============================================
   DATABASE PAGE - REPORT BUTTON & STATUS STYLES
   Add these to your database.css
   ============================================ */

/* BCI Proforma PDF button - intentionally left unstyled so it falls back to
   the plain ".data-table .row-actions button" look shared by the other
   row-action icons (View, Download) in both light and dark mode. */

/* Full Report button (teal/blue) - same specificity fix as .btn-report */
.data-table .row-actions .btn-full-report {
    background: #1a3a5c;
    color: #fff;
    transition: all 0.2s ease;
}

.data-table .row-actions .btn-full-report:hover {
    background: #0f2540;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(26, 58, 92, 0.3);
}

.data-table .row-actions .btn-full-report i {
    color: #fff;
    font-size: 0.85rem;
}

/* Status badge variants */
.status-badge.warning {
    background: rgba(234, 179, 8, 0.15);
    color: #ca8a04;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

.status-badge.error {
    background: rgba(220, 38, 38, 0.15);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.3);
}

.status-badge.pending {
    background: rgba(138, 155, 168, 0.15);
    color: #5f6b73;
    border: 1px solid rgba(138, 155, 168, 0.3);
}




/* ============================================
   COLUMN VISIBILITY PICKER
   Append these rules to database.css
   ============================================ */

.col-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.col-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: white;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}

.col-chip input[type="checkbox"] {
    accent-color: #5b8c8a;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    cursor: pointer;
    pointer-events: none; /* click handled by parent div */
}

.col-chip label {
    font-size: 0.75rem;
    color: #4d5960;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.col-chip.checked {
    border-color: #8ab4b0;
    background: #eef4f2;
}

.col-chip.checked label {
    color: #2c5a57;
    font-weight: 500;
}

.col-picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.col-picker-hint {
    font-size: 0.72rem;
    color: #5f6b73;
}

.col-picker-actions {
    display: flex;
    gap: 10px;
}

.col-picker-actions button {
    font-size: 0.72rem;
    color: #5b8c8a;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.col-picker-actions button:hover {
    color: #2c5a57;
}

/* Night mode */
.night-mode .col-chip {
    background: #1e2a2f;
    border-color: #3a4b53;
}

.night-mode .col-chip label {
    color: #9ab0b8;
}

.night-mode .col-chip.checked {
    border-color: #6e9c98;
    background: #2f4a48;
}

.night-mode .col-chip.checked label {
    color: #d4dfe3;
}

.night-mode .col-picker-hint {
    color: #a8b8bf;
}

.night-mode .col-picker-actions button {
    color: #8ab4b0;
}

.night-mode .col-picker-actions button:hover {
    color: #b8d4d0;
}

/* Muted-text selectors with no night-mode value at all previously - see
   the same fix in map.css/dashboard.css for why. */
.night-mode .export-card .card-meta,
.night-mode .export-card .card-arrow,
.night-mode .data-table .row-actions button,
.night-mode .data-table.card-rows .bridge-name .meta,
.night-mode .date-range span,
.night-mode .activity-content .activity-meta,
.night-mode .toast-close,
.night-mode .status-badge.pending {
    color: #a8b8bf;
}

/* ============================================
   SAVI ASSET VALUATION EXPORT CARD/PANEL
   ============================================ */
.export-card.savi .card-icon { background: #f3f0fb; color: #6f5fb0; }
.night-mode .export-card.savi .card-icon { background: #2a2440; color: #c3b8ec; }
.export-card.shares .card-icon { background: #f0f9ff; color: #4a90b8; }
.night-mode .export-card.shares .card-icon { background: #1a2f3d; color: #7ab8dd; }

/* ---------- SHARES MANAGEMENT PANEL ---------- */
/* "dbshare-" prefix (not "share-") deliberately, since ../map/share.js
   injects its own .share-* classes into this same page for the create-link
   modal - keeping these visually distinct names avoids any risk of the two
   colliding if either gets renamed later. */
.dbshare-list { display: flex; flex-direction: column; gap: 10px; }
.dbshare-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid #e3e9ef;
    border-radius: 14px;
    padding: 14px 16px;
    transition: all 0.2s ease;
}
.night-mode .dbshare-row { background: #232e34; border-color: #2f3e45; }
.dbshare-row:hover { border-color: #8ab4b0; box-shadow: 0 6px 18px rgba(44, 90, 87, 0.08); }
.dbshare-row.is-revoked { opacity: 0.6; }
.dbshare-main { min-width: 0; }
.dbshare-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dbshare-title-row .fa-lock { color: #8a9ba8; font-size: 0.7rem; }
.dbshare-note { font-size: 0.88rem; font-weight: 600; color: #2c3e44; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.night-mode .dbshare-note { color: #d4dfe3; }
.dbshare-note.untitled { color: #8a9ba8; font-weight: 500; font-style: italic; }
.dbshare-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.dbshare-chip { background: #eef4f2; color: #2c5a57; font-size: 0.7rem; font-weight: 600; padding: 3px 9px; border-radius: 12px; white-space: nowrap; }
.night-mode .dbshare-chip { background: #2f4a48; color: #8ab4b0; }
.dbshare-chip.more { background: #f1f4f6; color: #8a9ba8; }
.night-mode .dbshare-chip.more { background: #1e2a2f; color: #7a8b93; }
.dbshare-recipient { font-size: 0.72rem; color: #8a9ba8; margin-top: 6px; display: flex; align-items: center; gap: 5px; }
.dbshare-dates { text-align: right; }
.dbshare-dates .expiry { font-size: 0.8rem; font-weight: 600; color: #2c3e44; }
.night-mode .dbshare-dates .expiry { color: #d4dfe3; }
.dbshare-dates .created { font-size: 0.68rem; color: #8a9ba8; margin-top: 2px; }
.dbshare-actions { display: flex; gap: 6px; }
.dbshare-actions .btn-icon { width: 32px; height: 32px; }
.dbshare-actions .btn-icon.revoke:hover { background: #fdf2f2; color: #c47070; border-color: #e8a0a0; }
.dbshare-actions .btn-icon:disabled { opacity: 0.4; cursor: default; }
.dbshare-actions .btn-icon:disabled:hover { background: #fff; color: #4d5960; border-color: #e2e8f0; }
.night-mode .dbshare-actions .btn-icon:disabled:hover { background: #1e2a2f; color: #9ab0b8; border-color: #3a4b53; }
.map-pill.dead { background: #f1f4f6; color: #5f6b73; }
.night-mode .map-pill.dead { background: #1e2a2f; color: #7a8b93; }
@media (max-width: 760px) {
    .dbshare-row { grid-template-columns: 1fr; gap: 8px; }
    .dbshare-dates { text-align: left; }
}

.dbshare-show-all {
    width: 100%;
    margin-top: 4px;
    padding: 12px 16px;
    background: #fff;
    border: 1px dashed #d5dee3;
    border-radius: 14px;
    color: #2c5a57;
    font-weight: 600;
    font-size: 0.84rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}
.dbshare-show-all:hover { border-color: #8ab4b0; background: #eef4f2; }
.dbshare-show-all .hidden-count { font-weight: 500; color: #8a9ba8; }
.night-mode .dbshare-show-all { background: #232e34; border-color: #3a4b53; color: #8ab4b0; }
.night-mode .dbshare-show-all:hover { background: #2a3a40; border-color: #6e9c98; }
.night-mode .dbshare-show-all .hidden-count { color: #7a8b93; }

.std-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6f5fb0;
    background: #f3f0fb;
    padding: 3px 9px;
    border-radius: 999px;
    margin-left: 4px;
    vertical-align: middle;
}
.night-mode .std-badge { color: #c3b8ec; background: #2a2440; }

.format-fixed {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 2px solid #5b8c8a;
    background: #eef4f2;
    color: #2c5a57;
    font-size: 0.85rem;
    font-weight: 600;
}
.night-mode .format-fixed { background: #2f4a48; border-color: #6e9c98; color: #fff; }
.format-note {
    font-size: 0.75rem;
    color: #5f6b73;
    margin: 10px 0 0;
    line-height: 1.5;
}
.night-mode .format-note { color: #8399a2; }

.map-list { display: flex; flex-direction: column; gap: 7px; }
.map-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e3e9ef;
}
.night-mode .map-row { background: #232e34; border-color: #2f3e45; }
.map-row .fld { font-size: 0.78rem; color: #2c3e44; }
.night-mode .map-row .fld { color: #d4dfe3; }
.map-row .fld small { display: block; font-size: 0.66rem; color: #8a9ba8; margin-top: 1px; }
.map-pill {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.map-pill.ok { background: #e3f3ef; color: #2d7a6e; }
.night-mode .map-pill.ok { background: #122a25; color: #7fd6bd; }
.map-pill.warn { background: #fdf3e4; color: #b98a3f; }
.night-mode .map-pill.warn { background: #2c2416; color: #e0b169; }

.scope-callout {
    background: #fdf6ec;
    border: 1px solid #f0dfc0;
    border-left: 3px solid #c79a4b;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 24px;
    font-size: 0.82rem;
    color: #6b5326;
    line-height: 1.6;
}
.night-mode .scope-callout { background: #241d0f; border-color: #4a3a20; color: #e0c890; }
.scope-callout .t {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
    display: block;
}
.scope-callout code {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.85em;
    background: rgba(0, 0, 0, 0.06);
    padding: 0.1em 0.4em;
    border-radius: 5px;
}
.night-mode .scope-callout code { background: rgba(255, 255, 255, 0.08); }

.preview-block { margin-bottom: 24px; }
.preview-block h3 {
    font-size: 0.88rem;
    font-weight: 600;
    color: #2c4a48;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.night-mode .preview-block h3 { color: #eafaf7; }
.preview-block .sub { font-size: 0.75rem; color: #5f6b73; margin: 0 0 12px; }
.night-mode .preview-block .sub { color: #9ab0b8; }
.preview-wrap { overflow-x: auto; border: 1px solid #e3e9ef; border-radius: 14px; }
.night-mode .preview-wrap { border-color: #2f3e45; }
table.preview { width: 100%; table-layout: fixed; border-collapse: collapse; font-family: ui-monospace, Consolas, monospace; font-size: 0.75rem; background: #fff; }
.night-mode table.preview { background: #1c262b; }
table.preview th {
    text-align: left;
    padding: 9px 12px;
    overflow-wrap: break-word;
    background: #eef2f6;
    color: #4d5960;
    font-weight: 700;
    border-bottom: 1px solid #e3e9ef;
}
.night-mode table.preview th { background: #1e2a2f; color: #a8b8bf; border-color: #2f3e45; }
table.preview th:nth-child(1) { width: 8%; }
table.preview th:nth-child(2) { width: 20%; }
table.preview th:nth-child(3) { width: 24%; }
table.preview th:nth-child(4) { width: 8%; }
table.preview th:nth-child(5) { width: 12%; }
table.preview th:nth-child(6) { width: 14%; }
table.preview th:nth-child(7) { width: 14%; }
table.preview td { padding: 8px 12px; border-bottom: 1px solid #eef2f6; color: #2c3e44; overflow-wrap: break-word; }
.night-mode table.preview td { color: #c5d3d9; border-color: #232e34; }
table.preview tr:last-child td { border-bottom: none; }
table.preview td.blank { color: #c3cdd4; }
.night-mode table.preview td.blank { color: #4a5a62; }

.btn-export:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ---------- INSPECTIONS/REPORTS VIEW TOGGLE ----------
   Records and Reports share one card (see database.js's selectCategory) -
   this switches between them without leaving the panel. */
.view-toggle {
    display: flex;
    padding: 3px;
    border-radius: 30px;
    background: #eef2f6;
    border: 1px solid #e2e8f0;
    gap: 2px;
}
.night-mode .view-toggle { background: #1e2a2f; border-color: #2f3e45; }
.view-toggle-btn {
    padding: 6px 16px;
    border: none;
    border-radius: 24px;
    background: transparent;
    color: #5f6b73;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}
.night-mode .view-toggle-btn { color: #9ab0b8; }
.view-toggle-btn.active { background: #5b8c8a; color: white; box-shadow: 0 2px 8px rgba(91, 140, 138, 0.3); }
.view-toggle-btn:not(.active):hover { color: #2c5a57; }
.night-mode .view-toggle-btn:not(.active):hover { color: #d4dfe3; }

/* ============================================
   CONFIRM MODAL (styled stand-in for confirm())
   Same look/API as map.html's #confirmModalOverlay - ported here for the
   Shares panel's revoke action (and used by ../map/share.js, also loaded
   on this page, for its own revoke confirm).
   ============================================ */
.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;
    /* Below .navbar's z-index (1100) so the confirm dialog's backdrop
       doesn't dim/cover the floating navbar - see a189649. */
    z-index: 1090;
    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: 44px 40px 36px;
    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-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 1.6rem;
    background: #e8f5f2;
    color: #5b8c8a;
    box-shadow: 0 4px 16px rgba(91, 140, 138, 0.12);
}
.modal-icon.warning {
    background: #fef9e8;
    color: #c9a227;
    box-shadow: 0 4px 16px rgba(201, 162, 39, 0.12);
}
.modal-icon.success {
    background: #d4ede8;
    color: #3a6b62;
    box-shadow: 0 4px 16px rgba(91, 140, 138, 0.15);
}
.modal-icon.error {
    background: #fdf2f2;
    color: #c07070;
    box-shadow: 0 4px 16px rgba(192, 112, 112, 0.1);
}
.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.7;
    margin-bottom: 32px;
    white-space: pre-line;
}
.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.modal-btn {
    padding: 13px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.2px;
    min-width: 120px;
    border: none;
}
.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;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(91, 140, 138, 0.08);
}
.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);
}
.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 { color: #a8b8bf; }
.night-mode .modal-icon {
    background: #1e3a36;
    color: #8ab4b0;
    box-shadow: 0 4px 16px rgba(138, 180, 176, 0.1);
}
.night-mode .modal-icon.warning {
    background: #3a2f1a;
    color: #d4b86a;
}
.night-mode .modal-icon.success {
    background: #1e3a36;
    color: #8ab4b0;
}
.night-mode .modal-icon.error {
    background: #3a2020;
    color: #c07070;
}

/* ============================================
   EDIT STRUCTURE MODAL
   Opened from the Structures table's row-action pencil button. Same field
   set and SAVI valuation sub-section as inspection1.html's Structure Info
   panel (PATCHes the same /api/bridges/:id/info endpoint) - the .info-*
   rules below are a direct port of inspection1.css's edit-mode styling so
   both entry points look identical, kept in sync manually since the two
   pages don't share a stylesheet.
   ============================================ */
/* .navbar floats at top:20px, height:64px (database.css line ~17-36) and
   sits above this modal's overlay (z-index 1100 vs 1090 - see the CONFIRM
   MODAL note above) so it stays clickable/visible over the backdrop. That
   same stacking makes the navbar clip straight through a vertically-centered
   modal on shorter viewports instead of the modal ducking under it. Padding
   the overlay down past the navbar's bottom edge (84px) plus a gap, and
   capping the card's height to match, keeps the two apart at any height. */
#editStructureModalOverlay { padding: 104px 20px 24px; }
.se-modal-card {
    background: rgba(244, 248, 247, 0.96);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 24px;
    width: 92%;
    max-width: 640px;
    max-height: calc(100vh - 128px);
    display: flex;
    flex-direction: column;
    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);
    text-align: left;
}
.modal-overlay.active .se-modal-card { transform: scale(1) translateY(0); }
.night-mode .se-modal-card {
    background: rgba(51, 68, 79, 0.96);
    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);
}
.se-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px 16px;
    flex-shrink: 0;
}
.se-modal-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #2c4a48;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}
.se-modal-header h3 i { color: #8ab4b0; font-size: 0.9rem; }
.night-mode .se-modal-header h3 { color: #d4dfe3; }
.se-modal-close {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: white;
    color: #5f6b73;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.2s;
    flex-shrink: 0;
}
.se-modal-close:hover { background: #5b8c8a; border-color: #5b8c8a; color: white; }
.night-mode .se-modal-close { background: #232e34; border-color: #3a4b53; color: #a8b8bf; }
.night-mode .se-modal-close:hover { background: #5b8c8a; border-color: #5b8c8a; color: white; }
.se-modal-body {
    padding: 0 26px;
    overflow-y: auto;
    flex: 1;
}
.se-modal-loading {
    padding: 50px 0;
    text-align: center;
    color: #8a9ba8;
    font-size: 0.85rem;
}
.se-modal-loading i { font-size: 1.8rem; margin-bottom: 10px; display: block; }
.se-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 26px 22px;
    flex-shrink: 0;
}

/* Ported from inspection1.css (Structure Info edit mode) - see header note. */
.se-modal-body .info-panel-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f0f4f8;
}
.se-modal-body .info-panel-facts:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.se-modal-body .info-fact .fl {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #5f6b73;
    margin-bottom: 4px;
}
.se-modal-body .info-edit-textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    font-family: inherit;
    font-size: 0.8rem;
    resize: vertical;
    min-height: 72px;
    background: #fafbfc;
    color: #2c3e44;
}
.se-modal-body .info-edit-textarea:focus { outline: none; border-color: #8ab4b0; background: white; }
.se-modal-body .info-fact input,
.se-modal-body .info-fact select {
    width: 100%;
    padding: 6px 9px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fafbfc;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #2c3e44;
}
.se-modal-body .info-fact input:focus,
.se-modal-body .info-fact select:focus { outline: none; border-color: #8ab4b0; background-color: white; }

/* Custom chevron instead of the OS-default select arrow, matching the
   SAVI toggle's own chevron (thin stroke, rounded caps, teal-grey). */
.se-modal-body .info-fact select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235f6b73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    cursor: pointer;
}
.night-mode .se-modal-body .info-fact select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237d939b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Thin, teal-on-hover scrollbar matching inspection1.css's edit-mode
   textarea/panel scrollbar, instead of the chunky OS default - covers both
   the modal's own overflow and the Description textarea's. */
.se-modal-body,
.se-modal-body .info-edit-textarea {
    scrollbar-width: thin;
    scrollbar-color: #d0d8e0 transparent;
}
.se-modal-body::-webkit-scrollbar,
.se-modal-body .info-edit-textarea::-webkit-scrollbar {
    width: 6px;
}
.se-modal-body::-webkit-scrollbar-track,
.se-modal-body .info-edit-textarea::-webkit-scrollbar-track {
    background: transparent;
}
.se-modal-body::-webkit-scrollbar-thumb,
.se-modal-body .info-edit-textarea::-webkit-scrollbar-thumb {
    background: #d0d8e0;
    border-radius: 10px;
}
.se-modal-body::-webkit-scrollbar-thumb:hover,
.se-modal-body .info-edit-textarea::-webkit-scrollbar-thumb:hover {
    background: #8ab4b0;
}
.night-mode .se-modal-body,
.night-mode .se-modal-body .info-edit-textarea {
    scrollbar-color: #3a4b53 transparent;
}
.night-mode .se-modal-body::-webkit-scrollbar-thumb,
.night-mode .se-modal-body .info-edit-textarea::-webkit-scrollbar-thumb {
    background: #3a4b53;
}
.night-mode .se-modal-body::-webkit-scrollbar-thumb:hover,
.night-mode .se-modal-body .info-edit-textarea::-webkit-scrollbar-thumb:hover {
    background: #6e9c98;
}
.se-modal-body .info-fact input[type=number]::-webkit-inner-spin-button,
.se-modal-body .info-fact input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.se-modal-body .info-fact input[type=number] { -moz-appearance: textfield; }
.se-modal-body .info-fact.full { grid-column: 1 / -1; }
.se-modal-body .info-type-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.se-modal-body .info-type-pill {
    flex: 1 1 auto;
    min-width: 74px;
    border: 1px solid #e2e8f0;
    background: #fafbfc;
    color: #4d5960;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 6px 8px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: inherit;
}
.se-modal-body .info-type-pill i { font-size: 0.72rem; }
.se-modal-body .info-type-pill:hover { border-color: #8ab4b0; color: #5b8c8a; }
.se-modal-body .info-type-pill.sel { color: white; border-color: transparent; }
.se-modal-body .info-type-pill[data-type="bridge"].sel { background: #2c645c; }
.se-modal-body .info-type-pill[data-type="footbridge"].sel { background: #4f9088; }
.se-modal-body .info-type-pill[data-type="culvert"].sel { background: #c79a4b; }
.se-modal-body .info-type-pill[data-type="retaining_wall"].sel { background: #9b4f4f; }
.se-modal-body .info-type-pill[data-type="sign_gantry"].sel { background: #7a6fb0; }
.se-modal-body .info-savi-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid #f0f4f8; }
.se-modal-body .info-savi-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: none;
    border: none;
    padding: 2px 0;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #5f6b73;
    cursor: pointer;
}
.se-modal-body .info-savi-toggle:hover { color: #5b8c8a; }
.se-modal-body .info-savi-chevron { transition: transform 0.2s; flex-shrink: 0; }
.se-modal-body .info-savi-toggle[aria-expanded="true"] .info-savi-chevron { transform: rotate(90deg); }
.se-modal-body .info-savi-body { margin-top: 10px; }
.se-modal-body .info-savi-body .info-panel-facts { margin-top: 0; padding-top: 0; border-top: none; }
.se-modal-body .info-savi-note { font-size: 0.7rem; line-height: 1.5; color: #5f6b73; margin-bottom: 10px; }
.se-modal-footer .info-edit-cancel,
.se-modal-footer .info-edit-save {
    padding: 8px 18px;
    border-radius: 22px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}
.se-modal-footer .info-edit-cancel { background: none; border: 1px solid #e2e8f0; color: #4d5960; }
.se-modal-footer .info-edit-cancel:hover { background: #f1f5f4; border-color: #c5dbd8; }
.se-modal-footer .info-edit-save { background: #8ab4b0; border: none; color: white; }
.se-modal-footer .info-edit-save:hover { background: #5b8c8a; }
.se-modal-footer .info-edit-save:disabled { opacity: 0.6; cursor: not-allowed; }

.night-mode .se-modal-body .info-panel-facts { border-top-color: #2f3e45; }
.night-mode .se-modal-body .info-fact .fl { color: #7d939b; }
.night-mode .se-modal-body .info-edit-textarea,
.night-mode .se-modal-body .info-fact input,
.night-mode .se-modal-body .info-fact select {
    background-color: #1e2a2f;
    border-color: #3a4b53;
    color: #c5d3d9;
}
.night-mode .se-modal-body .info-edit-textarea:focus,
.night-mode .se-modal-body .info-fact input:focus,
.night-mode .se-modal-body .info-fact select:focus {
    background-color: #2a3a40;
    border-color: #8ab4b0;
}
.night-mode .se-modal-body .info-type-pill { background: #1e2a2f; border-color: #3a4b53; color: #9ab0b8; }
.night-mode .se-modal-body .info-type-pill:hover { border-color: #6e9c98; color: #8ab4b0; }
.night-mode .se-modal-body .info-savi-section { border-top-color: #2f3e45; }
.night-mode .se-modal-body .info-savi-toggle { color: #7d939b; }
.night-mode .se-modal-body .info-savi-toggle:hover { color: #8ab4b0; }
.night-mode .se-modal-body .info-savi-note { color: #7d939b; }
.night-mode .se-modal-footer .info-edit-cancel { background: none; border-color: #3a4b53; color: #9ab0b8; }
.night-mode .se-modal-footer .info-edit-cancel:hover { background: #2a3a42; border-color: #4a5d66; }
.night-mode .se-modal-footer .info-edit-save { background: #3a6b62; color: white; }
.night-mode .se-modal-footer .info-edit-save:hover { background: #2f5a52; }

@media (max-width: 640px) {
    #editStructureModalOverlay { padding: 92px 12px 16px; }
    .se-modal-card { width: 96%; max-height: calc(100vh - 108px); }
    .se-modal-body .info-panel-facts { grid-template-columns: 1fr; }
}