/* ============================================================
   HumaraBazaar Admin Panel (Owner + SuperAdmin)
   Clean dashboard UI
   ============================================================ */
:root{
  --p:#4f46e5;--p-dark:#4338ca;--p-light:#eef2ff;
  --ink:#1e293b;--muted:#64748b;--line:#e2e8f0;--bg:#f1f5f9;
  --card:#fff;--green:#16a34a;--red:#dc2626;--amber:#d97706;
  --radius:14px;--shadow:0 1px 3px rgba(0,0,0,.07);--shadow-lg:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter','Segoe UI',Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* layout */
.admin{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{background:#0f172a;color:#cbd5e1;padding:0;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar .brand{padding:20px 22px;font-size:20px;font-weight:800;color:#fff;border-bottom:1px solid #1e293b}
.sidebar .brand small{display:block;font-size:11px;color:#64748b;font-weight:500;margin-top:2px}
.sidebar nav{padding:14px 0}
.sidebar nav a{display:flex;align-items:center;gap:12px;padding:12px 22px;font-weight:500;color:#cbd5e1;transition:.15s;border-left:3px solid transparent}
.sidebar nav a:hover{background:#1e293b;color:#fff}
.sidebar nav a.active{background:#1e293b;color:#fff;border-left-color:var(--p)}
.sidebar nav .ico{width:20px;text-align:center}
.main{padding:0}
.topbar{background:var(--card);box-shadow:var(--shadow);padding:16px 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20}
.topbar h1{font-size:20px}
.topbar .user{display:flex;align-items:center;gap:10px;font-weight:600}
.topbar .user .av{width:36px;height:36px;border-radius:50%;background:var(--p);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.content{padding:28px}

/* cards / stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}
.stat{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.stat .label{color:var(--muted);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.stat .val{font-size:30px;font-weight:800;margin-top:8px}
.stat .ico{position:absolute;right:16px;top:16px;font-size:30px;opacity:.18}
.stat.green{border-top:3px solid var(--green)}
.stat.blue{border-top:3px solid var(--p)}
.stat.amber{border-top:3px solid var(--amber)}
.stat.red{border-top:3px solid var(--red)}

.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:22px}
.card .chead{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.card .chead h2{font-size:16px}
.card .cbody{padding:22px}

/* tables */
table.tbl{width:100%;border-collapse:collapse}
table.tbl th{text-align:left;padding:12px 16px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:2px solid var(--line);background:#f8fafc}
table.tbl td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tr:hover td{background:#f8fafc}
.thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;background:#f1f5f9}

/* badges */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.b-green{background:#dcfce7;color:#15803d}
.b-amber{background:#fef3c7;color:#b45309}
.b-blue{background:#dbeafe;color:#1d4ed8}
.b-red{background:#fee2e2;color:#b91c1c}
.b-gray{background:#f1f5f9;color:#475569}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border:none;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;transition:.15s;text-decoration:none}
.btn-p{background:var(--p);color:#fff}.btn-p:hover{background:var(--p-dark)}
.btn-o{background:#fff;color:var(--p);border:1px solid var(--p)}
.btn-g{background:var(--green);color:#fff}
.btn-r{background:var(--red);color:#fff}
.btn-sm{height:32px;padding:0 12px;font-size:13px;border-radius:7px}
.btn-block{width:100%;justify-content:center}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* forms */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;height:42px;border:1px solid var(--line);border-radius:9px;padding:0 13px;font-size:14px;outline:none;transition:.15s;font-family:inherit}
.fld textarea{height:auto;padding:11px 13px}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--p-light)}
.msg{padding:11px 15px;border-radius:9px;font-size:13.5px;margin-bottom:16px}
.msg.err{background:#fee2e2;color:#b91c1c}
.msg.ok{background:#dcfce7;color:#15803d}

/* auth (login/register) */
.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;
  background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%)}
.auth-box{background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);padding:38px;width:100%;max-width:440px}
.auth-box h1{font-size:24px;margin-bottom:4px}
.auth-box .sub{color:var(--muted);margin-bottom:24px}
.otp-inputs{display:flex;gap:10px;justify-content:center;margin:10px 0 18px}
.otp-inputs input{width:48px;height:56px;text-align:center;font-size:24px;font-weight:700;border:1.5px solid var(--line);border-radius:11px}
.otp-inputs input:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--p-light)}

/* status select inline */
.status-sel{height:34px;border:1px solid var(--line);border-radius:7px;padding:0 8px;font-size:13px;font-weight:600}

/* image preview */
.img-prev{width:90px;height:90px;border-radius:10px;border:1px dashed var(--line);object-fit:cover;background:#f8fafc;margin-top:8px}

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