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

:root{
  --sb-bg:#111827;
  --sb-bg2:#0D1117;
  --sb-border:#1F2937;
  --sb-text:#6B7280;
  --sb-text-hi:#F9FAFB;
  --sb-label:#374151;
  --sb-active-bg:#1F2937;
  --sb-active-tx:#F9FAFB;
  --sb-active-bar:#F9FAFB;
  --sb-hover:#1A2332;
  --sb-icon:#4B5563;

  --tb-bg:#FFFFFF;
  --tb-border:#F3F4F6;

  --pg-bg:#F9FAFB;

  --card:#FFFFFF;
  --card-b:#F3F4F6;
  --card-sh:0 1px 2px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.03);
  --card-sh-md:0 4px 12px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);

  --txt:#111827;
  --txt2:#6B7280;
  --txt3:#9CA3AF;
  --txt4:#D1D5DB;

  --acc:#111827;
  --acc-lt:#F9FAFB;
  --acc-tx:#111827;

  --green:#16A34A;--green-lt:#F0FDF4;--green-tx:#15803D;--green-dk:#14532D;
  --amber:#D97706;--amber-lt:#FFFBEB;--amber-tx:#B45309;
  --red:#DC2626;--red-lt:#FEF2F2;--red-tx:#B91C1C;
  --blue:#2563EB;--blue-lt:#EFF6FF;--blue-tx:#1D4ED8;
  --purple:#7C3AED;--purple-lt:#F5F3FF;--purple-tx:#6D28D9;

  --div:#F3F4F6;
  --div2:#E5E7EB;
  --row-hov:#FAFAFA;

  --btn:#111827;--btn-tx:#FFFFFF;
  --input-bg:#fff;--input-b:#E5E7EB;--input-f:#111827;

  --radius-sm:5px;
  --radius:8px;
  --radius-lg:10px;
}

body{
  font-family:'Inter',sans-serif;
  background:var(--pg-bg);
  color:var(--txt);
  display:flex;height:100vh;overflow:hidden;
  font-size:13.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ── SCROLLBAR ───── */
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--div2);border-radius:4px;}

/* ══════════════════════════════════
   SIDEBAR
══════════════════════════════════ */
.sb{
  width:228px;min-width:228px;
  background:var(--sb-bg);
  border-right:1px solid var(--sb-border);
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;
}
.sb::-webkit-scrollbar{display:none;}

