/* ============================================================
   AMATO PAGO — GEOMETRIC BALANCE THEME
   Palette: Slate-50 bg · Blue-600 accent · Slate-900 text
   Fonts: Inter (UI) · JetBrains Mono (metrics/codes/₦)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Geometric Balance Palette */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;

  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  --success:  #10b981;
  --warning:  #f59e0b;
  --danger:   #ef4444;
  --info:     #06b6d4;

  /* Semantic */
  --primary:       var(--blue-600);
  --primary-hover: var(--blue-700);
  --bg:            var(--slate-50);
  --surface:       #ffffff;
  --text:          var(--slate-900);
  --text-muted:    var(--slate-500);
  --border:        var(--slate-200);

  /* Fonts */
  --font-ui:   'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing / Shape */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 2px 6px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.09);
  --shadow-lg: 0 10px 32px rgba(0,0,0,.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.16);

  /* Transition */
  --t: all .2s cubic-bezier(.4,0,.2,1);

  /* Sidebar width */
  --sidebar-w: 260px;
}

/* ── Reset ─────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration:none; color:var(--primary); transition: var(--t); }
a:hover { color: var(--primary-hover); }
img { max-width:100%; display:block; }

/* ── Mono / metric helper ───────────────────── */
.mono, .metric, code {
  font-family: var(--font-mono);
  letter-spacing: -.01em;
}

/* ── Container ──────────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ── Utilities ──────────────────────────────── */
.text-center  { text-align:center; }
.text-muted   { color:var(--text-muted); }
.mt-1 { margin-top:.5rem; }  .mt-2 { margin-top:1rem; }
.mt-3 { margin-top:1.5rem; } .mt-4 { margin-top:2rem; }
.mb-1 { margin-bottom:.5rem; }  .mb-2 { margin-bottom:1rem; }
.mb-3 { margin-bottom:1.5rem; } .mb-4 { margin-bottom:2rem; }
.hidden { display:none !important; }
.flex { display:flex; } .gap-1{gap:.5rem;} .gap-2{gap:1rem;}
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.flex-wrap { flex-wrap:wrap; }
.w-full { width:100%; }

