/* ============================================================
   BEMENOS SMART LOANS — Master Stylesheet  v2.0
   static/css/bemenos.css
   ============================================================
   CUSTOMISE HERE — all tokens are at the top in :root.
   Change a token, every page updates automatically.
   ============================================================

   SECTIONS
   1.  Design Tokens  ← EDIT HERE to retheme
   2.  Reset & Base
   3.  Background & Layout
   4.  Cards (.card, .card-bordered, .card-navy, .card-gold)
   5.  Buttons (.btn-primary, .btn-gold, .btn-outline, .btn-sm)
   6.  Form Inputs
   7.  Status Badges
   8.  Navigation (.nav-top, .nav-item)
   9.  Step Progress
   10. Data Tables
   11. Progress Bar
   12. Drop Zone
   13. Chips & Labels
   14. Toasts
   15. Spinner
   16. Scrollbar
   17. Animations
   ============================================================ */


/* ── 1. DESIGN TOKENS ─────────────────────────────────────────
   These 20 lines control the entire visual language.
   ─────────────────────────────────────────────────────────── */
:root {
  /* Primary brand — deep navy */
  --brand:          #1B3A6B;
  --brand-mid:      #2C5282;
  --brand-hover:    #15325C;
  --brand-light:    #E8EFFA;   /* tinted bg for chips, section headers */
  --brand-border:   #C3D4EF;   /* visible navy border */

  /* Accent — warm gold */
  --gold:           #9A6F0A;
  --gold-mid:       #C49010;
  --gold-light:     #FDF3DC;
  --gold-border:    #E8C97A;

  /* Surfaces */
  --surface:        #F0F4FA;   /* page background — distinctly off-white/blue-grey */
  --surface-alt:    #E8EFF8;   /* alternate section — clearly different from cards */
  --card-bg:        #FFFFFF;   /* card / panel white */

  /* Borders — intentionally visible */
  --border:         #C8D7ED;   /* default border — clearly visible */
  --border-strong:  #A0B8D8;   /* stronger border for emphasis */

  /* Text */
  --ink:            #0F1E3C;   /* primary — near-black navy */
  --ink-mid:        #2E456B;   /* secondary */
  --ink-muted:      #6B82A8;   /* placeholder / helper text */
  --ink-light:      #9EB0C8;   /* very muted */

  /* Semantic colours */
  --green:          #1A7A45;
  --green-bg:       #EDFAF3;
  --green-border:   #A8DFC1;
  --red:            #B01C1C;
  --red-bg:         #FEF0F0;
  --red-border:     #F5BEBE;
  --amber:          #92650A;
  --amber-bg:       #FEF9EC;
  --amber-border:   #F5DFA0;
  --purple:         #4A27B8;
  --purple-bg:      #F0EEFF;
  --purple-border:  #C9BFEF;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(27,58,107,0.07);
  --shadow-sm:  0 1px 4px rgba(27,58,107,0.09), 0 0 0 1px rgba(27,58,107,0.06);
  --shadow-md:  0 4px 16px rgba(27,58,107,0.12), 0 0 0 1px rgba(27,58,107,0.07);
  --shadow-lg:  0 12px 40px rgba(27,58,107,0.15), 0 0 0 1px rgba(27,58,107,0.08);
  --shadow-btn: 0 3px 12px rgba(27,58,107,0.30);

  /* Shape */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
}


