/* ============================================================
   APP.CSS — the application's own styles (Tailwind utilities are in tailwind.css)

   How to read this file:
   - Each numbered section below starts with a header that says what it styles
     and which views (app/Views/admin/...) or scripts use it.
   - "Used by" is worked out from the class names in that section; a view is
     listed if it contains at least one of those classes.
   - Keep new styles in the section they belong to, and update its header.

   Contents (in file order):
     1. Base — Alpine cloak and page-wide basics
     2. Content Area (admin form/list containers)
     3. Form Layout
     4. Cropper Modal
     5. Form Inputs
     6. Section Title
     7. Tabs
     8. Buttons
     9. Fonts & Text Utilities
     10. Validation Errors
     11. Search Input with Icon
     12. View Page - Section Heading
     13. View Page - Print Styles
     14. Entity list pages — full-bleed under main (any module)
     15. Shared admin list — toolbar, search, table, pager (any module)
     16. Entity detail view — header/sections (.dv-*), shared with any profile
     17. Entity form fields — labels, inputs, pincode dropdown (create/edit)
     18. Admin flash messages
     19. Entity forms — shell layout (create/edit/view when using cc-* tokens)
     20. MEMBER CREATE  +  MEMBER EDIT
     21. MEMBER LIST
     22. CSS Custom Properties (Design Tokens)
     23. Share Form Layout
     24. Alert Boxes
     25. Share Settlement Summary Cards
     26. Form validation error (share suspense, suspense repayment)
     27. TOP NAVBAR — Yashaswini Style
     28. LOGIN PAGE STYLES — Co-op Bank Staff Login
     29. REPORT PRINT — Column-based orientation + common styles
     30. LIST PAGE PRINT — shared rules for all app-list-page views
     31. NAVBAR
     32. LOGIN PAGE (NAVY SPLIT-SCREEN)
     33. USER MENU DROPDOWN — the name / role box on the right of the navbar
     34. SHARED DASHBOARD STYLES
   ============================================================ */

/* ============================================================
   1. Base — Alpine cloak and page-wide basics
   Used by: every page (element / global styles)
   ============================================================ */
/* Alpine.js cloak - hide elements until Alpine initializes */
[x-cloak] { display: none !important; }

/* ============================================================
   2. Content Area (admin form/list containers)

   Used by: accounts/account-statement, accounts/index, agent/index, customers/index,
            deposit-schemes/index, deposits/fd-instruction-master,
            deposits/fd-interest-transfer, deposits/fd-renewal, deposits/index,
            deposits/pigmy-collection-report, deposits/pigmy-index,
            deposits/pigmy-remittance-list, deposits/rd-index, directors/index,
            … and 29 more
   ============================================================ */
.content-area {
    background-color: #ebebeb;
}

/* ============================================================
   3. Form Layout

   Used by: customers/edit, accounts/account-statement, accounts/create,
            accounts/group-sb-create, accounts/passbook-print, agent/accounts,
            agent/create, agent/index, audit/balance-sheet, audit/bank-statements,
            audit/deposit-interest-register, audit/fd-interest-payable,
            audit/overdue-loans, audit/_print_common, … and 149 more
   ============================================================ */
.row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.row > label {
    width: 170px;
    min-width: 170px;
    text-align: left;
    padding-right: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
}

.inner-label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    padding-right: 6px;
    align-self: center;
}

/* ============================================================
   4. Cropper Modal

   Used by: customers/create, customers/edit
   ============================================================ */
.cropper-modal-box {
    width: 500px;
    max-width: 95vw;
}

.cropper-modal-canvas {
    max-height: 400px;
    overflow: hidden;
}

.cropper-modal-canvas img {
    max-width: 100%;
    display: block;
}

/* ============================================================
   5. Form Inputs

   Used by: customers/edit, settings/bank-settings, shares/create, shares/part-repayment,
            users/create, users/edit, accounts/account-closure, accounts/create,
            accounts/group-sb-create, accounts/index, audit/interest-provisions,
            customers/bulk-upload, customers/create, customers/freeze-customer,
            … and 52 more
   ============================================================ */
.inp {
    height: 22px;
    border: 1px solid #b5b5b5;
    padding: 0 5px;
    font-size: 12px;
    outline: none;
    background-color: #fff !important;
}

.inp:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px #3b82f6;
}

.inp.inp-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px #ef4444 !important;
}

textarea.inp {
    padding-top: 3px;
    height: auto;
}

/* Hide number input spinners */
input[type="number"].inp::-webkit-outer-spin-button,
input[type="number"].inp::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

input[type="number"].inp {
    -moz-appearance: textfield;
    appearance: textfield;
}
/* ============================================================
   6. Section Title

   Used by: accounts/create, accounts/group-sb-create, agent/accounts, agent/create,
            agent/edit, board-meetings/complete, board-meetings/create,
            board-meetings/edit, customers/create, customers/edit, deposit-schemes/edit,
            deposits/agent-commission, deposits/closure, deposits/create, … and 71 more
   ============================================================ */
.section-title {
    background: #9ca3af;
    color: #1f2937;
    padding: 5px 10px;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
    border-left: 4px solid #4f46e5;
}

/* ============================================================
   7. Tabs

   Used by: audit/interest-provisions, accounts/account-closure,
            accounts/account-statement, accounts/create, accounts/index,
            accounts/passbook-print, accounts/view, agent/accounts, agent/create,
            agent/index, agent/view, audit/fd-interest-payable, audit/investment-schedule,
            audit/loan-schedule, … and 177 more
   ============================================================ */
.tab-btn {
    padding: 10px 20px;
    font-size: 13px;
    background: #f3f4f6;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    color: #6b7280;
    margin-bottom: -1px;
}

.tab-btn:hover {
    background: #e5e7eb;
    color: #1f2937;
}

.tab-btn.active {
    background: #ffffff;
    font-weight: 600;
    color: #4f46e5;
    border-bottom: 2px solid #4f46e5;
}

/* ============================================================
   8. Buttons

   Used by: accounts/account-statement, accounts/create, accounts/group-sb-create,
            accounts/index, accounts/passbook-print, agent/accounts, agent/index,
            board-meetings/attendance, board-meetings/complete, board-meetings/create,
            board-meetings/edit, customers/create, customers/customer-info,
            customers/delete, … and 66 more
   ============================================================ */
.btn {
    background: #f5f5f5;
    border: 1px solid #b5b5b5;
    padding: 5px 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    border-radius: 3px;
}

.btn:hover {
    background: #e5e7eb;
}

.footer-btn,
.footer-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 20px;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.15s;
    background: #e5e7eb;
    border: 1px solid #9ca3af;
    color: #1f2937;
    text-decoration: none;
}

.footer-btn:hover,
.footer-btn-primary:hover {
    background: #f3f4f6;
}

/* ============================================================
   9. Fonts & Text Utilities

   Used by: shares/create, shares/part-repayment, customers/create, customers/edit,
            deposits/pigmy-part-withdrawal, partials/bilingual_remark,
            transactions/sb-multi-credit, transactions/sb-multi-debit, users/create,
            users/edit, deposits/pigmy-manual-collection, deposit-schemes/create,
            directors/create, employees/create, … and 290 more
   ============================================================ */
.kan-field {
    font-family: 'Noto Sans Kannada', sans-serif;
}

/* Bilingual remark / narration boxes (English + Kannada): same comfortable height on every screen */
input.bilingual-remark-input {
    box-sizing: border-box;
    height: 40px !important;
    min-height: 40px;
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-radius: 6px;
}

/* Bilingual remark: span 2 cols in cc-form-grid → each half matches one standard field width */
.app-entity-form .cc-form-grid > .bilingual-remark-span {
    grid-column: span 2;
    min-width: 0;
}

/* Legacy layouts: remark wrapped inside an extra .row — still span 2 cols */
.app-entity-form .cc-form-grid > .row:has(.bilingual-remark-span) {
    grid-column: span 2;
    min-width: 0;
}

@media (max-width: 1024px) {
    .app-entity-form .cc-form-grid > .bilingual-remark-span,
    .app-entity-form .cc-form-grid > .row:has(.bilingual-remark-span) {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .app-entity-form .cc-form-grid > .bilingual-remark-span,
    .app-entity-form .cc-form-grid > .row:has(.bilingual-remark-span) {
        grid-column: span 1;
    }
}

/* Denomination button: same row as remark fields, aligned to input bottom */
.app-entity-form .cc-denom-action .cc-denom-label-spacer {
    visibility: hidden;
    user-select: none;
}

.app-entity-form .cc-denom-action .cc-denom-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background-color: #2563eb;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s;
}

.app-entity-form .cc-denom-action .cc-denom-btn:hover {
    background-color: #1d4ed8;
}

/* FD / RD / Pigmy opening: scheme and customer search side by side */
.dep-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}
.dep-top-row .form-grid {
    grid-template-columns: 1fr !important;
}
.dep-top-row .field[style*="flex:0 0"] {
    flex: 1 1 260px !important;
}
@media (max-width: 768px) {
    .dep-top-row {
        grid-template-columns: 1fr;
    }
}

/* Payment Mode select + denomination button/badge in one row (cash-denomination.js, data-denom-inline) */
.cd-pay-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.cd-pay-row > select {
    flex: 1 1 0;
    min-width: 120px;
    width: auto;
}
.cd-pay-row > .cd-inline-box {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: auto !important;
}
.cd-pay-row > .cd-inline-box > label,
.cd-pay-row > .cd-inline-box > p {
    display: none !important;
}
.cd-pay-row > .cd-inline-box > div {
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
}
.cd-pay-row > .cd-inline-box button {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 12px !important;
    font-size: 12px !important;
}
.cd-pay-row > .cd-inline-box span,
.cd-pay-row > .cd-inline-box > button ~ div {
    min-width: 0;
    font-size: 11px !important;
    line-height: 1.25;
    white-space: normal;
}
/* The old separate denomination slot is left empty once its button moves beside Payment Mode */
.app-entity-form .cc-denom-action:not(:has(button)) {
    display: none;
}
.cd-pay-row > .cd-inline-box > button ~ div {
    display: inline-block;
    margin-left: 8px !important;
    vertical-align: middle;
}

.bilingual-remark-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: end;
    width: 100%;
    min-width: 0;
}

.bilingual-remark-col {
    min-width: 0;
}

.bilingual-remark-col .dc-label {
    display: block;
    margin-bottom: 4px;
}

@media (max-width: 480px) {
    .bilingual-remark-row {
        grid-template-columns: 1fr;
    }
}

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

/* ============================================================
   10. Validation Errors

   Used by: customers/edit, shares/part-repayment, accounts/account-statement,
            accounts/create, accounts/group-sb-create, accounts/passbook-print,
            agent/accounts, agent/create, agent/index, audit/balance-sheet,
            audit/bank-statements, audit/deposit-interest-register,
            audit/fd-interest-payable, audit/overdue-loans, … and 149 more
   ============================================================ */
/* Standard error - aligns under input (after 170px label) */
.field-error {
    width: 100%;
    padding-left: 176px;
    color: #ef4444;
    font-size: 11px;
    line-height: 1.3;
    margin-top: -2px;
}

/* Error for second field in shared rows (Marital Status, Director etc.)
   padding-left is set dynamically via JS to align under the field */

/* Error positioned absolutely under a specific field (e.g. PAN)
   left is set dynamically via JS */
.field-error-abs {
    position: absolute;
    color: #ef4444;
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    margin-top: 1px;
}

/* Extra bottom space when a shared-row has an absolute error that needs room */
.row.has-inline-error {
    margin-bottom: 14px;
}

/* ============================================================
   11. Search Input with Icon

   Used by: customers/create, customers/edit, accounts/account-statement, accounts/create,
            accounts/group-sb-create, accounts/passbook-print, agent/accounts,
            agent/create, agent/index, audit/balance-sheet, audit/bank-statements,
            audit/deposit-interest-register, audit/fd-interest-payable,
            audit/overdue-loans, … and 151 more
   ============================================================ */
.row > .search-input-wrap {
    max-width: 380px;
}

.search-input-wrap {
    position: relative;
    flex: 1;
}

.search-input-wrap .search-icon {
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #6b7280;
    pointer-events: none;
}

.search-input-wrap .search-inp {
    width: 100%;
    height: 24px;
    padding: 0 32px 0 32px;
    font-size: 13px;
    line-height: 24px;
    border: 1px solid #9ca3af;
    border-radius: 20px;
    outline: none;
    background: #fff;
    box-shadow: none;
}

.search-input-wrap .search-inp:focus {
    border-color: #6b7280;
    box-shadow: 0 0 0 1px #d1d5db;
}

.search-input-wrap .search-inp::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.search-input-wrap .search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #9ca3af;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-input-wrap .search-clear:hover {
    color: #ef4444;
}

.pincode-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid #d1d5db;
    border-top: none;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 0 0 4px 4px;
}

.pincode-item {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    border-bottom: 1px solid #f3f4f6;
    gap: 8px;
    text-transform: uppercase;
}

.pincode-item:hover, .pincode-active {
    background: #dbeafe;
}

.pincode-taluk {
    flex: 1;
    font-weight: 600;
    color: #1e3a5f;
}

.pincode-code {
    width: 60px;
    text-align: center;
    color: #059669;
    font-weight: 600;
    font-family: monospace;
}

.pincode-dist {
    width: 120px;
    text-align: right;
    color: #6b7280;
    font-size: 11px;
}

.pincode-no-result {
    color: #9ca3af;
    font-style: italic;
    cursor: default;
    justify-content: center;
}

.pincode-no-result:hover {
    background: transparent;
}

/* ============================================================
   12. View Page - Section Heading

   Used by: deposits/fd-renewal, other/application-forms, shares/view
   ============================================================ */
.view-heading {
    font-size: 11px;
    font-weight: bold;
    color: #000;
    padding: 5px 12px;
    margin: 0;
    border-bottom: 1px solid #ccc;
}

/* ============================================================
   13. View Page - Print Styles

   Used by: shares/view, deposits/fd-renewal, views/layouts/admin, accounts/index,
            agent/view, audit/balance-sheet, audit/bank-statements,
            audit/deposit-interest-register, audit/fd-interest-payable,
            audit/income-expenditure, audit/investment-schedule,
            audit/loan-interest-receivable, audit/loan-schedule, audit/npa-classification,
            … and 311 more
   ============================================================ */
