/* Admin pages: territories, collection types, imports, dispute codes, employees, app settings, feature
   flags, sales groups, teams. */

#admin_collectionterritories .k-listbox {
    width: 100%;
}

#admin_disputecodes .k-listbox {
    width: 100%;
}

#admin_specialcarriers .k-listbox {
    width: 100%;
}



/*#####                         #####*/
/*#####         Admin           #####*/
/*#####                         #####*/

/*#####          Admin             #####*/
/*#####   Collection Territories   #####*/

.territories-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 24px;
}

.territories-grid-section {
    padding: 1.5rem;
}

.territories-edit-section {
    padding: 1.5rem;
}

.territories-toolbar {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.territories-users-panel {
    background: var(--jas-bg-subtle, #fafbfc);
    border: 1px solid var(--jas-divider, #e9ecef);
    border-radius: 16px;
    padding: 1.5rem;
}

.territories-list-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--jas-text, #111827);
    margin-bottom: .75rem;
}

.territories-users-panel .k-listbox {
    width: 100%;
}

.territories-users-panel .k-listbox-toolbar {
    background: white;
    border-left: none;
}

.territories-users-panel .k-button {
    border-radius: 10px;
}

#editCollectionTerritory .form-control {
    border-radius: 12px;
}

#editCollectionTerritory .form-label {
    font-weight: 600;
    margin-bottom: .35rem;
}

@media (max-width: 767.98px) {

    .territories-toolbar {
        flex-direction: column;
    }

        .territories-toolbar .jas-btn {
            width: 100%;
        }
}


/*#####         Admin           #####*/
/*#####    Collection Types     #####*/

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

.collection-types-toolbar {
    display: flex;
    gap: .75rem;
    margin-bottom: 1rem;
}

.collection-types-edit-card {
    margin-top: 1.5rem;
}

.collection-types-edit-section {
    padding: 1.5rem;
}

    .collection-types-edit-section .form-control {
        border-radius: 12px;
    }

@media (max-width: 767.98px) {

    .collection-types-page {
        padding: 16px;
    }

    .collection-types-toolbar {
        flex-direction: column;
    }

        .collection-types-toolbar .jas-btn {
            width: 100%;
        }
}

/*#####          Admin            #####*/
/*#####       CreateTenant        #####*/

