/* ============================================================
   Rich Aunties — Bright Theme Override  (theme.css)
   Goal: highly readable UI — light/bright background,
   professional blue accent, Inter font (tabular numerals),
   larger comfortable text sizes.

   This file is loaded LAST on every page and uses !important
   so it wins over each page's inline <style> and menu.php.
   To tweak the whole app, edit ONLY this file.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- 1. Design tokens (recolor the whole app) ---------- */
:root {
  /* Accent — professional blue */
  --primary:            #1d4ed8 !important;
  --primary-light:      #3b82f6 !important;
  --primary-glow:       rgba(29,78,216,0.25) !important;
  --secondary:          #0284c7 !important;
  --secondary-glow:     rgba(2,132,199,0.25) !important;
  --accent:             #1d4ed8 !important;
  --accent-light:       #3b82f6 !important;
  --blue:               #1d4ed8 !important;
  --blue-dark:          #1e3a8a !important;
  --teal:               #0891b2 !important;

  /* Status colours — tuned for contrast on white */
  --emerald:            #15803d !important;
  --amber:              #b45309 !important;
  --orange:             #c2410c !important;
  --rose:               #dc2626 !important;
  --pink:               #db2777 !important;

  /* Gradients — kept in the blue family */
  --gradient-primary:   linear-gradient(135deg,#2563eb,#1d4ed8) !important;
  --primary-gradient:   linear-gradient(135deg,#2563eb,#1d4ed8) !important;
  --gradient-info:      linear-gradient(135deg,#2563eb,#0891b2) !important;
  --gradient-violet:    linear-gradient(135deg,#2563eb,#1d4ed8) !important;
  --gradient-ocean:     linear-gradient(135deg,#0ea5e9,#0891b2) !important;
  --bg-gradient:        linear-gradient(135deg,#eef4ff 0%,#e8f6ff 100%) !important;

  /* Surfaces & text */
  --body-bg:            #f3f6fb !important;
  --card-bg:            #ffffff !important;
  --card-border:        #e2e8f0 !important;
  --card-shadow:        0 1px 3px rgba(15,23,42,0.06), 0 6px 18px rgba(15,23,42,0.05) !important;
  --card-shadow-hover:  0 10px 28px rgba(29,78,216,0.12), 0 4px 12px rgba(15,23,42,0.06) !important;
  --text-primary:       #0f172a !important;
  --text-secondary:     #475569 !important;
  --text-muted:         #64748b !important;

  /* Sidebar — light/bright instead of dark navy */
  --sidebar-bg:           #ffffff !important;
  --sidebar-hover:        #eef4ff !important;
  --sidebar-active:       #e0ecff !important;
  --sidebar-active-border:#1d4ed8 !important;
  --sidebar-text:         #475569 !important;
  --sidebar-text-active:  #1d4ed8 !important;
}

/* ---------- 2. Typography: readable font everywhere ---------- */
/* Bigger root so every rem-based size scales up. */
html { font-size: 17px !important; }

body,
h1, h2, h3, h4, h5, h6,
p, a, span, div, li, label, small, strong, em, b,
td, th, caption,
button, input, select, textarea, optgroup, option,
.form-control, .btn, .badge, .ra-table, .ra-card, .ra-nav-link,
.page-header, .alert, .select2-container {
  font-family: 'Inter', system-ui, -apple-system,
               'Segoe UI', Roboto, Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

/* Never touch icon fonts (Bootstrap Icons) — keep their glyph font. */
.bi, [class^="bi-"], [class*=" bi-"], .bi::before,
[class^="bi-"]::before, [class*=" bi-"]::before {
  font-family: "bootstrap-icons" !important;
}

body {
  background: var(--body-bg) !important;
  color: var(--text-primary) !important;
  font-size: 1rem !important;        /* ~17px */
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
}

/* Comfortable, consistent heading sizes */
h1, .page-header h1 { font-size: 1.6rem !important;  line-height: 1.3 !important; font-weight: 700 !important; color: var(--text-primary) !important; }
h2 { font-size: 1.4rem !important;  line-height: 1.3 !important; font-weight: 700 !important; }
h3 { font-size: 1.2rem !important;  font-weight: 700 !important; }
h4 { font-size: 1.08rem !important; font-weight: 700 !important; }
p, label, li { font-size: 1rem !important; }
small, .small, .text-muted { font-size: 0.9rem !important; }

/* Kill tiny unreadable sizes app-wide: enforce a sensible minimum */
.page-header p,
.ra-user-details .ra-user-name,
.ra-user-details .ra-user-role,
.ra-fullmenu-section-title,
.ra-tab,
.badge { font-size: 0.85rem !important; }

/* Numbers: even, column-aligned figures for money tables & totals */
.ra-table td, .ra-table th, table.table td, table.table th,
.ra-stat-card, .summary-card, .summary-value, .stat-value,
input, .form-control, .badge {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
}

/* ---------- 3. Tables: the core of this app ---------- */
.ra-table, table.table, .table {
  font-size: 0.98rem !important;
  color: var(--text-primary) !important;
  background: #ffffff !important;
}
.ra-table th, table.table th, .table th,
.ra-table thead th {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  background: #eef4ff !important;
  border-bottom: 2px solid #c7dafe !important;
  letter-spacing: 0.01em !important;
}
.ra-table td, table.table td, .table td {
  color: #1f2937 !important;
  border-color: #eef2f7 !important;
  vertical-align: middle !important;
}
.ra-table tbody tr:hover td,
table.table tbody tr:hover td { background: #f5f9ff !important; }

/* Keep action buttons on ONE line, and let a too-wide table scroll
   sideways instead of cramming the last column (fixes "Pay" wrapping). */
.table-responsive, .ra-table-wrapper, .table-wrapper {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.btn-pay, .ra-table td .btn, .ra-table td a.btn-pay,
.ra-table td[data-label="Action"], .ra-table td:last-child {
  white-space: nowrap !important;
}

/* Short value cells (dates, money, phone, month) must never wrap */
.ra-table td[data-label="Date"],
.ra-table td[data-label="Amount"],
.ra-table td[data-label="Interest"],
.ra-table td[data-label="Principal"],
.ra-table td[data-label="Loan Paid"],
.ra-table td[data-label="Interest Paid"],
.ra-table td[data-label="Total"],
.ra-table td[data-label="Loan Outstanding"],
.ra-table td[data-label="Interest Outstanding"],
.ra-table td[data-label="Total Outstanding"],
.ra-table td[data-label="Month"],
.ra-table td[data-label="Phone"] {
  white-space: nowrap !important;
}

/* Neutralize Bootstrap's pink <code> chips used for dates / transaction ids */
.ra-table code, .ra-table td code {
  color: #475569 !important;
  background: #f1f5f9 !important;
  border: 1px solid #e6ebf2 !important;
  padding: 0.12rem 0.45rem !important;
  border-radius: 6px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  white-space: nowrap !important;
}

/* Tighter, less cavernous rows */
.ra-table tbody td {
  padding: 0.5rem 0.8rem !important;
  line-height: 1.35 !important;
}
.ra-table thead th { padding: 0.6rem 0.8rem !important; }

/* Desktop polish: keep the long transaction id on one line */
@media (min-width: 768px) {
  .ra-table td[data-label="Transaction ID"],
  .ra-table td[data-label="Transaction #"] { white-space: nowrap !important; }
}

/* ---------- 4. Cards & surfaces ---------- */
.ra-card, .ra-stat-card, .summary-card, .card,
.filter-section, .ra-table-wrapper, .mobile-cards .mobile-card {
  background: #ffffff !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--card-shadow) !important;
}

/* ---------- 5. Sidebar (light) ---------- */
.ra-sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: 2px 0 16px rgba(15,23,42,0.04) !important;
}
.ra-sidebar-brand {
  background: #f8fafc !important;
  border-bottom: 1px solid #e9eef5 !important;
}
.ra-sidebar-brand-text h1 {
  background: none !important;
  -webkit-text-fill-color: #1d4ed8 !important;
  color: #1d4ed8 !important;
  font-size: 1.2rem !important;
}
.ra-sidebar-brand-text span { color: #2563eb !important; }
.ra-sidebar-brand img {
  box-shadow: 0 0 0 2px #dbe6ff !important;
  border: 2px solid #c7dafe !important;
}

.ra-nav-link {
  color: #334155 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}
.ra-nav-link:hover { background: #eef4ff !important; color: #1d4ed8 !important; }
.ra-nav-link.active {
  background: #e0ecff !important;
  color: #1d4ed8 !important;
  border-left: 3px solid #1d4ed8 !important;
  font-weight: 700 !important;
}
.ra-nav-link .ra-nav-icon { opacity: 0.9 !important; color: #2563eb !important; }
.ra-nav-link.active .ra-nav-icon { color: #1d4ed8 !important; opacity: 1 !important; }
.ra-submenu .ra-nav-link { color: #475569 !important; font-size: 0.9rem !important; font-weight: 500 !important; }
.ra-submenu .ra-nav-link.active { color: #1d4ed8 !important; background: #eef4ff !important; font-weight: 700 !important; }
.ra-submenu .ra-nav-link::before { background: #94a3b8 !important; }
.ra-submenu .ra-nav-link:hover::before,
.ra-submenu .ra-nav-link.active::before { background: #1d4ed8 !important; }

.ra-sidebar-footer {
  background: #f8fafc !important;
  border-top: 1px solid #e9eef5 !important;
}
.ra-user-details .ra-user-name { color: #0f172a !important; font-size: 0.9rem !important; }
.ra-user-details .ra-user-role { color: #2563eb !important; font-size: 0.78rem !important; }
.ra-logout-btn { color: #475569 !important; background: #eef2f7 !important; }
.ra-logout-btn:hover { background: #fee2e2 !important; color: #dc2626 !important; }

/* Topbar */
.ra-topbar {
  background: rgba(255,255,255,0.92) !important;
  border-bottom: 1px solid #e6ebf2 !important;
}
.ra-topbar-toggle { color: #1d4ed8 !important; }

/* ---------- 6. Buttons ---------- */
.btn-ra-primary, .btn-primary {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
.btn-ra-primary:hover, .btn-primary:hover { background: #1e40af !important; border-color: #1e40af !important; }
.btn-ra-secondary, .btn-secondary {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-weight: 600 !important;
}
.btn-ra-secondary:hover, .btn-secondary:hover { background: #f1f5f9 !important; }
.btn-ra-success, .btn-success { background: #15803d !important; border-color: #15803d !important; color:#fff !important; font-weight:700 !important; }
.btn-ra-success:hover, .btn-success:hover { background: #166534 !important; }
.btn-ra-danger, .btn-danger { background: #dc2626 !important; border-color:#dc2626 !important; color:#fff !important; font-weight:700 !important; }
.btn-ra-danger:hover, .btn-danger:hover { background: #b91c1c !important; }
.btn { border-radius: 0.6rem !important; }

/* Unify the page-specific "Pay" action button with the standard primary button
   so action buttons look identical on every page (Reports, Ledger, etc.) */
.btn-pay {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0.6rem !important;
  padding: 0.5rem 1rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.btn-pay:hover { background: #1e40af !important; transform: none !important; box-shadow: none !important; }

/* Borrower-name links in tables: consistent blue across all pages */
.action-link {
  color: #1d4ed8 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.action-link:hover { text-decoration: underline !important; }

/* ---------- 7. Forms / inputs ---------- */
.form-control, .form-select, input, select, textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  font-size: 1rem !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #94a3b8 !important; }
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15) !important;
  background: #ffffff !important;
  color: #0f172a !important;
}
.form-label, label { color: #334155 !important; font-weight: 600 !important; }

/* Select2 widgets used on several pages */
.select2-container--default .select2-selection--single {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  height: auto !important;
  min-height: 2.6rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #0f172a !important; line-height: 2.4rem !important; font-size: 1rem !important;
}
.select2-dropdown { border-color: #cbd5e1 !important; }
.select2-results__option { font-size: 1rem !important; color:#0f172a !important; }
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] { background:#1d4ed8 !important; color:#ffffff !important; }
.select2-container--default .select2-results__option[aria-selected=true] { background:#e0ecff !important; color:#1d4ed8 !important; }

/* ---------- 8. Badges & misc ---------- */
.badge { font-weight: 700 !important; }
.page-header h1 { color: #0f172a !important; }
.page-header p { color: #475569 !important; }
a { color: #1d4ed8; }
a:hover { color: #1e40af; }

/* Mobile bottom tab bar */
.ra-bottombar { background:#ffffff !important; border-top:1px solid #e6ebf2 !important; }
.ra-tab { color:#64748b !important; }
.ra-tab.active { color:#1d4ed8 !important; }

/* ============================================================
   9. LOGIN PAGE (index.php) — convert dark card to bright
   ============================================================ */
body.ra-login, /* in case a class is added later */
.login-card,
.login-container {
  /* handled by specific rules below */
}

/* The login page sets a dark gradient on <body>; brighten it. */
.login-container {
  background: transparent !important;
}
.login-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 18px 50px rgba(15,23,42,0.12) !important;
  color: #0f172a !important;
}
.login-card h2 {
  background: none !important;
  -webkit-text-fill-color: #0f172a !important;
  color: #0f172a !important;
}
.login-card p { color: #475569 !important; }
.login-card .form-label, .login-card .form-label { color: #334155 !important; }
.login-card .form-control {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}
.login-card .form-control::placeholder { color: #94a3b8 !important; }
.login-card .form-control:focus {
  background: #ffffff !important;
  border-color: #2563eb !important;
  color: #0f172a !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.15) !important;
}
.toggle-password { color: #64748b !important; }
.btn-login {
  background: linear-gradient(135deg,#2563eb,#1d4ed8) !important;
  box-shadow: 0 8px 20px rgba(29,78,216,0.25) !important;
}
.btn-login:hover { background: linear-gradient(135deg,#1d4ed8,#1e40af) !important; }
.remember-me span { color: #475569 !important; }
.quick-login-card {
  background: #f1f6ff !important;
  border: 1.5px solid #c7dafe !important;
}
.quick-login-name { color: #0f172a !important; }
.quick-login-label { color: #64748b !important; }
.quick-login-divider { color: #94a3b8 !important; }
.quick-login-divider::before, .quick-login-divider::after { background: #e2e8f0 !important; }
.btn-forget-me { color: #94a3b8 !important; }

/* Brighten any full-screen dark body gradients used on auth/landing pages.
   Scoped to the login card's presence via the container so app pages
   (which already use --body-bg) are unaffected. */