@media print {
    @page { size: A4 portrait; margin: 10mm 12mm; }

    /* Hide layout chrome */
    header, footer, nav, aside,
    .no-print,
    .bg-\[\#959aa2\] { display: none !important; }

    /* Reset body */
    html, body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        color: #000 !important;
    }

    /* Reset main wrapper */
    main { padding: 0 !important; margin: 0 !important; }
    .min-h-screen { min-height: 0 !important; }
    .bg-gray-100 { background: #fff !important; }

    /* Nav is hidden in print; remove layout spacer or page 1 is blank */
    .navbar-offset { padding-top: 0 !important; }
    .top-navbar { display: none !important; }

    /* Print area */
    #printArea {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
    }

    /* ID header */
    .print-header {
        padding: 6px 10px !important;
        border-bottom: 2px solid #000 !important;
        background: #fff !important;
    }
    .print-header span {
        font-size: 13px !important;
        color: #000 !important;
    }

    /* Section headings */
    .view-heading {
        font-size: 11px !important;
        font-weight: bold !important;
        padding: 6px 10px !important;
        margin: 0 !important;
        background: none !important;
        border-bottom: 1.5px solid #000 !important;
        color: #000 !important;
    }

    /* Content sections */
    .print-section, .p-4 { padding: 6px 10px !important; }

    /* Tables */
    .view-tbl { font-size: 10px !important; }
    .view-tbl td { padding: 3px 6px !important; color: #000 !important; }
    .view-tbl td.text-gray-500 { white-space: nowrap !important; }
    .view-tbl th { padding: 3px 6px !important; font-size: 9px !important; }
    .text-gray-500 { color: #555 !important; }

    /* Address grid */
    .grid { display: grid !important; gap: 4px 16px !important; }
    .grid-cols-2 { grid-template-columns: 1fr 1fr !important; }

    /* KYC images */
        
    /* Kannada font */
    .kan-field { font-size: 10px !important; }

    /* Nominee/data tables */
    table.border th, table.border td { font-size: 9px !important; padding: 3px 4px !important; }

    /* Force colors */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    /* Loan view: remove backgrounds, align columns */
                        
    /* Customer view: remove backgrounds in print */
        
    /* Member view: remove backgrounds in print */
            
    /* Account view: remove backgrounds in print */
            }

/* ============================================================
   14. Entity list pages — full-bleed under main (any module)
   Root: .app-list-page · optional .app-list-page--icon-actions (compact action icons)
   Typical: class="app-list-page … cc-breakout w-full pb-8"

   Used by: accounts/index, agent/index, customers/index, deposit-schemes/index,
            deposits/fd-instruction-master, deposits/fd-interest-transfer, deposits/index,
            deposits/pigmy-index, deposits/pigmy-remittance-list, deposits/rd-index,
            directors/index, employees/index, groups/list, ledgers/account, … and 57 more
   ============================================================ */
.app-list-page.cc-breakout {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
    overflow-x: clip;
}

/* ============================================================
   15. Shared admin list — toolbar, search, table, pager (any module)

   Used by: members/index, users/list, accounts/index, customers/index,
            deposits/fd-instruction-master, deposits/pigmy-index, employees/index,
            agent/index, directors/index, deposits/index, deposits/rd-index, loan/index,
            od/index, service-reports/list, … and 81 more
   ============================================================ */
.app-list-page {
    font-family: 'Rajdhani', ui-sans-serif, system-ui, sans-serif;
    color: #1e293b;
}

.app-list-panel.content-area {
    background: #ffffff;
    border: 1px solid #d7dfef;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(15, 30, 58, 0.08);
}

.app-list-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid #d7dfef;
    background: #f5f8fd;
}

/* Lead block: title + optional link; grows like .app-list-title without stretching inner heading */
.app-list-toolbar-lead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1 1 180px;
    min-width: 0;
}

.app-list-toolbar-heading {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #14213d;
    line-height: 1.2;
}

.app-list-toolbar-back {
    font-size: 11px;
    padding: 4px 10px;
    font-weight: 600;
}

.app-list-title {
    flex: 1 1 180px;
    min-width: 180px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #14213d;
    line-height: 1.2;
}

.app-list-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.app-list-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 220px;
    padding: 6px 12px;
    border: 1px solid #d7dfef;
    border-radius: 6px;
    background: #eef3fb;
}

.app-list-search span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: #7b8aa8;
    flex-shrink: 0;
}

.app-list-search span svg {
    width: 14px;
    height: 14px;
}

