/* Select2 hides the original <select> with display:none, which Chrome then
   refuses to run HTML5 required-field validation against ("An invalid form
   control is not focusable") — silently blocking submission with no visible
   error. Keep it in normal flow but visually/interactively hidden instead,
   so required selects still validate correctly. */
.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    display: inline-block !important;
}

/* SACCO-MIS theme: white background, black text, light-green accents */
:root {
    --sacco-green: #4CAF50;
    --sacco-green-dark: #3d8b40;
    --sacco-green-darker: #2e6b31;
    --sacco-green-light: #e8f5e9;
}

html, body {
    background-color: #f4f6f5;
    color: #000000;
    height: 100%;
}

/* App-shell layout: fixed navbar + fixed footer, only the middle
   (sidebar + main content) scrolls between them. Must be a hard `height`
   (not `min-height`) — min-height lets body grow past the viewport to fit
   its content, which defeats the flex sizing below: .sacco-body-wrap would
   never actually be capped to "remaining space", so nothing inside it
   (the sidebar included) would ever need to scroll internally — the whole
   page would scroll instead. */
body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.navbar-sacco {
    flex: 0 0 auto;
}

.sacco-footer {
    flex: 0 0 auto;
}

a {
    color: var(--sacco-green-dark);
}

a:hover {
    color: var(--sacco-green);
}

/* Top navbar */
.navbar-sacco {
    background: linear-gradient(90deg, var(--sacco-green-darker), var(--sacco-green));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    padding-top: .6rem;
    padding-bottom: .6rem;
    z-index: 1030;
}

.navbar-sacco .navbar-brand {
    color: #ffffff !important;
    font-size: 1.1rem;
}

.sacco-navbar-logo {
    height: 32px;
    width: auto;
    border-radius: 4px;
    background: #fff;
    padding: 2px;
}

.btn-sacco-toggle {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
}

/* Page body wrapper — the scrollable region between the fixed navbar and
   fixed footer. Its .row stretches to fill it; sidebar and main content
   each scroll independently within that fixed-height band. */
.sacco-body-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sacco-body-wrap > .row {
    flex: 1 1 auto;
    min-height: 0;
}

/* Sidebar */
.sacco-sidebar {
    background-color: #ffffff;
    border-right: 1px solid #e2e5e3;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.03);
    overflow-y: auto;
    min-height: 0;
}

#mainContent {
    overflow-y: auto;
    min-height: 0;
}

/* Sidebar collapsible groups */
.sacco-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sacco-nav-chevron {
    font-size: .75rem;
    margin-left: auto;
    transition: transform .2s ease;
}

.sacco-nav-toggle.collapsed .sacco-nav-chevron {
    transform: rotate(-90deg);
}

.sacco-nav-sub {
    padding-left: .75rem;
    border-left: 2px solid #eef2ef;
    margin: 2px 0 6px 1.1rem;
}

.sacco-nav-sub .nav-link {
    font-size: .87rem;
    padding: .4rem .75rem;
}

.sacco-sidebar-heading {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .06em;
    color: #9aa39b;
    font-weight: 700;
    padding: 1rem 0.75rem 0.35rem;
}

.sacco-sidebar .nav-link {
    color: #333;
    border-radius: 6px;
    margin-bottom: 3px;
    padding: .55rem .9rem;
    font-size: .93rem;
    transition: background-color .15s ease;
}

.sacco-sidebar .nav-link i {
    width: 1.4em;
    display: inline-block;
    text-align: center;
    color: var(--sacco-green-dark);
}

.sacco-sidebar .nav-link.active,
.sacco-sidebar .nav-link:hover {
    background-color: var(--sacco-green-light);
    color: var(--sacco-green-darker);
    font-weight: 600;
    border-left: 3px solid var(--sacco-green);
    padding-left: calc(.9rem - 3px);
}

.sacco-sidebar .nav-link.active i,
.sacco-sidebar .nav-link:hover i {
    color: var(--sacco-green-darker);
}

