/*
 * Banking Scorecard - main.css
 *
 * Mirrored from CU Scorecard. Source files:
 *   - provoke/web/templates/layouts/base.html (inline <style> block)
 *
 * Notes:
 *   - provoke/web/static/css/seasonal.css was inspected but NOT ported. It is
 *     entirely CU Wrapped 2025 campaign content (gold shimmer, banner badges,
 *     hero title cards). Nothing in it is visually generic enough to keep.
 *   - The Tailwind theme tokens (colors, fontFamily, backgroundImage) live in
 *     web/templates/partials/tailwind_config.html, not here.
 *   - Generic rules below: typography defaults, page-loader progress bar
 *     (#page-loader), and the metrics-table mobile responsive sizing rules.
 *     These are reused across every CU Scorecard page and are not campaign
 *     specific.
 *   - Do not edit divergently from CU without updating docs/CU_DIVERGENCES.md.
 *
 * Date: 2026-05-04
 */

body {
    font-family: 'Figtree', system-ui, sans-serif;
}

h1, h2, h3, h4 {
    font-family: 'Raleway', sans-serif;
}

/* Top-of-page progress bar driven by JS (loading / loading-slow / done states) */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(to right, #158dbf, #f9d230);
    width: 0%;
    transition: width 0.3s ease;
    z-index: 9999;
}

#page-loader.loading {
    width: 30%;
}

#page-loader.loading-slow {
    width: 90%;
    transition: width 3s ease;
}

#page-loader.done {
    width: 100%;
}

/* Mobile: let tables auto-size for readable text */
@media (max-width: 767px) {
    #metrics-table table {
        table-layout: auto !important;
    }
    #metrics-table colgroup {
        display: none;
    }
    /* Force consistent column widths on mobile */
    #metrics-table th:first-child,
    #metrics-table td:first-child {
        min-width: 90px;
        max-width: 110px;
    }
    #metrics-table th:nth-child(2),
    #metrics-table td:nth-child(2) {
        min-width: 80px;
    }
}

/* Prevent horizontal overflow/whitespace on metrics table */
#metrics-table {
    max-width: 100%;
}

#metrics-table > .overflow-x-auto {
    max-width: 100%;
}