/*
 * ReportDetail page styles — Telerik ExpansionPanel sections with legacy ibox look.
 */

/* Match the ibox-content background to the body (#f3f3f4) so the page blends
   with the k-content grey instead of showing a white card on grey. */
.ibox-content {
    background-color: #f3f3f4;
}

/* Ensure export link has sufficient contrast on the grey (#f3f3f4) background.
   #0052cc gives ~6.16:1 contrast ratio against #f3f3f4, passing WCAG AA (4.5:1).
   !important overrides Kendo Ocean Blue theme link colour rules. */
.ibox-content a[href*="handler=Export"] {
    color: #0052cc !important;
}

/* Visually hidden section headings preserved for accessibility / test compatibility */
h3.section-header {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Style Telerik ExpansionPanel to match legacy ibox blue header */
.k-expander {
    margin-bottom: 15px;
    border: 1px solid #e7eaec;
    border-radius: 4px;
}

.k-expander-header {
    background-color: #337ab7 !important;
    color: #fff !important;
    border-radius: 3px 3px 0 0;
    padding: 10px 15px;
    cursor: pointer;
}

.k-expander-header:hover {
    background-color: #286090 !important;
}

.k-expander-header:focus {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

.k-expander-header .k-expander-title {
    color: #fff !important;
    font-weight: 600;
}

.k-expander-header .k-svg-icon,
.k-expander-header .k-icon {
    color: #fff !important;
}

.k-expander-content-wrapper {
    padding: 10px;
}

.k-expander-content-wrapper .table {
    margin-bottom: 0;
}

/* Responsive: stack table cells on small screens */
@media (max-width: 925px) {
    .k-expander-content-wrapper .table th,
    .k-expander-content-wrapper .table td {
        font-size: 0.9em;
        padding: 6px 4px;
    }
}

/* ── Vertical-centre all grid cell content ──────────────────────────── */
.k-expander-content-wrapper .table td,
.k-expander-content-wrapper .table th,
.k-expander-content-wrapper .k-grid td,
.k-expander-content-wrapper .k-grid th {
    vertical-align: middle;
}

/* ── Kendo Grid overrides — match legacy report-grid look ────────── */
.k-expander-content-wrapper .k-grid {
    border-color: #d4dde4;
}

.k-expander-content-wrapper .k-grid .k-grid-header th,
.k-expander-content-wrapper .k-grid .k-header {
    background-color: #c4e2f7 !important;
    text-align: center !important;
    color: inherit;
    border-color: #d4dde4;
}

.k-expander-content-wrapper .k-grid tbody tr:nth-of-type(odd) > td {
    background-color: #ffffff !important;
}

.k-expander-content-wrapper .k-grid tbody tr:nth-of-type(even) > td {
    background-color: #dbedf7 !important;
}

/* Hierarchy grids — count only master rows for striping so expanding/collapsing
   detail rows does not shift the alternating colours of parent rows. */
.k-expander-content-wrapper .k-grid tbody tr.k-master-row:nth-child(odd of .k-master-row) > td {
    background-color: #ffffff !important;
}

.k-expander-content-wrapper .k-grid tbody tr.k-master-row:nth-child(even of .k-master-row) > td {
    background-color: #dbedf7 !important;
}

.k-expander-content-wrapper .k-grid .k-grid-footer td,
.k-expander-content-wrapper .k-grid .k-grid-footer .k-footer-template td {
    font-weight: 700;
    background-color: #fff !important;
}

/* Static total bar below server-paged grids */
.rd-grid-total-bar {
    text-align: right;
    font-weight: 700;
    padding: 8px 12px;
    border: 1px solid #d4dde4;
    border-top: none;
    background: #fff;
}

/* ── Kendo Grid pager — VoterTools-style ─────────────────────────── */
.k-expander-content-wrapper .k-grid-pager {
    background-color: #C4E2F7 !important;
    display: flex !important;
    flex-direction: row-reverse;
    align-items: center;
}

.k-expander-content-wrapper .k-pager-info {
    justify-content: flex-start;
}

.k-expander-content-wrapper .k-pager-numbers-wrap {
    justify-content: flex-end;
}

.k-expander-content-wrapper .k-pager-numbers-wrap .k-button {
    background-color: white !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
    margin-left: 6px;
}

.k-expander-content-wrapper .k-pager-numbers-wrap .k-button.k-state-selected,
.k-expander-content-wrapper .k-pager-numbers-wrap .k-button.k-selected,
.k-expander-content-wrapper .k-pager-numbers-wrap .k-button.k-state-active,
.k-expander-content-wrapper .k-pager-numbers-wrap .k-button[aria-current="true"] {
    background-color: #1A7CBA !important;
    color: #ffffff !important;
    border-color: #000 !important;
    font-weight: bold;
    box-shadow: 0 0 0 2px #000, 0 2px 6px rgba(0,0,0,0.15);
}

/* "Pg" label before pager input */
.k-expander-content-wrapper .k-pager-input {
    white-space: nowrap;
}
.k-expander-content-wrapper .k-pager-input::before {
    content: "Pg";
    display: inline-block;
    margin-right: 6px;
    font-weight: 600;
}
/* Hide native pager labels inside the input group */
.k-expander-content-wrapper .k-pager-input .k-pager-input-text,
.k-expander-content-wrapper .k-pager-input .k-label,
.k-expander-content-wrapper .k-pager-input .k-input-label,
.k-expander-content-wrapper .k-pager-input .k-pager-input-label {
    display: none !important;
    visibility: hidden !important;
}

/* White-button style for First/Prev/Next/Last nav buttons */
.k-expander-content-wrapper .k-grid-pager .white-button {
    background-color: white !important;
    border: 1px solid black !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-right: 5px;
}

/* Focus outlines for pager nav buttons */
.k-expander-content-wrapper .k-grid-pager .k-pager-first:focus,
.k-expander-content-wrapper .k-grid-pager .k-pager-first:focus-visible,
.k-expander-content-wrapper .k-grid-pager .k-pager-last:focus,
.k-expander-content-wrapper .k-grid-pager .k-pager-last:focus-visible,
.k-expander-content-wrapper .k-grid-pager .k-pager-nav:focus,
.k-expander-content-wrapper .k-grid-pager .k-pager-nav:focus-visible {
    outline: 4px solid #000 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000 !important;
    position: relative;
    z-index: 2;
}

/* Focus outlines for numeric page buttons */
.k-expander-content-wrapper .k-grid-pager .k-pager-numbers-wrap .k-button:focus,
.k-expander-content-wrapper .k-grid-pager .k-pager-numbers-wrap .k-button:focus-visible {
    outline: 4px solid #000 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000 !important;
    position: relative;
    z-index: 2;
}

/* ── Mobile pager adjustments (≤925px) ──────────────────────────── */
@media (max-width: 925px) {
    .k-expander-content-wrapper .k-grid-pager {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center;
        align-items: center;
        gap: 4px 6px;
        padding: 8px 14px;
        overflow: visible !important;
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }
    .k-expander-content-wrapper .k-grid-pager > * { min-width: 0; }
    .k-expander-content-wrapper .k-grid-pager .k-button,
    .k-expander-content-wrapper .k-pager-numbers-wrap .k-button {
        margin: 0 2px !important;
        padding: 2px 8px !important;
        min-width: 34px;
        line-height: 1.2;
        flex: 0 0 auto;
        box-sizing: border-box;
    }
    .k-expander-content-wrapper .k-pager-input {
        display: flex !important;
        align-items: center;
        gap: 4px;
        margin: 2px 4px;
        white-space: nowrap;
        min-width: 110px;
        width: auto;
        flex: 0 1 140px;
    }
    .k-expander-content-wrapper .k-pager-input input,
    .k-expander-content-wrapper .k-pager-input .k-input-inner,
    .k-expander-content-wrapper .k-pager-input .k-textbox {
        width: 36px !important;
        min-width: 28px !important;
        text-align: center;
        padding: 2px 2px !important;
        box-sizing: border-box;
    }
    .k-expander-content-wrapper .k-grid-pager .k-pager-numbers-wrap {
        flex: 1 1 100%;
        justify-content: center;
        min-width: 0;
    }
    .k-expander-content-wrapper .k-grid-pager .k-pager-info {
        flex: 1 1 100%;
        text-align: center;
        min-width: 0;
    }
    .k-expander-content-wrapper .k-grid-pager * {
        max-width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }
    /* Hide numeric page buttons on mobile */
    .k-expander-content-wrapper .k-pager-numbers {
        display: none !important;
    }
    /* Hide pager info on mobile */
    .k-expander-content-wrapper .k-pager-info {
        display: none !important;
    }
    .k-expander-content-wrapper .k-grid-pager .k-pager-first,
    .k-expander-content-wrapper .k-grid-pager .k-pager-prev {
        margin-left: 10px !important;
    }
    .k-expander-content-wrapper .k-grid-pager .k-pager-next,
    .k-expander-content-wrapper .k-grid-pager .k-pager-last {
        margin-right: 10px !important;
    }
}

/* Kendo detail rows (child grids) */
.k-expander-content-wrapper .k-grid .k-detail-cell {
    padding: 0 !important;
}

/* Detail rows must always be white — use tbody + class to beat the generic
   tr:nth-of-type striping specificity (0,3,3) with (0,3,3) + later source order. */
.k-expander-content-wrapper .k-grid tbody tr.k-detail-row > td {
    background-color: #fff !important;
}

/* ── Receipts / Expenditures — alternating light-blue rows ─────────── */
.table-striped-blue > tbody > tr:nth-of-type(even) > td,
.table-striped-blue > tbody > tr:nth-of-type(even) > th {
    background-color: #dbedf7;
}

/* Responsive: scale down Kendo Grid cells on small screens */
@media (max-width: 925px) {
    .k-expander-content-wrapper .k-grid td,
    .k-expander-content-wrapper .k-grid th {
        font-size: 0.9em;
        padding: 6px 4px;
    }
}

/* ── Grid total / summary row ───────────────────────────────────────── */
.rd-total-row td {
    font-weight: 700;
    background-color: #fff !important;
}

/* ── Shared report-grid styling used by ReportDetail and ReportSection ── */
/*
 * Bootstrap 5 applies table striping via a `box-shadow: inset 0 0 0 9999px <color>`
 * overlay driven by --bs-table-bg-type / --bs-table-accent-bg CSS variables, not via
 * background-color.  Kendo's Ocean Blue theme (applied to <body class="k-content">)
 * redefines --bs-table-accent-bg to a grey value, which makes even rows appear grey
 * even though background-color is set correctly with !important.
 * Resetting these variables at the table scope forces the inset box-shadow to resolve
 * to transparent so our explicit background-color rules take full effect.
 */
table.report-grid {
    --bs-table-striped-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-bg-state: initial;
    --bs-table-bg-type: initial;
}

table.report-grid > thead > tr > th,
table.report-grid thead > tr > th,
.table-striped.report-grid > thead > tr > th {
    background-color: #c4e2f7 !important;
    color: inherit;
    text-align: center !important;
}

table.report-grid > tbody > tr:nth-of-type(odd) > td,
table.report-grid > tbody > tr:nth-of-type(odd) > th,
table.report-grid tbody > tr:nth-of-type(odd) > td,
table.report-grid tbody > tr:nth-of-type(odd) > th,
.table-striped.report-grid > tbody > tr:nth-of-type(odd) > td,
.table-striped.report-grid > tbody > tr:nth-of-type(odd) > th {
    background-color: #ffffff !important;
}

table.report-grid > tbody > tr:nth-of-type(even) > td,
table.report-grid > tbody > tr:nth-of-type(even) > th,
table.report-grid tbody > tr:nth-of-type(even) > td,
table.report-grid tbody > tr:nth-of-type(even) > th,
.table-striped.report-grid > tbody > tr:nth-of-type(even) > td,
.table-striped.report-grid > tbody > tr:nth-of-type(even) > th {
    background-color: #dbedf7 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Responsive dual-column (desktop / mobile) for hierarchical grids.
   Each grid has its own breakpoint; child grids inherit parent's scope.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Common mobile-combined-col styling ─────────────────────────────── */
.k-grid td.mobile-combined-col,
.k-grid th.mobile-combined-col {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
}

.k-grid td.mobile-combined-col > div,
.k-grid td.mobile-combined-col strong {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    display: inline;
}

.k-grid td.mobile-combined-col > div {
    display: block;
}

/* Child detail wrappers */
.gns-detail-wrapper,
.loan-proceed-detail-wrapper,
.forgiven-loan-detail-wrapper,
.debt-to-detail-wrapper,
.debt-by-detail-wrapper {
    box-sizing: border-box;
    overflow: hidden;
}

/* ── Accounts: 925px breakpoint ─────────────────────────────────────── */
@media (min-width: 926px) {
    #gridAccounts table { table-layout: fixed !important; }
}
@media (max-width: 925px) {
    #gridAccounts table { table-layout: auto !important; }
}

/* ── Summary: 925px breakpoint ─────────────────────────────────────── */
@media (min-width: 926px) {
    #gridSummary table { table-layout: fixed !important; }
}
@media (max-width: 925px) {
    #gridSummary table { table-layout: auto !important; }
}

/* ── Receipts & Expenditures: 1380px breakpoint ───────────────────── */
/* Column visibility is handled by JS hideColumn/showColumn (rdApplyGridColumns).
   CSS here handles only layout adjustments for mobile mode. */
@media (min-width: 1381px) {
    #gridReceipts table,
    #gridExpenditures table { table-layout: fixed !important; }
}
@media (max-width: 1380px) {
    #gridReceipts table,
    #gridExpenditures table { table-layout: auto !important; }
    #gridReceipts .k-hierarchy-cell { width: 34px !important; }
    #gridReceipts td.mobile-combined-col { width: calc(100% - 34px) !important; }
    .gns-detail-wrapper { width: 100% !important; }
}

/* ── Loan Proceeds: 1110px breakpoint ──────────────────────────────── */
@media (min-width: 1111px) {
    #gridLoanProceeds table { table-layout: fixed !important; }
}
@media (max-width: 1110px) {
    #gridLoanProceeds table { table-layout: auto !important; }
    #gridLoanProceeds .k-hierarchy-cell { width: 34px !important; }
    #gridLoanProceeds td.mobile-combined-col { width: calc(100% - 34px) !important; }
    .loan-proceed-detail-wrapper { width: 100% !important; }
}

/* ── Loan Repayments: 1090px breakpoint ─────────────────────────────── */
@media (min-width: 1091px) {
    #gridLoanRepayments table { table-layout: fixed !important; }
}
@media (max-width: 1090px) {
    #gridLoanRepayments table { table-layout: auto !important; }
}

/* ── Outstanding Loans: 925px breakpoint ────────────────────────────── */
@media (min-width: 926px) {
    #gridOutstandingLoans table { table-layout: fixed !important; }
}
@media (max-width: 925px) {
    #gridOutstandingLoans table { table-layout: auto !important; }
}

/* ── Forgiven Loans: 1140px breakpoint ─────────────────────────────── */
@media (min-width: 1141px) {
    #gridForgivenLoans table { table-layout: fixed !important; }
}
@media (max-width: 1140px) {
    #gridForgivenLoans table { table-layout: auto !important; }
    #gridForgivenLoans .k-hierarchy-cell { width: 34px !important; }
    #gridForgivenLoans td.mobile-combined-col { width: calc(100% - 34px) !important; }
    .forgiven-loan-detail-wrapper { width: 100% !important; }
}

/* ── Debts To / Debts By: 1090px breakpoint ────────────────────────── */
@media (min-width: 1091px) {
    #gridDebtsTo table,
    #gridDebtsBy table { table-layout: fixed !important; }
}
@media (max-width: 1090px) {
    #gridDebtsTo table,
    #gridDebtsBy table { table-layout: auto !important; }
    #gridDebtsTo .k-hierarchy-cell,
    #gridDebtsBy .k-hierarchy-cell { width: 34px !important; }
    #gridDebtsTo td.mobile-combined-col,
    #gridDebtsBy td.mobile-combined-col { width: calc(100% - 34px) !important; }
    .debt-to-detail-wrapper,
    .debt-by-detail-wrapper { width: 100% !important; }
}

/* ── Hide grid column headers in mobile view ───────────────────────── */
/* The expansion panel header already provides section context,
   making the single mobile column header redundant. */
@media (max-width: 925px) {
    #gridAccounts .k-grid-header,
    #gridSummary .k-grid-header,
    #gridOutstandingLoans .k-grid-header { display: none !important; }
}
@media (max-width: 1090px) {
    #gridLoanRepayments .k-grid-header,
    #gridDebtsTo .k-grid-header,
    #gridDebtsBy .k-grid-header { display: none !important; }
}
@media (max-width: 1110px) {
    #gridLoanProceeds .k-grid-header { display: none !important; }
}
@media (max-width: 1140px) {
    #gridForgivenLoans .k-grid-header { display: none !important; }
}
@media (max-width: 1380px) {
    #gridReceipts .k-grid-header,
    #gridExpenditures .k-grid-header { display: none !important; }
}