/* Reports index and the individual report pages. */

#reports_index h4 {
    margin-bottom: 2px;
    margin-top: 10px;
}

#reports_index .reportType {
    padding-left: 15px;
}

#reports_accountsworkedbyday #AccountsWorkedByDay_Grid th, #reports_accountsworkedbyday #AccountsWorkedByDay_Grid td
, #reports_activity #Activity_Grid th, #reports_activity #Activity_Grid td
, #reports_workload #WorkLoad_Grid th, #reports_workload #WorkLoad_Grid td {
    text-align: right !important;
}

.collector-trend-page .dashboard-filters {
    padding: 0 16px;
}

#freshnessWarning {
    margin: 16px;
} 
/* Collector Trend's filter rows are dashboard-filters--fit (site/components.css). */

/* Strategy / Week / Rank by / Reason have a label and a widget directly in the column, with no card, so
   the column stacks them itself; in a row the pickers stretched to ~115px tall. */
.collector-trend-page .dashboard-filters > div[class*="col-"] {
    flex-direction: column;
}

    /* Pickers sit at the bottom of their column so they line up whatever their label's height (the
       Reason label carries a button). Direct child only, so a picker inside a card is unaffected. */
    .collector-trend-page .dashboard-filters > div[class*="col-"] > .k-picker {
        margin-top: auto;
    }

    .collector-worklist-page .dashboard-filters .k-multiselect,
    .collector-worklist-page .dashboard-filters .k-input,
    .collector-worklist-page .dashboard-filters .k-picker {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Known gap: the "What do these mean?" button inside the Reason label squeezes at small widths.
       flex-wrap on the label separates its icon from its text; the fix is moving the button out. */

    /* The chip list is the part that actually grows - TagMode.Single keeps it to one chip, but a single long
       strategy name still has to be allowed to truncate rather than widen its container. */
    .collector-worklist-page .dashboard-filters .k-input-values,
    .collector-worklist-page .dashboard-filters .k-chip-list,
    .collector-worklist-page .dashboard-filters .k-input-inner {
        min-width: 0;
        max-width: 100%;
    }


/*#####                         #####*/
/*#####        Reports          #####*/
/*#####                         #####*/

/*#####          Reports            #####*/
/*#####   Accounts Worked By Day    #####*/
.accounts-worked-by-day-page {
    max-width: 1500px;
    margin: 0 auto;
    padding: 24px;
}

    .accounts-worked-by-day-page .section-card-actions {
        display: flex;
        gap: 10px;
        margin-bottom: 1rem;
    }

/*#####        Reports          #####*/
/*#####     Account Aging       #####*/

.account-aging-page {
    max-width: 2800px;
    margin: 0 auto;
    padding: 24px;
}

/*#####         Reports           #####*/
/*#####    Accounts Not Worked    #####*/

.accounts-not-worked-page {
    max-width: 1900px;
    margin: 0 auto;
    padding: 24px;
}

    .accounts-not-worked-page .section-card-actions {
        display: flex;
        gap: 10px;
        margin-bottom: 1rem;
    }

/* 24px of page padding plus 1.5rem of section padding is 96px of chrome on each row - a quarter of a
   375px phone. Reclaimed below the md breakpoint, where the cards are stacked one per row and every pixel
   of it is going to a card that is already as narrow as its content allows. */
@media (max-width: 767.98px) {
    .accounts-not-worked-page {
        padding: 12px;
    }
}


/*#####          Reports            #####*/
/*#####  Accounts Stalled in Step   #####*/

/* The sibling of Accounts Not Worked: the same page chrome, kept as its own block. */
.accounts-stalled-in-step-page {
    max-width: 3380px;
    margin: 0 auto;
    padding: 24px;
}

    .accounts-stalled-in-step-page .section-card-actions {
        display: flex;
        gap: 10px;
        margin-bottom: 1rem;
    }

@media (max-width: 767.98px) {
    .accounts-stalled-in-step-page {
        padding: 12px;
    }
}


/*#####        Reports          #####*/
/*#####        Activity         #####*/

.activity-report-page {
    max-width: 2800px;
    margin: 0 auto;
    padding: 24px;
}

.activity-report-page .section-card-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}

    .activity-report-page .section-card {
        margin-bottom: 20px;
    }

    .activity-report-page .section-card-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .activity-report-page .k-grid-header .k-grid-header-sticky,
        .activity-report-page .k-master-row .k-grid-content-sticky {
            border-color: inherit !important;
        }

        .activity-report-page #Activity_Grid td:last-child,
        .activity-report-page #Activity_Grid th:last-child {
            font-weight: 600;
        }


