/* ============================================================================
   RC Power Portal — Mobile Stylesheet (Phase 1)
   ----------------------------------------------------------------------------
   ALL rules in this file are scoped to mobile screens (max-width: 768px) so the
   existing desktop layout is never affected. Uses the portal CSS variables
   (--primary-color, --accent-color, etc.) defined in base.html.

   Bottom tab bar base rule is intentionally OUTSIDE the media query (set to
   display:none) so it is hidden on desktop and only revealed on mobile.
   ============================================================================ */

/* The bottom tab bar is hidden by default (desktop). Revealed inside the
   mobile media query below. */
.rc-mobile-tabbar { display: none; }

/* PWA install banner — hidden by default; JS reveals it only on mobile when
   the app is installable and not already dismissed/installed. */
.pwa-install-banner { display: none; }
.pwa-install-banner.pwa-show {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 72px; /* sits just above the 64px bottom tab bar */
    z-index: 9995;
    background: #1F3864;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    padding: 12px 14px;
    font-size: 0.9rem;
}
.pwa-install-banner .pwa-install-text { flex: 1 1 auto; line-height: 1.35; }
.pwa-install-banner .pwa-install-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.pwa-install-banner .pwa-install-yes {
    background: var(--accent-color, #f39c12);
    color: #1F3864;
    border: none;
    font-weight: 700;
    border-radius: 8px;
    padding: 8px 14px;
    min-height: 40px;
    cursor: pointer;
}
.pwa-install-banner .pwa-install-no {
    background: transparent;
    color: #ffffff;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    padding: 8px 10px;
    min-height: 40px;
    min-width: 40px;
    cursor: pointer;
}

/* ==========================================================================
   TOUCH HANDLING (all viewports)
   --------------------------------------------------------------------------
   `touch-action: manipulation` removes the 300ms tap delay AND disables the
   double-tap-to-zoom gesture on touch devices, so a single tap reliably
   activates the element instead of zooming. `-webkit-tap-highlight-color`
   removes the grey tap-flash on iOS Safari. Harmless on desktop.
   ========================================================================== */
button, .btn, a, input, select, textarea, label,
.nav-link, .nav-item, .tab-pane, .dropdown-item,
.rc-tab, .page-link, [role="button"], [onclick], .clickable-row {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   TAP FEEDBACK (all viewports)
   --------------------------------------------------------------------------
   Instant "pressed" feel on touch/click so the UI feels responsive even before
   the server responds. A subtle scale-down + brightness reduction fires on
   :active, which the browser applies the moment the finger lands. Combined with
   the `-webkit-tap-highlight-color: transparent` above, this replaces the
   default grey iOS flash with a custom physical press. No `transition` shorthand
   is set here on purpose — that would clobber Bootstrap's color/bg transitions;
   the scale snaps instantly, which is exactly the immediate feedback we want.
   ========================================================================== */
button:active, .btn:active, a.btn:active, [role="button"]:active, [onclick]:active,
.rc-tab:active, .nav-link:active, .dropdown-item:active, .page-link:active,
.card.clickable:active, .clickable:active, .clickable-row:active {
    transform: scale(0.97);
    filter: brightness(0.9);
}
@media (prefers-reduced-motion: reduce) {
    button:active, .btn:active, a.btn:active, [role="button"]:active, [onclick]:active,
    .rc-tab:active, .nav-link:active, .dropdown-item:active, .page-link:active,
    .card.clickable:active, .clickable:active, .clickable-row:active {
        transform: none;
    }
}

/* Helper: only shown on mobile (revealed inside the media query below). */
.rc-mobile-only { display: none; }

/* Mobile-only logout button in the dashboard header (desktop has the navbar
   logout; the navbar is hidden on mobile). Revealed in the media query. */
.rc-mobile-logout { display: none; }

/* ==========================================================================
   MOBILE — max-width: 768px
   ========================================================================== */
@media (max-width: 768px) {

    /* ----------------------------------------------------------------------
       STEP 1 — Hide desktop top navbar, show bottom tab bar
       ---------------------------------------------------------------------- */
    body > nav.navbar.navbar-expand-lg { display: none !important; }

    .rc-mobile-tabbar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        /* Safe-area: extend below the home indicator so tap targets sit above
           the iOS gesture dead zone (requires viewport-fit=cover). */
        height: calc(56px + env(safe-area-inset-bottom, 0px));
        background: var(--primary-color, #1a1a2e);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
        /* Above the onboarding-tour backdrop (10000) so navigation always
           works, even mid-tour; chat button/panel stay visible regardless. */
        z-index: 10001;
        padding: 0 0 env(safe-area-inset-bottom, 0px) 0;
        margin: 0;
    }
    .rc-mobile-tabbar .rc-tab:focus-visible {
        outline: 2px solid var(--accent-color, #f39c12);
        outline-offset: -2px;
        color: #fff;
    }
    .rc-mobile-tabbar .rc-tab {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 44px;
        padding: 6px 2px;
        color: rgba(255, 255, 255, 0.72);
        text-decoration: none;
        font-size: 11px;
        line-height: 1.1;
        position: relative;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    .rc-mobile-tabbar .rc-tab .rc-tab-icon {
        font-size: 21px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .rc-mobile-tabbar .rc-tab .rc-tab-label {
        font-size: 11px;
        font-weight: 500;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .rc-mobile-tabbar .rc-tab:hover,
    .rc-mobile-tabbar .rc-tab:focus { color: #fff; }
    .rc-mobile-tabbar .rc-tab.active { color: var(--accent-color, #f39c12); }
    .rc-mobile-tabbar .rc-tab.active .rc-tab-icon { transform: translateY(-1px); }

    /* Notification badge on the tab bar bell */
    .rc-mobile-tabbar .rc-tab-badge {
        position: absolute;
        top: 4px;
        left: 50%;
        margin-left: 4px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 10px;
        line-height: 16px;
        text-align: center;
        background: var(--danger-red, #e74c3c);
        color: #fff;
        border-radius: 10px;
        font-weight: 700;
    }

    /* ----------------------------------------------------------------------
       STEP 2 — Base layout adjustments
       ---------------------------------------------------------------------- */
    /* Clear the fixed bottom tab bar on every page (incl. safe area) */
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
    main.container,
    main { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }

    /* Keep page titles clear of the iOS status bar / notch in standalone
       (env() resolves to 0 in a normal browser tab). */
    body { padding-top: env(safe-area-inset-top, 0px); }

    /* Prevent accidental horizontal scrolling */
    html, body { overflow-x: hidden; max-width: 100%; }

    /* Readable base font size */
    body { font-size: 14px; }
    .small, small, .text-muted { font-size: 0.8125rem; }

    /* Mobile logout: pinned top-right of the dashboard header */
    .dashboard-header { position: relative; }
    .dashboard-header .rc-mobile-logout {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 10px;
        right: 10px;
        width: 38px;
        height: 38px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.14);
        color: #fff;
        font-size: 18px;
        text-decoration: none;
        z-index: 5;
    }
    .dashboard-header .rc-mobile-logout:active,
    .dashboard-header .rc-mobile-logout:hover { background: rgba(255, 255, 255, 0.28); color: #fff; }
    /* Keep the header title clear of the pinned logout button */
    .dashboard-header h2 { padding-right: 46px; }

    /* Stack any multi-column page headers into a single column */
    .dashboard-header .row > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }
    .dashboard-header .text-md-end,
    .dashboard-header .text-end { text-align: left !important; }

    /* AI chat bubble: lift above the tab bar */
    #rcAiChatBtn { bottom: 90px !important; right: 16px !important; }
    #rcAiChatPanel {
        bottom: 160px !important;
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100vh - 230px) !important;
    }

    /* Notification & profile dropdowns full width */
    .notif-dropdown {
        position: fixed !important;
        top: auto !important;
        bottom: 72px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
        z-index: 10000 !important; /* above the tab bar (9990) */
    }
    .dropdown-menu { width: 100%; }

    /* ----------------------------------------------------------------------
       STEP 3 — Dashboards
       ---------------------------------------------------------------------- */
    /* Density: trim card padding/margins ~40%, shrink fonts, tighten table
       cells and rows so 5-6 rows fit on a phone screen without scrolling.
       (The more specific Financial Overview rules below still take precedence
       because they appear later in source order.) */
    .card > .card-body { padding: 0.6rem !important; }
    .card > .card-header { padding: 0.45rem 0.6rem !important; }
    .card { margin-bottom: 0.75rem !important; }

    .table { font-size: 11px !important; }
    .table td, .table th { padding: 4px 6px !important; line-height: 1.25 !important; vertical-align: middle; }
    .table-sm td, .table-sm th { padding: 4px 6px !important; }

    .btn { font-size: 12px !important; }
    .btn-sm { font-size: 11px !important; }

    /* Stat / summary cards: 2 per row on mobile */
    [data-dashboard-section="stat-cards"] .row > [class*="col-"],
    .row:has(> [class*="col-"] > .stat-card) > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .stat-card { padding: 0.5rem; }
    .stat-number { font-size: 1.1rem; }
    .stat-icon { font-size: 1.2rem; }

    /* Show mobile-only helpers (e.g. Admin Tools collapse chevron) */
    .rc-mobile-only { display: inline-block; }

    /* Financial Overview card: tighter padding + smaller figures so the whole
       card fits on a phone screen without internal scrolling. Inline styles in
       the template require !important to override. */
    [data-dashboard-section="financial-overview"] .card-body { padding: 0.75rem 0.9rem !important; }
    [data-dashboard-section="financial-overview"] .row { --bs-gutter-y: 0.5rem; }
    [data-dashboard-section="financial-overview"] .row > [class*="col-"] > div:last-child {
        font-size: 1.05rem !important;
        overflow-wrap: anywhere;   /* long dollar figures wrap instead of overrunning the edge */
    }
    [data-dashboard-section="financial-overview"] .mb-3 { margin-bottom: 0.5rem !important; }
    /* Collapse the financial figures to 2-up so numbers never clip at 360px */
    [data-dashboard-section="financial-overview"] .row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Status Overview stat cards: keep 3-up and compact on mobile */
    #chartView-cards .p-3 { padding: 0.6rem !important; }
    #chartView-cards .col-4 > div > div { font-size: 1.2rem !important; }

    /* Admin Tools: collapsed by default on mobile; header acts as the toggle */
    #adminToolsCard .card-header { cursor: pointer; }
    #adminToolsCard.rc-collapsed #adminToolsBody { display: none; }
    #adminToolsCard .rc-admin-chevron { transition: transform 0.2s ease; }
    #adminToolsCard.rc-collapsed .rc-admin-chevron { transform: rotate(-90deg); }

    /* Icon/sort buttons inside table headers and card headers stay aligned */
    .table th .btn, .table td .btn,
    .card-header .btn-group .btn,
    .dbc-attached-tabs ~ * .btn-group .btn { vertical-align: middle; }

    /* Tab buttons (nav-pills / nav-tabs / btn-group): horizontally scrollable */
    .nav-tabs,
    .nav-pills,
    .btn-group.rc-scroll-tabs,
    .rc-tab-scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar { height: 3px; }
    .nav-tabs .nav-item,
    .nav-pills .nav-item { flex: 0 0 auto; }

    /* Filter / search bars and their controls: full width */
    .dashboard-header form,
    form.d-flex { flex-wrap: wrap; }
    .dashboard-header .form-control,
    .dashboard-header .form-select,
    .filter-bar .form-control,
    .filter-bar .form-select { width: 100%; margin-bottom: 0.5rem; }

    /* Bid / work-order cards stack to a single column */
    .bid-card,
    .work-order-card { width: 100%; }

    /* ----------------------------------------------------------------------
       STEP 6 — Responsive tables
       ---------------------------------------------------------------------- */
    /* Wrapped tables: smooth touch scrolling */
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* Unwrapped data tables become horizontally scrollable (excludes
       DataTables, which manage their own sizing). */
    table.table:not(.dataTable) {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    /* Tables already inside a .table-responsive wrapper keep native table
       rendering — the wrapper provides the horizontal scroll, so we must NOT
       convert them to display:block (that would double-handle and can break
       column alignment). */
    .table-responsive table.table {
        display: table;
        white-space: normal;
    }

    /* Job-list + detail tables: fit-to-width instead of zoom/sideways scroll.
       Non-essential dashboard columns are hidden by base.html JS (.rc-mobile-hide)
       so the essentials (Bid #, Client, Project, Status, Actions) fit ~360px
       legibly. Inline th width/min-width styles are neutralized so the auto
       layout can compress to the container. */
    table[data-bulk-table],
    .rc-zoom-table,
    .rc-fit-table {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 11px !important;
    }
    table[data-bulk-table] th,
    .rc-zoom-table th,
    .rc-fit-table th {
        font-size: 10.5px !important;
        font-weight: 700 !important;
        padding: 3px 4px !important;
        white-space: normal;
        overflow-wrap: break-word; /* whole-word wrapping only — no mid-word breaks */
        word-break: normal;
        width: auto !important;
        min-width: 0 !important;
    }
    table[data-bulk-table] td,
    .rc-zoom-table td,
    .rc-fit-table td {
        font-size: 11px !important;
        padding: 4px 4px !important;
        white-space: normal !important;
        overflow-wrap: break-word; /* whole-word wrapping only — no mid-word breaks */
        word-break: normal;
        min-width: 0 !important;
    }
    table[data-bulk-table] .bulk-check-header { width: 26px !important; }
    /* Columns hidden on mobile by the base.html fit script */
    .rc-mobile-hide { display: none !important; }

    /* Bid # stays on one line (the fit rules above allow anywhere-wrapping,
       which broke bid numbers character-by-character). Bid numbers render as
       the leading <strong> in their cell. */
    table[data-bulk-table] td > strong:first-child,
    .rc-zoom-table td > strong:first-child,
    .rc-fit-table td > strong:first-child {
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: keep-all;
    }
    /* Row action buttons: tidy compact grid instead of tall stacked stretch.
       .rc-actions is added by the base.html mobile fit script to every cell in
       an "Actions" column, covering tables without the actions-cell class. */
    table[data-bulk-table] td.actions-cell,
    table[data-bulk-table] td.rc-actions {
        min-width: 78px !important;
        white-space: normal !important;
    }
    table[data-bulk-table] td.actions-cell .btn,
    table[data-bulk-table] td.rc-actions .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto !important;
        height: auto !important;
        /* Beat base.html's global 38px touch-target minimum for .btn — these
           are compact per-row icon buttons, not primary actions. */
        min-width: 26px !important;
        min-height: 26px !important;
        padding: 3px 6px !important;
        margin: 1px !important;
        font-size: 11px !important;
        line-height: 1.2;
    }
    table[data-bulk-table] td.actions-cell form,
    table[data-bulk-table] td.rc-actions form,
    table[data-bulk-table] td.rc-actions .dropdown { display: inline-block; margin: 0; }

    /* Work-order detail tables (Materials / Labor / Subcontractors / Rentals /
       Time Entries): same fit treatment — compress to the container instead of
       relying on wrapper scroll. Wizard tables are excluded (they keep their
       internal scroll because they contain % inputs). */
    body[data-page="view-work-order"] .table-responsive > .table {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 11px !important;
    }
    body[data-page="view-work-order"] .table-responsive > .table th,
    body[data-page="view-work-order"] .table-responsive > .table td {
        padding: 3px 4px !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        min-width: 0 !important;
        width: auto !important;
        font-size: 10.5px !important;
    }

    /* Slide tables (e.g. the client bid description Item/Asset table): opt out
       of the fit-to-width squeeze and scroll sideways inside their wrapper
       instead. Headers stay on one line at a readable size. */
    body[data-page="view-work-order"] .table-responsive > .rc-slide-table,
    .table-responsive > .rc-slide-table {
        width: auto !important;
        min-width: 560px !important;
    }
    body[data-page="view-work-order"] .table-responsive > .rc-slide-table th,
    .table-responsive > .rc-slide-table th {
        white-space: nowrap !important;
        overflow-wrap: normal;
        word-break: keep-all;
        font-size: 11px !important;
        padding: 5px 8px !important;
    }
    body[data-page="view-work-order"] .table-responsive > .rc-slide-table td,
    .table-responsive > .rc-slide-table td {
        white-space: normal !important;
        overflow-wrap: break-word;
        word-break: normal;
        font-size: 12px !important;
        padding: 5px 8px !important;
    }
    .table-responsive:has(> .rc-slide-table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* File/attachment rows: long filenames pushed the Drive/Download button
       group past the right edge at 360px. Let the row wrap instead. */
    body[data-page="view-work-order"] .list-group-item.d-flex {
        flex-wrap: wrap;
        row-gap: 4px;
    }
    body[data-page="view-work-order"] .list-group-item.d-flex > span:first-child {
        min-width: 0;
        overflow-wrap: break-word;
    }

    /* Card headers (e.g. work-order title + buttons + status badge) may wrap;
       the status badge must never push past the card edge. */
    .card-header .badge { white-space: normal; text-align: left; }

    /* ----------------------------------------------------------------------
       STEP 4 — Bid / Work Order wizard
       ---------------------------------------------------------------------- */
    /* Step indicators scroll horizontally instead of cramming */
    .wizard-progress {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }
    .wizard-progress::before { display: none; } /* hide the connecting line on scroll */
    .wizard-step {
        flex: 0 0 auto;
        min-width: 72px;
    }
    .step-circle { width: 34px; height: 34px; line-height: 34px; font-size: 0.9rem; }
    .step-label { font-size: 0.7rem; }

    /* Wizard labor/materials tables: smooth internal scroll with a sensible
       minimum width instead of squeezing % columns + inputs. */
    .wizard-content .table-responsive { -webkit-overflow-scrolling: touch; }
    .wizard-content .table-responsive > .table { min-width: 560px; }

    /* Wizard page spacing: tighten header/cards/fields so the layout reads
       cleanly at 360-375px instead of oversized padding pushing content around. */
    body[data-page="wizard-edit"] .card-header.d-flex {
        flex-wrap: wrap;
        row-gap: 0.35rem;
        padding: 0.5rem 0.6rem;
    }
    body[data-page="wizard-edit"] .card-header h4 { font-size: 1rem; min-width: 0; }
    body[data-page="wizard-edit"] .card > .card-body { padding: 0.7rem 0.55rem; }
    body[data-page="wizard-edit"] .wizard-content .card-body,
    body[data-page="wizard-edit"] .wizard-content .section-card-body { padding: 0.6rem 0.5rem; }
    body[data-page="wizard-edit"] .wizard-content .card { margin-bottom: 0.75rem !important; }
    body[data-page="wizard-edit"] .wizard-progress { margin-bottom: 0.75rem !important; }
    body[data-page="wizard-edit"] .wizard-content .mb-4 { margin-bottom: 0.9rem !important; }
    body[data-page="wizard-edit"] .wizard-content .form-label { margin-bottom: 0.2rem; }
    body[data-page="wizard-edit"] .wizard-content .row { --bs-gutter-x: 0.5rem; }

    /* Step 5 estimate tables (Labor Costs etc.) contain inputs, so instead of
       sideways scroll they are scaled down to fit the full width — all columns
       (Labor Type / Hourly Rate / Hours / OT Hours / Crew Mix / Amount) visible. */
    .wizard-content .table-responsive > .estimate-table {
        zoom: 0.85;
        /* Fixed layout caps the table at its 560px base width so content
           (e.g. "@ $187.50/hr" hints) cannot widen columns past the zoom math. */
        table-layout: fixed;
        width: 560px !important;
        max-width: 560px !important;
    }
    .wizard-content .estimate-table .ot-rate-hint {
        white-space: normal;
        font-size: 9px;
    }
    .wizard-content .estimate-table th {
        white-space: normal;
        font-size: 10.5px !important;
        padding: 3px 3px !important;
    }
    .wizard-content .estimate-table td { padding: 3px 3px !important; }
    .wizard-content .estimate-table .form-control {
        padding: 2px 4px;
        font-size: 12px;
        min-width: 0;
    }


    /* Full-width form fields, labels above */
    .wizard-content .form-control,
    .wizard-content .form-select,
    .wizard-content input,
    .wizard-content select,
    .wizard-content textarea { width: 100%; }
    .wizard-content .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }

    /* Wizard navigation buttons: full width, stacked */
    #prevBtn, #nextBtn, #submitBtn {
        width: 100%;
        display: block;
        margin: 0.4rem 0 0 0;
        min-height: 48px;
    }

    /* ----------------------------------------------------------------------
       STEP 5 — Work Order detail page
       ---------------------------------------------------------------------- */
    /* Single-column project info header */
    .work-order-header .row > [class*="col-"],
    .project-info .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }

    /* Modals full screen on mobile */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }
    .modal-content {
        min-height: 100vh;
        border-radius: 0;
        border: none;
    }

    /* Forms: full-width inputs, taller touch-friendly buttons */
    .form-control, .form-select { width: 100%; }

    /* ----------------------------------------------------------------------
       STEP 7 — Touch optimizations
       ---------------------------------------------------------------------- */
    .btn, a.btn, button.btn { touch-action: manipulation; }

    /* Primary action buttons sized for touch */
    .btn-lg { min-height: 48px; }
    .btn:not(.btn-sm):not(.btn-link) { min-height: 44px; }

    /* Icon-only / link buttons keep a 44px tap target */
    .btn-icon, .notif-bell-link, .nav-link { min-height: 44px; }

    /* Action buttons in headers go full width */
    .dashboard-header .btn-lg,
    .card-header .btn-block-mobile { width: 100%; }
}

/* ==========================================================================
   SMALL PHONES — max-width: 400px (375px / 390px target widths)
   ========================================================================== */
@media (max-width: 400px) {
    .rc-mobile-tabbar .rc-tab .rc-tab-label { font-size: 10px; }
    .rc-mobile-tabbar .rc-tab .rc-tab-icon { font-size: 19px; }
    .stat-number { font-size: 1.2rem; }
}

/* Phones: the 560px-wide wizard estimate tables need a stronger down-scale to
   show every column (incl. OT Hours / Amount) with no sideways scroll. */
@media (max-width: 480px) {
    .wizard-content .table-responsive > .estimate-table {
        zoom: 0.62;
    }
}