/* ============================================================
   ERP — TailAdmin-Inspired Design System
   Completely rewritten UI theme (visual layer only).
   All class names referenced by JS / PHP views are preserved.
   ============================================================ */

/* ---------- IRANSans Font (Persian) ---------- */
@font-face {
    font-family: IRANSansWeb_Medium;
    font-style: normal;
    font-weight: normal;
    src: url('https://app.barmancardio.com/assets/fonts/IRANSansWeb_Medium.eot');
    src: url('https://app.barmancardio.com/assets/fonts/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'),
    url('https://app.barmancardio.com/assets/fonts/IRANSansWeb_Medium.woff2') format('woff2'),
    url('https://app.barmancardio.com/assets/fonts/IRANSansWeb_Medium.woff') format('woff'),
    url('https://app.barmancardio.com/assets/fonts/IRANSansWeb_Medium.ttf') format('truetype');
}

/* ---------- Design Tokens (TailAdmin palette) ---------- */
:root {
    /* Brand */
    --brand-50:  #ecf3ff;
    --brand-100: #dde9ff;
    --brand-200: #c2d6ff;
    --brand-300: #9cb9ff;
    --brand-400: #7592ff;
    --brand-500: #465fff;
    --brand-600: #3641f5;
    --brand-700: #2a31d8;
    --brand-800: #252dae;
    --brand-900: #262e89;

    /* Gray (TailAdmin) */
    --gray-25:  #fcfcfd;
    --gray-50:  #f9fafb;
    --gray-100: #f2f4f7;
    --gray-200: #e4e7ec;
    --gray-300: #d0d5dd;
    --gray-400: #98a2b3;
    --gray-500: #667085;
    --gray-600: #475467;
    --gray-700: #344054;
    --gray-800: #1d2939;
    --gray-900: #101828;

    /* Status */
    --success-50:  #ecfdf3;
    --success-100: #d1fadf;
    --success-500: #12b76a;
    --success-600: #039855;
    --success-700: #027a48;

    --error-50:  #fef3f2;
    --error-100: #fee4e2;
    --error-500: #f04438;
    --error-600: #d92d20;
    --error-700: #b42318;

    --warning-50:  #fffaeb;
    --warning-100: #fef0c7;
    --warning-500: #f79009;
    --warning-600: #dc6803;
    --warning-700: #b54708;

    --orange-500: #fb6514;
    --orange-600: #ec4a0a;

    --purple-500: #7a5af8;
    --purple-600: #6938ef;

    /* Shadows (TailAdmin) */
    --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
    --shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;

    --focus-ring: 0 0 0 4px rgba(70, 95, 255, 0.12);
}

a, h1, h2, h3, h4, h5, h6, p, ul, li, span, div, input, button, select, textarea {
    font-family: IRANSansWeb_Medium, 'Outfit', 'Segoe UI', Tahoma, sans-serif;
}

/* ============================================================
   1. SELECTION / HIGHLIGHT
   ============================================================ */
::selection {
    background: var(--brand-200);
    color: var(--brand-900);
}
::-moz-selection {
    background: var(--brand-200);
    color: var(--brand-900);
}

/* ============================================================
   2. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 8px;
    border: 2px solid var(--gray-100);
}
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }
* { scrollbar-width: thin; scrollbar-color: var(--gray-300) var(--gray-100); }

/* ============================================================
   3. GLOBAL BODY
   ============================================================ */
body {
    background: var(--gray-50);
    color: var(--gray-700);
    direction: rtl;
    text-align: center;
    margin: 0;
    padding: 24px;
    min-height: 100vh;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   4. FORM CONTAINER & CARDS
   ============================================================ */
.form-container,
.card {
    background: #ffffff;
    color: var(--gray-800);
    padding: 32px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
    text-align: right;
}

.form-container {
    max-width: 460px;
    margin: 24px auto;
}

.card {
    padding: 24px;
    margin-bottom: 20px;
    border-radius: var(--radius-xl);
}

/* ============================================================
   5. LOGO
   ============================================================ */
.logo {
    max-width: 140px;
    margin: 0 auto 8px;
    display: block;
    border-radius: var(--radius-lg);
}

/* ============================================================
   6. HEADINGS
   ============================================================ */
h1, h2, h3 {
    color: var(--gray-900);
    margin-bottom: 12px;
    font-weight: 700;
    line-height: 1.4;
}
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }

