/* ==========================================================================
   Barq Bank — Stylesheet
   Design tokens (light/dark) + component styles
   ========================================================================== */

:root{
  --navy:#0B1F3A; --navy-2:#14315C; --emerald:#10B981; --emerald-dark:#0B815A;
  --gold:#D4A94C; --danger:#E2574C;
  --bg:#F3F6FA; --surface:#FFFFFF; --border:#E3E8EF; --text:#101828; --muted:#64748B;
  --sidebar-w:250px;
}
html[data-bs-theme="dark"]{
  --bg:#0A1220; --surface:#101B30; --border:#1F2C45; --text:#E7ECF5; --muted:#8B98B3;
}
*{ box-sizing:border-box; }
body{
  background:var(--bg); color:var(--text); font-family:'Inter',sans-serif;
  transition:background .25s ease,color .25s ease; min-height:100vh;
}
h1,h2,h3,h4,h5,.brand,.nav-link,.metric-label{ font-family:'Outfit',sans-serif; }
.mono{ font-family:'IBM Plex Mono',monospace; letter-spacing:.02em; }

/* Sidebar */
#sidebar{
  width:var(--sidebar-w); position:fixed; top:0; bottom:0; left:0; z-index:1030;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);
  display:flex; flex-direction:column; transition:transform .3s ease;
}
.brand{ color:#fff; font-weight:800; font-size:1.25rem; display:flex; align-items:center; gap:.55rem; padding:1.3rem 1.25rem 1rem; }
.brand-bolt{
  width:34px; height:34px; border-radius:9px; background:var(--gold);
  display:flex; align-items:center; justify-content:center; color:var(--navy); font-size:1.1rem; flex:none;
}
.side-nav{ flex:1; overflow-y:auto; padding:.5rem .75rem; }
.side-nav .nav-link{
  color:#C6D2E8; font-weight:500; font-size:.92rem; border-radius:10px; padding:.6rem .85rem;
  display:flex; align-items:center; gap:.7rem; margin-bottom:.15rem; transition:.15s;
}
.side-nav .nav-link i{ font-size:1.05rem; width:20px; text-align:center; }
.side-nav .nav-link:hover{ background:rgba(255,255,255,.08); color:#fff; }
.side-nav .nav-link.active{ background:var(--emerald); color:#06281c; font-weight:600; }
.side-foot{ padding:1rem 1.25rem 1.3rem; border-top:1px solid rgba(255,255,255,.1); color:#9FB0CB; font-size:.78rem; }

/* Main */
#main{ margin-left:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; }
#topbar{
  background:var(--surface); border-bottom:1px solid var(--border); padding:.75rem 1.5rem;
  display:flex; align-items:center; gap:1rem; position:sticky; top:0; z-index:1020;
}
#topbar .view-title{ font-weight:700; font-size:1.15rem; margin:0; }
.theme-switch-wrap{ display:flex; align-items:center; gap:.5rem; margin-left:auto; }
.form-check-input#themeToggle{ width:2.6em; height:1.4em; cursor:pointer; }
.avatar-chip{
  width:38px; height:38px; border-radius:50%; background:var(--emerald); color:#062; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
}
#content{ padding:1.5rem; flex:1; }
.view{ display:none; }
.view.active{ display:block; animation:fadeIn .25s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; }
.card-soft{ box-shadow:0 1px 2px rgba(16,24,40,.04); }
.stat-card{ border-left:4px solid var(--emerald); }
.ledger-strip{
  height:4px; width:52px; border-radius:4px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 8px, transparent 8px 12px);
}
.balance{ font-size:1.7rem; font-weight:600; }
.text-muted-soft{ color:var(--muted) !important; }

.bank-card{
  border-radius:16px; padding:1.25rem; color:#fff; position:relative; overflow:hidden; min-height:170px;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 60%,#1B4A7A 100%);
}
.bank-card.card-gold{ background:linear-gradient(135deg,#3a2f12,#6b4e1a 55%,#D4A94C 130%); }
.bank-card .chip{ width:38px; height:28px; border-radius:6px; background:linear-gradient(135deg,#e9d68b,#c9a441); }
.bank-card .card-num{ font-size:1.15rem; letter-spacing:.12em; margin-top:1.1rem; }
.bank-card .card-frozen-overlay{
  position:absolute; inset:0; background:rgba(10,18,32,.55); backdrop-filter:blur(1px);
  display:flex; align-items:center; justify-content:center; font-weight:600; color:#fff;
}

.badge-status-completed{ background:rgba(16,185,129,.15); color:var(--emerald-dark); }
html[data-bs-theme="dark"] .badge-status-completed{ color:#5fe3b3; }
.badge-status-pending{ background:rgba(212,169,76,.18); color:#8a6a1f; }
html[data-bs-theme="dark"] .badge-status-pending{ color:var(--gold); }
.badge-status-failed{ background:rgba(226,87,76,.15); color:var(--danger); }

.table thead th{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); border-bottom:1px solid var(--border); font-weight:600; }
.table td, .table th{ border-color:var(--border); vertical-align:middle; }

.quick-action{
  border:1px solid var(--border); border-radius:14px; padding:1rem .75rem; text-align:center; background:var(--surface);
  cursor:pointer; transition:.15s;
}
.quick-action:hover{ border-color:var(--emerald); transform:translateY(-2px); }
.quick-action i{ font-size:1.4rem; color:var(--emerald-dark); }
html[data-bs-theme="dark"] .quick-action i{ color:var(--emerald); }

.form-control, .form-select{ background:var(--bg); border:1px solid var(--border); color:var(--text); }
.form-control:focus, .form-select:focus{ background:var(--bg); color:var(--text); border-color:var(--emerald); box-shadow:0 0 0 .2rem rgba(16,185,129,.15); }
.btn-emerald{ background:var(--emerald); border-color:var(--emerald); color:#062; font-weight:600; }
.btn-emerald:hover{ background:var(--emerald-dark); border-color:var(--emerald-dark); color:#fff; }
.btn-outline-navy{ border-color:var(--navy-2); color:var(--navy-2); }
html[data-bs-theme="dark"] .btn-outline-navy{ border-color:#7C93BE; color:#C6D2E8; }

.nav-tabs .nav-link{ color:var(--muted); border:none; font-weight:600; }
.nav-tabs .nav-link.active{ color:var(--emerald-dark); background:transparent; border-bottom:2px solid var(--emerald); }
html[data-bs-theme="dark"] .nav-tabs .nav-link.active{ color:var(--emerald); }

.section-eyebrow{ text-transform:uppercase; font-size:.72rem; letter-spacing:.08em; color:var(--emerald-dark); font-weight:700; }
html[data-bs-theme="dark"] .section-eyebrow{ color:var(--emerald); }

.progress{ background:var(--border); }
.list-group-item{ background:var(--surface); border-color:var(--border); color:var(--text); }

#sidebarToggle{ display:none; }
@media (max-width: 991.98px){
  #sidebar{ transform:translateX(-100%); }
  #sidebar.show{ transform:translateX(0); }
  #main{ margin-left:0; }
  #sidebarToggle{ display:inline-flex; }
}
.support-bubble{ background:var(--bg); border-radius:12px; padding:.7rem 1rem; max-width:80%; }
.support-bubble.me{ background:var(--emerald); color:#062; margin-left:auto; }