/*#####             Reports               #####*/
/*#####    Open Transactions By Office    #####*/

/* Wide: the grid carries five aging buckets plus three share columns. Matches the other wide reports
   (Account Aging, Activity) rather than the narrow 900px ones. */
.open-transactions-by-office-page {
    max-width: 2100px;
    margin: 0 auto;
    padding: 24px;
}

    .open-transactions-by-office-page .section-card {
        margin-bottom: 20px;
    }

#officeNotices {
    padding: 0 1rem;
}

/*#####             Reports               #####*/
/*#####    Collection Territory Funds     #####*/

.territory-funds-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

.territory-funds-page tfoot td {
    text-align: right !important;
}

    .territory-funds-page .section-card {
        margin-bottom: 20px;
    }

.territory-funds-page .section-card-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}

    .territory-funds-page #TerritoryFunds_Grid .k-grid-footer {
        font-weight: 600;
    }


/*#####        Reports          #####*/
/*#####     Collector Calls      #####*/

.collector-calls-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
}

.collector-calls-page .section-card-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}



/*#####        Reports          #####*/
/*#####     Collector Funds      #####*/

.collector-funds-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 24px;
}

.collector-funds-page .section-card-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}


/*#####        Reports          #####*/
/*#####     Collector Worklist      #####*/

.collector-worklist-page {
    max-width: 1800px;
    margin: 0 auto;
    padding: 24px;
}

/*#####        Reports          #####*/
/*#####        Dynamic          #####*/

.dynamic-reports-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}

    .dynamic-reports-page .k-searchbox {
        min-width: 200px;
    }

/*#####        Reports          #####*/
/*#####         Index           #####*/

.reports-page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px;
}

.reports-page .section-card-header{
    padding: .9rem;
}

.report-category {
    padding: 1rem;
}

.report-category-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.25rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--jas-text, #343a40);
}

.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1rem;
}

.report-tile {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .9rem;
    padding-top: 1.5rem;
    text-decoration: none;
    color: inherit;
    background: var(--jas-bg, #ffffff);
    border: 1px solid var(--jas-divider, #e9ecef);
    border-radius: 16px;
    transition: all .1s ease;
    position: relative;
}

    .report-tile:hover {
        text-decoration: none;
        color: inherit;
        
        border-color: rgba(13,202,240,.35);
        box-shadow: 0 10px 24px rgba(0,0,0,.02);
    }

    .report-tile i {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        border-radius: 14px;
        background: rgba(13,202,240,.12);
        color: var(--jas-accent, #16C4F6);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
    }

.report-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--jas-text, #212529);
    margin-bottom: .25rem;
}

.report-tile:active {
    transform: translateY(0);
}

.reports-header-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 20px;
}

.reports-header-left {
    flex: 1 1 300px;
    min-width: 300px;
}

.reports-help-box {
    flex: 1 1 300px; /* or 0 1 300px if you don't want it growing */
    min-width: 300px;
    max-width: 850px;
    background: var(--jas-bg-subtle, #f8fafc);
    border: 1px solid var(--jas-divider, #e2e8f0);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.reports-help-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--jas-text, #1f2937);
}

.reports-help-text {
    font-size: 13px;
    color: var(--jas-text, #36393b);
    margin-bottom: 10px;
    line-height: 1.4;
}

@media (max-width: 991.98px) {

    .reports-page {
        padding: 16px;
    }

    .report-category {
        padding: 1.25rem;
    }
}

@media (max-width: 767.98px) {

    .report-grid {
        grid-template-columns: 1fr;
    }

    .report-category-title {
        font-size: 1.3rem;
    }
}


/*#####        Reports          #####*/
/*#####        Workload         #####*/
.collector-workload-page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px;
}

.collector-workload-page .section-card-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}

/* The "this report is a preview" banner sat above .section-card on not-yet-production reports (see
   Reports/Index's nav-preview-badge tiles). A modifier on .section-card rather than a one-off block, so it
   still gets the rounded corners and spacing - just a light, transparent blue instead of white and no
   shadow, so it reads as a notice rather than another content card. */
.report-preview-notice {
    background: rgba(13, 202, 240, .08);
    border: 1px solid rgba(13, 202, 240, .25);
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1.25rem;
    color: var(--jas-primary, #0b6377);
    font-size: .9rem;
}

    .report-preview-notice i {
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    /* Pins the same badge to a report tile's top-right corner instead of flowing inline with text -
       .report-tile establishes the positioning context. */
    .report-tile .nav-preview-badge {
        position: absolute;
        top: .6rem;
        right: .6rem;
        font-size: .72rem;
    }