/*
 * ElectionMgmt mobile overlay — fonts ONLY.
 *
 * The desktop layout (grids, card padding, pickers, level-tabs, tables)
 * is preserved verbatim from css/electionmgmt.css per owner direction.
 * This sheet only shrinks typography on phone-size viewports so that the
 * same desktop grid is legible without zooming.
 */

/* ── 720px and below: phones + small tablets in portrait ───────────────── */
@media (max-width: 720px) {

    /* Page chrome */
    .page-title { font-size: 17px !important; }
    .page-subtitle { font-size: 11px !important; }
    .page-actions .btn { font-size: 11px !important; }
    .section-hdr { font-size: 12px !important; }

    /* Pickers + level tabs (text only — keep their widths/positions) */
    .pdc-picker-lbl { font-size: 11px !important; }
    .pdc-picker-sel,
    .geo-bar select,
    .cv-pick select,
    .bv-pick select { font-size: 12px !important; }
    .geo-tab { font-size: 10.5px !important; }

    /* Stat cards (top of most pages) */
    .stat-card .card-label { font-size: 9.5px !important; }
    .stat-card .card-value { font-size: 17px !important; white-space: nowrap !important; }
    .stat-card .card-sub   { font-size: 9.5px !important; }

    /* CompleteView / BoothOverview KPI cards */
    .cv-kpi .card .lbl,
    .bv-kpi .card .lbl { font-size: 9px !important; }
    .cv-kpi .card .val,
    .bv-kpi .card .val { font-size: 16px !important; white-space: nowrap !important; }
    .cv-kpi .card .sub,
    .bv-kpi .card .sub { font-size: 9px !important; }

    /* PDA tiles (PDAOverview pages) */
    .pdacs-wrap .pda-tile .t-label { font-size: 11px !important; }
    .pdacs-wrap .pda-tile .t-val   { font-size: 22px !important; white-space: nowrap !important; }
    .pdacs-wrap .pda-tile .t-sub   { font-size: 10px !important; }

    /* PDA-G section header + glance gauges */
    .pdacs-wrap .pdag-h          { font-size: 22px !important; }
    .pdacs-wrap .pdag-h .bdg     { font-size: 12px !important; }
    .pdacs-wrap .pdag-h small    { font-size: 11px !important; }
    .pdacs-wrap .chart-box h4    { font-size: 10.5px !important; }
    .pdacs-wrap .glance .verdict { font-size: 13px !important; }
    .pdacs-wrap .gauge .g-val    { font-size: 15px !important; }
    .pdacs-wrap .gauge .g-top    { font-size: 9.5px !important; }
    .pdacs-wrap .bsub            { font-size: 10.5px !important; }
    .pdacs-wrap .pdacs-banner    { font-size: 11px !important; }

    /* Generic chart cards used in many pages */
    .gcard h4 { font-size: 10.5px !important; }

    /* Tables */
    .data-table          { font-size: 10.5px !important; }
    .data-table th       { font-size: 9px !important; }
    .cv-tbl              { font-size: 10px !important; }

    /* Hero blocks */
    .cv-hero h1, .bv-hero h1   { font-size: 20px !important; }
    .cv-hero .sub, .bv-hero .sub { font-size: 9.5px !important; }

    /* Section card headings (cv-h2 / bv-h2) */
    .cv-h2, .bv-h2          { font-size: 14px !important; }
    .cv-h2 .nmb, .bv-h2 .nmb { font-size: 28px !important; }
    .cv-h2 .ttl, .bv-h2 .ttl { font-size: 13px !important; }
    .cv-h2 .tag, .bv-h2 .tag { font-size: 8.5px !important; }

    /* Side rail (CompleteView / BoothOverview) text only */
    .cv-rail, .bv-rail     { font-size: 10.5px !important; }
    .cv-rail .hdr,
    .bv-rail .hdr          { font-size: 9px !important; }

    /* Progress / empty boxes */
    .progress-box   { font-size: 11px !important; }
    .progress-pct   { font-size: 13px !important; }
    .progress-meta  { font-size: 10.5px !important; }

    /* Hub (Live.razor) — fonts only, keep grid layout */
    .emhub__title       { font-size: 18px !important; }
    .emhub__sub         { font-size: 11.5px !important; }
    .emhub__card-title  { font-size: 13px !important; }
    .emhub__sub-label   { font-size: 11.5px !important; }
    .emhub__sub-icon    { font-size: 13px !important; }
}

/* ── 420px and below: phones in portrait — one more shrink ───────────────── */
@media (max-width: 420px) {
    .page-title                 { font-size: 15px !important; }
    .stat-card .card-value      { font-size: 16px !important; }
    .cv-kpi .card .val,
    .bv-kpi .card .val          { font-size: 15px !important; }
    .pdacs-wrap .pda-tile .t-val { font-size: 20px !important; }
    .pdacs-wrap .pdag-h         { font-size: 18px !important; }
    .cv-hero h1, .bv-hero h1    { font-size: 18px !important; }
    .cv-h2 .nmb, .bv-h2 .nmb    { font-size: 24px !important; }
    .emhub__title               { font-size: 16px !important; }
}
