/* Shared Vyapar Setu (Marothia OMS) look-and-feel theme.
   Visual layer only — do not add logic/behavior here. */

:root{
  --bg:#0d1117;
  --card:#161b22;
  --border:#30363d;
  --accent:#e94560;
  --accent2:#4fa3e0;
  --text:#e6edf3;
  --muted:#8b949e;
  --success:#3fb950;
  --warning:#d29922;
  --danger:#f85149;
  --purple:#a371f7;
  --orange:#f0883e;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',sans-serif;min-height:100vh;}
a{color:var(--accent2);}

/* ============ TOPBAR ============ */
.topbar{
  background:#0a0e15;border-bottom:2px solid var(--accent);
  padding:10px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  position:sticky;top:0;z-index:200;
}
.topbar-logo{font-size:15px;font-weight:800;color:var(--accent);white-space:nowrap;text-decoration:none;}
.topbar-back{color:var(--accent2);text-decoration:none;font-size:13px;font-weight:600;cursor:pointer;background:none;border:none;}
.topbar-back:hover{text-decoration:underline;}
.topbar-title{font-size:14px;font-weight:700;color:var(--text);}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:13px;color:var(--muted);flex-wrap:wrap;}
.topbar-right a{color:var(--danger);text-decoration:none;font-weight:600;}
.topbar-right a:hover{text-decoration:underline;}

/* ============ TOP STATS BAR (KPI pill strip, dashboard only) ============ */
.topstats{background:#0a0e15;border-bottom:2px solid var(--accent);padding:8px 16px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;position:sticky;top:0;z-index:200;}
.topstats-logo{font-size:15px;font-weight:800;color:var(--accent);margin-right:8px;white-space:nowrap;}
.stat-pill.total .sp-val{color:var(--accent2);}
.stat-pill.pending .sp-val{color:var(--warning);}
.stat-pill.shipped .sp-val{color:var(--purple);}
.stat-pill.delivered .sp-val{color:var(--success);}
.stat-pill.rto .sp-val{color:var(--danger);}
.stat-pill.today_d .sp-val{color:var(--success);}
.stat-pill.today_r .sp-val{color:var(--accent2);}
.stat-pill.cancelled .sp-val{color:var(--muted);}
.topstats-right{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);}
.topstats-right a{color:var(--danger);text-decoration:none;font-weight:600;}
.topstats-right a:hover{text-decoration:underline;}