/* ── 2. RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background:  var(--surface);
  color:       var(--ink);
  min-height:  100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5 {
  font-family: var(--font-display);
  color:       var(--ink);
  line-height: 1.2;
}

a { color: inherit; text-decoration: none; }
::selection { background: rgba(27,58,107,0.12); color: var(--ink); }
.font-display { font-family: var(--font-display) !important; }
.font-mono    { font-family: var(--font-mono) !important; }


/* ── 3. BACKGROUND & LAYOUT ──────────────────────────────────── */
.bg-mesh {
  background:
    radial-gradient(ellipse 80% 50% at 5%   0%, rgba(27,58,107,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 95% 100%, rgba(27,58,107,0.05) 0%, transparent 55%),
    var(--surface);
  position: relative;
}

/* Subtle dot grid — depth without distraction */
.bg-mesh::before {
  content: '';
  position: fixed; inset: 0;
  background-image: radial-gradient(circle, rgba(27,58,107,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
  z-index: 0;
}
.bg-mesh > * { position: relative; z-index: 1; }


/* ── 4. CARDS ─────────────────────────────────────────────────── */

/* Standard white card */
.card {
  background:   var(--card-bg);
  border:       1.5px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow:   var(--shadow-sm);
}

/* Card with strong navy left accent border */
.card-navy {
  background:   var(--card-bg);
  border:       1.5px solid var(--brand-border);
  border-left:  4px solid var(--brand);
  border-radius: var(--radius-xl);
  box-shadow:   var(--shadow-sm);
}

/* Card with gold accent */
.card-gold {
  background:   var(--gold-light);
  border:       1.5px solid var(--gold-border);
  border-radius: var(--radius-xl);
  box-shadow:   var(--shadow-sm);
}

/* Card with green accent */
.card-green {
  background:   var(--green-bg);
  border:       1.5px solid var(--green-border);
  border-radius: var(--radius-xl);
  box-shadow:   var(--shadow-sm);
}

/* Card with red accent */
.card-red {
  background:   var(--red-bg);
  border:       1.5px solid var(--red-border);
  border-radius: var(--radius-xl);
  box-shadow:   var(--shadow-sm);
}

/* Card section header strip */
.card-header {
  padding:       1rem 1.25rem;
  border-bottom: 1.5px solid var(--border);
  background:    var(--brand-light);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  font-family:   var(--font-body);
  font-size:     0.72rem;
  font-weight:   700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:         var(--brand);
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
}

/* Hover transition */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card-hover:hover {
  transform:    translateY(-2px);
  box-shadow:   var(--shadow-md);
  border-color: var(--brand-border);
}

/* Legacy aliases used in old templates */
.glass        { background: var(--card-bg); border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); }
.glass-strong { background: var(--card-bg); border: 1.5px solid var(--border); box-shadow: var(--shadow-md); }
.glass-hover:hover { border-color: var(--brand-border); box-shadow: var(--shadow-md); transition: all 0.2s ease; }
.stat-card { background: var(--card-bg); border: 1.5px solid var(--border); border-radius: var(--radius-xl); padding: 1.25rem; box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }


/* ── 5. BUTTONS ───────────────────────────────────────────────── */

/* Primary — navy gradient */
.btn-primary, .neon-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  background:      linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%);
  color:           #FFFFFF !important;
  font-family:     var(--font-body);
  font-weight:     700;
  font-size:       0.9rem;
  letter-spacing:  0.01em;
  border:          none;
  border-radius:   var(--radius-md);
  cursor:          pointer;
  transition:      all 0.22s ease;
  text-decoration: none;
  position:        relative;
  overflow:        hidden;
}
.btn-primary:hover, .neon-btn:hover {
  background: linear-gradient(135deg, var(--brand-hover) 0%, var(--brand) 100%);
  box-shadow: var(--shadow-btn);
  transform:  translateY(-1px);
  color:      #FFFFFF !important;
}

/* Gold accent button */
.btn-gold, .gold-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  background:      linear-gradient(135deg, var(--gold) 0%, var(--gold-mid) 100%);
  color:           #FFFFFF !important;
  font-family:     var(--font-body);
  font-weight:     700;
  font-size:       0.9rem;
  border:          none;
  border-radius:   var(--radius-md);
  cursor:          pointer;
  transition:      all 0.22s ease;
  text-decoration: none;
}
.btn-gold:hover, .gold-btn:hover {
  box-shadow: 0 6px 20px rgba(154,111,10,0.35);
  transform:  translateY(-1px);
  color:      #FFFFFF !important;
}

/* Outline button */
.btn-outline {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  background:      var(--card-bg);
  color:           var(--ink-mid);
  font-family:     var(--font-body);
  font-weight:     600;
  font-size:       0.9rem;
  border:          1.5px solid var(--border-strong);
  border-radius:   var(--radius-md);
  cursor:          pointer;
  transition:      all 0.22s ease;
  text-decoration: none;
}
.btn-outline:hover {
  border-color: var(--brand);
  color:        var(--brand);
  background:   var(--brand-light);
}

