/* ================================================================
   OneFitnessVue Global Light / Dark Theme
   Loaded after AdminLTE and site.css.
   ================================================================ */

:root,
html[data-theme="light"] {
    --app-bg: #e7e7e7;
    --app-surface: #f7f7f7;
    --app-surface-soft: #eeeeee;
    --app-surface-muted: #e2e2e2;
    --app-text: #202020;
    --app-text-muted: #686868;
    --app-heading: #101010;
    --app-border: #cdcdcd;
    --app-border-strong: #ababab;
    --app-input-bg: #ffffff;
    --app-input-text: #202020;
    --app-input-placeholder: #858585;
    --app-primary: #3f4348;
    --app-primary-soft: rgba(63, 67, 72, .13);
    --app-shadow: 0 8px 24px rgba(0, 0, 0, .10);
    --app-navbar-bg: #1b1b1b;
    --app-navbar-text: #f2f2f2;
    --app-sidebar-bg: #101010;
    --app-sidebar-text: #f0f0f0;
    --app-sidebar-text-muted: #b8b8b8;
    --app-brand-accent: #aeb3b8;
    --app-brand-accent-strong: #777d83;
    --app-brand-accent-text: #111111;
    --app-brand-accent-soft: rgba(174, 179, 184, .15);
    --app-table-head-bg: #dddddd;
    --app-table-head-text: #181818;
    --app-row-hover: #e5e5e5;
    --app-overlay: rgba(0, 0, 0, .60);
    --app-disabled-bg: #d6d6d6;
    --app-disabled-text: #696969;
    --app-link: #3f4348;
    --app-code-bg: #dedede;
}

html[data-theme="dark"] {
    --app-bg: #090909;
    --app-surface: #181818;
    --app-surface-soft: #202020;
    --app-surface-muted: #292929;
    --app-text: #e8e8e8;
    --app-text-muted: #aaaaaa;
    --app-heading: #f8f8f8;
    --app-border: #353535;
    --app-border-strong: #4b4b4b;
    --app-input-bg: #121212;
    --app-input-text: #eeeeee;
    --app-input-placeholder: #888888;
    --app-primary: #bfc3c7;
    --app-primary-soft: rgba(191, 195, 199, .14);
    --app-shadow: 0 10px 30px rgba(0, 0, 0, .30);
    --app-navbar-bg: #171717;
    --app-navbar-text: #f0f0f0;
    --app-sidebar-bg: #0b0b0b;
    --app-sidebar-text: #f5f5f5;
    --app-sidebar-text-muted: #bdbdbd;
    --app-brand-accent: #b8bdc2;
    --app-brand-accent-strong: #858b91;
    --app-brand-accent-text: #101010;
    --app-brand-accent-soft: rgba(184, 189, 194, .15);
    --app-table-head-bg: #292929;
    --app-table-head-text: #f0f0f0;
    --app-row-hover: #262626;
    --app-overlay: rgba(0, 0, 0, .72);
    --app-disabled-bg: #303030;
    --app-disabled-text: #a8a8a8;
    --app-link: #d0d0d0;
    --app-code-bg: #292929;
}

html {
    background: var(--app-bg);
}

body,
.content-wrapper,
.content-header,
.content,
.wrapper {
    color: var(--app-text);
}

body,
.content-wrapper {
    background-color: var(--app-bg) !important;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.brand-link) {
    color: var(--app-link);
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-gray-dark {
    color: var(--app-heading) !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
    background-color: var(--app-surface-soft) !important;
    color: var(--app-text) !important;
}

.content-header h1,
.content-header h2,
.content-header h3,
.content-header h4,
.content-header h5,
.content-header h6,
.text-dark {
    color: var(--app-heading) !important;
}

.main-header.navbar,
.navbar-white,
.navbar-light {
    background-color: var(--app-navbar-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-navbar-text) !important;
}

    .main-header .nav-link,
    .main-header .navbar-brand,
    .navbar-light .navbar-nav .nav-link {
        color: var(--app-navbar-text) !important;
    }

        .main-header .nav-link:hover,
        .main-header .nav-link:focus {
            background: var(--app-primary-soft);
            color: var(--app-primary) !important;
        }

/* Account control lives on the permanently dark branded top bar, while its
   dropdown follows the selected light/dark surface. Keep each foreground
   tied to the surface it is actually displayed on. */
.app-topbar .topbar-profile-btn,
.app-topbar .topbar-profile-btn:focus {
    color: #ffffff !important;
    border-color: rgba(190, 195, 200, .55) !important;
}

.app-topbar .topbar-profile-btn:hover,
.app-topbar .topbar-profile-btn[aria-expanded="true"] {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .10) !important;
    border-color: #9da3a9 !important;
}

