@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 */
.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;
}

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

.dark-theme .text-muted {
    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;
    color: var(--on-surface) !important;
}

.dark-theme .bg-primary-subtle {
    background-color: rgba(25, 118, 210, 0.15) !important;
    color: var(--on-surface) !important;
}

.dark-theme .bg-warning-subtle {
    background-color: rgba(255, 193, 7, 0.15) !important;
    color: var(--on-surface) !important;
}

.dark-theme .bg-danger-subtle {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: var(--on-surface) !important;
}

.dark-theme .bg-info-subtle {
    background-color: rgba(13, 202, 240, 0.15) !important;
    color: var(--on-surface) !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: 2px 0;
}
.dt-pager {
    display: inline-flex;
    flex-wrap: nowrap;
    margin: 0;
    border: 1px solid var(--outline-variant);
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}
.dt-pager .page-item {
    margin: 0 !important;
    border-right: 1px solid var(--outline-variant);
}
.dt-pager .page-item:last-child {
    border-right: none;
}
.dt-pager .page-link {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--surface) !important;
    color: var(--on-surface) !important;
    font-size: 13px !important;
    font-weight: 500;
    min-width: 38px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px !important;
    box-shadow: none !important;
    user-select: none;
    white-space: nowrap;
}
.dt-pager .page-item:not(.active):not(.disabled) .page-link:hover {
    background: var(--surface-variant) !important;
    color: var(--primary) !important;
}
.dt-pager .page-item.active .page-link {
    background: var(--primary) !important;
    color: var(--on-primary) !important;
    border-color: var(--primary) !important;
    font-weight: 700 !important;
}
.dt-pager .page-item.disabled .page-link {
    color: var(--on-surface-variant) !important;
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

@media (max-width: 768px) {
    .dt-pager .page-link {
        min-width: 32px;
        height: 32px;
        padding: 0 8px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 576px) {
    .dt-pager-nav {
        width: 100%;
        justify-content: center;
    }
    .dt-pager .page-link {
        min-width: 28px;
        height: 30px;
        padding: 0 6px !important;
        font-size: 11px !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 {
    min-width: 4.75rem;
    padding-right: 2.25rem;
    background-position: right 0.6rem center;
}

.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-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;
}

/* .alert-info carries its own light-mode palette (near-white cyan background), which
   stays put in dark mode and drops a bright slab into the middle of a dark page.
   Re-tint it to the slate palette instead. */
.dark-theme .alert-info {
    background-color: rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.3);
    color: #bae6fd;
}

.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;
}

/* Light mode specific visibility for DataTables labels */
body:not(.dark-theme) .dataTables_wrapper .dataTables_length label,
body:not(.dark-theme) .dataTables_wrapper .dataTables_filter label {
    color: #e3e3e3 !important;
    font-weight: 600;
}

/* 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: all .3s ease;
    display: flex;
    flex-direction: column;
}

.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);
}

.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 */
@media (min-width: 992px) {
    .sidebar-collapsed .app-menu {
        width: 70px;
    }

    .sidebar-collapsed .app-menu .menu-text,
    .sidebar-collapsed .app-menu .menu-header,
    .sidebar-collapsed .app-menu .logo-box .logo-full {
        display: none;
    }

    .sidebar-collapsed .app-menu .logo-box .logo-icon {
        display: inline-block;
    }

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

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

/* Specific logic for 1024-ish resolution (Small Desktops / Large Tablets) */
@media (min-width: 992px) and (max-width: 1200px) {

    /* Force sidebar to icons only mode by default in this range */
    .app-menu {
        width: 70px !important;
        overflow: hidden;
    }

    .app-menu .menu-text,
    .app-menu .menu-header,
    .app-menu .logo-box .logo-full {
        display: none;
    }

    .app-menu .logo-box .logo-icon {
        display: inline-block;
    }

    /* Adjust page layout for the narrow sidebar */
    .content-page {
        margin-left: 70px !important;
    }

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

    /* Detached Layout Support in this range */
    .detached-layout .navbar-custom,
    .detached-layout .footer {
        left: 100px !important;
    }

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

    /* Hover effect: Expand sidebar over content */
    .app-menu:hover {
        width: var(--sidebar-width) !important;
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.15);
    }

    .app-menu:hover .menu-text,
    .app-menu:hover .menu-header,
    .app-menu:hover .logo-box .logo-full {
        display: inline-block;
    }

    .app-menu:hover .logo-box .logo-icon {
        display: none;
    }
}



/* Mobile & Tablet: Sidebar Overlay */
@media (max-width: 991px) {
    .app-menu {
        left: calc(-1 * var(--sidebar-width));
    }

    .content-page,
    .navbar-custom,
    .footer {
        margin-left: 0 !important;
        left: 0 !important;
    }

    .sidebar-open .app-menu {
        left: 0;
    }

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

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

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

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

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

    .sidebar-collapsed.detached-layout .navbar-custom {
        left: 100px;
        margin-left: 0;
    }

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

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

/* ========== Menu Styles ========== */
.logo-box {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    /* The logo image is a light/transparent PNG that disappears on the dark
       sidebar. Give the box a white backdrop so the logo stays visible in
       dark mode (and looks the same as light mode). */
    background: #fff;
}

/* In detached layout the sidebar itself is rounded (12px); square white
   logo-box corners would punch through that curve, so match the top radius. */
@media (min-width: 992px) {
    .detached-layout .logo-box {
        border-radius: 12px 12px 0 0;
    }
}

.logo-box img {
    max-width: 220px;
    height: auto;
}

/* Two-state logo: full wordmark when the sidebar is expanded, icon-only
   when it collapses to the 70px rail. Default = expanded. */
.logo-box .logo-icon {
    display: none;
}

.logo-box .logo-full {
    display: inline-block;
}

/* The logo image is a light/transparent PNG that disappears on the dark
   sidebar. Give the .logo-light anchor a white backdrop so the logo stays
   visible in dark mode (and looks the same as light mode). */
.logo-light {
    background: #fff;
    border-radius: 4px;
    padding: 2px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.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;
}

.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);
}