/* Small secondary button */
.btn-sm, .neon-btn-sm {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.375rem;
  background:      var(--brand-light);
  color:           var(--brand);
  font-family:     var(--font-body);
  font-weight:     600;
  font-size:       0.8rem;
  border:          1.5px solid var(--brand-border);
  border-radius:   var(--radius-sm);
  padding:         0.35rem 0.875rem;
  cursor:          pointer;
  transition:      all 0.18s ease;
  text-decoration: none;
}
.btn-sm:hover, .neon-btn-sm:hover {
  background:   var(--brand);
  color:        #FFFFFF;
  border-color: var(--brand);
}


/* ── 6. FORM INPUTS ───────────────────────────────────────────── */
.form-input {
  width:         100%;
  background:    var(--card-bg);
  border:        1.5px solid var(--border);
  color:         var(--ink);
  font-family:   var(--font-body);
  font-size:     0.9rem;
  padding:       0.7rem 1rem;
  border-radius: var(--radius-sm);
  transition:    border-color 0.18s ease, box-shadow 0.18s ease;
  appearance:    none;
  -webkit-appearance: none;
}
.form-input:focus {
  outline:      none;
  border-color: var(--brand);
  box-shadow:   0 0 0 3px rgba(27,58,107,0.10);
}
.form-input::placeholder { color: var(--ink-light); font-size: 0.875rem; }
select.form-input option { background: var(--card-bg); color: var(--ink); }
textarea.form-input { line-height: 1.6; resize: vertical; }

/* Label style */
.field-label {
  display:        block;
  font-family:    var(--font-body);
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--ink-mid);
  margin-bottom:  0.5rem;
}

/* Radio card — employment type etc. */
.radio-card {
  display:       flex;
  align-items:   center;
  gap:           0.625rem;
  padding:       0.75rem 1rem;
  background:    var(--card-bg);
  border:        1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor:        pointer;
  transition:    all 0.18s ease;
}
.radio-card:hover { border-color: var(--brand-border); background: var(--brand-light); }
.radio-card.selected {
  border-color: var(--brand);
  background:   var(--brand-light);
  box-shadow:   0 0 0 2px rgba(27,58,107,0.12);
}
.radio-card input[type="radio"] { accent-color: var(--brand); width: 16px; height: 16px; }


