/* Numen Finance — component styles layered on Tailwind (Play CDN) */

/* Default accent palette (Indigo). Pages inside the signed-in app override these per-tenant via an
   inline <style> in the head; login, public and portal pages fall back to these defaults so every
   button, chip and accent that uses rgb(var(--brand-*)) always renders a visible colour. */
:root {
    color-scheme: light;
    --brand-50: 238 242 255;  --brand-100: 224 231 255; --brand-200: 199 210 254;
    --brand-300: 165 180 252; --brand-400: 129 140 248; --brand-500: 99 102 241;
    --brand-600: 79 70 229;   --brand-700: 67 56 202;   --brand-800: 55 48 163;
    --brand-900: 49 46 129;
}
body { -webkit-font-smoothing: antialiased; }

/* ===== Sidebar nav links ===== */
.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .8rem;
    border-radius: .7rem;
    font-size: .875rem;
    font-weight: 500;
    color: #475569;
    transition: background-color .15s ease, color .15s ease;
}
.nav-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; color: #94a3b8; transition: color .15s ease; }
.nav-link:hover { background: #f1f5f9; color: #0f172a; }
.nav-link:hover i { color: rgb(var(--brand-600)); }

/* Active item: filled indigo gradient with a bright left accent bar */
.nav-active,
.nav-active:hover {
    background: linear-gradient(90deg, rgb(var(--brand-600)) 0%, rgb(var(--brand-700)) 100%);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 6px 16px rgb(var(--brand-600) / .30);
}
.nav-active i,
.nav-active:hover i { color: #ffffff; }
.nav-active::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 50%;
    transform: translateY(-50%);
    height: 1.4rem;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: #a5b4fc;
}

/* ===== Section labels between nav groups ===== */
.nav-section {
    padding: .9rem .8rem .3rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b8;
}

/* ===== Filter chips ===== */
.chip, .chip-active {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem 1rem;
    border-radius: 9999px;
    font-size: .8rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    transition: all .15s ease;
    white-space: nowrap;
}
.chip { background: #fff; color: #64748b; }
.chip:hover { border-color: rgb(var(--brand-200)); color: rgb(var(--brand-700)); }
.chip-active { background: rgb(var(--brand-600)); color: #fff; border-color: rgb(var(--brand-600)); box-shadow: 0 4px 12px rgb(var(--brand-600) / .25); }

/* ===== Cards ===== */
.card {
    background: #fff;
    border: 1px solid #e9eaf2;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.05);
}

/* ===== Form controls ===== */
.form-label { display:block; font-size:.8rem; font-weight:600; color:#334155; margin-bottom:.35rem; }
.form-input, .form-select, .form-textarea {
    width: 100%;
    border: 1px solid #d7d9e3;
    border-radius: .65rem;
    padding: .6rem .8rem;
    font-size: .9rem;
    background: #fff;
    color: #0f172a;
    transition: border-color .15s, box-shadow .15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: rgb(var(--brand-500));
    box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.form-input::placeholder { color:#9aa1b1; }

/* ===== Buttons ===== */
.btn { display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
    font-weight:600; font-size:.875rem; border-radius:.7rem; padding:.6rem 1.1rem;
    transition: all .15s ease; cursor:pointer; border:1px solid transparent; }
.btn-primary { background:rgb(var(--brand-600)); color:#fff; }
.btn-primary:hover { background:rgb(var(--brand-700)); box-shadow:0 6px 18px rgb(var(--brand-600) / .28); }
.btn-ghost { background:#fff; color:#334155; border-color:#d7d9e3; }
.btn-ghost:hover { background:#f8fafc; }
.btn-danger { background:#fff; color:#e11d48; border-color:#fecdd3; }
.btn-danger:hover { background:#fff1f2; }
.btn-success { background:#10b981; color:#fff; }
.btn-success:hover { background:#059669; box-shadow:0 6px 18px rgba(16,185,129,.28); }

/* ===== Badges ===== */
.badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:600;
    padding:.2rem .55rem; border-radius:9999px; }
.badge-green { background:#d1fae5; color:#065f46; }
.badge-amber { background:#fef3c7; color:#92400e; }
.badge-rose  { background:#ffe4e6; color:#9f1239; }
.badge-slate { background:#e2e8f0; color:#334155; }
.badge-indigo{ background:#e0e7ff; color:#3730a3; }
.badge-blue  { background:#dbeafe; color:#1e40af; }

/* ===== KPI icon tile ===== */
.kpi-icon { height:2.75rem; width:2.75rem; border-radius:.8rem; display:grid; place-items:center; font-size:1.15rem; }

/* ===== Tables ===== */
.data-table { width:100%; border-collapse:collapse; }
.data-table thead th { font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:#64748b;
    text-align:left; padding:.6rem .75rem; border-bottom:1px solid #eef0f6; font-weight:700; white-space:nowrap; }
.data-table tbody td { padding:.7rem .75rem; font-size:.875rem; border-bottom:1px solid #f2f4f9; color:#1e293b; }
.data-table tbody tr:hover { background:#f8fafc; }
.data-table tbody tr:last-child td { border-bottom:none; }
.data-table tbody tr.row-clickable { cursor:pointer; }
.data-table tbody tr.row-clickable:focus-visible { outline:2px solid rgb(var(--brand-500)); outline-offset:-2px; }

/* =========================================================================
   Responsive (mobile / tablet)
   Global safety net layered on the existing utility classes above — no
   layout is redesigned, this only prevents overflow, keeps touch targets
   usable, and lets long content wrap/scroll gracefully on small screens.
   ========================================================================= */
html, body { max-width: 100%; overflow-x: hidden; }

/* Cards: never force overflow from their own padding/borders */
.card { max-width: 100%; }

/* Buttons: wrap instead of overflowing, and meet the ~44px touch target on phones */
.btn { max-width: 100%; white-space: normal; }
@media (max-width: 640px) {
    .btn { min-height: 2.75rem; }
    .btn-ghost.px-1\.5, .btn-ghost.px-2, .btn-ghost.px-2\.5 { min-height: 2.25rem; min-width: 2.25rem; }
}

/* Tables: each table already scrolls inside its own .overflow-x-auto wrapper
   (existing convention across every list page) — keep that scroll contained
   to the table and just tighten spacing on phones so more columns fit before
   scrolling kicks in. Columns marked whitespace-nowrap (status/action cells)
   are left untouched so their icons don't wrap awkwardly mid-row. */
@media (max-width: 640px) {
    .data-table thead th, .data-table tbody td { padding: .55rem .6rem; font-size: .8rem; }
}

/* Forms: inputs/selects/textareas already default to width:100%; make sure
   adjacent inline controls (e.g. amount + mode pickers) stack cleanly. */
@media (max-width: 640px) {
    .form-input, .form-select, .form-textarea { font-size: 1rem; } /* prevents iOS Safari auto-zoom on focus */
}

/* Modals: keep any fixed.inset-0 dialog fully within the viewport and scrollable */
@media (max-width: 640px) {
    .fixed.inset-0 [class*="max-w-"] { max-width: 100%; }
}

/* Typography: avoid clipping/overlap on very small screens */
@media (max-width: 480px) {
    h1, h2, .font-display.text-2xl { font-size: 1.35rem; line-height: 1.3; }
    h3 { font-size: 1rem; }
}

/* Long codes/numbers (loan #, invoice #, phone) should wrap rather than push layout width */
.font-mono { word-break: break-word; }

/* ===== Toast ===== */
#toast { animation: slideDown .3s ease; }
@keyframes slideDown { from { opacity:0; transform: translateY(-6px);} to {opacity:1; transform:none;} }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* Generic spinner icon (e.g. disburse-in-progress feedback) — pairs with any bi- icon */
.spin { animation: spin .8s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.btn:disabled, .btn[disabled] { opacity: .7; cursor: not-allowed; }

/* =========================================================================
   Dark theme
   Toggled via <html data-theme="dark">. Only colors change here — no
   layout/spacing/typography rules are touched, and every selector below
   targets classes already used across the app (custom components + the
   Tailwind utility palette actually in use), so this cascades to every
   module without any per-page styling.
   ========================================================================= */
html[data-theme="dark"] { color-scheme: dark; }

html[data-theme="dark"] body { background-color: #0b1120; color: #e5e9f2; }

/* ---- Surfaces ---- */
html[data-theme="dark"] .bg-canvas,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-slate-50 { background-color: #121a2b; }
html[data-theme="dark"] .bg-canvas\/80 { background-color: rgba(18,26,43,.85); }
html[data-theme="dark"] .bg-slate-100 { background-color: #1a2338; }
html[data-theme="dark"] .bg-slate-200 { background-color: #232c44; }
html[data-theme="dark"] .bg-slate-900\/40 { background-color: rgba(0,0,0,.55); }
html[data-theme="dark"] .card { background: #121a2b; border-color: #232c44; box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25); }

/* ---- Borders ---- */
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-200\/70,
html[data-theme="dark"] .border-slate-300 { border-color: #232c44; }
html[data-theme="dark"] .divide-slate-100 > * + * { border-color: #232c44; }

/* ---- Text ---- */
html[data-theme="dark"] .text-ink,
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-slate-700 { color: #e5e9f2; }
html[data-theme="dark"] .text-slate-600 { color: #cbd5e1; }
html[data-theme="dark"] .text-slate-500 { color: #93a2bd; }
html[data-theme="dark"] .text-slate-400,
html[data-theme="dark"] .text-slate-300 { color: #7c8aa5; }
html[data-theme="dark"] .placeholder\:text-slate-400::placeholder { color: #64748b; }

/* ---- Brand tints (pills, chips) ---- */
html[data-theme="dark"] .bg-brand-50 { background-color: rgba(99,102,241,.16); }
html[data-theme="dark"] .bg-brand-100 { background-color: rgba(99,102,241,.22); }
html[data-theme="dark"] .border-brand-100 { border-color: rgba(99,102,241,.35); }
html[data-theme="dark"] .border-brand-200,
html[data-theme="dark"] .border-brand-300 { border-color: rgba(99,102,241,.45); }
html[data-theme="dark"] .text-brand-600,
html[data-theme="dark"] .text-brand-700,
html[data-theme="dark"] .text-brand-800,
html[data-theme="dark"] .text-brand-900 { color: #a5b4fc; }
html[data-theme="dark"] .bg-brand-900\/20,
html[data-theme="dark"] .text-brand-200 { color: #c7d2fe; }

/* ---- Form controls ---- */
html[data-theme="dark"] .form-label { color: #cbd5e1; }
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-textarea {
    background: #121a2b; border-color: #2b3550; color: #e5e9f2;
}
html[data-theme="dark"] .form-input::placeholder,
html[data-theme="dark"] .form-textarea::placeholder { color: #64748b; }
html[data-theme="dark"] .form-input:disabled,
html[data-theme="dark"] .form-select:disabled,
html[data-theme="dark"] .form-textarea:disabled { background: #0f1626; color: #64748b; }

/* ---- Buttons / chips ---- */
html[data-theme="dark"] .btn-ghost { background: #121a2b; color: #cbd5e1; border-color: #2b3550; }
html[data-theme="dark"] .btn-ghost:hover { background: #1a2338; }
html[data-theme="dark"] .btn-danger { background: #121a2b; border-color: #4c1d2e; color: #fb7185; }
html[data-theme="dark"] .btn-danger:hover { background: #1c1220; }
html[data-theme="dark"] .chip { background: #121a2b; color: #93a2bd; border-color: #2b3550; }
html[data-theme="dark"] .chip:hover { border-color: #4338ca; color: #a5b4fc; }

/* ---- Nav ---- */
html[data-theme="dark"] .nav-link { color: #93a2bd; }
html[data-theme="dark"] .nav-link:hover { background: #1a2338; color: #e5e9f2; }
html[data-theme="dark"] .nav-section { color: #64748b; }

/* ---- Tables ---- */
html[data-theme="dark"] .data-table thead th { color: #93a2bd; border-color: #232c44; }
html[data-theme="dark"] .data-table tbody td { color: #dbe2ee; border-color: #1e2740; }
html[data-theme="dark"] .data-table tbody tr:hover { background: #16203380; }

/* ---- Select2 ---- */
html[data-theme="dark"] .select2-container--default .select2-selection--single { background: #121a2b; border-color: #2b3550; }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e5e9f2; }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #64748b; }
html[data-theme="dark"] .select2-dropdown { background: #121a2b; border-color: #2b3550; color: #e5e9f2; }
html[data-theme="dark"] .select2-container--default .select2-results__option { color: #e5e9f2; }
html[data-theme="dark"] .select2-search--dropdown .select2-search__field { background: #0f1626; border-color: #2b3550; color: #e5e9f2; }
html[data-theme="dark"] .select2-results__option--highlighted { background-color: #1a2338 !important; color: #a5b4fc !important; }

/* ---- Status badges (semantic — hue kept, lightness inverted for contrast) ---- */
html[data-theme="dark"] .bg-emerald-50,  html[data-theme="dark"] .bg-emerald-100  { background-color: rgba(16,185,129,.16); }
html[data-theme="dark"] .bg-rose-50,     html[data-theme="dark"] .bg-rose-100     { background-color: rgba(244,63,94,.16); }
html[data-theme="dark"] .bg-red-100                                              { background-color: rgba(239,68,68,.16); }
html[data-theme="dark"] .bg-amber-50,    html[data-theme="dark"] .bg-amber-100    { background-color: rgba(245,158,11,.16); }
html[data-theme="dark"] .bg-blue-50,     html[data-theme="dark"] .bg-blue-100     { background-color: rgba(59,130,246,.16); }
html[data-theme="dark"] .bg-indigo-50,   html[data-theme="dark"] .bg-indigo-100   { background-color: rgba(99,102,241,.16); }
html[data-theme="dark"] .bg-purple-100                                           { background-color: rgba(168,85,247,.16); }
html[data-theme="dark"] .bg-orange-100                                           { background-color: rgba(249,115,22,.16); }
html[data-theme="dark"] .bg-sky-100                                              { background-color: rgba(14,165,233,.16); }
html[data-theme="dark"] .bg-violet-100                                           { background-color: rgba(139,92,246,.16); }
html[data-theme="dark"] .bg-zinc-200                                             { background-color: rgba(113,113,122,.22); }
html[data-theme="dark"] .bg-slate-100                                            { background-color: #1a2338; }

html[data-theme="dark"] .border-emerald-200 { border-color: rgba(16,185,129,.4); }
html[data-theme="dark"] .border-rose-200    { border-color: rgba(244,63,94,.4); }
html[data-theme="dark"] .border-amber-200   { border-color: rgba(245,158,11,.4); }

html[data-theme="dark"] .text-emerald-500, html[data-theme="dark"] .text-emerald-600 { color: #34d399; }
html[data-theme="dark"] .text-emerald-700, html[data-theme="dark"] .text-emerald-800 { color: #6ee7b7; }
html[data-theme="dark"] .text-rose-400,    html[data-theme="dark"] .text-rose-500,
html[data-theme="dark"] .text-rose-600 { color: #fb7185; }
html[data-theme="dark"] .text-rose-700,    html[data-theme="dark"] .text-rose-800 { color: #fda4af; }
html[data-theme="dark"] .text-red-700 { color: #fca5a5; }
html[data-theme="dark"] .text-amber-500,   html[data-theme="dark"] .text-amber-600 { color: #fbbf24; }
html[data-theme="dark"] .text-amber-700,   html[data-theme="dark"] .text-amber-800 { color: #fde68a; }
html[data-theme="dark"] .text-blue-600 { color: #60a5fa; }
html[data-theme="dark"] .text-indigo-600 { color: #818cf8; }
html[data-theme="dark"] .text-orange-700 { color: #fdba74; }
html[data-theme="dark"] .text-purple-700 { color: #d8b4fe; }
html[data-theme="dark"] .text-sky-700 { color: #7dd3fc; }
html[data-theme="dark"] .text-violet-700 { color: #c4b5fd; }
html[data-theme="dark"] .text-zinc-600 { color: #d4d4d8; }

/* Custom badge/status classes (ApplicationStatus, LoanStatus, etc.) */
html[data-theme="dark"] .badge-green  { background: rgba(16,185,129,.18); color: #6ee7b7; }
html[data-theme="dark"] .badge-amber  { background: rgba(245,158,11,.18); color: #fde68a; }
html[data-theme="dark"] .badge-rose   { background: rgba(244,63,94,.18); color: #fda4af; }
html[data-theme="dark"] .badge-slate  { background: #232c44; color: #cbd5e1; }
html[data-theme="dark"] .badge-indigo { background: rgba(99,102,241,.2); color: #a5b4fc; }
html[data-theme="dark"] .badge-blue   { background: rgba(59,130,246,.18); color: #93c5fd; }

/* ---- Mobile bottom nav / sheet ---- */
html[data-theme="dark"] #moreSheet { background: #121a2b; }
html[data-theme="dark"] #moreSheet .bg-slate-200 { background-color: #2b3550; }
html[data-theme="dark"] nav.md\:hidden.fixed.bottom-0 { background: #121a2b; border-color: #232c44; }

/* ---- Theme dropdown panel reuses .bg-white / .border-slate-100 rules above ---- */