.app-topbar .topbar-dropdown {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

.app-topbar .topbar-dropdown .topbar-dropdown-item,
.app-topbar .topbar-dropdown .topbar-dropdown-item span {
    color: var(--app-text) !important;
}

.app-topbar .topbar-dropdown .topbar-dropdown-item:hover,
.app-topbar .topbar-dropdown .topbar-dropdown-item:focus,
.app-topbar .topbar-dropdown .topbar-dropdown-item:hover span,
.app-topbar .topbar-dropdown .topbar-dropdown-item:focus span {
    background: var(--app-row-hover) !important;
    color: var(--app-heading) !important;
}

.app-topbar .topbar-dropdown .dropdown-divider {
    border-color: var(--app-border) !important;
}

.main-sidebar,
.sidebar-dark-primary,
.sidebar-dark-info,
.sidebar-dark-success,
.sidebar-dark-warning,
.sidebar-dark-danger {
    background-color: var(--app-sidebar-bg) !important;
}

    /* The SideMenu component contains an inner .sidebar with a hard-coded
       gray gradient. Keep the complete navigation on the theme surface. */
    .main-sidebar .sidebar,
    .main-sidebar #sidebarRoot {
        background: var(--app-sidebar-bg) !important;
        color: var(--app-sidebar-text) !important;
    }

    .main-sidebar .brand-link {
        background: var(--app-sidebar-bg) !important;
        border-color: rgba(255, 255, 255, .10) !important;
        color: var(--app-sidebar-text) !important;
    }

    .main-sidebar .brand-text,
    .main-sidebar .nav-link,
    .main-sidebar .nav-header,
    .main-sidebar .user-panel .info a {
        color: var(--app-sidebar-text) !important;
    }

    .main-sidebar .nav-sidebar .nav-link > p,
    .main-sidebar .nav-sidebar .nav-icon,
    .main-sidebar .nav-sidebar .right,
    .main-sidebar .nav-treeview .nav-link,
    .main-sidebar .nav-treeview .nav-link > p,
    .main-sidebar .nav-treeview .nav-link i {
        color: var(--app-sidebar-text-muted) !important;
        opacity: 1 !important;
    }

    .main-sidebar .nav-sidebar .nav-link:hover,
    .main-sidebar .nav-sidebar .nav-link:focus {
        background: var(--app-brand-accent-soft) !important;
        color: var(--app-brand-accent) !important;
    }

        .main-sidebar .nav-sidebar .nav-link:hover > p,
        .main-sidebar .nav-sidebar .nav-link:hover i,
        .main-sidebar .nav-sidebar .nav-link:focus > p,
        .main-sidebar .nav-sidebar .nav-link:focus i {
            color: var(--app-brand-accent) !important;
        }

    .main-sidebar .nav-sidebar .nav-link.active {
        background: linear-gradient(135deg, var(--app-brand-accent), var(--app-brand-accent-strong)) !important;
        color: var(--app-brand-accent-text) !important;
        box-shadow: 0 8px 18px rgba(201, 138, 0, .24);
    }

.card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark),
.small-box:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark),
.info-box:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark),
.callout,
.jumbotron,
.list-group-item,
.dropdown-menu,
.modal-content,
.popover,
.toast,
.invoice,
.login-card-body,
.register-card-body {
    background-color: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
    box-shadow: var(--app-shadow);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.dropdown-divider,
.list-group-item {
    border-color: var(--app-border) !important;
}

.card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark),
.card-footer:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark),
.modal-header,
.modal-footer {
    background-color: var(--app-surface-soft) !important;
    color: var(--app-text) !important;
}

.card-title,
.modal-title,
.dropdown-header,
.popover-header,
label,
legend,
h1, h2, h3, h4, h5, h6 {
    color: var(--app-heading);
}

