:root{
  --obsidian:#0a0a0b;
  --paper:#fbfbfa;
  --ink:#121214;
  --graphite:#6e6e73;
  --graphite-soft:#9a9a9f;
  --hairline: rgba(17,17,19,0.09);
  --hairline-on-dark: rgba(255,255,255,0.14);
  --glass-bg: rgba(255,255,255,0.55);
  --glass-bg-strong: rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.9);
  --glass-bg-dark: rgba(10,10,11,0.55);
  --glass-border-dark: rgba(255,255,255,0.12);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --good:#1a8f4c;
  --warn:#b8860b;
  --bad:#ff3d1f;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
::selection{background:var(--ink);color:var(--paper);}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px;}

/* ---------- LOGIN ---------- */
.login-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--obsidian);padding:20px;
}
.login-card{
  width:100%;max-width:360px;
  background:var(--paper);border-radius:var(--radius-lg);
  padding:32px 28px;
}
.login-brand{display:flex;align-items:center;gap:9px;margin-bottom:26px;}
.login-brand .brand-mark{width:24px;height:24px;}
.login-brand .brand-mark svg{width:100%;height:100%;stroke:var(--ink);fill:none;stroke-width:1.6;}
.login-brand-word{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;letter-spacing:.06em;}
.login-title{font-size:20px;font-weight:600;letter-spacing:-0.015em;margin-bottom:4px;}
.login-sub{font-size:13px;color:var(--graphite);margin-bottom:22px;line-height:1.5;}
.login-field{margin-bottom:14px;}
.login-label{font-size:11.5px;font-weight:600;color:var(--graphite);margin-bottom:6px;display:block;}
.login-input{
  width:100%;padding:11px 13px;border-radius:var(--radius-sm);
  border:1.5px solid var(--hairline);background:#fff;font-size:14px;color:var(--ink);
  transition:border-color .2s var(--ease);
}
.login-input:focus-visible{outline:none;border-color:var(--ink);}
.login-input.is-invalid{border-color:var(--bad);}
.login-submit{
  width:100%;padding:12px;border-radius:999px;margin-top:6px;
  background:var(--ink);color:#fff;font-size:14px;font-weight:600;border:none;
  transition:background .2s var(--ease),opacity .2s var(--ease);
}
.login-submit:hover{background:#000;}
.login-submit:disabled{opacity:.55;cursor:default;}
.login-error{
  font-size:12.5px;color:var(--bad);background:rgba(255,61,31,.08);
  border-radius:var(--radius-sm);padding:9px 12px;margin-bottom:14px;line-height:1.5;display:none;
}
.login-error.is-shown{display:block;}
.login-loading-veil{
  position:fixed;inset:0;background:var(--obsidian);z-index:500;
  display:flex;align-items:center;justify-content:center;
}
.login-loading-veil svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.6;animation:spin .8s linear infinite;}

/* ---------- SHELL ---------- */
.shell{display:flex;min-height:100vh;}

/* ---------- SIDEBAR ---------- */
.sidebar{
  width:248px;flex-shrink:0;
  background:var(--obsidian);
  color:#fff;
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;height:100dvh;
  padding:22px 16px;
}
.brand{display:flex;align-items:center;gap:9px;padding:6px 8px 26px;}
.brand-mark{width:22px;height:22px;flex-shrink:0;}
.brand-mark svg{width:100%;height:100%;stroke:#fff;fill:none;stroke-width:1.6;}
.brand-word{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14.5px;letter-spacing:.06em;}
.brand-sub{font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.14em;text-transform:uppercase;margin-left:auto;}

.nav-group{margin-bottom:22px;}
.nav-label{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.32);padding:0 10px 8px;}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:10px;
  font-size:13.5px;font-weight:500;color:rgba(255,255,255,.7);
  cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease);
  position:relative;
}
.nav-item svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;flex-shrink:0;}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-item.is-active{background:rgba(255,255,255,.1);color:#fff;}
.nav-count{
  margin-left:auto;font-size:11px;font-weight:600;
  background:rgba(255,255,255,.14);padding:1px 7px;border-radius:999px;color:rgba(255,255,255,.85);
}
.nav-item.is-active .nav-count{background:#fff;color:var(--obsidian);}
.nav-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}

.sidebar-foot{margin-top:auto;flex-shrink:0;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);}
/* The nav list scrolls on its own so the account / sign-out block is
   always pinned inside the dark sidebar, however many items it holds. */
.sidebar-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;margin:0 -6px;padding:0 6px;}
.sidebar-scroll::-webkit-scrollbar{display:none;}
.user-chip{display:flex;align-items:center;gap:9px;padding:8px 8px;border-radius:12px;transition:background .2s var(--ease);}
.user-chip:hover{background:rgba(255,255,255,.06);}
.user-avatar{
  width:30px;height:30px;border-radius:999px;flex-shrink:0;
  background:rgba(255,255,255,.14);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;font-family:'Space Grotesk',sans-serif;
}
.user-chip-info{flex:1;min-width:0;}
.user-chip-name{font-size:12.5px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-chip-role{font-size:10.5px;color:rgba(255,255,255,.42);text-transform:capitalize;}
.signout-btn{
  width:26px;height:26px;border-radius:999px;flex-shrink:0;border:none;
  display:flex;align-items:center;justify-content:center;background:transparent;
  transition:background .2s var(--ease);
}
.signout-btn:hover{background:rgba(255,255,255,.1);}
.signout-btn svg{width:13px;height:13px;stroke:rgba(255,255,255,.6);stroke-width:1.8;fill:none;}
.storage-note{font-size:10.5px;color:rgba(255,255,255,.32);line-height:1.5;padding:8px 10px 0;}

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

.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:16px;
  padding:16px clamp(20px,3vw,36px);
  background:var(--glass-bg-strong);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid var(--hairline);
}
.topbar-title{font-size:19px;font-weight:600;letter-spacing:-0.015em;flex-shrink:0;}
.search-shell{
  flex:1;max-width:380px;
  display:flex;align-items:center;gap:8px;
  padding:8px 13px;border-radius:999px;
  border:1px solid var(--hairline);background:#fff;
  transition:border-color .2s var(--ease);
}
.search-shell:focus-within{border-color:rgba(18,18,20,.28);}
.search-shell svg{width:14px;height:14px;stroke:var(--graphite);flex-shrink:0;}
.search-shell input{all:unset;flex:1;font-size:13.5px;}
.search-shell input::placeholder{color:var(--graphite-soft);}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px;}
.icon-btn{
  width:34px;height:34px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--hairline);background:#fff;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .15s var(--ease);
  position:relative;
}
.icon-btn svg{width:15px;height:15px;stroke:var(--ink);stroke-width:1.8;fill:none;}
.icon-btn:hover{border-color:rgba(17,17,19,.28);background:rgba(10,10,11,.03);}
.icon-btn:active{transform:scale(.92);}
.icon-btn.is-spinning svg{animation:spin .7s linear;}
.icon-btn:disabled{opacity:.4;cursor:default;}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ---------- ALERT BANNERS (offline / overdue) ---------- */
.alert-banner{
  display:flex;align-items:center;gap:10px;
  padding:11px clamp(20px,3vw,36px);
  font-size:12.5px;font-weight:500;
}
.alert-banner svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;flex-shrink:0;}
.alert-banner span{flex:1;}
.alert-banner.is-offline{background:var(--obsidian);color:#fff;}
.alert-banner.is-offline button{
  background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:4px 13px;font-size:11.5px;font-weight:600;cursor:pointer;
  transition:background .15s var(--ease);
}
.alert-banner.is-offline button:hover{background:rgba(255,255,255,.25);}
.alert-banner.is-overdue{background:rgba(255,61,31,.08);color:var(--bad);border-bottom:1px solid rgba(255,61,31,.16);}

.content{padding:22px clamp(20px,3vw,36px) 60px;max-width:1320px;width:100%;margin:0 auto;}

/* ---------- STAT STRIP ---------- */
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px;}
.trend-card{
  background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-md);
  padding:20px 22px;margin-bottom:22px;
}
.trend-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.trend-title{font-size:14.5px;font-weight:600;letter-spacing:-0.01em;}
.trend-sub{font-size:12px;color:var(--graphite);margin-top:1px;}
.trend-body{display:flex;align-items:stretch;gap:26px;}
.trend-metric{flex:0 0 130px;display:flex;flex-direction:column;justify-content:center;gap:4px;border-right:1px solid var(--hairline);padding-right:22px;}
.trend-metric-label{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);}
.trend-metric-value{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:28px;letter-spacing:-0.02em;}
.trend-metric-change{font-size:12px;font-weight:600;}
.trend-metric-change.is-up{color:var(--good);}
.trend-metric-change.is-down{color:var(--bad);}
.trend-metric-change.is-flat{color:var(--graphite);}
.trend-chart{flex:1;min-width:0;height:110px;}
.trend-chart svg{width:100%;height:100%;display:block;overflow:visible;}
.trend-chart-empty{display:flex;align-items:center;justify-content:center;height:100%;font-size:12.5px;color:var(--graphite-soft);}
.stat-card{
  background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-md);
  padding:16px 18px;
}
.stat-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);margin-bottom:6px;}
.stat-value{font-size:24px;font-weight:600;letter-spacing:-0.02em;font-family:'Space Grotesk',sans-serif;}
.stat-value sup{font-size:12px;font-weight:600;margin-left:2px;top:-8px;position:relative;color:var(--graphite);}
.stat-card .trend-metric-change{margin-top:5px;}

