/* ── NexaBank Global Stylesheet ────────────────────────────── */
:root {
  --navy:   #0f2d5e;
  --blue:   #1a4fa0;
  --sky:    #3b82f6;
  --light:  #eff6ff;
  --white:  #ffffff;
  --gray50: #f8fafc;
  --gray100:#f1f5f9;
  --gray200:#e2e8f0;
  --gray400:#94a3b8;
  --gray600:#475569;
  --gray900:#0f172a;
  --green:  #059669;
  --red:    #dc2626;
  --yellow: #d97706;
  --radius: 10px;
  --shadow: 0 4px 20px rgba(15,45,94,.10);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; }
body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--gray100);
  color: var(--gray900);
  min-height: 100vh;
}

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
  position: sticky; top:0; z-index:100;
  box-shadow: 0 2px 16px rgba(15,45,94,.25);
}
.nav-brand {
  color: #fff; font-size: 20px; font-weight: 800;
  text-decoration: none; letter-spacing: -.3px;
}
.admin-tag {
  background: #facc15; color: var(--navy);
  font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 20px; margin-left: 8px; vertical-align: middle;
}
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-link {
  color: rgba(255,255,255,.8); text-decoration:none;
  padding: 6px 12px; border-radius:6px; font-size:13.5px;
  transition: background .2s, color .2s;
}
.nav-link:hover { background: rgba(255,255,255,.15); color:#fff; }
.nav-link.logout { color:#fca5a5; }
.nav-link.logout:hover { background:rgba(220,38,38,.2); color:#fca5a5; }
.admin-link { background:rgba(250,204,21,.15); color:#fde68a; }
.nav-user { color:rgba(255,255,255,.6); font-size:13px; padding:6px 10px; }

/* ── Layout ──────────────────────────────────────────────────── */
.container { max-width: 1100px; margin: 0 auto; padding: 32px 20px; }
.admin-body { background: #0d1b2e; }
.admin-body .container { color: #e2e8f0; }

/* ── Page Title ──────────────────────────────────────────────── */
.page-title { font-size:24px; font-weight:800; color:var(--navy); margin-bottom:24px; }
.admin-body .page-title { color:#93c5fd; }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 28px 32px; margin-bottom:24px;
}
.admin-body .card { background:#152035; border:1px solid #1e3a5f; color:#e2e8f0; }
.card-title { font-size:16px; font-weight:700; margin-bottom:18px; color:var(--navy); }
.admin-body .card-title { color:#93c5fd; }

/* ── Account Summary Cards ───────────────────────────────────── */
.accounts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; margin-bottom:28px; }
.account-card {
  background: linear-gradient(135deg, var(--navy), var(--blue));
  border-radius: 14px; padding: 26px; color:#fff;
  box-shadow: 0 8px 32px rgba(15,45,94,.25);
  position: relative; overflow:hidden;
}
.account-card::before {
  content:''; position:absolute; right:-24px; top:-24px;
  width:100px; height:100px; border-radius:50%;
  background:rgba(255,255,255,.06);
}
.account-card .acc-type { font-size:12px; text-transform:uppercase; letter-spacing:1.5px; opacity:.7; }
.account-card .acc-number { font-size:13px; opacity:.6; margin:6px 0 16px; font-family:monospace; }
.account-card .acc-balance { font-size:30px; font-weight:800; letter-spacing:-1px; }
.account-card .acc-currency { font-size:13px; opacity:.65; margin-top:4px; }

/* ── Stats Row ───────────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; margin-bottom:28px; }
.stat-card {
  background:var(--white); border-radius:var(--radius);
  padding:20px 24px; box-shadow:var(--shadow);
  border-top:4px solid var(--blue);
}
.admin-body .stat-card { background:#152035; border-color:#3b82f6; }
.stat-card .stat-label { font-size:12px; color:var(--gray400); text-transform:uppercase; letter-spacing:1px; }
.stat-card .stat-value { font-size:26px; font-weight:800; color:var(--navy); margin-top:6px; }
.admin-body .stat-card .stat-value { color:#60a5fa; }

/* ── Forms ───────────────────────────────────────────────────── */
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:var(--gray600); margin-bottom:6px; }
.admin-body .form-group label { color:#94a3b8; }
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:11px 14px; border:1.5px solid var(--gray200);
  border-radius:8px; font-size:14px; background:var(--white);
  color:var(--gray900); transition: border-color .2s, box-shadow .2s;
}
.admin-body .form-group input,
.admin-body .form-group select,
.admin-body .form-group textarea {
  background:#0d1b2e; border-color:#1e3a5f; color:#e2e8f0;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline:none; border-color:var(--sky);
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.form-group textarea { min-height:90px; resize:vertical; }
.form-note { font-size:12px; color:var(--gray400); margin-top:4px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 26px; border-radius:8px; font-size:14px; font-weight:700;
  border:none; cursor:pointer; text-decoration:none; transition:.2s;
}
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover { background:var(--navy); }
.btn-success { background:var(--green); color:#fff; }
.btn-success:hover { background:#047857; }
.btn-danger  { background:var(--red); color:#fff; }
.btn-danger:hover  { background:#b91c1c; }
.btn-warning { background:var(--yellow); color:#fff; }
.btn-warning:hover { background:#b45309; }
.btn-secondary { background:var(--gray200); color:var(--gray900); }
.btn-sm { padding:7px 16px; font-size:13px; }
.btn-block { width:100%; justify-content:center; }

/* ── Tables ──────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
thead th {
  background:var(--gray50); text-align:left; padding:12px 16px;
  font-size:12px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--gray600); border-bottom:2px solid var(--gray200);
}
.admin-body thead th { background:#0d1b2e; color:#64748b; border-color:#1e3a5f; }
tbody td { padding:13px 16px; border-bottom:1px solid var(--gray100); vertical-align:middle; }
.admin-body tbody td { border-color:#1e3a5f; }
tbody tr:hover { background:var(--light); }
.admin-body tbody tr:hover { background:#1a3050; }

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
  display:inline-block; padding:3px 11px; border-radius:20px;
  font-size:11.5px; font-weight:700; letter-spacing:.4px;
}
.badge-success   { background:#d1fae5; color:#065f46; }
.badge-danger    { background:#fee2e2; color:#991b1b; }
.badge-warning   { background:#fef3c7; color:#92400e; }
.badge-info      { background:#dbeafe; color:#1e40af; }
.badge-secondary { background:#f1f5f9; color:#475569; }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert {
  padding:13px 18px; border-radius:8px; margin-bottom:18px;
  font-size:14px; display:flex; align-items:center; gap:10px;
}
.alert-success { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }
.alert-error   { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.alert-info    { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }
.alert-warning { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }

/* ── Auth Pages ──────────────────────────────────────────────── */
.auth-wrap {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--navy) 0%, #1e40af 100%);
  padding:20px;
}
.auth-card {
  background:#fff; border-radius:16px; padding:44px 48px;
  width:100%; max-width:440px; box-shadow:0 24px 60px rgba(0,0,0,.3);
}
.auth-logo { text-align:center; margin-bottom:28px; }
.auth-logo h1 { font-size:28px; color:var(--navy); font-weight:900; }
.auth-logo p  { color:var(--gray400); font-size:13px; margin-top:4px; }
.auth-footer  { text-align:center; margin-top:20px; font-size:13px; color:var(--gray400); }
.auth-footer a{ color:var(--blue); text-decoration:none; font-weight:600; }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination { display:flex; gap:6px; justify-content:center; margin-top:24px; }
.pagination a,.pagination span {
  padding:7px 14px; border-radius:7px; font-size:13px;
  text-decoration:none; border:1.5px solid var(--gray200);
  color:var(--blue);
}
.pagination .active { background:var(--blue); color:#fff; border-color:var(--blue); }
.admin-body .pagination a,.admin-body .pagination span { border-color:#1e3a5f; color:#60a5fa; }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-backdrop {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.55);
  z-index:200; align-items:center; justify-content:center;
}
.modal-backdrop.open { display:flex; }
.modal {
  background:#fff; border-radius:14px; padding:36px 40px;
  width:100%; max-width:480px; box-shadow:0 24px 60px rgba(0,0,0,.3);
  position:relative;
}
.admin-body .modal { background:#152035; color:#e2e8f0; }
.modal h3 { font-size:18px; font-weight:800; color:var(--navy); margin-bottom:16px; }
.admin-body .modal h3 { color:#93c5fd; }
.modal-close { position:absolute; top:16px; right:20px; background:none; border:none; font-size:22px; cursor:pointer; color:var(--gray400); }

/* ── Footer ──────────────────────────────────────────────────── */
.footer {
  text-align:center; padding:24px; color:var(--gray400);
  font-size:12.5px; border-top:1px solid var(--gray200); margin-top:40px;
}
.admin-body .footer { border-color:#1e3a5f; }

/* ── Utility ─────────────────────────────────────────────────── */
.mt-0{margin-top:0} .mt-8{margin-top:8px} .mt-16{margin-top:16px}
.mb-0{margin-bottom:0} .mb-8{margin-bottom:8px} .mb-16{margin-bottom:16px}
.text-right{text-align:right} .text-center{text-align:center}
.text-muted{color:var(--gray400);font-size:13px}
.flex{display:flex} .items-center{align-items:center} .gap-8{gap:8px} .gap-16{gap:16px}
.justify-between{justify-content:space-between}
.divider{border:none;border-top:1px solid var(--gray200);margin:20px 0}
.admin-body .divider{border-color:#1e3a5f}
.w-full{width:100%}
.narration-box{background:#f0f6ff;border-left:3px solid var(--blue);padding:10px 14px;border-radius:0 6px 6px 0;font-size:13px;color:var(--gray600);margin-top:4px;}
.admin-body .narration-box{background:#0d1b2e;border-color:#3b82f6;color:#94a3b8;}

@media(max-width:700px){
  .form-row{grid-template-columns:1fr;}
  .auth-card{padding:30px 22px;}
  .card{padding:20px 16px;}
  .navbar{padding:0 16px;}
  .nav-links{gap:2px;}
  .nav-link{padding:5px 8px;font-size:12px;}
}