/* Page-level Razor styles frequently assign a fixed light-theme ink to card
   headings and form labels.  Reassert the themed foreground in dark mode so
   those local declarations cannot leave dark text on a dark surface. */
html[data-theme="dark"] .card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) .card-title,
html[data-theme="dark"] .card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) h1,
html[data-theme="dark"] .card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) h2,
html[data-theme="dark"] .card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) h3,
html[data-theme="dark"] .card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) h4,
html[data-theme="dark"] .card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) h5,
html[data-theme="dark"] .card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) h6,
html[data-theme="dark"] .card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) > i,
html[data-theme="dark"] .card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) .card-title i,
html[data-theme="dark"] .card-body label:not(.badge),
html[data-theme="dark"] .modal-body label:not(.badge),
html[data-theme="dark"] .ofv-input-label {
    color: var(--app-heading) !important;
}

html[data-theme="dark"] .card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) .text-muted,
html[data-theme="dark"] .card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) small {
    color: var(--app-text-muted) !important;
}

/* Daily Invoice uses dynamically generated summary rows with fixed pastel
   light-theme fills. Keep its on-screen report cohesive in dark mode while
   leaving the view's white print stylesheet in full control when printing. */
@media screen {
    html[data-theme="dark"] .daily-invoice-page .filter-bar,
    html[data-theme="dark"] .daily-invoice-page .section-title-bar {
        background: var(--app-surface-soft) !important;
        border-color: var(--app-border) !important;
        color: var(--app-heading) !important;
    }

    html[data-theme="dark"] .daily-invoice-page .filter-label,
    html[data-theme="dark"] .daily-invoice-page .section-title,
    html[data-theme="dark"] .daily-invoice-page .section-title-bar,
    html[data-theme="dark"] .daily-invoice-page .section-title-bar span,
    html[data-theme="dark"] .daily-invoice-page .member-table tbody td,
    html[data-theme="dark"] .daily-invoice-page .cash-summary th,
    html[data-theme="dark"] .daily-invoice-page .cash-summary td {
        color: var(--app-text) !important;
    }

    html[data-theme="dark"] .daily-invoice-page .member-table thead th {
        background: var(--app-table-head-bg) !important;
        color: var(--app-table-head-text) !important;
        border-color: var(--app-border) !important;
    }

    html[data-theme="dark"] .daily-invoice-page .cash-summary .subhead td,
    html[data-theme="dark"] .daily-invoice-page .cash-summary .row-strong td {
        background: var(--app-surface-soft) !important;
        color: var(--app-heading) !important;
    }

    html[data-theme="dark"] .daily-invoice-page .cash-summary .cf-row td {
        background: rgba(16, 185, 129, .14) !important;
        color: var(--app-heading) !important;
    }

    html[data-theme="dark"] .daily-invoice-page .kpi-card,
    html[data-theme="dark"] .daily-invoice-page .kpi-card.cash,
    html[data-theme="dark"] .daily-invoice-page .kpi-card.card,
    html[data-theme="dark"] .daily-invoice-page .kpi-card.fund,
    html[data-theme="dark"] .daily-invoice-page .kpi-card.income,
    html[data-theme="dark"] .daily-invoice-page .kpi-card.expense,
    html[data-theme="dark"] .daily-invoice-page .kpi-card.opening {
        background: var(--app-surface-soft) !important;
        border-color: var(--app-border) !important;
    }

    html[data-theme="dark"] .daily-invoice-page .kpi-card.closing {
        background: rgba(20, 184, 166, .14) !important;
        border-color: #14b8a6 !important;
    }

    html[data-theme="dark"] .daily-invoice-page .kpi-label,
    html[data-theme="dark"] .daily-invoice-page .kpi-amt:not(.positive):not(.negative) {
        color: var(--app-heading) !important;
    }
}

p,
span,
div,
td,
th,
small {
    border-color: var(--app-border);
}

    .text-muted,
    .help-block,
    .form-text,
    small.text-muted {
        color: var(--app-text-muted) !important;
    }