@media (max-width: 767.98px) {
    .sacco-sidebar {
        position: fixed;
        top: 58px;
        left: -100%;
        width: 80%;
        max-width: 280px;
        transition: left .2s ease;
        z-index: 1020;
    }
    .sacco-sidebar.sacco-sidebar-open {
        left: 0;
    }
}

.sacco-breadcrumb {
    background: transparent;
    padding: 0 0 .75rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e2e5e3;
    font-size: .85rem;
}

/* Buttons */
.btn-primary,
.btn-sacco {
    background-color: var(--sacco-green);
    border-color: var(--sacco-green);
    color: #ffffff;
}

.btn-primary:hover,
.btn-sacco:hover,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--sacco-green-dark);
    border-color: var(--sacco-green-dark);
    color: #ffffff;
}

.btn-outline-primary {
    color: var(--sacco-green-dark);
    border-color: var(--sacco-green);
}

.btn-outline-primary:hover {
    background-color: var(--sacco-green);
    border-color: var(--sacco-green);
    color: #ffffff;
}

.badge-primary,
.bg-primary {
    background-color: var(--sacco-green) !important;
}

.text-primary {
    color: var(--sacco-green-dark) !important;
}

.page-link {
    color: var(--sacco-green-dark);
}

.page-item.active .page-link {
    background-color: var(--sacco-green);
    border-color: var(--sacco-green);
}

/* Cards & tables */
.card {
    border-color: #e2e5e3;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    margin-bottom: 0;
}

.card-header-sacco {
    background-color: var(--sacco-green-light);
    color: var(--sacco-green-darker);
    font-weight: 600;
    border-bottom: 1px solid #d7ead8;
}

.stat-card {
    border-left: 4px solid var(--sacco-green);
}

.table thead th {
    background-color: #fafbfa;
    border-bottom-width: 1px;
    color: #444;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.table-hover tbody tr:hover {
    background-color: var(--sacco-green-light);
}

/* Auth (login) page — two-column split */
.sacco-auth-body {
    background-color: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.sacco-auth-split {
    display: flex;
    flex: 1 0 auto;
    min-height: calc(100vh - 48px);
}

.sacco-auth-brand {
    flex: 1 1 45%;
    background: linear-gradient(135deg, var(--sacco-green-darker), var(--sacco-green));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem;
}

.sacco-auth-logo {
    max-height: 110px;
    max-width: 220px;
    background: #fff;
    border-radius: 12px;
    padding: 12px;
}

.sacco-auth-icon {
    font-size: 4rem;
    color: #ffffff;
    display: block;
}

.sacco-auth-form {
    flex: 1 1 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

@media (max-width: 767.98px) {
    .sacco-auth-split {
        flex-direction: column;
    }
    .sacco-auth-brand {
        padding: 2rem;
    }
}

.sacco-footer {
    color: #6c757d;
    border-top: 1px solid #e2e5e3;
    background-color: #ffffff;
    flex-shrink: 0;
}

/* DataTables integration */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: .25rem .5rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--sacco-green) !important;
    border-color: var(--sacco-green) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--sacco-green-light) !important;
    border-color: var(--sacco-green) !important;
    color: var(--sacco-green-darker) !important;
}

.sacco-dt-toolbar {
    margin-bottom: .75rem;
    gap: .5rem;
}

.sacco-dt-filterbar {
    background-color: var(--sacco-green-light);
    border: 1px solid #d7ead8;
    border-radius: 6px;
    padding: .6rem .75rem;
    margin-bottom: .75rem;
    gap: .4rem;
}

.sacco-dt-filterbar label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--sacco-green-darker);
}

