:root{
  /* Signal Map — indigo + route-line coral, warmer/rounder than the previous navy+teal */
  --bg:#F7F8FB; --surface:#FFFFFF; --surface-alt:#EEF0FA;
  --ink:#1E1B4B; --ink-muted:#5B5A78; --ink-faint:#8B8AA3;
  --primary:#3730A3; --primary-soft:#E7E5FB;
  --accent:#EA580C; --accent-dark:#C2410C; --accent-soft:#FDE7DA;
  --amber:#C2760C; --amber-soft:#FBF0DA;
  --green:#15803D; --green-soft:#E4F5EC;
  --red:#B4322A; --red-soft:#FBEAE8;
  --violet:#5B4FC4; --violet-soft:#EBE9FB;
  --border:#E1E4EA; --radius:10px;
  --shadow:0 1px 2px rgba(30,27,75,.06), 0 4px 16px rgba(30,27,75,.05);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg); color:var(--ink); font-family:'Inter','Noto Sans Bengali',system-ui,sans-serif; font-size:14px; line-height:1.5;}
h1,h2,h3{font-family:'Plus Jakarta Sans','Noto Sans Bengali',sans-serif; letter-spacing:-0.01em; margin:0;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;}
button, input, select, textarea{font-family:inherit; font-size:13.5px;}

.shell{display:flex; min-height:100vh;}
.sidebar{width:236px; flex:0 0 236px; background:var(--primary); color:#fff; padding:22px 16px; position:sticky; top:0; height:100vh; overflow-y:auto; transition:transform .2s ease; z-index:30;}
.brand{display:flex; align-items:center; gap:10px; padding:2px 6px 22px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:18px;}
.brand-mark{width:32px; height:37px; border-radius:6px; background:#fff; display:flex; align-items:center; justify-content:center; flex:none; padding:2px; box-shadow:0 1px 3px rgba(0,0,0,.15);}
.brand-mark svg{width:16px; height:16px; color:#fff;}
.brand-name{font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:16.5px;}
.brand-sub{font-size:10.5px; color:rgba(255,255,255,.5); text-transform:uppercase;}
.nav-section-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.38); margin:14px 10px 8px;}
.nav-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:rgba(255,255,255,.72); font-size:13.5px; font-weight:500; margin-bottom:2px; text-decoration:none;}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff;}
.nav-item.active{background:rgba(255,255,255,.13); color:#fff;}
.nav-badge{margin-left:auto; background:var(--accent); color:#04231f; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:20px;}
.sidebar-foot{margin-top:22px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12);}
.territory-chip{display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px; background:rgba(255,255,255,.06);}
.territory-avatar{width:28px; height:28px; border-radius:7px; background:var(--accent-soft); color:var(--accent-dark); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px;}
.territory-name{font-size:12.5px; font-weight:600; color:#fff;}
.territory-role{font-size:10.5px; color:rgba(255,255,255,.5);}

.main{flex:1; min-width:0;}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 28px; background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5;}
.topbar-title{font-size:19px; font-weight:700;}
.topbar-sub{font-size:12.5px; color:var(--ink-muted);}
.hamburger{display:none; background:none; border:1px solid var(--border); border-radius:8px; width:36px; height:36px; align-items:center; justify-content:center;}

.content{padding:26px 28px 60px; max-width:1180px;}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; gap:16px; flex-wrap:wrap;}
.page-head p{margin:4px 0 0; color:var(--ink-muted); font-size:13.5px;}