.form-control,
.custom-select,
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="search"],
input[type="tel"],
textarea,
.input-group-text,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.bootstrap-select > .dropdown-toggle {
    background-color: var(--app-input-bg) !important;
    border-color: var(--app-border-strong) !important;
    color: var(--app-input-text) !important;
}

    .form-control:focus,
    .custom-select:focus,
    select:focus,
    input:focus,
    textarea:focus,
    .select2-container--default.select2-container--focus .select2-selection--multiple,
    .select2-container--default.select2-container--open .select2-selection--single {
        border-color: var(--app-primary) !important;
        box-shadow: 0 0 0 .2rem var(--app-primary-soft) !important;
        outline: none;
    }

    .form-control::placeholder,
    input::placeholder,
    textarea::placeholder {
        color: var(--app-input-placeholder) !important;
        opacity: 1;
    }

    .form-control:disabled,
    .form-control[readonly],
    .custom-select:disabled,
    select:disabled,
    input:disabled,
    textarea:disabled {
        background-color: var(--app-disabled-bg) !important;
        color: var(--app-disabled-text) !important;
        opacity: 1;
    }

        .main-sidebar .nav-sidebar .nav-link.active > p,
        .main-sidebar .nav-sidebar .nav-link.active i {
            color: var(--app-brand-accent-text) !important;
        }

select:disabled,
button:disabled,
.btn.disabled,
.btn:disabled {
    opacity: .72;
}

.input-group-text.bg-white,
.input-group-text.bg-light {
    background-color: var(--app-input-bg) !important;
    color: var(--app-input-text) !important;
}

.table,
table.dataTable {
    color: var(--app-text) !important;
    background-color: var(--app-surface) !important;
}

    .table thead th,
    table.dataTable thead th,
    table.dataTable thead td {
        background-color: var(--app-table-head-bg) !important;
        color: var(--app-table-head-text) !important;
        border-color: var(--app-border) !important;
    }

    .table td,
    .table th,
    table.dataTable tbody td,
    table.dataTable tbody th {
        border-color: var(--app-border) !important;
    }

    /* Several service grids set a fixed light-theme navy directly on cells.
       Apply the palette to the cells themselves so it wins that later rule. */
    .table tbody td,
    .table tbody th,
    table.dataTable tbody td,
    table.dataTable tbody th,
    .member-table tbody td,
    .member-table tbody th,
    .live-table tbody td,
    .live-table tbody th {
        color: var(--app-text) !important;
    }

    .member-table tbody td a:not(.btn),
    .live-table tbody td a:not(.btn) {
        color: var(--app-link) !important;
    }

html[data-theme="dark"] .filter-label,
html[data-theme="dark"] .table-label,
html[data-theme="dark"] .member-table .text-body,
html[data-theme="dark"] .live-table .text-body {
    color: var(--app-text) !important;
}

/* Consistent black/gray page-heading treatment. This intentionally targets
   page-level headers, leaving dashboard metric/status card colors untouched. */