/* ── 7. STATUS BADGES ─────────────────────────────────────────── */
.badge {
  display:        inline-flex;
  align-items:    center;
  padding:        0.2rem 0.7rem;
  border-radius:  var(--radius-full);
  font-family:    var(--font-body);
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space:    nowrap;
  border:         1.5px solid;
}
.badge-draft              { background: #F1F4F8; color: #4A5B7A; border-color: #C5D0E0; }
.badge-submitted          { background: var(--brand-light); color: var(--brand); border-color: var(--brand-border); }
.badge-under_review       { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-border); }
.badge-documents_pending  { background: #FFF4EC; color: #BF5A0A; border-color: #F5CEAB; }
.badge-approved           { background: var(--green-bg); color: var(--green); border-color: var(--green-border); }
.badge-rejected           { background: var(--red-bg); color: var(--red); border-color: var(--red-border); }
.badge-bank_submitted     { background: var(--purple-bg); color: var(--purple); border-color: var(--purple-border); }
.badge-disbursed          { background: #EAFAF5; color: #157252; border-color: #A0DDBE; }
.badge-legal_verification { background: #F5EEFF; color: #7020C8; border-color: #D8B8F5; }
.badge-ai_verification    { background: var(--brand-light); color: var(--brand); border-color: var(--brand-border); }
.badge-sanctioned         { background: var(--green-bg); color: var(--green); border-color: var(--green-border); }


/* ── 8. NAVIGATION ─────────────────────────────────────────────── */

/* Top nav bar */
.nav-top {
  background:    var(--card-bg);
  border-bottom: 1.5px solid var(--border);
  box-shadow:    var(--shadow-xs);
  position:      sticky;
  top:           0;
  z-index:       40;
}

/* Nav link item */
.nav-item {
  display:         flex;
  align-items:     center;
  gap:             0.5rem;
  padding:         0.45rem 0.875rem;
  border-radius:   var(--radius-sm);
  color:           var(--ink-muted);
  font-family:     var(--font-body);
  font-size:       0.875rem;
  font-weight:     500;
  text-decoration: none;
  transition:      all 0.18s ease;
  border:          1.5px solid transparent;
}
.nav-item:hover { background: var(--brand-light); color: var(--brand); }
.nav-item.active {
  background:   var(--brand-light);
  color:        var(--brand);
  font-weight:  700;
  border-color: var(--brand-border);
}


/* ── 9. STEP PROGRESS ─────────────────────────────────────────── */
.step-line        { flex: 1; height: 2px; background: var(--border); }
.step-line.active { background: linear-gradient(90deg, var(--brand), var(--brand-mid)); }

.step-dot {
  width:         2.25rem; height: 2.25rem;
  border-radius: 50%;
  border:        2.5px solid var(--border);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-weight:   700;
  font-size:     0.85rem;
  color:         var(--ink-muted);
  background:    var(--card-bg);
  transition:    all 0.25s ease;
  flex-shrink:   0;
}
.step-dot.done   { background: var(--brand); border-color: var(--brand); color: #fff; }
.step-dot.active { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }


/* ── 10. DATA TABLES ──────────────────────────────────────────── */
.data-table th {
  font-family:    var(--font-body);
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--ink-muted);
  padding:        0.875rem 1rem;
  border-bottom:  1.5px solid var(--border);
  background:     var(--brand-light);
  white-space:    nowrap;
}
.data-table td {
  padding:       0.875rem 1rem;
  border-bottom: 1px solid #EDF1F9;
  font-size:     0.875rem;
  color:         var(--ink-mid);
}
.data-table tr:hover td  { background: #F5F8FE; }
.data-table tr:last-child td { border-bottom: none; }


/* ── 11. PROGRESS BAR ─────────────────────────────────────────── */
.progress-bar {
  height:        6px;
  border-radius: var(--radius-full);
  overflow:      hidden;
  background:    var(--brand-light);
  border:        1px solid var(--brand-border);
}
.progress-fill {
  height:     100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--brand), var(--brand-mid));
  transition: width 0.7s ease;
}


/* ── 12. DROP ZONE ────────────────────────────────────────────── */
.drop-zone {
  border:        2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  cursor:        pointer;
  transition:    all 0.22s ease;
}
.drop-zone:hover, .drop-zone.dragover {
  border-color: var(--brand);
  background:   var(--brand-light);
}


/* ── 13. CHIPS & LABELS ───────────────────────────────────────── */
.chip {
  display:        inline-flex;
  align-items:    center;
  gap:            0.375rem;
  padding:        0.25rem 0.875rem;
  background:     var(--brand-light);
  border:         1.5px solid var(--brand-border);
  border-radius:  var(--radius-full);
  font-family:    var(--font-body);
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--brand);
}
.chip-gold {
  background:   var(--gold-light);
  border-color: var(--gold-border);
  color:        var(--gold);
}
.chip-green {
  background:   var(--green-bg);
  border-color: var(--green-border);
  color:        var(--green);
}

.section-label {
  font-family:    var(--font-body);
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--brand);
}


/* ── 14. TOASTS ───────────────────────────────────────────────── */

#toast-container {
  position:       fixed;
  top:            1.25rem;
  left:           50%;
  transform:      translateX(-50%);
  z-index:        9999;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.5rem;
  pointer-events: none;
  width:          calc(100% - 2rem);
  max-width:      380px;
}
.toast {
  padding:        0.875rem 1.25rem;
  border-radius:  var(--radius-lg);
  font-family:    var(--font-body);
  font-size:      0.875rem;
  font-weight:    500;
  width:          100%;
  box-shadow:     var(--shadow-lg);
  border:         1.5px solid;
  pointer-events: all;
  animation:      slideUp 0.3s ease-out;
  text-align:     center;
}

