:root{
  --primary:#123f9e;
  --primary-dark:#0a2a6b;
  --primary-light:#e8f0fe;
  --accent:#1a56c4;
  --success:#2f9e44;
  --danger:#d6336c;
  --warning:#f08c00;
  --text:#222;
  --muted:#7a7f87;
  --bg:#f2f4f9;
  --white:#ffffff;
  --radius:12px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Segoe UI', Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{text-decoration:none;color:inherit;}

/* ---------- LOGIN PAGE ---------- */
.login-wrap{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0a2a6b 0%,#123f9e 50%,#1a56c4 100%);
}
.login-card{
  background:var(--white);
  width:380px;
  padding:36px 32px;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,20,0.3);
}
.login-card h1{
  font-size:22px;color:var(--primary-dark);margin-bottom:4px;text-align:center;
}
.login-card p.sub{ text-align:center;color:var(--muted);font-size:13px;margin-bottom:24px;}
.form-group{margin-bottom:16px;}
.form-group label{font-size:13px;font-weight:600;color:var(--text);display:block;margin-bottom:6px;}
.form-group input, .form-group select, .form-group textarea{
  width:100%;padding:11px 14px;border:1.5px solid #e1e4ea;border-radius:10px;font-size:14px;outline:none;transition:.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{border-color:var(--primary);}
.btn-primary{
  width:100%;padding:12px;background:var(--primary);color:#fff;border:none;border-radius:10px;
  font-size:15px;font-weight:700;cursor:pointer;transition:.2s;
}
.btn-primary:hover{background:var(--primary-dark);}
.alert{padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:16px;}
.alert-danger{background:#fdeef3;color:var(--danger);border:1px solid #f5c2d6;}
.alert-success{background:#eafaf0;color:var(--success);border:1px solid #b7e8c4;}

/* ---------- LAYOUT ---------- */
.app-shell{display:flex;min-height:100vh;}
.sidebar{
  width:240px;background:var(--primary-dark);color:#fff;flex-shrink:0;
  display:flex;flex-direction:column;
}
.sidebar .brand{
  padding:22px 20px;font-size:19px;font-weight:800;letter-spacing:1px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.sidebar .brand span{color:#ffd43b;}
.sidebar nav{flex:1;padding:14px 0;overflow-y:auto;}
.sidebar nav a{
  display:flex;align-items:center;gap:12px;padding:12px 22px;color:rgba(255,255,255,0.75);
  font-size:14px;font-weight:600;transition:.15s;border-left:3px solid transparent;
}
.sidebar nav a i{width:18px;text-align:center;}
.sidebar nav a:hover, .sidebar nav a.active{
  background:rgba(255,255,255,0.08);color:#fff;border-left-color:#ffd43b;
}
.sidebar .foot{padding:16px 20px;font-size:11px;color:rgba(255,255,255,0.4);border-top:1px solid rgba(255,255,255,0.1);}

.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{
  background:#fff;padding:14px 28px;display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid #e7e9ee;
}
.topbar h2{font-size:18px;color:var(--primary-dark);}
.topbar .admin-info{display:flex;align-items:center;gap:12px;font-size:13px;}
.topbar .avatar{
  width:34px;height:34px;border-radius:50%;background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-weight:700;
}
.content{padding:26px 28px;flex:1;}

/* ---------- CARDS / STATS ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px;}
.stat-card{
  background:#fff;border-radius:var(--radius);padding:20px;box-shadow:0 2px 10px rgba(20,30,60,0.05);
  display:flex;justify-content:space-between;align-items:center;
}
.stat-card .num{font-size:24px;font-weight:800;color:var(--primary-dark);}
.stat-card .label{font-size:12.5px;color:var(--muted);margin-top:4px;}
.stat-card .icon{
  width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;
}
.bg-blue{background:#e8f1fd;color:#1e6fd9;}
.bg-green{background:#eafaf0;color:#2f9e44;}
.bg-pink{background:#fdeef3;color:#d6336c;}
.bg-orange{background:#fef4e6;color:#f08c00;}

/* ---------- TABLE / CARD PANEL ---------- */
.panel{background:#fff;border-radius:var(--radius);box-shadow:0 2px 10px rgba(20,30,60,0.05);overflow:hidden;}
.panel-head{
  padding:18px 22px;border-bottom:1px solid #eef0f4;display:flex;justify-content:space-between;align-items:center;
}
.panel-head h3{font-size:15.5px;color:var(--primary-dark);}
table{width:100%;border-collapse:collapse;}
table th{
  background:#f7f9fc;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.4px;
  padding:12px 16px;text-align:left;font-weight:700;
}
table td{padding:13px 16px;font-size:13.5px;border-top:1px solid #f1f2f6;vertical-align:middle;}
table tr:hover td{background:#fafbfd;}

.badge{padding:4px 11px;border-radius:20px;font-size:11.5px;font-weight:700;display:inline-block;}
.badge-active{background:#eafaf0;color:#2f9e44;}
.badge-pending{background:#fef4e6;color:#f08c00;}
.badge-blocked{background:#fdeef3;color:#d6336c;}
.badge-rejected{background:#f1f2f6;color:#7a7f87;}
.badge-agent{background:#e8f1fd;color:#1e6fd9;}
.badge-retailer{background:#f1ecfd;color:#7048e8;}
.badge-credit{background:#eafaf0;color:#2f9e44;}
.badge-debit{background:#fdeef3;color:#d6336c;}

.btn-sm{
  padding:6px 12px;border-radius:8px;font-size:12px;font-weight:700;border:none;cursor:pointer;
}
.btn-approve{background:#eafaf0;color:#2f9e44;}
.btn-block{background:#fdeef3;color:#d6336c;}
.btn-view{background:#e8f1fd;color:#1e6fd9;}

.search-box{
  padding:8px 14px;border:1.5px solid #e1e4ea;border-radius:10px;font-size:13px;width:240px;
}
.btn-add{
  background:var(--primary);color:#fff;padding:9px 18px;border-radius:10px;font-size:13px;font-weight:700;border:none;cursor:pointer;
}

.pagination{display:flex;gap:6px;padding:16px 22px;justify-content:flex-end;}
.pagination a{
  padding:6px 12px;border-radius:8px;font-size:12.5px;background:#f2f4f9;color:var(--text);font-weight:600;
}
.pagination a.active{background:var(--primary);color:#fff;}

@media(max-width:900px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .sidebar{position:fixed;left:-240px;z-index:50;height:100vh;transition:.2s;}
  .sidebar.open{left:0;}
}