/* =====================================================================
   GAINS — POS Report dashboard (Components/Pages/Reports/*)
   Global stylesheet (loaded in Components/App.razor). All classes are
   prefixed rd-* to avoid collisions with the mu-/uf-/bspl- systems.
   ===================================================================== */

.rd-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: #f3f4f6;
}

/* ── Sticky filter bar ─────────────────────────────────────────────── */
.rd-filterbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.rd-fb-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 22px;
    padding: 12px 20px;
}

.rd-fb-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .5px;
    color: #374151;
    margin-right: 6px;
}

.rd-fb-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .rd-fb-field label {
        font-size: 13px;
        font-weight: 600;
        color: #4b5563;
        margin: 0;
        white-space: nowrap;
    }

.rd-fb-date {
    position: relative;
    display: flex;
    align-items: center;
}

    .rd-fb-date i {
        position: absolute;
        left: 9px;
        color: #6b7280;
        font-size: 13px;
        pointer-events: none;
    }

    .rd-fb-date input {
        border: 1px solid #d1d5db;
        border-radius: 6px;
        padding: 6px 10px 6px 28px;
        font-size: 13px;
        color: #374151;
        background: #fff;
        min-width: 150px;
    }

.rd-fb-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.rd-btn {
    border: none;
    border-radius: 6px;
    padding: 7px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .rd-btn:disabled {
        opacity: .65;
        cursor: default;
    }

.rd-btn-go {
    background: #22b07d;
}

    .rd-btn-go:hover:not(:disabled) {
        background: #1c9c6e;
    }

.rd-btn-cf {
    background: #3b82f6;
}

    .rd-btn-cf:hover:not(:disabled) {
        background: #2f6fe0;
    }

/* ── Scroll area + responsive grid ─────────────────────────────────── */
.rd-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 18px;
}

.rd-grid-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

/* Tablet & below → single column (never horizontal scroll) */
@media (max-width: 991px) {
    .rd-grid-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Card ──────────────────────────────────────────────────────────── */
.rd-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rd-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #edeef0;
    flex-wrap: wrap;
}

.rd-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #4b5563;
}

.rd-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.rd-actions-sep {
    width: 1px;
    height: 20px;
    background: #d1d5db;
    margin: 0 4px;
}

.rd-card-body {
    padding: 16px;
    min-height: 90px;
}

.rd-chart-body {
    min-height: 360px;
}

/* ── Toggle buttons (green active / white inactive) ───────────────── */
.rd-toggle {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #4b5563;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .rd-toggle:hover {
        background: #f3f4f6;
    }

    .rd-toggle.active {
        background: #22b07d;
        border-color: #22b07d;
        color: #fff;
    }

.rd-toggle-danger.active {
    background: #ef4444;
    border-color: #ef4444;
}

/* ── State placeholders (loading / error / no data) ───────────────── */
.rd-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 120px;
    color: #6b7280;
    font-size: 14px;
}

    .rd-state i {
        font-size: 26px;
        color: #9ca3af;
    }

.rd-state-err {
    color: #b91c1c;
}

    .rd-state-err i {
        color: #ef4444;
    }

/* ── Spinner ──────────────────────────────────────────────────────── */
.rd-spin {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: rd-rot .7s linear infinite;
}

.rd-spin-lg {
    width: 30px;
    height: 30px;
    border-width: 3px;
    border-color: #d1d5db;
    border-top-color: #22b07d;
}

@keyframes rd-rot {
    to {
        transform: rotate(360deg);
    }
}

