@font-face {
    font-family: 'Preeti';
    src: url('/assets/fonts/Preeti.otf') format('opentype'),
         url('/assets/fonts/Preeti.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --primary: #00327d;
    --on-primary: #ffffff;
    --primary-container: #0047ab;
    --on-primary-container: #a5bdff;
    --background: #f9f9ff;
    --on-background: #141b2b;
    --surface: #f9f9ff;
    --on-surface: #141b2b;
    --surface-variant: #dce2f7;
    --on-surface-variant: #434653;
    --outline: #737784;
    --outline-variant: #c3c6d5;
    --primary-fixed: #dae2ff;
    --inverse-surface: #293040;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f1f3ff;

    /* Dashboard Specific */
    --topbar-height: 70px;
    --sidebar-width: 260px;
    --menu-bg: #ffffff;
    --content-bg: #f5f7fb;
    --menu-item-color: #6c757d;
    --topbar-bg: linear-gradient(135deg, #6379c3 0%, #546ee5 60%);
    --topbar-color: #ffffff;
    --card-bg: #ffffff;
}

/* Dark Mode Overrides */
[data-bs-theme="dark"],
html.dark-theme,
body.dark-theme,
.dark-theme {
    --background: #0f172a; /* Deeper slate for background */
    --on-background: #f1f5f9;
    --surface: #1e293b;
    --on-surface: #f8fafc;
    --surface-variant: #334155;
    --on-surface-variant: #94a3b8;
    --menu-bg: #1e293b;
    --content-bg: #0f172a;
    --card-bg: #1e293b;
    --menu-item-color: #94a3b8;
    --outline-variant: #475569;
    --primary: #8ab4f8;
    --primary-container: #1e3a8a;
    --on-primary-container: #bfdbfe;
    --surface-container-low: #243044;
    --surface-container-lowest: #0f172a;
    --bs-body-bg: var(--background);
    --bs-body-color: var(--on-background);
    --bs-border-color: var(--outline-variant);
    --bs-heading-color: var(--on-background);
    --bs-form-check-bg: #81848a;
    /* Bootstrap's opacity-based utilities (.text-body, .link-body-emphasis, etc.)
       read the "-rgb" triplet variable via rgba(var(--bs-body-color-rgb), ...),
       not --bs-body-color itself. Without this, .text-body renders Bootstrap's
       hardcoded light-mode near-black (33,37,41) in dark mode. */
    --bs-body-color-rgb: 241, 245, 249;
    --bs-card-bg: var(--surface);
    --bs-card-color: var(--on-surface);
    --bs-modal-bg: var(--surface);
    --bs-modal-color: var(--on-surface);
    --bs-tertiary-bg: var(--surface-variant);
}

/* Global Dark Theme Element Overrides */
html.dark-theme,
html.dark-theme body,
body.dark-theme,
.dark-theme body {
    background-color: var(--background) !important;
    color: var(--on-background) !important;
}

.dark-theme .text-muted {
    color: var(--on-surface-variant) !important;
}

.dark-theme .text-dark {
    color: var(--on-surface) !important;
}

.dark-theme .text-secondary {
    color: var(--on-surface-variant) !important;
}

.dark-theme .text-primary,
.dark-theme .text-primary-emphasis {
    color: #60a5fa !important;
}

.dark-theme .text-success,
.dark-theme .text-success-emphasis {
    color: #4ade80 !important;
}

.dark-theme .text-warning,
.dark-theme .text-warning-emphasis {
    color: #ffda6a !important;
}

.dark-theme .text-danger,
.dark-theme .text-danger-emphasis {
    color: #f87171 !important;
}

.dark-theme .text-info,
.dark-theme .text-info-emphasis {
    color: #38bdf8 !important;
}

.dark-theme .progress {
    background-color: var(--surface-variant, #334155) !important;
}

.dark-theme .btn-close:not(.btn-close-white) {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.75;
}

.dark-theme .btn-close:not(.btn-close-white):hover {
    opacity: 1;
}

/* Breadcrumbs (report drill-down trails). Bootstrap resolves the active-step and
   divider colours from component variables defined at :root, and .dark-theme sits
   on a descendant wrapper, so both keep their light-mode near-black and go
   invisible on the dark background. Same trap as .text-body above. */
.dark-theme .breadcrumb-item.active {
    color: var(--on-background) !important;
}

.dark-theme .breadcrumb-item + .breadcrumb-item::before {
    color: var(--on-surface-variant) !important;
}

.dark-theme .bg-light,
.dark-theme .card-footer.bg-light {
    background-color: var(--surface-variant) !important;
    color: var(--on-surface) !important;
}

/* Hard-coded light backgrounds that the .bg-light override doesn't catch.
   .bg-white is used on card headers (e.g. DepositAccountViewS header) and
   .bg-light-subtle on the goAML / forced-withdraw boxes; without this they
   stay bright white in dark mode. */
.dark-theme .bg-white {
    background-color: var(--surface) !important;
    color: var(--on-surface) !important;
}

.dark-theme .bg-light-subtle {
    background-color: var(--surface-variant) !important;
    color: var(--on-surface) !important;
}

.dark-theme .bg-success-subtle {
    background-color: rgba(34, 197, 94, 0.15) !important;
}

.dark-theme .bg-primary-subtle {
    background-color: rgba(37, 99, 235, 0.18) !important;
}

.dark-theme .bg-warning-subtle {
    background-color: rgba(234, 179, 8, 0.15) !important;
}

.dark-theme .bg-danger-subtle {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

.dark-theme .bg-info-subtle {
    background-color: rgba(14, 165, 233, 0.15) !important;
}

/* Subtle borders for badges, banners, and cards in dark mode */
.dark-theme .border-primary-subtle {
    border-color: rgba(96, 165, 250, 0.25) !important;
}

.dark-theme .border-success-subtle {
    border-color: rgba(74, 222, 128, 0.25) !important;
}

.dark-theme .border-warning-subtle {
    border-color: rgba(250, 204, 21, 0.25) !important;
}

.dark-theme .border-danger-subtle {
    border-color: rgba(248, 113, 113, 0.25) !important;
}

.dark-theme .border-info-subtle {
    border-color: rgba(56, 189, 248, 0.25) !important;
}

/* Button overrides for dark mode */
.dark-theme .btn-light {
    background-color: var(--surface-variant, #334155) !important;
    border-color: var(--outline-variant, #475569) !important;
    color: var(--on-surface, #f8fafc) !important;
}

.dark-theme .btn-light:hover,
.dark-theme .btn-light:focus,
.dark-theme .btn-light:active {
    background-color: #475569 !important;
    border-color: #64748b !important;
    color: #ffffff !important;
}

.dark-theme .btn-outline-secondary {
    border-color: var(--outline-variant, #475569) !important;
    color: var(--on-surface-variant, #94a3b8) !important;
}

.dark-theme .btn-outline-secondary:hover,
.dark-theme .btn-outline-secondary:focus,
.dark-theme .btn-outline-secondary:active {
    background-color: var(--surface-variant, #334155) !important;
    border-color: var(--outline-variant, #475569) !important;
    color: var(--on-surface, #f8fafc) !important;
}

/* Ensure Login page is always strictly light theme */
.login-page,
.dark-theme .login-page,
[data-bs-theme="dark"] .login-page {
    color-scheme: light !important;
    background-color: #f9f9ff !important;
    color: #191c20 !important;
}

.login-page .form-control,
.dark-theme .login-page .form-control,
[data-bs-theme="dark"] .login-page .form-control {
    background-color: #ffffff !important;
    color: #191c20 !important;
    border-color: #c4c6cf !important;
}

/* Input-group add-ons (e.g. the "Pieces" suffix on Cheque Issue) otherwise
   keep the light Bootstrap default and clash with the themed input. */
.dark-theme .input-group-text {
    background-color: var(--surface-variant) !important;
    color: var(--on-surface) !important;
    border-color: var(--outline-variant) !important;
}

/* Native Bootstrap pagination used by the Blazor pagers (Statements, Cheque
   Issue grids). The DataTables-scoped rules above only reach jQuery
   DataTables markup, so theme the plain <ul class="pagination"> here for both
   light and dark — Bootstrap's default active colour otherwise mismatches the
   app --primary, and in dark mode the white page links are unreadable. */
.page-link {
    background-color: var(--surface) !important;
    color: var(--on-surface) !important;
    border-color: var(--outline-variant) !important;
}
.page-link:hover {
    background-color: var(--surface-variant) !important;
    color: var(--primary) !important;
}
.page-item.active .page-link,
.page-item.active .page-link:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
}
.page-item.disabled .page-link {
    background-color: var(--surface) !important;
    color: var(--on-surface-variant) !important;
    opacity: 0.5;
}

/* Compact page-size dropdown in the pager toolbars — smaller than form-select-sm
   so "Show [10] entries" doesn't dominate the row. */
.form-select.page-size-select {
    min-width: 3.25rem !important;
    padding: 0.25rem 1.5rem 0.25rem 0.5rem !important;
    font-size: 12px !important;
}

/* DataTables-style flat pager for the Blazor-native <ul> pagers (Statements,
   Cheque Issue, Member Directory, Deposit List, Loan List). Mirrors the
   .dataTables_wrapper .dataTables_paginate look so the native pager reads as
   DataTables: contiguous flat buttons separated by hairlines, no rounded corners,
   primary active, surface-variant hover. */
.dt-pager-nav {
    display: flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 1px 0;
}
.dt-pager {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 1px;
    border: none;
    background: transparent;
    flex-shrink: 0;
}
.dt-pager .page-item {
    margin: 0 !important;
    border: none !important;
    list-style: none;
}
.dt-pager .page-link {
    margin: 0 !important;
    border: 1px solid var(--outline-variant, #e2e8f0) !important;
    border-radius: 6px !important;
    background: var(--surface, #ffffff) !important;
    color: var(--on-surface, #475569) !important;
    font-size: 12px !important;
    font-weight: 600;
    min-width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    user-select: none;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.dt-pager .page-link .material-symbols-outlined {
    font-size: 15px !important;
    line-height: 1;
}
.dt-pager .page-item:not(.active):not(.disabled) .page-link:hover {
    background: var(--surface-variant, #f1f5f9) !important;
    color: var(--primary, #6658dd) !important;
    border-color: var(--primary, #6658dd) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.dt-pager .page-item.active .page-link {
    background: var(--primary, #6658dd) !important;
    color: #ffffff !important;
    border-color: var(--primary, #6658dd) !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(102, 88, 221, 0.35) !important;
    transform: translateY(-1px);
}
.dt-pager .page-item.disabled .page-link {
    color: var(--on-surface-variant, #94a3b8) !important;
    background: var(--surface, #ffffff) !important;
    border-color: var(--outline-variant, #e2e8f0) !important;
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
    box-shadow: none !important;
    transform: none !important;
}
.dt-pager .page-item-ellipsis .page-link {
    border: none !important;
    background: transparent !important;
    min-width: 18px;
    box-shadow: none !important;
    font-weight: 700;
    font-size: 12px !important;
    color: var(--on-surface-variant, #94a3b8) !important;
    opacity: 0.7;
    cursor: default;
}

/* Dark Mode Theme Support */
html[data-bs-theme="dark"] .dt-pager .page-link,
.dark-theme .dt-pager .page-link {
    background: #2b323c !important;
    color: #cbd5e1 !important;
    border-color: #424e5a !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

html[data-bs-theme="dark"] .dt-pager .page-item:not(.active):not(.disabled) .page-link:hover,
.dark-theme .dt-pager .page-item:not(.active):not(.disabled) .page-link:hover {
    background: #363e4a !important;
    color: #a5b4fc !important;
    border-color: var(--primary, #6658dd) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

html[data-bs-theme="dark"] .dt-pager .page-item.active .page-link,
.dark-theme .dt-pager .page-item.active .page-link {
    background: var(--primary, #6658dd) !important;
    color: #ffffff !important;
    border-color: var(--primary, #6658dd) !important;
    box-shadow: 0 2px 8px rgba(102, 88, 221, 0.45) !important;
}

html[data-bs-theme="dark"] .dt-pager .page-item.disabled .page-link,
.dark-theme .dt-pager .page-item.disabled .page-link {
    background: #232931 !important;
    color: #64748b !important;
    border-color: #384350 !important;
    opacity: 0.4;
}

html[data-bs-theme="dark"] .dt-pager .page-item-ellipsis .page-link,
.dark-theme .dt-pager .page-item-ellipsis .page-link {
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
}

@media (max-width: 768px) {
    .dt-pager {
        gap: 2px;
    }
    .dt-pager .page-link {
        min-width: 28px;
        height: 28px;
        padding: 0 4px !important;
        font-size: 11px !important;
        border-radius: 5px !important;
    }
    .dt-pager .page-link .material-symbols-outlined {
        font-size: 14px !important;
    }
}

@media (max-width: 576px) {
    .dt-pager-nav {
        width: 100%;
        justify-content: center;
    }
    .dt-pager .page-link {
        min-width: 25px;
        height: 26px;
        padding: 0 3px !important;
        font-size: 11px !important;
        border-radius: 4px !important;
    }
    .dt-pager .page-link .material-symbols-outlined {
        font-size: 13px !important;
    }
}

/* Global zebra striping — any .table.table-striped picks up a theme-correct
   stripe colour. Row hover (--bs-table-hover-bg) still layers on top. */
.table {
    --bs-table-striped-bg: rgba(0, 0, 0, 0.04);
    --bs-table-striped-color: inherit;
}

/* Auto-width selects (e.g. the "Show N entries" page-size picker) must keep
   enough right padding for the caret so the value never overlaps the arrow. */
.form-select.w-auto,
.form-select[style*="width: auto"],
.form-select[style*="width:auto"] {
    min-width: 5.5rem !important;
    padding-right: 2.25rem !important;
    background-position: right 0.6rem center !important;
}

.dark-theme .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--on-surface);
    --bs-table-border-color: var(--outline-variant);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
    --bs-table-striped-color: var(--on-surface);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.14);
    color: var(--on-surface) !important;
    border-color: var(--outline-variant) !important;
}

/* Dark-mode plain Bootstrap .table-light headers — pure-Blazor tables (e.g. the
   contra/journal browse table) use <thead class="table-light">, whose Bootstrap
   background stays light and clashes with the dark modal/surface. Override it to
   the themed surface-variant so the header reads as a header in both themes. */
.dark-theme .table-light,
.dark-theme thead.table-light,
.dark-theme .table-light th {
    background-color: var(--surface-variant) !important;
    color: var(--on-surface-variant) !important;
    border-color: var(--outline-variant) !important;
    --bs-table-bg: var(--surface-variant);
    --bs-table-color: var(--on-surface-variant);
}

/* Dark-mode Bootstrap .table-warning rows — the View Issued List cheque-book
   grid (DepositAccountViewS) marks already-printed rows with table-warning,
   which Bootstrap hardcodes to a full-strength #fff3cd bg + black text. That
   glares against the dark table and no longer matches the translucent amber
   already used for the "Printed" badge on the same row (see badge.bg-warning
   override below). Soften it the same way. */
.dark-theme .table-warning {
    --bs-table-bg: rgba(255, 193, 7, 0.16);
    --bs-table-color: var(--on-surface);
    --bs-table-border-color: var(--outline-variant);
    --bs-table-striped-bg: rgba(255, 193, 7, 0.22);
    --bs-table-striped-color: var(--on-surface);
    --bs-table-hover-bg: rgba(255, 193, 7, 0.26);
    --bs-table-hover-color: var(--on-surface);
    color: var(--on-surface) !important;
    border-color: var(--outline-variant) !important;
}

.dark-theme .table-success,
.dark-theme .table-success-subtle {
    --bs-table-bg: rgba(34, 197, 94, 0.15);
    --bs-table-color: var(--on-surface);
    --bs-table-border-color: var(--outline-variant);
    --bs-table-striped-bg: rgba(34, 197, 94, 0.20);
    --bs-table-striped-color: var(--on-surface);
    --bs-table-hover-bg: rgba(34, 197, 94, 0.25);
    --bs-table-hover-color: var(--on-surface);
    color: var(--on-surface) !important;
    border-color: var(--outline-variant) !important;
}

.dark-theme .table-danger,
.dark-theme .table-danger-subtle,
html.dark-theme .table-danger,
[data-bs-theme="dark"] .table-danger {
    --bs-table-bg: rgba(239, 68, 68, 0.16);
    --bs-table-color: var(--on-surface);
    --bs-table-border-color: var(--outline-variant);
    --bs-table-striped-bg: rgba(239, 68, 68, 0.20);
    --bs-table-striped-color: var(--on-surface);
    --bs-table-hover-bg: rgba(239, 68, 68, 0.25);
    --bs-table-hover-color: var(--on-surface);
    color: var(--on-surface) !important;
    border-color: var(--outline-variant) !important;
}

.p-2\.5 {
    padding: 0.625rem !important;
}
.py-2\.5 {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
}
.px-2\.5 {
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
}

/* Dark-mode scrollbars — OS/Bootstrap scrollbars stay light otherwise. Applies to
   every scrollable pane inside the themed wrapper (tables, modals, side menu). */
.dark-theme {
    scrollbar-color: var(--outline-variant) transparent;
}

.dark-theme ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.dark-theme ::-webkit-scrollbar-track {
    background: transparent;
}

.dark-theme ::-webkit-scrollbar-thumb {
    background-color: var(--outline-variant);
    border-radius: 6px;
    border: 2px solid var(--surface);
}

.dark-theme ::-webkit-scrollbar-thumb:hover {
    background-color: var(--on-surface-variant);
}

.dark-theme ::-webkit-scrollbar-corner {
    background: transparent;
}

.dark-theme .form-control,
.dark-theme .form-select {
    background-color: var(--surface) !important;
    color: var(--on-surface) !important;
    border-color: var(--outline-variant) !important;
}

.dark-theme .form-control:focus,
.dark-theme .form-select:focus {
    background-color: var(--surface-variant) !important;
    color: var(--on-surface) !important;
    border-color: var(--primary) !important;
}

.dark-theme .form-check-input {
    background-color: #81848a !important;
    border-color: var(--outline-variant) !important;
}

/* The unconditional rule above was winning over Bootstrap's own :checked styling
   (both same specificity, but !important always applies), so every checkbox/radio/
   switch in dark mode rendered identically whether on or off — measured rgb(129,132,138)
   for both. Light mode never overrides .form-check-input at all, so checked already
   renders Bootstrap's blue there; mirror that same on/off distinction in dark mode
   using the theme's own accent instead of Bootstrap's hardcoded blue. */
.dark-theme .form-check-input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.dark-theme .modal-content {
    background-color: var(--surface) !important;
    color: var(--on-surface) !important;
    border: 1px solid var(--outline-variant) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.dark-theme .dropdown-menu {
    background-color: var(--surface) !important;
    color: var(--on-surface) !important;
    border: 1px solid var(--outline-variant) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.dark-theme .dropdown-item {
    color: var(--on-surface) !important;
}

.dark-theme .dropdown-item:hover {
    background-color: var(--surface-variant) !important;
    color: white !important;
}

.dark-theme .vr {
    background-color: var(--outline) !important;
}

/* Global UI Overrides for Visibility and Consistency */
.list-group-item {
    background-color: transparent !important;
    color: var(--on-surface) !important;
}

.list-group-item .text-muted {
    color: var(--on-surface-variant) !important;
}

.accordion-button {
    color: var(--on-surface) !important;
    background-color: var(--surface) !important;
    transition: all 0.3s ease;
}

/* Global Tab Styling for High Visibility */
.nav-tabs {
    border-bottom: 1px solid var(--outline-variant);
}

.nav-tabs .nav-link {
    border: none !important;
    background: transparent !important;
    color: var(--on-surface-variant) !important;
    font-weight: 700 !important;
    font-size: 13px;
    padding: 12px 20px;
    opacity: 0.75;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent !important;
}

.nav-tabs .nav-link:hover {
    opacity: 1;
    color: var(--primary) !important;
}

.nav-tabs .nav-link.active {
    color: var(--primary) !important;
    opacity: 1;
    border-bottom-color: var(--primary) !important;
}

.dark-theme .nav-tabs .nav-link {
    color: var(--on-surface) !important;
}

/* Global Form Input Styling */
.form-control,
.form-select {
    background-color: var(--card-bg) !important;
    color: var(--on-surface) !important;
    border: 1px solid var(--outline-variant) !important;
    font-size: 13px !important;
    padding: 0.5rem 0.75rem !important;
    transition: all 0.2s ease;
}

/* Bootstrap's .form-select reserves 2.25rem right padding for the caret arrow
   (an SVG painted at right .75rem center). Two problems hide it here:
   1. The grouped rule above flattens right padding to 0.75rem, so a selected
      value (e.g. a long Type-of-Owner / Deposit Category name) paints over it.
   2. Bootstrap's arrow stroke is a fixed #343a40 — invisible on the dark
      (--card-bg) surface in dark mode.
   Restore the caret gutter and repaint the arrow with currentColor so it
   follows the field's text color (--on-surface) in both themes. The
   .form-select.w-auto carve-out below keeps its own position tweak. */
.form-select {
    padding: 0.5rem 2.25rem 0.5rem 0.75rem !important;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-image: var(--bs-form-select-bg-img) !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 16px 12px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 50, 125, 0.1) !important;
}

.dark-theme .form-control,
.dark-theme .form-select {
    background-color: var(--surface-variant) !important;
    border-color: var(--outline) !important;
    color: var(--on-surface) !important;
}

.dark-theme .form-control:focus,
.dark-theme .form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(138, 180, 248, 0.15) !important;
}

.dark-theme .form-control::placeholder {
    color: var(--on-surface-variant);
    opacity: 0.6;
}

/* File input ("Choose file" / Browse). The .form-control rule above themes
   the filename field, but the native Browse button (::file-selector-button /
   ::-webkit-file-upload-button) is not a Bootstrap control — it stays light in
   dark mode. Theme it here for both light and dark so every file picker reads
   correctly. */
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    background-color: var(--surface-variant);
    color: var(--on-surface);
    border: 1px solid var(--outline-variant);
    border-radius: 4px;
    padding: 0.25rem 0.6rem;
    margin-inline-end: 0.5rem;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
    background-color: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}

/* Dark mode fixes for the file-input Browse button:
   - At rest the button used --surface-variant, the SAME color as the .form-control
     field bg in dark mode, so the button was invisible against the field.
   - On hover, --primary is a light blue (#8ab4f8) but --on-primary stays white,
     so white-on-light-blue was low contrast.
   Give the button a distinct primary face and dark text in both states. */
.dark-theme input[type="file"]::file-selector-button,
.dark-theme input[type="file"]::-webkit-file-upload-button {
    background-color: var(--primary);
    color: #06133a;
    border-color: var(--primary);
}
.dark-theme input[type="file"]::file-selector-button:hover,
.dark-theme input[type="file"]::-webkit-file-upload-button:hover {
    background-color: var(--on-surface);
    color: var(--background);
    border-color: var(--on-surface);
}

/* Validation Styling */
.form-control.invalid,
.form-select.invalid {
    border-color: #ef4444 !important;
}

.form-control.valid,
.form-select.valid {
    color: var(--primary) !important;
    /* Brand Blue */
    border-color: var(--primary) !important;
    background-color: rgba(0, 50, 125, 0.02) !important;
}

.form-label {
    color: var(--on-surface-variant);
    font-weight: 600;
}

.dark-theme .form-label {
    color: var(--on-surface);
}

/* Bootstrap builds --bs-secondary-color as rgba(var(--bs-body-color-rgb), .75) and
   substitutes it at :root, so it inherits down already resolved to the LIGHT triplet
   (33,37,41). The dark --bs-body-color-rgb override above lives on #wrapper, which is
   too late to change it. Result: .form-text field help renders near-black on the dark
   surface — measured 1.04:1 contrast, i.e. invisible. Set the colour outright. Same
   root cause as the --bs-body-color-rgb note in the .dark-theme block. */
.dark-theme .form-text {
    color: var(--on-surface-variant) !important;
}

/* Alerts in dark mode — provide soft-tinted dark backdrops so they don't produce blinding pastel slabs */
.dark-theme .alert-info {
    background-color: rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.3);
    color: #bae6fd;
}

.dark-theme .alert-warning {
    background-color: rgba(234, 179, 8, 0.12);
    border-color: rgba(234, 179, 8, 0.3);
    color: #fef08a;
}

.dark-theme .alert-danger {
    background-color: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.dark-theme .alert-success {
    background-color: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

.dark-theme .alert-primary {
    background-color: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.dark-theme .alert-secondary {
    background-color: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
}

.accordion-button:not(.collapsed) {
    background-color: rgba(0, 50, 125, 0.05) !important;
    color: var(--primary) !important;
    box-shadow: inset 0 -1px 0 var(--outline-variant);
}

.accordion-button::after {
    filter: var(--on-surface-filter, none);
    transition: transform 0.3s ease;
}

.dark-theme .accordion-button::after {
    filter: invert(1);
}

.accordion-button.collapsed::after {
    transform: rotate(0deg);
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}

/* DataTables Premium Styling & Visibility Fixes */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: var(--on-surface) !important;
    font-size: 12px;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Compact Footer Layout */
.dataTables_wrapper .dataTables_info {
    padding-top: 10px !important;
    font-weight: 500;
    opacity: 0.8;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 8px !important;
}

table.dataTable {
    border-collapse: collapse !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    border: 1px solid var(--outline-variant) !important;
    width: 100% !important;
}

table.dataTable thead th {
    background-color: #f1f3f5 !important;
    color: var(--on-surface-variant) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 12px;
    padding: 6px 12px !important;
    border-bottom: 2px solid var(--primary) !important;
    border-right: 1px solid var(--outline-variant) !important;
}

.dark-theme table.dataTable thead th {
    background-color: var(--surface-variant) !important;
}

/* Fix for double headers when scrollY is enabled */
.dataTables_scrollBody thead tr {
    visibility: collapse !important;
    height: 0 !important;
}

.dataTables_scrollBody thead th {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Align scrollable headers and body */
.dataTables_scrollHead {
    overflow: hidden !important;
    width: 100% !important;
}

.dataTables_scrollBody {
    width: 100% !important;
}

.dataTables_scrollHeadInner,
.dataTables_scrollHeadInner table.dataTable {
    width: 100% !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
}

.dataTables_scrollBody table.dataTable {
    width: 100% !important;
}

table.dataTable tbody tr {
    background-color: var(--card-bg) !important;
}

table.dataTable tbody tr.odd {
    background-color: #dddddd !important;
}

.dark-theme table.dataTable tbody tr.odd {
    background-color: rgba(255, 255, 255, 0.05) !important;
}


table.dataTable tbody td {
    background-color: transparent !important;
    color: var(--on-surface) !important;
    padding: 4px 12px !important;
    border-bottom: 1px solid var(--outline-variant) !important;
    border-right: 1px solid var(--outline-variant) !important;
    vertical-align: middle;
    font-size: 13px !important;
}

.dark-theme table.dataTable tbody tr.odd {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: rgba(0, 50, 125, 0.05) !important;
}

/* DataTables labels visibility across light and dark themes */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info {
    color: var(--on-surface-variant) !important;
    font-weight: 500;
}

/* Pagination controls - Joined Group Style */
.dataTables_wrapper .dataTables_paginate {
    display: flex;
    align-items: center;
    gap: 0 !important;
    border: 1px solid var(--outline-variant) !important;
    border-radius: 6px !important;
    overflow: hidden;
    background: white !important;
    padding: 0 !important;
}

.dark-theme .dataTables_wrapper .dataTables_paginate {
    background: var(--surface) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate ul.pagination,
.dataTables_wrapper .dataTables_paginate li.page-item,
.dataTables_wrapper .dataTables_paginate a.page-link {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--on-surface) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s;
    cursor: pointer;
    box-shadow: none !important;
    min-width: 38px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.dataTables_wrapper .dataTables_paginate a.page-link {
    padding: 6px 12px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate li.page-item {
    border-right: 1px solid var(--outline-variant) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:last-child,
.dataTables_wrapper .dataTables_paginate li.page-item:last-child {
    border-right: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate li.page-item.active a.page-link {
    background: var(--primary) !important;
    color: white !important;
    font-weight: 700 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled),
.dataTables_wrapper .dataTables_paginate li.page-item:not(.active) a.page-link:hover {
    background: var(--surface-variant) !important;
    color: var(--primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--on-surface-variant) !important;
    opacity: 0.5;
    cursor: default !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    font-weight: 700 !important;
    font-size: 14px !important;
    background: var(--surface-variant) !important;
}

@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_paginate {
        max-width: 100%;
        overflow-x: auto;
        min-width: 0;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button,
    .dataTables_wrapper .dataTables_paginate ul.pagination,
    .dataTables_wrapper .dataTables_paginate li.page-item,
    .dataTables_wrapper .dataTables_paginate a.page-link {
        min-width: 32px !important;
        font-size: 12px !important;
    }
    .dataTables_wrapper .dataTables_paginate a.page-link {
        padding: 4px 8px !important;
    }
}

@media (max-width: 576px) {
    .dataTables_wrapper .dataTables_paginate .paginate_button,
    .dataTables_wrapper .dataTables_paginate ul.pagination,
    .dataTables_wrapper .dataTables_paginate li.page-item,
    .dataTables_wrapper .dataTables_paginate a.page-link {
        min-width: 28px !important;
        font-size: 11px !important;
    }
    .dataTables_wrapper .dataTables_paginate a.page-link {
        padding: 3px 6px !important;
    }
}

/* Length Select and Filter Input */
.dataTables_length,
.dataTables_filter {
    margin-bottom: 12px !important;
}

.dataTables_length select,
.dataTables_filter input {
    background-color: var(--surface) !important;
    color: var(--on-surface) !important;
    border: 1px solid var(--outline-variant) !important;
    border-radius: 6px;
    padding: 2px 6px !important;
    font-size: 12px !important;
    outline: none;
    transition: border-color 0.2s;
}

.dataTables_length select:focus,
.dataTables_filter input:focus {
    border-color: var(--primary) !important;
}

/* Export Buttons */
.dt-buttons .btn {
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
    margin-right: 5px !important;
}

.dt-buttons .btn:last-child {
    margin-right: 0 !important;
}

.dt-buttons .btn:first-child {
    margin-left: 5px !important;
}

.text-dark {
    color: var(--on-surface-variant) !important;
}

/* DataTables Layout Overrides */
.dt-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 5px;

}

.dt-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dt-header-right {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
}

.dt-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 5px;
}

.dt-header-left .dt-buttons {
    margin: 0 !important;
}

.dt-header-left .dataTables_length {
    margin: 0 !important;
}

.dt-header-right .dataTables_filter {
    margin: 0 !important;
}

.dt-header-right .dataTables_filter input {
    width: 250px;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--content-bg);
}

/* Typography Utilities */
.font-9 {
    font-size: 9px !important;
}

.font-10 {
    font-size: 10px !important;
}

.font-11 {
    font-size: 11px !important;
}

.font-12 {
    font-size: 12px !important;
}

.font-13 {
    font-size: 13px !important;
}

.font-14 {
    font-size: 14px !important;
}

.font-15 {
    font-size: 15px !important;
}

.font-16 {
    font-size: 16px !important;
}

.font-18 {
    font-size: 18px !important;
}

.font-20 {
    font-size: 20px !important;
}

.font-22 {
    font-size: 22px !important;
}

.font-24 {
    font-size: 24px !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-800 {
    font-weight: 800 !important;
}


#wrapper {
    min-height: 100vh;
    width: 100%;
    position: relative;
    background-color: var(--content-bg);
    color: var(--on-background);
    transition: background-color 0.3s, color 0.3s;
}

/* ========== Sidebar Structure ========== */
.app-menu {
    width: var(--sidebar-width);
    z-index: 1010;
    background: var(--menu-bg);
    bottom: 0;
    margin-top: 0;
    position: fixed;
    top: 0;
    box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.1);
    transition: width .3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

.content-page {
    margin-left: var(--sidebar-width);
    padding: 0 15px 65px 15px;
    min-height: 100vh;
    background-color: transparent;
    transition: all .3s ease;
}

.navbar-custom {
    padding: 0 10px;
    background: var(--topbar-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: fixed;
    left: var(--sidebar-width);
    right: 0;
    top: 0;
    height: var(--topbar-height);
    z-index: 1000;
    display: flex;
    align-items: center;
    transition: all .3s ease;
    color: var(--topbar-color);
}

.content {
    padding-top: calc(var(--topbar-height) + 24px);
}

.container-fluid {
    --bs-gutter-x: 0.75rem;
    padding-right: 0.375rem !important;
    padding-left: 0.375rem !important;
}

.container-fluid .container-fluid:not([class*="px-"]):not([class*="p-"]) {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.footer {
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    position: absolute;
    padding: 20px;
    border-top: 1px solid var(--outline-variant);
    color: var(--on-surface-variant);
    font-size: 13px;
    transition: all 0.3s ease;
}

/* ========== Responsive Breakpoints ========== */

/* Desktop: Sidebar Collapse (Icon-Only View) */
@media (min-width: 992px) {
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) {
        width: 70px !important;
    }

    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .scrollbar,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) ul.menu,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-item-top,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-item {
        margin: 2px 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        overflow: hidden !important;
        list-style: none !important;
    }

    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-item-sub,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-header-item,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-text,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-link-content,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-header,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-chevron,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-sub,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .collapse,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) [id^="submenu-"],
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .logo-box .logo-full,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) input[type="search"],
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-search-input,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-link.disabled,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-item:not(:has(.menu-icon)) {
        display: none !important;
    }

    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .mt-4,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .mt-3,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .mt-2 {
        margin-top: 2px !important;
    }

    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .logo-box {
        padding: 0 !important;
        width: 70px !important;
        justify-content: center !important;
    }

    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .logo-light {
        width: 100% !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .logo-box .logo-icon {
        display: inline-block !important;
        max-width: 34px !important;
        max-height: 34px !important;
        margin: 0 auto !important;
    }

    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .logo-box .logo-full {
        display: none !important;
        opacity: 0 !important;
    }

    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-link {
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 36px !important;
        height: 36px !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-toggle,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-link-content {
        display: none !important;
    }

    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-icon,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .shell-link,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) a.menu-icon,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) span.menu-icon {
        margin: 0 auto !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 0 !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        text-align: center !important;
    }

    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-icon .material-symbols-outlined,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .shell-link .material-symbols-outlined {
        font-size: 20px !important;
        margin: 0 auto !important;
        display: inline-block !important;
        text-align: center !important;
        line-height: 1 !important;
    }

    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-link:hover .menu-icon,
    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-link:hover .shell-link {
        background-color: rgba(0, 50, 125, 0.12) !important;
        color: var(--primary) !important;
    }

    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-search-container {
        padding: 0 !important;
        margin: 12px 0 4px 0 !important;
        width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-search-box {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 6px !important;
        margin: 0 auto !important;
    }

    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-search-icon {
        margin: 0 auto !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        font-size: 20px !important;
        line-height: 1 !important;
        opacity: 1 !important;
        color: var(--menu-item-color) !important;
    }

    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-search-box:hover .menu-search-icon {
        background-color: rgba(0, 50, 125, 0.12) !important;
        color: var(--primary) !important;
    }

    .dark-theme .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .menu-search-box:hover .menu-search-icon {
        background-color: rgba(138, 180, 248, 0.18) !important;
        color: #8ab4f8 !important;
    }

    .sidebar-collapsed:not(.menu-hover-expanded) .app-menu:not(:hover) .scrollbar {
        overflow-x: hidden !important;
    }

    .sidebar-collapsed .content-page {
        margin-left: 70px !important;
    }

    /* Hover expand sidebar over content when collapsed */
    .sidebar-collapsed .app-menu:hover,
    .sidebar-collapsed.menu-hover-expanded .app-menu {
        width: var(--sidebar-width) !important;
        z-index: 1050 !important;
        box-shadow: 6px 0 25px rgba(0, 0, 0, 0.25) !important;
    }

    .sidebar-collapsed .navbar-custom,
    .sidebar-collapsed .footer {
        left: 70px !important;
        margin-left: 0 !important;
    }

    /* No modal dimming backdrop on desktop */
    .sidebar-overlay {
        display: none !important;
    }
}

/* Mobile & Tablet: Full-width topbar and offcanvas sidebar overlay */
@media (max-width: 991px) {
    .app-menu,
    .detached-layout .app-menu {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: calc(-1 * var(--sidebar-width)) !important;
        width: var(--sidebar-width) !important;
        height: 100vh !important;
        border-radius: 0 !important;
        z-index: 1050 !important;
        margin: 0 !important;
        box-shadow: 0 0 35px rgba(0, 0, 0, 0.25) !important;
    }

    .content-page,
    .detached-layout .content-page {
        margin-left: 0 !important;
        padding: 0 15px 65px 15px !important;
        width: 100% !important;
    }

    .navbar-custom,
    .detached-layout .navbar-custom,
    .sidebar-collapsed .navbar-custom,
    .sidebar-collapsed.detached-layout .navbar-custom {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        width: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        z-index: 1000 !important;
        height: var(--topbar-height) !important;
    }

    .footer,
    .detached-layout .footer,
    .sidebar-collapsed .footer,
    .sidebar-collapsed.detached-layout .footer {
        left: 0 !important;
        right: 0 !important;
        margin-left: 0 !important;
        border-radius: 0 !important;
    }

    .sidebar-open .app-menu,
    .sidebar-open.detached-layout .app-menu {
        left: 0 !important;
    }

    .sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 1040 !important;
        display: none;
    }

    .sidebar-open .sidebar-overlay {
        display: block !important;
    }
}

/* ========== Detached Layout (Desktop >= 992px) ========== */
@media (min-width: 992px) {
    .detached-layout .app-menu {
        left: 15px;
        top: 15px;
        bottom: 15px;
        border-radius: 12px;
        height: calc(100vh - 30px);
        z-index: 1010;
        width: var(--sidebar-width);
    }

    .detached-layout .navbar-custom {
        left: calc(var(--sidebar-width) + 30px);
        right: 15px;
        top: 15px;
        border-radius: 12px;
        width: auto;
        margin-left: 0;
        height: var(--topbar-height);
        z-index: 1000;
    }

    .detached-layout .content-page {
        margin-left: calc(var(--sidebar-width) + 15px);
        padding-top: 15px;
    }

    .detached-layout .footer {
        left: calc(var(--sidebar-width) + 30px);
        right: 15px;
        margin-left: 0;
    }

    /* Detached Layout Collapsed State */
    .sidebar-collapsed.detached-layout .navbar-custom {
        left: 100px !important;
        margin-left: 0;
    }

    .sidebar-collapsed.detached-layout .content-page {
        margin-left: 85px !important;
    }

    .sidebar-collapsed.detached-layout .footer {
        left: 100px !important;
        margin-left: 0;
    }

    .sidebar-collapsed.detached-layout .app-menu:hover,
    .sidebar-collapsed.detached-layout.menu-hover-expanded .app-menu {
        width: var(--sidebar-width) !important;
        z-index: 1050 !important;
        box-shadow: 6px 0 25px rgba(0, 0, 0, 0.25) !important;
    }
}

/* ==========================================================================
   Screen 1024 - 1300: Menu should always be icon only
   Target screens/viewports between 992px and 1300.98px
   ========================================================================== */
@media (min-width: 992px) and (max-width: 1300.98px) {
    /* Menu is forced to 70px icon-only width in resting state */
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) {
        width: 70px !important;
    }

    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .scrollbar,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) ul.menu,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-item-top,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-item {
        margin: 2px 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        overflow: hidden !important;
        list-style: none !important;
    }

    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-item-sub,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-header-item,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-text,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-link-content,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-header,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-chevron,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-sub,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .collapse,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) [id^="submenu-"],
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .logo-box .logo-full,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) input[type="search"],
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-search-input,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-link.disabled,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-item:not(:has(.menu-icon)) {
        display: none !important;
    }

    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .mt-4,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .mt-3,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .mt-2 {
        margin-top: 2px !important;
    }

    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .logo-box {
        padding: 0 !important;
        width: 70px !important;
        justify-content: center !important;
    }

    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .logo-light {
        width: 100% !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .logo-box .logo-icon {
        display: inline-block !important;
        max-width: 34px !important;
        max-height: 34px !important;
        margin: 0 auto !important;
    }

    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .logo-box .logo-full {
        display: none !important;
        opacity: 0 !important;
    }

    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-link {
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 36px !important;
        height: 36px !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-toggle,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-link-content {
        display: none !important;
    }

    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-icon,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .shell-link,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) a.menu-icon,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) span.menu-icon {
        margin: 0 auto !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 0 !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        text-align: center !important;
    }

    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-icon .material-symbols-outlined,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .shell-link .material-symbols-outlined {
        font-size: 20px !important;
        margin: 0 auto !important;
        display: inline-block !important;
        text-align: center !important;
        line-height: 1 !important;
    }

    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-link:hover .menu-icon,
    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-link:hover .shell-link {
        background-color: rgba(0, 50, 125, 0.12) !important;
        color: var(--primary) !important;
    }

    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-search-container {
        padding: 0 !important;
        margin: 12px 0 4px 0 !important;
        width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-search-box {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 6px !important;
        margin: 0 auto !important;
    }

    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-search-icon {
        margin: 0 auto !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        font-size: 20px !important;
        line-height: 1 !important;
        opacity: 1 !important;
        color: var(--menu-item-color) !important;
    }

    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-search-box:hover .menu-search-icon {
        background-color: rgba(0, 50, 125, 0.12) !important;
        color: var(--primary) !important;
    }

    .dark-theme #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .menu-search-box:hover .menu-search-icon {
        background-color: rgba(138, 180, 248, 0.18) !important;
        color: #8ab4f8 !important;
    }

    #wrapper:not(.sidebar-open):not(.menu-hover-expanded) .app-menu:not(:hover) .scrollbar {
        overflow-x: hidden !important;
    }

    /* Page layout: content page, topbar, and footer offset */
    .content-page {
        margin-left: 70px !important;
    }

    .navbar-custom,
    .footer {
        left: 70px !important;
        margin-left: 0 !important;
    }

    /* Detached layout: 15px margin + 70px menu + 15px gap = 100px navbar/footer, 85px content */
    .detached-layout .navbar-custom {
        left: 100px !important;
        margin-left: 0 !important;
    }

    .detached-layout .content-page {
        margin-left: 85px !important;
    }

    .detached-layout .footer {
        left: 100px !important;
        margin-left: 0 !important;
    }

    /* Hover expand AND Hamburger-expanded float over content without shifting page layout */
    .app-menu:hover,
    .detached-layout .app-menu:hover,
    .menu-hover-expanded .app-menu,
    .menu-hover-expanded.detached-layout .app-menu,
    .sidebar-open .app-menu,
    .sidebar-open.detached-layout .app-menu {
        width: var(--sidebar-width) !important;
        z-index: 1050 !important;
        box-shadow: 6px 0 25px rgba(0, 0, 0, 0.25) !important;
    }

    /* No modal dimming backdrop on screen 1024 - acts as hover floating over content */
    .sidebar-overlay {
        display: none !important;
    }
}

/* ========== Menu Styles ========== */
.logo-box {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 16px;
    background: #fff;
    overflow: hidden !important;
    position: relative;
    width: 100% !important;
    box-sizing: border-box;
    flex-shrink: 0;
}

@media (min-width: 992px) {
    .detached-layout .logo-box {
        border-radius: 12px 12px 0 0;
    }
}

.logo-box img {
    max-width: 200px;
    height: auto;
    object-position: left center;
}

.logo-box .logo-icon {
    display: none;
    max-width: 34px;
    max-height: 34px;
    object-fit: contain;
}

.logo-box .logo-full {
    display: inline-block;
    max-width: 200px;
    height: auto;
    object-fit: contain;
    object-position: left center;
}

.sidebar-collapsed .app-menu:hover .logo-box {
    justify-content: flex-start !important;
    padding: 0 16px !important;
}

.sidebar-collapsed .app-menu:hover .logo-box .logo-icon {
    display: none !important;
}

.sidebar-collapsed .app-menu:hover .logo-box .logo-full {
    display: inline-block !important;
    animation: logoReveal 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.05s both;
}

@keyframes logoReveal {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.logo-light {
    background: #fff;
    border-radius: 4px;
    padding: 2px 4px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    text-decoration: none;
    max-width: 100%;
}

/* Menu Search Styles */
.menu-search-container {
    padding: 0 14px;
    margin: 12px 0 6px 0;
    height: 36px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.menu-search-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 36px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0 10px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.dark-theme .menu-search-box {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}

.menu-search-box:focus-within {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--primary);
}

.menu-search-icon {
    font-size: 18px;
    color: var(--menu-item-color);
    opacity: 0.8;
    margin-right: 8px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dark-theme .menu-search-icon {
    color: #8ab4f8;
    opacity: 0.95;
}

.menu-search-input {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 13px;
    color: var(--on-surface) !important;
    width: 100%;
    height: 100%;
    box-shadow: none !important;
    outline: none !important;
}

.menu-search-input::placeholder {
    color: var(--menu-item-color);
    opacity: 0.7;
    font-size: 12px;
}

.scrollbar {
    flex: 1;
    overflow-y: auto;
}

.menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-link {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    color: var(--menu-item-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all .2s;
}

.menu-link:hover {
    color: var(--primary);
    background-color: rgba(0, 50, 125, 0.08);
}

.menu-link.disabled {
    opacity: 0.5;
    cursor: default;
}

.menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    margin-right: 12px;
    font-size: 20px;
}

/* ========== Topbar Styles ========== */
.button-toggle-menu {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topbar-item {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.topbar-date-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .15s ease;
}

    .topbar-date-link:hover {
        opacity: 1 !important;
        color: inherit;
    }

.nav-link {

    text-decoration: none;
    background: none;
    border: none;
}

.dark-theme .nav-link {
    color: white !important;
}

.badge-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #ff4d4d;
    border: 2px solid #546ee5;
    border-radius: 50%;
}

.bg-white-opacity {
    background: rgba(255, 255, 255, 0.2);
}

.bg-black-opacity {
    background: rgba(0, 0, 0, 0.1);
}

.rounded-circle {
    border-radius: 50% !important;
}

/* Dropdowns */
.dropdown-menu {
    position: absolute;
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: 8px;
    z-index: 1050;
    margin-top: 5px;
    display: none;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    color: var(--on-surface);
    text-decoration: none;
    border: none;
    background: transparent;
    text-align: left;
    transition: background 0.2s;
}

.dropdown-item:hover {
    background: var(--surface-container-low);
    color: var(--primary);
}

/* App-grid shortcut dropdown (topbar). These classes came from the legacy
   Hyper template's bootstrap CSS, which isn't the bootstrap loaded here, so
   without these rules the grid dropdown rendered unstyled (icons stacked as
   plain links, no fixed width). */
.dropdown-lg {
    width: 320px;
    padding: 0;
}

.dropdown-icon-item {
    display: block;
    border-radius: 6px;
    text-align: center;
    padding: 12px 4px 10px;
    border: 1px solid transparent;
    color: var(--on-surface);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.dropdown-icon-item .material-symbols-outlined {
    font-size: 26px;
    display: block;
    margin: 0 auto 4px;
}

.dropdown-icon-item span:last-child {
    display: block;
    font-size: 12px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-icon-item:hover {
    background: var(--surface-container-low);
    border-color: var(--outline-variant);
}

/* Topbar dropdown backdrop and elevated stacking */
.navbar-custom.has-open-dropdown {
    z-index: 1060;
}

.topbar-dropdown-backdrop {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    background: transparent;
    cursor: default;
}

.navbar-custom .dropdown-menu.show {
    z-index: 20;
}

/* ========== Streamlined Theme Customizer (Narrower & Less Bulky) ========== */
.offcanvas-settings {
    position: fixed;
    top: 0;
    right: -280px;
    /* Reduced from 320px */
    width: 280px;
    /* Reduced from 320px */
    height: 100vh;
    background: var(--surface);
    z-index: 2000;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    padding: 16px;
    /* Reduced from 24px */
    color: var(--on-surface);
}

.offcanvas-settings.open {
    right: 0;
}

.offcanvas-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1999;
    display: none;
}

.offcanvas-overlay.open {
    display: block;
}

/* Right-hand slide-over panel (SidePanel.razor) — operator console tenant
   actions and the attach/provision forms. */
.sidepanel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(620px, 100vw);
    background: var(--surface, #fff);
    z-index: 2000;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    display: flex;
    flex-direction: column;
}

.sidepanel.open {
    transform: translateX(0);
}

.sidepanel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1999;
    display: none;
}

.sidepanel-overlay.open {
    display: block;
}

.sidepanel-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
}

.sidepanel-header {
    flex: 0 0 auto;
}

.sidepanel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidepanel .min-width-0 {
    min-width: 0;
}

.offcanvas-settings .btn-close {
    padding: 4px;
    font-size: 12px;
}
/* Bootstrap's .btn-close is a dark X — invisible on the dark panel. Invert it
   in dark mode so the close glyph stays visible. (.dark-theme is applied
   directly to .offcanvas-settings because the panel lives outside #wrapper.) */
.offcanvas-settings.dark-theme .btn-close {
    filter: invert(1) grayscale(100%) brightness(1.5);
}

.offcanvas-settings h4 {
    font-size: 16px;
    /* Smaller title */
    margin: 0;
}

.setting-group {
    margin-bottom: 24px;
    /* Tighter spacing */
}

.setting-group h5 {
    font-size: 10px;
    /* Smaller labels */
    letter-spacing: 0.5px;
}

/* Theme customizer option buttons. These are bare <button>s (no .btn class),
   so without explicit bg/border/color they fall back to the user-agent default
   — a light-grey native button that looks broken on the dark panel and has no
   visible "selected" state. Theme them with the surface/border variables and
   give .active a primary-tinted face in both light and dark. */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 6px;
    background-color: var(--card-bg);
    color: var(--on-surface);
    border: 1px solid var(--outline-variant);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.theme-toggle-btn:hover {
    background-color: var(--surface-variant);
    border-color: var(--outline);
}
.theme-toggle-btn.active {
    background-color: var(--primary-container);
    color: var(--on-primary-container);
    border-color: var(--primary);
}

/* Theme-customizer tab bar (Support / Theme) — mirrors the legacy
   nav-bordered nav-justified tab strip in the theme-settings offcanvas. */
.settings-tabbar {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--outline-variant);
}
.settings-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background-color: transparent;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.settings-tab-btn .material-symbols-outlined { font-size: 22px; }
.settings-tab-btn:hover {
    background-color: var(--surface-variant);
    color: var(--on-surface);
}
.settings-tab-btn.active {
    background-color: var(--surface);
    color: var(--primary);
    border-color: var(--outline-variant);
}

/* Support phone-number list in the Support tab. */
.support-numbers {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: var(--on-surface);
}
.support-numbers li {
    position: relative;
    padding: 3px 0 3px 18px;
}
.support-numbers li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    width: 7px;
    height: 7px;
    border: 1.5px solid var(--primary);
    border-radius: 50%;
}
.support-numbers a, .setting-group a {
    color: var(--primary);
}

/* Footer "Support" shortcut — opens the Support tab of the settings offcanvas. */
.footer-support-link {
    color: var(--on-surface-variant);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}
.footer-support-link:hover {
    color: var(--primary);
    text-decoration: none;
}

/* Shared Page Components */
.card {
    background-color: var(--card-bg) !important;
    color: var(--on-surface) !important;
    border: 1px solid var(--outline-variant);
}

.text-muted {
    color: var(--on-surface-variant) !important;
}

/* ========== Dashboard Premium Styles ========== */
.glass-card {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dark-theme .glass-card {
    background: rgba(36, 43, 61, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.12);
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon .material-symbols-outlined {
    font-size: 24px;
}

.stat-label {
    font-size: 13px;
    color: var(--on-surface-variant);
    margin-bottom: 4px;
    font-weight: 500;
}

.stat-value {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
}

.stat-trend {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.trend-up {
    color: #10b981;
}

.trend-down {
    color: #ef4444;
}

/* Widget Variants */
.border-l-blue {
    border-left: 4px solid #3b82f6;
}

.border-l-green {
    border-left: 4px solid #10b981;
}

.border-l-orange {
    border-left: 4px solid #ffc107;
}

.border-l-purple {
    border-left: 4px solid #8b5cf6;
}

.border-t-blue {
    border-top: 4px solid #3b82f6;
}

.border-t-green {
    border-top: 4px solid #10b981;
}

.border-t-orange {
    border-top: 4px solid #ffc107;
}

.border-t-purple {
    border-top: 4px solid #8b5cf6;
}

.border-t-teal {
    border-top: 4px solid #14b8a6;
}

.bg-soft-blue {
    background: rgba(59, 130, 246, 0.1);
}

.bg-soft-green {
    background: rgba(16, 185, 129, 0.1);
}

.bg-soft-orange {
    background: rgba(255, 193, 7, 0.1);
}

.bg-soft-purple {
    background: rgba(139, 92, 246, 0.1);
}

.bg-soft-red {
    background: rgba(239, 68, 68, 0.1);
}

.bg-soft-info {
    background: rgba(6, 182, 212, 0.1);
}

.bg-soft-teal {
    background: rgba(20, 184, 166, 0.1);
}

.text-blue {
    color: #3b82f6 !important;
}

.text-green {
    color: #10b981 !important;
}

.text-orange {
    color: #ffc107 !important;
}

.text-purple {
    color: #8b5cf6 !important;
}

.text-teal {
    color: #14b8a6 !important;
}

.text-red {
    color: #ef4444 !important;
}

.text-info {
    color: #06b2d2 !important;
}

/* Kanban Styles */
.kanban-column {
    padding: 20px;
    min-height: 500px;
}

.kanban-tasks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kanban-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--outline-variant);
    cursor: grab;
    transition: all 0.2s;
}

.kanban-card:hover {
    border-color: var(--primary);
}

.card-priority {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
}

.card-priority.high {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.card-priority.medium {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
}

.card-priority.low {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.sortable-ghost {
    opacity: 0.4;
    border: 2px dashed #3b82f6 !important;
    background: rgba(59, 130, 246, 0.05) !important;
}


.task-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
}

.task-desc {
    font-size: 12px;
    color: var(--on-surface-variant);
    margin-bottom: 0;
}

.task-date {
    font-size: 11px;
    color: var(--on-surface-variant);
    display: flex;
    align-items: center;
    gap: 4px;
}

.member-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid white;
}

.btn-add-task {
    background: rgba(0, 0, 0, 0.03);
    border: 1px dashed var(--outline-variant);
    padding: 12px;
    border-radius: 12px;
    color: var(--on-surface-variant);
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s;
}

.btn-add-task:hover {
    background: rgba(59, 130, 246, 0.05);
    border-color: #3b82f6;
    color: #3b82f6;
}

/* Clickable cards/widgets (dashboard report links etc.) */
.cursor-pointer {
    cursor: pointer;
}

/* Animations */
.fade-in {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.bg-blue {
    background: #3b82f6;
}

.bg-green {
    background: #10b981;
}

.bg-orange {
    background: #ffc107;
}

.bg-teal {
    background: #14b8a6;
}

.glass-pill {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(5px);
    border-radius: 50px;
    padding: 4px;
    display: flex;
    gap: 4px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.bg-soft-red {
    background: rgba(239, 68, 68, 0.1) !important;
}

.bg-soft-green {
    background: rgba(16, 185, 129, 0.1) !important;
}

.bg-soft-blue {
    background: rgba(59, 130, 246, 0.1) !important;
}

.bg-soft-orange {
    background: rgba(255, 193, 7, 0.1) !important;
}

.bg-soft-purple {
    background: rgba(139, 92, 246, 0.1) !important;
}

.bg-soft-info {
    background: rgba(6, 182, 212, 0.1) !important;
}

/* Soft Buttons */
.btn-soft-primary {
    background-color: rgba(0, 50, 125, 0.08);
    color: var(--primary);
    border: none;
}

.btn-soft-primary:hover {
    background-color: var(--primary);
    color: white;
}

.btn-soft-info {
    background-color: rgba(6, 182, 212, 0.1);
    color: #06b2d2;
    border: none;
}

.btn-soft-info:hover {
    background-color: #06b2d2;
    color: white;
}

.btn-soft-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: none;
}

.btn-soft-success:hover {
    background-color: #10b981;
    color: white;
}

.btn-soft-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: none;
}

.btn-soft-danger:hover {
    background-color: #ef4444;
    color: white;
}

.btn-soft-warning {
    background-color: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border: none;
}

.btn-soft-warning:hover {
    background-color: #ffc107;
    color: white;
}

div.dataTables_wrapper div.dataTables_length select {
    width: 50% !important;
}

/* Toast Notifications */
#toast-container {
    position: fixed !important;
    top: calc(var(--topbar-height, 70px) + 16px) !important;
    right: 24px !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    pointer-events: none !important;
}

.toast-message {
    background: var(--surface);
    color: var(--on-surface);
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    min-width: 300px;
    border: 1px solid var(--outline-variant);
    pointer-events: auto;
}

.toast-success {
    border-left: 4px solid #2e7d32;
}

.toast-error {
    border-left: 4px solid #d32f2f;
}

.toast-warning {
    border-left: 4px solid #ffc107;
}

.toast-info {
    border-left: 4px solid var(--primary);
}

.toast.fade-in, .toast-notification.fade-in {
    animation: slideIn 0.3s ease-out forwards;
}

.toast.fade-out, .toast-notification.fade-out {
    animation: slideOut 0.3s ease-in forwards;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Registration Tabs Styling */
.registration-tabs .nav-link {
    border: none;
    padding: 1.25rem;
    color: var(--on-surface-variant);
    font-weight: 600;
    transition: all 0.2s;
    border-bottom: 2px solid transparent !important;
    opacity: 0.7;
    background: transparent !important;
}

.registration-tabs .nav-link.active {
    color: var(--primary) !important;
    border-bottom-color: var(--primary) !important;
    opacity: 1;
}

.nepali-font {
    font-family: 'Preeti', 'Kantipur', sans-serif;
    font-size: 20px !important;
}

/* Keep .form-control inputs using the 20px Preeti font the same height as a
   standard .form-control (~38px = 16px*1.5 + 12px padding + 2px border): at
   20px font, line-height 1.2 gives 20*1.2 + 12 + 2 = 38px with identical
   padding alignment. Applies to every Nepali input app-wide. */
.form-control.nepali-font {
    line-height: 1.2;
}

/* Premium Design System Components */
.modal-backdrop-custom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-primary-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, #4facfe 100%);
}

.btn-premium-option {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    border: 1px solid var(--outline-variant);
    border-radius: 12px;
    background: white;
    transition: all 0.2s ease;
}

.btn-premium-option:hover {
    border-color: var(--primary);
    background: #f0f7ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
/* Member Detail & Profile Components */
.member-photo-container {
    width: 140px;
    height: 140px;
    border-radius: 24px;
    overflow: hidden;
    border: 4px solid white;
    background: white;
}

.dark-theme .member-photo-container,
[data-bs-theme="dark"] .member-photo-container {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(36, 43, 61, 0.7);
}

.member-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-label {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--on-surface-variant, #64748b);
    display: block;
    margin-bottom: 3px;
    letter-spacing: 0.5px;
}

.detail-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--on-surface, #0f172a);
    word-break: break-word;
}

.detail-value-nep {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--primary, #0369a1);
    word-break: break-word;
}

.bg-soft-primary { background: rgba(0, 50, 125, 0.08); }
.bg-soft-success { background: rgba(34, 197, 94, 0.15); }
.bg-soft-danger { background: rgba(239, 68, 68, 0.15); }
.bg-soft-warning { background: rgba(255, 193, 7, 0.15); }
.bg-soft-info { background: rgba(6, 182, 212, 0.15); }
.bg-soft-light { background: var(--surface-variant); }

.btn-soft-secondary {
    background: var(--surface-variant);
    color: var(--on-surface);
    border: 1px solid var(--outline-variant);
}

.btn-soft-secondary:hover {
    background: var(--outline-variant);
    color: var(--primary);
}

.btn-soft-primary {
    background: rgba(138, 180, 248, 0.1);
    color: var(--primary);
    border: 1px solid var(--primary);
}

.btn-icon-only {
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.manage-pills .nav-link {
    border-radius: 8px;
    color: var(--on-surface-variant);
    padding: 10px 15px;
    transition: all 0.2s;
    border: 1px solid transparent;
    margin-bottom: 4px;
    background: transparent;
}

.manage-pills .nav-link:hover {
    background: var(--surface-variant);
    color: var(--primary);
    border-color: var(--outline-variant);
}

.manage-pills .nav-link.active {
    background: var(--primary) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(0, 50, 125, 0.2);
    border-color: var(--primary);
}

.text-muted-light {
    color: #64748b;
}

/* ========== Global Search Component (gs-) ========== */
.gs-wrapper {
    width: 100%;
    max-width: 480px;
    min-width: 160px;
}

.update-available-banner {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1080 !important;
    min-height: 38px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}

.gs-input-container {
    position: relative;
}

.gs-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.6);
    font-size: 18px;
    pointer-events: none;
    z-index: 5;
}

.gs-input,
.navbar-custom .gs-input,
input.gs-input {
    width: 100%;
    height: 36px;
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    background: rgba(255,255,255,0.2) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    padding-left: 38px !important;
    padding-right: 40px !important;   /* icon-only scope picker sits inside the right end */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: all 0.2s ease;
    outline: none;
}

.gs-input::placeholder,
.navbar-custom .gs-input::placeholder {
    color: #ffffff !important;
    opacity: 0.9 !important;
    font-weight: 500;
}

.gs-input:focus {
    background: rgba(255,255,255,0.3) !important;
    border-color: rgba(255,255,255,0.7) !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.2) !important;
}

.dark-theme .gs-input,
.dark-theme .navbar-custom .gs-input {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}

.dark-theme .gs-input::placeholder,
.dark-theme .navbar-custom .gs-input::placeholder {
    color: #ffffff !important;
    opacity: 0.95 !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.dark-theme .gs-input-icon {
    color: #ffffff !important;
    opacity: 0.95 !important;
}

.dark-theme .gs-input:focus,
.dark-theme .navbar-custom .gs-input:focus {
    background: rgba(255, 255, 255, 0.26) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
}

.gs-spinner {
    position: absolute;
    right: 38px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 18px;
    animation: gs-spin 0.8s linear infinite;
}

@keyframes gs-spin {
    from { transform: translateY(-50%) rotate(0deg); }
    to   { transform: translateY(-50%) rotate(360deg); }
}

/* Dropdown panel */
.gs-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    min-width: 320px;
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: 10px;
    z-index: 1200;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

/* Search type tabs */
.gs-tabs {
    display: flex;
    border-bottom: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
}

.gs-tab {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    color: var(--on-surface-variant);
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
    user-select: none;
}

.gs-tab:hover:not(.gs-tab-active) {
    color: var(--primary);
    background: rgba(0,50,125,0.04);
}

.gs-tab-active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: var(--surface);
}

/* Scrollable results area */
.gs-results {
    max-height: 380px;
    overflow-y: auto;
    padding: 6px;
}

.gs-empty {
    text-align: center;
    padding: 20px;
    color: var(--on-surface-variant);
    font-size: 13px;
}

/* Member group card */
.gs-member-group {
    border: 1px solid var(--outline-variant);
    border-radius: 6px;
    margin-bottom: 6px;
    overflow: hidden;
}

.gs-member-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--surface-container-low);
    cursor: pointer;
    transition: background 0.15s;
}

.gs-member-header:hover {
    background: var(--surface-variant);
}

.gs-member-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--on-surface);
    flex-grow: 1;
}

.gs-member-cid {
    font-size: 11px;
    color: var(--on-surface-variant);
    margin-left: 4px;
}

.gs-member-link {
    color: var(--primary);
    font-size: 18px;
    opacity: 0.7;
}

/* Account items */
.gs-account-list {
    padding: 4px;
    background: var(--surface);
    border-top: 1px solid var(--outline-variant);
}

.gs-account-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.12s;
    margin-bottom: 2px;
}

.gs-account-item:hover {
    background: var(--surface-container-low);
}

.gs-account-name {
    flex-grow: 1;
    color: var(--on-surface);
    font-size: 12px;
}

.gs-account-no {
    font-size: 11px;
    color: var(--on-surface-variant);
    white-space: nowrap;
}

/* Account type badges */
.gs-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
}

.gs-badge-deposit {
    background: #e3f2fd;
    color: #1976d2;
    border: 1px solid #bbdefb;
}

.gs-badge-loan {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffe0b2;
}

.gs-badge-share {
    background: #f3e5f5;
    color: #7b1fa2;
    border: 1px solid #e1bee7;
}

/* Dark mode badge overrides */
.dark-theme .gs-badge-deposit { background: rgba(25,118,210,0.15); border-color: rgba(25,118,210,0.3); color: #90caf9; }
.dark-theme .gs-badge-loan    { background: rgba(230,81,0,0.15);   border-color: rgba(230,81,0,0.3);   color: #ffcc80; }
.dark-theme .gs-badge-share   { background: rgba(123,31,162,0.15); border-color: rgba(123,31,162,0.3); color: #ce93d8; }

/* Matured ("90") accounts are listed alongside open ones, flagged with a muted badge */
.gs-badge-matured {
    background: #eceff1;
    color: #546e7a;
    border: 1px solid #cfd8dc;
    margin-left: 6px;
}
.dark-theme .gs-badge-matured { background: rgba(144,164,174,0.15); border-color: rgba(144,164,174,0.3); color: #b0bec5; }

/* Hubs tab results (hub cards searched in memory) */
.gs-hub-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    margin-bottom: 2px;
}

.gs-hub-item:hover,
.gs-hub-item-active {
    background: var(--surface-container-low);
}

.gs-hub-item-active {
    box-shadow: inset 3px 0 0 var(--primary);
}

.gs-hub-icon {
    font-size: 20px;
    color: var(--primary);
    opacity: 0.85;
    flex-shrink: 0;
}

.gs-hub-text {
    flex-grow: 1;
    min-width: 0;
}

.gs-hub-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-hub-path {
    font-size: 11px;
    color: var(--on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Scope picker inside the right end of the search box (sits on the navy top bar) */
.gs-scope-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s ease;
}

.gs-scope-btn:hover,
.gs-scope-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.3);
}

.gs-scope-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 1px;
}

.gs-scope-icon { font-size: 17px; }

.gs-scope-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: 8px;
    z-index: 1210;
}

.gs-scope-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--on-surface);
    cursor: pointer;
    user-select: none;
}

.gs-scope-option .material-symbols-outlined { font-size: 18px; color: var(--on-surface-variant); }
.gs-scope-option:hover { background: var(--surface-container-low); }

.gs-scope-option-active,
.gs-scope-option-active .material-symbols-outlined {
    color: var(--primary);
    font-weight: 600;
}

.gs-scope-check { margin-left: auto; }


/* `bg-warning text-dark` badges (e.g. the Quarterly type badge, the Printed /
   Used cheque badges) keep Bootstrap's full-strength yellow in dark mode, which
   glares against the dark surface. Soften to a translucent amber with light
   text — same shape as the gs-badge overrides above. The compound selector
   only hits badges that pair warning + dark text, so `text-dark` on other
   backgrounds is untouched. */
.dark-theme .badge.bg-warning.text-dark {
    background-color: rgba(255, 193, 7, 0.18) !important;
    color: #ffcc80 !important;
    border: 1px solid rgba(255, 193, 7, 0.35);
}

/* The other deposit-type badges (Special / Recurring / Maturity / fallback) use
   the saturated Bootstrap bg-primary/success/danger/secondary, which read too
   hot in dark mode. Soften them the same way. Scoped to .badge so non-badge
   uses of these backgrounds (modal headers, topbar, etc.) are unaffected. */
.dark-theme .badge.bg-primary {
    background-color: rgba(25, 118, 210, 0.18) !important;
    color: #90caf9 !important;
    border: 1px solid rgba(25, 118, 210, 0.35);
}
.dark-theme .badge.bg-success {
    background-color: rgba(34, 197, 94, 0.18) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(34, 197, 94, 0.35);
}
.dark-theme .badge.bg-danger {
    background-color: rgba(220, 53, 69, 0.18) !important;
    color: #f4889a !important;
    border: 1px solid rgba(220, 53, 69, 0.35);
}
.dark-theme .badge.bg-secondary {
    background-color: rgba(148, 163, 184, 0.18) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(148, 163, 184, 0.35);
}
.dark-theme .badge.bg-light,
.dark-theme .badge.bg-light.text-dark,
.dark-theme .badge.bg-light.text-body {
    background-color: var(--surface-variant) !important;
    color: var(--on-surface) !important;
    border: 1px solid var(--outline-variant) !important;
}

/* Simple-tone badges for all deposit types */
.badge-special {
    background-color: rgba(13, 110, 253, 0.12) !important;
    color: #0d6efd !important;
    border: 1px solid rgba(13, 110, 253, 0.28) !important;
}

.badge-recurring {
    background-color: rgba(25, 135, 84, 0.12) !important;
    color: #198754 !important;
    border: 1px solid rgba(25, 135, 84, 0.28) !important;
}

.badge-quarterly {
    background-color: rgba(180, 101, 44, 0.12) !important;
    color: #8c582f !important;
    border: 1px solid rgba(180, 101, 44, 0.28) !important;
}

.badge-maturity,
.badge-purple {
    background-color: rgba(91, 74, 120, 0.12) !important;
    color: #5b4a78 !important;
    border: 1px solid rgba(91, 74, 120, 0.28) !important;
}

.dark-theme .badge-special,
[data-bs-theme="dark"] .badge-special {
    background-color: rgba(25, 118, 210, 0.2) !important;
    color: #90caf9 !important;
    border: 1px solid rgba(25, 118, 210, 0.35) !important;
}

.dark-theme .badge-recurring,
[data-bs-theme="dark"] .badge-recurring {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(34, 197, 94, 0.35) !important;
}

.dark-theme .badge-quarterly,
[data-bs-theme="dark"] .badge-quarterly {
    background-color: rgba(180, 101, 44, 0.2) !important;
    color: #f6c08d !important;
    border: 1px solid rgba(180, 101, 44, 0.35) !important;
}

.dark-theme .badge-maturity,
[data-bs-theme="dark"] .badge-maturity,
.dark-theme .badge-purple,
[data-bs-theme="dark"] .badge-purple {
    background-color: rgba(147, 112, 219, 0.2) !important;
    color: #d8b4fe !important;
    border: 1px solid rgba(147, 112, 219, 0.35) !important;
}

/* Passbook verify quick form in Statements tab */
.passbook-verify-bar {
    background-color: rgba(25, 135, 84, 0.08) !important;
    border-color: rgba(25, 135, 84, 0.25) !important;
}
.passbook-verify-bar .form-label {
    color: #198754;
    font-weight: 600;
}
.dark-theme .passbook-verify-bar {
    background-color: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
    color: var(--on-surface) !important;
}
.dark-theme .passbook-verify-bar .form-label {
    color: #86efac !important;
}
.dark-theme .passbook-verify-bar .fw-700 {
    color: var(--on-surface) !important;
}

/* Custom scrollbar inside dropdown */
.gs-results.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.gs-results.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.gs-results.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: 3px; }
.gs-results.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--outline); }

/* Responsive */
@media (max-width: 768px) {
    .gs-wrapper { max-width: 100%; }
    .gs-dropdown { min-width: 280px; }
    .gs-input { font-size: 12px !important; height: 34px; }
}

/* ── Boot progress (driven by --blazor-load-percentage from blazor.webassembly.js) ── */
.app-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.loading-progress {
    width: 8rem;
    height: 8rem;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #0d6efd;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    margin-top: -5.2rem;
    height: 2rem;
    font-weight: 600;
    font-size: 1.1rem;
    color: #0d6efd;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

.loading-progress-title {
    margin-top: 3.5rem;
    font-weight: 600;
    color: #6c757d;
}

/* ── Deposit account views (/deposits/{type}/{acct}) ──────────────────────────
   These screens are dense forms and grids inside tabs. `body` sets no
   font-size, so any element without a font-* utility falls back to the 16px
   browser default and reads oversized beside the font-10/11/12 text used
   throughout the same panels. One base size for the whole view keeps it even.
   The font-* utilities carry !important, so anything explicitly sized still
   wins over these rules. */
.deposit-view {
    font-size: 13px;
}

.deposit-view .form-label {
    font-size: 12px;
    margin-bottom: .25rem;
}

.deposit-view .form-control,
.deposit-view .form-select {
    font-size: 13px;
}

.deposit-view .form-check-label {
    font-size: 12px;
}

.deposit-view table td,
.deposit-view table th {
    font-size: 12px;
}

.deposit-view .nav-tabs .nav-link,
.deposit-view .nav-pills .nav-link {
    font-size: 12px;
    padding: 6px 10px !important;
    line-height: 1.25 !important;
}

@media (min-width: 1400px) {
    .deposit-view .nav-tabs .nav-link,
    .deposit-view .nav-pills .nav-link {
        padding: 7px 14px !important;
        font-size: 12.5px;
    }
}

@media (min-width: 1600px) {
    .deposit-view .nav-tabs .nav-link,
    .deposit-view .nav-pills .nav-link {
        padding: 8px 18px !important;
        font-size: 13px;
    }
}

@media (min-width: 1920px) {
    .deposit-view .nav-tabs .nav-link,
    .deposit-view .nav-pills .nav-link {
        padding: 9px 22px !important;
        font-size: 13px;
    }
}

/* Buttons carry no size override elsewhere in the app, so they fall back to
   Bootstrap's 1rem (.btn) and .875rem (.btn-sm) — noticeably larger than the
   12-13px content around them in these tabs. Bring them onto the same scale.
   Explicit font-* utilities still win, since those carry !important. */
.deposit-view .btn {
    font-size: 12px;
    padding: .3rem .65rem;
}

.deposit-view .btn-sm {
    font-size: 11px;
    padding: .2rem .5rem;
}

.deposit-view .list-group-item,
.deposit-view .dropdown-item {
    font-size: 12px;
}

/* LoanView uses the same dense form scale as the deposit view above. Without
   this, LoanView's form-label/form-control/btn fall back to Bootstrap's 16px
   default, so the Modes tabs (esp. Collection) render noticeably larger than
   the deposit screens. Mirrors .deposit-view; explicit font-* utilities still
   win via !important. */
.loan-view {
    font-size: 13px;
}

.loan-view .form-label {
    font-size: 12px;
    margin-bottom: .25rem;
}

.loan-view .form-control,
.loan-view .form-select {
    font-size: 13px;
}

.loan-view .form-check-label {
    font-size: 12px;
}

.loan-view table td,
.loan-view table th {
    font-size: 12px;
}

.loan-view .nav-tabs .nav-link,
.loan-view .nav-pills .nav-link {
    font-size: 12px;
    padding: 6px 10px !important;
    line-height: 1.25 !important;
}

@media (min-width: 1400px) {
    .loan-view .nav-tabs .nav-link,
    .loan-view .nav-pills .nav-link {
        padding: 7px 14px !important;
        font-size: 12.5px;
    }
}

@media (min-width: 1600px) {
    .loan-view .nav-tabs .nav-link,
    .loan-view .nav-pills .nav-link {
        padding: 8px 18px !important;
        font-size: 13px;
    }
}

@media (min-width: 1920px) {
    .loan-view .nav-tabs .nav-link,
    .loan-view .nav-pills .nav-link {
        padding: 9px 22px !important;
        font-size: 13px;
    }
}

.loan-view .btn {
    font-size: 12px;
    padding: .3rem .65rem;
}

.loan-view .btn-sm {
    font-size: 11px;
    padding: .2rem .5rem;
}

.loan-view .list-group-item,
.loan-view .dropdown-item {
    font-size: 12px;
}

/* ── Account Detail tab: hero summary banner ─────────────────────────────────
   Reuses the app's existing topbar gradient (--topbar-bg/--topbar-color,
   already defined for both light and dark theme) so the hero reads as a
   brand accent rather than an arbitrary new color, and needs zero extra
   dark-mode work. */
.deposit-view .detail-hero {
    background: var(--topbar-bg);
    color: var(--topbar-color);
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.deposit-view .detail-hero .hero-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: rgba(255, 255, 255, .8);
}

.deposit-view .detail-hero .hero-value {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
}

.deposit-view .detail-hero .hero-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, .85);
    margin-top: .125rem;
}

.deposit-view .detail-hero .hero-stats {
    display: flex;
    gap: 1.5rem;
    margin-top: .5rem;
}

.deposit-view .detail-hero .progress {
    height: 7px;
    background-color: rgba(255, 255, 255, .25);
    margin: .625rem 0 .3125rem;
}

.deposit-view .detail-hero .progress-bar {
    background-color: #fff;
}

.deposit-view .detail-hero .hero-footer {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(255, 255, 255, .85);
}

/* ── Account Hero Card (Light & Dark Theme) ────────────────────────────────── */
.account-hero-card {
    background: linear-gradient(145deg, #f8faff 0%, #ffffff 100%);
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-top: 3px solid #2563eb;
    box-shadow: 0 4px 20px -2px rgba(37, 99, 235, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    color: #0f172a;
}
.account-hero-card .text-white {
    color: #0f172a !important;
}
.account-hero-card .text-white-50 {
    color: #64748b !important;
}
.account-hero-card .hero-progress-box,
.account-hero-card div[style*="background:rgba(255,255,255,0.08)"] {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}
.account-hero-card div[style*="background:rgba(255,255,255,0.2)"] {
    background: #e2e8f0 !important;
}
.account-hero-card .btn-outline-light {
    border-color: #cbd5e1 !important;
    color: #334155 !important;
    background: #ffffff !important;
}
.account-hero-card .btn-outline-light:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

.dark-theme .account-hero-card,
html.dark-theme .account-hero-card,
[data-bs-theme="dark"] .account-hero-card {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    background-color: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 3px solid #3b82f6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    color: #f8fafc;
}
.dark-theme .account-hero-card .text-white,
html.dark-theme .account-hero-card .text-white,
[data-bs-theme="dark"] .account-hero-card .text-white {
    color: #f8fafc !important;
}
.dark-theme .account-hero-card .text-white-50,
html.dark-theme .account-hero-card .text-white-50,
[data-bs-theme="dark"] .account-hero-card .text-white-50 {
    color: #94a3b8 !important;
}
.dark-theme .account-hero-card .hero-progress-box,
.dark-theme .account-hero-card div[style*="background:rgba(255,255,255,0.08)"],
[data-bs-theme="dark"] .account-hero-card div[style*="background:rgba(255,255,255,0.08)"] {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.dark-theme .account-hero-card div[style*="background:rgba(255,255,255,0.2)"],
[data-bs-theme="dark"] .account-hero-card div[style*="background:rgba(255,255,255,0.2)"] {
    background: rgba(255, 255, 255, 0.12) !important;
}
.dark-theme .account-hero-card .btn-outline-light,
html.dark-theme .account-hero-card .btn-outline-light,
[data-bs-theme="dark"] .account-hero-card .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #f8fafc !important;
    background: rgba(255, 255, 255, 0.05) !important;
}
.dark-theme .account-hero-card .btn-outline-light:hover,
html.dark-theme .account-hero-card .btn-outline-light:hover,
[data-bs-theme="dark"] .account-hero-card .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* ── Modern High-Density Stitch Design Cards & Tiles (Global) ──────────────── */
.card.info-card,
.info-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.85rem !important;
    padding: 0.85rem !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    margin-bottom: 0;
}
.card.info-card:hover,
.info-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.dark-theme .card.info-card,
html.dark-theme .card.info-card,
[data-bs-theme="dark"] .card.info-card,
.dark-theme .info-card,
html.dark-theme .info-card,
[data-bs-theme="dark"] .info-card {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important;
    color: #f8fafc !important;
}

.dark-theme .card.info-card h6,
html.dark-theme .card.info-card h6,
[data-bs-theme="dark"] .card.info-card h6,
.dark-theme .info-card h6,
html.dark-theme .info-card h6,
[data-bs-theme="dark"] .info-card h6 {
    color: #f8fafc !important;
}

.dark-theme .card.info-card .text-dark,
html.dark-theme .card.info-card .text-dark,
[data-bs-theme="dark"] .card.info-card .text-dark,
.dark-theme .info-card .text-dark,
html.dark-theme .info-card .text-dark,
[data-bs-theme="dark"] .info-card .text-dark {
    color: #f8fafc !important;
}

.dark-theme .card.info-card .text-muted,
html.dark-theme .card.info-card .text-muted,
[data-bs-theme="dark"] .card.info-card .text-muted,
.dark-theme .info-card .text-muted,
html.dark-theme .info-card .text-muted,
[data-bs-theme="dark"] .info-card .text-muted {
    color: #94a3b8 !important;
}

.stitch-tile {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
    padding: 0.65rem 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    min-width: 0;
}
.stitch-tile:hover {
    border-color: #cbd5e1;
}

.dark-theme .stitch-tile,
html.dark-theme .stitch-tile,
[data-bs-theme="dark"] .stitch-tile {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.dark-theme .stitch-tile:hover,
html.dark-theme .stitch-tile:hover,
[data-bs-theme="dark"] .stitch-tile:hover {
    border-color: rgba(255, 255, 255, 0.16) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.stitch-tile-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
    display: block;
    margin-bottom: 0.2rem;
    line-height: 1.2;
}
.dark-theme .stitch-tile-label,
html.dark-theme .stitch-tile-label,
[data-bs-theme="dark"] .stitch-tile-label {
    color: #64748b !important;
}

.stitch-tile-value {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
    display: block;
    word-break: break-word;
}
.dark-theme .stitch-tile-value,
html.dark-theme .stitch-tile-value,
[data-bs-theme="dark"] .stitch-tile-value {
    color: #f8fafc !important;
}
.dark-theme .stitch-tile-value.text-dark,
html.dark-theme .stitch-tile-value.text-dark,
[data-bs-theme="dark"] .stitch-tile-value.text-dark {
    color: #f8fafc !important;
}
.dark-theme .stitch-tile .text-dark,
html.dark-theme .stitch-tile .text-dark,
[data-bs-theme="dark"] .stitch-tile .text-dark {
    color: #f8fafc !important;
}

.stitch-tile-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 4px;
}

.stitch-tile-icon-sm {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.border-dashed {
    border-style: dashed !important;
}

/* ── KPI Glass Cards & Accents ── */
.glass-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px;
    transform: none !important;
    overflow: visible !important;
}
.glass-card:hover {
    transform: none !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07) !important;
}
.dark-theme .glass-card,
html.dark-theme .glass-card,
[data-bs-theme="dark"] .glass-card {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important;
    color: #f8fafc !important;
}
.dark-theme .glass-card .card-header,
html.dark-theme .glass-card .card-header,
[data-bs-theme="dark"] .glass-card .card-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* Stat & Metric Labels and Values */
.stat-label {
    color: #64748b;
}
.stat-value {
    color: #0f172a;
}
/* Dashboard KPI amounts: black in light mode even when a text-* utility class is
   present; dark theme keeps its own value color (rules below). */
html:not(.dark-theme):not([data-bs-theme="dark"]) .admin-dashboard .stat-value {
    color: #0f172a !important;
}
.detail-val-text {
    color: #1e293b;
}
.detail-row {
    border-bottom: 1px solid #f1f5f9;
}
.dark-theme .stat-label,
html.dark-theme .stat-label,
[data-bs-theme="dark"] .stat-label {
    color: #94a3b8 !important;
}
.dark-theme .stat-value,
html.dark-theme .stat-value,
[data-bs-theme="dark"] .stat-value {
    color: #f8fafc !important;
}
.dark-theme .detail-val-text,
html.dark-theme .detail-val-text,
[data-bs-theme="dark"] .detail-val-text {
    color: #f1f5f9 !important;
}
.dark-theme .detail-row,
html.dark-theme .detail-row,
[data-bs-theme="dark"] .detail-row {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* Badges for Account Detail */
.badge-normal-status {
    background: #ecfdf5 !important;
    background-color: #ecfdf5 !important;
    color: #047857 !important;
    font-weight: 600 !important;
    border: 1px solid #a7f3d0 !important;
    box-shadow: none !important;
}
.badge-normal-status .material-symbols-outlined {
    color: #059669 !important;
    font-weight: 700 !important;
}
.dark-theme .badge-normal-status,
html.dark-theme .badge-normal-status,
[data-bs-theme="dark"] .badge-normal-status {
    background: rgba(16, 185, 129, 0.22) !important;
    background-color: rgba(16, 185, 129, 0.22) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
    box-shadow: none !important;
}
.dark-theme .badge-normal-status .material-symbols-outlined,
html.dark-theme .badge-normal-status .material-symbols-outlined,
[data-bs-theme="dark"] .badge-normal-status .material-symbols-outlined {
    color: #6ee7b7 !important;
}

.badge-interest-pill {
    background: #eff6ff !important;
    background-color: #eff6ff !important;
    color: #1e40af !important;
    font-weight: 700 !important;
    border: 1px solid #bfdbfe !important;
    box-shadow: none !important;
}
.badge-interest-pill .material-symbols-outlined {
    color: #2563eb !important;
    font-weight: 700 !important;
}
.dark-theme .badge-interest-pill,
html.dark-theme .badge-interest-pill,
[data-bs-theme="dark"] .badge-interest-pill {
    background: rgba(37, 99, 235, 0.25) !important;
    background-color: rgba(37, 99, 235, 0.25) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(147, 197, 253, 0.35) !important;
    box-shadow: none !important;
}
.dark-theme .badge-interest-pill .material-symbols-outlined,
html.dark-theme .badge-interest-pill .material-symbols-outlined,
[data-bs-theme="dark"] .badge-interest-pill .material-symbols-outlined {
    color: #93c5fd !important;
}

/* Metric & Bento Card Top & Left Border Accents */
.border-t-blue, .border-l-blue { border-top: 3px solid #3b82f6 !important; }
.border-t-green, .border-l-green { border-top: 3px solid #10b981 !important; }
.border-t-orange, .border-l-orange { border-top: 3px solid #ffc107 !important; }
.border-t-purple, .border-l-purple { border-top: 3px solid #8b5cf6 !important; }
.border-t-red, .border-l-red { border-top: 3px solid #ef4444 !important; }
.border-t-info { border-top: 3px solid #0ea5e9 !important; }
.border-t-teal, .border-l-teal { border-top: 3px solid #14b8a6 !important; }

/* Soft background tints in dark mode */
.dark-theme .bg-soft-primary, html.dark-theme .bg-soft-primary, [data-bs-theme="dark"] .bg-soft-primary { background-color: rgba(37, 99, 235, 0.18) !important; color: #93c5fd !important; }
.dark-theme .bg-soft-secondary, html.dark-theme .bg-soft-secondary, [data-bs-theme="dark"] .bg-soft-secondary { background-color: rgba(100, 116, 139, 0.2) !important; color: #cbd5e1 !important; }
.dark-theme .bg-soft-success, html.dark-theme .bg-soft-success, [data-bs-theme="dark"] .bg-soft-success { background-color: rgba(16, 185, 129, 0.18) !important; color: #6ee7b7 !important; }
.dark-theme .bg-soft-warning, html.dark-theme .bg-soft-warning, [data-bs-theme="dark"] .bg-soft-warning { background-color: rgba(255, 193, 7, 0.18) !important; color: #ffda6a !important; }
.dark-theme .bg-soft-danger, html.dark-theme .bg-soft-danger, [data-bs-theme="dark"] .bg-soft-danger { background-color: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; }
.dark-theme .bg-soft-info, html.dark-theme .bg-soft-info, [data-bs-theme="dark"] .bg-soft-info { background-color: rgba(14, 165, 233, 0.18) !important; color: #7dd3fc !important; }
.dark-theme .bg-soft-purple, html.dark-theme .bg-soft-purple, [data-bs-theme="dark"] .bg-soft-purple { background-color: rgba(139, 92, 246, 0.18) !important; color: #c4b5fd !important; }
.dark-theme .bg-soft-blue, html.dark-theme .bg-soft-blue, [data-bs-theme="dark"] .bg-soft-blue { background-color: rgba(59, 130, 246, 0.18) !important; color: #93c5fd !important; }
.dark-theme .bg-soft-green, html.dark-theme .bg-soft-green, [data-bs-theme="dark"] .bg-soft-green { background-color: rgba(16, 185, 129, 0.18) !important; color: #6ee7b7 !important; }
.dark-theme .bg-soft-orange, html.dark-theme .bg-soft-orange, [data-bs-theme="dark"] .bg-soft-orange { background-color: rgba(255, 193, 7, 0.18) !important; color: #fdba74 !important; }
.dark-theme .bg-soft-red, html.dark-theme .bg-soft-red, [data-bs-theme="dark"] .bg-soft-red { background-color: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; }
.dark-theme .bg-soft-teal, html.dark-theme .bg-soft-teal, [data-bs-theme="dark"] .bg-soft-teal { background-color: rgba(20, 184, 166, 0.18) !important; color: #5eead4 !important; }

.conductor-modal {
    font-size: 13px;
}

.conductor-modal .form-label {
    font-size: 12px;
    margin-bottom: .25rem;
}

.conductor-modal .form-control,
.conductor-modal .form-select {
    font-size: 13px;
}

.conductor-modal .btn {
    font-size: 12px;
    padding: .3rem .65rem;
}

.conductor-modal .btn-sm {
    font-size: 11px;
    padding: .2rem .5rem;
}

.conductor-modal .list-group-item {
    font-size: 12px;
}

/* GLedger tree node label — hover highlight for the clickable row
   (chevron + GL head code + name). Only the label highlights, not the
   action buttons, since they sit in a sibling span. */
.gledger-node-label {
    border-radius: 4px;
    transition: background-color 0.12s ease-in-out;
}
.gledger-node-label:hover {
    background-color: var(--surface-variant);
}

/* ── Hub / Shell Card Styles & Compact Screen Support ─────────────────────── */
.hub-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hub-card:hover {
    transform: translateY(-2px);
}

.hub-card .icon-circle {
    flex-shrink: 0;
}

.hub-card-title {
    font-size: 0.925rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hub-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

/* ==========================================================================
   Global 1366x768 / 768p Laptop Screen Optimizations & Line Spacing
   ========================================================================== */
@media (min-width: 992px) and (max-width: 1440px), (max-height: 820px) and (min-width: 992px) {
    :root {
        --topbar-height: 60px;
    }

    /* Global Typography & Rhythm */
    body, html {
        font-size: 14px;
        line-height: 1.4;
    }

    h1, .h1 { font-size: 1.45rem !important; margin-top: 0.25rem !important; margin-bottom: 0.4rem !important; line-height: 1.3 !important; }
    h2, .h2 { font-size: 1.3rem !important; margin-top: 0.25rem !important; margin-bottom: 0.35rem !important; line-height: 1.3 !important; }
    h3, .h3 { font-size: 1.2rem !important; margin-top: 0.2rem !important; margin-bottom: 0.35rem !important; line-height: 1.3 !important; }
    h4, .h4, .page-title { font-size: 1.15rem !important; margin-top: 0.2rem !important; margin-bottom: 0.35rem !important; line-height: 1.3 !important; }
    h5, .h5 { font-size: 1.0rem !important; margin-top: 0.15rem !important; margin-bottom: 0.25rem !important; line-height: 1.3 !important; }
    h6, .h6 { font-size: 0.9rem !important; margin-top: 0.15rem !important; margin-bottom: 0.25rem !important; line-height: 1.3 !important; }
    p { margin-bottom: 0.35rem !important; line-height: 1.4 !important; font-size: 14px !important; }

    /* Prevent programmatic navigation focus rings (e.g. FocusOnNavigate) on headings and non-interactive targets */
    h1:focus, h1:focus-visible,
    h2:focus, h2:focus-visible,
    [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible {
        outline: none !important;
    }

    /* Layout Spacing (Comfortable gap between topbar and content) */
    .content {
        padding-top: calc(var(--topbar-height) + 24px) !important;
    }

    .content-page {
        padding: 0 18px 45px 18px !important;
    }

    .page-title-box {
        margin-bottom: 0.75rem !important;
        padding: 4px 0 !important;
    }

    .footer {
        padding: 8px 18px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    /* Cards, Headers & Rhythm */


    .card-header {
        padding: 10px 14px !important;
    }

    .card-body {
        padding: 12px 14px !important;
    }

    .card-footer {
        padding: 10px 14px !important;
    }

    .glass-card {
        border-radius: 12px !important;
    }

    .mb-4, .my-4 { margin-bottom: 1rem !important; }
    .mb-3, .my-3 { margin-bottom: 0.75rem !important; }
    .mb-2, .my-2 { margin-bottom: 0.5rem !important; }
    .p-3 { padding: 12px 14px !important; }
    .p-4 { padding: 14px 18px !important; }
    .py-3 { padding-top: 10px !important; padding-bottom: 10px !important; }
    .py-2 { padding-top: 6px !important; padding-bottom: 6px !important; }

    /* Global Tables & Grid Rows (Tightened Line Spacing) */
    .table, table.dataTable {
        font-size: 13px !important;
        line-height: 1.25 !important;
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }

    .table th, .table td,
    table.dataTable thead th, table.dataTable tbody td {
        padding: 4px 8px !important;
        vertical-align: middle !important;
    }

    .table thead th, table.dataTable thead th {
        padding: 6px 8px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
    }

    .deposit-filter-row th, .loan-filter-row th, .filter-row th {
        padding: 2px 4px !important;
    }

    .table-responsive {
        max-height: calc(100vh - 280px);
    }

    /* Global Forms & Controls (Compact Density) */
    .form-control:not(.gs-input) {
        padding: 3px 8px !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
        min-height: 29px !important;
        height: 29px !important;
    }

    .form-select {
        padding: 3px 2.25rem 3px 8px !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
        min-height: 29px !important;
        height: 29px !important;
        background-position: right 0.75rem center !important;
    }

    .navbar-custom .gs-input, input.gs-input {
        padding-left: 38px !important;
        padding-right: 36px !important;
    }

    .form-control-sm,
    .input-group-sm > .form-control,
    .input-group-sm > .btn {
        padding: 2px 6px !important;
        font-size: 12px !important;
        min-height: 26px !important;
        height: 26px !important;
        line-height: 1.2 !important;
    }

    .form-select-sm,
    .input-group-sm > .form-select {
        padding: 2px 2rem 2px 6px !important;
        font-size: 12px !important;
        min-height: 26px !important;
        height: 26px !important;
        line-height: 1.2 !important;
        background-position: right 0.6rem center !important;
        background-size: 12px 10px !important;
    }

    /* Nepali (Preeti) inputs opt out of the compact font size above.
       Preeti packs a whole syllable — consonant, matra and halant — into one glyph,
       so it needs far more pixels than Latin to stay legible: the 13px/12px set above
       renders it as unreadable specks on a 1366-wide screen. `.form-control` beats a
       bare `.nepali-font` on specificity even with !important, which is why this has to
       restate the selector rather than rely on the 20px base rule.
       The control height above is fixed at 29px, so the vertical padding is traded away
       to buy glyph room: 29px - 2px border - 4px padding leaves 25px, and 18px at
       line-height 1.2 needs 21.6px. The control stays exactly as tall as its English
       neighbours, so nothing on the row shifts. */
    .form-control.nepali-font:not(.gs-input) {
        font-size: 18px !important;
        line-height: 1.2 !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    .form-control.form-control-sm.nepali-font:not(.gs-input) {
        font-size: 17px !important;
        line-height: 1.2 !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    label, .form-label {
        font-size: 12px !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
    }

    .btn {
        padding: 3px 10px !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    .btn-sm {
        padding: 2px 6px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .badge {
        padding: 2px 6px !important;
        font-size: 11px !important;
        line-height: 1 !important;
    }
}

/* ==========================================================================
   Global Reusable Modals, Table Grids, Soft Buttons, Badges, & Avatars
   ========================================================================== */

/* Fullscreen modal backdrop with backdrop blur */
.card-header {
    padding: 10px 14px !important;
}
.modal-backdrop-custom {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10500 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Data Table header standards */
.user-grid-table th,
.modern-grid-table th {
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Avatar circles and icons */
.avatar-circle {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.avatar-img-lg {
    width: 100px;
    height: 100px;
    object-fit: cover;
}
.avatar-placeholder-lg {
    width: 100px;
    height: 100px;
    line-height: 100px;
}
.avatar-edit-badge {
    cursor: pointer;
    transition: transform 0.2s;
}
.avatar-edit-badge:hover {
    transform: scale(1.1);
}
.stat-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
}
.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

/* Soft Color Button Palette */
.btn-soft-primary {
    background-color: rgba(13, 110, 253, 0.08);
    color: #0d6efd;
    border: 1px solid rgba(13, 110, 253, 0.15);
}
.btn-soft-primary:hover {
    background-color: #0d6efd;
    color: #fff;
}
.btn-soft-secondary {
    background-color: rgba(108, 117, 125, 0.08);
    color: #495057;
    border: 1px solid rgba(108, 117, 125, 0.15);
}
.btn-soft-secondary:hover {
    background-color: #6c757d;
    color: #fff;
}
.btn-soft-warning {
    background-color: rgba(255, 193, 7, 0.12);
    color: #856404;
    border: 1px solid rgba(255, 193, 7, 0.25);
}
.btn-soft-warning:hover {
    background-color: #ffc107;
    color: #000;
}
.btn-soft-danger {
    background-color: rgba(220, 53, 69, 0.08);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.18);
}
.btn-soft-danger:hover {
    background-color: #dc3545;
    color: #fff;
}
.btn-soft-success {
    background-color: rgba(25, 135, 84, 0.08);
    color: #198754;
    border: 1px solid rgba(25, 135, 84, 0.18);
}
.btn-soft-success:hover {
    background-color: #198754;
    color: #fff;
}
.btn-soft-info {
    background-color: rgba(13, 202, 240, 0.1);
    color: #055160;
    border: 1px solid rgba(13, 202, 240, 0.2);
}
.btn-soft-info:hover {
    background-color: #0dcaf0;
    color: #000;
}

/* Animations */
.spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   User Management & Profile Global Styles
   ========================================================================== */
.avatar-circle {
    width: 32px;
    height: 32px;
    min-width: 32px;
}
.avatar-status-badge {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.dark-theme .avatar-status-badge {
    border-color: var(--surface, #1e293b) !important;
}
.status-indicator-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
}
.font-10 {
    font-size: 0.625rem;
}
.avatar-img-lg {
    width: 100px;
    height: 100px;
    object-fit: cover;
}
.avatar-placeholder-lg {
    width: 100px;
    height: 100px;
    line-height: 100px;
}
.profile-edit-container {
    max-width: 1320px;
    margin: 0 auto;
}
.modal-backdrop-custom {
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    z-index: 1055;
}
.stat-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}
.bg-soft-blue { background-color: rgba(13, 110, 253, 0.1); }
.bg-soft-green { background-color: rgba(25, 135, 84, 0.1); }
.bg-soft-purple { background-color: rgba(111, 66, 193, 0.1); }
.bg-soft-orange { background-color: rgba(253, 126, 20, 0.1); }
.text-purple { color: #6f42c1; }
.border-l-blue { border-left: 4px solid #0d6efd !important; }
.border-l-green { border-left: 4px solid #198754 !important; }
.border-l-purple { border-left: 4px solid #6f42c1 !important; }
.border-l-orange { border-left: 4px solid #fd7e14 !important; }
.badge-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
}
.user-summary-card {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0 !important;
}

/* ── Dark Theme: User Management & Profile ── */
.dark-theme .user-management-page .text-dark,
.dark-theme .profile-edit-container .text-dark,
.dark-theme .modal .text-dark {
    color: var(--on-surface, #f8fafc) !important;
}

.dark-theme .user-management-page .text-muted,
.dark-theme .profile-edit-container .text-muted,
.dark-theme .modal .text-muted {
    color: var(--on-surface-variant, #94a3b8) !important;
}

.dark-theme .user-management-page .glass-card,
.dark-theme .profile-edit-container .glass-card {
    background-color: var(--surface, #1e293b) !important;
    border: 1px solid var(--outline-variant, #334155) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.dark-theme .user-management-page .stat-card {
    background-color: var(--surface, #1e293b) !important;
}

.dark-theme .user-management-page .bg-soft-blue {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
}
.dark-theme .user-management-page .bg-soft-green {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #86efac !important;
}
.dark-theme .user-management-page .bg-soft-purple {
    background-color: rgba(168, 85, 247, 0.2) !important;
    color: #d8b4fe !important;
}
.dark-theme .user-management-page .text-purple {
    color: #c084fc !important;
}
.dark-theme .user-management-page .bg-soft-orange {
    background-color: rgba(249, 115, 22, 0.2) !important;
    color: #fdba74 !important;
}

.dark-theme .user-management-page .card-header,
.dark-theme .profile-edit-container .card-header {
    border-color: var(--outline-variant, #334155) !important;
}

.dark-theme .user-management-page .input-group-text,
.dark-theme .profile-edit-container .input-group-text {
    background-color: var(--surface-variant, #334155) !important;
    border-color: var(--outline-variant, #475569) !important;
    color: var(--on-surface-variant, #94a3b8) !important;
}

.dark-theme .user-management-page .form-control,
.dark-theme .user-management-page .form-select,
.dark-theme .profile-edit-container .form-control,
.dark-theme .profile-edit-container .form-select,
.dark-theme .modal .form-control,
.dark-theme .modal .form-select {
    background-color: var(--surface-variant, #334155) !important;
    color: var(--on-surface, #f8fafc) !important;
    border-color: var(--outline-variant, #475569) !important;
}

.dark-theme .user-management-page .form-control::placeholder,
.dark-theme .profile-edit-container .form-control::placeholder {
    color: var(--on-surface-variant, #94a3b8) !important;
    opacity: 0.7;
}

.dark-theme .user-management-page .form-select option,
.dark-theme .profile-edit-container .form-select option,
.dark-theme .modal .form-select option {
    background-color: var(--surface, #1e293b) !important;
    color: var(--on-surface, #f8fafc) !important;
}

.dark-theme .user-management-page .btn-search-clear {
    background-color: var(--surface-variant, #334155) !important;
    border-color: var(--outline-variant, #475569) !important;
    color: var(--on-surface-variant, #94a3b8) !important;
}

.dark-theme .profile-edit-container .info-group {
    background-color: var(--surface-variant, #334155) !important;
}

/* Table in Dark Mode */
.dark-theme .user-grid-table thead.table-light,
.dark-theme .user-grid-table thead th {
    background-color: var(--surface-variant, #334155) !important;
    color: var(--on-surface-variant, #94a3b8) !important;
    border-color: var(--outline-variant, #475569) !important;
}

.dark-theme .user-grid-table tbody tr {
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--on-surface, #f8fafc) !important;
}

.dark-theme .user-grid-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

.dark-theme .user-grid-table td {
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--on-surface, #f8fafc) !important;
}

.dark-theme .user-grid-table .avatar-circle.bg-primary-subtle {
    background-color: rgba(138, 180, 248, 0.15) !important;
    color: #8ab4f8 !important;
}

.dark-theme .user-grid-table .avatar-circle.bg-secondary-subtle {
    background-color: rgba(148, 163, 184, 0.15) !important;
    color: #94a3b8 !important;
}

.dark-theme .user-grid-table .badge.bg-light {
    background-color: var(--surface-variant, #334155) !important;
    color: var(--on-surface, #f8fafc) !important;
    border-color: var(--outline-variant, #475569) !important;
}

.dark-theme .user-grid-table .badge.bg-secondary-subtle {
    background-color: var(--surface-variant, #334155) !important;
    color: var(--on-surface, #f8fafc) !important;
    border-color: var(--outline-variant, #475569) !important;
}

.dark-theme .user-grid-table .badge.bg-primary-subtle {
    background-color: rgba(138, 180, 248, 0.15) !important;
    color: #8ab4f8 !important;
    border-color: rgba(138, 180, 248, 0.3) !important;
}

.dark-theme .user-grid-table .badge.bg-warning-subtle {
    background-color: rgba(255, 193, 7, 0.15) !important;
    color: #ffda6a !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
}

.dark-theme .user-grid-table .badge.bg-info-subtle {
    background-color: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}

.dark-theme .user-grid-table .badge.bg-success-subtle {
    background-color: rgba(74, 222, 128, 0.15) !important;
    color: #4ade80 !important;
    border-color: rgba(74, 222, 128, 0.3) !important;
}

.dark-theme .user-grid-table .badge.bg-danger-subtle {
    background-color: rgba(248, 113, 113, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

/* Soft Action Buttons in Dark Mode */
.dark-theme .btn-soft-primary,
.dark-theme .action-btn-group .btn-soft-primary {
    background-color: rgba(138, 180, 248, 0.12) !important;
    color: #8ab4f8 !important;
    border: 1px solid rgba(138, 180, 248, 0.25) !important;
}
.dark-theme .btn-soft-primary:hover,
.dark-theme .action-btn-group .btn-soft-primary:hover {
    background-color: rgba(138, 180, 248, 0.25) !important;
    color: #ffffff !important;
}

.dark-theme .btn-soft-secondary,
.dark-theme .action-btn-group .btn-soft-secondary {
    background-color: rgba(148, 163, 184, 0.12) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
}
.dark-theme .btn-soft-secondary:hover,
.dark-theme .action-btn-group .btn-soft-secondary:hover {
    background-color: rgba(148, 163, 184, 0.25) !important;
    color: #ffffff !important;
}

.dark-theme .btn-soft-warning,
.dark-theme .action-btn-group .btn-soft-warning {
    background-color: rgba(255, 193, 7, 0.12) !important;
    color: #ffda6a !important;
    border: 1px solid rgba(255, 193, 7, 0.25) !important;
}
.dark-theme .btn-soft-warning:hover,
.dark-theme .action-btn-group .btn-soft-warning:hover {
    background-color: rgba(255, 193, 7, 0.25) !important;
    color: #ffffff !important;
}

.dark-theme .btn-soft-danger,
.dark-theme .action-btn-group .btn-soft-danger {
    background-color: rgba(248, 113, 113, 0.12) !important;
    color: #f87171 !important;
    border: 1px solid rgba(248, 113, 113, 0.25) !important;
}
.dark-theme .btn-soft-danger:hover,
.dark-theme .action-btn-group .btn-soft-danger:hover {
    background-color: rgba(248, 113, 113, 0.25) !important;
    color: #ffffff !important;
}

.dark-theme .btn-soft-success,
.dark-theme .action-btn-group .btn-soft-success {
    background-color: rgba(74, 222, 128, 0.12) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(74, 222, 128, 0.25) !important;
}
.dark-theme .btn-soft-success:hover,
.dark-theme .action-btn-group .btn-soft-success:hover {
    background-color: rgba(74, 222, 128, 0.25) !important;
    color: #ffffff !important;
}

.dark-theme .btn-soft-info {
    background-color: rgba(13, 202, 240, 0.12) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(13, 202, 240, 0.25) !important;
}
.dark-theme .btn-soft-info:hover {
    background-color: rgba(13, 202, 240, 0.25) !important;
    color: #ffffff !important;
}

.dark-theme .user-management-page .card-body > .table-responsive + div {
    background-color: var(--surface, #1e293b) !important;
    border-color: var(--outline-variant, #334155) !important;
}

/* Modals in Dark Mode */
.dark-theme .modal-backdrop-custom {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

.dark-theme .modal .modal-content {
    background-color: var(--surface, #1e293b) !important;
    color: var(--on-surface, #f8fafc) !important;
    border: 1px solid var(--outline-variant, #475569) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important;
}

.dark-theme .modal .modal-header {
    background-color: var(--surface-variant, #334155) !important;
    border-bottom: 1px solid var(--outline-variant, #475569) !important;
}

.dark-theme .modal .modal-title {
    color: var(--on-surface, #f8fafc) !important;
}

.dark-theme .modal .modal-header .btn-close,
.dark-theme .modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

.dark-theme .modal .modal-body {
    background-color: var(--surface, #1e293b) !important;
    color: var(--on-surface, #f8fafc) !important;
}

.dark-theme .modal .user-summary-card {
    background-color: var(--surface-variant, #334155) !important;
    border: 1px solid var(--outline-variant, #475569) !important;
}

.dark-theme .modal .user-summary-card .badge.bg-secondary-subtle {
    background-color: var(--surface, #1e293b) !important;
    color: #cbd5e1 !important;
    border-color: var(--outline-variant, #475569) !important;
}

.dark-theme .modal .form-label {
    color: var(--on-surface-variant, #94a3b8) !important;
}

.dark-theme .modal .form-text {
    color: var(--on-surface-variant, #94a3b8) !important;
}

.dark-theme .modal .modal-footer {
    background-color: var(--surface-variant, #334155) !important;
    border-top: 1px solid var(--outline-variant, #475569) !important;
}

.dark-theme .modal .modal-footer .btn-light,
.dark-theme .modal .modal-footer .btn-outline-secondary {
    background-color: var(--surface-variant, #334155) !important;
    color: var(--on-surface, #f8fafc) !important;
    border: 1px solid var(--outline-variant, #475569) !important;
}

.dark-theme .modal .modal-footer .btn-light:hover,
.dark-theme .modal .modal-footer .btn-outline-secondary:hover {
    background-color: var(--outline-variant, #475569) !important;
    color: #ffffff !important;
}

.dark-theme .modal .bg-warning-subtle {
    background-color: rgba(255, 193, 7, 0.1) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
}

.dark-theme .modal code {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffda6a !important;
}

.dark-theme .modal .alert-danger {
    background-color: rgba(248, 113, 113, 0.15) !important;
    border: 1px solid rgba(248, 113, 113, 0.3) !important;
    color: #fca5a5 !important;
}

/* ========== Permission Access Screens (User Access / Designation Permissions) ========== */

/* Segmented toggle switching between the two twin permission screens. */
.seg-toggle {
    display: inline-flex;
    background: var(--surface-variant);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.seg-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--on-surface-variant);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.seg-toggle-btn:hover {
    color: var(--primary);
}

.seg-toggle-btn.active {
    background: var(--card-bg);
    color: var(--primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* --on-surface-variant (#94a3b8 on #334155) measures ~4:1 here, just under the
   4.5:1 body-text minimum for the 12px label — use a lighter slate instead.
   :not(.active) keeps the active tab on --primary, set above. */
.dark-theme .seg-toggle-btn:not(.active) {
    color: #cbd5e1;
}

/* Selectable rows in the user/designation picker list. A plain <button> (not
   list-group) so keyboard focus and click semantics stay simple. */
.subject-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--on-surface);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.subject-row:hover {
    background: var(--surface-variant);
}

.subject-row.active {
    background: rgba(0, 50, 125, 0.08);
    border-left-color: var(--primary);
}

.dark-theme .subject-row.active {
    background: rgba(138, 180, 248, 0.14);
}

.subject-row.active .subject-row-name {
    color: var(--primary);
}

.subject-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: rgba(0, 50, 125, 0.1);
    color: var(--primary);
    flex-shrink: 0;
}

.dark-theme .subject-avatar {
    background: rgba(138, 180, 248, 0.18);
}

/* Lets the name/meta text truncate with ellipsis instead of overflowing the
   row — flex items default to a content-based min-width otherwise. */
.subject-row-info {
    min-width: 0;
    flex: 1 1 auto;
}

.subject-row-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subject-row-meta {
    font-size: 11px;
    color: var(--on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Keeps the category header (with its allowed/denied tally) visible while a
   long permission list scrolls underneath it. */
.permission-table-wrap thead th {
    position: sticky;
    top: 0;
    background: var(--card-bg);
    z-index: 1;
}

/* ========== Redesigned Permission Screens & Subject Picker ========== */

.subject-picker-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.subject-nav-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--outline-variant);
    background: var(--card-bg);
    color: var(--on-surface-variant);
    transition: all 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.subject-nav-btn:hover:not(:disabled) {
    background: var(--surface-variant);
    color: var(--primary);
    border-color: var(--primary);
}

.subject-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.subject-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid var(--outline-variant);
    background: var(--card-bg);
    color: var(--on-surface);
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    min-width: 260px;
    max-width: 440px;
}

.subject-picker-trigger:hover,
.subject-picker-trigger.open {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 50, 125, 0.12);
}

.dark-theme .subject-picker-trigger:hover,
.dark-theme .subject-picker-trigger.open {
    box-shadow: 0 0 0 3px rgba(138, 180, 248, 0.2);
}

.subject-picker-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    min-width: 340px;
    max-width: 480px;
    background: var(--card-bg);
    border: 1px solid var(--outline-variant);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    z-index: 1060;
    padding: 10px;
}

.filter-chip {
    padding: 3px 10px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--outline-variant);
    background: transparent;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.filter-chip.active {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}

.permission-hero-card {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--outline-variant);
    padding: 16px 20px;
    margin-bottom: 16px;
    transition: box-shadow 0.15s ease;
}

.permission-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--outline-variant);
    margin-bottom: 14px;
}

.permission-search-box {
    position: relative;
    min-width: 260px;
    flex: 1 1 auto;
    max-width: 440px;
}

.permission-search-box input,
.permission-search-box .form-control {
    padding-left: 36px !important;
    padding-right: 32px !important;
    border-radius: 8px;
    font-size: 13px;
    height: 38px;
    border: 1px solid var(--outline-variant);
    background: var(--surface);
    color: var(--on-surface);
}

.permission-search-box .search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--outline);
    font-size: 18px;
    pointer-events: none;
}

.permission-search-box .clear-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--outline);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
}

.perm-diff-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 50, 125, 0.1);
    color: var(--primary);
    border: 1px dashed var(--primary);
}

.dark-theme .perm-diff-indicator {
    background: rgba(138, 180, 248, 0.15);
    color: #8ab4f8;
    border-color: #8ab4f8;
}

.perm-method-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    background: transparent;
    user-select: none;
}

.perm-method-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

.perm-method-pill:active {
    transform: translateY(0);
}

.perm-method-pill.inactive {
    background: var(--surface-variant, #f1f3f4);
    color: var(--outline, #80868b);
    border: 1px dashed var(--outline-variant, #dadce0);
    opacity: 0.6;
}

.perm-method-pill.inactive:hover {
    opacity: 0.9;
    border-color: var(--outline, #80868b);
    background: var(--surface, #fff);
}

.dark-theme .perm-method-pill.inactive {
    background: rgba(255, 255, 255, 0.05);
    color: #9aa0a6;
    border-color: rgba(255, 255, 255, 0.15);
}

.dark-theme .perm-method-pill.inactive:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e8eaed;
}

.perm-method-pill .perm-method-icon {
    font-size: 13px !important;
    line-height: 1;
}

.perm-switch-partial {
    filter: saturate(0.65) brightness(1.1);
}

.sticky-save-bar {
    position: sticky;
    bottom: 16px;
    z-index: 1040;
    margin-top: 16px;
    padding: 12px 20px;
    border-radius: 12px;
    background: var(--card-bg);
    border: 1px solid var(--primary);
    box-shadow: 0 8px 24px rgba(0, 50, 125, 0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    animation: slideUp 0.2s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.group-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid transparent;
    background: var(--surface-variant);
    color: var(--on-surface-variant);
    transition: all 0.15s ease;
    cursor: pointer;
}

.group-tab-btn.active {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 2px 6px rgba(0, 50, 125, 0.25);
}

.cat-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--outline-variant);
    background: var(--card-bg);
    color: var(--on-surface);
    transition: all 0.15s ease;
    cursor: pointer;
}

.cat-pill-btn.active {
    background: rgba(0, 50, 125, 0.1);
    color: var(--primary);
    border-color: var(--primary);
    font-weight: 700;
}

.dark-theme .cat-pill-btn.active {
    background: rgba(138, 180, 248, 0.15);
    color: #8ab4f8;
    border-color: #8ab4f8;
}

/* ========== Ledger Change Info Styling ========== */

.wiring-chip {
    display: inline-flex;
    flex-direction: column;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--surface-variant);
    border: 1px solid var(--outline-variant);
    font-size: 11px;
    line-height: 1.25;
    max-width: 190px;
}

.wiring-chip .acct-no {
    font-family: monospace;
    font-weight: 700;
    color: var(--on-surface);
}

.wiring-chip .acct-name {
    font-size: 10px;
    color: var(--on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wiring-chip.empty {
    background: transparent;
    border: 1px dashed var(--outline-variant);
    color: var(--outline);
    padding: 4px 8px;
    font-style: italic;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.wiring-edit-card {
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    transition: border-color 0.15s ease;
}

.wiring-edit-card:hover {
    border-color: var(--primary);
}

.wiring-edit-card .wiring-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    display: flex;
    align-items: center;
    gap: 4px;
}

.wiring-edit-card .wiring-value {
    font-family: monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--on-surface);
    min-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}





/* ---------- Guided tour (js/tour.js) ----------
   The overlay lives on <body>; tour.js copies the .dark-theme class from
   #wrapper onto it, so the --surface/--on-surface tokens below resolve the
   right palette in both themes (same pattern as toasts / datepicker popup). */
#fin-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: none;
    pointer-events: none;
}
#fin-tour-overlay.active {
    display: block;
    /* Click-through: these guides drive REAL screens — the user must be able to
       reach the actual fields and buttons (the bubble stays interactive). */
    pointer-events: none;
}
#fin-tour-overlay .fin-tour-spot {
    position: fixed;
    z-index: 30001;
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(10, 14, 26, 0.55);
    transition: all .25s ease;
    pointer-events: none;
}
#fin-tour-overlay .fin-tour-bubble {
    position: fixed;
    z-index: 30002;
    pointer-events: auto;
    width: 340px;
    max-width: calc(100vw - 24px);
    background: var(--card-bg);
    color: var(--on-surface);
    border: 1px solid var(--outline-variant);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    padding: 14px 16px 12px;
    transition: top .25s ease, left .25s ease;
}
#fin-tour-overlay .fin-tour-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--on-surface);
    padding-right: 24px;
    margin-bottom: 6px;
}
#fin-tour-overlay .fin-tour-body {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--on-surface-variant);
}
#fin-tour-overlay .fin-tour-body b,
#fin-tour-overlay .fin-tour-body strong {
    color: var(--on-surface);
}
#fin-tour-overlay .fin-tour-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: 0;
    background: transparent;
    color: var(--on-surface-variant);
    font-size: 12px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
#fin-tour-overlay .fin-tour-close:hover { color: var(--on-surface); }
#fin-tour-overlay .fin-tour-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
#fin-tour-overlay .fin-tour-stepno {
    font-size: 11px;
    font-weight: 600;
    color: var(--on-surface-variant);
    opacity: .75;
}
#fin-tour-overlay .fin-tour-btn {
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
    color: var(--on-surface);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 8px;
    cursor: pointer;
}
#fin-tour-overlay .fin-tour-btn:hover { border-color: var(--primary); color: var(--primary); }
#fin-tour-overlay .fin-tour-btn.fin-tour-next {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}
#fin-tour-overlay .fin-tour-btn.fin-tour-next:hover { opacity: .9; color: var(--on-primary); }
#fin-tour-overlay .fin-tour-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
}
#fin-tour-overlay .fin-tour-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--outline-variant);
}
#fin-tour-overlay .fin-tour-dot.active {
    background: var(--primary);
    transform: scale(1.25);
}
#fin-tour-overlay .fin-tour-dot.skipped { opacity: .35; }

/* ── Guides dropdown (GuideLauncher.razor) ─────────────────────────── */
.fin-guide-menu {
    border: 1px solid var(--outline-variant);
    background: var(--card-bg);
    color: var(--on-surface);
    border-radius: .75rem;
    padding-bottom: .35rem;
    z-index: 1040;
}
.fin-guide-list {
    max-height: 55vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.fin-guide-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .55rem .9rem;
    background: none;
    border: 0;
    text-align: left;
    color: var(--on-surface);
}
.fin-guide-row:hover { background: var(--surface-variant, rgba(0,0,0,.04)); }
.fin-guide-icon { flex-shrink: 0; width: 26px; text-align: center; }
.fin-guide-row .min-w-0 { min-width: 0; display: flex; flex-direction: column; }
.fin-guide-title { font-weight: 700; font-size: .85rem; line-height: 1.3; }
.fin-guide-desc {
    font-size: .75rem;
    color: var(--on-surface-variant, #666);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Day Operations Failure Modal (Light / Dark Mode Support) ───────────── */
.dayops-failed-backdrop {
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}
.dark-theme .dayops-failed-backdrop {
    background: rgba(3, 7, 18, 0.8) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

.dayops-failed-content {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.25) !important;
}
.dark-theme .dayops-failed-content {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
}

.dayops-failed-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
.dark-theme .dayops-failed-header {
    background-color: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
}

.dayops-failed-body {
    background-color: #f8fafc !important;
    color: #334155 !important;
}
.dark-theme .dayops-failed-body {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

.dayops-failed-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: inherit !important;
}
.dark-theme .dayops-failed-card {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

.dayops-header-icon-danger {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
}
.dark-theme .dayops-header-icon-danger {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

.dayops-header-icon-warning {
    background-color: #fff3cd !important;
    color: #664d03 !important;
}
.dark-theme .dayops-header-icon-warning {
    background-color: rgba(255, 193, 7, 0.2) !important;
    color: #ffda6a !important;
}

.dayops-safety-callout-danger {
    background-color: #ffffff !important;
    border: 1px solid #fecaca !important;
    color: #475569 !important;
}
.dark-theme .dayops-safety-callout-danger {
    background-color: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    color: #cbd5e1 !important;
}

.dayops-safety-callout-warning {
    background-color: #ffffff !important;
    border: 1px solid #ffe69c !important;
    color: #475569 !important;
}
.dark-theme .dayops-safety-callout-warning {
    background-color: rgba(255, 193, 7, 0.08) !important;
    border: 1px solid rgba(255, 193, 7, 0.25) !important;
    color: #cbd5e1 !important;
}

.dayops-shield-icon-danger {
    background-color: #fef2f2 !important;
    color: #ef4444 !important;
}
.dark-theme .dayops-shield-icon-danger {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

.dayops-shield-icon-warning {
    background-color: #fff3cd !important;
    color: #664d03 !important;
}
.dark-theme .dayops-shield-icon-warning {
    background-color: rgba(255, 193, 7, 0.2) !important;
    color: #ffda6a !important;
}

.dayops-stage-completed {
    background-color: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #15803d !important;
}
.dark-theme .dayops-stage-completed {
    background-color: rgba(34, 197, 94, 0.14) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    color: #86efac !important;
}

.dayops-stage-failed {
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #b91c1c !important;
}
.dark-theme .dayops-stage-failed {
    background-color: rgba(239, 68, 68, 0.16) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

.dayops-stage-pending {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #94a3b8 !important;
}
.dark-theme .dayops-stage-pending {
    background-color: rgba(51, 65, 85, 0.4) !important;
    border: 1px solid #334155 !important;
    color: #64748b !important;
}

.dayops-terminal {
    background-color: #0b1120 !important;
    border: 1px solid #1e293b !important;
    color: #f1f5f9 !important;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    max-height: 180px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
}
.dayops-terminal-error {
    color: #f87171 !important; /* light coral - high contrast in both themes */
}

.dayops-admin-callout {
    background-color: #fff3cd !important;
    border: 1px solid #ffe69c !important;
    color: #664d03 !important;
}
.dark-theme .dayops-admin-callout {
    background-color: rgba(255, 193, 7, 0.12) !important;
    border: 1px solid rgba(255, 193, 7, 0.28) !important;
    color: #ffe69c !important;
}
.dark-theme .dayops-admin-callout .text-dark {
    color: #fef08a !important;
}

.dayops-badge-meta {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}
.dark-theme .dayops-badge-meta {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #cbd5e1 !important;
}

.dayops-failed-footer {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
}
.dark-theme .dayops-failed-footer {
    background-color: #1e293b !important;
    border-top: 1px solid #334155 !important;
}

/* Account type badges (Deposit & Loan) */
.badge-special,
.badge-loan {
    background-color: rgba(13, 110, 253, 0.12) !important;
    color: #0d6efd !important;
    border: 1px solid rgba(13, 110, 253, 0.28) !important;
}

.dark-theme .badge-special,
html.dark-theme .badge-special,
[data-bs-theme="dark"] .badge-special,
.dark-theme .badge-loan,
html.dark-theme .badge-loan,
[data-bs-theme="dark"] .badge-loan {
    background-color: rgba(25, 118, 210, 0.2) !important;
    color: #90caf9 !important;
    border: 1px solid rgba(25, 118, 210, 0.35) !important;
}

/* Shared icon-only back button (square, outlined, neutral) — used in page headers. */
.btn-back {
    position: relative;
    z-index: 1;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--outline-variant);
    border-radius: .5rem;
    background: var(--surface-container-lowest);
    color: var(--on-surface-variant);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.btn-back:hover {
    background: var(--surface-container-low);
    color: var(--on-surface);
}
.btn-back:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.btn-back .material-symbols-outlined {
    font-size: 1.25rem;
}

/* Hover/focus reveal: the button's own aria-label ("Back to X", already present on
   every instance for accessibility) grows out to the right as a pill, overlapping
   whatever sits next to the button rather than pushing it — no per-page markup
   needed since every .btn-back already carries the label it needs. */
.btn-back::after {
    content: attr(aria-label);
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: .5rem;
    display: flex;
    align-items: center;
    height: 2.25rem;
    max-width: 0;
    overflow: hidden;
    padding: 0;
    white-space: nowrap;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--on-surface);
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: .5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
    opacity: 0;
    pointer-events: none;
    transition: max-width .25s ease, padding .25s ease, opacity .15s ease;
}
.btn-back:hover::after,
.btn-back:focus-visible::after {
    max-width: 16rem;
    padding: 0 .75rem;
    opacity: 1;
}

/* ===== FinacctERP embed (ErpHost.razor) ===== */
/* The iframe fills everything under the topbar; the ERP SPA hides its own
   chrome in embed mode, so FinAcct's nav stays the only sidebar. */
.erp-host {
    height: calc(100vh - var(--topbar-height, 70px));
    overflow: hidden;
}

.erp-embed-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #fff;
}

/* ===== AccountPickerModal card grid ===== */
/* Compact selectable account cards (Select Account / PickUp pickers). */
.acct-card {
    cursor: pointer;
    background: var(--bs-body-bg, #fff);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.acct-card:hover {
    border-color: var(--bs-primary, #4f6bed);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.acct-card:active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
}