/* ============================================================
   Western Alliance Bank — Custom CSS (Phase 3 Midnight Edition)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg-app: #f8fafc;
  --bg-card: #ffffff;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border-main: #f1f5f9;
  --sidebar-active: rgba(255,255,255,.08);
}

.dark {
  --bg-app: #020617;
  --bg-card: #0f172a;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --border-main: #1e293b;
  --sidebar-active: rgba(59,130,246,.15);
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', sans-serif; -webkit-font-smoothing: antialiased; color: var(--text-main); background: var(--bg-app); transition: background-color .3s, color .3s; }
h1,h2,h3,h4,h5,h6 { font-family: 'Outfit', sans-serif; }
a { text-decoration: none; color: inherit; }
button { font-family: 'Plus Jakarta Sans', sans-serif; cursor: pointer; border: none; }
input, select, textarea { font-family: 'Plus Jakarta Sans', sans-serif; outline: none; }

/* ── Animations ─────────────────────────────────────────── */
@keyframes fadeInUp   { from { opacity:0; transform:translateY(20px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeInLeft { from { opacity:0; transform:translateX(-20px) } to { opacity:1; transform:translateX(0) } }
@keyframes scaleIn    { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }

.anim-fade-up    { animation: fadeInUp    .5s cubic-bezier(.16,1,.3,1) both; }
.anim-fade-left  { animation: fadeInLeft  .5s cubic-bezier(.16,1,.3,1) both; }
.anim-scale-in   { animation: scaleIn     .4s cubic-bezier(.16,1,.3,1) both; }

.d1 { animation-delay:.05s } .d2 { animation-delay:.1s }
.d3 { animation-delay:.15s } .d4 { animation-delay:.2s }
.d5 { animation-delay:.25s } .d6 { animation-delay:.3s }

/* ── Gradients & Surfaces ───────────────────────────────── */
.hero-bg {
  background: radial-gradient(ellipse at 70% 20%, rgba(37,99,235,.08) 0%, transparent 60%),
              linear-gradient(160deg, #071c33 0%, #0a1628 45%, #0d1e40 100%);
}
.card-gradient  { background: linear-gradient(135deg,#071c33,#1e3a8a 55%,#1d4ed8); }
.green-gradient { background: linear-gradient(135deg,#059669,#10b981); }
.purple-gradient{ background: linear-gradient(135deg,#6d28d9,#8b5cf6); }
.orange-gradient{ background: linear-gradient(135deg,#b45309,#f59e0b); }
.blue-gradient  { background: linear-gradient(135deg,#1d4ed8,#2563eb); }

/* ── Virtual Card ───────────────────────────────────────── */
.virtual-card {
  background: linear-gradient(135deg,#1e3a8a 0%,#2563eb 55%,#7c3aed 100%);
  border-radius: 20px; position: relative; overflow: hidden;
  box-shadow: 0 20px 40px rgba(37,99,235,.2);
  padding: 24px; color: white; min-height: 180px;
  user-select: none; transition: transform .3s;
}
.virtual-card::before { content:''; position:absolute; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.05); top:-70px; right:-50px; }
.chip { width:38px; height:28px; border-radius:4px; background:linear-gradient(135deg,#d97706,#fbbf24); }

/* ── Sidebar ─────────────────────────────────────────────── */
#app-sidebar {
  width: 260px; background: #071c33; position: fixed;
  top:0; left:0; bottom:0; z-index:50;
  display:flex; flex-direction:column;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 8px 0 32px rgba(0,0,0,0.15);
}
.sidebar-inner { display:flex; flex-direction:column; height:100%; padding:24px 16px; }
.sidebar-logo  { display:flex; align-items:center; gap:12px; margin-bottom:32px; padding:0 8px; }
.logo-mark {
  width:36px; height:36px; border-radius:8px;
  background: white; color:#071c33;
  display:flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-weight:800; font-size:20px;
}
.logo-text { color:white; font-family:'Outfit',sans-serif; font-weight:700; font-size:20px; letter-spacing:-0.02em; }

.sidebar-nav { display:flex; flex-direction:column; gap:4px; flex:1; }
.nav-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:10px;
  color:rgba(255,255,255,.45); font-size:14px; font-weight:500;
  transition:all .2s; border-left:3px solid transparent;
}
.nav-item:hover { background:rgba(255,255,255,.05); color:white; }
.nav-item.active { background:var(--sidebar-active); color:white; border-left-color:#3b82f6; }

.sidebar-user {
  display:flex; align-items:center; gap:12px;
  padding:12px; background:rgba(255,255,255,.03);
  border-radius:12px; border:1px solid rgba(255,255,255,.05);
}
.user-avatar-sm {
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,#3b82f6,#7c3aed);
  color:white; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px;
}
.user-name  { color:white; font-size:13px; font-weight:600; }
.user-email { color:rgba(255,255,255,.4); font-size:11px; }

/* ── Topbar ──────────────────────────────────────────────── */
#app-topbar { background:var(--bg-card); border-bottom:1px solid var(--border-main); height:64px; position:sticky; top:0; z-index:40; }
.topbar-inner { display:flex; align-items:center; gap:16px; padding:0 24px; height:100%; }
.topbar-title { font-family:'Outfit',sans-serif; font-size:18px; font-weight:700; color:var(--text-main); flex:1; }
.icon-btn {
  background:none; color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  transition:all .2s; position:relative;
}
.icon-btn:hover { background:rgba(148,163,184,.1); color:var(--text-main); }
.notif-dot { position:absolute; top:8px; right:8px; width:7px; height:7px; background:#ef4444; border-radius:50%; border:1.5px solid var(--bg-card); }

/* ── Mobile ─────────────────────────────────────────────── */
.hamburger { display:none; background:none; color:var(--text-main); padding:8px; border-radius:10px; }

@media (max-width: 1024px) {
  #app-sidebar { transform:translateX(-100%); width:250px; }
  #app-sidebar.open { transform:translateX(0); }
  .app-main { margin-left:0 !important; }
  .hamburger { display:flex; }
  .topbar-inner { padding:0 16px; gap: 8px; }
  .logo-text.long { display: none; }
  .logo-text.short { display: block; }
}

@media (max-width: 640px) {
  .app-content { padding: 16px; }
  .card-gradient { padding: 24px !important; min-height: 160px !important; }
  #main-balance { font-size: 2.5rem !important; }
  .topbar-title { display: none; }
  .topbar-inner { justify-content: space-between; }
  .stat-card { padding: 16px; }
}

/* ── Layout ──────────────────────────────────────────────── */
.app-layout { display:flex; min-height:100vh; }
.app-main   { flex:1; margin-left:260px; display:flex; flex-direction:column; min-height:100vh; transition: margin-left .3s; }
.app-content{ flex:1; background:var(--bg-app); padding:28px; overflow-y:auto; transition: background .3s; }

/* ── Components ─────────────────────────────────────────── */
.stat-card {
  background:var(--bg-card); border-radius:16px; padding:20px;
  box-shadow:0 1px 2px rgba(0,0,0,.05); border:1px solid var(--border-main);
  transition:all .3s cubic-bezier(.4, 0, .2, 1);
}
.stat-card:hover { transform:translateY(-4px); box-shadow:0 12px 24px -10px rgba(0,0,0,0.15); border-color:#3b82f680; }
.stat-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; }

.quick-action {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:var(--bg-card); border-radius:16px; padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.05); border:1px solid var(--border-main);
  transition:all .2s; border-bottom:3px solid transparent;
}
.quick-action:hover { transform:translateY(-2px); border-bottom-color:#3b82f6; }
.quick-action-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:white; }
.quick-action span { color: var(--text-main); font-weight: 600; font-size: 12px; }

.tx-row { display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px; transition:all .15s; border-bottom:1px solid var(--border-main); }
.tx-row:hover { background:rgba(148,163,184,.05); }
.tx-icon { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tx-merchant { font-size:14px; font-weight:600; color:var(--text-main); }

.input-field {
  width:100%; padding:11px 14px; border:1.5px solid var(--border-main);
  border-radius:10px; font-size:14px; color:var(--text-main); transition:all .2s; background:var(--bg-card);
}
.input-field:focus { border-color:#3b82f6; box-shadow:0 0 0 4px rgba(59,130,246,.1); }
.input-label { font-size:13px; font-weight:600; color:var(--text-muted); margin-bottom:5px; display:block; }

.btn-primary {
  background:#071c33; color:white; padding:12px 24px; border-radius:12px;
  font-size:14px; font-weight:700; transition:all .2s cubic-bezier(.4, 0, .2, 1);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
}
.dark .btn-primary { background: #3b82f6; color: white; }
.btn-primary:active { transform:scale(.98); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 20px -5px rgba(59,130,246,.3); opacity: .95; }

.btn-secondary {
  background:white; color:#071c33; padding:11px 24px; border-radius:12px;
  font-size:14px; font-weight:700; transition:all .2s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1.5px solid #e2e8f0;
}
.dark .btn-secondary { background:rgba(255,255,255,.05); color:white; border-color:rgba(255,255,255,.1); }
.btn-secondary:hover { background:#f8fafc; border-color:#cbd5e1; transform:translateY(-1px); }
.dark .btn-secondary:hover { background:rgba(255,255,255,.1); border-color:#3b82f680; }

/* ── Modals & Toast ─────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(15,23,42,.6); z-index:100;
  display:none; align-items:center; justify-content:center; padding:16px;
  backdrop-filter:blur(4px); transition:all .3s; opacity:0;
}
.modal-overlay.show { opacity:1; }
.modal-content {
  background:var(--bg-card); border-radius:20px; width:100%; max-width:400px; padding:28px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: translateY(20px); transition: all .3s cubic-bezier(.16,1,.3,1); border: 1px solid var(--border-main);
}
.modal-overlay.show .modal-content { transform: translateY(0); }

.toast {
  background:var(--bg-card); color:var(--text-main); padding:12px 20px; border-radius:12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border:1px solid var(--border-main);
  display:flex; align-items:center; gap:12px; font-size:13px; font-weight:600;
  animation: fadeInLeft .4s cubic-bezier(.16,1,.3,1) both;
}

/* ── Performance Improvements ───────────────────────────── */
.glass { background: rgba(255,255,255,.05); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.08); }
.dark .glass { background: rgba(0,0,0,.2); border-color: rgba(255,255,255,.05); }