/* ── Grid / table ─────────────────────────────────────────────────── */
.rd-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rd-grid-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.rd-show {
    font-size: 13px;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rd-pagesize {
    border: 1px solid #d1d5db;
    border-radius: 5px;
    padding: 3px 6px;
    font-size: 13px;
}

.rd-tools {
    display: flex;
    gap: 6px;
    background: #6b7280;
    border-radius: 6px;
    padding: 3px;
}

.rd-xbtn {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
}

    .rd-xbtn:hover {
        background: rgba(255, 255, 255, .18);
    }

.rd-search {
    margin-left: auto;
}

    .rd-search input {
        border: 1px solid #d1d5db;
        border-radius: 6px;
        padding: 5px 10px;
        font-size: 13px;
        min-width: 160px;
    }

.rd-table-wrap {
    overflow-x: auto;
    border: 1px solid #eceef0;
    border-radius: 6px;
}

.rd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .rd-table thead th {
        position: sticky;
        top: 0;
        background: #2b3648;
        color: #fff;
        font-weight: 600;
        text-align: left;
        padding: 10px 12px;
        white-space: nowrap;
        cursor: pointer;
        user-select: none;
    }

        .rd-table thead th i {
            margin-left: 4px;
            opacity: .7;
            font-size: 12px;
        }

    .rd-table tbody td {
        padding: 9px 12px;
        border-top: 1px solid #eef0f2;
        color: #374151;
    }

    .rd-table tbody tr:nth-child(even) {
        background: #f9fafb;
    }

    .rd-table tbody tr:hover {
        background: #eef6f3;
    }

    .rd-table tfoot td {
        background: #2b3648;
        color: #fff;
        font-weight: 700;
        padding: 10px 12px;
    }

.rd-th-idx,
.rd-idx {
    width: 44px;
    text-align: left;
    color: #9ca3af;
}

.rd-num {
    text-align: right !important;
}

.rd-neg {
    color: #dc2626 !important;
}

.rd-empty {
    text-align: center;
    color: #6b7280;
    padding: 24px !important;
}

/* ── Pager ────────────────────────────────────────────────────────── */
.rd-pager {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.rd-page-nav,
.rd-pagenum {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    padding: 5px 11px;
    font-size: 13px;
    border-radius: 5px;
    cursor: pointer;
}

    .rd-page-nav:disabled {
        opacity: .5;
        cursor: default;
    }

    .rd-pagenum.active {
        background: #22b07d;
        border-color: #22b07d;
        color: #fff;
    }

.rd-ellipsis {
    padding: 5px 4px;
    color: #9ca3af;
}

/* ── Summary (Report 1) ───────────────────────────────────────────── */
.rd-summary {
    border: 1px solid #edeef0;
    border-radius: 8px;
    overflow: hidden;
}

.rd-sum-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 14px;
    color: #374151;
}

    .rd-sum-row:nth-child(even) {
        background: #f4f5f7;
    }

    .rd-sum-row span:first-child {
        font-weight: 600;
    }

/* ── Chart container ──────────────────────────────────────────────── */
.rd-chart {
    width: 100%;
    height: 340px;
}

@media (max-width: 575px) {
    .rd-fb-actions {
        margin-left: 0;
    }

    .rd-fb-inner {
        gap: 12px 14px;
    }

    .rd-fb-date input {
        min-width: 120px;
    }
}

/* ── Equal-size cards, responsive (same box whether data exists or not) ──
   Card height is fixed per breakpoint; the body fills it and scrolls inside,
   so grids, charts, loading/error/"No Data" states all occupy the same box. */
.rd-grid-layout {
    --rd-card-h: 490px;
    align-items: stretch;
    grid-auto-rows: var(--rd-card-h);
}

.rd-grid-layout > * {
    min-width: 0;
}

.rd-card {
    height: 100%;
    min-height: 0;
    min-width: 0;
}

.rd-card-body,
.rd-chart-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

/* content fills the body */
.rd-card-body > .rd-state {
    flex: 1;
}

.rd-card-body > .rd-grid {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.rd-card-body .rd-table-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.rd-card-body .rd-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.rd-card-body .rd-table tfoot td {
    position: sticky;
    bottom: 0;
}

.rd-card-body > .rd-chart {
    flex: 1;
    height: 100% !important;
    min-height: 260px;
}

.rd-card-body > .rd-summary {
    flex: 1;
    overflow: auto;
}

/* wide screens: keep two columns, taller cards */
@media (min-width: 1600px) {
    .rd-grid-layout {
        --rd-card-h: 490px;
    }
}

/* laptop */
@media (max-width: 1399px) {
    .rd-grid-layout {
        --rd-card-h: 480px;
        gap: 14px;
    }

    .rd-scroll {
        padding: 14px;
    }
}

/* tablet & below → one column */
@media (max-width: 991px) {
    .rd-grid-layout {
        --rd-card-h: 480px;
    }
}

/* mobile */
@media (max-width: 575px) {
    .rd-grid-layout {
        --rd-card-h: 440px;
        gap: 12px;
    }

    .rd-scroll {
        padding: 10px;
    }

    .rd-card-head {
        padding: 10px 12px;
    }

    .rd-card-body {
        padding: 10px;
    }

    .rd-card-title {
        font-size: 14px;
    }

    .rd-toggle {
        padding: 4px 10px;
        font-size: 12px;
    }

    .rd-grid-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ── Filter-bar calendar: boxed field, blue icon, "01-Apr-2010" (masters look) ── */
.rd-fb-field .gdp-field-block {
    width: 170px;
}

.rd-fb-field .gdp-wrap {
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    line-height: 1.5;
    color: #1a2537;
}

.rd-fb-field .gdp-icon {
    color: #1a56a7;
    font-size: 14px;
}

@media (max-width: 575px) {
    .rd-fb-field {
        flex: 1 1 100%;
    }

    .rd-fb-field .gdp-field-block {
        flex: 1;
        width: auto;
    }
}

/* ── Title block (same as /masters/site) + filter row beneath ─────── */
.rd-filterbar .bspl-title-block h1,
.rd-filterbar .bspl-title-block .bspl-subtitle {
    font-family: 'Segoe UI', Arial, sans-serif;
}

.rd-filterbar .bspl-title-block {
    border-bottom: 1px solid #e7eaec;
}

.rd-filterbar .rd-fb-inner {
    padding: 10px 16px;
    gap: 10px 22px;
}

/* GO / CF stay top-right of the filter row */
.rd-filterbar .rd-fb-actions {
    margin-left: auto;
}

@media (max-width: 767px) {
    .rd-filterbar .bspl-title-block {
        padding: 10px 12px 6px;
    }

    .rd-filterbar .rd-fb-inner {
        padding: 8px 12px;
    }
}

/* ═══ Interactive polish — same colours/classes, just smoother & more responsive ═══ */

/* cards lift slightly on hover */
.rd-card {
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

    .rd-card:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
        border-color: #d5dae1;
        transform: translateY(-1px);
    }

/* buttons: smooth colour change, press feedback, keyboard focus ring */
.rd-btn, .rd-toggle, .rd-xbtn, .rd-pagenum, .rd-page-nav {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}

    .rd-btn:active:not(:disabled), .rd-toggle:active, .rd-xbtn:active, .rd-pagenum:active, .rd-page-nav:active:not(:disabled) {
        transform: scale(.96);
    }

    .rd-btn:focus-visible, .rd-toggle:focus-visible, .rd-xbtn:focus-visible,
    .rd-pagenum:focus-visible, .rd-page-nav:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(34, 176, 125, .30);
    }

.rd-toggle.active {
    box-shadow: 0 1px 3px rgba(34, 176, 125, .35);
}

.rd-toggle-danger.active {
    box-shadow: 0 1px 3px rgba(239, 68, 68, .35);
}

.rd-btn:disabled, .rd-page-nav:disabled {
    cursor: not-allowed;
}

/* tables: clickable headers, smooth row hover, readable negatives */
.rd-table .rd-th {
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease;
}

    .rd-table .rd-th:hover {
        background-color: #3a4558;
    }

.rd-table tbody tr {
    transition: background-color .12s ease;
}

.rd-table tbody tr:hover td {
    background-color: #eaf6f1;
}

.rd-neg {
    font-weight: 600;
}

/* search + page-size inputs get a soft focus ring */
.rd-search input, .rd-pagesize {
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .rd-search input:focus, .rd-pagesize:focus {
        outline: none;
        border-color: #22b07d;
        box-shadow: 0 0 0 3px rgba(34, 176, 125, .18);
    }

/* summary rows react to hover */
.rd-sum-row {
    transition: background-color .12s ease;
}

    .rd-sum-row:hover {
        background: #eaf6f1;
    }

/* cards fade in once data/charts are ready */
.rd-card-body > * {
    animation: rd-fade .25s ease;
}

@keyframes rd-fade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* slim scrollbars inside cards */
.rd-card-body, .rd-table-wrap, .rd-scroll {
    scrollbar-width: thin;
    scrollbar-color: #c4cad3 transparent;
}

    .rd-card-body::-webkit-scrollbar, .rd-table-wrap::-webkit-scrollbar, .rd-scroll::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .rd-card-body::-webkit-scrollbar-thumb, .rd-table-wrap::-webkit-scrollbar-thumb, .rd-scroll::-webkit-scrollbar-thumb {
        background: #c4cad3;
        border-radius: 4px;
    }

        .rd-card-body::-webkit-scrollbar-thumb:hover, .rd-table-wrap::-webkit-scrollbar-thumb:hover, .rd-scroll::-webkit-scrollbar-thumb:hover {
            background: #9aa3b0;
        }

/* touch screens: no hover-lift, bigger tap targets */
@media (hover: none) {
    .rd-card:hover {
        transform: none;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    }

    .rd-toggle, .rd-xbtn {
        min-height: 34px;
    }
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .rd-card, .rd-btn, .rd-toggle, .rd-xbtn, .rd-table tbody tr, .rd-card-body > * {
        transition: none;
        animation: none;
    }
}

/* ── GO / CF buttons: lift on hover, press, icon motion, focus ring ── */
.rd-btn {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

    .rd-btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 5px 12px rgba(0, 0, 0, .22);
    }

    .rd-btn:active:not(:disabled) {
        transform: translateY(0) scale(.96);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    }

.rd-btn-go:focus-visible {
    box-shadow: 0 0 0 3px rgba(34, 176, 125, .40);
}

.rd-btn-cf:focus-visible {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .40);
}

.rd-btn-ico {
    font-size: 12px;
    transition: transform .25s ease;
}

.rd-btn-go:hover:not(:disabled) .rd-btn-ico {
    transform: translateX(3px);
}

.rd-btn-cf:hover:not(:disabled) .rd-btn-ico {
    transform: rotate(-200deg);
}

.rd-btn:disabled {
    box-shadow: none;
    transform: none;
}

/* mobile: icon-only look keeps both buttons on one row */
@media (max-width: 575px) {
    .rd-filterbar .rd-fb-actions {
        width: 100%;
        display: flex;
        gap: 10px;
    }

        .rd-filterbar .rd-fb-actions .rd-btn {
            flex: 1;
            justify-content: center;
            padding: 9px 12px;
        }
}

/* ── GO / CF: same look as the TaxClass-master GO button (tcm-go-btn) ──
   plain text, 3px radius, flat; GO teal, CF #306b9c. Overrides earlier effects. */
.rd-filterbar .rd-btn {
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: none;
    transform: none;
}

.rd-filterbar .rd-btn-go {
    background: #1ab99a;
}

    .rd-filterbar .rd-btn-go:hover:not(:disabled) {
        background: #159a80;
        transform: none;
        box-shadow: none;
    }

.rd-filterbar .rd-btn-cf {
    background: #306b9c;
}

    .rd-filterbar .rd-btn-cf:hover:not(:disabled) {
        background: #285a84;
        transform: none;
        box-shadow: none;
    }

.rd-filterbar .rd-btn:active:not(:disabled) {
    transform: none;
    box-shadow: none;
    filter: brightness(.92);
}

.rd-filterbar .rd-btn-go:focus-visible {
    box-shadow: 0 0 0 3px rgba(26, 185, 154, .25);
}

.rd-filterbar .rd-btn-cf:focus-visible {
    box-shadow: 0 0 0 3px rgba(48, 107, 156, .25);
}

/* ── Grid header colour: app standard #306b9c (same as .mu-table thead th) ── */
.rd-table thead th,
.rd-table thead th.rd-th-idx {
    background: #306b9c;
    color: #fff;
}

.rd-table .rd-th:hover {
    background-color: #3b7bb1;
}

.rd-table tfoot td {
    background: #306b9c;
    color: #fff;
    font-weight: 600;
}

/* ── Totals footer: light row, dark bold text, soft borders (as in reference) ── */
.rd-table tfoot td {
    background: #fafbfd;
    color: #1a2537;
    font-weight: 700;
    border-top: 1px solid #d9e0ea;
    border-bottom: 1px solid #d9e0ea;
}

/* ── Totals footer: same blue as header (#306b9c), white bold text ── */
.rd-table tfoot td {
    background: #306b9c;
    color: #fff;
    font-weight: 700;
    border-top: 1px solid #306b9c;
    border-bottom: 1px solid #306b9c;
}

/* ── Report 6 day tabs: filled by default (<=0 red, 30/60/90/All green); selected = white ── */
.rd-toggle.rd-fill-ok {
    background: #22b07d;
    border-color: #22b07d;
    color: #fff;
}

    .rd-toggle.rd-fill-ok:hover {
        background: #1c9c6e;
        border-color: #1c9c6e;
    }

.rd-toggle.rd-fill-danger {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

    .rd-toggle.rd-fill-danger:hover {
        background: #dc2f2f;
        border-color: #dc2f2f;
    }

.rd-toggle.rd-fill-ok.is-on,
.rd-toggle.rd-fill-danger.is-on,
.rd-toggle.rd-fill-ok.is-on:hover,
.rd-toggle.rd-fill-danger.is-on:hover {
    background: #fff;
    border-color: #d1d5db;
    color: #374151;
    box-shadow: none;
}

/* Report 6 day tabs: narrower buttons (short labels need less padding) */
.rd-toggle.rd-fill-ok,
.rd-toggle.rd-fill-danger {
    padding: 5px 9px;
    min-width: 38px;
    text-align: center;
}

/* ── Compact grid header + footer (all POS grids): less vertical padding ── */
.rd-table thead th {
    padding: 9px 12px;
    line-height: 1.35;
}

.rd-table tfoot td {
    padding: 9px 12px;
    line-height: 1.35;
}

/* GO / CF: narrower buttons (desktop/tablet) */
@media (min-width: 576px) {
    .rd-filterbar .rd-btn {
        padding: 6px 12px;
        min-width: 0;
    }
}

/* ── Header / footer alignment with data cells ──
   The sort icon sat inside the header text flow, pushing right-aligned header
   labels left of their numbers. Take it out of the flow (absolute, in the cell
   padding) so header text, data and footer totals share the same edges. */
.rd-table thead th {
    position: sticky;            /* also the anchor for the absolute icon */
}

    .rd-table thead th i {
        position: absolute;
        right: 1px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        font-size: 10px;
        line-height: 1;
    }

.rd-table thead th,
.rd-table tbody td,
.rd-table tfoot td {
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
}

.rd-table {
    table-layout: fixed;
}

.rd-table th.rd-th-idx,
.rd-table td.rd-idx {
    width: 44px;
}

/* ── Compact pagination bar (less height) ── */
.rd-pager {
    gap: 3px;
    margin-top: 6px;
}

.rd-page-nav,
.rd-pagenum {
    padding: 4px 11px;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 4px;
}

.rd-ellipsis {
    padding: 2px 3px;
}

/* Pagination: never force a tall tap target (was min-height 34px on touch-ish screens) */
.rd-page-nav,
.rd-pagenum {
    min-height: 0;
    height: auto;
}

/* ── Font standard for POS report: Arial 12px (title block keeps its own style) ── */
.rd-page .rd-card,
.rd-page .rd-filterbar .rd-fb-inner {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.rd-table,
.rd-table th,
.rd-table td,
.rd-sum-row,
.rd-toggle,
.rd-xbtn,
.rd-btn,
.rd-page-nav,
.rd-pagenum,
.rd-ellipsis,
.rd-show,
.rd-pagesize,
.rd-search input,
.rd-state,
.rd-state-txt,
.rd-fb-field label,
.rd-filterbar .gdp-wrap,
.rd-filterbar .gdp-input {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
}

/* ── Charts styled with CSS only (no JS changes): Arial 12px text, lighter Report 5 bars ── */
.rd-chart .highcharts-container,
.rd-chart .highcharts-container text,
.rd-chart .highcharts-container tspan,
.rd-chart .highcharts-container span {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
}

#rd-chart-5 .highcharts-bar-series .highcharts-point,
#rd-chart-5 .highcharts-series-0 .highcharts-point {
    fill: #7ab8f7;
}

/* Report 1 labels: normal weight (were bold) */
.rd-sum-row span:first-child {
    font-weight: 400;
}

/* ── Footer bar with the PDF download icon: always visible ──
   .rd-page grows with its content (the layout gives it no fixed height), so the footer used to sit at the very
   end of a long page. Stick it to the bottom of the visible content area, like the filter bar sticks to the top. */
.rd-page .rd-footer {
    position: sticky;
    bottom: 0;
    z-index: 1030;
    flex-shrink: 0;
    margin-top: auto;
    height: 40px;
    background: #f5f5f5;
    border-top: 1px solid #e7eaec;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, .06);
}

.rd-footer .bspl-foot-btn {
    font-size: 18px;
    padding: 4px 10px;
    transition: transform .12s ease, opacity .12s ease;
}

    .rd-footer .bspl-foot-btn:hover:not(:disabled) {
        transform: scale(1.12);
    }

    .rd-footer .bspl-foot-btn:disabled {
        opacity: .6;
        cursor: wait;
    }