/* =====================================================================
   TapTap Sell ERP — operations console
   Navy + white identity with a gold accent (matches taptapsell.pk).
   Light default + dark theme via [data-theme]. Bricolage Grotesque
   display, Inter body, tabular numerals for money.
   ===================================================================== */

:root{
  --navy:#15294D; --navy-deep:#0D1B34;
  --radius:14px; --radius-sm:9px; --rail:248px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --display:'Bricolage Grotesque',var(--sans);
}

html[data-theme="light"]{
  --bg:#F4F7FC; --surface:#FFFFFF; --surface-2:#EDF1FA;
  --border:#E1E8F3; --border-strong:#CFD9EC;
  --text:#0F2143; --muted:#586580; --muted-2:#8592AE;
  --primary:#CF8B12; --primary-dark:#B4760A; --primary-tint:#FBF1DD;
  --positive:#15905A; --positive-tint:#E6F3EC;
  --negative:#D6453F; --negative-tint:#FBEAE9;
  --amber:#B7790C;    --amber-tint:#FBF1DD;
  --blue:#2F6DB5;     --blue-tint:#E8F0FA;
  --shadow:0 1px 2px rgba(16,33,67,.04), 0 8px 24px rgba(16,33,67,.06);
  --shadow-sm:0 1px 2px rgba(16,33,67,.06);
  --side-bg:#13233F; --side-hover:#1B2E4F; --side-active:#22375C;
  --side-text:#A7B4CE; --side-strong:#FFFFFF; --side-muted:#7C8AA8;
}
html[data-theme="dark"]{
  --bg:#0A1730; --surface:#122548; --surface-2:#173263;
  --border:rgba(150,180,230,.14); --border-strong:rgba(150,180,230,.24);
  --text:#EAF0FA; --muted:#9DB0D0; --muted-2:#7387AB;
  --primary:#F3B23C; --primary-dark:#E19E1D; --primary-tint:rgba(243,178,60,.15);
  --positive:#3FBE86; --positive-tint:rgba(63,190,134,.15);
  --negative:#F0736C; --negative-tint:rgba(240,115,108,.15);
  --amber:#F3B23C;    --amber-tint:rgba(243,178,60,.15);
  --blue:#6EA8E6;     --blue-tint:rgba(110,168,230,.15);
  --shadow:0 24px 60px rgba(0,0,0,.5);
  --shadow-sm:0 10px 30px rgba(0,0,0,.4);
  --side-bg:#0C1A34; --side-hover:#15284A; --side-active:#1C3357;
  --side-text:#93A4C6; --side-strong:#FFFFFF; --side-muted:#6E80A4;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);background:var(--bg);color:var(--text);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round;flex:none}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------------- Sidebar ---------------- */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--rail);
  background:var(--side-bg);color:var(--side-text);
  display:flex;flex-direction:column;z-index:40;
  border-right:1px solid rgba(0,0,0,.15);
}
.brand{display:flex;align-items:center;gap:11px;padding:20px 20px 18px}
.brand-mark{
  width:38px;height:38px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--navy);box-shadow:0 0 0 1.5px rgba(243,178,60,.5);
}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block}
.brand-text{font-family:var(--display);font-weight:700;color:#fff;font-size:17px;letter-spacing:-.01em}

.nav{display:flex;flex-direction:column;gap:2px;padding:6px 12px;flex:1;overflow-y:auto}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  color:var(--side-text);text-decoration:none;font-size:14.5px;font-weight:500;
  transition:background .12s,color .12s;
}
.nav-item:hover{background:var(--side-hover);color:#fff}
.nav-item.active{background:var(--side-active);color:#fff}
.nav-item.active .ic{color:var(--primary)}

.sidebar-foot{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.08)}
.who{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.who-avatar{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--side-active);color:#fff;font-weight:650;font-size:14px}
.who-name{color:var(--side-strong);font-size:14px;font-weight:550;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.logout{color:var(--side-muted);display:grid;place-items:center;padding:7px;border-radius:8px}
.logout:hover{background:var(--side-hover);color:#fff}

/* ---------------- Main ---------------- */
.main{margin-left:var(--rail);min-height:100vh}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 30px 6px}
.page-title{font-family:var(--display);font-size:24px;font-weight:700;color:var(--text);margin:0;letter-spacing:-.02em}
.topbar-right{display:flex;align-items:center;gap:12px}
.content{padding:18px 30px 46px}

.theme-btn{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--border-strong);
  background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;
  transition:background .15s,color .15s,border-color .15s;
}
.theme-btn:hover{background:var(--surface-2);color:var(--text)}
.theme-btn .ic{width:18px;height:18px}
html[data-theme="light"] .theme-btn .ic-sun{display:none}
html[data-theme="dark"]  .theme-btn .ic-moon{display:none}

/* ---------------- Menu toggle (mobile) ---------------- */
.menu-toggle{display:none;position:fixed;top:14px;left:14px;z-index:50;
  width:42px;height:42px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface);color:var(--text);cursor:pointer;align-items:center;
  justify-content:center;box-shadow:var(--shadow-sm)}
.scrim{display:none;position:fixed;inset:0;background:rgba(9,18,40,.5);z-index:39}

/* ---------------- Flash ---------------- */
.flash{margin:10px 30px 0;padding:12px 16px;border-radius:10px;font-size:14px;font-weight:500;
  border:1px solid transparent}
.flash-success{background:var(--positive-tint);color:var(--positive)}
.flash-error{background:var(--negative-tint);color:var(--negative)}
.flash-info{background:var(--blue-tint);color:var(--blue)}

/* ---------------- Cards & grid ---------------- */
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:20px}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
  border-bottom:1px solid var(--border)}