.content-wrapper .content-header {
    background: linear-gradient(90deg, #151515, #292929) !important;
    border-bottom: 1px solid #3d3d3d;
    color: #f4f4f4 !important;
}

.content-wrapper .content-header h1,
.content-wrapper .content-header h2,
.content-wrapper .content-header h3,
.content-wrapper .content-header h4,
.content-wrapper .content-header h5,
.content-wrapper .content-header h6,
.content-wrapper .content-header .breadcrumb,
.content-wrapper .content-header .breadcrumb a,
.content-wrapper .content-header .breadcrumb-item,
.content-wrapper .content-header .breadcrumb-item::before {
    color: #f4f4f4 !important;
}

.content-wrapper .content > .container > .card > .card-header,
.content-wrapper .content > .container-fluid > .card > .card-header,
.content-wrapper .content .member-card-header,
.content-wrapper .content .live-card-header,
.content-wrapper .content .page-head,
.content-wrapper .content .card-header-main {
    background: linear-gradient(100deg, #141414 0%, #303030 100%) !important;
    border-color: #444444 !important;
    color: #f5f5f5 !important;
}

.content-wrapper .content > .container > .card > .card-header h1,
.content-wrapper .content > .container > .card > .card-header h2,
.content-wrapper .content > .container > .card > .card-header h3,
.content-wrapper .content > .container > .card > .card-header h4,
.content-wrapper .content > .container > .card > .card-header h5,
.content-wrapper .content > .container > .card > .card-header h6,
.content-wrapper .content > .container > .card > .card-header .card-title,
.content-wrapper .content > .container > .card > .card-header > i,
.content-wrapper .content > .container-fluid > .card > .card-header h1,
.content-wrapper .content > .container-fluid > .card > .card-header h2,
.content-wrapper .content > .container-fluid > .card > .card-header h3,
.content-wrapper .content > .container-fluid > .card > .card-header h4,
.content-wrapper .content > .container-fluid > .card > .card-header h5,
.content-wrapper .content > .container-fluid > .card > .card-header h6,
.content-wrapper .content > .container-fluid > .card > .card-header .card-title,
.content-wrapper .content > .container-fluid > .card > .card-header > i,
.content-wrapper .content .member-card-header h1,
.content-wrapper .content .member-card-header h2,
.content-wrapper .content .member-card-header h3,
.content-wrapper .content .member-card-header h4,
.content-wrapper .content .member-card-header .card-title,
.content-wrapper .content .member-card-header > i,
.content-wrapper .content .live-card-header h1,
.content-wrapper .content .live-card-header h2,
.content-wrapper .content .live-card-header h3,
.content-wrapper .content .live-card-header h4,
.content-wrapper .content .live-card-header .card-title,
.content-wrapper .content .live-card-header > i,
.content-wrapper .content .page-head *,
.content-wrapper .content .card-header-main * {
    color: #f5f5f5 !important;
}

/* These page headers intentionally keep their dark branded gradient in both
   themes, so their foreground must not inherit the light-theme heading ink. */
.member-card-header,
.member-card-header .page-title,
.member-card-header .page-subtitle,
.member-card-header h1,
.member-card-header h2,
.member-card-header h3,
.member-card-header h4,
.member-card-header h5,
.member-card-header h6,
.member-card-header small,
.member-card-header span:not(.badge) {
    color: #ffffff !important;
}

/* Other project headers that intentionally retain a dark branded surface.
   Heading elements receive their own global color, so inheritance alone is
   insufficient; set every common text child explicitly. */
.live-card-header,
.live-card-header .page-title,
.live-card-header .page-subtitle,
.live-card-header h1,
.live-card-header h2,
.live-card-header h3,
.live-card-header h4,
.live-card-header h5,
.live-card-header h6,
.live-card-header small,
.live-card-header span:not(.badge):not(.live-dot),
.wallet-header,
.wallet-header h1,
.wallet-header h2,
.wallet-header h3,
.wallet-header h4,
.wallet-header p,
.wallet-header small,
.tw-main-header,
.tw-main-header h1,
.tw-main-header h2,
.tw-main-header h3,
.tw-main-header h4,
.tw-main-header p,
.tw-main-header small,
.history-card-header,
.history-card-header h1,
.history-card-header h2,
.history-card-header h3,
.history-card-header h4,
.history-card-header small,
.hold-modal-header,
.hold-modal-header h1,
.hold-modal-header h2,
.hold-modal-header h3,
.hold-modal-header h4,
.hold-modal-header small {
    color: #ffffff !important;
}

    .table-striped tbody tr:nth-of-type(odd),
    table.dataTable.stripe tbody tr.odd,
    table.dataTable.display tbody tr.odd {
        background-color: var(--app-surface-soft) !important;
    }

    .table-hover tbody tr:hover,
    table.dataTable.hover tbody tr:hover,
    table.dataTable.display tbody tr:hover {
        background-color: var(--app-row-hover) !important;
        color: var(--app-text) !important;
    }

    .table tbody tr,
    table.dataTable tbody tr {
        background-color: var(--app-surface) !important;
    }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--app-text) !important;
}