.btn{display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:8px; border:1px solid var(--border); background:var(--surface); font-size:13px; font-weight:600; color:var(--ink); text-decoration:none; cursor:pointer;}
.btn.primary{background:var(--primary); color:#fff; border-color:var(--primary);}
.btn.accent{background:var(--accent); color:#04231f; border-color:var(--accent);}
.btn:disabled{opacity:.55; cursor:default;}

.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px;}
.kpi-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);}
.kpi-card-link{display:block; text-decoration:none; color:inherit; transition:box-shadow .12s ease, border-color .12s ease;}
.kpi-card-link:hover{box-shadow:0 4px 16px rgba(15,27,45,.12); border-color:var(--accent);}
.kpi-label{font-size:12px; color:var(--ink-muted); margin-bottom:8px;}
.kpi-value{font-family:'Plus Jakarta Sans',sans-serif; font-size:26px; font-weight:700;}

.quick-actions{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px;}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:22px; overflow:hidden;}
.card-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border); gap:10px; flex-wrap:wrap;}
.card-head h3{font-size:15px; font-weight:700;}
.card-head .hint{font-size:12px; color:var(--ink-muted);}
table{width:100%; border-collapse:collapse;}
th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); padding:10px 18px; border-bottom:1px solid var(--border); background:var(--surface-alt);}
td{padding:13px 18px; border-bottom:1px solid var(--border); font-size:13.5px;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--surface-alt);}
.idcell{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-muted);}

.pill{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px;}
.pill-amber{background:var(--amber-soft); color:var(--amber);}
.pill-violet{background:var(--violet-soft); color:var(--violet);}
.pill-blue{background:var(--accent-soft); color:var(--accent-dark);}
.pill-green{background:var(--green-soft); color:var(--green);}
.pill-red{background:var(--red-soft); color:var(--red);}
.pill-neutral{background:var(--surface-alt); color:var(--ink-muted);}
/* Legacy class names kept as aliases so any old markup still renders correctly. */
.pill.pending{background:var(--amber-soft); color:var(--amber);}
.pill.approved,.pill.active{background:var(--green-soft); color:var(--green);}
.pill.rejected,.pill.suspended{background:var(--red-soft); color:var(--red);}
.pill.shipped{background:var(--accent-soft); color:var(--accent-dark);}
.pill.delivered,.pill.quoted,.pill.invited{background:var(--primary-soft); color:var(--primary);}