.dt-buttons {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.dt-buttons .btn,
.dt-buttons .btn.dt-button {
    margin: 0;
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background-color: #fff;
    border: 1px solid var(--sacco-green);
    color: var(--sacco-green-dark) !important;
}

.dt-buttons .btn:hover,
.dt-buttons .btn.dt-button:hover {
    background-color: var(--sacco-green) !important;
    color: #fff !important;
}

.dt-buttons .btn span {
    color: inherit !important;
}

/* scrollY keeps thead/tfoot fixed and only tbody scrolls (DataTables core behavior) */
.dataTables_scrollBody {
    border-bottom: 1px solid #dee2e6;
}

.dataTables_scrollHead th {
    border-bottom: 2px solid #dee2e6 !important;
}

/* Reports landing page */
.sacco-report-heading {
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .05em;
    color: var(--sacco-green-darker);
    font-weight: 700;
    border-bottom: 1px solid #eef2ef;
    padding-bottom: .4rem;
    margin-bottom: .6rem;
}

.sacco-report-row {
    border: none;
    border-bottom: 1px solid #f1f3f2;
    padding: .75rem .5rem;
    color: #000;
}

.sacco-report-row:hover {
    background-color: var(--sacco-green-light);
}

.sacco-report-icon {
    font-size: 1.3rem;
    color: var(--sacco-green-dark);
    width: 2.5rem;
    text-align: center;
    flex-shrink: 0;
}

.font-weight-600 {
    font-weight: 600;
}

/* Print (dividend sheet, receipts) */
@media print {
    .sacco-sidebar, .navbar-sacco, .sacco-breadcrumb, .no-print, .sacco-footer {
        display: none !important;
    }
    #mainContent {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-top: 0 !important;
    }
    body {
        background: #fff !important;
    }

    /* Critical: the on-screen app-shell scrolls #mainContent within a fixed
       height (overflow-y: auto). Printing a scrollable box only renders what
       fits in that box's static size — everything else would be silently cut
       off. Reset the whole shell back to normal flowing layout so print
       paginates through the FULL content instead. */
    html, body, .sacco-body-wrap, .sacco-body-wrap > .row, #mainContent {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
    }

    /* Same clipping risk inside DataTables' own scrollY body — without this,
       printing/exporting a table only captures whatever's currently scrolled
       into view. */
    .dataTables_scrollBody {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Print-only company header (native browser print, Ctrl+P) — hidden on
   screen, shown only inside @media print via Bootstrap's d-print-block. */
.sacco-print-header {
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--sacco-green);
}

@media print {
    .sacco-print-header {
        display: flex !important;
    }
}

.sacco-print-logo {
    max-height: 64px;
    max-width: 160px;
}

.sacco-print-header-text h3 {
    margin: 0;
    font-size: 1.3rem;
}

.sacco-print-slogan {
    font-style: italic;
    color: #555;
    font-size: .85rem;
}

.sacco-print-contact {
    font-size: .8rem;
    color: #444;
}

/* Print-only watermark (logo + business name) and footer (generated
   timestamp + filters applied) — bank-statement style, hidden on screen. */
.sacco-watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-28deg);
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0.06;
    z-index: -1;
    pointer-events: none;
    width: 80%;
}

.sacco-watermark img {
    width: 200px;
    margin: 0 auto 10px;
}

.sacco-watermark-text {
    font-size: 44px;
    font-weight: 800;
    white-space: nowrap;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.sacco-print-footer-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 9px;
    color: #666;
    border-top: 1px solid #ccc;
    padding: 4px 4px 0;
    justify-content: space-between;
    background: #fff;
    z-index: 2;
}

@media print {
    #mainContent {
        padding-bottom: 24px !important;
    }
    @page {
        margin: 20mm 10mm 22mm 10mm;
    }
    @page {
        @bottom-right {
            content: "Page " counter(page) " of " counter(pages);
            font-size: 9px;
            color: #666;
        }
    }
}

/* Deposit/withdrawal receipts (SACCO copy + Member copy) */
.sacco-signature-line {
    border-bottom: 1px solid #333;
    height: 40px;
}

.sacco-receipt-cut {
    text-align: center;
    color: #888;
    font-size: 11px;
    letter-spacing: 1px;
    margin: 4px 0 16px;
    white-space: nowrap;
    overflow: hidden;
}

@media print {
    .sacco-receipt {
        break-inside: avoid;
        page-break-inside: avoid;
        border: 1px solid #333 !important;
    }
}