/* ── Grid background (subtle) ───────────────── */
.grid-bg {
  background-image:
    linear-gradient(var(--slate-200) 1px, transparent 1px),
    linear-gradient(90deg, var(--slate-200) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── Buttons ────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:10px 22px; border:1.5px solid transparent; border-radius:var(--radius);
  font-size:.9375rem; font-weight:600; font-family:var(--font-ui);
  cursor:pointer; text-align:center; transition:var(--t);
  white-space:nowrap; -webkit-tap-highlight-color:transparent;
}
.btn-primary {
  background:var(--primary); color:#fff;
  border-color:var(--primary);
  box-shadow: 0 4px 14px rgba(37,99,235,.35);
}
.btn-primary:hover {
  background:var(--primary-hover); color:#fff;
  border-color:var(--primary-hover);
  transform:translateY(-2px);
  box-shadow: 0 6px 20px rgba(37,99,235,.45);
}
.btn-primary:active, .btn-primary:focus:active {
  background:var(--blue-800); color:#fff;
  border-color:var(--blue-800);
  transform:translateY(0);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.2);
}
.btn-outline {
  background:transparent; color:var(--primary);
  border:1.5px solid var(--primary);
}
.btn-outline:hover {
  background:var(--blue-50); color:var(--primary-hover);
  border-color:var(--primary-hover);
  transform:translateY(-2px);
}
.btn-outline:active, .btn-outline:focus:active {
  background:var(--primary); color:#fff;
  border-color:var(--primary);
  transform:translateY(0);
}
.btn-ghost {
  background:transparent; color:var(--slate-600);
  border:1.5px solid var(--border);
}
.btn-ghost:hover { background:var(--slate-100); color:var(--text); }
.btn-ghost:active { background:var(--slate-200); color:var(--text); }
.btn-danger { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-danger:hover { background:#dc2626; color:#fff; border-color:#dc2626; }
.btn-danger:active { background:#b91c1c; color:#fff; border-color:#b91c1c; }
.btn-sm { padding:7px 14px; font-size:.8125rem; }
.btn-lg { padding:14px 32px; font-size:1rem; }
.btn-block { display:flex; width:100%; }

/* ── Forms ──────────────────────────────────── */
.form-group { margin-bottom:1.25rem; }
.form-label {
  display:block; margin-bottom:.4rem;
  font-weight:500; font-size:.875rem; color:var(--slate-700);
}
.form-control {
  width:100%; padding:11px 14px;
  border:1.5px solid var(--border); border-radius:var(--radius);
  font-size:.9375rem; font-family:var(--font-ui);
  color:var(--text); background:var(--surface);
  transition:var(--t);
}
.form-control:focus {
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.form-control::placeholder { color:var(--slate-400); }

/* ── Cards ──────────────────────────────────── */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.5rem;
  box-shadow:var(--shadow-sm);
}
.card-sm { padding:1rem; border-radius:var(--radius); }

/* ── Alerts ─────────────────────────────────── */
.alert {
  padding:.875rem 1rem; border-radius:var(--radius);
  margin-bottom:1rem; font-size:.9rem; border-left:4px solid;
}
.alert-success { background:#ecfdf5; color:#065f46; border-color:var(--success); }
.alert-error   { background:#fef2f2; color:#991b1b; border-color:var(--danger); }
.alert-info    { background:#eff6ff; color:#1e40af; border-color:var(--blue-600); }
.alert-warning { background:#fffbeb; color:#92400e; border-color:var(--warning); }

/* ── Badge / Status ─────────────────────────── */
.badge {
  display:inline-block; padding:3px 10px;
  border-radius:20px; font-size:.75rem; font-weight:600;
}
.badge-success  { background:#dcfce7; color:#166534; }
.badge-warning  { background:#fef9c3; color:#854d0e; }
.badge-info     { background:#dbeafe; color:#1e40af; }
.badge-danger   { background:#fee2e2; color:#991b1b; }
.badge-slate    { background:var(--slate-100); color:var(--slate-700); }

/* ── Navbar (landing) ───────────────────────── */
.navbar {
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:.875rem 5%;
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; z-index:1000;
  box-shadow:var(--shadow-xs);
}
.navbar-brand img { height:38px; }
.nav-links { display:flex; gap:1.75rem; list-style:none; align-items:center; }
.nav-links a { color:var(--slate-700); font-weight:500; font-size:.9375rem; }
.nav-links a:hover { color:var(--primary); }

/* ── Sidebar layout ─────────────────────────── */
.layout { display:flex; min-height:100vh; }

.sidebar {
  width:var(--sidebar-w); min-height:100vh;
  background:var(--slate-900); color:#fff;
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; z-index:200;
  transition:transform .25s ease;
  border-right:1px solid var(--slate-800);
}
.sidebar-logo {
  padding:1.5rem 1.25rem 1rem;
  border-bottom:1px solid var(--slate-800);
}
.sidebar-logo img { height:36px; }
.sidebar-nav { flex:1; padding:1.25rem .75rem; overflow-y:auto; }
.sidebar-nav ul { list-style:none; display:flex; flex-direction:column; gap:.25rem; }
.sidebar-nav a {
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem 1rem; border-radius:var(--radius);
  color:var(--slate-400); font-size:.9rem; font-weight:500;
  transition:var(--t);
}
.sidebar-nav a:hover,
.sidebar-nav a.active {
  background:rgba(37,99,235,.15); color:#fff;
}
.sidebar-nav a.active { color:var(--blue-200); }
.sidebar-footer {
  padding:1rem .75rem;
  border-top:1px solid var(--slate-800);
}
.sidebar-footer form button {
  width:100%; text-align:left; background:none; border:none;
  color:var(--slate-400); font-family:var(--font-ui);
  font-size:.9rem; font-weight:500; cursor:pointer;
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem 1rem; border-radius:var(--radius);
  transition:var(--t);
}
.sidebar-footer form button:hover { background:rgba(239,68,68,.15); color:#fca5a5; }

.main-wrap {
  margin-left:var(--sidebar-w);
  flex:1; display:flex; flex-direction:column; min-width:0;
}
.topbar {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:.875rem 1.75rem;
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; z-index:100;
  box-shadow:var(--shadow-xs);
}
.topbar-title { font-size:1.1rem; font-weight:700; color:var(--slate-900); }
.topbar-user { display:flex; align-items:center; gap:.75rem; }
.avatar {
  width:38px; height:38px; border-radius:50%;
  background:var(--blue-600);
  color:#fff; font-weight:700; font-size:.875rem;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }

.page-content { padding:1.75rem; flex:1; }

/* ── Stat cards ─────────────────────────────── */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:1.25rem; margin-bottom:2rem;
}
.stat-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.25rem 1.5rem;
  box-shadow:var(--shadow-sm);
  border-top:3px solid var(--primary);
  animation: cardIn .4s ease forwards;
  opacity:0; transform:translateY(12px);
}
.stat-card:nth-child(1){ animation-delay:.05s; }
.stat-card:nth-child(2){ animation-delay:.1s; }
.stat-card:nth-child(3){ animation-delay:.15s; }
.stat-card:nth-child(4){ animation-delay:.2s; }
.stat-card:nth-child(5){ animation-delay:.25s; }
.stat-card:nth-child(6){ animation-delay:.3s; }
@keyframes cardIn {
  to { opacity:1; transform:translateY(0); }
}
.stat-label {
  font-size:.75rem; font-weight:600; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:.5rem;
}
.stat-value {
  font-family:var(--font-mono); font-size:1.75rem;
  font-weight:700; color:var(--slate-900); line-height:1;
}
.stat-sub { font-size:.8rem; color:var(--text-muted); margin-top:.35rem; }

/* ── Tables ─────────────────────────────────── */
.table-wrap {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.table-header {
  padding:1.125rem 1.5rem;
  border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
}
.table-header h3 { font-size:1rem; font-weight:700; color:var(--slate-900); }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead { background:var(--slate-50); }
th {
  padding:10px 16px; text-align:left;
  font-size:.75rem; font-weight:600;
  color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.07em; white-space:nowrap;
  border-bottom:1px solid var(--border);
}
td {
  padding:12px 16px; font-size:.875rem;
  border-bottom:1px solid var(--slate-100);
  color:var(--slate-700);
}
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--slate-50); }
.ref-code { font-family:var(--font-mono); font-size:.8rem; color:var(--slate-900); }

/* ── Auth pages ─────────────────────────────── */
.auth-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:2rem; background:var(--slate-100);
  background-image:
    linear-gradient(var(--slate-200) 1px, transparent 1px),
    linear-gradient(90deg, var(--slate-200) 1px, transparent 1px);
  background-size:48px 48px;
}
.auth-box {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:2.5rem;
  width:100%; max-width:480px;
  box-shadow:var(--shadow-xl);
  animation: fadeUp .4s ease forwards;
}
.auth-logo { text-align:center; margin-bottom:1.75rem; }
.auth-logo img { height:48px; margin:0 auto; }
.auth-tabs {
  display:flex; border:1.5px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  margin-bottom:1.75rem;
}
.auth-tab {
  flex:1; padding:.75rem; text-align:center;
  font-weight:600; font-size:.9rem;
  color:var(--text-muted); background:var(--slate-50);
  text-decoration:none; border:none; cursor:pointer;
  font-family:var(--font-ui); transition:var(--t);
}
.auth-tab.active { background:var(--primary); color:#fff; }

/* ── Accordion / FAQ ────────────────────────── */
.accordion-item {
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.accordion-btn {
  width:100%; padding:1.125rem 0;
  background:none; border:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  font-size:.9625rem; font-weight:600; color:var(--slate-900);
  font-family:var(--font-ui); text-align:left; transition:var(--t);
}
.accordion-btn:hover { color:var(--primary); }
.accordion-icon {
  width:22px; height:22px; border-radius:50%;
  background:var(--blue-50); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
  transition:transform .2s ease;
}
.accordion-item.open .accordion-icon { transform:rotate(45deg); }
.accordion-body {
  max-height:0; overflow:hidden;
  transition:max-height .3s ease, padding .3s ease;
  color:var(--text-muted); font-size:.9rem; line-height:1.7;
}
.accordion-item.open .accordion-body { max-height:300px; padding-bottom:1.25rem; }

/* ── Mobile sidebar overlay ─────────────────── */
.sidebar-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.5); z-index:190;
}
.menu-toggle {
  display:none; background:none; border:none;
  padding:.5rem; cursor:pointer; color:var(--slate-700);
}

/* ── Animations ─────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.animate-fade-in { animation: fadeIn .4s ease forwards; }
.animate-fade-up { animation: fadeUp .5s ease forwards; }

/* ── WhatsApp float ─────────────────────────── */
.whatsapp-float {
  position:fixed; bottom:24px; right:24px;
  background:#25D366; color:#fff;
  border-radius:50px; padding:10px 20px;
  display:flex; align-items:center; gap:8px;
  box-shadow:var(--shadow-lg); z-index:9999;
  font-weight:700; font-size:.875rem; transition:var(--t);
}
.whatsapp-float:hover { transform:translateY(-4px); color:#fff; }

/* ── Modal ──────────────────────────────────── */
.modal-backdrop {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.6); z-index:10000;
  align-items:center; justify-content:center;
}
.modal-backdrop.active { display:flex; }
.modal-box {
  background:var(--surface); border-radius:var(--radius-xl);
  padding:2rem; width:90%; max-width:560px;
  box-shadow:var(--shadow-xl); position:relative;
  animation: fadeUp .25s ease;
}
.modal-close {
  position:absolute; top:1rem; right:1rem;
  background:none; border:none; font-size:1.4rem;
  cursor:pointer; color:var(--text-muted); line-height:1;
}
.modal-close:hover { color:var(--danger); }

/* ── Glassmorphism panel ────────────────────── */
.glass {
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--radius-lg);
}

/* ── Section headings ───────────────────────── */
.section-eyebrow {
  font-family:var(--font-mono); font-size:.75rem; font-weight:600;
  color:var(--primary); text-transform:uppercase; letter-spacing:.12em;
  margin-bottom:.5rem;
}
.section-title {
  font-size:2rem; font-weight:800; color:var(--slate-900);
  line-height:1.25; margin-bottom:1rem;
}
.section-desc {
  color:var(--text-muted); font-size:1rem; max-width:560px;
}

/* ── Empty state ────────────────────────────── */
.empty-state {
  text-align:center; padding:3rem 2rem; color:var(--text-muted);
}
.empty-state h3 { font-size:1.05rem; font-weight:600; margin-bottom:.5rem; color:var(--slate-700); }

/* ── Quick actions row ──────────────────────── */
.actions-row { display:flex; gap:.75rem; margin-bottom:1.75rem; flex-wrap:wrap; }

/* ── Responsive ─────────────────────────────── */
@media (max-width:1024px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .sidebar-overlay.active { display:block; }
  .main-wrap { margin-left:0; }
  .menu-toggle { display:flex; }
}
@media (max-width:768px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .nav-links { display:none; }
  .page-content { padding:1rem; }
  .topbar { padding:.75rem 1rem; }
  .auth-page { padding:1rem; }
  .auth-box { padding:1.5rem 1.25rem; }
  .section-title { font-size:1.5rem; }
}
@media (max-width:480px) {
  .stats-grid { grid-template-columns:1fr; }
  .actions-row { flex-direction:column; }
  .actions-row .btn { width:100%; }
  .auth-page { padding:0.75rem; }
  .auth-box { padding:1.25rem 1rem; }
}