/* ============================================================
   7. FORM INPUTS
   ============================================================ */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="file"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
input[type="url"],
textarea,
select {
    width: 100%;
    padding: 11px 14px;
    margin: 8px 0;
    background: #ffffff;
    color: var(--gray-800);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    font-size: 14px;
    font-family: inherit;
    text-align: right;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    outline: none;
    box-shadow: var(--shadow-xs);
    appearance: none;
    -webkit-appearance: none;
}

input[type="text"]::placeholder,
input[type="tel"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="search"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder {
    color: var(--gray-400);
    opacity: 1;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="file"]:focus,
textarea:focus,
select:focus {
    border-color: var(--brand-500);
    box-shadow: var(--focus-ring);
    background: #ffffff;
}

/* Inputs inside cards */
.card input[type="text"],
.card input[type="tel"],
.card input[type="email"],
.card input[type="password"],
.card input[type="number"],
.card input[type="date"],
.card input[type="search"],
.card input[type="url"],
.card textarea,
.card select {
    background: #ffffff;
    color: var(--gray-800);
    border: 1px solid var(--gray-300);
}
.card input::placeholder,
.card textarea::placeholder { color: var(--gray-400); }
.card input:focus,
.card textarea:focus,
.card select:focus {
    border-color: var(--brand-500);
    box-shadow: var(--focus-ring);
    background: #ffffff;
}

/* File input polish */
input[type="file"] {
    padding: 9px 14px;
    background: var(--gray-50);
    cursor: pointer;
}
input[type="file"]::-webkit-file-selector-button {
    background: var(--brand-500);
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    margin-left: 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    transition: background 0.2s;
}
input[type="file"]::-webkit-file-selector-button:hover { background: var(--brand-600); }

/* ============================================================
   8. BUTTONS
   ============================================================ */
.form-container button,
.form-container button:hover {
    width: 100%;
    padding: 12px 16px;
    background: var(--brand-500);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.25s ease;
    box-shadow: var(--shadow-xs);
}
.form-container button:hover {
    background: var(--brand-600);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.form-container button:active {
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
}

/* Tailwind bg-* buttons: keep their own colors but ensure polish */
button[class*="bg-"] {
    width: auto;
    padding: inherit;
    background-color: inherit;
    border: inherit;
    border-radius: inherit;
    font-size: inherit;
    box-shadow: none;
    transform: none;
}

/* Explicit Tailwind button color guarantees (preserve JS behaviour) */
button.bg-orange-400 { background-color: #fb923c !important; }
button.bg-orange-500 { background-color: #f97316 !important; }
button.bg-orange-600 { background-color: #ea580c !important; }
button.bg-orange-600:hover { background-color: #c2410c !important; }
button.bg-orange-700 { background-color: #c2410c !important; }
button.bg-orange-800 { background-color: #9a3412 !important; }
button.bg-orange-900 { background-color: #7c2d12 !important; }

button.bg-green-500 { background-color: #22c55e !important; }
button.bg-green-600 { background-color: #16a34a !important; }
button.bg-green-600:hover { background-color: #15803d !important; }
button.bg-green-700 { background-color: #15803d !important; }

button.bg-purple-500 { background-color: #a855f7 !important; }
button.bg-purple-600 { background-color: #9333ea !important; }
button.bg-purple-600:hover { background-color: #7e22ce !important; }
button.bg-purple-700 { background-color: #7e22ce !important; }

button.bg-gray-500 { background-color: #6b7280 !important; }
button.bg-gray-600 { background-color: #4b5563 !important; }
button.bg-gray-600:hover { background-color: #374151 !important; }
button.bg-gray-700 { background-color: #374151 !important; }

button.bg-blue-500 { background-color: #3b82f6 !important; }
button.bg-blue-600 { background-color: #2563eb !important; }
button.bg-blue-600:hover { background-color: #1d4ed8 !important; }
button.bg-blue-700 { background-color: #1d4ed8 !important; }

button.bg-teal-500 { background-color: #14b8a6 !important; }
button.bg-teal-600 { background-color: #0d9488 !important; }
button.bg-teal-600:hover { background-color: #0f766e !important; }
button.bg-teal-700 { background-color: #0f766e !important; }

button.bg-red-500 { background-color: #ef4444 !important; }
button.bg-red-600 { background-color: #dc2626 !important; }
button.bg-red-700 { background-color: #b91c1c !important; }

button.bg-yellow-500 { background-color: #eab308 !important; }
button.bg-yellow-600 { background-color: #ca8a04 !important; }

button.bg-cyan-500 { background-color: #06b6d4 !important; }
button.bg-cyan-600 { background-color: #0891b2 !important; }

button.bg-slate-500 { background-color: #64748b !important; }
button.bg-slate-600 { background-color: #475569 !important; }
button.bg-slate-700 { background-color: #334155 !important; }
button.bg-slate-800 { background-color: #1e293b !important; }

button.bg-indigo-500 { background-color: #6366f1 !important; }
button.bg-indigo-600 { background-color: #4f46e5 !important; }

/* Generic .btn system (used by module-base etc.) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--gray-100);
    color: var(--gray-700);
    font-family: inherit;
}
.btn:hover { background: var(--gray-200); }
.btn-primary { background: var(--brand-500); color: #fff; }
.btn-primary:hover { background: var(--brand-600); }
.btn-success { background: var(--success-500); color: #fff; }
.btn-success:hover { background: var(--success-600); }
.btn-danger { background: var(--error-500); color: #fff; }
.btn-danger:hover { background: var(--error-600); }
.btn-warning { background: var(--warning-500); color: #fff; }
.btn-warning:hover { background: var(--warning-600); }
.btn-secondary { background: var(--gray-100); color: var(--gray-700); border-color: var(--gray-200); }
.btn-secondary:hover { background: var(--gray-200); }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* ============================================================
   9. OTP CONTAINER
   ============================================================ */
.otp-container {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    flex-direction: row-reverse;
    gap: 8px;
}
.otp-input {
    width: 48px;
    height: 48px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: #ffffff;
    color: var(--gray-900);
    outline: none;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.otp-input:focus {
    border-color: var(--brand-500);
    box-shadow: var(--focus-ring);
}

/* ============================================================
   10. MESSAGES & SMALL TEXT
   ============================================================ */
#message {
    margin-top: 14px;
    color: var(--error-600);
    font-weight: 600;
    font-size: 13px;
    min-height: 18px;
}
small {
    display: block;
    margin-top: -4px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--gray-500);
    text-align: right;
}
.card small { color: var(--gray-500); }

/* ============================================================
   11. HEADER
   ============================================================ */
header {
    background: #ffffff;
    color: var(--gray-800);
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-xs);
}
header a {
    color: #ffffff;
    text-decoration: none;
    background: var(--error-500);
    padding: 8px 14px;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    box-shadow: var(--shadow-xs);
    font-size: 13px;
    font-weight: 600;
}
header a:hover {
    background: var(--error-600);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* ============================================================
   12. MAIN
   ============================================================ */
main {
    padding: 24px;
    max-width: 1200px;
   
}

/* ============================================================
   13. RESPONSIVE TABLE (Desktop)
   ============================================================ */
.responsive-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
}
.responsive-table thead {
    background: var(--gray-800);
}
.responsive-table th {
    padding: 13px 16px;
    text-align: right;
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.01em;
    border-bottom: 1px solid var(--gray-800);
    white-space: nowrap;
}
.responsive-table td {
    padding: 12px 16px;
    text-align: right;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-100);
    font-size: 13px;
    transition: background-color 0.15s ease;
}
.responsive-table tbody tr {
    transition: background-color 0.15s ease;
}
.responsive-table tbody tr:hover {
    background: var(--brand-50);
}
.responsive-table tbody tr:last-child td {
    border-bottom: none;
}

/* ============================================================
   14. RESPONSIVE TABLE (Mobile — Card Layout)
   ============================================================ */
@media screen and (min-width: 320px) and (max-width: 768px) {
    .responsive-table-wrapper {
        max-height: 70vh;
        overflow-y: auto;
        border-radius: var(--radius-xl);
        padding: 12px;
        background: var(--gray-50);
        scrollbar-width: thin;
        scrollbar-color: var(--gray-300) var(--gray-100);
    }
    .responsive-table-wrapper::-webkit-scrollbar { width: 6px; }
    .responsive-table-wrapper::-webkit-scrollbar-track { background: var(--gray-100); border-radius: 3px; }
    .responsive-table-wrapper::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }

    .responsive-table {
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
    }
    .responsive-table thead { display: none; }
    .responsive-table tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);
        padding: 14px;
        background-color: #ffffff;
        box-shadow: var(--shadow-sm);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .responsive-table tr:last-child { margin-bottom: 0; }
    .responsive-table td {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border: none;
        padding: 8px 0;
        font-size: 13px;
        text-align: right;
        color: var(--gray-700);
    }
    .responsive-table td::before {
        text-align: right;
        content: attr(data-label) ": ";
        font-weight: 700;
        color: var(--gray-800);
        margin-left: 8px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .responsive-table td:not(:last-child) { border-bottom: 1px solid var(--gray-100); }
    .responsive-table td[data-label="عملیات"] {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
    }
}

/* ============================================================
   15. SELECT2 THEME OVERRIDES (TailAdmin Light)
   ============================================================ */
.select2-container--default .select2-selection--single {
    background: #ffffff !important;
    border: 1px solid var(--gray-300) !important;
    border-radius: var(--radius-md) !important;
    height: 44px !important;
    color: var(--gray-800) !important;
    box-shadow: var(--shadow-xs) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--gray-800) !important;
    line-height: 42px !important;
    padding-right: 14px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
    padding-left: 10px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--gray-500) transparent transparent transparent !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--gray-500) transparent !important;
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-container--focus .select2-selection--single {
    border-color: var(--brand-500) !important;
    box-shadow: var(--focus-ring) !important;
}

/* Select2 Dropdown */
.select2-dropdown {
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    margin-top: 4px !important;
    overflow: hidden;
}
.select2-container--default .select2-search--dropdown { padding: 8px !important; }
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--gray-50) !important;
    border: 1px solid var(--gray-300) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--gray-800) !important;
    padding: 8px 12px !important;
    outline: none !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--brand-500) !important; }

.select2-results__options { max-height: 250px !important; }
.select2-container--default .select2-results__option {
    background: #ffffff !important;
    color: var(--gray-700) !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    transition: all 0.15s !important;
}
.select2-container--default .select2-results__option:hover,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--brand-50) !important;
    color: var(--brand-700) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--brand-500) !important;
    color: #ffffff !important;
}
.select2-container--default .select2-results__group {
    background: var(--gray-50) !important;
    color: var(--gray-600) !important;
    padding: 8px 14px !important;
    font-weight: 700;
}

/* Select2 inside cards (same light theme) */
.card .select2-container--default .select2-selection--single {
    background: #ffffff !important;
    border: 1px solid var(--gray-300) !important;
}
.card .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--gray-800) !important; }
.card .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--gray-500) transparent transparent transparent !important;
}
.card .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--gray-500) transparent !important;
}
.card .select2-container--default .select2-selection--single:focus,
.card .select2-container--default .select2-container--focus .select2-selection--single {
    border-color: var(--brand-500) !important;
    box-shadow: var(--focus-ring) !important;
}
.card .select2-dropdown {
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    box-shadow: var(--shadow-lg) !important;
}
.card .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--gray-50) !important;
    border: 1px solid var(--gray-300) !important;
    color: var(--gray-800) !important;
}
.card .select2-container--default .select2-results__option {
    background: #ffffff !important;
    color: var(--gray-700) !important;
}
.card .select2-container--default .select2-results__option:hover,
.card .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--brand-50) !important;
    color: var(--brand-700) !important;
}
.card .select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--brand-500) !important;
    color: #ffffff !important;
}

/* ============================================================
   16. MODAL ANIMATIONS
   ============================================================ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideDown {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(20px) scale(0.97); }
}

.modal-backdrop,
.modal-overlay,
[class*="modal-backdrop"],
[data-modal-backdrop] {
    animation: fadeIn 0.25s ease-out forwards;
}
.modal-backdrop.closing,
.modal-overlay.closing,
[class*="modal-backdrop"].closing,
[data-modal-backdrop].closing {
    animation: fadeOut 0.2s ease-in forwards;
}
.modal-content,
.modal-dialog,
[class*="modal-content"],
[class*="modal-dialog"],
[data-modal-content] {
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.modal-content.closing,
.modal-dialog.closing,
[class*="modal-content"].closing,
[class*="modal-dialog"].closing,
[data-modal-content].closing {
    animation: slideDown 0.2s ease-in forwards;
}

/* Generic modal-card (used by dashboard + JS) */
.modal-card {
    background: #ffffff;
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 30rem;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   17. UTILITY OVERRIDES
   ============================================================ */
a {
    color: var(--brand-600);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { color: var(--brand-700); }
.card a { color: var(--brand-600); }
.card a:hover { color: var(--brand-700); }

.text-muted,
.text-slate-400,
[style*="color: #94a3b8"] {
    color: var(--gray-500) !important;
}
.card .text-muted { color: var(--gray-500) !important; }

hr {
    border: none;
    border-top: 1px solid var(--gray-200);
    margin: 20px 0;
}
.card hr { border-top-color: var(--gray-200); }

pre, code {
    background: var(--gray-100);
    color: var(--gray-800);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
}
pre {
    padding: 16px;
    overflow-x: auto;
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
}
blockquote {
    border-right: 4px solid var(--brand-500);
    margin: 16px 0;
    padding: 12px 20px;
    background: var(--brand-50);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--gray-700);
}

/* ============================================================
   18. FORM LABELS
   ============================================================ */
label {
    color: var(--gray-700);
    font-size: 13px;
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}
.card label { color: var(--gray-700); }

/* ============================================================
   19. BADGES & TAGS
   ============================================================ */
.badge, .tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--brand-50);
    color: var(--brand-700);
}

/* ============================================================
   20. TOOLTIPS
   ============================================================ */
[title] { position: relative; }

/* ============================================================
   21. PRINT STYLES
   ============================================================ */
@media print {
    body { background: #ffffff !important; color: #000000 !important; }
    .form-container, .card {
        box-shadow: none !important;
        border: 1px solid #e5e7eb !important;
    }
    header {
        background: #f9fafb !important;
        color: #000000 !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
}

/* ============================================================
   22. AUTH PAGE LAYOUT HELPERS
   ============================================================ */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(1200px 600px at 100% 0%, rgba(70, 95, 255, 0.10), transparent 60%),
        radial-gradient(1000px 500px at 0% 100%, rgba(122, 90, 248, 0.08), transparent 60%),
        var(--gray-50);
}
.auth-card {
    width: 100%;
    max-width: 460px;
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    padding: 36px 32px;
    text-align: right;
}
.auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray-100);
}
.auth-brand img {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    object-fit: cover;
}
.auth-brand .brand-text {
    display: flex;
    flex-direction: column;
}
.auth-brand .brand-text strong {
    color: var(--gray-900);
    font-size: 15px;
    font-weight: 700;
}
.auth-brand .brand-text span {
    color: var(--gray-500);
    font-size: 12px;
}
.auth-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 6px;
}
.auth-subtitle {
    color: var(--gray-500);
    font-size: 13px;
    margin-bottom: 22px;
}
.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gray-400);
    font-size: 12px;
    margin: 18px 0;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--gray-200);
}
.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gray-500);
    font-size: 13px;
    text-decoration: none;
    margin-bottom: 16px;
    transition: color 0.2s;
}
.auth-back-link:hover { color: var(--brand-600); }

/* Hidden helper (in case Tailwind isn't loaded on auth pages) */
.hidden { display: none !important; }


button{
    background-color: #003668 !important;
    color: #fff !important;
    border-radius: 10px !important;
    border: 2px solid #00ddbc !important;
    padding: 10px 5px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* ============================================================
   Loan Module — Tab Styles
   ============================================================ */
.loan-tab {
    color: var(--gray-500);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}
.loan-tab:hover {
    color: var(--gray-700);
    background: var(--gray-50);
}
.loan-tab.active-tab {
    color: var(--brand-600);
    background: white;
    border-color: var(--gray-200);
    box-shadow: var(--shadow-xs);
    font-weight: 600;
}
.loan-tab-content.hidden {
    display: none;
}

/* Loan Form Builder */
.loan-field-row, .gt-field-row, .contract-row, .pp-row, .ec-row, .workflow-step {
    transition: all 0.15s ease;
}
.loan-field-row:hover, .gt-field-row:hover {
    border-color: var(--brand-200) !important;
}
.form-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-500);
}