.dataTables_wrapper input,
.dataTables_wrapper select,
.dataTables_filter input,
.dataTables_length select {
    background: var(--app-input-bg) !important;
    border: 1px solid var(--app-border-strong) !important;
    color: var(--app-input-text) !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button,
    .page-link {
        background: var(--app-surface) !important;
        border-color: var(--app-border) !important;
        color: var(--app-text) !important;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
        .page-item.active .page-link {
            background: var(--app-primary) !important;
            border-color: var(--app-primary) !important;
            color: #ffffff !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
        .page-link:hover {
            background: var(--app-primary-soft) !important;
            border-color: var(--app-primary) !important;
            color: var(--app-primary) !important;
        }

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.page-item.disabled .page-link {
    background: var(--app-disabled-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-disabled-text) !important;
}

.dropdown-item,
.select2-results__option,
.autocomplete-items div {
    color: var(--app-text) !important;
}

    .dropdown-item:hover,
    .dropdown-item:focus,
    .select2-container--default .select2-results__option--highlighted[aria-selected],
    .autocomplete-items div:hover {
        background-color: var(--app-row-hover) !important;
        color: var(--app-heading) !important;
    }

.select2-dropdown,
.select2-container--default .select2-results > .select2-results__options {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--inline .select2-search__field {
    color: var(--app-input-text) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--app-surface-muted) !important;
    border-color: var(--app-border-strong) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--app-surface-muted) !important;
    color: var(--app-heading) !important;
}

.ui-autocomplete,
.ui-menu,
.autocomplete-items {
    background: var(--app-surface) !important;
    border-color: var(--app-border-strong) !important;
    color: var(--app-text) !important;
}

.ui-menu .ui-menu-item-wrapper,
.ui-autocomplete .ui-menu-item,
.autocomplete-items div {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

.ui-menu .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item:hover {
    background: var(--app-row-hover) !important;
    border-color: var(--app-primary) !important;
    color: var(--app-heading) !important;
}

.nav-tabs,
.nav-tabs .nav-link,
.nav-pills .nav-link {
    border-color: var(--app-border) !important;
    color: var(--app-text-muted) !important;
}

    .nav-tabs .nav-link.active,
    .nav-pills .nav-link.active {
        background-color: var(--app-primary) !important;
        border-color: var(--app-primary) !important;
        color: #ffffff !important;
    }

.breadcrumb {
    background-color: transparent !important;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--app-text-muted) !important;
}

.close {
    color: var(--app-text) !important;
    text-shadow: none !important;
}

hr {
    border-color: var(--app-border) !important;
}

.custom-control-label::before {
    background-color: var(--app-input-bg) !important;
    border-color: var(--app-border-strong) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}

/* Theme toggle inserted in the top navigation by theme.js. */
.app-theme-toggle-item {
    display: flex;
    align-items: center;
    padding: 0 4px;
}

.app-theme-toggle {
    min-height: 36px;
    min-width: 82px;
    padding: 7px 11px;
    border: 1px solid var(--app-border-strong);
    border-radius: 999px;
    background: var(--app-surface-soft);
    color: var(--app-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .12);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

    .app-theme-toggle:hover,
    .app-theme-toggle:focus {
        transform: translateY(-1px);
        background: var(--app-primary-soft);
        border-color: var(--app-primary);
        color: var(--app-primary);
        outline: none;
    }

.app-theme-toggle__icon {
    font-size: 14px;
}

/* Premium public login palette. Its photographic surface remains dark in
   both themes, so links and controls use neutral white plus the logo gold
   instead of inheriting the application's blue link color. */
.portal-login-page .login-card {
    isolation: isolate;
    overflow: hidden;
}

.portal-login-page .login-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 12%;
    left: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 201, 40, .9), transparent);
    box-shadow: 0 0 24px rgba(255, 183, 0, .34);
}

.portal-login-page .forgot-password-link,
.portal-login-page .hero-credit a,
.portal-login-page .login-links a:not(.btn):not(.secondary-action) {
    color: #f4f4f5 !important;
}

.portal-login-page .forgot-password-link:hover,
.portal-login-page .forgot-password-link:focus,
.portal-login-page .hero-credit a:hover,
.portal-login-page .hero-credit a:focus,
.portal-login-page .login-links a:not(.btn):not(.secondary-action):hover,
.portal-login-page .login-links a:not(.btn):not(.secondary-action):focus {
    color: #ffc928 !important;
}

.portal-login-page .input-group-wrapper:focus-within {
    border-color: rgba(255, 201, 40, .62) !important;
    box-shadow: 0 0 0 4px rgba(255, 201, 40, .11), 0 12px 30px rgba(0, 0, 0, .16) !important;
}

.portal-login-page .app-theme-toggle {
    border-color: rgba(255, 201, 40, .48) !important;
    color: #f8fafc !important;
    background: rgba(10, 13, 20, .76) !important;
}

