/* Radio System's sidebar/workspace arrangement, using the existing TRCF palette. */
.member-sort-control { max-width: 240px; }
.member-sort-control[hidden] { display: none; }
.app-shell {
    display: flex;
    min-height: 100dvh;
    max-width: none;
    margin: 0;
}

.sidebar {
    width: 224px;
    flex: none;
    position: sticky;
    top: 0;
    height: 100dvh;
    padding: 0;
    z-index: 40;
    background: #edf3f4;
}

.sidebar-brand { position: relative; height: 80px; background: #102f39; }
.sidebar .brand { height: 80px; padding: 0 20px; gap: 12px; font-size: 16px; }
.sidebar .brand-mark { width: 36px; height: 36px; flex: none; border-radius: 10px; }
.brand-name { min-width: 0; }
.sidebar .brand small { font-size: 11px; margin-top: 3px; }
.side-navigation { position: static; display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; height: calc(100% - 80px); min-height: 0; overflow-y: auto; padding: 26px 14px 18px; gap: 0; }
.primary-navigation { display: grid; gap: 4px; }
.nav-caption { margin: 0 12px 10px; color: #607b83; font-size: 10px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.side-link { gap: 12px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; }
.side-link > span { display: grid; place-items: center; width: 30px; height: 30px; flex: none; }
.side-link.selected { border-color: #b7d9c8; }
.settings-navigation { margin: auto 0 0; padding-top: 24px; }

.app-content { flex: 1; min-width: 0; }
.workspace-header { height: 80px; flex: none; padding: 0 36px; gap: 20px; flex-wrap: nowrap; border-bottom: 1px solid #dce5e8; }
.header-location { display: flex; align-items: center; gap: 16px; min-width: 0; }
.header-breadcrumb { display: flex; align-items: center; gap: 16px; color: #c8dde0; font-size: 13px; }
.header-breadcrumb a { color: #fff; text-decoration: none; font-weight: 650; }
.header-controls { flex: none; gap: 20px; }
.logout-form { margin: 0; }
.logout-form button { padding: .55rem .8rem; font: inherit; font-size: .8rem; color: #fff; background: #173f4c; border: 1px solid #6c999e; border-radius: 7px; cursor: pointer; }
.login-page { min-height: 100dvh; }
.login-header { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #102f39; padding: 1rem 2rem; color: #fff; }
.login-header .brand { gap: .8rem; }
.login-header .brand small { display: block; font-size: .7rem; color: #c8dde0; }
.login-content { display: grid; place-items: start center; padding: clamp(2rem, 8vh, 6rem) 1rem; }
.login-panel { width: min(100%, 460px); padding: 2rem; }
.login-panel h1 { margin: .5rem 0 1rem; }
.login-form label { display: block; color: #526c75; font-size: .85rem; margin-top: 1.2rem; }
.login-form input:not([type="hidden"]) { display: block; width: 100%; font: inherit; border: 1px solid #b8cbd1; border-radius: 7px; background: #fcfefe; padding: .8rem; margin-top: .4rem; }
.login-form button { display: block; width: 100%; margin-top: 1.5rem; padding: .85rem; border: 0; border-radius: 7px; font: inherit; background: #106c72; color: white; cursor: pointer; }
@media (max-width: 550px) { .login-header { flex-wrap: wrap; padding: 1rem; } .login-header .language-form { margin-left: auto; } .login-panel { padding: 1.5rem; } .header-controls { gap: .5rem; } .logout-form button { padding: .5rem; } }
.app-content main { max-width: none; width: 100%; margin: 0; padding: 38px 36px 56px; }
.app-content footer { max-width: none; width: 100%; min-height: 3rem; margin: 0; padding: 12px 36px 18px; line-height: 18px; }
.app-content main:has([data-list-scroll]) { padding-bottom: 0; }

/* Scroll the page introduction away, then keep list tools and column headings together. */
[data-list-scroll] { display: flex; flex-direction: column; position: sticky; top: 0; height: calc(100dvh - 3rem); min-height: 22rem; margin-bottom: 0; }
[data-list-scroll] > :is(.member-tabs, .search-form, .list-heading, .fee-type-legend, .fee-family-help, .fee-notice) { flex: none; }
[data-list-scroll] > .table-scroll { flex: 1; min-height: 0; max-height: none; }
[data-list-scroll] > form:not([data-live-search]) { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; }
[data-list-scroll] > form:not([data-live-search]) > .table-scroll { flex: 1; min-height: 0; max-height: none; }
[data-list-scroll] th { position: sticky; top: 0; z-index: 2; }
[data-list-scroll] .table-scroll { scrollbar-gutter: stable; }
.member-history-table th.history-number, .member-history-table th.history-name { z-index: 3; }

.menu-toggle, .menu-close, .sidebar-backdrop { display: none; }
.menu-toggle, .menu-close { align-items: center; justify-content: center; width: 36px; height: 36px; padding: 7px; border: 1px solid #6c999e; border-radius: 8px; color: #fff; background: #173f4c; cursor: pointer; }
.menu-toggle svg, .menu-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sidebar-backdrop[hidden] { display: none; }

@media (max-width: 1000px) {
    .sidebar { width: 200px; }
    .sidebar .brand { padding: 0 14px; gap: 9px; font-size: 15px; }
    .workspace-header { padding: 0 24px; }
    .app-content main { padding: 28px 24px; }
    .app-content footer { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 760px) {
    .app-shell { display: block; }
    .sidebar { position: static; width: 100%; height: auto; border: 0; }
    .side-navigation { height: auto; padding: 16px 14px; }
    .settings-navigation { padding-top: 16px; margin: 0; }
    .layout-enhanced .sidebar { position: fixed; left: 0; top: 0; width: 240px; height: 100dvh; transform: translateX(-100%); visibility: hidden; transition: transform .18s ease, visibility .18s; border-right: 1px solid #dce5e8; }
    .layout-enhanced .side-navigation { height: calc(100% - 80px); }
    .layout-enhanced .settings-navigation { margin-top: auto; padding-top: 24px; }
    .layout-enhanced .menu-open .sidebar { transform: translateX(0); visibility: visible; }
    .layout-enhanced .menu-toggle, .layout-enhanced .menu-close { display: inline-flex; }
    .sidebar .brand { padding: 0 44px 0 14px; font-size: 15px; }
    .menu-close { position: absolute; right: 8px; top: 22px; width: 30px; }
    .sidebar-backdrop { position: fixed; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: #102f3966; z-index: 39; }
    .layout-enhanced .menu-open .sidebar-backdrop:not([hidden]) { display: block; }
    body.navigation-open { overflow: hidden; }
    .workspace-header { height: 72px; padding: 0 18px; gap: 12px; }
    .header-breadcrumb { display: none; }
    .header-controls { margin-left: auto; gap: 8px; }
    .app-content main { padding: 24px 18px 40px; }
    .app-content footer { padding-left: 18px; padding-right: 18px; }
}

/* Short windows need room for all filters before the row viewport. */
@media (max-height: 600px) {
    [data-list-scroll] { position: relative; height: auto; min-height: 0; }
    [data-list-scroll] > .table-scroll, [data-list-scroll] > form:not([data-live-search]) > .table-scroll { flex: none; max-height: 65dvh; }
    [data-list-scroll] > form:not([data-live-search]) { flex: none; }
}

@media (prefers-reduced-motion: reduce) { .layout-enhanced .sidebar { transition: none; } }

.settings-subnavigation { margin: .25rem 0 .5rem 1rem; border-left: 1px solid var(--border, #d5e2e6); padding-left: .4rem; }
.settings-subnavigation .side-link { font-size: .85rem; min-height: 2.5rem; padding: .6rem .75rem; }
.settings-toggle { cursor: pointer; list-style: none; user-select: none; }
.settings-toggle::-webkit-details-marker { display: none; }
.settings-toggle:focus-visible { outline: 3px solid #dc981c; outline-offset: 3px; }
.settings-chevron { width: 16px; height: 16px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.7; }
.settings-navigation[open] .settings-chevron { transform: rotate(90deg); }
.communications-navigation[open] .settings-chevron { transform: rotate(90deg); }
.email-workspace { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.5fr); gap: 1.25rem; align-items: start; }
.email-compose { padding: 1.3rem; }
.email-compose h2, .email-recipient-heading h2 { margin-top: 0; }
.email-compose label, .email-recipient-filters label { display: block; color: #526c75; font-size: .8rem; }
.email-compose > label { margin-top: 1.1rem; }
.email-workspace input:not([type="checkbox"]), .email-workspace select, .email-workspace textarea { display: block; width: 100%; font: inherit; color: #192c36; border: 1px solid #b8cbd1; border-radius: 7px; padding: .7rem .8rem; margin-top: .3rem; background: #fcfefe; }
.email-workspace textarea { resize: vertical; min-height: 240px; line-height: 1.6; }
.email-workspace input[type="checkbox"] { accent-color: #106c72; width: 17px; height: 17px; }
.email-template-controls { display: flex; gap: .65rem; align-items: end; margin-bottom: .6rem; }
.email-template-controls label { flex: 1; }
.email-workspace button.secondary { background: #edf5f4; color: #106c72; border: 1px solid #c9d8dd; padding: .6rem .8rem; }
.email-workspace button:disabled { opacity: .5; cursor: default; }
.email-review { margin-top: 1.5rem; border-top: 1px solid #d5e2e6; padding-top: .5rem; }
.email-review p, .email-compose > small { font-size: .82rem; }
.email-selected-list { max-height: 160px; overflow: auto; padding-left: 1.2rem; font-size: .8rem; overflow-wrap: anywhere; }
.email-recipient-heading { padding: 1.3rem 1.3rem 0; }
.email-recipient-heading span { font-size: .8rem; }
.email-recipient-filters { padding: 1rem 1.3rem; display: grid; grid-template-columns: minmax(130px, 2fr) minmax(130px, 1fr); gap: .75rem; }
.email-recipient-filters .checkbox { display: flex; align-items: center; gap: .5rem; grid-column: 1 / -1; }
.email-payment-help { grid-column: 1 / -1; font-size: .75rem; }
.email-workspace button[type="submit"] { background: #106c72; color: #fff; padding: .75rem 1rem; border: 0; border-radius: 7px; font: inherit; cursor: pointer; }
.email-recipient-table th[data-email-payment-heading] { right: 0; z-index: 2; }
.email-recipient-table td[data-email-payment-label] { position: sticky; right: 0; min-width: 135px; background: #fff; box-shadow: -3px 0 5px -4px #526c75; }
.email-template-editor { max-width: 950px; }
.email-template-editor .panel { margin-bottom: 1.25rem; }
.email-template-editor label { display: block; margin: 1rem 0; }
.email-template-editor textarea { width: 100%; resize: vertical; font: inherit; padding: .7rem; border: 1px solid #b8cbd1; border-radius: 7px; }
.email-selection-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: 0 1.3rem 1rem; font-size: .8rem; }
.email-recipient-scroll { max-height: 75vh; }
.email-recipient-table th { position: sticky; top: 0; background: #f6f9fa; z-index: 1; }
.email-recipient-table th button { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-transform: inherit; display: flex; align-items: center; gap: 1rem; }
.email-recipient-table td { padding: .75rem .8rem; }
.email-recipient-table td:not(:first-child) { white-space: normal; min-width: 130px; }
.email-recipient-table td.number { min-width: 55px; }
.email-recipient-table tr[hidden], .email-workspace [hidden] { display: none; }
.email-unavailable { display: block; color: #8a5d2e; font-size: .72rem; }
@media (max-width: 1150px) { .email-workspace { grid-template-columns: minmax(0, 1fr); } }
.workspace-header .account-password-link { padding: .55rem .8rem; white-space: nowrap; color: #fff; background: #173f4c; border: 1px solid #6c999e; border-radius: 7px; text-decoration: none; font-size: .8rem; }
.workspace-header .account-password-link:hover { background: #245360; }
@media (max-width: 550px) {
    .workspace-header { height: auto; min-height: 72px; padding-top: 12px; padding-bottom: 12px; align-items: flex-start; }
    .workspace-header .header-controls { flex: 1; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
    .workspace-header .account-password-link { padding: .5rem; }
}
.password-editor { max-width: 1000px; }
.login-failures { margin-top: 1.5rem; }
.login-failures td.user-agent { min-width: 180px; max-width: 380px; overflow-wrap: anywhere; white-space: normal; }
.backup-section { margin-bottom: 1.5rem; }
.backup-section .form-actions { margin: 1rem 0; }
.backup-section h3 { margin-top: 1.5rem; }
.backup-section code { overflow-wrap: anywhere; }
.backup-schedule-grid .checkbox { display: flex; grid-column: 1 / -1; padding: 0; }
.backup-section button:disabled { opacity: .5; cursor: wait; }
.backup-section button.link-button { background: transparent; color: #106c72; padding: .25rem 0; text-decoration: underline; }
.backup-section button.danger { background: #963b37; }
.arrears-filters { display: grid; grid-template-columns: minmax(200px, 2fr) minmax(180px, 1fr) auto; }
.arrears-filters label { font-size: .8rem; color: #526c75; }
.arrears-filters select { display: block; width: 100%; font: inherit; border: 1px solid #b8cbd1; border-radius: 7px; padding: .65rem .8rem; margin-top: .3rem; background: #fcfefe; }
.arrears-payment { display: inline-flex; align-items: center; gap: .35rem; }
.arrears-payment svg, .arrears-disable svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.evidence-paid { color: #266348; }
.evidence-unpaid { color: #7d4a22; }
.evidence-review { color: #8c6516; }
.arrears-table .original-text { display: block; max-width: 180px; font-size: .75rem; margin-top: .25rem; }
.arrears-disable { color: #963b37; border-color: #d8b9b6; gap: .4rem; }
.arrears-disable:hover { background: #f9eceb; border-color: #963b37; }
.arrears-table th:last-child { right: 0; z-index: 3; }
.arrears-table td:last-child { position: sticky; right: 0; background: #fff; box-shadow: -3px 0 5px -4px #526c75; }
.arrears-table tbody tr:hover td:last-child { background: #f9fcfc; }
.reactivate-member { color: #266348; border-color: #b7d9c8; gap: .4rem; }
.reactivate-member:hover { background: #e6f4ee; border-color: #266348; }
.reactivate-member svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.member-directory th.reactivation-column { right: 0; z-index: 3; }
.member-directory td.reactivation-column { position: sticky; right: 0; background: #fff; box-shadow: -3px 0 5px -4px #526c75; }
.member-directory tbody tr:hover td.reactivation-column { background: #f9fcfc; }
@media (max-width: 760px) { .arrears-filters { grid-template-columns: minmax(0, 1fr); } }