.sb-logo{
  padding:18px 16px 16px;
  border-bottom:1px solid var(--sb-border);
  display:flex;align-items:center;gap:10px;
}
.sb-mark{
  width:30px;height:30px;border-radius:6px;
  background:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sb-mark svg{width:16px;height:16px;stroke:#111827;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.sb-brand{font-weight:700;font-size:13.5px;color:var(--sb-text-hi);letter-spacing:-.2px;}
.sb-ver{font-size:10px;color:var(--sb-label);letter-spacing:.5px;text-transform:uppercase;margin-top:1px;}

.sb-grp{padding:18px 0 6px;}
.sb-grp-label{
  font-size:10px;font-weight:600;
  letter-spacing:.7px;text-transform:uppercase;
  color:var(--sb-label);
  padding:0 14px 5px;
}
.nav-i{
  display:flex;align-items:center;gap:9px;
  padding:7.5px 14px;
  cursor:pointer;
  color:var(--sb-text);font-size:13px;font-weight:500;
  position:relative;
  transition:color .12s,background .12s;
  margin:1px 6px;border-radius:var(--radius-sm);
  text-decoration:none;
}
.nav-i:hover{background:var(--sb-hover);color:var(--sb-text-hi);}
.nav-i:hover .ni{color:var(--sb-text-hi);}
.nav-i.on{
  background:var(--sb-active-bg);
  color:var(--sb-active-tx);font-weight:600;
}
.nav-i.on .ni{color:var(--sb-active-tx);}
.nav-i.on::before{
  content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:3px;height:16px;border-radius:0 3px 3px 0;
  background:var(--sb-active-bar);
}
.ni{width:15px;height:15px;flex-shrink:0;color:var(--sb-icon);display:flex;align-items:center;justify-content:center;}
.ni svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.nb{
  margin-left:auto;
  font-size:10.5px;font-weight:700;
  padding:1.5px 6px;border-radius:10px;min-width:18px;text-align:center;
  background:#374151;color:#9CA3AF;
}
.nb.red{background:var(--red-lt);color:var(--red-tx);}
.nb.amber{background:var(--amber-lt);color:var(--amber-tx);}

.sb-sep{height:1px;background:var(--sb-border);margin:6px 14px;}

.sb-foot{
  margin-top:auto;
  border-top:1px solid var(--sb-border);
  padding:14px 16px;
}
.sb-user{display:flex;align-items:center;gap:10px;}
.sb-av{
  width:28px;height:28px;border-radius:50%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;color:#111827;flex-shrink:0;
  letter-spacing:.3px;
}
.sb-un{font-size:12.5px;font-weight:600;color:var(--sb-text-hi);}
.sb-ur{font-size:11px;color:var(--sb-label);margin-top:1px;}
.sb-logout{margin-left:auto;color:var(--sb-icon);cursor:pointer;}
.sb-logout svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* ══════════════════════════════════
   MAIN
══════════════════════════════════ */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}

/* TOPBAR */
.tb{
  background:var(--tb-bg);
  border-bottom:1px solid var(--tb-border);
  padding:0 22px;height:50px;
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.tb-bc{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--txt3);}
.tb-bc svg{width:13px;height:13px;stroke:var(--txt4);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.tb-bc b{color:var(--txt);font-weight:600;}
.tb-bc a{color:var(--txt3);text-decoration:none;}
.tb-bc a:hover{color:var(--txt);}
.tb-sp{flex:1;}

.tb-search{
  display:flex;align-items:center;gap:7px;
  background:var(--pg-bg);
  border:1px solid var(--input-b);border-radius:var(--radius-sm);
  padding:5px 11px;width:200px;
}
.tb-search svg{width:13px;height:13px;stroke:var(--txt3);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.tb-search input{border:none;outline:none;background:transparent;font-size:12.5px;color:var(--txt);font-family:'Inter',sans-serif;width:100%;}
.tb-search input::placeholder{color:var(--txt3);}

.tb-sel{
  display:flex;align-items:center;gap:7px;
  background:var(--input-bg);border:1px solid var(--input-b);border-radius:var(--radius-sm);
  padding:5px 11px;font-size:12.5px;font-weight:500;color:var(--txt);cursor:pointer;
  white-space:nowrap;
}
.tb-sel svg{width:13px;height:13px;stroke:var(--txt3);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.on-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;}

.tb-icon{
  width:30px;height:30px;border-radius:var(--radius-sm);
  background:var(--input-bg);border:1px solid var(--input-b);
  display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;
}
.tb-icon svg{width:14px;height:14px;stroke:var(--txt2);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.notif-pip{
  position:absolute;top:6px;right:6px;
  width:5px;height:5px;border-radius:50%;
  background:var(--red);border:1px solid var(--tb-bg);
}

.tb-user{
  display:flex;align-items:center;gap:8px;
  padding:4px 10px;border-radius:var(--radius-sm);
  background:var(--input-bg);border:1px solid var(--input-b);cursor:pointer;
}
.tb-uav{
  width:22px;height:22px;border-radius:50%;
  background:var(--btn);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;color:#fff;letter-spacing:.3px;
}
.tb-uname{font-size:12px;font-weight:600;color:var(--txt);}
.tb-user svg{width:11px;height:11px;stroke:var(--txt3);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* CONTENT */
.content{flex:1;overflow-y:auto;padding:20px 22px 32px;}

/* PAGE HEADER */
.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;}
.ph-title{font-size:19px;font-weight:700;color:var(--txt);letter-spacing:-.4px;}
.ph-sub{font-size:12px;color:var(--txt3);margin-top:3px;display:flex;align-items:center;gap:6px;}
.ph-sub-dot{width:3px;height:3px;border-radius:50%;background:var(--txt4);}
.ph-acts{display:flex;align-items:center;gap:8px;}

.btn-ghost{
  display:flex;align-items:center;gap:6px;
  background:var(--input-bg);color:var(--txt2);
  border:1px solid var(--input-b);border-radius:var(--radius-sm);
  padding:7px 13px;font-size:12.5px;font-weight:500;
  cursor:pointer;font-family:'Inter',sans-serif;
  white-space:nowrap;
  text-decoration:none;
}
.btn-ghost svg{width:13px;height:13px;stroke:var(--txt2);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.btn-pri{
  display:flex;align-items:center;gap:6px;
  background:var(--btn);color:var(--btn-tx);
  border:none;border-radius:var(--radius-sm);
  padding:7px 14px;font-size:12.5px;font-weight:600;
  cursor:pointer;font-family:'Inter',sans-serif;
  white-space:nowrap;
  text-decoration:none;
}
.btn-pri svg{width:13px;height:13px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* ── KPI GRID ─── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;}
.kpi{
  background:var(--card);
  border:1px solid var(--card-b);
  border-radius:var(--radius-lg);
  padding:16px 18px 14px;
  box-shadow:var(--card-sh);
  position:relative;overflow:hidden;
}
.kpi-row1{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;}
.kpi-icon{
  width:32px;height:32px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.kpi-icon svg{width:15px;height:15px;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.kpi-trend{
  display:flex;align-items:center;gap:3px;
  font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px;
}
.kpi-trend svg{width:10px;height:10px;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.t-up{background:var(--green-lt);color:var(--green-tx);}
.t-up svg{stroke:var(--green-tx);}
.t-dn{background:var(--red-lt);color:var(--red-tx);}
.t-dn svg{stroke:var(--red-tx);}
.t-neu{background:var(--div);color:var(--txt2);}
.kpi-val{font-size:27px;font-weight:700;color:var(--txt);letter-spacing:-.8px;line-height:1;margin-bottom:4px;}
.kpi-val sup{font-size:14px;font-weight:700;letter-spacing:0;vertical-align:super;}
.kpi-lbl{font-size:11.5px;color:var(--txt3);font-weight:500;}
.kpi-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:14px;padding-top:11px;
  border-top:1px solid var(--div);
}
.kpi-foot-lbl{font-size:11px;color:var(--txt3);}
.kpi-foot-val{font-size:11px;font-weight:600;color:var(--txt2);font-family:'JetBrains Mono',monospace;}

/* ── LAYOUT ROWS ─── */
.row{display:grid;gap:14px;margin-bottom:14px;}
.r-3-1{grid-template-columns:1fr 320px;}
.r-2{grid-template-columns:1fr 1fr;}
.r-3{grid-template-columns:1fr 1fr 1fr;}

/* ── CARD ─── */
.card{
  background:var(--card);
  border:1px solid var(--card-b);
  border-radius:var(--radius-lg);
  box-shadow:var(--card-sh);
  overflow:hidden;
}
.ch{
  padding:13px 16px;
  border-bottom:1px solid var(--div);
  display:flex;align-items:center;gap:9px;
}
.ch-ic{
  width:26px;height:26px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ch-ic svg{width:13px;height:13px;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.ch-title{font-size:13px;font-weight:700;color:var(--txt);flex:1;}
.ch-sub{font-size:11.5px;color:var(--txt3);margin-top:1px;}
.ch-link{
  font-size:12px;font-weight:600;color:var(--txt2);cursor:pointer;
  display:flex;align-items:center;gap:3px;white-space:nowrap;
  text-decoration:none;
}
.ch-link:hover{color:var(--txt);}
.ch-link svg{width:11px;height:11px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.cb{padding:16px;}

/* TABLE */
table{width:100%;border-collapse:collapse;}
thead th{
  font-size:10.5px;font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;
  color:var(--txt3);padding:9px 14px;
  border-bottom:1px solid var(--div);text-align:left;white-space:nowrap;
}
tbody td{
  padding:10px 14px;font-size:13px;color:var(--txt);
  border-bottom:1px solid var(--div);vertical-align:middle;
}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:var(--row-hov);}
.mono{font-family:'JetBrains Mono',monospace;font-size:12px;}
.td2{color:var(--txt2);}
.td3{color:var(--txt3);font-size:12px;}
.td-act{
  display:flex;align-items:center;gap:4px;
  font-size:12px;font-weight:600;color:var(--txt2);cursor:pointer;
  text-decoration:none;
}
.td-act:hover{color:var(--txt);}
.td-act svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.td-name{font-weight:600;font-size:13px;color:var(--txt);}
.td-meta{font-size:11.5px;color:var(--txt3);margin-top:1.5px;}

/* BADGE */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2.5px 8px;border-radius:4px;
  font-size:11px;font-weight:600;white-space:nowrap;
}
.badge svg{width:9px;height:9px;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.bg{background:var(--green-lt);color:var(--green-tx);}
.bg svg{stroke:var(--green-tx);}
.ba{background:var(--amber-lt);color:var(--amber-tx);}
.ba svg{stroke:var(--amber-tx);}
.br{background:var(--red-lt);color:var(--red-tx);}
.br svg{stroke:var(--red-tx);}
.bb{background:var(--blue-lt);color:var(--blue-tx);}
.bb svg{stroke:var(--blue-tx);}
.bp{background:var(--purple-lt);color:var(--purple-tx);}
.bp svg{stroke:var(--purple-tx);}
.bn{background:var(--div);color:var(--txt2);}

/* STOCK BAR */
.srows{display:flex;flex-direction:column;gap:12px;}
.srow{}
.srow-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.srow-name{font-size:12.5px;font-weight:600;color:var(--txt);display:flex;align-items:center;gap:6px;}
.srow-name svg{width:11px;height:11px;stroke:var(--txt3);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.srow-right{display:flex;align-items:center;gap:7px;}
.srow-pct{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--txt2);font-weight:500;}
.track{height:4px;background:var(--div);border-radius:4px;overflow:hidden;}
.fill{height:100%;border-radius:4px;transition:width .6s ease;}

/* CHART */
.chart-wrap{padding:16px 16px 0;}
.bar-chart{display:flex;align-items:flex-end;gap:4px;height:100px;}
.bc-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;}
.bc-bars{display:flex;gap:2px;align-items:flex-end;width:100%;height:100%;}
.bc-b{flex:1;border-radius:2px 2px 0 0;min-height:2px;}
.bc-b:hover{filter:brightness(1.1);}
.bc-lbl{font-size:9.5px;color:var(--txt3);font-family:'JetBrains Mono',monospace;margin-top:5px;white-space:nowrap;}
.chart-legend{
  display:flex;gap:14px;padding:10px 16px 14px;
  border-top:1px solid var(--div);
}
.leg{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--txt2);}
.leg-dot{width:9px;height:9px;border-radius:2px;flex-shrink:0;}
.chart-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--div);
}
.cs-cell{padding:12px 16px;border-right:1px solid var(--div);}
.cs-cell:last-child{border-right:none;}
.cs-val{font-size:16px;font-weight:700;color:var(--txt);letter-spacing:-.3px;}
.cs-lbl{font-size:11px;color:var(--txt3);margin-top:2px;}

/* ACTIVITY */
.act-feed{display:flex;flex-direction:column;}
.act-item{
  display:flex;align-items:flex-start;gap:11px;
  padding:11px 16px;border-bottom:1px solid var(--div);
  transition:background .1s;cursor:default;
}
.act-item:last-child{border-bottom:none;}
.act-item:hover{background:var(--row-hov);}
.act-ic{
  width:28px;height:28px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;
}
.act-ic svg{width:13px;height:13px;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.act-ti{font-size:13px;font-weight:600;color:var(--txt);}
.act-de{font-size:12px;color:var(--txt2);margin-top:2px;}
.act-tm{font-size:11px;color:var(--txt3);margin-top:3px;font-family:'JetBrains Mono',monospace;}
.act-r{margin-left:auto;padding-left:10px;flex-shrink:0;}

/* TOP SKU */
.sku-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 16px;border-bottom:1px solid var(--div);
}
.sku-item:last-child{border-bottom:none;}
.sku-rank{
  width:20px;text-align:center;flex-shrink:0;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:var(--txt3);
}
.sku-name{flex:1;min-width:0;}
.sku-n{font-size:13px;font-weight:600;color:var(--txt);}
.sku-s{font-size:11.5px;color:var(--txt3);margin-top:1px;}
.sku-r{text-align:right;}
.sku-val{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600;color:var(--txt);}
.sku-bar{height:3px;background:var(--div);border-radius:3px;margin-top:5px;overflow:hidden;}
.sku-fill{height:100%;border-radius:3px;background:var(--btn);}

/* FRANCHISE TABLE */
.fr-row{
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;border-bottom:1px solid var(--div);
  transition:background .1s;
}
.fr-row:last-child{border-bottom:none;}
.fr-row:hover{background:var(--row-hov);}
.fr-av{
  width:28px;height:28px;border-radius:6px;
  background:var(--div);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:var(--txt2);flex-shrink:0;letter-spacing:.3px;
}
.fr-name{flex:1;font-size:13px;font-weight:600;color:var(--txt);}
.fr-loc{font-size:11.5px;color:var(--txt3);margin-top:1px;}
.fr-rev{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600;color:var(--txt);white-space:nowrap;}
.fr-revl{font-size:11px;color:var(--txt3);text-align:right;margin-top:1px;}

/* SUMMARY STRIP */
.sum-strip{
  background:var(--btn);
  border-radius:var(--radius-lg);
  padding:16px 20px;
  display:flex;align-items:center;gap:0;
  margin-bottom:14px;
}
.sum-item{flex:1;padding:0 20px;border-right:1px solid rgba(255,255,255,.12);}
.sum-item:first-child{padding-left:0;}
.sum-item:last-child{border-right:none;}
.sum-val{font-size:20px;font-weight:700;color:#fff;letter-spacing:-.4px;}
.sum-val sup{font-size:11px;font-weight:700;vertical-align:super;}
.sum-lbl{font-size:11px;color:rgba(255,255,255,.5);margin-top:3px;font-weight:500;}
.sum-delta{font-size:11px;font-weight:600;color:rgba(255,255,255,.7);margin-top:2px;display:flex;align-items:center;gap:3px;}
.sum-delta svg{width:9px;height:9px;stroke:rgba(255,255,255,.7);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* STEP STATUS */
.steps{display:flex;align-items:center;padding:0 4px;}
.step{display:flex;align-items:center;flex:1;}
.step:last-child{flex:none;}
.step-dot{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:10px;font-weight:700;
}
.step-dot svg{width:11px;height:11px;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.s-done{background:var(--green-lt);}
.s-done svg{stroke:var(--green-tx);}
.s-cur{background:var(--btn);}
.s-cur svg{stroke:#fff;}
.s-todo{background:var(--div);}
.s-todo svg{stroke:var(--txt3);}
.step-line{flex:1;height:1px;background:var(--div2);}
.step-line.done{background:var(--green);}
.step-lbl{font-size:10px;font-weight:600;color:var(--txt3);margin-top:4px;white-space:nowrap;}
.s-cur-lbl{color:var(--txt);}
.s-done-lbl{color:var(--green-tx);}
.step-col{display:flex;flex-direction:column;align-items:center;gap:0;}

/* EXTRA FORMS & UTILITIES */
.form-grp {
  margin-bottom: 15px;
}
.form-grp label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--txt);
}
.form-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--input-bg);
  border: 1px solid var(--input-b);
  border-radius: var(--radius);
  color: var(--txt);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}
.form-input:focus {
  border-color: var(--btn);
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.mt-4 {
  margin-top: 16px;
}
.mb-4 {
  margin-bottom: 16px;
}
.alert {
  padding: 10px 15px;
  border-radius: var(--radius);
  margin-bottom: 15px;
  font-weight: 500;
}
.alert-success {
  background: var(--green-lt);
  color: var(--green-tx);
  border: 1px solid var(--green);
}
.alert-danger {
  background: var(--red-lt);
  color: var(--red-tx);
  border: 1px solid var(--red);
}
.badge-btn {
  border: none;
  cursor: pointer;
}
.po-row-btn {
  background: none;
  border: none;
  color: var(--red-tx);
  cursor: pointer;
  font-weight: 600;
}
.po-table th, .po-table td {
  padding: 8px 12px;
}

/* ── SEARCHABLE SELECT DROPDOWN ── */
.searchable-select {
  position: relative;
  width: 100%;
}
.searchable-select-input {
  width: 100%;
  padding: 8px 12px;
  padding-right: 32px;
  background: var(--input-bg);
  border: 1px solid var(--input-b);
  border-radius: var(--radius);
  color: var(--txt);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
}
.searchable-select-input:focus {
  border-color: var(--btn);
}
.searchable-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  pointer-events: none;
  stroke: var(--txt3);
  stroke-width: 2.5;
  fill: none;
  transition: transform 0.2s;
}
.searchable-select.open .searchable-select-arrow {
  transform: translateY(-50%) rotate(180deg);
}
.searchable-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10000;
  background: var(--card);
  border: 1px solid var(--div2);
  border-radius: var(--radius);
  box-shadow: var(--card-sh-md);
  max-height: 220px;
  overflow-y: auto;
  margin-top: 4px;
  display: none;
}
.searchable-select.open .searchable-select-dropdown {
  display: block;
}
.searchable-select-option {
  padding: 9px 12px;
  cursor: pointer;
  color: var(--txt);
  transition: background 0.1s, color 0.1s;
  font-size: 13px;
  text-align: left;
}
.searchable-select-option:hover,
.searchable-select-option.highlighted {
  background: var(--acc-lt);
  color: var(--acc-tx);
}
.searchable-select-option.selected {
  background: var(--btn);
  color: var(--btn-tx);
  font-weight: 600;
}
.searchable-select-no-results {
  padding: 10px 12px;
  color: var(--txt3);
  font-style: italic;
  font-size: 12.5px;
  text-align: center;
}

/* ══ MOBILE DEVICE APP STYLES (PURE LIGHT MODE) ══ */
.mobile-top-bar {
  display: none;
}
.mobile-bottom-bar {
  display: none;
}
.bottom-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  z-index: 1050;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.bottom-sheet-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FFFFFF;
  border-top: 1px solid var(--div2);
  border-radius: 20px 20px 0 0;
  z-index: 1100;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px 20px;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.08);
  color: var(--txt);
}
.bottom-sheet.open {
  transform: translateY(0);
}
.bottom-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--txt3);
  opacity: 0.5;
  border-radius: 2px;
  margin: -12px auto 16px auto;
}
.bottom-sheet-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 20px;
  text-align: center;
  letter-spacing: -0.3px;
}
.bottom-sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.bottom-sheet-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--acc-lt);
  border: 1px solid var(--div2);
  border-radius: var(--radius);
  padding: 14px 10px;
  color: var(--txt2);
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
}
.bottom-sheet-item:hover, .bottom-sheet-item:active {
  background: var(--row-hov);
  color: var(--txt);
  border-color: var(--purple-tx);
  transform: translateY(-1px);
}
.bottom-sheet-item svg {
  width: 22px;
  height: 22px;
  stroke: var(--txt2);
  fill: none;
}
.bottom-sheet-item:hover svg, .bottom-sheet-item:active svg {
  stroke: var(--purple-tx);
}
.bottom-sheet-item.logout-btn {
  background: var(--red-lt);
  border-color: rgba(220, 38, 38, 0.2);
  color: var(--red-tx);
}
.bottom-sheet-item.logout-btn:hover {
  background: var(--red-lt);
  border-color: var(--red);
  color: var(--red-tx);
}
.bottom-sheet-item.logout-btn svg {
  stroke: var(--red-tx);
}
.bottom-sheet-item.logout-btn:hover svg {
  stroke: var(--red-tx);
}