.app-list-search input {
    width: 180px;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #1e293b;
    font-family: 'Rajdhani', ui-sans-serif, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.app-list-search input::placeholder {
    color: #94a3b8;
}

.app-list-search-submit {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-list-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.app-list-btn svg {
    width: 14px;
    height: 14px;
}

.app-list-btn-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.app-list-btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.app-list-btn-outline {
    background: transparent;
    border-color: #d7dfef;
    color: #475569;
}

.app-list-btn-outline:hover {
    background: #eef3fb;
    color: #1e293b;
}

.app-list-table-wrap {
    overflow-x: auto;
}

.app-list-table {
    width: 100%;
    min-width: 1120px;
    border-collapse: collapse;
}

.app-list-table thead th {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(42, 58, 106, 0.2);
    background: #eef3fb;
    color: #0c0c0c;
    text-align: left;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.app-list-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(42, 58, 106, 0.14);
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    vertical-align: top;
}

.app-list-table tbody tr:hover {
    background: #f8fbff;
}

.app-list-col-sl,
.app-list-sl {
    width: 52px;
    text-align: center;
}

.app-list-sl {
    color: #94a3b8 !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px !important;
}

.app-list-col-actions,
.app-list-actions {
    text-align: left;
    white-space: nowrap;
}

/* Flex row so <a> and <form><button> share one alignment axis (inline form was baseline-shifted). */
.app-list-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.app-list-actions .app-list-action {
    margin: 2px;
}

/* Inside flex row, spacing is gap — not margin on pills */
.app-list-actions .app-list-actions-row .app-list-action {
    margin: 0;
}

.app-list-actions .app-list-action-form {
    display: inline-flex;
    margin: 0;
    padding: 0;
    align-items: center;
}

.app-list-actions-row .app-list-action-form {
    display: flex;
    align-items: center;
}

.app-list-actions button.app-list-action {
    border: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    vertical-align: middle;
    font-family: inherit;
    box-sizing: border-box;
}

.app-list-actions-row .app-list-action-form button.app-list-action {
    margin: 0;
}

.app-list-code {
    color: #2563eb;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.app-list-primary {
    color: #1e293b;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.app-list-secondary {
    margin-top: 2px;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
}

.app-list-uppercase {
    text-transform: uppercase;
}

.app-list-kannada {
    color: #059669 !important;
    font-family: 'Tiro Kannada', 'Noto Sans Kannada', sans-serif;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35;
}

.app-list-phone {
    color: #1e293b !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.app-list-mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
}

.app-list-balance {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

td.app-list-balance--green  { color: #059669; }
td.app-list-balance--blue   { color: #0369a1; }
td.app-list-balance--muted  { color: #94a3b8; }

.app-list-text-center { text-align: center; }
.app-list-text-right  { text-align: right; white-space: nowrap; }
/* Header cells: the alignment classes must win over ".app-list-table thead th { text-align:left }"
   so a right-aligned amount column has a right-aligned heading (e.g. Member list → Share Value) */
.app-list-table thead th.app-list-text-right  { text-align: right; }
.app-list-table thead th.app-list-text-center { text-align: center; }
.app-list-date        { font-size: 12px; color: #64748b; }

/* ── Filter selects ── */
.app-list-filter-select {
    height: 36px;
    padding: 0 12px;
    border: 1px solid #d0dbe8;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
}
.app-list-filter-select:focus { outline: 2px solid #2563eb; outline-offset: -1px; }

/* ── Status badges ── */
.app-list-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.app-list-badge--active { background: #d1fae5; color: #065f46; }
.app-list-badge--frozen { background: #dbeafe; color: #1e40af; }
.app-list-badge--closed { background: #fee2e2; color: #991b1b; }

/* ── Type badge ── */
.app-list-type-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* ── Reusable mask-image icons ── */
.icon {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.icon-view {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3Cpath d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3Cpath d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'/%3E%3C/svg%3E");
}

.icon-edit {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'/%3E%3C/svg%3E");
}

.icon-delete {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16'/%3E%3C/svg%3E");
}

.icon-freeze {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18m-6-3l6-6 6 6M6 9l6-6 6 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18m-6-3l6-6 6 6M6 9l6-6 6 6'/%3E%3C/svg%3E");
}

.icon-lock {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z'/%3E%3C/svg%3E");
}

.icon-check-circle {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
}

.icon-download {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'/%3E%3C/svg%3E");
}

.icon-print {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z'/%3E%3C/svg%3E");
}

.icon-search {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
}

.app-list-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 66px;
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.app-list-action:hover {
    background: #059669;
    color: #ffffff;
}

.app-list-action svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    display: block;
}

.app-list-action .icon {
    width: 13px;
    height: 13px;
}

.app-list-action-edit {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
}

.app-list-action-edit:hover {
    background: #d97706;
    color: #ffffff;
}

.app-list-action-idcard {
    background: #f5f3ff;
    color: #7c3aed;
}

.app-list-action-idcard:hover {
    background: #7c3aed;
    color: #ffffff;
}

.app-list-action-delete {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.app-list-action-delete:hover {
    background: #dc2626;
    color: #ffffff;
}

.app-list-action-emoji {
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.app-list-action-freeze {
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
}

.app-list-action-freeze:hover {
    background: #0ea5e9;
    color: #ffffff;
}

.app-list-action-close {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.app-list-action-close:hover {
    background: #dc2626;
    color: #ffffff;
}

.app-list-action-unfreeze {
    background: rgba(99, 102, 241, 0.14);
    color: #4338ca;
}

.app-list-action-unfreeze:hover {
    background: #4f46e5;
    color: #ffffff;
}

/* Modifier: icon-only buttons (no text labels) */

/* Icon-only actions (no "View" / "Edit" text) */

.app-list-empty {
    padding: 32px 16px !important;
    color: #94a3b8 !important;
    text-align: center;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.app-list-pager nav > div {
    border-top: 1px solid #d7dfef;
    background: #f8fbff;
}

.app-list-pager nav > div > div:first-child {
    color: #64748b !important;
    font-family: 'Rajdhani', ui-sans-serif, sans-serif;
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.app-list-pager nav > div > div:last-child {
    gap: 6px !important;
}

.app-list-pager nav a,
.app-list-pager nav span {
    border-radius: 6px !important;
    font-family: 'Rajdhani', ui-sans-serif, sans-serif;
    font-size: 12px !important;
    font-weight: 700 !important;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.app-list-pager nav a {
    border-color: #d7dfef !important;
    background: #ffffff;
    color: #475569 !important;
    box-shadow: 0 1px 2px rgba(15, 30, 58, 0.04);
}

.app-list-pager nav a:hover {
    background: #eef3fb !important;
    border-color: #93c5fd !important;
    color: #1e3a5f !important;
}

.app-list-pager nav span.bg-gray-700 {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
}

.app-list-pager nav span.cursor-not-allowed {
    border-color: #e2e8f0 !important;
    background: #f8fafc !important;
    color: #cbd5e1 !important;
}

@media (max-width: 900px) {
    .app-list-toolbar {
        align-items: stretch;
    }

    .app-list-search-form {
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    .app-list-search {
        flex: 1 1 100%;
    }

    .app-list-search input {
        width: 100%;
    }

    .app-list-pager nav > div {
        gap: 10px;
        align-items: flex-start;
    }
}

/* ============================================================
   16. Entity detail view — header/sections (.dv-*), shared with any profile

   Used by: members/view, accounts/view, customers/view, deposits/view, agent/view,
            loan/view, users/view, directors/view, groups/view, customers/customer-info,
            customers/delete, transactions/deposit, transactions/sb-internal-transfer,
            transactions/withdrawal
   ============================================================ */
.app-entity-view-page {
    font-family: 'Rajdhani', ui-sans-serif, system-ui, sans-serif;
    color: #1e293b;
}

.dv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    text-decoration: none;
    font-family: 'Rajdhani', ui-sans-serif, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.dv-btn-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.dv-btn-primary:hover {
    background: #1d4ed8;
}

.dv-btn-muted {
    background: #1e3a5f;
    border-color: #1e3a5f;
    color: #ffffff;
}

.dv-btn-muted:hover {
    background: #162c49;
}

.dv-btn-outline {
    background: transparent;
    border-color: #d7dfef;
    color: #475569;
}

.dv-btn-outline:hover {
    background: #eef3fb;
    color: #1e293b;
}

.dv-btn-danger {
    background: transparent;
    border-color: #fca5a5;
    color: #dc2626;
}

.dv-btn-danger:hover {
    background: #fef2f2;
}

.dv-link {
    color: #0891b2;
    text-decoration: none;
    font-weight: 700;
}

.dv-link:hover {
    text-decoration: underline;
}

.dv-section {
    border-bottom: 1px solid #d7dfef;
}

.dv-section:last-of-type {
    border-bottom: none;
}

.dv-table {
    width: 100%;
    border-collapse: collapse;
}

.dv-table .dv-col-label { width: 14%; }
.dv-table .dv-col-value { width: 36%; }

.dv-table td {
    padding: 9px 20px;
    border-bottom: 1px solid rgba(42, 58, 106, 0.1);
    vertical-align: top;
    font-size: 13px;
}

.dv-table tr:last-child td {
    border-bottom: none;
}

.dv-label {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.dv-value {
    color: #1e293b;
    font-weight: 500;
}

.dv-value-strong {
    font-weight: 700;
    color: #14213d;
}

.dv-value-mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.02em;
}

.dv-value-accent {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 15px;
    font-weight: 800;
    color: #0891b2;
}

.dv-value-balance {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 17px;
    font-weight: 800;
}

.dv-value-balance--green { color: #059669; }
.dv-value-balance--blue  { color: #0369a1; }
.dv-value-balance--muted { color: #94a3b8; }
.dv-value-balance--red   { color: #dc2626; }

.dv-value-kannada {
    font-family: 'Tiro Kannada', 'Noto Sans Kannada', sans-serif;
    color: #059669;
    font-weight: 600;
    font-size: 14px;
}

.dv-docs {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding: 16px 20px;
}

.dv-doc-card {
    text-align: center;
}

.dv-doc-label {
    margin: 0 0 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}

.dv-doc-photo {
    width: 112px;
    height: 128px;
    object-fit: cover;
    border: 1px solid #d7dfef;
    border-radius: 6px;
}

.dv-doc-signature {
    width: 144px;
    height: 80px;
    object-fit: contain;
    border: 1px solid #d7dfef;
    border-radius: 6px;
    background: #f8fafc;
}

.dv-footer {
    padding: 10px 20px;
    background: #f5f8fd;
    border-top: 1px solid #d7dfef;
}

.dv-footer-text {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    letter-spacing: 0.02em;
}

@media print {

.app-entity-view-page .dv-footer {
        background: #fff !important;
    }
}

/* ============================================================
   17. Entity form fields — labels, inputs, pincode dropdown (create/edit)
   Scoped under .app-entity-form; overrides global .inp where needed.

   Used by: customers/edit, customers/create, shares/part-repayment,
            transactions/sb-multi-credit, transactions/sb-multi-debit, shares/create,
            users/create, users/edit, customers/freeze-customer, deposit-schemes/create,
            service-reports/create, service-requests/create, shares/membership-closure,
            transactions/deposit, … and 193 more
   ============================================================ */
.app-entity-form {
    font-family: 'Rajdhani', ui-sans-serif, system-ui, sans-serif;
    color: #1e293b;
}

.app-entity-form .row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
}

/* Labels: mock .field label — 11px, semibold, slate-500, uppercase */
.app-entity-form .row > label.dc-label,
.app-entity-form label.dc-label {
    width: auto;
    min-width: 0;
    padding-right: 0;
    margin: 0;
    text-align: left;
    font-size: 11px;
    font-weight: 650;
    color: #0a0a0a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.app-entity-form label.dc-label-kn {
    color: #059669;
    font-family: 'Tiro Kannada', 'Noto Sans Kannada', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.app-entity-form .dc-req {
    color: #dc2626;
    font-weight: 700;
    margin-left: 1px;
}

/* Inputs: mock .field input/select/textarea */
.app-entity-form .inp,
.app-entity-form select.inp,
.app-entity-form textarea.inp {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    min-height: 40px;
    padding: 8px 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background-color: #f8fafc !important;
    color: #1e293b !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.app-entity-form textarea.inp {
    min-height: 78px;
    resize: vertical;
}

.app-entity-form .inp:focus,
.app-entity-form select.inp:focus,
.app-entity-form textarea.inp:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.app-entity-form .inp.inp-error,
.app-entity-form select.inp.inp-error,
.app-entity-form textarea.inp.inp-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

.app-entity-form .inp[readonly] {
    opacity: 0.92;
    cursor: default;
    background-color: #f0f9ff !important;
    border-color: #bae6fd !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-weight: 600 !important;
    color: #2563eb !important;
}

.app-entity-form select.inp {
    cursor: pointer;
    appearance: auto;
}

.app-entity-form .inp.dc-inp-mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    letter-spacing: 0.02em;
}

.app-entity-form .search-input-wrap .search-inp {
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    height: 40px;
    padding: 0 36px 0 36px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Rajdhani', sans-serif !important;
    line-height: 1.35;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background-color: #f8fafc !important;
    color: #1e293b !important;
}

.app-entity-form .search-input-wrap .search-inp:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.app-entity-form .search-input-wrap .search-icon {
    color: #64748b;
}

.app-entity-form .row > .search-input-wrap {
    max-width: none;
    width: 100%;
}

.app-entity-form .kan-field:not([type="file"]) {
    font-family: 'Tiro Kannada', 'Noto Sans Kannada', sans-serif !important;
}

/* Validation messages sit under the control (not offset for old side-by-side labels) */
.app-entity-form .field-error {
    padding-left: 0 !important;
    margin-top: 2px;
    width: 100%;
    font-size: 11px;
    font-weight: 500;
}

.app-entity-form .inp::placeholder,
.app-entity-form .search-input-wrap .search-inp::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* Pincode autocomplete (nested under .app-entity-form) */
.app-entity-form .pincode-dropdown {
    margin-top: 4px;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(30, 58, 95, 0.12), 0 2px 8px rgba(30, 58, 95, 0.06);
    background: #fff;
    max-height: 260px;
    overflow-y: auto;
    border-top: 1px solid #bae6fd;
}

.app-entity-form .pincode-item {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Rajdhani', ui-sans-serif, sans-serif;
    letter-spacing: 0.02em;
    border-bottom: 1px solid #f1f5f9;
    gap: 10px;
}

.app-entity-form .pincode-item:last-child {
    border-bottom: none;
}

.app-entity-form .pincode-item:hover,
.app-entity-form .pincode-active {
    background: #93c5fd;
    box-shadow: inset 3px 0 0 #1e3a5f;
}

.app-entity-form .pincode-taluk {
    color: #1e3a5f;
}

.app-entity-form .pincode-code {
    color: #0d9488;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600;
}

.app-entity-form .pincode-dist {
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
}

.app-entity-form .pincode-no-result {
    padding: 12px;
    font-family: 'Rajdhani', ui-sans-serif, sans-serif;
    font-size: 12px;
    color: #94a3b8;
}

.app-entity-form .pincode-item.pincode-no-result:hover {
    background: transparent;
    box-shadow: none;
}

/* ============================================================
   18. Admin flash messages

   Used by: views/layouts/admin
   ============================================================ */
.admin-flash {
    box-sizing: border-box;
}

.admin-flash--banner {
    display: block;
    width: 100%;
    border-radius: 8px;
    padding: 10px 16px;
    box-shadow: none;
    line-height: 1.45;
}

.admin-flash--success {
    background: #ecfdf5;
    border-color: #86efac;
    color: #166534;
}

.admin-flash--success strong {
    color: #14532d;
    font-weight: 600;
}

.admin-flash--error {
    background: #fef2f2;
    border-color: #f87171;
    color: #7f1d1d;
}

/* ============================================================
   19. Entity forms — shell layout (create/edit/view when using cc-* tokens)
   Single root: .app-entity-form on the outer wrapper.

   Used by: customers/create, customers/edit, customers/freeze-customer, loan/view,
            transactions/deposit, transactions/sb-internal-transfer,
            transactions/withdrawal, accounts/account-closure, accounts/view, agent/view,
            customers/view, deposits/view, members/view, shares/create, … and 191 more
   ============================================================ */
.app-entity-form.cc-breakout {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
    overflow-x: clip;
}

.app-entity-form .cc-form-shell {
    border-radius: 8px;
    border: 1px solid #d0dbe8;
    background: #fff;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.app-entity-form .cc-form-body {
    padding: 20px;
    background: #fff;
    box-sizing: border-box;
}

.app-entity-form .cc-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2563eb;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

/* Freeze / unfreeze forms: search row + clear (matches account freeze layout; reusable on customer freeze) */
.app-entity-form .cc-freeze-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 10px;
}

.app-entity-form .cc-freeze-search-field {
    flex: 0 0 320px;
    min-width: 0;
    position: relative;
}

@media (max-width: 640px) {
    .app-entity-form .cc-freeze-search-field {
        flex: 1 1 100%;
    }
}

.app-entity-form .cc-freeze-search-clear {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #334155 !important;
    font-family: 'Rajdhani', ui-sans-serif, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.app-entity-form .cc-freeze-search-clear:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.app-entity-form .cc-freeze-not-found {
    display: none;
    margin-bottom: 10px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid #fca5a5;
    background: #fef2f2;
    color: #dc2626;
    font-size: 13px;
    font-family: 'Rajdhani', ui-sans-serif, system-ui, sans-serif;
}

.app-entity-form .cc-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 1024px) {
    .app-entity-form .cc-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .app-entity-form .cc-form-grid {
        grid-template-columns: 1fr;
    }
}

.app-entity-form .cc-doc-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}

@media (max-width: 1024px) {
    .app-entity-form .cc-doc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    }

@media (max-width: 640px) {
    .app-entity-form .cc-doc-grid,
    .app-entity-form .cc-doc-grid--3 {
        grid-template-columns: 1fr;
    }
}

.app-entity-form .cc-divider {
    border: none;
    border-top: 1px solid #d0dbe8;
    margin: 16px 0;
}

.app-entity-form .cc-senior-box {
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    font-family: 'Rajdhani', ui-sans-serif, system-ui, sans-serif;
}

.app-entity-form .cc-page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #d0dbe8;
    background: linear-gradient(90deg, #f5f8fc, #ffffff);
}

.app-entity-form .cc-page-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    background: rgba(16, 185, 129, 0.15);
}

.app-entity-form .cc-page-header-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.25;
    margin: 0;
    font-family: 'Rajdhani', ui-sans-serif, system-ui, sans-serif;
}

.app-entity-form .cc-page-header-sub {
    font-size: 11px;
    color: #64748b;
    margin: 2px 0 0 0;
    line-height: 1.35;
    font-family: 'Rajdhani', ui-sans-serif, system-ui, sans-serif;
}

.app-entity-form .spouse-field-inp {
    border-left-width: 4px !important;
    border-left-color: #059669 !important;
}

.app-entity-form .spouse-field-inp.inp-error {
    border-left-color: #ef4444 !important;
}

/* Bilingual address — English and Kannada share the same grid rows
   so a taller Kannada label cannot push that column down. */
.app-entity-form .cc-address-bilingual {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 12px;
    margin-top: 12px;
    align-items: stretch;
}

.app-entity-form .cc-address-col {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    min-width: 0;
}

.app-entity-form .cc-address-col-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: subgrid;
    grid-row: span 3;
    column-gap: 14px;
    margin-top: 0;
    min-width: 0;
}

.app-entity-form .cc-address-col .row + .cc-address-col-grid {
    margin-top: 0;
}

.app-entity-form .cc-address-bilingual .row {
    min-width: 0;
    height: auto;
    align-self: stretch;
}

.app-entity-form .cc-address-bilingual .row > .inp,
.app-entity-form .cc-address-bilingual .row > input {
    margin-top: auto;
    height: 40px !important;
    min-height: 40px;
}

.app-entity-form .cc-address-pin-readonly {
    background: #f8fafc;
    color: #64748b;
    cursor: default;
}

@media (max-width: 900px) {
    .app-entity-form .cc-address-bilingual {
        grid-template-columns: 1fr;
    }
    .app-entity-form .cc-address-col,
    .app-entity-form .cc-address-col-grid {
        display: block;
        grid-row: auto;
    }
    .app-entity-form .cc-address-col-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 14px;
        margin-top: 12px;
    }
}

@media (max-width: 480px) {
    .app-entity-form .cc-address-col-grid {
        grid-template-columns: 1fr;
    }
}

/* Optional address strip (e.g. profile view) */

.app-entity-view-page--customer .cc-page-header {
    flex-wrap: wrap;
}

.app-entity-view-page--customer .cc-view-header-actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.app-entity-view-page--customer .dv-section {
    border-bottom: none;
}

.app-entity-view-page--customer .app-entity-view-footer {
    border-top: 1px solid #d0dbe8;
    background: #fafbfc;
}

@media print {
    .app-entity-view-page--customer .cc-form-shell {
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
    }

    .app-entity-view-page--customer .cc-page-header {
        background: #fff !important;
        border-bottom: 2px solid #000 !important;
    }

    .app-entity-view-page--customer .cc-section-title {
        color: #000 !important;
        border-bottom-color: #000 !important;
    }

    .app-entity-view-page--customer .cc-divider {
        border-top-color: #ccc !important;
    }
}
/* ============================================================
   20. MEMBER CREATE  +  MEMBER EDIT
   .member-create wraps both create.php and edit.php
   (edit.php must drop its local <style> and use these classes)

   Used by: members/create, members/edit, group-loans/issue, vouchers/create,
            accounts/create, deposits/create, deposits/rd-create, agent/create,
            deposits/closure, deposits/fd-maturity-payment, deposits/rd-closure,
            deposits/renewal, loan/charges-receipt, loan/closure, … and 251 more
   ============================================================ */
.member-create {
    font-family: 'Rajdhani', ui-sans-serif, system-ui, sans-serif;
    font-size: 13px;
    color: #1e293b;
    background: #f0f4f8;
}

/* ── Panel shell ──────────────────────────────────────────── */
.member-create .mc-panel {
    background: #ffffff;
    border: 1px solid #d0dbe8;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}
.member-create .mc-panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid #d0dbe8;
    background: linear-gradient(90deg, #f5f8fc, #ffffff);
    display: flex; align-items: center; gap: 12px;
}
.member-create .mc-panel-header .mc-hdr-icon {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
    background: rgba(245,158,11,0.15);
}
.member-create .mc-panel-header h3 {
    font-size: 15px; font-weight: 700; color: #1e293b; margin: 0; line-height: 1.3;
}
.member-create .mc-panel-header p { font-size: 11px; color: #64748b; margin: 0; }
.member-create .mc-body { padding: 20px; }

/* ── Section title override ───────────────────────────────── */
.member-create .section-title {
    display: block;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: #2563eb;
    margin-bottom: 12px;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-left: none !important;
}

/* ── Grid ─────────────────────────────────────────────────── */
.member-create .mc-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1100px) {
    .member-create .mc-grid,
    .member-create .mc-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .member-create .mc-grid,
    .member-create .mc-grid-4 { grid-template-columns: 1fr; }
}

/* ── Field ────────────────────────────────────────────────── */
.member-create .mc-field {
    display: flex; flex-direction: column; gap: 5px;
}
.member-create .mc-field label {
    font-size: 11px; font-weight: 650; color: #020202;
    text-transform: uppercase; letter-spacing: 0.5px;
    width: auto; min-width: 0; padding-right: 0; text-align: left;
}
.member-create .mc-req { color: #dc2626; font-weight: 700; margin-left: 1px; }

/* ── Inputs ───────────────────────────────────────────────── */
.member-create .mc-field input,
.member-create .mc-field select,
.member-create .mc-field textarea {
    box-sizing: border-box; width: 100%; height: auto; min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #cbd5e1; border-radius: 6px;
    background: #f8fafc; color: #1e293b;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px; font-weight: 500; line-height: 1.4;
    outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
/* select: restore native dropdown arrow, cursor pointer */
.member-create .mc-field select {
    appearance: auto;
    -webkit-appearance: auto;
    cursor: pointer;
}
.member-create .mc-field textarea { min-height: 70px; resize: vertical; }
.member-create .mc-field input:focus,
.member-create .mc-field select:focus,
.member-create .mc-field textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.member-create .mc-field input.inp-error,
.member-create .mc-field select.inp-error,
.member-create .mc-field textarea.inp-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.12) !important;
}
/* Client-side validation messages (member create — no fixed label column) */
.member-create #custSearch.inp-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.12) !important;
}
.member-create #declarationCheck.inp-error {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}
/* disabled-style readonly (user cannot edit) */
.member-create .mc-field input[readonly] { opacity: 0.65; cursor: not-allowed; }
.member-create .mc-field input::placeholder,
.member-create .mc-field select::placeholder { color: #94a3b8; font-weight: 400; }
.member-create .mc-field .mc-help { font-size: 10px; color: #64748b; margin-top: 2px; }

/* hide number spinners on all mc-field number inputs */
.member-create .mc-field input[type="number"]::-webkit-outer-spin-button,
.member-create .mc-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.member-create .mc-field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ── Input colour variants ────────────────────────────────── */
/* auto-filled readonly — blue tint (English fields)
   cursor:default overrides the not-allowed from [readonly] above */
.member-create .mc-field input.mc-readonly-blue {
    background: #f0f9ff; border-color: #bae6fd; color: #1e293b;
    font-weight: 600; cursor: default; opacity: 1;
}
/* auto-filled readonly — green tint (Kannada fields) */
.member-create .mc-field input.mc-readonly-green {
    background: #f0fdf4; border-color: #86efac; color: #059669;
    font-weight: 600; font-family: 'Tiro Kannada', sans-serif;
    cursor: default; opacity: 1;
}
/* monospace — IDs, phone, codes */
.member-create .mc-field input.mc-mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600;
}
/* accent blue — member no., auto-generated fields
   cursor:default because readonly but intentionally shown as reference */
.member-create .mc-field input.mc-accent {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700; color: #2563eb;
    cursor: default; opacity: 1;
}
/* large green amount total */
.member-create .mc-field input.mc-green-val {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700; color: #059669; font-size: 15px;
    cursor: default; opacity: 1;
}

/* ── Divider ──────────────────────────────────────────────── */
.member-create .mc-divider { border: none; border-top: 1px solid #d0dbe8; margin: 20px 0; }

/* ── Customer / Introducer lookup row ────────────────────── */
.member-create .mc-lookup-row {
    display: flex; gap: 10px; align-items: flex-end;
    margin-bottom: 14px; flex-wrap: wrap;
}
.member-create .mc-lookup-field { flex: 0 0 320px; position: relative; }
.member-create .mc-found-badge {
    display: none;
    background: #dcfce7; color: #166534;
    padding: 5px 14px; border-radius: 20px;
    font-size: 12px; font-weight: 700;
    align-self: flex-end; margin-bottom: 1px;
}
/* Frozen customer — same .form-error look, inline in lookup row next to Clear */
.member-create .mc-lookup-row > .form-error.mc-lookup-inline-error {
    display: none;
    margin-top: 0;
    margin-bottom: 1px;
    align-self: flex-end;
    flex: 0 0 auto;
    min-width: max-content;
    max-width: 100%;
    white-space: nowrap;
    overflow-x: auto;
}
.member-create .mc-lookup-row > .form-error.mc-lookup-inline-error.is-visible {
    display: block;
}
.member-create .mc-not-found {
    display: none;
    background: #fef2f2; border: 1px solid #fca5a5;
    border-radius: 8px; padding: 10px 16px;
    color: #dc2626; font-size: 13px; margin-bottom: 12px;
}

/* Additional share — frozen / blocked member lookup (same form-error style, single line, next to Clear) */
#as-member-search .as-lookup-inline-error.form-error {
    display: none;
    margin-top: 0;
    margin-bottom: 0;
    flex: 0 0 auto;
    min-width: max-content;
    max-width: 100%;
    white-space: nowrap;
    overflow-x: auto;
}
#as-member-search .as-lookup-inline-error.form-error.is-visible {
    display: block;
}

/* Account create — customer lookup inline frozen (same pattern) */
#ac-customer-lookup-row .ac-lookup-inline-error.form-error,
#fd-customer-lookup-row .ac-lookup-inline-error.form-error,
#rd-customer-lookup-row .ac-lookup-inline-error.form-error,
#agent-customer-lookup-row .ac-lookup-inline-error.form-error,
#ln-customer-lookup-row .ac-lookup-inline-error.form-error {
    display: none;
    margin-top: 0;
    margin-bottom: 0;
    flex: 0 0 auto;
    min-width: max-content;
    max-width: 100%;
    white-space: nowrap;
    overflow-x: auto;
}
#ac-customer-lookup-row .ac-lookup-inline-error.form-error.is-visible,
#fd-customer-lookup-row .ac-lookup-inline-error.form-error.is-visible,
#rd-customer-lookup-row .ac-lookup-inline-error.form-error.is-visible,
#agent-customer-lookup-row .ac-lookup-inline-error.form-error.is-visible,
#ln-customer-lookup-row .ac-lookup-inline-error.form-error.is-visible {
    display: block;
}

/* ── Live search dropdown (customer & introducer) ─────────── */
.member-create .mc-dropdown,
#ve-ref-customer-wrap .mc-dropdown,
#ve-ledger-search-wrap .mc-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    background: #fff;
    border: 1px solid #d0dbe8; border-top: 0;
    max-height: 220px; overflow-y: auto;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    border-radius: 0 0 6px 6px;
    display: none;
}
#ve-ledger-search-wrap .mc-dropdown {
    max-height: min(45vh, 320px);
}
.member-create .mc-dropdown.open,
#ve-ref-customer-wrap .mc-dropdown.open,
#ve-ledger-search-wrap .mc-dropdown.open { display: block; }
.member-create .mc-dd-item,
#ve-ref-customer-wrap .mc-dd-item,
#ve-ledger-search-wrap .mc-dd-item {
    padding: 8px 12px; cursor: pointer;
    font-size: 12px; border-bottom: 1px solid #f1f5f9;
    display: flex; justify-content: space-between; gap: 12px;
}
.member-create .mc-dd-item:hover,
.member-create .mc-dd-item.active,
#ve-ref-customer-wrap .mc-dd-item:hover,
#ve-ref-customer-wrap .mc-dd-item.active,
#ve-ledger-search-wrap .mc-dd-item:hover,
#ve-ledger-search-wrap .mc-dd-item.active { background: #eff6ff; }
.member-create .mc-dd-empty,
#ve-ref-customer-wrap .mc-dd-empty,
#ve-ledger-search-wrap .mc-dd-empty {
    padding: 10px 12px; font-size: 12px;
    color: #64748b; font-style: italic; text-align: center;
}

/* ── Fee breakup box ──────────────────────────────────────── */
.member-create .mc-fees-box {
    display: none; margin-top: 10px;
    background: #f0fdf4; border: 1.5px solid #86efac;
    border-radius: 10px; padding: 14px 18px;
}
.member-create .mc-fees-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}

/* ── Total amount display ─────────────────────────────────── */
.member-create .mc-amount-box {
    margin-top: 10px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1.5px solid #6ee7b7; color: #059669;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 20px; font-weight: 700;
    text-align: right; padding: 12px 16px; border-radius: 6px;
}
.member-create .mc-amount-words {
    display: none; margin-top: 6px; padding: 8px 14px;
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 7px; font-size: 12px; color: #475569;
}

/* ── Upload grid (photo / signature / aadhaar) ────────────── */
@media (max-width: 760px) {
        .member-create .mc-fees-grid   { grid-template-columns: repeat(2, 1fr); }
}

/* ── Reusable upload preview placeholders (SVG icons — member / customer KYC, etc.) ─ */
.cb-upload-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    pointer-events: none;
}
.cb-upload-placeholder svg {
    display: block;
    max-width: 100%;
    height: auto;
}
.cb-upload-placeholder--sig svg {
    width: 110px;
    height: 48px;
}
.cb-upload-placeholder--aadhaar svg {
    width: min(180px, 100%);
    height: auto;
    max-height: 100px;
}

/* ── Upload preview boxes ─────────────────────────────────── */

/* ── SB Account option ────────────────────────────────────── */
.member-create .mc-sb-option-box {
    background: #eff6ff; border: 1.5px solid #93c5fd;
    border-radius: 10px; padding: 16px 18px; margin-bottom: 14px;
}
.member-create .mc-sb-sub-form {
    display: none;
    background: #f5f8fc; border: 1.5px solid #d0dbe8;
    border-radius: 10px; padding: 18px;
    animation: mc-fadeIn 0.2s ease;
}
@keyframes mc-fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Cropper overlay ──────────────────────────────────────── */
.member-create .mc-cropper-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.82); z-index: 10000;
    align-items: center; justify-content: center;
}
.member-create .mc-cropper-overlay.open { display: flex; }
.member-create .mc-cropper-box {
    background: #fff; border-radius: 12px; padding: 20px;
    width: 600px; max-width: 95vw;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.member-create .mc-cropper-title {
    font-size: 14px; font-weight: 700; color: #1e293b;
    margin-bottom: 14px; padding-bottom: 10px;
    border-bottom: 1px solid #d0dbe8;
    display: flex; align-items: center; justify-content: space-between;
}
.member-create .mc-cropper-wrap {
    width: 100%; height: 320px;
    background: #111; border-radius: 8px;
    overflow: hidden; margin-bottom: 12px;
}
.member-create .mc-cropper-wrap img { max-width: 100%; display: block; }
.member-create .mc-cropper-footer   { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Image view modal ─────────────────────────────────────── */
.member-create .mc-img-modal {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.72); z-index: 9999;
    align-items: center; justify-content: center;
}
.member-create .mc-img-modal.open { display: flex; }
.member-create .mc-img-modal-box {
    background: #fff; border-radius: 12px; padding: 20px;
    max-width: 90vw; max-height: 90vh;
    text-align: center; position: relative;
}

/* ── Buttons (member-style) — use class="mc-btn mc-btn--outline|primary|gold" anywhere; no .member-create wrapper required */
.mc-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 20px; border-radius: 6px; border: none;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px; font-weight: 700;
    cursor: pointer; letter-spacing: 0.5px;
    transition: all 0.15s; white-space: nowrap; text-decoration: none;
}
.mc-btn.mc-btn--primary { background: #1d4ed8; color: #fff; }
.mc-btn.mc-btn--primary:hover { background: #1e40af; box-shadow: 0 4px 12px rgba(37,99,235,0.35); }

.mc-btn.mc-btn--outline { background: transparent; color: #334155; border: 1px solid #d0dbe8; }
.mc-btn.mc-btn--outline:hover { background: #f5f8fc; }
/* gold — used in edit form Save Changes */

/* Footer actions bar used by edit (create uses tailwind classes) */

/* ============================================================
   21. MEMBER LIST

   Used by: shares/share-suspense-index
   ============================================================ */
.member-list {
    font-family: 'Rajdhani', ui-sans-serif, system-ui, sans-serif;
    font-size: 13px; color: #1e293b;
}

/* ── Panel ────────────────────────────────────────────────── */
.member-list .ml-panel {
    background: #ffffff;
    border: 1px solid #d0dbe8;
    border-radius: 8px; overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

/* ── Toolbar ──────────────────────────────────────────────── */
.member-list .ml-toolbar {
    padding: 14px 20px;
    border-bottom: 1px solid #d0dbe8;
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap; background: #f5f8fc;
}
.member-list .ml-toolbar h3 {
    font-size: 14px; font-weight: 700; color: #1e293b; flex: 1; margin: 0;
}

/* ── Search box ───────────────────────────────────────────── */
.member-list .ml-search-box {
    display: flex; align-items: center; gap: 8px;
    background: #f8fafc; border: 1px solid #d0dbe8;
    border-radius: 6px; padding: 6px 12px;
}
.member-list .ml-search-box input {
    background: none; border: none; outline: none;
    color: #1e293b;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px; width: 200px;
}
.member-list .ml-search-box span { color: #64748b; font-size: 13px; }

/* ── Status filter ────────────────────────────────────────── */
.member-list .ml-status-select {
    padding: 7px 10px;
    border: 1px solid #d0dbe8; border-radius: 6px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px; font-weight: 600;
    background: #f8fafc; color: #1e293b;
    cursor: pointer; outline: none;
}
.member-list .ml-status-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}

/* ── Toolbar buttons ──────────────────────────────────────── */
.member-list .ml-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 6px;
    border: 1px solid #d0dbe8; background: transparent;
    color: #334155;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px; font-weight: 700;
    cursor: pointer; letter-spacing: 0.4px;
    transition: all 0.15s; text-decoration: none; white-space: nowrap;
}
.member-list .ml-btn:hover { background: #f5f8fc; color: #1e293b; }
.member-list .ml-btn--primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.member-list .ml-btn--primary:hover { background: #1d4ed8; box-shadow: 0 4px 12px rgba(37,99,235,0.35); }

/* ── Table ────────────────────────────────────────────────── */
.member-list .ml-table-wrap { overflow-x: auto; }
.member-list table { width: 100%; border-collapse: collapse; min-width: 900px; }
.member-list thead th {
    background: #e8eef5; padding: 10px 14px;
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px;
    color: #000000; text-align: left;
    border-bottom: 1px solid #d0dbe8; white-space: nowrap;
}
.member-list tbody tr { border-bottom: 1px solid rgba(42,58,106,0.08); transition: background 0.1s; }
.member-list tbody tr:hover { background: #f5f8fc; }
.member-list tbody td { padding: 10px 14px; font-size: 13px; color: #334155; }

/* ── Member ID link ───────────────────────────────────────── */

/* ── Status badges ────────────────────────────────────────── */
.member-list .ml-badge {
    display: inline-flex; align-items: center;
    padding: 2px 10px; border-radius: 10px;
    font-size: 11px; font-weight: 600;
}
.member-list .ml-badge--active  { background: rgba(16,185,129,0.15); color: #059669; }
.member-list .ml-badge--frozen  { background: rgba(6,182,212,0.15);  color: #0891b2; }
.member-list .ml-badge--pending { background: rgba(245,158,11,0.15); color: #d97706; }

/* ── Row action buttons ───────────────────────────────────── */
.member-list .ml-actions { display: flex; gap: 6px; }
.member-list .ml-icon-btn {
    width: 28px; height: 28px;
    border-radius: 5px; border: none;
    cursor: pointer; font-size: 12px;
    transition: all 0.15s;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
}
.member-list .ml-icon-btn--view  { background: rgba(16,185,129,0.15); color: #059669; }
.member-list .ml-icon-btn--view:hover  { background: #059669; color: #fff; }
.member-list .ml-icon-btn--edit  { background: rgba(59,130,246,0.15); color: #2563eb; }
.member-list .ml-icon-btn--edit:hover  { background: #2563eb; color: #fff; }

/* ── Empty state ──────────────────────────────────────────── */
.member-list .ml-empty { text-align: center; padding: 60px 20px; color: #64748b; font-size: 13px; }
.member-list .ml-empty-icon { font-size: 40px; margin-bottom: 10px; }

/* ── Pagination ───────────────────────────────────────────── */

/* ── Export spinner ───────────────────────────────────────── */
/* ── Top action bar ───────────────────────────────────────── */

/* ── Buttons ──────────────────────────────────────────────── */

/* ── Card ─────────────────────────────────────────────────── */

/* ── Field grids ──────────────────────────────────────────── */
/* ── Field (label + value pair) ───────────────────────────── */
/* value colour variants */

/* ── Status badges ────────────────────────────────────────── */

/* ── Divider ──────────────────────────────────────────────── */

/* ── Photo / Signature media column ──────────────────────── */

/* ── Inner table (nominees / share transactions) ──────────── */

/* ── Empty table ──────────────────────────────────────────── */

/* ── Transaction type / status mini-badges ────────────────── */

/* ── Member view print ────────────────────────────────────── */
/* ============================================================
   22. CSS Custom Properties (Design Tokens)
   and available globally for inline styles / JS references
   Used by: every page (element / global styles)
   ============================================================ */
:root {
    --bg:          #f0f4f8;
    --bg2:         #ffffff;
    --bg3:         #e8eef5;
    --panel:       #ffffff;
    --panel2:      #f5f8fc;
    --border:      #d0dbe8;
    --accent:      #1d4ed8;
    --accent2:     #2563eb;
    --gold:        #d97706;
    --gold2:       #b45309;
    --green:       #059669;
    --red:         #dc2626;
    --purple:      #7c3aed;
    --cyan:        #0891b2;
    --text:        #1e293b;
    --text2:       #334155;
    --text3:       #0a0a0a;
    --input-bg:    #f8fafc;
    --input-border:#cbd5e1;
    --input-focus: #2563eb;
    --radius:      8px;
    --shadow:      0 4px 24px rgba(0,0,0,0.08);
}
 
/* ============================================================
   23. Share Form Layout
   — .form-panel / .form-header / .form-body / .form-actions
   — .form-grid / .field / .btn variants
   — .share-search-dropdown (live member search)

   Used by: employees/create, directors/create, directors/edit, employees/edit,
            shares/part-repayment, shares/share-suspense, shares/share-suspense-repayment,
            accounts/account-statement, accounts/create, agent/create,
            deposits/fd-interest-posting, deposits/rd-closure, deposits/rd-penalty-posting,
            loan/loan-against-fd, … and 309 more
   ============================================================ */
 
/* ── Panel shell ── */
.form-panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
 
/* ── Panel header ── */
.form-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, var(--panel2), var(--panel));
    display: flex; align-items: center; gap: 12px;
}
.form-header .fh-icon {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.form-header h3 { font-size: 15px; font-weight: 700; color: var(--text); margin: 0; }
.form-header p  { font-size: 11px; color: var(--text3); margin: 0; }
 
/* ── Panel body ── */
.form-body { padding: 20px; }
 
/* ── Footer actions (share pages use Tailwind classes inline,
      this is the fallback for any non-Tailwind usage) ── */
.form-actions {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    display: flex; gap: 10px;
    justify-content: space-between; align-items: center;
    background: var(--panel2);
}
 
/* ── Section title override
      (different from global .section-title — no grey bg/border)
      Both share pages use this transparent style ── */
.form-body .section-title {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--accent2);
    margin-bottom: 12px;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: block;
}
 
/* ── Divider ── */
.form-body .divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 18px 0;
}
 
/* ── Grid layouts ── */
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 1100px) {
    .form-grid   { grid-template-columns: repeat(2, 1fr); }
    }
@media (max-width: 640px) {
    .form-grid,
    .form-grid-2 { grid-template-columns: 1fr; }
}

/* Voucher maker: Amount / Mode / denomination or UTR — fixed 3 columns (only one of denom/UTR visible at a time) */
.form-body .form-grid.ve-maker-amount-row {
    align-items: start;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.form-body .form-grid.ve-maker-amount-row #ve-instrument {
    width: 100%;
}
.form-body .form-grid.ve-maker-amount-row .ve-denom-row {
    min-height: 38px;
    align-items: center;
}
@media (max-width: 640px) {
    .form-body .form-grid.ve-maker-amount-row {
        grid-template-columns: 1fr;
    }
}

/* ── Field (label + input wrapper) ── */
.form-body .field {
    display: flex; flex-direction: column; gap: 5px;
}
.form-body .field label {
    font-size: 11px; font-weight: 700;
    color: var(--text3);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.form-body .field input,
.form-body .field select,
.form-body .field textarea {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px; font-weight: 500;
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.form-body .field select {
    appearance: auto;
    -webkit-appearance: auto;
    cursor: pointer;
}
.form-body .field input:focus,
.form-body .field select:focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.form-body .field input[readonly] {
    opacity: 0.65; cursor: not-allowed;
}
.form-body .field .help-text {
    font-size: 10px; color: var(--text3); margin-top: 2px;
}
/* hide number spinners inside form-body fields */
.form-body .field input[type="number"]::-webkit-outer-spin-button,
.form-body .field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.form-body .field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ── Required star ── */
.required { color: var(--red); }
 
/* ── Buttons ── */
.form-body .btn,
.form-header .btn,
.form-actions .btn {
    padding: 9px 20px; border-radius: 6px; border: none;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px; font-weight: 700;
    cursor: pointer; letter-spacing: 0.5px;
    transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap; text-decoration: none;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #1d4ed8; box-shadow: 0 4px 12px rgba(37,99,235,0.4); }
.btn-outline { background: transparent; color: var(--text2); border: 1px solid var(--border); }
.btn-outline:hover { background: var(--panel2); color: var(--text); }
.btn-success { background: var(--green); color: #fff; }
.btn-success:hover { background: #047857; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #b91c1c; }
 
/* ── Live Search Dropdown (shared base for as-* and ps-* pages) ──
      Both pages position their dropdown identically.
      Use these base classes via .share-search-dropdown,
      or keep as-dropdown / ps-dropdown — both inherit same spec  ── */
.as-dropdown,
.ps-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
    background: #fff;
    border: 1px solid var(--border); border-top: 0;
    max-height: 220px; overflow-y: auto;
    box-shadow: var(--shadow);
    border-radius: 0 0 6px 6px;
    display: none;
}
.as-dropdown.open,
.ps-dropdown.open { display: block; }
 
.as-dd-item,
.ps-dd-item {
    padding: 8px 12px; cursor: pointer;
    font-size: 12px;
    border-bottom: 1px solid #f1f5f9;
    display: flex; justify-content: space-between; gap: 12px;
}
.as-dd-item:hover, .as-dd-item.active,
.ps-dd-item:hover, .ps-dd-item.active { background: #eff6ff; }
 
.as-dd-empty,
.ps-dd-empty {
    padding: 10px 12px; font-size: 12px;
    color: var(--text3); font-style: italic; text-align: center;
}

/* ── Member info card (director create, part repayment, etc.) ── */
.ps-member-shell {
    background: linear-gradient(135deg, #eff6ff, #f0fdf4);
    border: 1.5px solid #93c5fd;
    border-radius: 12px;
    padding: 16px 18px;
}
.ps-member-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.ps-member-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #059669);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    color: #fff;
    font-weight: 700;
}
.ps-member-title {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}
.ps-member-subtitle {
    font-size: 13px;
    font-weight: 600;
    color: #059669;
    font-family: 'Tiro Kannada', sans-serif;
    margin-top: 2px;
}
.ps-member-meta {
    display: flex;
    gap: 14px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.ps-member-meta span {
    font-size: 12px;
    color: #64748b;
}
.ps-member-badge {
    margin-left: auto;
    background: #dcfce7;
    color: #166534;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.ps-member-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.ps-info-card {
    background: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
}
.ps-info-label {
    font-size: 10px;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}
.ps-info-value {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}
.ps-info-mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
}
.ps-col-2 {
    grid-column: span 2;
}
.ps-member-body {
    display: flex;
    gap: 16px;
    align-items: stretch;
}
.ps-member-main {
    flex: 1;
    min-width: 0;
}
.ps-member-docs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    width: 120px;
    padding-left: 16px;
    border-left: 1px solid rgba(147, 197, 253, 0.6);
}
.ps-doc-block {
    text-align: center;
}
.ps-doc-label {
    font-size: 9px;
    color: #b45309;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 5px;
}
.ps-doc-thumb {
    width: 100px;
    height: 110px;
    border-radius: 8px;
    border: 2px solid #fcd34d;
    background: #fefce8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    overflow: hidden;
    margin: 0 auto;
}
.ps-doc-sig {
    width: 100px;
    height: 54px;
    border-radius: 6px;
    border: 2px solid #fcd34d;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #94a3b8;
    overflow: hidden;
    margin: 0 auto;
}
.ps-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
@media (max-width: 1024px) {
    .ps-member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .ps-member-shell { padding: 14px; }
    .ps-member-title { font-size: 15px; }
    .ps-member-meta span { font-size: 11px; }
    .ps-member-body { flex-direction: column; }
    .ps-member-docs {
        width: 100%;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgba(147, 197, 253, 0.6);
        padding-top: 12px;
        flex-direction: row;
        justify-content: center;
        gap: 16px;
    }
    .ps-member-grid { grid-template-columns: 1fr; }
    .ps-col-2 { grid-column: span 1; }
}
 
/* ── Shared animation ── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* ============================================================
   24. Alert Boxes

   Used by: agent/view, agent/create, agent/edit, deposit-schemes/edit, deposits/create,
            deposits/fd-interest-posting, deposits/rd-create, users/list, users/view,
            vouchers/admin-panel, vouchers/create, vouchers/rejected,
            views/agent/dashboard, views/agent/layout, … and 142 more
   ============================================================ */
.alert {
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500;
}
.alert-info    { background: rgba(59,130,246,0.1);  border: 1px solid rgba(59,130,246,0.3);  color: var(--accent2); }
.alert-success { background: rgba(16,185,129,0.1);  border: 1px solid rgba(16,185,129,0.3);  color: var(--green); }
.alert-danger  { background: rgba(220,38,38,0.1);   border: 1px solid rgba(220,38,38,0.3);   color: var(--red); }
 
/* ── form-grid-full — spans all columns in a form-grid ── */
.form-grid-full { grid-column: 1 / -1; }
 
/* ============================================================
   25. Share Settlement Summary Cards

   Used by: shares/membership-closure, views/customer/request-deposit,
            views/customer/request-loan, views/request/deposit, views/request/loan,
            loan/closure, loan/debit-charge, loan/debit-interest, loan/noc,
            shares/share-certificate, shares/share-statement
   ============================================================ */
.settle-card {
    border-radius: 10px;
    overflow: hidden;
}
.settle-card-head {
    padding: 8px 14px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.settle-card-body {
    padding: 12px 14px;
}
.settle-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.settle-card-row:last-child { margin-bottom: 0; }
.settle-card-lbl {
    font-size: 11px; color: #64748b; font-weight: 600;
}
.settle-card-val {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
}
 
/* ── Denomination grid (inline in member-close, reused style) ── */
.denom-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 10px 12px;
}
/* ── Clear Button ── */
.btn-clear {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  font-family: 'Rajdhani', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-clear:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

/* ============================================================
   26. Form validation error (share suspense, suspense repayment)

   Used by: deposits/pigmy-statement, deposits/fd-statement, deposits/rd-statement,
            accounts/account-statement, loan/loan-statement, transactions/cash-book,
            transactions/sb-interest, group-loans/statement, deposits/fd-interest-posting,
            loan/create, vouchers/create, accounts/passbook-print, deposits/pigmy-closure,
            deposits/pigmy-receipt, … and 318 more
   ============================================================ */
.form-error {
  display: none;
  margin-top: 12px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 10px 16px;
  color: #dc2626;
  font-size: 13px;
  font-weight: 600;
}
.form-error.is-visible {
  display: block;
  margin-bottom: 12px;
}

/* Cash denomination modal — confirm validation banner (inside .cd-denom-modal) */
.cd-denom-modal .cd-denom-modal-confirm-error.form-error {
  margin-top: 12px;
}
.err-box {
  display: none;
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  border-radius: 8px;
  padding: 10px 14px 10px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #991b1b;
  align-items: flex-start;
  gap: 8px;
}
.err-box.show { display: flex; }
.err-icon  { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.err-close {
  margin-left: auto; flex-shrink: 0; background: none; border: none;
  color: #991b1b; font-size: 16px; cursor: pointer; padding: 0 2px; line-height: 1;
}

/* ══ SCREEN: hide print area ══ */
#stmt-print-area {
    visibility: hidden;
    position: fixed;
    top: -9999px;
    left: -9999px;
}
/* Inputs: bold + uppercase; selects keep medium weight (readable option text, same as member form) */
.form-body .field input {
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #1e293b !important;
}
.form-body .field input::placeholder {
  font-weight: 400 !important;
  text-transform: none !important;
  color: #94a3b8 !important;
}

/* ══ STATEMENT PRINT STYLES (scoped to body.printing-statement, set by JS in each statement page's printStatement()) ══ */
@media print {
    @page { size: A4 portrait; margin: 12mm 14mm; }

    /* Everything except the statement and its parents is removed (display:none), not just made
       invisible — invisible elements still take up room and printed as blank space / empty pages. */
    body.statement-page *:not(:has(#stmt-print-area)):not(#stmt-print-area):not(#stmt-print-area *) { display: none !important; }
    body.statement-page :has(#stmt-print-area) { margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important;
        background: #fff !important; width: auto !important; max-width: none !important; min-height: 0 !important; position: static !important; overflow: visible !important; }

    body.statement-page #stmt-print-area,
    body.statement-page #stmt-print-area * { visibility: visible !important; }

    body.statement-page #stmt-print-area {
        visibility: visible !important;
        position: static !important;   /* fixed → static: content flow across pages */
        background: #fff !important;
        font-size: 9pt;
        padding: 0;
    }

    /* ══ TABLE PAGE-BREAK HANDLING ══ */
    .sp-table {
        width: 100%;
        border-collapse: collapse;
        page-break-inside: auto;
    }

    .sp-table thead {
        display: table-header-group;   /* repeats header on every printed page */
    }

    .sp-table tfoot {
        display: table-row-group;      /* keeps closing-balance row from floating mid-page */
    }

    .sp-table tr {
        page-break-inside: avoid;      /* a single row never splits across pages */
        page-break-after: auto;
    }

    .sp-table th {
        background: #f1f5f9 !important;
        font-size: 8pt;
        font-weight: 700;
        text-transform: uppercase;
        padding: 5px 8px;
        border: 1px solid #cbd5e1;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .sp-table td {
        padding: 5px 8px;
        border: 1px solid #e2e8f0;
        font-size: 8.5pt;
    }

    .sp-table td.r   { text-align: right; }
    .sp-table td.dr  { color: #dc2626 !important; font-weight: 700; }
    .sp-table td.cr  { color: #059669 !important; font-weight: 700; }
    .sp-table td.bal { font-weight: 800; color: #1e3a5f !important; }

    .sp-table tr.sp-closing td {
        background: #f0fdf4 !important;
        font-weight: 800;
        border-top: 2pt solid #059669;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}
@media print {
    .app-entity-view-page * { visibility: visible !important; }
    .app-entity-view-page   { visibility: visible !important; position: static !important; }
}
@media print {
  .no-print { display:none !important; }
  .form-panel { box-shadow:none !important; border:none !important; }
  .print-header { display:block !important; }
  body { background:#fff !important; }
}
.print-header { display:none; }
.ip-tab { padding:8px 20px;border-radius:6px;font-size:13px;font-weight:700;cursor:pointer;border:1.5px solid #e2e8f0;background:#f8fafc;color:#64748b;transition:all .15s; }
.ip-tab.active { background:#1e3a5f;color:#fff;border-color:#1e3a5f; }
.ip-section { display:none; }
.ip-section.active { display:block; }
.stmt-table { width:100%;border-collapse:collapse;font-size:12px; }
.stmt-table th { background:#e8eef5;padding:8px 12px;font-size:10px;font-weight:700;text-transform:uppercase;color:#64748b;text-align:left;border-bottom:2px solid #d0dbe8;white-space:nowrap; }
.stmt-table td { padding:7px 12px;border-bottom:1px solid #f1f5f9; }
.stmt-table tr:hover td { background:#f8fafc; }
.stmt-table tr.interest-row td { background:#f5f3ff; }
.stmt-table tr.withdraw-row td { background:#fef2f2; }
.stmt-table tr.deposit-row td { background:#f0fdf4; }
/* ============================================================
   27. TOP NAVBAR — Yashaswini Style

   Used by: views/layouts/admin, directors/view, customers/customer-info,
            Controllers/Admin/DepositController, dashboard, agent/index,
            other/application-forms, other/loan-document-package, views/request/deposit,
            views/request/loan, Controllers/Admin/LoanController,
            Controllers/Admin/LoanReceiptController,
            Controllers/Admin/OtherOptionController, Controllers/Admin/ShareController,
            … and 254 more
   ============================================================ */
 
.top-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
  overflow: visible;
}
 
/* ── ROW 0: Logo top center, bank name below ── */
.top-navbar-row0 {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 50%, #ffffff 100%);
  padding: 10px 24px;
  border-bottom: 2px solid #e5e7eb;
  flex-shrink: 0;
}
 
/* Brand block: logo on top, name below — column layout */
.nb-brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
 
.nb-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
 
/* Uploaded logo image */
.nb-logo-img {
  height: 65px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  border-radius: 6px;
}
 
/* Fallback emoji icon */
.nb-logo-icon {
  width: 65px; height: 65px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eff6ff, #f5f3ff);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  border: 2px solid #bfdbfe;
  box-shadow: 0 2px 10px rgba(37,99,235,0.15);
}
 
.nb-logo-text { text-align: center; }
 
.nb-bank-name-en {
  font-size: 22px; font-weight: 800;
  line-height: 1.2; letter-spacing: 0.5px;
  text-align: center;
  background: linear-gradient(90deg, #000000 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
}

/* ── ROW 1: Menus (left/center) + Right Panel (right) ── */
.top-navbar-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  padding: 0 24px;
  height: 46px;
  border-top: 1px solid #fca5a5;
  border-bottom: 2px solid #e5e7eb;
  flex-shrink: 0;
  min-width: 0;
  overflow: hidden;
}
 
/* ── Menu container ── */
.nb-menu {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 0;
}
 
/* ── Menu Items ── */
.nb-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 900;
  font-family: 'Fraunces', sans-serif;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  height: 46px;
  border-bottom: 3px solid transparent;
  transition: all 0.15s;
  user-select: none;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-decoration: none;
}
.nb-item:hover   { color: #991b1b; border-bottom-color: #991b1b; }
.nb-item--active { color: #991b1b !important; border-bottom-color: #991b1b !important; }

/* Laptop widths: 14 labels do not fit at 14px. Keep one row.
   Leftover width is shared by .nb-menu { justify-content: space-between }. */
@media (max-width: 1600px) {
  .top-navbar-row1 { padding: 0 8px; }
  .nb-item {
    padding: 0 4px;
    font-size: 12px;
    letter-spacing: 0;
  }
}
 
/* ── Right Panel — in Row 1 ── */
 
.nb-timebox {
  text-align: center;
  background: #fff1f2;
  border: 1px solid #fecaca;
  border-radius: 5px;
  padding: 3px 10px;
}
.nb-timebox-lbl { font-size: 8px; color: #991b1b; font-weight: 700; text-transform: uppercase; }
.nb-timebox-val { font-size: 11px; font-weight: 700; color: #7f1d1d; font-family: 'JetBrains Mono', monospace; }
/* Posting date differs from calendar today (Date Change) */
.nb-timebox--accent {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #fbbf24;
}
.nb-timebox--accent .nb-timebox-lbl { color: #b45309; }
.nb-timebox--accent .nb-timebox-val { color: #92400e; }
 
.nb-phone-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nb-phone-controls[hidden] {
  display: none !important;
}
button.nb-phone-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 5px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  color: #fff !important;
  line-height: 1.2;
}
.nb-phone-btn-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  display: block;
}
.nb-phone-btn-icon--end {
  transform: translateY(1px);
}
button.nb-phone-btn:disabled {
  opacity: .65;
  cursor: wait;
}
button.nb-phone-btn--receive {
  background: #16a34a !important;
  background-color: #16a34a !important;
}
button.nb-phone-btn--receive:hover { background: #15803d !important; }
button.nb-phone-btn--end {
  background: #dc2626 !important;
  background-color: #dc2626 !important;
}
button.nb-phone-btn--end:hover { background: #b91c1c !important; }

.nb-user-box {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #fff1f2;
  border: 1px solid #fecaca;
  border-radius: 5px;
  padding: 4px 10px;
}
.nb-user-avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #991b1b;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff;
}
.nb-user-name { font-size: 13px; font-weight: 900; color: #7f1d1d; text-transform: uppercase; }
 
.nb-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10b981;
  animation: nbPulse 2s infinite;
}
@keyframes nbPulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── Page content offset ── */
/* Row0 ≈ 82px + Row1 ≈ 46px = 128px */
.navbar-offset { padding-top: 200px; }

/* Director view Page */
.dv-pro-wrap { display:flex; gap:16px; align-items:stretch; max-width:100%; margin-top:12px; padding:0 2px; }

/* Sidebar */
.dv-pro-sidebar { width:260px; min-width:260px; background:#fff; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; box-shadow:0 1px 6px rgba(0,0,0,0.07); }
.dv-pro-sidebar-top { background:linear-gradient(135deg,#1e3a5f,#1d4ed8); padding:20px 16px 18px; text-align:center; }
.dv-avatar { width:80px; height:80px; border-radius:50%; margin:0 auto 12px; border:3px solid rgba(255,255,255,0.35); box-shadow:0 4px 14px rgba(0,0,0,0.25); overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; color:#fff; }
.dv-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.dv-sidebar-name { font-size:16px; font-weight:700; color:#fff; line-height:1.35; margin-bottom:4px; }
.dv-sidebar-name-kn { font-size:12px; color:#bfdbfe; margin-bottom:10px; font-family:'Tiro Kannada','Noto Sans Kannada',sans-serif; }
.dv-sidebar-body { padding:14px; }
.dv-sidebar-row { display:flex; flex-direction:column; gap:2px; margin-bottom:12px; }
.dv-sidebar-row:last-child { margin-bottom:0; }
.dv-sidebar-lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:#94a3b8; }
.dv-sidebar-val { font-size:15px; font-weight:600; color:#1e293b; }
.dv-sidebar-divider { border:none; border-top:1px solid #f1f5f9; margin:10px 0; }
.dv-status-pill { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px; }
.dv-status-pill.active  { background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; }
.dv-status-pill.inactive{ background:#f8fafc; border:1px solid #e2e8f0; color:#64748b; }
.dv-status-dot { width:6px; height:6px; border-radius:50%; }
.dv-status-dot.active  { background:#22c55e; }
.dv-status-dot.inactive{ background:#94a3b8; }

/* Main box */
.dv-main-box { flex:1; min-width:0; background:#fff; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; box-shadow:0 1px 6px rgba(0,0,0,0.06); }
.dv-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; }
.dv-cell { padding:12px 16px; border-right:1px solid #f1f5f9; border-bottom:1px solid #f1f5f9; }
.dv-cell:nth-child(4n) { border-right:none; }
.dv-cell.full { grid-column:1/-1; border-right:none; }
.dv-lbl { font-size:15px; font-weight:600; text-transform:uppercase; letter-spacing:0.7px; color:#1e293b; margin-bottom:5px; }
.dv-val { font-size:18px; font-weight:700; color:#94a3b8; }
.dv-val.mono { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:15px; }
.dv-val.kn   { font-family:'Tiro Kannada','Noto Sans Kannada',sans-serif; font-size:15px; }

/* Action buttons */
.dv-act-btn { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:6px 14px; border-radius:7px; text-decoration:none; transition:all 0.18s; border:1.5px solid; }
.dv-act-btn.outline { border-color:#cbd5e1; background:#fff; color:#475569; }
.dv-act-btn.outline:hover { background:#f1f5f9; text-decoration:none; color:#1e293b; }
.dv-act-btn.primary { border-color:#1d4ed8; background:#1d4ed8; color:#fff; }
.dv-act-btn.primary:hover { background:#1e40af; border-color:#1e40af; text-decoration:none; color:#fff; }
.dv-act-btn.muted { border-color:#e2e8f0; background:#f8fafc; color:#64748b; }
.dv-act-btn.muted:hover { background:#f1f5f9; text-decoration:none; color:#334155; }

/* ============================================================
   28. LOGIN PAGE STYLES — Co-op Bank Staff Login
   Scoped under .login-page to avoid affecting other pages

   Used by: login, accounts/create, accounts/group-sb-create, accounts/passbook-print,
            agent/create, agent/edit, board-meetings/complete, deposit-schemes/edit,
            deposits/agent-commission, deposits/closure, deposits/create,
            deposits/fd-interest-posting, deposits/fd-maturity-payment,
            deposits/pigmy-closure, … and 48 more
   ============================================================ */
 
.login-page,
.login-page * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
.login-page {
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.login-page .divider {
    height: 1px;
    background: rgba(255,255,255,0.15);
    margin-bottom: 1.75rem;
}
 
.login-page .alert-error {
    background: rgba(192,57,43,0.25);
    border: 1px solid rgba(192,57,43,0.5);
    color: #fca5a5;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 1.25rem;
}

/* ============================================================
   29. REPORT PRINT — Column-based orientation + common styles

   Used by: reports/loans-report, reports/account-report, reports/customer-report,
            reports/financial-report, reports/deposits-report, reports/members-report,
            views/layouts/admin, ledgers/statements, deposits/index, deposits/pigmy-index,
            deposits/rd-index, deposits/pigmy-collection-report, accounts/index,
            agent/index, … and 212 more
   ============================================================ */
.rpt-print-header { display: none; }
.rpt-print-foot   { display: none; }

@media print {

    @page {
    size: A4 portrait;
    margin: 10mm 12mm 25mm;
    }

    @page rpt-ls {
    size: A4 landscape;
    margin: 8mm 10mm 22mm;
    }

    body.rpt-landscape { page: rpt-ls; }

    /* ── Hide UI chrome ── */
    .no-print,
    .top-navbar,
    .admin-navbar,
    .form-header,
    .report-toolbar-grid,
    #report-err,
    #report-loading,
    #report-note,
    #summary-cards,
    #summary-dynamic,
    .app-list-toolbar,
    .app-list-pager,
    #btn-excel,
    a[href*="report-dashboard"] {
        display: none !important;
    }

    body {
        background: #fff !important;
        font-size: 9pt !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    main, .navbar-offset {
        padding: 0 !important;
        margin: 0 !important;
    }

    .form-panel,
    .app-list-panel,
    .app-list-panel.content-area {
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .form-body { padding: 0 !important; }

    /* ── Print header ── */
    .rpt-print-header {
        display: block !important;
        text-align: center;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 2px solid #000;
    }

    .rpt-print-header .rph-org {
        font-weight: 800;
        color: #000;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        /* font-size: JS set maduttade */
    }

.rpt-print-header .rph-addr {
        font-size: 8pt;
        color: #000;
        margin-top: 2px;
    }

    .rpt-print-header .rph-phone {
        font-size: 8pt;
        color: #000;
    }

    .rpt-print-header .rph-rule {
        border: none;
        border-top: 1px solid #000;
        margin: 5px 0 4px;
    }

    .rpt-print-header .rph-title {
        font-size: 11pt;
        font-weight: 800;
        color: #000;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .rpt-print-header .rph-sub {
        font-size: 7.5pt;
        color: #000;
        margin-top: 2px;
    }

    /* ── Print footer ──
       Printed in the page's bottom margin instead (reportPrintFooter() in layouts/admin.php
       copies this text into @page margin boxes on beforeprint), so it never covers a row
       and "Page X / Y" works. */
    .rpt-print-foot {
        display: none !important;
    }

    .rpt-print-foot .rpt-pager {
        display: none !important;
    }

    /* ── Tables ── */
    .app-list-table,
    #report-table,
    #dyn-table,
    #members-table,
    #summary-table {
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: collapse !important;
        page-break-inside: auto;
    }

    .app-list-table thead,
    #report-table thead,
    #dyn-table thead,
    #members-table thead,
    #summary-table thead {
        display: table-header-group;
    }

    /* ── Table header — white, black border ── */
    .app-list-table thead th,
    #report-table thead th,
    #members-table thead th,
    #summary-table thead th,
    #dyn-table thead tr.lr-col-head-row th {
        background: #fff !important;
        color: #000 !important;
        padding: 3px 5px !important;
        font-size: 7pt !important;
        font-weight: 800 !important;
        border: 1px solid #000 !important;
        white-space: nowrap;
        text-transform: uppercase;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* ── Body cells ── */
.app-list-table tbody td,
#report-table tbody td,
#dyn-table tbody td,
#members-table tbody td,
#summary-table tbody td {
    /* min 7mm; a long name / narrow column wraps onto a second line instead of being clipped */
    height: 7mm !important;
    padding: 1px 5px !important;
    font-size: 7.5pt !important;
    line-height: 1.35 !important;
    border: 1px solid #000 !important;
    color: #000 !important;
    background: #fff !important;
    vertical-align: middle !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

/* ── Rows ── (never split across two pages) */
.app-list-table tbody tr,
#report-table tbody tr,
#dyn-table tbody tr,
#members-table tbody tr {
    height: 7mm !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
}

/* A scrolling wrapper (overflow-x:auto on screen) is not split across pages by some
   Chrome / Edge versions — the table would be cut at the end of page 1. */
.app-list-table-wrap {
    overflow: visible !important;
}

/* Account numbers, codes and dates stay on one line */
.app-list-code,
#dyn-table td[data-field='account_number'],
#dyn-table td[data-field$='_date'],
#dyn-table td[data-field='last_paid_date'],
#dyn-table td[data-field='transaction_date'] {
    white-space: nowrap !important;
}

    /* ── No zebra stripes — rows stay pure white ── */
    .app-list-table tbody tr:nth-child(even) td,
    #report-table tbody tr:nth-child(even) td,
    #dyn-table tbody tr:nth-child(even) td,
    #members-table tbody tr:nth-child(even) td {
        background: #fff !important;
    }

    /* ── Secondary line hide ── */
    .app-list-secondary,
    .app-list-primary + *,
    .app-list-table tbody td div + div,
    #report-table tbody td div + div,
    #dyn-table tbody td div + div,
    #members-table tbody td div + div {
        display: none !important;
    }

    /* ── Amount / numeric ── */
    .app-list-amount, .lr-num {
        text-align: right !important;
        font-family: 'Courier New', monospace !important;
        white-space: nowrap !important;
        color: #000 !important;
    }

    /* ── SL ── */
    .app-list-sl, .app-list-col-sl {
        text-align: center !important;
        color: #000 !important;
        font-size: 7pt !important;
    }

    /* ── Code ── */
    .app-list-code {
        font-family: 'Courier New', monospace !important;
        font-size: 7pt !important;
        color: #000 !important;
    }

    /* ── Force show ── */
    .lr-sheet   { display: block !important; }
    #cert-panel { display: block !important; }

    /* ── Loans: banner thead ── */
    .lr-sheet thead tr.lr-banner-thead-row {
        display: table-row !important;
    }

    .lr-banner-thead-cell {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #000 !important;
    }

    .lr-banner-thead-inner .lr-org-title,
    .lr-banner-thead-inner .lr-org-sub,
    .lr-banner-thead-inner .lr-org-addr,
    .lr-banner-thead-inner .lr-doc-title,
    .lr-banner-thead-inner .lr-doc-sub,
    .lr-banner-thead-inner .lr-doc-note {
        color: #000 !important;
    }

    .lr-banner-thead-inner .lr-rule {
        border-top-color: #000 !important;
    }

    /* ── Loans: grand total ── */
    .lr-grand-ft td {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #000 !important;
        font-weight: 700 !important;
        height: auto !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
    }

    /* ── Loans: print foot — printed in the page margin instead (see .rpt-print-foot) ── */
    .lr-print-foot {
        display: none !important;
    }
}
/* ============================================================
   30. LIST PAGE PRINT — shared rules for all app-list-page views

   Used by: accounts/index, customers/index, agent/index, deposits/index,
            deposits/pigmy-index, deposits/rd-index, loan/index, members/index, users/list,
            directors/index, od/index, vouchers/list, deposits/pigmy-remittance-list,
            employees/index, … and 113 more
   ============================================================ */
/* Screen: hide the print-only society header block */
.print-report-header { display: none; }

@media print {

    /* Society header — shown only when printing list pages */
    .print-report-header {
        display: block !important;
        text-align: center;
        margin-bottom: 10px;
        padding-bottom: 6px;
        border-bottom: 2px solid #000;
        font-family: 'Times New Roman', Times, serif;
    }
    .print-report-header .prh-society-name {
        font-size: 16pt;
        font-weight: 800;
        color: #000 !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .print-report-header .prh-society-addr {
        font-size: 8.5pt;
        color: #000 !important;
        margin-top: 2px;
    }
    .print-report-header .prh-report-title {
        font-size: 11pt;
        font-weight: 800;
        text-transform: uppercase;
        color: #000 !important;
        margin-top: 4px;
        letter-spacing: 0.5px;
    }
    .print-report-header .prh-meta {
        font-size: 7.5pt;
        color: #333 !important;
        margin-top: 2px;
    }

    /* Dark header row for app-list-table — overrides the REPORT PRINT
       section's white header (that section targets report tables;
       this targets the standard list-page table specifically) */
    .app-list-page .app-list-table thead th {
        background: #1e293b !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        border: 1px solid #000 !important;
        font-size: 7pt !important;
        padding: 4px 6px !important;
    }

    /* Table body — clean black borders, no color backgrounds */
    .app-list-page .app-list-table tbody td {
        border: 1px solid #000 !important;
        color: #000 !important;
        background: #fff !important;
        font-size: 7.5pt !important;
        padding: 3px 6px !important;
    }

    /* Overflow fix — no horizontal scroll clipping on print */
    .app-list-page .app-list-table-wrap {
        overflow: visible !important;
        width: 100% !important;
    }
    .app-list-page .app-list-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
    }

    /* Hide toolbar, pager, action column, summary cards */
    .app-list-page .app-list-toolbar,
    .app-list-page .app-list-pager,
    .app-list-page .app-list-col-actions,
    .app-list-page .app-list-actions,
    .app-list-page .no-print,
    .acc-summary-cards { display: none !important; }
}

/* Landscape @page — scoped so it only fires on list pages.
   Each list view adds this in its own local <style> tag:
   <style>@media print { @page { size: A4 landscape; margin: 10mm 12mm; } }</style>
   This way form pages (create/edit) keep portrait. */

/* Remove colored badge boxes on print — plain black text only */
.app-list-badge,
.app-list-type-badge {
    background: none !important;
    border: none !important;
    color: #000 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
}

    
/* ============================================================
   31. NAVBAR — exact match to the reference dashboard_preview_v6.html:
   Row0 = navy "cover" header (logo + bank name/tagline/address
   grouped together on the left, like the original .emblem block).
   Row1 = white "topnav" menu bar with red accents, like the
   original .topnav. Site-wide — loaded after app.css in <head>, so
   it wins on equal specificity without needing !important.

   Used by: views/layouts/admin, dashboard, other/cashscroll,
            receipts/debit_credit_a5_print_styles, receipts/loan_a4_print_styles,
            accounts/account-closure, accounts/create, accounts/group-sb-create,
            accounts/index, audit/interest-provisions, customers/bulk-upload,
            customers/create, customers/edit, customers/freeze-customer, … and 56 more
   ============================================================ */
    .top-navbar-row0{
      background:linear-gradient(160deg,#0c2d3a 0%,#164a5e 100%);
      border-bottom:4px solid;
      border-image:linear-gradient(90deg,#8f6a24,#b7862f,#e8d5ab,#b7862f,#8f6a24) 1;
    }
    /* Logo + software/company name on the left, Time/Date centered in the
       same row — 3-column grid so the time/date block stays truly
       centered regardless of how wide the left (brand) or right (empty
       spacer) sides are. */
    .nb-row0-inner{
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      width:100%;
      gap:20px;
    }
    .nb-brand-block{
      display:flex;
      flex-direction:row;
      align-items:center;
      justify-content:flex-start;
      gap:14px;
      justify-self:start;
    }
    .nb-row0-time{
      display:flex;
      gap:10px;
      justify-self:center;
    }
        .nb-row0-right{
      display:flex;
      align-items:center;
      gap:10px;
      justify-self:end;
    }
    .nb-row0-right .nb-phone-btn{
      box-shadow:0 0 0 1px rgba(255,255,255,.12);
    }
    .nb-row0-right button.nb-phone-btn--receive{
      background:#16a34a !important;
      color:#fff !important;
    }
    .nb-row0-right button.nb-phone-btn--end{
      background:#dc2626 !important;
      color:#fff !important;
    }
    .nb-logo-text{ text-align:left; }
    .nb-bank-name-en{
      background:none;
      -webkit-background-clip:initial; -webkit-text-fill-color:#f7f1e3;
      background-clip:initial;
      color:#f7f1e3;
      text-align:left;
      font-size:20px;
      font-weight:800;
    }
    .nb-bank-tagline{
       font-size: 12px;
       font-weight: 600;
       color: #a9c2cc;
       text-align: left;
       margin-top: 1px;
       letter-spacing: 0.02em;
   }
    .nb-logo-icon{
      background:radial-gradient(circle at 35% 30%,rgba(183,134,47,.25),transparent 70%);
      border-color:#b7862f;
    }

    /* Row1 — white menu bar with red accents, matching the reference's
       .topnav exactly. */
    .top-navbar-row1{
      background:#fff;
      border-top:none;
      border-bottom:3px solid #e23c4f;
    }
    .nb-item{ color:#3a4650; }
    .nb-item:hover{ background:#f5f6f8; color:#3a4650; border-bottom-color:transparent; }
    .nb-item--active{ color:#e23c4f; border-bottom-color:#e23c4f; }

        .nb-timebox{
      background:transparent;
      border-color:#e6d9db;
    }
    .nb-timebox-lbl{ color:#9aa2a8; }
    .nb-timebox-val{ color:#e23c4f; }
    .nb-timebox--accent{
      background:#fdecef;
      border-color:#e23c4f;
    }
    .nb-timebox--accent .nb-timebox-lbl{ color:#b5203a; }
    .nb-timebox--accent .nb-timebox-val{ color:#7a1224; }

    /* Time/Date boxes in Row0 sit on the navy background, not white, so
       they need the gold-tinted navy palette instead of the red/white one
       above (which still applies wherever nb-timebox is used elsewhere). */
    .nb-row0-time .nb-timebox{
      background:rgba(183,134,47,.15);
      border:1px solid #3a5c68;
      border-radius:6px;
      padding:6px 16px;
      text-align:center;
    }
    .nb-row0-time .nb-timebox-lbl{ color:#8ea9b3; font-size:8px;font-weight:800; }
    .nb-row0-time .nb-timebox-val{ color:#e8d5ab; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:900; }
    .nb-row0-time .nb-timebox--accent{
      background:rgba(183,134,47,.3);
      border-color:#b7862f;
    }
    .nb-row0-time .nb-timebox--accent .nb-timebox-lbl{ color:#e8d5ab; }
    .nb-row0-time .nb-timebox--accent .nb-timebox-val{ color:#f7f1e3; }

    .nb-user-box{
      background:#fdecef;
      border-color:#f3c8cf;
    }
    .nb-user-avatar{ background:#e23c4f; }
    .nb-user-name{ color:#b5203a; }

    /* User/Logout now sit in Row0 (navy background), not Row1 (white) —
       need the gold-tinted navy palette here too, same reasoning as the
       Row0 time/date boxes above. */
    .nb-row0-right .nb-user-box{
      background:rgba(183,134,47,.15);
      border:1px solid #3a5c68;
    }
    .nb-row0-right .nb-user-avatar{ background:#b7862f; }
    .nb-row0-right .nb-user-name{ color:#e8d5ab; font-size:10px; font-weight:900; } 

/* Row0 is now a single horizontal line (logo + name + address side by
       side) instead of the old stacked/centered layout, so the fixed
       200px top offset that used to clear the taller navbar leaves a big
       empty gap above the page content. Tighten it to match. */
    .navbar-offset{ padding-top:135px !important; }
    @media print {
       .navbar-offset {
       padding-top: 0 !important;
     }
    }
    .inp {
    font-weight: 700 !important;
    color: #059669  !important; 
   }
   .inp:focus {
    font-weight: 700 !important;
     color: #059669  !important;
   }
   input[type="text"],
   input[type="number"],
   input[type="tel"],
   input[type="email"],
   textarea {
    font-weight: 700 !important;
    color: #059669 !important;
  }

   input[type="text"]:focus,
   input[type="number"]:focus,
   input[type="tel"]:focus,
   input[type="email"]:focus,
   textarea:focus {
     font-weight: 700 !important;
     color: #059669 !important;
  }
  
/* ============================================================
   32. LOGIN PAGE (NAVY SPLIT-SCREEN) — scoped under .login-page so it
   never touches other pages' .field / .btn / .wrap etc.
   Requires <body class="login-page"> on the login view.

   Used by: login, loan/loan-against-fd, rd-receipt/index, reports/account-report,
            accounts/create, accounts/passbook-print, customers/create, loan-receipt/index,
            od/closure, reports/loans-report, shares/share-suspense,
            transactions/sb-interest, vouchers/create, accounts/account-statement,
            … and 234 more
   ============================================================ */
.login-page,
.login-page *{box-sizing:border-box;margin:0;padding:0}
html:has(body.login-page),
.login-page{height:100%;overflow:hidden}
.login-page{font-family:'Inter',sans-serif}
.login-page .wrap{width:100vw;height:100vh;display:grid;grid-template-columns:1fr 1fr;background:#fffdf8}

/* LEFT — navy panel */
.login-page .brand{background:linear-gradient(160deg,#0c2d3a 0%,#164a5e 100%);padding:60px;position:relative;display:flex;flex-direction:column;overflow:hidden}
.login-page .ruled{position:absolute;inset:0;background-image:repeating-linear-gradient(0deg, transparent 0 39px, rgba(183,134,47,.10) 39px 40px);pointer-events:none}
.login-page .brand-inner{position:relative;z-index:1;display:flex;flex-direction:column;height:100%}
.login-page .brand-top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;margin-bottom:36px}
.login-page .brand-name{font-family:'Fraunces',serif;font-size:40px;font-weight:700;color:#f7f1e3;line-height:1.4}
.login-page .brand-name .kn{display:block;font-family:'Tiro Kannada',sans-serif;font-size:30px;font-weight:700;color:#e8d5ab;margin-top:5px}
.login-page .brand-addr{font-size:15px;color:#a9c2cc;margin-top:8px;line-height:1.5;max-width:700px}

.login-page .headline{font-family:'Fraunces',serif;font-size:50px;font-weight:700;color:#f7f1e3;line-height:1.3;margin-bottom:25px;margin-top:auto;text-align:center}
.login-page .subline{font-size:15px;color:#a9c2cc;line-height:1.6;margin-bottom:30px;text-align:center}

.login-page .tag{font-size:12px;font-weight:700;letter-spacing:.03em;color:#e8d5ab;background:rgba(232,213,171,.1);border:1px solid rgba(232,213,171,.3);padding:5px 11px;border-radius:20px}

.login-page .brand-foot{margin-top:auto;padding-top:20px;border-top:1px solid rgba(232,213,171,.2);font-size:14px;color:#a9c2cc;display:flex;justify-content:space-between;align-items:center}
.login-page .brand-foot b{color:#f7f1e3}

/* RIGHT — form */
.login-page .formside{padding:60px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#fffdf8;overflow:hidden}
.login-page .form-inner{width:100%;max-width:460px}
.login-page .login-notice{width:100%;margin:0 0 16px}
.login-page .login-notice>div{margin:0 !important}
.login-page .formside .brand-tag{font-size:20px;font-weight:900;color:#8f6a24;letter-spacing:.08em;margin-bottom:35px}
.login-page .formside h2{font-family:'Fraunces',serif;font-size:30px;font-weight:700;color:#0c2d3a;margin-bottom:10px}
.login-page .formside .sub{font-size:15px;color:#68727a;margin-bottom:34px}
.login-page .field{margin-bottom:22px}
.login-page .field label{display:block;font-size:13px;font-weight:700;color:#8f6a24;text-transform:uppercase;letter-spacing:.05em;margin-bottom:9px}
.login-page .field input{width:100%;padding:16px 18px;border:1.5px solid #e4ddc9;border-radius:9px;font-size:17px;font-family:'JetBrains Mono',monospace;background:#f6f4ee;transition:border-color .15s,box-shadow .15s}
.login-page .field input:focus{outline:none;border-color:#b7862f;background:#fff;box-shadow:0 0 0 4px rgba(183,134,47,.12)}
.login-page .field input.has-error{border-color:#9c3b32}
.login-page .field-err{font-size:13px;color:#9c3b32;margin-top:6px;font-weight:600}
.login-page .btn{width:100%;padding:17px;background:linear-gradient(135deg,#0c2d3a,#164a5e);color:#f7f1e3;border:none;border-radius:9px;font-size:17px;font-weight:700;cursor:pointer;margin-top:10px;letter-spacing:.02em;transition:opacity .15s}
.login-page .btn:hover{opacity:.9}
.login-page .alert-err{background:#faeeec;border:1px solid #f0c4bb;color:#9c3b32;font-size:14.5px;font-weight:600;padding:13px 17px;border-radius:9px;margin-bottom:22px}
.login-page .divider{display:flex;align-items:center;gap:10px;margin:26px 0;color:#c4bda3;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.login-page .divider::before,
.login-page .divider::after{content:'';flex:1;height:1px;background:#e4ddc9}
.login-page .foot-link{text-align:center;font-size:13.5px;color:#8f6a24}
/* Software icon + feature list — everything else (.wrap, .brand,
     .formside, .field, .btn...) comes from the shared .login-page CSS
     block in app.css. */
  .login-page .sw-icon{width:200px;height:200px;border-radius:50%;background:#f6f4ee;display:flex;align-items:center;justify-content:center;font-size:72px;border:2px solid #b7862f;flex-shrink:0}
  .login-page .sw-feat{display:flex;flex-direction:column;gap:10px;margin-bottom:6px;text-align:left;max-width:400px;margin-left:auto;margin-right:auto}
  .login-page .sw-feat-row{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:#a9c2cc;line-height:1.5}
  .login-page .sw-feat-row b{color:#e8d5ab;font-weight:700}

@media (max-width:760px){
  html:has(body.login-page),
  .login-page{overflow:auto}
  .login-page .wrap{grid-template-columns:1fr;height:auto;min-height:100vh}
  .login-page .brand{display:none}
}
/* ============================================================
   33. USER MENU DROPDOWN — the name / role box on the right of the navbar
   (Change password, Link phone, Logout)

   Used by: views/layouts/admin, accounts/account-closure, accounts/account-statement,
            accounts/create, accounts/passbook-print, agent/create, agent/edit,
            audit/bank-statements, audit/fd-interest-payable,
            audit/loan-interest-receivable, board-meetings/create, customers/create,
            customers/customer-info, customers/delete, … and 108 more
   ============================================================ */
 .nb-user-dropdown-wrap{ display:inline-block; position:relative; }
    .nb-user-dropdown{
      display:none;
      position:absolute;
      top:calc(100% + 6px);
      right:0;
      left:auto;
      width:max-content;
      min-width:100%;   /* opens leftwards from the box's right edge — never runs off the right side of the screen */
      background:#fff;
      border:1px solid #e2e8f0;
      border-radius:8px;
      box-shadow:0 8px 24px rgba(12,45,58,.18);
      overflow:hidden;
      z-index:200;
    }
    .nb-user-dropdown.open{ display:block; }
    .nb-user-dd-item{
      display:flex; align-items:center; gap:9px;
      padding:10px 14px; font-size:12.5px; font-weight:600;
      color:#1e293b; text-decoration:none;
      border-bottom:1px solid #f1f5f9;
    }
    .nb-user-dd-item:last-child{ border-bottom:none; }
    .nb-user-dd-item:hover{ background:#f8fafc; }
    .nb-user-dd-item--danger{ color:#dc2626; }
    .nb-user-dd-item--danger:hover{ background:#fef2f2; }
/* ============================================================
   34. SHARED DASHBOARD STYLES — used across Customers/Share/Accounts/
   Groups/Loan/Deposit dashboards. Change sizes/spacing HERE once —
   every dashboard using these classes updates together.
   (Colors/gradients stay inline per-dashboard — only structure here.)

   Used by: deposits/deposit-dashboard, loan/loan-od-dashboard, deposits/fddashboard,
            loan/loan-dashboard, accounts/accountdashboard, deposits/pigmy-dashboard,
            deposits/rd-dashboard, ledgers/index, od/od-dashboard, shares/sharedashboard,
            transactions/transactiondashboard, vouchers/index, customers/customerdashboard,
            groups/dashboard, … and 70 more
   ============================================================ */
 
/* ── Header banner ── */
.dash-banner {
  border-radius: 10px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.dash-banner-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 5px;
}
.dash-banner-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
}
.dash-banner-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  margin-top: 3px;
}
.dash-banner-icon {
  font-size: 32px;
  opacity: 1;
}
.dash-banner-btn {
  font-family: 'Montserrat', sans-serif;
  padding: 10px 20px;
  background: #fff;
  color: #1e3a5f;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

/* ── Stats grid + cards ── */
.dash-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.dash-stat-card {
  background: #fff;
  border: 1px solid #d0dbe8;
  border-radius: 10px;
  padding: 18px 20px;
}
.dash-stat-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: #000;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 11px;
}
.dash-stat-value {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 900;
  color: #000;
  margin-bottom: 4px;
}
.dash-stat-desc {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin-top: 4px;
}
.dash-stat-currency {
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 4px;
}
.dash-stat-currency .sym { font-size: 20px; font-weight: 900; }
.dash-stat-currency .amt { font-size: 27px; font-weight: 900; }

/* ── Quick Actions section ── */
.dash-qa-section {
  background: #fff;
  border: 1px solid #d0dbe8;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
}
.dash-qa-header {
  padding: 11px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-qa-header-icon { font-size: 14px; }
.dash-qa-header-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
}
.dash-qa-grid {
  padding: 14px;
  display: grid;
  gap: 10px;
}
.dash-qa-card {
  border-radius: 10px;
  padding: 16px 12px;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s;
  display: block;
}
.dash-qa-card:hover { transform: translateY(-2px); }
.dash-qa-icon {
  font-size: 26px;
  margin-bottom: 6px;
}
.dash-qa-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 900;
}
.dash-qa-sub {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: #334155;
  margin-top: 2px;
}
.dash-qa-desc {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  margin-top: 4px;
  line-height: 1.3;
}
.dash-qa-card--lg {
  padding: 18px 14px;
}
.dash-qa-card--lg .dash-qa-icon {
  margin-bottom: 8px;
}

/* ── Column-count variants for dash-qa-grid (3/5/6/7/8 action tiles) ── */
.dash-qa-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dash-qa-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dash-qa-grid--5 { grid-template-columns: repeat(5, 1fr); }
.dash-qa-grid--6 { grid-template-columns: repeat(6, 1fr); }
.dash-qa-grid--7 { grid-template-columns: repeat(7, 1fr); }
.dash-qa-grid--8 { grid-template-columns: repeat(8, 1fr); }
.dash-qa-grid--9 { grid-template-columns: repeat(9, 1fr); }
.dash-qa-grid--10 { grid-template-columns: repeat(10, 1fr); }

/* Users dashboard: summary cards and role counts share one row
   so the old 4-column grid does not leave an empty cell. */
.users-dash { margin-bottom: 20px; }
.users-dash-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 18px;
  align-items: stretch;
}
.users-dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 14px;
}
.users-dash-stats .dash-stat-label,
.users-dash-stats .dash-stat-desc {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.users-dash-roles {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.users-dash-role-grid {
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 10px;
  flex: 1;
  align-content: stretch;
}
.users-dash-role {
  padding: 12px 8px;
  min-width: 0;
}
.users-dash-role .dash-stat-label {
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}
.users-dash-role .dash-stat-value { font-size: 22px; color: #1e3a5f; margin-bottom: 0; }
@media (max-width: 1100px) {
  .users-dash-top { grid-template-columns: 1fr; }
}

/* ============================================================
   Print popup (layouts/admin.php): prints open here instead of a new tab / window
   ============================================================ */
.print-popup-ov { position: fixed; inset: 0; z-index: 10000; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.print-popup { background: #fff; width: min(1000px, 100%); height: min(92vh, 100%); border-radius: 10px; box-shadow: 0 20px 50px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; }
.print-popup-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: #1e3a5f; color: #fff; font-weight: 700; font-size: 13px; }
.print-popup-bar button { margin-left: 8px; border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; font-weight: 700; font-size: 12px; padding: 5px 12px; border-radius: 6px; cursor: pointer; }
.print-popup-bar .pp-print { background: #fff; color: #1e3a5f; }
.print-popup .pp-frame { flex: 1; width: 100%; border: 0; background: #eef1f5; }
@media print { .print-popup-ov { display: none !important; } }

/* ============================================================
   Person cards on view pages (loan borrower / sureties): details table + photo + signature.
   The table stretches to the card height and the photo and signature boxes are the same
   height, so no empty strip is left under the table or the signature.
   ============================================================ */
.ln-person-card { padding: 12px 16px; border-bottom: 1px solid #e8f0fe; }
.ln-person-row { display: flex; gap: 14px; align-items: stretch; }
.ln-person-details { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ln-person-details > .dv-table { flex: 1; height: 100%; }
.ln-person-media { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.ln-person-media .dv-doc-label { margin: 0 0 6px; }
.ln-photo-box,
.ln-sign-box { flex: 1; min-height: 126px; max-height: 170px; border: 1px solid #d0dbe8; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ln-photo-box { width: 104px; background: #e8f0fe; font-size: 30px; }
.ln-sign-box { width: 150px; background: #fff; font-size: 11px; color: #94a3b8; }
@media (max-width: 900px) {
  .ln-person-row { flex-wrap: wrap; }
  .ln-person-details { flex-basis: 100%; }
}

/* ============================================================
   View pages — professional print (letterhead added by layouts/admin.php → viewPagePrintLetterhead)
   Used by: customers/view, customers/customer-info, members/view, accounts/view, deposits/view,
            loan/view, directors/view, agent/view, groups/view, users/view
   ============================================================ */
.view-print-lh, .view-print-signs { display: none; }
@media print {
    .app-entity-view-page { color: #000 !important; font-size: 9.5pt !important; }
    .app-entity-view-page .view-print-lh,
    [data-print-title] .view-print-lh { display: block !important; margin-bottom: 3mm; }
    [data-print-title] .view-print-signs { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6mm; margin-top: 20mm; text-align: center; font-size: 8.5pt; break-inside: avoid; page-break-inside: avoid; }
    [data-print-title] .view-print-signs div { border-top: 1px solid #000; padding-top: 1mm; }
    /* List / report pages marked data-print-title: plain bordered table, no screen chrome */
    [data-print-title] .app-list-panel { box-shadow: none !important; border: 0 !important; }
    [data-print-title] .app-list-toolbar, [data-print-title] .no-print, [data-print-title] .app-list-pager,
    [data-print-title] .app-list-col-actions, [data-print-title] td.app-list-actions { display: none !important; }
    [data-print-title] .app-list-table-wrap { overflow: visible !important; margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
    [data-print-title] .app-list-table { width: 100% !important; min-width: 0 !important; border-collapse: collapse !important; font-size: 8.5pt !important; }
    [data-print-title] .app-list-table th, [data-print-title] .app-list-table td { border: 1px solid #999 !important; padding: 1mm 1.5mm !important; color: #000 !important; background: #fff !important;
        white-space: normal !important; overflow-wrap: anywhere; word-break: normal; } /* long voucher nos. wrap instead of running off the page */
    [data-print-title] .app-list-table th { background: #f2f4f7 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    [data-print-title] .app-list-table thead { display: table-header-group; }
    [data-print-title] .app-list-table tfoot { display: table-row-group; }
    [data-print-title] .app-list-table tfoot td { font-weight: 700 !important; }
    [data-print-title] .app-list-table tr { break-inside: avoid; page-break-inside: avoid; }
    [data-print-title] .app-list-table span { background: none !important; color: #000 !important; }
    [data-print-title] .view-tbl { width: 100% !important; border-collapse: collapse !important; }
    [data-print-title] .view-tbl td, [data-print-title] .view-tbl th { border: 1px solid #999 !important; padding: 1mm 2mm !important; color: #000 !important; }
    [data-print-title].content-area { box-shadow: none !important; border: 0 !important; }
    /* details text (e.g. "BY CASH") is hidden by the general list-print rule — keep it on these pages */
    [data-print-title] .app-list-table .app-list-secondary { display: inline !important; visibility: visible !important; }
    .view-print-lh .vpl-row { display: flex; align-items: center; gap: 10px; border-bottom: 2.5px double #1e3a5f; padding-bottom: 2mm; }
    .view-print-lh img { height: 15mm; width: auto; }
    .view-print-lh .vpl-text { flex: 1; text-align: center; }
    .view-print-lh .vpl-bank { font-size: 15pt; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #1e3a5f !important; }
    .view-print-lh .vpl-sub { font-size: 8.5pt; color: #333 !important; }
    .view-print-lh .vpl-title { margin-top: 2.5mm; text-align: center; font-size: 12pt; font-weight: 700; letter-spacing: 1px; }
    .view-print-lh .vpl-title-kn { display: block; font-size: 10pt; font-weight: 600; letter-spacing: 0; }
    .view-print-lh .vpl-meta { display: flex; justify-content: space-between; font-size: 8.5pt; border: 1px solid #999; padding: 1mm 2mm; margin-top: 2mm; }

    /* Declaration-style signature lines at the end (same as the Customer Information Sheet) */
    .app-entity-view-page .view-print-signs { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6mm; margin-top: 22mm; text-align: center; font-size: 8.5pt; break-inside: avoid; page-break-inside: avoid; }
    .app-entity-view-page .view-print-signs div { border-top: 1px solid #000; padding-top: 1mm; }

    /* Other tables on the page (accounts, transactions, members …): grid like the sheet */
    .app-entity-view-page table:not(.dv-table) { border-collapse: collapse !important; width: 100% !important; }
    .app-entity-view-page table:not(.dv-table) th,
    .app-entity-view-page table:not(.dv-table) td { border: 1px solid #999 !important; padding: 1mm 1.5mm !important; color: #000 !important; }
    .app-entity-view-page table:not(.dv-table) th { background: #f2f4f7 !important; font-weight: 700 !important; font-size: 8.5pt !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* Screen chrome off: buttons, actions, shadows, coloured panels */
    .app-entity-view-page .no-print,
    .app-entity-view-page .cc-view-header-actions,
    .app-entity-view-page .dv-btn,
    .app-entity-view-page button { display: none !important; }
    .app-entity-view-page .cc-form-shell,
    .app-entity-view-page .dv-footer { box-shadow: none !important; border: none !important; border-radius: 0 !important; background: #fff !important; }
    .app-entity-view-page .cc-page-header { background: #fff !important; border-bottom: 1px solid #000 !important; padding: 2mm 0 !important; }

    /* Sections + tables: plain bordered, black on white */
    .app-entity-view-page .dv-section { break-inside: avoid; page-break-inside: avoid; margin-bottom: 3mm !important; }
    .app-entity-view-page .cc-section-title {
        color: #fff !important; background: #1e3a5f !important; font-size: 9pt !important; font-weight: 700 !important;
        text-transform: uppercase; letter-spacing: .5px; border: none !important; border-radius: 0 !important;
        padding: 1mm 2mm !important; margin: 0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .app-entity-view-page .cc-section-title * { color: #fff !important; }
    .app-entity-view-page .dv-table { border-collapse: collapse !important; width: 100% !important; }
    .app-entity-view-page .dv-table td { border: 1px solid #999 !important; padding: 1mm 2mm !important; color: #000 !important; background: #fff !important; }
    .app-entity-view-page .dv-table td.dv-label { background: #f2f4f7 !important; font-weight: 600 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .app-entity-view-page .dv-value,
    .app-entity-view-page [class*="dv-value-"] { color: #000 !important; }
    .app-entity-view-page table { break-inside: auto; }
    .app-entity-view-page tr { break-inside: avoid; page-break-inside: avoid; }
    /* Nothing may run off the page: tables fit the page width, text wraps instead of being clipped (…) */
    .app-entity-view-page table { width: 100% !important; min-width: 0 !important; }
    .app-entity-view-page [style*="overflow-x"] { overflow: visible !important; }
    .app-entity-view-page th, .app-entity-view-page td { white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
        max-width: none !important; overflow-wrap: anywhere; font-size: 8.5pt !important; padding: 1mm 1.5mm !important; }
    .app-entity-view-page td span { white-space: normal !important; }

    /* Photo & signature keep a neat frame */
    .app-entity-view-page .dv-doc-card { border: 1px solid #888 !important; box-shadow: none !important; background: #fff !important; break-inside: avoid; }
    .app-entity-view-page img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* SahakaraTech full logo (wordmark + tagline). Its text is dark, so it sits on a light card over the navy backgrounds. */
.login-page .sw-logo{background:#f6f4ee;border:2px solid #b7862f;border-radius:16px;padding:14px 20px;max-width:100%}
.login-page .sw-logo img{display:block;width:360px;max-width:100%;height:auto}
.nb-brand-block{align-items:center}
.nb-logo-wrap--full{background:#fff;border-radius:10px;padding:5px 12px;box-shadow:0 2px 10px rgba(0,0,0,.25),inset 0 0 0 1px rgba(183,134,47,.35)}
.nb-logo-img.nb-logo-img--full{height:46px;width:auto;max-width:none;border-radius:0;display:block}
/* Tagline: two stacked lines in the logo's colours (lightened for navy), set off by a gold rule */
.nb-st-tagline{display:flex;flex-direction:column;justify-content:center;gap:2px;padding-left:14px;border-left:2px solid rgba(183,134,47,.7);font-family:'Fraunces',Georgia,serif;font-size:17px;font-weight:600;font-style:italic;line-height:1.2;letter-spacing:.01em;text-align:left;white-space:nowrap}
.nb-st-tagline span:first-child{color:#93c5fd}
.nb-st-tagline span:last-child{color:#bef264}
@media (max-width:760px){
  .nb-logo-img.nb-logo-img--full{height:36px}
  .nb-st-tagline{font-size:13px;padding-left:10px}
}
@media (max-width:480px){
  .nb-st-tagline{display:none}
}