/* ============ ACTION BUTTON ROW (dashboard only) ============ */
.action-bar{background:var(--card);border-bottom:1px solid var(--border);padding:8px 16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.action-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;border:none;cursor:pointer;font-size:12px;font-weight:700;transition:all 0.2s;white-space:nowrap;text-decoration:none;}
.action-btn.dispatch{background:rgba(63,185,80,0.2);color:var(--success);border:1px solid var(--success);}
.action-btn.dispatch:hover{background:var(--success);color:#fff;}
.action-btn.returns{background:rgba(248,81,73,0.2);color:var(--danger);border:1px solid var(--danger);}
.action-btn.returns:hover{background:var(--danger);color:#fff;}
.action-btn.scanner{background:rgba(79,163,224,0.2);color:var(--accent2);border:1px solid var(--accent2);}
.action-btn.scanner:hover{background:var(--accent2);color:#fff;}
.action-btn.orders{background:rgba(163,113,247,0.2);color:var(--purple);border:1px solid var(--purple);}
.action-btn.orders:hover{background:var(--purple);color:#fff;}
.action-btn.products{background:rgba(210,153,34,0.2);color:var(--warning);border:1px solid var(--warning);}
.action-btn.products:hover{background:var(--warning);color:#fff;}
.action-btn.fraud{background:rgba(248,81,73,0.15);color:var(--danger);border:1px solid rgba(248,81,73,0.4);}
.action-btn.fraud:hover{background:var(--danger);color:#fff;}
.action-btn.finance{background:rgba(240,136,62,0.2);color:var(--orange);border:1px solid var(--orange);}
.action-btn.finance:hover{background:var(--orange);color:#fff;}

/* body.has-topstats: dashboard stacks topstats(~50px)+action-bar(~50px) above the
   sidebar instead of the plain 53px .topbar, so the sticky offset/height grow to match. */
body.has-topstats .main-layout{min-height:calc(100vh - 100px);}
body.has-topstats .sidebar{top:100px;height:calc(100vh - 100px);}

/* ============ LAYOUT: sidebar (dashboard) ============ */
.main-layout{display:flex;min-height:calc(100vh - 53px);align-items:flex-start;}
.sidebar{
  width:200px;background:var(--card);border-right:1px solid var(--border);
  padding:16px 0;flex-shrink:0;position:sticky;top:53px;
  height:calc(100vh - 53px);overflow-y:auto;
}
.nav-item{
  display:flex;align-items:center;gap:8px;padding:10px 16px;cursor:pointer;
  color:var(--muted);font-size:13px;text-decoration:none;transition:all 0.15s;
  border-left:3px solid transparent;
}
.nav-item:hover,.nav-item.active{color:var(--text);background:rgba(233,69,96,0.1);border-left-color:var(--accent);}
.nav-item .ic{font-size:15px;width:18px;text-align:center;flex-shrink:0;}
.nav-divider{height:1px;background:var(--border);margin:8px 12px;}
.nav-section-label{padding:10px 16px 4px;font-size:10px;letter-spacing:0.5px;text-transform:uppercase;color:var(--muted);opacity:0.7;}

.content{flex:1;padding:20px;overflow-x:hidden;min-width:0;}
main{padding:20px;max-width:1200px;margin:0 auto;}

/* ============ CARDS / SECTIONS ============ */
.table-card,.section,.card{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  overflow:hidden;margin-bottom:20px;
}
.table-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.table-header h3,.section h3,.card h3{font-size:14px;font-weight:700;}
.section{padding:20px;}
.section h3{margin-bottom:14px;}
.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}

/* ============ FORMS ============ */
input[type=text],input[type=date],input[type=number],input[type=password],
input[type=email],input[type=search],select,textarea{
  background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:7px;
  color:var(--text);padding:7px 11px;font-size:12px;outline:none;font-family:inherit;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent2);}
select option{background:var(--card);}
label{color:var(--muted);font-size:11px;}

/* ============ BUTTONS ============ */
.btn{padding:7px 14px;border-radius:7px;border:none;cursor:pointer;font-size:12px;font-weight:700;transition:all 0.2s;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-success{background:var(--success);color:#fff;}
.btn-secondary{background:rgba(255,255,255,0.08);color:var(--text);border:1px solid var(--border);}
.btn-sm{padding:4px 9px;font-size:11px;}
.btn:hover{filter:brightness(1.12);}

/* ============ TABLES ============ */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:12px;}
th{background:rgba(255,255,255,0.04);padding:9px 11px;text-align:left;color:var(--muted);font-weight:600;font-size:11px;border-bottom:1px solid var(--border);white-space:nowrap;}
td{padding:9px 11px;border-bottom:1px solid rgba(255,255,255,0.04);vertical-align:middle;}
tr:hover td{background:rgba(255,255,255,0.03);}

/* ============ BADGES / STATUS PILLS ============ */
.badge,.status-pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600;}
.badge-pending,.st-Pending{background:rgba(210,153,34,0.2);color:var(--warning);}
.badge-delivered,.st-Delivered{background:rgba(63,185,80,0.2);color:var(--success);}
.badge-rto,.st-RTO,.st-Cancelled{background:rgba(248,81,73,0.2);color:var(--danger);}
.badge-shipped,.st-Shipped{background:rgba(79,163,224,0.2);color:var(--accent2);}
.badge-lost{background:rgba(139,148,158,0.2);color:var(--muted);}

/* ============ KPI ROW ============ */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px;}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px;}
.kpi .label{font-size:11px;color:var(--muted);text-transform:uppercase;}
.kpi .val{font-size:22px;font-weight:700;margin-top:4px;}

/* topstats pill variant (used on dashboard top bar) */
.stat-pill{display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:8px;padding:4px 10px;min-width:70px;cursor:default;}
.stat-pill .sp-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;}
.stat-pill .sp-val{font-size:16px;font-weight:800;line-height:1.2;}

/* ============ PAGINATION ============ */
.pagination,.pager{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 16px;flex-wrap:wrap;}
.page-btn,.pager button{padding:5px 10px;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:5px;color:var(--text);cursor:pointer;font-size:12px;}
.page-btn:hover,.page-btn.active,.pager button:hover{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ============ MODAL ============ */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:1000;align-items:center;justify-content:center;}
.modal-overlay.show{display:flex;}
.modal{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px;max-width:620px;width:90%;max-height:90vh;overflow-y:auto;}
.modal h3{font-size:16px;font-weight:700;margin-bottom:18px;}
.modal-close{float:right;background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;}

/* ============ TOAST ============ */
.toast{position:fixed;bottom:20px;right:20px;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px 18px;font-size:13px;z-index:9999;transform:translateY(100px);opacity:0;transition:all 0.3s;max-width:350px;}
.toast.show{transform:translateY(0);opacity:1;}
.toast.success{border-color:var(--success);color:var(--success);}
.toast.error{border-color:var(--danger);color:var(--danger);}
.toast.warning{border-color:var(--warning);color:var(--warning);}

/* ============ MISC ============ */
.loading{text-align:center;padding:30px;color:var(--muted);}
.empty{color:var(--muted);text-align:center;padding:16px;font-size:13px;}
.spinner{display:inline-block;width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.progress-bar{height:5px;background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden;margin:10px 0;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:3px;transition:width 0.3s;}

@media(max-width:768px){
  .sidebar{display:none;}
  .kpi-row{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));}
  .topstats{gap:4px;}
  .stat-pill{min-width:55px;padding:3px 7px;}
  .stat-pill .sp-val{font-size:14px;}
}