/* ========== 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;
}

.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 #f59e0b;
}

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

.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(245, 158, 11, 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);
}

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

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

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

.text-purple {
    color: #8b5cf6 !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(245, 158, 11, 0.1);
    color: #f59e0b;
}

.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;
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

.bg-orange {
    background: #f59e0b;
}

.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(245, 158, 11, 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(245, 158, 11, 0.1);
    color: #f59e0b;
    border: none;
}

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

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

/* Toast Notifications */
.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-info {
    border-left: 4px solid var(--primary);
}

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

.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;
}

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

.detail-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--on-surface-variant);
    display: block;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.detail-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--on-surface);
}

.detail-value-nep {
    font-size: 14px;
    color: var(--on-surface-variant);
}

.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(245, 158, 11, 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;
}

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

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

.gs-input {
    width: 100%;
    height: 36px;
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
    font-size: 13px !important;
    padding: 0 36px 0 34px !important;
    transition: all 0.2s ease;
    outline: none;
}

.gs-input::placeholder {
    color: rgba(255,255,255,0.6);
}

.gs-input:focus {
    background: rgba(255,255,255,0.25) !important;
    border-color: rgba(255,255,255,0.5) !important;
    box-shadow: none !important;
}

.gs-spinner {
    position: absolute;
    right: 10px;
    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; }

/* `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;
}

/* 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;
}

/* 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;
}

.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);
}

/* ── Conductor picker modal ──────────────────────────────────────────────────
   The modal is rendered as a sibling of the .deposit-view card, not inside
   it, so the .deposit-view sizing rules above do not reach it and it falls
   back to the 16px browser default. Same approach — one base size on the
   modal content, with the font-* utilities still winning via !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 */
@media (min-width: 1200px) and (max-width: 1440px) {
    :root {
        --topbar-height: 60px;
    }

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

    .footer {
        padding: 12px 20px;
    }
}