/* Payrik — fintech agent console design system
   Boldness is spent on the sidebar identity and the wallet balance; everything
   else stays quiet and dense so agents can scan money fast. */
:root{
  --ink-900:#0a1730; --ink-800:#0e2148; --ink-700:#14315f;
  --brand:#4338ca; --brand-600:#4f46e5; --brand-050:#eef2ff;
  --ok:#15803d; --ok-bg:#dcfce7; --danger:#b91c1c; --danger-bg:#fee2e2;
  --warn:#b45309; --warn-bg:#fef3c7;
  --surface:#f4f6fb; --panel:#ffffff; --line:#e6e9f2; --line-2:#eef1f7;
  --text:#0f172a; --muted:#64748b; --muted-2:#94a3b8;
  --radius:14px; --radius-sm:10px; --shadow:0 1px 2px rgba(16,24,48,.06),0 8px 24px -16px rgba(16,24,48,.18);
  --sidebar-w:248px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Plus Jakarta Sans','Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--surface); color:var(--text);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.money{font-variant-numeric:tabular-nums; letter-spacing:-.01em}
a{color:var(--brand-600); text-decoration:none}
:focus-visible{outline:2px solid var(--brand-600); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- app shell ---------- */
.app{display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh}
.sidebar{
  background:linear-gradient(180deg,var(--ink-900),var(--ink-800));
  color:#c7d2fe; position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
}
.brand{display:flex; align-items:center; gap:10px; padding:20px 20px 16px; color:#fff}
.brand .mark{width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--brand-600),#818cf8);
  display:grid; place-items:center; font-weight:800; color:#fff; box-shadow:0 4px 12px -2px rgba(79,70,229,.6)}
.brand b{font-size:17px; letter-spacing:-.02em}
.brand small{display:block; color:#8ea2d8; font-size:11px; font-weight:500; margin-top:1px}
.nav{padding:8px 12px; overflow-y:auto; flex:1}
.nav .group{color:#7185b8; font-size:11px; font-weight:600; padding:14px 12px 6px; letter-spacing:.04em}
.nav a{
  display:flex; align-items:center; gap:11px; padding:9px 12px; margin:1px 0; border-radius:9px;
  color:#c2cdf0; font-weight:500; transition:background .12s,color .12s; position:relative;
}
.nav a svg{width:17px; height:17px; opacity:.85; flex:none}
.nav a:hover{background:rgba(255,255,255,.06); color:#fff}
.nav a.active{background:rgba(99,102,241,.18); color:#fff}
.nav a.active::before{content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--brand-600)}
.sidebar .foot{padding:14px 16px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:#8ea2d8}

/* ---------- topbar ---------- */
.main{display:flex; flex-direction:column; min-width:0}
.topbar{
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.86); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); padding:0 24px; height:60px; display:flex; align-items:center; gap:16px;
}
.topbar .page-title{font-size:16px; font-weight:650; letter-spacing:-.01em}
.topbar .spacer{flex:1}
.wallet{
  display:flex; align-items:center; gap:10px; background:var(--ink-900); color:#fff;
  padding:7px 14px; border-radius:999px; box-shadow:var(--shadow);
}
.wallet .lbl{font-size:11px; color:#93a4d4; font-weight:500}
.wallet .amt{font-size:15px; font-weight:700}
.usermenu{display:flex; align-items:center; gap:10px}
.avatar{width:34px; height:34px; border-radius:50%; background:var(--brand-050); color:var(--brand);
  display:grid; place-items:center; font-weight:700; font-size:13px}
.hamburger{display:none; background:none; border:0; padding:6px; cursor:pointer; margin:0}

/* ---------- content ---------- */
.content{padding:24px; max-width:1160px; width:100%}
.page-head{display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap}
.page-head h1{font-size:22px; font-weight:700; letter-spacing:-.02em; margin:0}
.page-head p{margin:4px 0 0; color:var(--muted)}

/* ---------- balance hero + stat tiles ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px}
.tile{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow)}
.tile .k{color:var(--muted); font-size:12.5px; font-weight:500; display:flex; align-items:center; gap:7px}
.tile .k svg{width:15px;height:15px;color:var(--muted-2)}
.tile .v{font-size:24px; font-weight:750; margin-top:8px}
.tile.hero{grid-column:span 2; background:linear-gradient(135deg,var(--ink-900),var(--ink-700)); color:#fff; border:0}
.tile.hero .k{color:#9fb0dc} .tile.hero .k svg{color:#7f93c8}
.tile.hero .v{font-size:32px; margin-top:6px}
.tile.hero .sub{color:#9fb0dc; font-size:12.5px; margin-top:6px}
@media(max-width:520px){.tile.hero{grid-column:span 1}}

/* ---------- panels / cards ---------- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.panel-pad{padding:20px}
.panel h2,.panel h3{margin:0 0 14px; font-size:15px; font-weight:650}
.form-card{max-width:520px}

/* ---------- forms ---------- */
label{display:block; font-size:12.5px; color:var(--muted); font-weight:500; margin:14px 0 5px}
input,select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font:inherit; color:var(--text); background:#fff; transition:border-color .12s,box-shadow .12s;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand-600); box-shadow:0 0 0 3px var(--brand-050); outline:none}
.btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px; background:var(--brand);
  color:#fff; border:0; padding:11px 20px; border-radius:var(--radius-sm); cursor:pointer;
  font:inherit; font-weight:600; transition:background .12s,transform .04s;
}
.btn:hover{background:var(--brand-600)} .btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff; color:var(--text); border:1px solid var(--line)}
.btn.ghost:hover{background:var(--surface)}
.btn.danger{background:var(--danger)} .btn.sm{padding:7px 12px; margin-top:0; font-size:13px}
.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.filters input,.filters select{width:auto; min-width:150px}
.filters .btn{margin-top:0}

/* ---------- tables ---------- */
.table-wrap{overflow:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow)}
table{width:100%; border-collapse:collapse}
thead th{position:sticky; top:0; background:#f8fafc; color:var(--muted); font-size:11.5px; font-weight:600;
  letter-spacing:.02em; text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap}
tbody td{padding:12px 14px; border-bottom:1px solid var(--line-2); font-size:13.5px}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafbff}
td .money,.amt-pos,.amt-neg{font-variant-numeric:tabular-nums}
.amt-pos{color:var(--ok)} .amt-neg{color:var(--danger)}
.empty{text-align:center; color:var(--muted); padding:34px 12px}

/* ---------- badges ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.badge.ok,.badge.SUCCESS,.badge.ACCEPTED{background:var(--ok-bg); color:var(--ok)}
.badge.fail,.badge.FAILED,.badge.REJECTED{background:var(--danger-bg); color:var(--danger)}
.badge.pend,.badge.PENDING,.badge.NEW{background:var(--warn-bg); color:var(--warn)}

/* ---------- alerts ---------- */
.alert{display:flex; gap:10px; padding:12px 14px; border-radius:var(--radius-sm); margin-bottom:18px; font-size:13.5px; align-items:flex-start}
.alert svg{width:18px;height:18px;flex:none;margin-top:1px}
.alert.ok{background:var(--ok-bg); color:#14532d}
.alert.err{background:var(--danger-bg); color:#7f1d1d}

/* ---------- pagination ---------- */
.pager{margin-top:16px; display:flex; gap:6px; align-items:center}
.pager a,.pager span{padding:6px 11px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--text); font-size:13px}
.pager .active span,.pager [aria-current]{background:var(--brand); color:#fff; border-color:var(--brand)}

/* ---------- responsive ---------- */
.scrim{display:none}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed; z-index:40; width:var(--sidebar-w); transform:translateX(-100%); transition:transform .2s ease}
  .app.nav-open .sidebar{transform:none}
  .app.nav-open .scrim{display:block; position:fixed; inset:0; background:rgba(10,23,48,.5); z-index:30}
  .hamburger{display:inline-flex}
}

/* ================= COLORFUL THEME (v2) — vibrant admin-panel look ================= */
:root{
  --c-purple:linear-gradient(135deg,#7c3aed,#a855f7);
  --c-blue:linear-gradient(135deg,#2563eb,#3b82f6);
  --c-cyan:linear-gradient(135deg,#0891b2,#06b6d4);
  --c-green:linear-gradient(135deg,#059669,#10b981);
  --c-orange:linear-gradient(135deg,#ea580c,#f97316);
  --c-pink:linear-gradient(135deg,#db2777,#ec4899);
  --c-red:linear-gradient(135deg,#dc2626,#ef4444);
  --c-indigo:linear-gradient(135deg,#4338ca,#6366f1);
  --c-teal:linear-gradient(135deg,#0d9488,#14b8a6);
  --c-amber:linear-gradient(135deg,#d97706,#f59e0b);
  --c-slate:linear-gradient(135deg,#475569,#64748b);
  --c-fuchsia:linear-gradient(135deg,#a21caf,#d946ef);
}
body{background:#eef1f8}
/* colorful sidebar accent */
.sidebar{background:linear-gradient(180deg,#1e1b4b,#312e81 60%,#3730a3)}
.brand .mark{background:linear-gradient(135deg,#f472b6,#a855f7,#6366f1)}

/* vibrant stat tiles — each color a different gradient, white text */
.stat-grid{gap:16px}
.tile{position:relative;overflow:hidden;color:#fff;border:0;box-shadow:0 10px 24px -12px rgba(30,27,75,.5)}
.tile .k{color:rgba(255,255,255,.85)} .tile .k svg{color:rgba(255,255,255,.75)}
.tile .v{color:#fff}
.tile::after{content:"";position:absolute;right:-18px;top:-18px;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.14)}
.tile.c-purple{background:var(--c-purple)} .tile.c-blue{background:var(--c-blue)}
.tile.c-cyan{background:var(--c-cyan)} .tile.c-green{background:var(--c-green)}
.tile.c-orange{background:var(--c-orange)} .tile.c-pink{background:var(--c-pink)}
.tile.c-red{background:var(--c-red)} .tile.c-indigo{background:var(--c-indigo)}
.tile.c-teal{background:var(--c-teal)} .tile.c-amber{background:var(--c-amber)}
.tile.c-slate{background:var(--c-slate)} .tile.c-fuchsia{background:var(--c-fuchsia)}
.tile .icn{position:absolute;right:16px;bottom:12px;opacity:.22}
.tile .icn svg{width:44px;height:44px;color:#fff}
.tile.hero{background:linear-gradient(135deg,#4f46e5,#7c3aed,#db2777)}
.tile.hero .v{font-size:34px}
/* colorful section headings */
.page-head h1{background:linear-gradient(90deg,#4338ca,#db2777);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{background:linear-gradient(135deg,#4f46e5,#7c3aed)}
.btn:hover{filter:brightness(1.08)}
.badge.SUCCESS,.badge.ok,.badge.ACCEPTED{background:#dcfce7;color:#15803d}