.card-head h2{margin:0;font-family:var(--display);font-size:16px;font-weight:650;color:var(--text)}

.stat{padding:18px 20px}
.stat-label{font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;
  letter-spacing:.5px;display:flex;align-items:center;gap:7px}
.stat-value{font-family:var(--display);font-size:27px;font-weight:720;color:var(--text);
  margin-top:9px;letter-spacing:-.02em}
.stat-sub{font-size:13px;color:var(--muted);margin-top:4px}
.stat-value.pos{color:var(--positive)}
.stat-value.neg{color:var(--negative)}
.stat-dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot-teal{background:var(--primary)}
.dot-green{background:var(--positive)}
.dot-amber{background:var(--amber)}
.dot-red{background:var(--negative)}
.dot-blue{background:var(--blue)}

/* ---------------- Charity signature panel ---------------- */
.charity-panel{
  background:linear-gradient(135deg,var(--navy),var(--navy-deep));
  color:#EAF0FA;border:none;border-radius:var(--radius);
  padding:22px 24px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.charity-panel::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;
  border-radius:50%;background:rgba(255,255,255,.05)}
.charity-panel .cp-head{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;color:var(--primary);position:relative}
.charity-panel .cp-total{font-family:var(--display);font-size:34px;font-weight:760;margin-top:8px;
  letter-spacing:-.02em;position:relative;color:#fff}
.cp-bar{height:9px;border-radius:6px;background:rgba(255,255,255,.18);margin-top:18px;overflow:hidden;position:relative}
.cp-bar > span{display:block;height:100%;background:var(--primary);border-radius:6px}
.cp-legend{display:flex;justify-content:space-between;margin-top:11px;font-size:13px;position:relative}
.cp-legend b{font-weight:680;color:#fff}
.cp-pending{opacity:.92}

/* ---------------- Badges ---------------- */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;line-height:1.5}
.badge-green{background:var(--positive-tint);color:var(--positive)}
.badge-teal{background:var(--primary-tint);color:var(--primary-dark)}
.badge-amber{background:var(--amber-tint);color:var(--amber)}
.badge-red{background:var(--negative-tint);color:var(--negative)}
.badge-blue{background:var(--blue-tint);color:var(--blue)}
.badge-grey{background:var(--surface-2);color:var(--muted)}
html[data-theme="dark"] .badge-teal{color:var(--primary)}

/* ---------------- Tables ---------------- */
.table-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;
  letter-spacing:.4px;padding:11px 16px;border-bottom:1px solid var(--border);white-space:nowrap}
table.data td{padding:13px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:var(--surface-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------------- Buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;
  font-size:14px;font-weight:600;border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .12s,border-color .12s,transform .05s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn .ic{width:18px;height:18px}
.btn-primary{background:var(--primary);color:#1A1200}
.btn-primary:hover{background:var(--primary-dark)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-danger{background:var(--negative);color:#fff}
.btn-sm{padding:7px 12px;font-size:13px}

/* ---------------- Forms ---------------- */
.form-grid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:600;color:var(--text)}
.field .hint{font-size:12.5px;color:var(--muted);font-weight:400}
input[type=text],input[type=number],input[type=email],input[type=password],
input[type=date],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border-strong);border-radius:10px;
  font-size:14.5px;font-family:inherit;color:var(--text);background:var(--surface);
  transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-tint)}
textarea{resize:vertical;min-height:80px}

/* ---------------- Empty state ---------------- */
.empty{text-align:center;padding:52px 20px;color:var(--muted)}
.empty .ic{width:40px;height:40px;stroke-width:1.5;color:var(--muted-2);margin-bottom:12px}
.empty h3{margin:0 0 6px;color:var(--text);font-size:16px;font-weight:640;font-family:var(--display)}
.empty p{margin:0 0 18px;font-size:14px}

.stack > * + *{margin-top:16px}

/* ---------------- Responsive ---------------- */
@media (max-width:1080px){ .grid-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .22s ease}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .scrim{display:block}
  .main{margin-left:0}
  .menu-toggle{display:flex}
  .topbar{padding:16px 18px 4px;margin-left:52px}
  .content{padding:14px 18px 40px}
  .flash{margin:10px 18px 0}
  .form-grid{grid-template-columns:1fr}
  .grid-3,.grid-2{grid-template-columns:1fr}
}
@media (max-width:560px){ .grid-4{grid-template-columns:1fr} .stat-value{font-size:24px} }
@media (prefers-reduced-motion:reduce){*{transition:none!important}}