/* ---------- FILTER ROW ---------- */
.filter-row{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.chip{
  display:flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:999px;
  border:1px solid var(--hairline);background:#fff;
  font-size:12.5px;font-weight:500;color:var(--graphite);
  cursor:pointer;transition:all .2s var(--ease);
  white-space:nowrap;
}
.chip:hover{border-color:rgba(17,17,19,.24);color:var(--ink);}
.chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff;}
.filter-divider{width:1px;height:18px;background:var(--hairline);margin:0 2px;flex-shrink:0;}
.filter-spacer{flex:1;}
.sort-select{
  border:1px solid var(--hairline);background:#fff;border-radius:999px;
  padding:6px 30px 6px 13px;font-size:12.5px;font-weight:500;color:var(--ink);
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:12px;
  cursor:pointer;
}

/* ---------- BULK ACTION BAR ---------- */
.bulk-bar{
  display:none;align-items:center;gap:10px;
  background:var(--ink);color:#fff;border-radius:var(--radius-md);
  padding:10px 14px;margin-bottom:16px;
  font-size:12.5px;font-weight:500;
}
.bulk-bar.is-visible{display:flex;}
.bulk-bar-count{font-weight:600;letter-spacing:-0.01em;}
.bulk-bar-btn{
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:6px 14px;font-size:12px;font-weight:600;
  cursor:pointer;transition:background .15s var(--ease);
}
.bulk-bar-btn:hover{background:rgba(255,255,255,.2);}
.bulk-bar-btn.is-danger{background:var(--bad);border-color:var(--bad);}
.bulk-bar-btn.is-danger:hover{background:#e0350f;}

/* ---------- TABLE (shared: orders / team) ---------- */
.table-card{
  background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-md);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.order-row{
  display:grid;
  grid-template-columns:22px 82px 1fr 0.8fr 74px 88px 64px 96px 98px 96px 100px 26px;
  align-items:center;gap:14px;
  padding:13px 18px;
  border-bottom:1px solid var(--hairline);
  cursor:pointer;
  min-width:1090px;
  transition:background .15s var(--ease);
}
.order-row:last-child{border-bottom:none;}
.order-row:hover{background:rgba(10,10,11,.02);}
.order-row.is-keynav{background:rgba(10,10,11,.05);box-shadow:inset 2px 0 0 var(--ink);}
.order-row.header-row{
  cursor:default;background:rgba(10,10,11,.015);
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);
  padding:11px 18px;
}
.order-row.header-row:hover{background:rgba(10,10,11,.015);}
.row-check{width:15px;height:15px;border-radius:5px;border:1.5px solid var(--hairline);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all .15s var(--ease);}
.row-check.is-checked{background:var(--ink);border-color:var(--ink);}
.row-check svg{width:9px;height:9px;stroke:#fff;stroke-width:3;opacity:0;transition:opacity .1s;}
.row-check.is-checked svg{opacity:1;}
.row-ref{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:-0.01em;}
.row-cust{display:flex;flex-direction:column;gap:1px;min-width:0;}
.row-cust-name{font-size:13.5px;font-weight:600;letter-spacing:-0.008em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.row-cust-phone{font-size:11.5px;color:var(--graphite);font-variant-numeric:tabular-nums;}
.row-product{display:flex;flex-direction:column;gap:1px;min-width:0;}
.row-product-name{font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.row-product-meta{font-size:11px;color:var(--graphite-soft);}
.row-price{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.row-wilaya{font-size:12px;color:var(--graphite);}
.row-assignee{font-size:12px;color:var(--graphite);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.row-assignee.is-unassigned{color:var(--graphite-soft);font-style:italic;}
.row-assignee.is-assigned{display:flex;align-items:center;gap:6px;color:var(--ink);font-weight:600;}
.row-assignee-dot{width:6px;height:6px;border-radius:50%;background:var(--bad);flex-shrink:0;}

.status-pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;
  white-space:nowrap;
}
.status-pill .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.status-new{background:rgba(184,134,11,.12);color:var(--warn);}
.status-new .dot{background:var(--warn);}
.status-awaiting_response{background:rgba(59,110,168,.12);color:#3b6ea8;}
.status-awaiting_response .dot{background:#3b6ea8;}
.status-pending_payment{background:rgba(110,110,120,.12);color:#6e6e78;}
.status-pending_payment .dot{background:#6e6e78;}
.status-confirmed{background:rgba(30,60,114,.1);color:#1e3c72;}
.status-confirmed .dot{background:#1e3c72;}
.status-shipped{background:rgba(18,18,20,.08);color:var(--ink);}
.status-shipped .dot{background:var(--ink);}
.status-delivered{background:rgba(26,143,76,.12);color:var(--good);}
.status-delivered .dot{background:var(--good);}
.status-returned{background:rgba(180,83,9,.12);color:#b45309;}
.status-returned .dot{background:#b45309;}
.status-cancelled{background:rgba(255,61,31,.1);color:var(--bad);}
.status-cancelled .dot{background:var(--bad);}

.row-delivery{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--graphite);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.delivery-icon{display:inline-flex;flex-shrink:0;}
.delivery-icon svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;}

.call-pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;
  white-space:nowrap;
}
.call-pill .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.call-waiting{background:rgba(110,110,120,.12);color:#6e6e78;}
.call-waiting .dot{background:#6e6e78;}
.call-reachable{background:rgba(26,143,76,.12);color:var(--good);}
.call-reachable .dot{background:var(--good);}
.call-unreachable{background:rgba(184,134,11,.12);color:var(--warn);}
.call-unreachable .dot{background:var(--warn);}
.call-lost{background:rgba(255,61,31,.1);color:var(--bad);}
.call-lost .dot{background:var(--bad);}

.role-pill{
  display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;
  padding:3px 9px;border-radius:999px;text-transform:capitalize;
}
.role-admin{background:rgba(18,18,20,.08);color:var(--ink);}
.role-boss{background:rgba(184,134,11,.14);color:var(--warn);}
.role-employee{background:rgba(110,110,115,.1);color:var(--graphite);}

.row-chevron{width:15px;height:15px;stroke:var(--graphite-soft);stroke-width:1.8;fill:none;justify-self:end;}

.empty-state{padding:64px 24px;text-align:center;}
.empty-icon{width:44px;height:44px;margin:0 auto 16px;stroke:var(--graphite-soft);stroke-width:1.3;fill:none;}
.empty-title{font-size:15px;font-weight:600;margin-bottom:6px;}
.empty-sub{font-size:13px;color:var(--graphite);max-width:300px;margin:0 auto;line-height:1.5;}

/* ---------- PAGINATION ---------- */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:18px;flex-wrap:wrap;}
.page-btn{
  min-width:32px;height:32px;padding:0 4px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--hairline);background:#fff;color:var(--graphite);
  font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;
  transition:all .2s var(--ease);
}
.page-btn svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;}
.page-btn:hover:not(:disabled):not(.is-active){border-color:rgba(17,17,19,.28);color:var(--ink);}
.page-btn.is-active{background:var(--ink);border-color:var(--ink);color:#fff;cursor:default;}
.page-btn:disabled{opacity:.35;cursor:default;}
.page-ellipsis{width:20px;text-align:center;color:var(--graphite-soft);font-size:12.5px;}

/* ---------- TEAM VIEW ---------- */
.team-row{
  display:grid;grid-template-columns:1.3fr 80px 100px 90px 90px 80px 80px 70px;
  align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--hairline);
}
.team-row:last-child{border-bottom:none;}
.team-row.header-row{
  background:rgba(10,10,11,.015);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--graphite);padding:11px 18px;
}
.team-person{display:flex;align-items:center;gap:10px;min-width:0;}
.team-person-info{min-width:0;}
.team-person-name{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.team-person-email{font-size:11.5px;color:var(--graphite);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.team-stat{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;text-align:center;}
.team-stat-sub{font-size:10px;color:var(--graphite-soft);text-align:center;margin-top:1px;}

.stat-row{grid-template-columns:1.4fr 90px 90px 90px 60px;}
.stat-rank{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:700;
  background:rgba(184,134,11,.12);color:var(--warn);
}
.stat-rank.is-first{background:var(--warn);color:#fff;}
.stat-back-btn{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--graphite);
  background:#fff;padding:6px 12px;border:1px solid var(--hairline);border-radius:999px;
  transition:all .15s var(--ease);
}
.stat-back-btn:hover{color:var(--ink);border-color:rgba(18,18,20,.25);background:rgba(10,10,11,.03);}
.stat-focus-chart{padding:16px 4px 4px;}
.stat-focus-chart-title{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);margin-bottom:10px;}
.stat-focus-chart-legend{display:flex;gap:14px;font-size:11px;color:var(--graphite);margin-top:8px;}
.stat-focus-chart-legend span{display:inline-flex;align-items:center;gap:5px;}
.stat-legend-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.stat-focus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:6px;}
.stat-focus-cell{background:rgba(10,10,11,.03);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:10px;text-align:center;}
.stat-focus-cell b{display:block;font-family:'Space Grotesk',sans-serif;font-size:18px;}
.stat-focus-cell span{font-size:10.5px;color:var(--graphite);}
.stat-focus-list{border-top:1px solid var(--hairline);margin-top:4px;}
.call-tag{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--good);background:rgba(26,143,76,.1);border-radius:999px;padding:2px 6px;margin-left:4px;}

.activity-log-toggle{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  padding:12px 16px;margin-bottom:4px;
  font-size:12px;font-weight:600;color:var(--graphite);
  background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-sm);
  transition:all .15s var(--ease);
}
.activity-log-toggle:hover{color:var(--ink);border-color:rgba(18,18,20,.25);background:rgba(10,10,11,.03);}
.activity-log-toggle-icon{width:11px;height:11px;flex-shrink:0;transition:transform .2s var(--ease);}
.activity-log-toggle.is-open{border-color:rgba(18,18,20,.2);color:var(--ink);}
.activity-log-toggle.is-open .activity-log-toggle-icon{transform:rotate(90deg);}
.activity-log-panel{display:none;}
.activity-log-panel.is-open{display:block;}

.toggle-switch{
  width:36px;height:21px;border-radius:999px;border:none;flex-shrink:0;
  background:var(--hairline);position:relative;transition:background .2s var(--ease);
}
.toggle-switch::after{
  content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s var(--ease);
}
.toggle-switch.is-on{background:var(--good);}
.toggle-switch.is-on::after{transform:translateX(15px);}
.toggle-switch:disabled{opacity:.5;cursor:default;}

.add-employee-btn{
  display:flex;align-items:center;gap:6px;
  padding:8px 15px;border-radius:999px;border:none;
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;
  transition:background .2s var(--ease);
}
.add-employee-btn:hover{background:#000;}
.add-employee-btn svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;}

/* ---------- PRODUCTS VIEW ---------- */
.add-product-btn{
  display:flex;align-items:center;gap:6px;
  padding:8px 15px;border-radius:999px;border:none;
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;
  transition:background .2s var(--ease);
}
.add-product-btn:hover{background:#000;}
.add-product-btn svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;}
.product-search-shell{
  display:flex;align-items:center;gap:8px;flex:1;min-width:150px;max-width:260px;
  padding:7px 13px;border-radius:999px;border:1px solid var(--hairline);background:#fff;
}
.product-search-shell svg{width:14px;height:14px;stroke:var(--graphite-soft);stroke-width:2;flex-shrink:0;}
.product-search-shell input{flex:1;min-width:0;border:none;background:none;font-size:12.5px;color:var(--ink);}
.product-search-shell input:focus-visible{outline:none;}
.product-row{
  display:grid;grid-template-columns:52px 1.7fr 100px 74px 78px 100px 88px 64px;
  align-items:center;gap:14px;padding:12px 18px;
  border-bottom:1px solid var(--hairline);cursor:pointer;min-width:780px;
  transition:background .15s var(--ease);
}
.product-row:last-child{border-bottom:none;}
.product-row:hover{background:rgba(10,10,11,.02);}
.product-row.header-row{
  cursor:default;background:rgba(10,10,11,.015);
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);
  padding:11px 18px;
}
.product-row.header-row:hover{background:rgba(10,10,11,.015);}
.product-thumb{
  width:40px;height:40px;border-radius:9px;flex-shrink:0;overflow:hidden;
  background:var(--obsidian);display:flex;align-items:center;justify-content:center;
}
.product-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.product-thumb svg{width:17px;height:17px;stroke:#fff;stroke-width:1.4;fill:none;}
.product-info{min-width:0;}
.product-info-name{font-size:13px;font-weight:600;letter-spacing:-0.008em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.product-info-meta{font-size:11px;color:var(--graphite-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px;}
.product-price{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;white-space:nowrap;}
.product-price s{color:var(--graphite-soft);font-weight:500;font-size:11px;margin-left:5px;}
.product-stock{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);}
.product-stock.is-out{color:var(--bad);}
.product-stock.is-low{color:var(--warn);}
.product-updated{font-size:11.5px;color:var(--graphite-soft);white-space:nowrap;}
.product-row-actions{display:flex;align-items:center;gap:4px;justify-content:flex-end;}
.product-row-actions button{
  width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--graphite);background:rgba(10,10,11,.04);transition:all .15s var(--ease);flex-shrink:0;
}
.product-row-actions button:hover{color:var(--ink);background:rgba(10,10,11,.08);}
.product-row-actions button.is-danger:hover{color:var(--bad);background:rgba(255,61,31,.08);}
.product-row-actions svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;}

.status-active{background:rgba(26,143,76,.12);color:var(--good);}
.status-active .dot{background:var(--good);}
.status-draft{background:rgba(184,134,11,.12);color:var(--warn);}
.status-draft .dot{background:var(--warn);}
.status-archived{background:rgba(110,110,120,.12);color:#6e6e78;}
.status-archived .dot{background:#6e6e78;}

/* ---------- PRODUCT FORM MODAL (photos, sizes) ---------- */
.image-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
.image-thumb{
  position:relative;width:72px;height:72px;border-radius:var(--radius-sm);overflow:hidden;
  border:1px solid var(--hairline);background:var(--obsidian);flex-shrink:0;
}
.image-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.image-thumb-cover{
  position:absolute;bottom:0;left:0;right:0;padding:2px 0;text-align:center;
  font-size:8.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(10,10,11,.65);color:#fff;
}
.image-thumb-remove{
  position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;
  background:rgba(10,10,11,.65);color:#fff;display:flex;align-items:center;justify-content:center;
}
.image-thumb-remove svg{width:9px;height:9px;stroke:currentColor;stroke-width:2.6;}
.image-thumb-cover-btn{
  position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:rgba(10,10,11,.65);color:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;
}
.image-thumb-cover-btn.is-cover,.image-thumb-cover-btn:hover{color:#ffd15c;}
.image-thumb-cover-btn svg{width:10px;height:10px;stroke:none;fill:currentColor;}
.image-upload-btn{
  display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;
  border:1.5px dashed var(--hairline);background:#fff;color:var(--graphite);font-size:12px;font-weight:600;
  cursor:pointer;transition:all .15s var(--ease);
}
.image-upload-btn:hover{border-color:rgba(18,18,20,.3);color:var(--ink);}
.image-upload-btn svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;}
.image-upload-btn.is-uploading{opacity:.6;pointer-events:none;}
.size-chip-row{display:flex;flex-wrap:wrap;gap:6px;}
.size-chip{
  padding:6px 13px;border-radius:999px;border:1px solid var(--hairline);background:#fff;
  font-size:12px;font-weight:600;color:var(--graphite);cursor:pointer;transition:all .15s var(--ease);
}
.size-chip:hover{border-color:rgba(17,17,19,.24);color:var(--ink);}
.size-chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff;}
.modal-textarea{
  width:100%;padding:9px 11px;border-radius:var(--radius-sm);
  border:1.5px solid var(--hairline);background:#fff;font-size:13.5px;color:var(--ink);
  resize:vertical;min-height:70px;font-family:inherit;
}
.modal-textarea:focus-visible{outline:none;border-color:var(--ink);}
.modal-btn.danger{flex:none;padding:10px 16px;background:#fff;color:var(--bad);border:1px solid rgba(255,61,31,.28);}
.modal-btn.danger:hover{background:rgba(255,61,31,.05);}

.promo-box{
  border:1px solid var(--hairline);border-radius:var(--radius-sm);
  padding:12px 13px;margin-bottom:16px;background:rgba(10,10,11,.012);
}
.promo-box-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.promo-box-label{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite-soft);margin-bottom:8px;}
.promo-chip{
  padding:5px 11px;border-radius:999px;border:1px solid var(--hairline);background:#fff;
  font-size:11.5px;font-weight:600;color:var(--graphite);cursor:pointer;transition:all .15s var(--ease);
}
.promo-chip:hover{border-color:rgba(17,17,19,.24);color:var(--ink);}
.promo-chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff;}
.promo-chip.is-clear{color:var(--bad);border-color:rgba(255,61,31,.25);}
.promo-chip.is-clear:hover{background:rgba(255,61,31,.06);}
.promo-sale-until{display:none;margin-top:11px;padding-top:11px;border-top:1px dashed var(--hairline);}
.promo-sale-until.is-shown{display:block;}
.promo-sale-until-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.promo-sale-until input[type="date"]{
  padding:7px 10px;border-radius:var(--radius-sm);border:1.5px solid var(--hairline);
  background:#fff;font-size:12.5px;color:var(--ink);font-family:inherit;
}
.promo-sale-until input[type="date"]:focus-visible{outline:none;border-color:var(--ink);}

/* ---------- ACTIVITY VIEW ---------- */
.activity-row{
  display:flex;gap:13px;padding:14px 18px;border-bottom:1px solid var(--hairline);
}
.activity-row:last-child{border-bottom:none;}
.activity-avatar{
  width:30px;height:30px;border-radius:999px;flex-shrink:0;margin-top:1px;
  background:rgba(18,18,20,.06);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;font-family:'Space Grotesk',sans-serif;
}
.activity-body{flex:1;min-width:0;}
.activity-line{font-size:13px;line-height:1.5;}
.activity-line b{font-weight:600;}
.activity-order-ref{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--graphite);}
.activity-time{font-size:11.5px;color:var(--graphite-soft);margin-top:2px;}

/* ---------- DETAIL DRAWER ---------- */
.drawer-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(10,10,11,.32);
  backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility 0s linear .4s;
}
.drawer-overlay.is-open{opacity:1;visibility:visible;transition:opacity .4s var(--ease),visibility 0s linear 0s;}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:201;
  width:min(460px,100vw);
  background:var(--paper);
  box-shadow:-24px 0 60px rgba(0,0,0,.16);
  transform:translateX(100%);
  transition:transform .45s var(--ease);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.drawer.is-open{transform:translateX(0);}
.drawer-head{
  padding:20px 24px 16px;
  border-bottom:1px solid var(--hairline);
  display:flex;align-items:flex-start;gap:12px;
  flex-shrink:0;
}
.drawer-head-info{flex:1;min-width:0;}
.drawer-ref{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;letter-spacing:-0.015em;}
.drawer-date{font-size:12px;color:var(--graphite);margin-top:2px;}
.drawer-close{
  width:30px;height:30px;border-radius:999px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,11,.05);border:none;
  transition:background .2s var(--ease);
}
.drawer-close:hover{background:rgba(10,10,11,.1);}
.drawer-close svg{width:13px;height:13px;stroke:var(--ink);stroke-width:2;}

.drawer-body{flex:1;overflow-y:auto;padding:20px 24px 24px;}
.drawer-body::-webkit-scrollbar{width:5px;}
.drawer-body::-webkit-scrollbar-thumb{background:rgba(10,10,11,.14);border-radius:99px;}

.status-tabs{display:flex;gap:6px;margin-bottom:22px;flex-wrap:wrap;}
.status-tab{
  flex:1;min-width:78px;
  padding:8px 6px;border-radius:10px;text-align:center;
  font-size:11px;font-weight:600;border:1.5px solid var(--hairline);
  color:var(--graphite);background:#fff;
  transition:all .2s var(--ease);
}
.status-tab.is-active{border-color:var(--ink);background:var(--ink);color:#fff;}
.status-tab:disabled{opacity:.4;cursor:default;}

.status-tab[data-status="pending_payment"]{color:#6e6e78;border-color:rgba(110,110,120,.32);background:rgba(110,110,120,.07);}
.status-tab[data-status="pending_payment"].is-active{background:#6e6e78;border-color:#6e6e78;color:#fff;}
.status-tab[data-status="new"]{color:var(--warn);border-color:rgba(184,134,11,.32);background:rgba(184,134,11,.07);}
.status-tab[data-status="new"].is-active{background:var(--warn);border-color:var(--warn);color:#fff;}
.status-tab[data-status="awaiting_response"]{color:#3b6ea8;border-color:rgba(59,110,168,.3);background:rgba(59,110,168,.07);}
.status-tab[data-status="awaiting_response"].is-active{background:#3b6ea8;border-color:#3b6ea8;color:#fff;}
.status-tab[data-status="confirmed"]{color:#1e3c72;border-color:rgba(30,60,114,.28);background:rgba(30,60,114,.07);}
.status-tab[data-status="confirmed"].is-active{background:#1e3c72;border-color:#1e3c72;color:#fff;}
.status-tab[data-status="shipped"]{color:var(--ink);border-color:rgba(18,18,20,.22);background:rgba(18,18,20,.06);}
.status-tab[data-status="shipped"].is-active{background:var(--ink);border-color:var(--ink);color:#fff;}
.status-tab[data-status="delivered"]{color:var(--good);border-color:rgba(26,143,76,.28);background:rgba(26,143,76,.07);}
.status-tab[data-status="delivered"].is-active{background:var(--good);border-color:var(--good);color:#fff;}
.status-tab[data-status="returned"]{color:#b45309;border-color:rgba(180,83,9,.3);background:rgba(180,83,9,.07);}
.status-tab[data-status="returned"].is-active{background:#b45309;border-color:#b45309;color:#fff;}
.status-tab[data-status="cancelled"]{color:var(--bad);border-color:rgba(255,61,31,.28);background:rgba(255,61,31,.07);}
.status-tab[data-status="cancelled"].is-active{background:var(--bad);border-color:var(--bad);color:#fff;}

.call-tracker{display:flex;flex-direction:column;gap:10px;}
.call-tracker-status{display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.call-tracker-meta{font-size:11.5px;color:var(--graphite-soft);}
.call-tracker-actions{display:flex;gap:8px;}
.call-action-btn{
  flex:1;padding:8px 6px;border-radius:10px;text-align:center;
  font-size:12px;font-weight:600;border:1.5px solid var(--hairline);
  background:#fff;color:var(--graphite);transition:all .2s var(--ease);
}
.call-action-btn.no-answer:hover:not(:disabled){border-color:rgba(184,134,11,.4);color:var(--warn);}
.call-action-btn.reached:hover:not(:disabled){border-color:rgba(26,143,76,.4);color:var(--good);}
.call-action-btn:disabled{opacity:.4;cursor:default;}

.section-block{margin-bottom:22px;}
.section-eyebrow{
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--graphite);margin-bottom:10px;
}
.info-grid{display:flex;flex-direction:column;gap:9px;}
.info-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-size:13.5px;}
.info-row-label{color:var(--graphite);flex-shrink:0;}
.info-row-value{font-weight:500;text-align:right;word-break:break-word;}
.info-row-value.ltr{direction:ltr;font-variant-numeric:tabular-nums;}
.info-row-value a{border-bottom:1px solid var(--hairline);}

.order-info-card{
  background:rgba(10,10,11,.015);
  border:1px solid var(--hairline);
  border-radius:var(--radius-md);
  padding:16px 18px;
}
.order-info-card .section-eyebrow{margin-bottom:12px;}
.order-info-card .info-row{font-size:13.5px;}
.order-info-card .info-row + .info-row{padding-top:9px;border-top:1px solid var(--hairline);}
.order-info-card .dup-warning{margin-bottom:12px;}
.order-info-divider{height:1px;background:var(--hairline);margin:16px -18px;}

.assign-select{
  border:1px solid var(--hairline);border-radius:999px;background:#fff;
  padding:5px 26px 5px 11px;font-size:12.5px;font-weight:500;color:var(--ink);
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center;background-size:11px;
  cursor:pointer;
}

.copy-btn{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;color:var(--graphite);
  padding:3px 9px;border-radius:999px;border:1px solid var(--hairline);
  background:#fff;transition:all .15s var(--ease);margin-left:6px;
}
.copy-btn svg{width:10px;height:10px;stroke:currentColor;stroke-width:2;}
.copy-btn:hover{border-color:rgba(17,17,19,.28);color:var(--ink);}
.copy-btn.is-copied{background:var(--good);border-color:var(--good);color:#fff;}

.item-card{
  display:flex;align-items:center;gap:12px;
  padding:12px;border:1px solid var(--hairline);border-radius:var(--radius-sm);
  background:#fff;
}
.item-thumb{
  width:48px;height:48px;border-radius:9px;flex-shrink:0;
  background:var(--obsidian);
  display:flex;align-items:center;justify-content:center;
}
.item-thumb svg{width:20px;height:20px;stroke:#fff;stroke-width:1.4;fill:none;}
.item-info{flex:1;min-width:0;}
.item-name{font-size:13.5px;font-weight:600;}
.item-meta{font-size:11.5px;color:var(--graphite);margin-top:1px;}
.item-price{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;white-space:nowrap;}

.total-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-top:12px;margin-top:4px;border-top:1px solid var(--hairline);
}
.total-label{font-size:12.5px;color:var(--graphite);font-weight:500;}
.total-value{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;letter-spacing:-0.01em;}
.total-value sup{font-size:11px;top:-6px;position:relative;margin-left:2px;}

.method-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;
  background:rgba(10,10,11,.05);border:1px solid var(--hairline);
}

.note-area{
  width:100%;border:1px solid var(--hairline);border-radius:var(--radius-sm);
  padding:10px 12px;font-size:13px;resize:vertical;min-height:64px;
  background:#fff;transition:border-color .2s var(--ease);
}
.note-area:focus-visible{outline:none;border-color:var(--ink);}

.drawer-foot{
  padding:14px 24px;border-top:1px solid var(--hairline);
  display:flex;flex-direction:column;gap:10px;flex-shrink:0;background:var(--paper);
}
.drawer-foot-actions{display:flex;gap:8px;}
.confirm-bar{
  display:none;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:var(--radius-sm);
  background:rgba(184,134,11,.08);border:1px solid rgba(184,134,11,.3);
}
.confirm-bar.is-shown{display:flex;}
.confirm-bar-text{font-size:12px;font-weight:600;color:var(--warn);display:flex;align-items:center;gap:6px;}
.confirm-bar-text .dot{width:6px;height:6px;border-radius:50%;background:var(--warn);flex-shrink:0;}
.confirm-bar-btns{display:flex;gap:6px;flex-shrink:0;}
.confirm-btn{
  padding:7px 13px;border-radius:999px;font-size:12px;font-weight:600;
  transition:all .2s var(--ease);white-space:nowrap;
}
.confirm-btn.discard{background:#fff;color:var(--graphite);border:1px solid var(--hairline);}
.confirm-btn.discard:hover{color:var(--ink);border-color:rgba(18,18,20,.25);}
.confirm-btn.save{background:var(--warn);color:#fff;border:1px solid var(--warn);}
.confirm-btn.save:hover{background:#9c7209;}
.foot-btn{
  flex:1;padding:11px;border-radius:999px;
  font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .2s var(--ease);
}
.foot-btn svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;}
.foot-btn.primary{background:var(--ink);color:#fff;border:1px solid var(--ink);}
.foot-btn.primary:hover{background:#000;}
.foot-btn.ghost{background:#fff;color:var(--bad);border:1px solid rgba(255,61,31,.28);}
.foot-btn.ghost:hover{background:rgba(255,61,31,.05);}

/* ---------- SMALL FORM MODAL (add employee) ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:300;background:rgba(10,10,11,.32);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s;
}
.modal-overlay.is-open{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s linear 0s;}
.modal-card{
  width:100%;max-width:380px;background:var(--paper);border-radius:var(--radius-lg);
  padding:24px 22px;transform:scale(.96);transition:transform .3s var(--ease);
}
.modal-overlay.is-open .modal-card{transform:scale(1);}
.modal-title{font-size:16.5px;font-weight:600;margin-bottom:16px;}
.modal-field{margin-bottom:12px;}
.modal-label{font-size:11.5px;font-weight:600;color:var(--graphite);margin-bottom:5px;display:block;}
.modal-input,.modal-select{
  width:100%;padding:9px 11px;border-radius:var(--radius-sm);
  border:1.5px solid var(--hairline);background:#fff;font-size:13.5px;color:var(--ink);
}
.modal-select{appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:12px;cursor:pointer;
}
.modal-input:focus-visible,.modal-select:focus-visible{outline:none;border-color:var(--ink);}
.modal-hint{font-size:11px;color:var(--graphite-soft);margin-top:4px;line-height:1.4;}
.password-field-row{display:flex;gap:8px;}
.password-field-row .modal-input{flex:1;font-family:'Space Grotesk',sans-serif;letter-spacing:.02em;}
.perm-check-row{display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:rgba(10,10,11,.03);border:1px solid var(--hairline);border-radius:var(--radius-sm);}
.perm-check{display:flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer;}
.perm-check input{width:15px;height:15px;accent-color:var(--ink);cursor:pointer;flex-shrink:0;}
.perm-edit-btn{
  width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--graphite);background:rgba(10,10,11,.04);margin:0 auto;transition:all .15s var(--ease);
}
.perm-edit-btn:hover{color:var(--ink);background:rgba(10,10,11,.08);}
.perm-edit-btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;}
.perm-all-badge{font-size:10px;font-weight:600;color:var(--graphite-soft);}
.team-actions{display:flex;align-items:center;justify-content:center;gap:4px;}
.delete-employee-btn{
  width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--graphite);background:rgba(10,10,11,.04);transition:all .15s var(--ease);
}
.delete-employee-btn:hover{color:#fff;background:var(--bad);}
.delete-employee-btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;}
.modal-actions{display:flex;gap:8px;margin-top:18px;}
.modal-btn{flex:1;padding:10px;border-radius:999px;font-size:13px;font-weight:600;transition:all .2s var(--ease);}
.modal-btn.primary{background:var(--ink);color:#fff;border:1px solid var(--ink);}
.modal-btn.primary:hover{background:#000;}
.modal-btn.primary:disabled{opacity:.5;cursor:default;}
.modal-btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--hairline);}
.modal-error{font-size:12px;color:var(--bad);background:rgba(255,61,31,.08);border-radius:8px;padding:8px 10px;margin-bottom:12px;display:none;}
.modal-error.is-shown{display:block;}
.credential-box{
  background:rgba(26,143,76,.07);border:1px solid rgba(26,143,76,.25);border-radius:var(--radius-sm);
  padding:14px;margin-top:4px;
}
.credential-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:4px 0;}
.credential-row b{font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums;}
.credential-note{font-size:11px;color:var(--graphite);margin-top:8px;line-height:1.5;}

/* ---------- DUPLICATE ORDER WARNING ---------- */
.dup-warning{
  display:none;align-items:flex-start;gap:10px;
  background:rgba(184,134,11,.08);border:1px solid rgba(184,134,11,.24);
  border-radius:var(--radius-sm);padding:11px 12px;margin-bottom:12px;
}
.dup-warning svg{width:16px;height:16px;stroke:var(--warn);stroke-width:2;fill:none;flex-shrink:0;margin-top:1px;}
.dup-warning-title{font-size:12.5px;font-weight:600;color:var(--warn);margin-bottom:7px;}
.dup-warning-list{display:flex;flex-wrap:wrap;gap:6px;}
.dup-warning-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;color:var(--ink);
  background:#fff;border:1px solid var(--hairline);border-radius:999px;
  padding:4px 10px;cursor:pointer;transition:border-color .15s var(--ease);
}
.dup-warning-chip:hover{border-color:rgba(17,17,19,.3);}
.dup-warning-chip .status-pill{padding:2px 7px;font-size:10px;}

/* ---------- DRAWER: items list / price breakdown / edit meta / row "edited by" ---------- */
.drawer-items-wrap{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.price-breakdown{display:flex;flex-direction:column;gap:8px;margin-bottom:2px;}
.drawer-head-actions{display:flex;gap:8px;flex-shrink:0;}
.drawer-edited-meta{font-size:11px;color:var(--graphite-soft);margin-top:3px;}
.row-edited{font-size:12px;color:var(--graphite);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.row-edited.is-empty{color:var(--graphite-soft);font-style:italic;}

/* ---------- EDIT ORDER MODAL ---------- */
.modal-card.is-wide{max-width:560px;max-height:88vh;overflow-y:auto;}
.modal-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.modal-section-label{
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--graphite);margin:18px 0 10px;
}
.modal-section-label:first-child{margin-top:0;}
.modal-static-value{
  padding:9px 11px;border-radius:var(--radius-sm);border:1.5px solid var(--hairline);
  background:rgba(10,10,11,.03);font-size:13.5px;color:var(--graphite);
}
.item-edit-row{border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:10px;margin-bottom:8px;}
.item-edit-row-top{display:flex;gap:8px;align-items:center;}
.item-edit-row-top input{flex:1;min-width:0;}
.item-edit-row-top select{width:112px;flex-shrink:0;}
.item-edit-row-bottom{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.item-edit-row-bottom input{flex:1;min-width:84px;}
.remove-item-btn{
  width:28px;height:28px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--hairline);background:#fff;color:var(--graphite);
  transition:all .15s var(--ease);
}
.remove-item-btn svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;}
.remove-item-btn:hover:not(:disabled){border-color:rgba(255,61,31,.4);color:var(--bad);}
.remove-item-btn:disabled{opacity:.3;cursor:default;}
.add-item-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px;border-radius:var(--radius-sm);border:1.5px dashed var(--hairline);
  background:transparent;color:var(--graphite);font-size:12.5px;font-weight:600;
  transition:all .15s var(--ease);margin-bottom:14px;
}
.add-item-btn:hover{border-color:rgba(17,17,19,.3);color:var(--ink);}
.add-item-btn svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;}
.edit-total-row{display:flex;justify-content:space-between;align-items:center;padding:7px 2px;font-size:13px;color:var(--graphite);}
.edit-total-row b{font-family:'Space Grotesk',sans-serif;color:var(--ink);font-variant-numeric:tabular-nums;}
.edit-total-row.is-grand{border-top:1px solid var(--hairline);margin-top:2px;padding-top:12px;font-weight:600;color:var(--ink);}
.edit-total-row.is-grand b{font-size:16px;}

/* ---------- TOAST ---------- */
.toast{
  position:fixed;bottom:22px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--obsidian);color:#fff;
  padding:11px 20px;border-radius:999px;
  font-size:12.5px;font-weight:600;
  display:flex;align-items:center;gap:8px;
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s;
  z-index:300;box-shadow:0 12px 32px rgba(0,0,0,.28);
  white-space:nowrap;
}
.toast.is-shown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear 0s;}
.toast svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;}

.view-pane{display:none;}
.view-pane.is-active{display:block;}

/* ---------- MEDIUM (not enough room for Delivery + Call columns) ---------- */
/* Between phone and desktop widths the table scrolls horizontally
   instead of hiding columns — see .table-card overflow-x. Below 600px
   it reflows into a stacked card list instead (see the 600px query). */

/* ---------- MOBILE ---------- */
@media (max-width:920px){
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:150;
    transform:translateX(-100%);
    transition:transform .35s var(--ease);
    box-shadow:24px 0 60px rgba(0,0,0,.24);
  }
  .sidebar.is-open{transform:translateX(0);}
  .sidebar-scrim{
    position:fixed;inset:0;z-index:149;background:rgba(10,10,11,.4);
    opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s;
  }
  .sidebar-scrim.is-open{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s linear 0s;}
  .menu-btn{display:flex !important;}
  .team-row{grid-template-columns:1.4fr 90px 60px;}
  .team-stat-hide-mobile{display:none;}
  .trend-body{flex-direction:column;gap:16px;}
  .trend-metric{border-right:none;border-bottom:1px solid var(--hairline);padding-right:0;padding-bottom:14px;flex:none;}
}
.menu-btn{display:none;}

@media (max-width:600px){
  .content{padding:16px 14px 48px;}
  .topbar{padding:13px 14px;gap:10px;}
  .topbar-title{font-size:16px;}
  .search-shell{max-width:none;}
  .stat-strip{grid-template-columns:repeat(2,1fr);}
  .drawer{width:100vw;}

  /* Order table becomes a stacked, tap-for-detail card list instead of
     a horizontally-scrolling spreadsheet — everything else in the app
     already reflows for mobile, the table shouldn't be the exception.
     Full detail (ref, product, edited-by, assignee...) is one tap away
     in the drawer, same as before. */
  .table-card{overflow-x:hidden;}
  .order-row.header-row{display:none;}
  .order-row{
    display:flex;flex-wrap:wrap;align-items:center;min-width:0;
    gap:7px 10px;padding:14px 16px;
  }
  .order-row .row-check{order:1;}
  .order-row .row-cust{order:2;flex:1 1 auto;min-width:0;}
  .order-row .row-status{order:3;}
  .order-row .row-chevron{order:4;margin-inline-start:2px;}
  .order-row .row-price{order:5;flex:0 0 auto;}
  .order-row .row-call{order:6;}
  .order-row .row-wilaya,.order-row .row-delivery{order:7;font-size:11px;}
  .order-row .row-ref,.order-row .row-product,.order-row .row-edited,.order-row .row-assignee{display:none;}
}

/* ---------- BONUS PROGRESS CARDS ---------- */
.bonus-card{
  background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-md);
  padding:16px 18px;margin-bottom:10px;
}
.bonus-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.bonus-card-name{font-weight:600;font-size:13.5px;color:var(--ink);display:flex;align-items:center;gap:8px;}
.bonus-card-today{font-size:11.5px;color:var(--graphite);white-space:nowrap;}
.bonus-bar-track{height:14px;border-radius:999px;background:rgba(10,10,11,.06);overflow:hidden;}
.bonus-bar-fill{height:100%;border-radius:999px;transition:width .6s var(--ease),background .6s var(--ease);}
.bonus-bar-label{display:flex;justify-content:space-between;margin-top:7px;font-size:11px;color:var(--graphite-soft);font-weight:600;}
.bonus-balance-box{
  margin-top:12px;background:rgba(26,143,76,.07);border:1px solid rgba(26,143,76,.2);
  border-radius:var(--radius-sm);padding:10px 12px;display:flex;align-items:center;justify-content:space-between;
}
.bonus-balance-label{font-size:11.5px;color:var(--graphite);}
.bonus-balance-value{font-size:15px;font-weight:700;color:var(--good);}
.bonus-choice-row{display:flex;gap:8px;margin-top:12px;}
.bonus-choice-btn{
  flex:1;border-radius:999px;padding:9px;font-size:12px;font-weight:600;
  cursor:pointer;transition:all .15s var(--ease);text-align:center;
  border:1px solid var(--hairline);background:#fff;color:var(--ink);
}
.bonus-choice-btn:hover{border-color:rgba(17,17,19,.3);}
.bonus-choice-btn.is-primary{background:var(--ink);color:#fff;border-color:var(--ink);}
.bonus-choice-btn.is-primary:hover{background:#000;}
.bonus-locked-note{
  margin-top:10px;font-size:11.5px;color:var(--warn);
  background:rgba(184,134,11,.08);border-radius:var(--radius-sm);padding:8px 10px;
}

/* ---------- PRODUCT MODAL TABS (Details / Reviews) ---------- */  .modal-tabs{display:flex;margin-bottom:16px;border-bottom:1px solid var(--hairline);}
.modal-tab{
  background:none;border:none;padding:9px 4px 11px;margin-right:18px;
  font-size:12.5px;font-weight:600;color:var(--graphite);cursor:pointer;
  border-bottom:2px solid transparent;transition:color .15s var(--ease),border-color .15s var(--ease);
}
.modal-tab:hover{color:var(--ink);}
.modal-tab.is-active{color:var(--ink);border-bottom-color:var(--ink);}

.review-row{padding:13px 0;border-bottom:1px solid var(--hairline);}
.review-row:last-child{border-bottom:none;}
.review-row-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px;flex-wrap:wrap;}
.review-row-who{display:flex;align-items:center;gap:8px;}
.review-stars{color:#c99a12;font-size:12px;letter-spacing:1px;}
.review-name{font-weight:600;font-size:13px;color:var(--ink);}
.review-date{font-size:11px;color:var(--graphite-soft);}
.review-text{font-size:13px;color:var(--graphite);line-height:1.5;margin-bottom:7px;}
.review-visibility-btn{
  background:none;border:1px solid var(--hairline);border-radius:999px;
  padding:4px 11px;font-size:11px;font-weight:600;cursor:pointer;
  transition:all .15s var(--ease);white-space:nowrap;
}
.review-visibility-btn.is-visible{color:var(--good);border-color:rgba(26,143,76,.3);background:rgba(26,143,76,.06);}
.review-visibility-btn.is-hidden{color:var(--graphite);}
.review-row-actions{display:flex;gap:8px;}
.review-delete-btn{
  background:none;border:1px solid var(--hairline);border-radius:999px;
  padding:4px 11px;font-size:11px;font-weight:600;cursor:pointer;
  color:var(--bad);transition:all .15s var(--ease);
}
.review-delete-btn:hover{background:rgba(255,61,31,.08);border-color:rgba(255,61,31,.3);}

/* ---------- CONFIRMED ORDERS (dispatch queue) ---------- */  .confirmed-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  padding:14px 18px;border-bottom:1px solid var(--hairline);
}
.confirmed-row:last-child{border-bottom:none;}
.confirmed-row .cr-main{flex:1 1 200px;min-width:0;}
.confirmed-row .cr-name{font-weight:600;font-size:13.5px;color:var(--ink);}
.confirmed-row .cr-meta{font-size:11.5px;color:var(--graphite);margin-top:2px;}
.confirmed-row .cr-total{font-weight:600;font-size:13px;white-space:nowrap;}
.confirmed-row .cr-date{font-size:11px;color:var(--graphite-soft);white-space:nowrap;min-width:76px;}
.send-dispatch-btn{
  background:rgba(124,58,237,.07);color:#6d28d9;border:1px solid rgba(124,58,237,.22);
  border-radius:999px;padding:7px 14px;font-size:12px;font-weight:600;
  cursor:pointer;transition:all .15s var(--ease);white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
}
.send-dispatch-btn:hover{background:rgba(124,58,237,.13);border-color:rgba(124,58,237,.38);}
.send-dispatch-btn:disabled{opacity:.5;cursor:default;}
.dispatch-outcome-btns{display:flex;gap:6px;}
.outcome-btn{
  border:1px solid var(--hairline);background:#fff;border-radius:999px;
  padding:6px 12px;font-size:11.5px;font-weight:600;cursor:pointer;
  color:var(--graphite);transition:all .15s var(--ease);white-space:nowrap;
}
.outcome-btn:hover{border-color:rgba(17,17,19,.3);}
.outcome-btn.is-delivered.is-active{background:rgba(26,143,76,.12);border-color:rgba(26,143,76,.3);color:var(--good);}
.outcome-btn.is-returned.is-active{background:rgba(180,83,9,.12);border-color:rgba(180,83,9,.3);color:#b45309;}

/* ---------- PRODUCT STATS BADGE ---------- */  .product-stats-btn{
  background:none;border:1px solid var(--hairline);border-radius:999px;
  padding:3px 9px;font-size:11px;font-weight:600;color:var(--ink);
  cursor:pointer;transition:border-color .15s var(--ease),background .15s var(--ease);
  white-space:nowrap;
}
.product-stats-btn:hover{border-color:rgba(17,17,19,.3);background:rgba(10,10,11,.03);}

/* ---------- BULK BAR: status / assign selects ---------- */  .bulk-bar-select{
  -webkit-appearance:none;appearance:none;
  background-color:rgba(255,255,255,.12);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
  background-repeat:no-repeat;background-position:right 9px center;background-size:11px;
  color:#fff;border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:6px 26px 6px 14px;font-size:12px;font-weight:600;
  cursor:pointer;transition:background-color .15s var(--ease);
}
.bulk-bar-select:hover{background-color:rgba(255,255,255,.2);}
.bulk-bar-select option{color:var(--ink);background:#fff;}

/* ---------- NEW ORDER ARRIVAL ---------- */
@keyframes newOrderFlash{0%{background:rgba(26,143,76,.16);}100%{background:transparent;}}
.order-row.is-new-flash{animation:newOrderFlash 2.4s var(--ease);}

/* ---------- OVERDUE ---------- */
.overdue-flag{
  display:inline-flex;width:6px;height:6px;border-radius:50%;
  background:var(--bad);margin-inline-start:6px;flex-shrink:0;vertical-align:middle;
}
.alert-banner.is-overdue{cursor:pointer;transition:background .15s var(--ease);}
.alert-banner.is-overdue:hover{background:rgba(184,134,11,.14);}
.alert-banner.is-overdue:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}

/* ---------- DUPLICATE: returning customer, not a fresh duplicate ---------- */
.dup-warning.is-returning{background:rgba(110,110,115,.08);border-color:rgba(110,110,115,.22);}
.dup-warning.is-returning svg{stroke:var(--graphite-soft);}
.dup-warning.is-returning .dup-warning-title{color:var(--graphite);}

/* ---------- PRINTABLE ORDER SLIP ---------- */
#printArea{display:none;}
@media print{
  body > *:not(#printArea){display:none !important;}
  #printArea{
    display:block;padding:0;font-family:var(--font-ui);color:#000;
  }
  #printArea .slip-brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;letter-spacing:.06em;margin-bottom:2px;}
  #printArea .slip-sub{font-size:11px;color:#555;margin-bottom:20px;}
  #printArea .slip-row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid #ddd;font-size:13px;}
  #printArea .slip-row b{font-weight:600;}
  #printArea .slip-total{font-size:16px;font-weight:700;margin-top:14px;text-align:right;}
}