.toast-success { background: var(--green-bg); border-color: var(--green-border); color: var(--green); }
.toast-error   { background: var(--red-bg);   border-color: var(--red-border);   color: var(--red); }
.toast-info    { background: var(--green-bg); border-color: var(--green-border); color: var(--green); }


/* ── 15. SPINNER ──────────────────────────────────────────────── */
.spinner {
  width:  20px; height: 20px;
  border: 2.5px solid var(--brand-light);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}


/* ── 16. SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar         { width: 5px; height: 5px; }
::-webkit-scrollbar-track   { background: var(--surface-alt); }
::-webkit-scrollbar-thumb   { background: var(--brand-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-mid); }


/* ── 17. ANIMATIONS ───────────────────────────────────────────── */
@keyframes slideUp {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}

.shimmer-line {
  background:      linear-gradient(90deg, #EEF3FA 25%, #DDE8F5 50%, #EEF3FA 75%);
  background-size: 200% 100%;
  animation:       shimmer 1.5s linear infinite;
  border-radius:   4px;
}

/* Utility aliases */
.neon-text   { color: var(--brand); font-weight: 700; }
.divider     { height: 1px; background: var(--border); }
.gradient-border { position: relative; }


/* ── FLOATING BOTTOM NAV ──────────────────────────────────────
   Visible on landing page, login, and register pages only.
   Controlled by adding class  .has-float-nav  to <body>.
   ─────────────────────────────────────────────────────────── */

/* Push page content up so last section isn't hidden behind bar */
body.has-float-nav {
  padding-bottom: 88px;
}

/* The bar itself */
.float-nav {
  position:        fixed;
  bottom:          20px;
  left:            50%;
  transform:       translateX(-50%);
  z-index:         1000;
  display:         flex;
  align-items:     center;
  gap:             4px;
  padding:         6px;
  background:      var(--card);
  border:          1.5px solid var(--brand-border);
  border-radius:   var(--radius-full);
  box-shadow:      0 8px 32px rgba(27,58,107,0.18), 0 2px 8px rgba(27,58,107,0.10);
  /* Entrance animation */
  animation:       floatNavIn 0.45s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes floatNavIn {
  from { opacity: 0; transform: translateX(-50%) translateY(24px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Individual nav button */
.float-nav-btn {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             3px;
  padding:         9px 18px;
  border-radius:   var(--radius-full);
  cursor:          pointer;
  transition:      all 0.2s ease;
  text-decoration: none;
  border:          1.5px solid transparent;
  background:      transparent;
  min-width:       68px;
}

.float-nav-btn svg {
  width:  18px;
  height: 18px;
  stroke: var(--ink-muted);
  transition: stroke 0.2s ease;
  flex-shrink: 0;
}

.float-nav-btn span {
  font-family:    var(--font-body);
  font-size:      0.65rem;
  font-weight:    600;
  letter-spacing: 0.04em;
  color:          var(--ink-muted);
  transition:     color 0.2s ease;
  white-space:    nowrap;
}

/* Hover state */
.float-nav-btn:hover {
  background:   var(--brand-light);
  border-color: var(--brand-border);
}
.float-nav-btn:hover svg  { stroke: var(--brand); }
.float-nav-btn:hover span { color:  var(--brand); }

/* Active / current page state */
.float-nav-btn.active {
  background:   var(--brand);
  border-color: var(--brand);
}
.float-nav-btn.active svg  { stroke: #ffffff; }
.float-nav-btn.active span { color:  #ffffff; }

/* Separator dot between groups */
.float-nav-sep {
  width:         4px;
  height:        4px;
  border-radius: 50%;
  background:    var(--brand-border);
  flex-shrink:   0;
  margin:        0 2px;
}

/* Responsive: tighter on very small screens */
@media (max-width: 380px) {
  .float-nav-btn {
    padding:   8px 12px;
    min-width: 56px;
  }
  .float-nav-btn span { font-size: 0.6rem; }
}