.portal-login-page .app-theme-toggle__icon {
    color: #ffc928 !important;
}

.portal-login-page .app-theme-toggle:hover,
.portal-login-page .app-theme-toggle:focus {
    border-color: #ffc928 !important;
    background: rgba(255, 201, 40, .12) !important;
    color: #ffffff !important;
}

.app-theme-toggle--floating {
    position: fixed;
    top: 12px;
    right: 70px;
    z-index: 1080;
}

/* Common custom pages in this project. */
html[data-theme="light"] .member-card,
html[data-theme="light"] .filter-bar,
html[data-theme="light"] .member-summary,
html[data-theme="light"] .summary-card,
html[data-theme="light"] .table-card,
html[data-theme="light"] .dashboard-shell {
    color: var(--app-text) !important;
}

html[data-theme="light"] .dashboard-page {
    background: transparent !important;
}

html[data-theme="light"] .dashboard-shell {
    background: rgba(255, 255, 255, .58) !important;
}

html[data-theme="light"] .glass-card,
html[data-theme="light"] .terminal-card,
html[data-theme="light"] .comm-item {
    border-color: rgba(15, 23, 42, .12) !important;
}

html[data-theme] .swal2-popup,
html[data-theme] .jconfirm-box {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
}

html[data-theme] .swal2-title,
html[data-theme] .swal2-html-container,
html[data-theme] .jconfirm-title,
html[data-theme] .jconfirm-content {
    color: var(--app-text) !important;
}

html[data-theme] .swal2-input,
html[data-theme] .swal2-textarea,
html[data-theme] .jconfirm-box input,
html[data-theme] .jconfirm-box textarea {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-input-text) !important;
}

.modal-content,
.modal-header,
.modal-body,
.modal-footer,
.dropdown-menu,
.dropdown-header {
    color: var(--app-text) !important;
}

.dropdown-item.disabled,
.dropdown-item:disabled {
    color: var(--app-disabled-text) !important;
}

#toast-container > .toast,
.toast-success,
.toast-error,
.toast-info,
.toast-warning {
    color: #ffffff !important;
}

#toast-container > .toast-message,
#toast-container > .toast-title {
    color: inherit !important;
}

/* Neutralize common page-local light palettes in dark mode. Status and
   branded components retain their explicit semantic foreground colors. */