.banner{display:flex; gap:12px; background:var(--accent-soft); border:1px solid #BFE7E3; border-radius:var(--radius); padding:13px 16px; margin-bottom:20px; font-size:12.5px; color:var(--accent-dark);}
.rule-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; padding:18px;}
.rule-item{display:flex; flex-direction:column; gap:4px; padding-bottom:12px; border-bottom:1px solid var(--border);}
.rule-label{font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); font-weight:600;}
.rule-value{font-size:14px; font-weight:600; color:var(--ink);}
.banner.violet{background:var(--violet-soft); border-color:#D6D2F5; color:var(--violet);}
.banner.error{background:var(--red-soft); border-color:#F3C7C3; color:var(--red);}
.footnote{font-size:11.5px; color:var(--ink-faint); margin-top:10px;}

.filter-bar{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr auto; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px; margin-bottom:16px; align-items:end;}
.filter-bar-inline{display:flex; flex-wrap:wrap; gap:12px; align-items:end; padding-bottom:16px;}
.filter-bar-inline .field{min-width:140px;}
.field label{display:block; font-size:11.5px; font-weight:700; color:var(--ink-muted); margin-bottom:6px;}
.field input,.field select,.field textarea{width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:8px; background:var(--surface-alt); color:var(--ink);}
.field textarea{min-height:80px; resize:vertical;}
.field .opt{font-weight:400; color:var(--ink-faint); font-size:11px;}

.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.product-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;}
.product-thumb{height:100px; display:flex; align-items:center; justify-content:center; background:var(--surface-alt); position:relative; font-weight:700; color:var(--ink-muted);}
.cat-tag{position:absolute; top:9px; right:9px; background:rgba(15,27,45,.72); color:#fff; font-size:10px; font-weight:700; padding:3px 8px; border-radius:999px; text-transform:uppercase;}
.product-body{padding:13px 14px 14px;}
.product-name{font-weight:700; font-size:13.5px; margin-bottom:4px;}
.product-meta{font-size:11.5px; color:var(--ink-muted);}
.product-price{font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:14.5px; margin-top:4px;}
.emi-tag{font-size:10.5px; font-weight:700; color:var(--green);}
.installment-detail{font-size:10.5px; color:var(--ink-muted);}
.qty-stepper{display:flex; align-items:center; gap:6px; flex-wrap:nowrap;}
.qty-btn{width:30px; height:30px; flex:none; border:1px solid var(--border); border-radius:6px; background:var(--surface); font-weight:700; font-size:15px; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center;}
.qty-btn:hover{background:var(--surface-alt);}
.qty-input{flex:1; min-width:0; text-align:center; padding:6px 4px; border:1px solid var(--border); border-radius:6px; background:var(--surface);}

/* Image lightbox — used for product photos so "closing" is always one obvious click. */
.lightbox-overlay{position:fixed; inset:0; background:rgba(15,27,45,.86); display:none; align-items:center; justify-content:center; z-index:100; padding:40px 24px;}
.lightbox-overlay.open{display:flex;}
.lightbox-content{position:relative; max-width:92vw; max-height:88vh;}
.lightbox-content img{max-width:92vw; max-height:88vh; border-radius:10px; box-shadow:0 24px 70px rgba(0,0,0,.45); display:block;}
.lightbox-close{position:absolute; top:-16px; right:-16px; width:38px; height:38px; border-radius:50%; background:#fff; border:none; font-size:18px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.35); color:var(--ink);}
.lightbox-close:hover{background:var(--surface-alt);}

.cart-icon-link{position:relative; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:8px; color:var(--ink-muted); flex:none;}
.cart-icon-link:hover{background:var(--surface-alt); color:var(--ink);}
.cart-icon-link svg{width:20px; height:20px;}
.cart-badge{position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:var(--accent); color:#04231f; font-size:10.5px; font-weight:800; display:flex; align-items:center; justify-content:center; line-height:1;}
.lang-switch-top{display:flex; gap:4px;}
.lang-switch-top button{padding:5px 11px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--ink-muted); font-size:11.5px; font-weight:700; cursor:pointer;}
.lang-switch-top button.active{background:var(--primary); color:#fff; border-color:var(--primary);}
.pw-field{position:relative;}
.pw-field input{padding-right:38px;}
.pw-toggle-btn{position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--ink-muted); padding:5px; display:flex; align-items:center; justify-content:center; border-radius:6px;}
.pw-toggle-btn:hover{color:var(--ink); background:var(--surface-alt);}
@keyframes btn-spin{to{transform:rotate(360deg);}}
.btn-spinner{display:inline-block; width:13px; height:13px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:btn-spin .6s linear infinite; margin-right:7px; vertical-align:-2px;}
.btn:not(.primary):not(.accent) .btn-spinner{border-color:rgba(30,27,75,.25); border-top-color:var(--ink);}
.btn-loading{pointer-events:none; opacity:.75; cursor:wait !important;}

.form-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; margin-bottom:20px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:16px;}
.form-grid.two{grid-template-columns:1fr 1fr;}
.dropzone{border:1.5px dashed var(--border); border-radius:var(--radius); padding:26px; text-align:center; color:var(--ink-muted); font-size:12.5px; background:var(--surface-alt);}
.error-text{color:var(--red); font-size:12px; margin-top:4px;}

@media (max-width: 980px){
  .filter-bar{grid-template-columns:1fr 1fr;}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .form-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 880px){
  .sidebar{position:fixed; left:0; top:0; transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .hamburger{display:flex;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .form-grid{grid-template-columns:1fr;}
  .rule-grid{grid-template-columns:1fr;}
  .content{padding:18px 16px 50px;}
}
@media (max-width: 560px){
  .product-grid{grid-template-columns:1fr 1fr;}
  table{font-size:12px;}
  th,td{padding:9px 10px;}
}