/* ══ PAGE SEARCH BAR (Desktop + Mobile) ══ */
.page-search-bar {
  margin-bottom: 16px;
}
.page-search-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--div2);
  border-radius: 10px;
  padding: 0 14px;
  height: 44px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.page-search-inner:focus-within {
  border-color: var(--purple-tx);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.08);
}
.page-search-icon {
  width: 16px;
  height: 16px;
  stroke: var(--txt3);
  flex-shrink: 0;
}
.page-search-inner input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0;
  height: 42px;
  font-size: 14px;
  color: var(--txt);
  outline: none;
}
.page-search-inner input::placeholder {
  color: var(--txt3);
  font-size: 13px;
}
#mobile-search-clear {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--txt3);
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mobile-search-clear:hover {
  background: var(--div);
  color: var(--txt2);
}

@media (max-width: 768px) {
  /* Search bar mobile tweaks */
  .page-search-bar {
    margin-bottom: 12px;
  }
  .page-search-inner {
    height: 40px;
    padding: 0 12px;
  }
  .page-search-inner input {
    font-size: 14px !important;
    height: 38px !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  /* Hide desktop sidebar */
  aside.sb {
    display: none !important;
  }
  
  /* Reset main layout offset for app layout spacing */
  .main {
    margin-left: 0 !important;
    padding-top: 60px !important;
    padding-bottom: 80px !important;
  }
  
  .content {
    padding: 16px !important;
    background: var(--pg-bg) !important;
  }
  
  /* Top Bar */
  .mobile-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--div2);
    padding: 0 16px;
    z-index: 1000;
  }
  .mobile-top-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
  }
  .mobile-top-logo-mark {
    width: 32px;
    height: 32px;
    background: var(--purple-tx);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
  }
  .mobile-top-logo-mark svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
    fill: none;
  }
  .mobile-top-logo-name {
    font-weight: 700;
    color: var(--txt);
    font-size: 15px;
    letter-spacing: -0.5px;
  }
  
  .mobile-top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* Bottom Bar */
  .mobile-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--div2);
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  
  .mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--txt2);
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    gap: 4px;
    position: relative;
    transition: all 0.2s ease;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
  }
  
  .mobile-tab.active {
    color: var(--purple-tx);
  }
  
  .mobile-tab svg {
    width: 20px;
    height: 20px;
    stroke: var(--txt2);
    transition: all 0.2s ease;
    fill: none;
  }
  
  .mobile-tab.active svg {
    stroke: var(--purple-tx);
    transform: translateY(-2px);
  }

  .mobile-tab-badge {
    position: absolute;
    top: 6px;
    right: calc(50% - 16px);
    background: var(--red);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 8px;
    min-width: 14px;
    text-align: center;
    border: 1.5px solid #fff;
  }
  
  /* Hide standard desktop topbar */
  header.tb {
    display: none !important;
  }

  /* Form & layout improvements for mobile */
  .ph {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
    margin-bottom: 20px !important;
  }
  .ph-acts {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    display: flex;
    gap: 8px;
  }
  .ph-acts .btn-pri, .ph-acts .btn-sec, .ph-acts .btn-ghost {
    flex: 1;
    white-space: nowrap;
    text-align: center;
    justify-content: center;
    padding: 10px 14px;
    font-size: 13px;
  }
  
  /* Stack column rows */
  .row, .grid-2, .row.r-3-1 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  /* Dashboard Card UI Updates */
  .kpi-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .kpi {
    background: #FFFFFF !important;
    border: 1px solid var(--div2) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--card-sh) !important;
    padding: 16px !important;
  }
  
  .card {
    background: #FFFFFF !important;
    border: 1px solid var(--div2) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--card-sh) !important;
    margin-bottom: 16px;
  }

  /* Form input sizing for touch */
  .form-grp {
    margin-bottom: 16px;
  }
  
  .form-input, select, textarea {
    padding: 10px 12px !important;
    font-size: 14px !important;
    border-radius: var(--radius) !important;
    height: auto !important;
    border-color: var(--div2) !important;
  }

  /* Responsive Tables as Mobile Cards */
  .table-responsive {
    border: none !important;
  }
  
  table.tbl {
    display: block;
    width: 100% !important;
  }
  
  table.tbl thead {
    display: none;
  }
  
  table.tbl tbody, table.tbl tr, table.tbl td {
    display: block;
    width: 100% !important;
  }
  
  table.tbl tr {
    margin-bottom: 14px;
    background: #FFFFFF;
    border: 1px solid var(--div2);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: var(--card-sh);
  }
  
  table.tbl td {
    text-align: right;
    padding: 8px 0;
    border-bottom: 1px solid var(--div);
    position: relative;
    padding-left: 45%;
    font-size: 13px;
  }
  
  table.tbl td:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  
  table.tbl td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 40%;
    font-weight: 600;
    text-align: left;
    color: var(--txt2);
    font-size: 12.5px;
  }
  
  /* po-table (Products Request Dynamic Rows) mobile layout optimization */
  .po-table {
    display: block;
    width: 100%;
  }
  .po-table thead {
    display: none;
  }
  .po-table tbody, .po-table tr, .po-table td {
    display: block;
    width: 100%;
  }
  .po-table tr {
    border-bottom: 1px solid var(--div2);
    padding: 16px 12px;
    position: relative;
    background: rgba(255, 255, 255, 0.5);
  }
  .po-table td {
    padding: 8px 0 !important;
    border: none !important;
  }
  .po-table td:nth-child(1)::before {
    content: "Select Item";
    display: block;
    font-size: 11px;
    color: var(--txt2);
    margin-bottom: 4px;
    font-weight: 600;
    text-transform: uppercase;
  }
  .po-table td:nth-child(2)::before {
    content: "Request Quantity";
    display: block;
    font-size: 11px;
    color: var(--txt2);
    margin-bottom: 4px;
    font-weight: 600;
    text-transform: uppercase;
  }
  .po-table td:nth-child(3) {
    position: absolute;
    top: 12px;
    right: 12px;
    width: auto !important;
  }
  .remove-row-btn {
    background: var(--red-lt) !important;
    border: 1px solid rgba(220, 38, 38, 0.2) !important;
    color: var(--red-tx) !important;
    border-radius: 50% !important;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .remove-row-btn svg {
    stroke: var(--red-tx) !important;
  }

  /* po-create-table mobile layout optimization */
  .po-create-table {
    display: block;
    width: 100% !important;
  }
  .po-create-table thead {
    display: none !important;
  }
  .po-create-table tbody, .po-create-table tr, .po-create-table td {
    display: block !important;
    width: 100% !important;
  }
  .po-create-table tr {
    border-bottom: 1px solid var(--div2) !important;
    padding: 16px 12px !important;
    position: relative !important;
    background: rgba(255, 255, 255, 0.5) !important;
  }
  .po-create-table td {
    padding: 8px 0 !important;
    border: none !important;
    text-align: right !important;
    padding-left: 45% !important;
    position: relative !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
  }
  .po-create-table td::before {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40% !important;
    font-weight: 600 !important;
    text-align: left !important;
    color: var(--txt2) !important;
    font-size: 12.5px !important;
    text-transform: uppercase !important;
  }
  .po-create-table td:nth-child(1)::before {
    content: "Select Material" !important;
  }
  .po-create-table td:nth-child(2)::before {
    content: "Supplier" !important;
  }
  .po-create-table td:nth-child(3)::before {
    content: "Quantity" !important;
  }
  .po-create-table td:nth-child(4) {
    position: static !important;
    width: 100% !important;
  }
  .po-create-table td:nth-child(4)::before {
    content: "Unit Price (₹)" !important;
    display: block !important;
  }
  .po-create-table td:nth-child(5)::before {
    content: "Subtotal (₹)" !important;
  }
  .po-create-table td:nth-child(6) {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: auto !important;
    padding-left: 0 !important;
    min-height: auto !important;
    border: none !important;
  }
  .po-create-table td:nth-child(6)::before {
    display: none !important;
  }

  /* ── Sum Strip (Financial Summary) ── */
  .sum-strip {
    flex-direction: column !important;
    gap: 0 !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
  }
  .sum-strip .sum-item {
    border-right: none !important;
    border-bottom: 1px solid var(--div) !important;
    padding: 12px 16px !important;
  }
  .sum-strip .sum-item:last-child {
    border-bottom: none !important;
  }
  .sum-strip .sum-val {
    font-size: 16px !important;
  }
  .sum-strip .sum-lbl {
    font-size: 11px !important;
  }

  /* ── Table cells with complex inner content ── */
  table.tbl td[data-label="Actions"],
  table.tbl td[data-label="Name"] {
    padding-left: 0 !important;
    text-align: left !important;
  }
  table.tbl td[data-label="Actions"]::before,
  table.tbl td[data-label="Name"]::before {
    position: static !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 6px;
  }
  table.tbl td[data-label="Actions"] > div {
    justify-content: flex-start !important;
  }

  /* ── Production table (outlet kitchen) mobile layout ── */
  .prod-table {
    display: block;
    width: 100% !important;
  }
  .prod-table thead {
    display: none;
  }
  .prod-table tbody, .prod-table tr, .prod-table td {
    display: block;
    width: 100%;
  }
  .prod-table tr {
    border-bottom: 1px solid var(--div2);
    padding: 16px 12px;
    position: relative;
    background: rgba(255, 255, 255, 0.5);
  }
  .prod-table td {
    padding: 8px 0 !important;
    border: none !important;
  }
  .prod-table td:nth-child(1)::before {
    content: "Material";
    display: block;
    font-size: 11px;
    color: var(--txt2);
    margin-bottom: 4px;
    font-weight: 600;
    text-transform: uppercase;
  }
  .prod-table td:nth-child(2)::before {
    content: "Qty to Use";
    display: block;
    font-size: 11px;
    color: var(--txt2);
    margin-bottom: 4px;
    font-weight: 600;
    text-transform: uppercase;
  }
  .prod-table td:nth-child(3) {
    position: absolute;
    top: 12px;
    right: 12px;
    width: auto !important;
  }
}