html[data-theme="dark"] .card:not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info),
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .member-summary,
html[data-theme="dark"] .autocomplete-dropdown,
html[data-theme="dark"] .search-results,
html[data-theme="dark"] .modal-body {
    background-color: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

/* Project-specific state rows retain their meaning with readable foregrounds. */
html[data-theme="dark"] tr.red-row,
html[data-theme="dark"] tr.red-row > td {
    background-color: #4c1d27 !important;
    color: #fecdd3 !important;
}

html[data-theme="dark"] tr.light-red-row,
html[data-theme="dark"] tr.light-red-row > td {
    background-color: #422006 !important;
    color: #fde68a !important;
}

html[data-theme="dark"] tr.verylight-red-row,
html[data-theme="dark"] tr.verylight-red-row > td,
html[data-theme="dark"] tr.hold-row,
html[data-theme="dark"] tr.hold-row > td {
    background-color: #3b2f0b !important;
    color: #fef3c7 !important;
}

html[data-theme="dark"] .group-row td,
html[data-theme="dark"] .workout-sort-drag,
html[data-theme="dark"] .member-table tbody tr.red-row td:last-child,
html[data-theme="dark"] .member-table tbody tr.light-red-row td:last-child,
html[data-theme="dark"] .member-table tbody tr.verylight-red-row td:last-child {
    background: var(--app-surface-muted) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .workout-row-editing {
    background: #3b2f0b !important;
    color: #fef3c7 !important;
}

/* Member edit screen: its embedded stylesheet is intentionally self-contained
   but uses a fixed light palette. Map its neutral panels to the dark theme. */
html[data-theme="dark"] .screen-font .member-card,
html[data-theme="dark"] .screen-font .register-card-body,
html[data-theme="dark"] .screen-font .section-card,
html[data-theme="dark"] .screen-font .soft-panel,
html[data-theme="dark"] .screen-font .soft-panel-header,
html[data-theme="dark"] .screen-font .filter-bar,
html[data-theme="dark"] .screen-font .photo-box,
html[data-theme="dark"] .screen-font .signature-box {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .screen-font .section-title-bar,
html[data-theme="dark"] .screen-font #tabs .ui-tabs-tab:not(.ui-tabs-active) a {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-heading) !important;
}

html[data-theme="dark"] .screen-font .filter-label,
html[data-theme="dark"] .screen-font .signature-mini-note,
html[data-theme="dark"] .screen-font .photo-box small,
html[data-theme="dark"] .screen-font .signature-box small {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .screen-font .table-custom tbody td,
html[data-theme="dark"] .screen-font .table-custom tfoot td,
html[data-theme="dark"] .screen-font .table-custom tfoot th {
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .screen-font input[type="file"] {
    background: var(--app-input-bg) !important;
    border-color: var(--app-border-strong) !important;
    color: var(--app-input-text) !important;
}

/* Signature canvases stay white by design so stored black ink remains valid. */
html[data-theme="dark"] .screen-font .signature-stage,
html[data-theme="dark"] .screen-font .signature-pad,
html[data-theme="dark"] .screen-font .signature-preview-box {
    background: #ffffff !important;
    color: #111827 !important;
}

/* Keep printable documents white regardless of the selected app theme. */
@media print {
    html,
    body,
    .content-wrapper,
    .card,
    .invoice,
    .receipt,
    .receipt-shell,
    .print-area,
    .schedule-print,
    .report-print {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .invoice *,
    .receipt *,
    .receipt-shell *,
    .print-area *,
    .schedule-print *,
    .report-print * {
        color: #000000 !important;
        border-color: #d1d5db !important;
        text-shadow: none !important;
    }

    .app-theme-toggle,
    .app-theme-toggle-item {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .app-theme-toggle {
        min-width: 38px;
        width: 38px;
        height: 36px;
        padding: 0;
    }

    .app-theme-toggle__text {
        display: none;
    }

    .app-theme-toggle--floating {
        right: 58px;
        top: 10px;
    }
}

/* Service area page headers: shared Daily Invoice format */
body.service-area .service-standard-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    background: linear-gradient(135deg, #000000, #171717, #262626) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    color: #ffffff !important;
}

body.service-area .service-standard-header h1,
body.service-area .service-standard-header h2,
body.service-area .service-standard-header h3,
body.service-area .service-standard-header h4,
body.service-area .service-standard-header h5,
body.service-area .service-standard-header h6,
body.service-area .service-standard-header .page-title,
body.service-area .service-standard-header .card-title {
    margin-bottom: 0 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}

body.service-area .service-standard-header .page-subtitle,
body.service-area .service-standard-header small,
body.service-area .service-standard-header .workout-master-subtitle,
body.service-area .service-standard-header .workout-add-subtitle,
body.service-area .service-standard-header .wt-subtitle,
body.service-area .service-standard-header .cf-header-subtitle {
    display: block;
    margin-top: 3px;
    color: #e5e7eb !important;
    -webkit-text-fill-color: #e5e7eb !important;
    opacity: .88;
}

body.service-area .service-standard-header .header-actions,
body.service-area .service-standard-header > .d-flex {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

body.service-area .service-standard-header .btn-light {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.service-area .service-standard-header .btn-light i {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

/* Use the layout heading only as a fallback on older Service pages. */
body.service-area .content-header {
    margin: 0 15px 14px;
    padding: 13px 18px;
    background: linear-gradient(135deg, #000000, #171717, #262626);
    border-radius: 14px;
    color: #ffffff;
}

body.service-area .content-header h5 {
    margin: 0;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 22px;
    font-weight: 700;
}

body.service-area:has(.service-standard-header) .content-header {
    display: none;
}

@media (max-width: 767.98px) {
    body.service-area .service-standard-header {
        align-items: flex-start !important;
        padding: 15px !important;
    }

    body.service-area .service-standard-header .header-actions,
    body.service-area .service-standard-header > .d-flex {
        width: 100%;
        justify-content: flex-start;
    }

    body.service-area .content-header {
        margin: 0 8px 10px;
        padding: 14px 15px;
    }
}