.createTenant-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px;
}
.setup-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.setup-check-item {
    display: flex;
    align-items: center;
    padding: .75rem 1rem;
    background: var(--jas-bg-subtle, #f8fafc);
    border: 1px solid var(--jas-border, #e5e7eb);
    border-radius: 10px;
}

    .setup-check-item input[type="checkbox"] {
        transform: scale(1.15);
    }


/*#####         Admin           #####*/
/*#####       DataImport        #####*/

.imports-page {
    max-width: 740px;
    margin: 0 auto;
    padding: 24px;
}

.imports-page.imports-page-wide {
    max-width: 1200px;
}

.import-section {
    padding: 1.5rem;
}

.import-upload-card {
    border: 2px dashed var(--jas-divider, #d9e3ea);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: var(--jas-bg-subtle, #fafbfc);
    transition: .2s ease;
}

    .import-upload-card:hover {
        border-color: var(--jas-accent, #16C4F6);
        background: var(--jas-surface-muted, #fcfeff);
    }

.import-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--jas-text, #212529);
    margin-bottom: .35rem;
}

.import-file-row {
    display: flex;
    gap: .75rem;
    align-items: center;
}

    .import-file-row .form-control {
        flex: 1;
    }

    .import-file-row .btn {
        min-width: 120px;
    }

.history-section {
    margin-top: .5rem;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

input[type="file"].form-control {
    padding: .65rem;
    border-radius: 12px;
    border-color: var(--jas-border, #dbe2e8);
}

    input[type="file"].form-control:hover {
        border-color: var(--jas-border, #b9c7d3);
    }

#ImportHistory_Grid th:nth-child(1), #ImportHistory_Grid td:nth-child(1) {
    text-align: right;
}

#ImportHistory_Grid th:nth-child(4), #ImportHistory_Grid td:nth-child(4) {
    text-align: center
}

@media (max-width: 767.98px) {

    .import-file-row {
        flex-direction: column;
        align-items: stretch;
    }

        .import-file-row .btn {
            width: 100%;
        }
}


/*#####         Admin           #####*/
/*#####      Dispute Codes      #####*/

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

.dispute-toolbar {
    display: flex;
    gap: .75rem;
    margin-bottom: 1rem;
}

.dispute-edit-card {
    margin-top: 1.5rem;
}

.dispute-edit-section {
    padding: 1.5rem;
}

.dispute-listbox-card {
    border: 1px solid var(--jas-divider, #e9ecef);
    border-radius: 18px;
    background: var(--jas-bg-subtle, #fafbfc);
    padding: 1rem;
}

.dispute-listbox-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--jas-text, #212529);
}

.dispute-listbox-card .k-listbox {
    width: 100%;
    min-height: 340px;
}

.dispute-edit-section .form-control {
    border-radius: 12px;
}

.dispute-edit-section hr {
    opacity: .1;
}

@media (max-width: 767.98px) {

    .dispute-page {
        padding: 16px;
    }

    .dispute-toolbar {
        flex-direction: column;
    }
}

.dispute-code-map-page {
    max-width: 1800px;
    margin: 0 auto;
    padding: 24px;
}


/*#####         Admin           #####*/
/*#####       Employees         #####*/
.employees-page {
    max-width: 2000px;
    margin: 0 auto;
    padding: 24px;
}

#admin_employees .dashboard-filter-card {
    min-height: 140px;
}

    #admin_employees .dashboard-filter-card .form-text {
        color: var(--jas-text, #495057);
        line-height: 1.5;
    }

#admin_employees .history-header {
    margin-bottom: 1rem;
}

#admin_employees .k-grid-jas {
    margin-top: .5rem;
}

#admin_employees #employeeName {
    color: var(--jas-text, #26292d);
}

.employee-section {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.employee-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: var(--jas-text, #000);
    margin-bottom: .5rem;
    font-size: 1.1rem;
}

    .employee-label a {
        margin: .2rem .2rem .2rem .5rem;
        color: var(--jas-accent, #16C4F6) !important;
        font-size: 12px;
    }

        .employee-label a:hover {
            color: var(--jas-accent, #10bcde) !important;
            transform: translateY(-1px) !important;
        }

.employee-detail-link {
    text-decoration: none;
    font-weight: 600;
}

    .employee-detail-link:hover {
        color: var(--jas-accent, #10bcde);
    }

#editEmployeeForm .form-control {
    border-radius: 12px;
    border: 1px solid var(--jas-divider, #dbe2e8);
    padding: .7rem .9rem;
}

    #editEmployeeForm .form-control:focus {
        border-color: var(--jas-accent, #16C4F6);
        box-shadow: 0 0 0 4px rgba(13,202,240,.12);
    }

#editEmployeeForm .form-check-input {
    width: 2.8rem;
    height: 1.4rem;
}

    #editEmployeeForm .form-check-input:checked {
        background-color: var(--jas-accent, #16C4F6);
        border-color: var(--jas-accent, #16C4F6);
    }


/*#####         Admin           #####*/
/*#####      OverrideCodes      #####*/

.override-codes-page {
    max-width: 2200px;
    margin: 0 auto;
    padding: 24px;
}

.login-history-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

@media (max-width: 767.98px) {
    .login-history-header {
        flex-direction: column;
    }
}

/*#####         Admin           #####*/
/*#####      App Settings       #####*/

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

.app-settings-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.app-setting-key {
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    word-break: break-all;
}

/* Values are configuration, not prose: a monospace cell is what makes a transposed character in a URL or a
   trailing space visible at all. */
.app-setting-value,
.app-setting-masked {
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
}

.app-setting-value {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.app-setting-masked {
    letter-spacing: 1px;
    color: var(--jas-text-muted, #6b7280);
}

/* A revealed secret is deliberately conspicuous - it is the one thing on this screen that should not be
   left sitting on somebody's second monitor. */
.app-setting-revealed {
    color: var(--jas-text, #111827);
    letter-spacing: normal;
    background: var(--jas-emphasis-bg, #fff4e5);
    padding: 1px 4px;
    border-radius: 4px;
    word-break: break-all;
}

.app-setting-length,
.app-setting-updated-by {
    color: var(--jas-text-muted, #6b7280);
    font-size: 11px;
    margin-left: 6px;
}

.app-setting-updated-by,
.app-setting-last-read {
    display: block;
    margin-left: 0;
    color: var(--jas-text-muted, #6b7280);
    font-size: 11px;
}

.app-setting-reads {
    font-variant-numeric: tabular-nums;
}

/* The row this column exists to surface: a setting nothing reads is the one that can be deleted safely.
   Amber rather than red — it is a candidate to look at, not a fault. */
.app-setting-unread {
    color: var(--jas-emphasis-text, #92400e);
    background: var(--jas-emphasis-bg, #fff4e5);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600;
}

.app-setting-empty {
    color: var(--jas-text-muted, #9ca3af);
    font-style: italic;
    font-size: 12px;
}

.app-setting-badge {
    display: inline-block;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}

.app-setting-badge-secret {
    background: #fde2e4;
    color: #9f1239;
}

.app-setting-badge-startup {
    background: var(--jas-border, #e5e7eb);
    color: var(--jas-text, #374151);
}

/* Key Vault. Blue rather than the `secret` badge's red: it is where the value lives, not a warning —
   a vault-backed row is the GOOD state, and colouring it like a fault inverts the whole point. */
.app-setting-badge-vault {
    background: #dbeafe;
    color: #1e40af;
}

/* The one badge on this screen that IS a fault, and the only one that shouts. A setting whose reference
   does not resolve is present and unreadable, so whatever reads it is throwing right now. */
.app-setting-badge-problem {
    background: #9f1239;
    color: #fff;
}

/* Same font stack as .app-setting-value/.app-setting-masked beside it, spelled out rather than via a
   variable: --jas-font-mono is not defined in this stylesheet, so referencing it would silently fall back
   to the default and print a vault secret name in the body font next to monospace neighbours. */
.app-setting-vault-ref {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    color: var(--jas-text, #374151);
    word-break: break-all;
}

/* --jas-danger-text, NOT the badge's hardcoded #9f1239. The badge gets away with a fixed colour because it
   sets a dark background under it; this is bare text on the grid, and dark crimson on the dark palette is
   under 3:1 - so the one message on this screen worth acting on immediately was the least readable thing on
   it. The token is already redefined for [data-bs-theme="dark"] (#ff9b9b). */
.app-setting-vault-problem {
    display: block;
    margin-top: 2px;
    color: var(--jas-danger-text, #8c1d1d);
    font-size: 11px;
}

.app-setting-edit-card {
    max-width: 900px;
}

.app-setting-value-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.app-setting-value-input {
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
}

/* Delete sits at the far end from Save rather than beside it. The two are one click apart otherwise, and
   only one of them is recoverable. */
.app-setting-edit-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}

@media (max-width: 767.98px) {
    .app-settings-page {
        padding: 12px;
    }

    /* Stacked, so Delete cannot end up under a thumb reaching for Save on a narrow screen. */
    .app-setting-edit-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

/*#####      Feature Flags      #####*/

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

/* The matrix scrolls sideways in here rather than widening the page. -webkit-overflow-scrolling keeps the
   momentum flick on iOS, which a plain overflow-x container loses. */
.feature-flag-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

    .feature-flag-scroll::-webkit-scrollbar {
        height: 8px;
    }

    .feature-flag-scroll::-webkit-scrollbar-thumb {
        background: var(--jas-border, #d0d7de);
        border-radius: 20px;
    }

.feature-flag-matrix {
    margin-bottom: 0;
    /* Stops the four feature columns being squeezed to nothing instead of scrolling - without a floor the
       table shrinks to the viewport and the switches end up stacked under wrapped headings. */
    min-width: 720px;
}

    /* The switch column headers carry a description and a link, so they need real width - without this the
       tenant column takes most of the table and the feature columns wrap to one word per line. */
    .feature-flag-matrix .feature-flag-feature-col {
        width: 210px;
        vertical-align: top;
    }

    /* Pinned while the feature columns scroll past, so a switch is never anonymous - on a phone the tenant
       name would otherwise be off-screen exactly when you are deciding whether to tick something for it.
       Needs an opaque background of its own: the table is not striped, so without one the scrolling cells
       show straight through it. */
    .feature-flag-matrix .feature-flag-tenant-col {
        vertical-align: top;
        min-width: 260px;
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: var(--jas-bg, #ffffff);
    }

    .feature-flag-matrix .feature-flag-audience-row .feature-flag-tenant-col {
        background-color: var(--jas-bg-subtle, #f5f7fa);
    }

    .feature-flag-matrix tbody .feature-flag-feature-col {
        text-align: center;
    }

        /* form-switch indents for its label; these switches have none, so centre the control itself. */
        .feature-flag-matrix tbody .feature-flag-feature-col .form-check {
            display: inline-block;
            padding-left: 0;
            min-height: auto;
            margin-bottom: 0;
        }

        .feature-flag-matrix tbody .feature-flag-feature-col .form-check-input {
            margin-left: 0;
            float: none;
        }

.feature-flag-feature-name {
    font-weight: 600;
}

.feature-flag-feature-link {
    font-size: .75rem;
    word-break: break-all;
}

.feature-flag-tenant-name {
    display: block;
    font-weight: 600;
}

/* The two audience rows - All Tenants and Global Admins - read as part of the header rather than as the
   first two tenants. Without the tint they sit flush against the tenant list and a click meant for one
   tenant lands on "everybody". */
.feature-flag-audience-row th {
    background-color: var(--jas-bg-subtle, #f5f7fa);
}

/* Separates the last audience row from the tenants below it, so the two kinds of row are not one list. */
.feature-flag-audience-row:last-child th {
    border-bottom: 2px solid var(--jas-divider, #d0d7de);
}

.feature-flag-matrix .form-check-input:checked {
    background-color: var(--jas-accent, #16C4F6);
    border-color: var(--jas-accent, #16C4F6);
}

/* A switch that cannot be changed while the feature is on for All Tenants - readable, but clearly inert. */
.feature-flag-matrix .form-check-input:disabled {
    opacity: .55;
}

@media (max-width: 767.98px) {
    /* 24px each side is most of a phone's width. Reclaim it for the matrix, which needs every pixel. */
    .feature-flags-page {
        padding: 12px;
    }

    /* The tenant column is the one that has to give: the feature columns are switch-width already. */
    .feature-flag-matrix .feature-flag-tenant-col {
        min-width: 180px;
    }

    .feature-flag-matrix .feature-flag-feature-col {
        width: 160px;
    }

    /* The per-feature URL is a convenience on a desktop and a wrapping nuisance on a phone. */
    .feature-flag-feature-link {
        display: none;
    }
}

/*#####         Admin           #####*/
/*#####   Sales Office Notes    #####*/

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


/*#####         Admin           #####*/
/*#####      Sales Groups       #####*/

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

.sales-groups-toolbar {
    display: flex;
    gap: .75rem;
    margin-bottom: 1rem;
}

.sales-groups-edit-card {
    margin-top: 1.5rem;
}

.sales-groups-edit-section {
    padding: 1.5rem;
}

    .sales-groups-edit-section .form-control {
        border-radius: 12px;
    }

.sales-groups-listbox-card {
    border: 1px solid var(--jas-divider, #e9ecef);
    background: var(--jas-bg-subtle, #fafbfc);
    border-radius: 18px;
    padding: 1rem;
}

.sales-groups-listbox-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--jas-text, #212529);
}

.sales-groups-listbox-card .k-listbox {
    width: 100%;
    min-height: 340px;
}

.sales-groups-edit-section hr {
    opacity: .1;
}

@media (max-width: 767.98px) {

    .sales-groups-page {
        padding: 16px;
    }

    .sales-groups-toolbar {
        flex-direction: column;
    }

        .sales-groups-toolbar .jas-btn {
            width: 100%;
        }
}


/*#####         Admin           #####*/
/*#####     SpecialCarriers     #####*/

.special-carriers-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px;
}


/*#####         Admin           #####*/
/*#####      Staff Emails       #####*/

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


/*#####         Admin           #####*/
/*#####         Teams           #####*/

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

.teams-section {
    padding: 1.5rem;
}

.teams-edit-section {
    padding: 1.5rem;
}

.teams-toolbar {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.teams-members-section {
    background: var(--jas-bg-subtle, #fafbfc);
    border: 1px solid var(--jas-divider, #e9ecef);
    border-radius: 16px;
    padding: 1.5rem;
}

.listbox-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--jas-text, #111827);
    margin-bottom: .75rem;
}

.teams-members-section .k-listbox {
    width: 100%;
}

.teams-members-section .k-listbox-toolbar {
    background: var(--jas-bg, #fff);
    border-left: none;
}

#editTeam .form-control {
    border-radius: 12px;
}