:root{
  --bg:#DDE2E9; --clay:#F5F7FA; --clay-2:#E7EBF1;
  --shadow-d:rgba(30,45,70,.30); --shadow-l:rgba(255,255,255,.92);
  --card-border:rgba(30,45,70,.13);
  --ink:#1B2431; --ink-2:#47536A; --ink-3:#6E7C92;
  --accent:#2D66A8; --accent-2:#7A2456; --accent-ink:#FFFFFF;
  --danger:#B03A32; --danger-ink:#FFF6F5;
  --st-received:#55677F; --st-washing:#2D66A8; --st-ready:#2E7D46; --st-delivered:#6B7280;
  --well:#D2DAE4;
  --font-ui:'Segoe UI','Tahoma','Arial',sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#12161D; --clay:#1D232E; --clay-2:#191E27;
    --shadow-d:rgba(0,0,0,.8); --shadow-l:rgba(255,255,255,.13);
    --card-border:rgba(255,255,255,.09);
    --ink:#ECF0F5; --ink-2:#B9C4D2; --ink-3:#8391A3;
    --accent:#5B9AE0; --accent-2:#C24F91; --accent-ink:#081019;
    --danger:#FF8078; --danger-ink:#330A08;
    --st-received:#9FB0C4; --st-washing:#5B9AE0; --st-ready:#5FCB7C; --st-delivered:#9AA5B5;
    --well:#0E1218;
  }
}
:root[data-theme="dark"]{
  --bg:#12161D; --clay:#1D232E; --clay-2:#191E27;
  --shadow-d:rgba(0,0,0,.8); --shadow-l:rgba(255,255,255,.13);
  --card-border:rgba(255,255,255,.09);
  --ink:#ECF0F5; --ink-2:#B9C4D2; --ink-3:#8391A3;
  --accent:#5B9AE0; --accent-2:#C24F91; --accent-ink:#081019;
  --danger:#FF8078; --danger-ink:#330A08;
  --st-received:#9FB0C4; --st-washing:#5B9AE0; --st-ready:#5FCB7C; --st-delivered:#9AA5B5;
  --well:#0E1218;
}
:root[data-theme="light"]{
  --bg:#DDE2E9; --clay:#F5F7FA; --clay-2:#E7EBF1;
  --shadow-d:rgba(30,45,70,.30); --shadow-l:rgba(255,255,255,.92);
  --card-border:rgba(30,45,70,.13);
  --ink:#1B2431; --ink-2:#47536A; --ink-3:#6E7C92;
  --accent:#2D66A8; --accent-2:#7A2456; --accent-ink:#FFFFFF;
  --danger:#B03A32; --danger-ink:#FFF6F5;
  --st-received:#55677F; --st-washing:#2D66A8; --st-ready:#2E7D46; --st-delivered:#6B7280;
  --well:#D2DAE4;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
}
h1,h2,h3,h4{text-wrap:balance;margin:0;}
button{font-family:inherit;}
::selection{background:var(--accent);color:var(--accent-ink);}

/* ---- تحول ناعم عند تبديل الوضع الليلي/النهاري ---- */
*, *::before, *::after{
  transition:background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition:none !important; animation:none !important; }
}

/* ---- Claymorphism primitives ---- */
.clay{
  background:var(--clay);
  border-radius:34px;
  border:1px solid var(--card-border);
  box-shadow:16px 16px 32px var(--shadow-d), -14px -14px 30px var(--shadow-l);
}
.clay-well{
  background:var(--well);
  border-radius:16px;
  border:1px solid var(--card-border);
  box-shadow:inset 6px 6px 13px var(--shadow-d), inset -6px -6px 13px var(--shadow-l);
}
.clay-pressable{ transition:box-shadow .12s, transform .08s, background-color .4s ease, color .4s ease, border-color .4s ease; }
.clay-pressable:active{
  box-shadow:inset 7px 7px 14px var(--shadow-d), inset -7px -7px 14px var(--shadow-l);
  transform:translateY(1px);
}

/* ---- Shell / sidebar ---- */
.shell{display:flex;align-items:flex-start;gap:20px;max-width:1440px;margin:0 auto;padding:20px 24px 60px;min-height:100vh;}
.sidebar{
  flex:0 0 232px;padding:20px 16px;position:sticky;top:20px;
  display:flex;flex-direction:column;gap:18px;max-height:calc(100vh - 40px);overflow-y:auto;
}
.main-col{flex:1;min-width:0;}
main{padding-top:2px;}

.brand{display:flex;align-items:center;gap:12px;padding:0 4px;}
.brand-mark{
  width:46px;height:46px;border-radius:18px;display:grid;place-items:center;font-size:21px;
  background:linear-gradient(155deg,var(--accent),var(--accent-2));
  box-shadow:6px 6px 14px var(--shadow-d), -4px -4px 10px var(--shadow-l);
  color:var(--accent-ink);flex:none;overflow:hidden;
}
.brand strong{display:block;font-size:14.5px;}
.brand span{display:block;font-size:11px;color:var(--ink-3);margin-top:2px;}

.side-nav{display:flex;flex-direction:column;gap:4px;}
.nav-label{font-size:10.5px;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;padding:14px 10px 4px;}
.nav-label:first-child{padding-top:2px;}
.nav-item{
  display:flex;align-items:center;gap:10px;border:none;background:transparent;color:var(--ink-2);
  padding:10px 12px;border-radius:16px;font-size:13px;font-weight:700;cursor:pointer;text-align:right;
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.nav-ic{font-size:15px;width:20px;text-align:center;flex:none;display:inline-block;transition:transform .2s ease;}
.nav-item:hover{background:var(--clay-2);color:var(--ink);transform:translateX(-3px);}
.nav-item:hover .nav-ic{transform:scale(1.15);}
.nav-item.active{
  color:var(--accent-ink);
  background:linear-gradient(155deg,var(--accent),var(--accent-2));
  box-shadow:inset 3px 3px 8px rgba(0,0,0,.28), inset -3px -3px 7px rgba(255,255,255,.2);
}
.nav-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.theme-toggle{
  margin-top:auto;display:flex;align-items:center;gap:10px;border:none;background:var(--clay-2);
  color:var(--ink-2);padding:11px 14px;border-radius:16px;font-size:12.5px;font-weight:700;cursor:pointer;
  box-shadow:4px 4px 9px var(--shadow-d), -4px -4px 9px var(--shadow-l);
  transition:background-color .4s ease, color .4s ease, box-shadow .18s ease, transform .18s ease;
}
.theme-toggle:hover{color:var(--ink);transform:translateY(-2px);box-shadow:5px 6px 12px var(--shadow-d), -5px -5px 11px var(--shadow-l);}
.theme-toggle .ic{font-size:15px;display:inline-block;transition:transform .5s cubic-bezier(.34,1.56,.64,1);}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media (max-width:860px){
  .shell{flex-direction:column;}
  .sidebar{flex:1 1 auto;position:static;width:100%;max-height:none;}
  .side-nav{flex-direction:row;flex-wrap:wrap;}
}

.panel{display:none;}
.panel.active{display:block;animation:rise .3s ease;}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){ .panel.active{animation:none;} }

.invoice-layout{display:grid;grid-template-columns:1fr 380px;gap:20px;align-items:start;}
@media (max-width:920px){.invoice-layout{grid-template-columns:1fr;}}

.section-title{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap;}
.section-title h2{font-size:19px;font-weight:800;letter-spacing:normal;}
.section-title p{margin:3px 0 0;color:var(--ink-3);font-size:12.5px;}

.cat-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.chip{
  border:none;background:var(--clay-2);color:var(--ink-2);padding:8px 15px;border-radius:999px;
  font-size:12.5px;font-weight:700;cursor:pointer;
  box-shadow:5px 5px 11px var(--shadow-d), -5px -5px 11px var(--shadow-l);
  transition:background-color .4s ease, color .4s ease, box-shadow .18s ease, transform .18s ease;
}
.chip:not(.active):hover{transform:translateY(-2px);box-shadow:6px 8px 16px var(--shadow-d), -6px -6px 14px var(--shadow-l);}
.chip.active{background:linear-gradient(155deg,var(--accent),var(--accent-2));color:var(--accent-ink);
  box-shadow:inset 2px 2px 5px rgba(0,0,0,.25), inset -2px -2px 5px rgba(255,255,255,.2);}

.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;padding:18px;}
.item-card{
  padding:16px 12px;border-radius:26px;cursor:pointer;text-align:center;background:var(--clay-2);
  border:1px solid var(--card-border);
  box-shadow:6px 6px 13px var(--shadow-d), -6px -6px 13px var(--shadow-l);
  transition:background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .2s ease, transform .2s ease;
}
.item-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:9px 12px 22px var(--shadow-d), -8px -8px 18px var(--shadow-l);}
.item-card .ic{font-size:27px;display:block;margin-bottom:8px;}
.item-card .nm{font-size:13px;font-weight:700;line-height:1.35;min-height:36px;display:flex;align-items:center;justify-content:center;}
.item-card .pr{font-size:12.5px;color:var(--accent);font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums;}

.cart-panel{padding:20px;position:sticky;top:96px;}
.cart-list{display:flex;flex-direction:column;gap:10px;max-height:250px;overflow-y:auto;margin:14px 0;padding-inline-end:4px;}
.cart-empty{color:var(--ink-3);font-size:13px;text-align:center;padding:22px 0;}
.cart-row{display:flex;align-items:center;gap:10px;background:var(--clay-2);border-radius:18px;padding:9px 10px;border:1px solid var(--card-border);
  box-shadow:4px 4px 9px var(--shadow-d), -4px -4px 9px var(--shadow-l);}
.cart-row .ic{font-size:18px;}
.cart-row .info{flex:1;min-width:0;}
.cart-row .nm{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cart-row .up{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.qty{display:flex;align-items:center;gap:6px;}
.qty button{width:26px;height:26px;border-radius:10px;border:none;background:var(--well);color:var(--ink);cursor:pointer;font-size:13px;
  box-shadow:3px 3px 7px var(--shadow-d), -3px -3px 7px var(--shadow-l);
  transition:background-color .4s ease, color .4s ease, transform .15s ease;}
.qty button:hover{transform:scale(1.12);}
.qty span{font-size:12.5px;min-width:14px;text-align:center;font-variant-numeric:tabular-nums;}
.rm{background:none;border:none;color:var(--danger);cursor:pointer;font-size:16px;padding:2px 4px;}

.field{margin-bottom:11px;}
.field label{display:block;font-size:11.5px;color:var(--ink-3);margin-bottom:5px;font-weight:700;}
.field input, .field select{
  width:100%;padding:10px 12px;border-radius:16px;border:1px solid var(--card-border);background:var(--well);color:var(--ink);
  font-size:13px;font-family:inherit;box-shadow:inset 5px 5px 11px var(--shadow-d), inset -5px -5px 11px var(--shadow-l);
}
.field input:focus, .field select:focus{outline:2px solid var(--accent);outline-offset:1px;}
.field .hint{font-size:10.5px;color:var(--ink-3);margin-top:4px;}

.toggle-group{display:flex;gap:8px;}
.toggle-btn{
  flex:1;padding:10px 8px;border-radius:16px;border:none;background:var(--clay-2);
  color:var(--ink-2);font-size:12px;font-weight:700;cursor:pointer;text-align:center;
  box-shadow:5px 5px 11px var(--shadow-d), -5px -5px 11px var(--shadow-l);
  transition:background-color .4s ease, color .4s ease, box-shadow .18s ease, transform .18s ease;
}
.toggle-btn:not(.active):hover{transform:translateY(-2px);}
.toggle-btn.active{
  background:linear-gradient(155deg,var(--accent),var(--accent-2));color:var(--accent-ink);
  box-shadow:inset 2px 2px 5px rgba(0,0,0,.25), inset -2px -2px 5px rgba(255,255,255,.2);
}

.totals{border-top:1px dashed var(--shadow-d);margin-top:14px;padding-top:12px;display:flex;flex-direction:column;gap:7px;}
.trow{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-2);}
.trow span:last-child{font-variant-numeric:tabular-nums;}
.trow.grand{font-size:17px;font-weight:800;color:var(--ink);margin-top:4px;}
.discount-input{width:56px;padding:4px 6px;border-radius:10px;border:none;background:var(--well);color:var(--ink);
  font-size:12px;text-align:center;box-shadow:inset 3px 3px 7px var(--shadow-d), inset -3px -3px 7px var(--shadow-l);}

.btn{
  border:none;border-radius:19px;padding:13px 16px;font-size:13.5px;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  transition:background-color .4s ease, color .4s ease, box-shadow .18s ease, transform .18s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{
  background:linear-gradient(155deg,var(--accent),var(--accent-2));color:var(--accent-ink);margin-top:14px;
  box-shadow:7px 7px 16px var(--shadow-d), -6px -6px 14px var(--shadow-l);
}
.btn-primary:hover{box-shadow:9px 11px 22px var(--shadow-d), -7px -7px 16px var(--shadow-l);}
.btn-primary:active{box-shadow:inset 4px 4px 9px rgba(0,0,0,.35), inset -4px -4px 9px rgba(255,255,255,.18);transform:translateY(0);}
.btn-ghost{background:var(--clay-2);color:var(--ink-2);margin-top:8px;box-shadow:5px 5px 11px var(--shadow-d), -5px -5px 11px var(--shadow-l);}
.btn-ghost:active{box-shadow:inset 4px 4px 8px var(--shadow-d), inset -4px -4px 8px var(--shadow-l);transform:translateY(0);}
.btn-secondary{background:var(--clay-2);color:var(--ink-2);box-shadow:5px 5px 11px var(--shadow-d), -5px -5px 11px var(--shadow-l);}

.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px;}
.manage-card{padding:18px;display:flex;flex-direction:column;gap:9px;transition:background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .2s ease, transform .2s ease;}
.manage-card:hover{transform:translateY(-3px);box-shadow:20px 20px 38px var(--shadow-d), -16px -16px 34px var(--shadow-l);}
.manage-card .top{display:flex;align-items:center;gap:10px;}
.manage-card .ic{width:42px;height:42px;border-radius:16px;background:var(--well);display:grid;place-items:center;font-size:19px;
  box-shadow:inset 4px 4px 9px var(--shadow-d), inset -4px -4px 9px var(--shadow-l);}
.manage-card .nm{font-size:14px;font-weight:800;}
.manage-card .cat{font-size:11px;color:var(--ink-3);}
.manage-card .pr{font-size:15px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;}
.manage-card .actions{display:flex;gap:8px;margin-top:4px;}
.manage-card .actions button{flex:1;padding:8px;border-radius:13px;border:none;background:var(--clay-2);color:var(--ink-2);
  font-size:12px;cursor:pointer;box-shadow:3px 3px 7px var(--shadow-d), -3px -3px 7px var(--shadow-l);
  transition:background-color .4s ease, color .4s ease, transform .15s ease;}
.manage-card .actions button:hover{transform:translateY(-2px);}
.manage-card .actions button.del{color:var(--danger);}
.add-card{
  border-radius:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--ink-3);cursor:pointer;min-height:150px;background:var(--clay-2);font-size:13px;font-weight:700;
  border:1.5px dashed var(--card-border);
  box-shadow:inset 6px 6px 13px var(--shadow-d), inset -6px -6px 13px var(--shadow-l);
  transition:background-color .4s ease, color .4s ease, border-color .4s ease, transform .2s ease;
}
.add-card:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-3px);}
.add-card .plus{font-size:26px;}

.modal-backdrop{position:fixed;inset:0;background:rgba(10,14,22,.45);display:none;align-items:center;justify-content:center;z-index:50;padding:20px;}
.modal-backdrop.open{display:flex;}
.modal{width:100%;max-width:380px;padding:24px;}
.modal h3{font-size:16px;margin-bottom:14px;}
.modal-actions{display:flex;gap:10px;margin-top:16px;}
.modal-actions .btn{margin-top:0;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

.board{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:1000px){.board{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.board{grid-template-columns:1fr;}}
.col{padding:16px;min-height:200px;}
.col-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:0 2px;}
.dot{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 3px var(--clay) inset;}
.col-head h4{font-size:13px;}
.count{margin-inline-start:auto;font-size:11px;color:var(--ink-3);background:var(--well);padding:2px 9px;border-radius:999px;font-variant-numeric:tabular-nums;}
.order-card{background:var(--clay-2);border-radius:20px;padding:13px;margin-bottom:11px;border:1px solid var(--card-border);
  box-shadow:5px 5px 11px var(--shadow-d), -5px -5px 11px var(--shadow-l);}
.order-card .num{font-size:12px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
.order-card .cust{font-size:12px;color:var(--ink-2);margin-top:2px;}
.order-card .meta{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);margin-top:8px;font-variant-numeric:tabular-nums;}
.order-card .adv{
  width:100%;margin-top:10px;padding:8px;border-radius:13px;border:none;
  background:var(--well);color:var(--accent);font-size:11.5px;font-weight:800;cursor:pointer;
  box-shadow:3px 3px 7px var(--shadow-d), -3px -3px 7px var(--shadow-l);
  transition:background-color .4s ease, color .4s ease, transform .15s ease;
}
.order-card .adv:hover{transform:translateY(-2px);}
.order-card .done{width:100%;margin-top:10px;padding:7px;border-radius:11px;text-align:center;background:transparent;color:var(--st-delivered);font-size:11.5px;font-weight:800;}
.empty-col{color:var(--ink-3);font-size:12px;text-align:center;padding:20px 0;}

.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  padding:13px 24px;border-radius:16px;font-size:13px;font-weight:700;z-index:80;
  opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;
  background:linear-gradient(155deg,var(--accent),var(--accent-2));color:var(--accent-ink);
  box-shadow:6px 6px 16px var(--shadow-d);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.toast.err{background:linear-gradient(155deg,var(--danger),#7A241D);color:var(--danger-ink);}

.scroller::-webkit-scrollbar{width:6px;}
.scroller::-webkit-scrollbar-thumb{background:var(--shadow-d);border-radius:10px;}

.loading{color:var(--ink-3);font-size:13px;padding:20px;text-align:center;}

/* ---- Overview / stat cards ---- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px;}
@media (max-width:900px){.stat-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.stat-grid{grid-template-columns:1fr;}}
.stat-card{padding:18px;display:flex;align-items:center;gap:14px;}
.stat-card .ic{
  width:48px;height:48px;border-radius:17px;display:grid;place-items:center;font-size:21px;flex:none;
  background:var(--well);box-shadow:inset 5px 5px 10px var(--shadow-d), inset -5px -5px 10px var(--shadow-l);
}
.stat-card .lbl{font-size:11.5px;color:var(--ink-3);font-weight:700;}
.stat-card .val{font-size:21px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums;color:var(--ink);}

.overview-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:18px;align-items:start;}
@media (max-width:920px){.overview-layout{grid-template-columns:1fr;}}

.table-wrap{overflow-x:auto;padding:6px 18px 18px;}
table.data{width:100%;border-collapse:collapse;font-size:12.5px;min-width:480px;}
table.data th{
  text-align:right;color:var(--ink-3);font-weight:700;font-size:11px;padding:8px 10px;
  border-bottom:1px solid var(--shadow-d);white-space:nowrap;
}
table.data td{padding:11px 10px;border-bottom:1px solid var(--shadow-d);vertical-align:middle;}
table.data tr:last-child td{border-bottom:none;}
table.data td.amt{font-variant-numeric:tabular-nums;font-weight:700;}

.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:11px;font-weight:800;background:var(--well);}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.badge.received{color:var(--st-received);}
.badge.washing{color:var(--st-washing);}
.badge.ready{color:var(--st-ready);}
.badge.delivered{color:var(--st-delivered);}

.mini-machine{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--shadow-d);}
.mini-machine:last-child{border-bottom:none;}
.mini-machine .ic{font-size:16px;}
.mini-machine .info{flex:1;min-width:0;}
.mini-machine .nm{font-size:12.5px;font-weight:700;}
.mini-machine .pbar{height:5px;border-radius:4px;background:var(--well);margin-top:6px;overflow:hidden;
  box-shadow:inset 1px 1px 3px var(--shadow-d);}
.mini-machine .pbar > span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:4px;}
.status-pill{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.status-pill.متاحة{color:var(--st-ready);background:var(--well);}
.status-pill.تعمل{color:var(--st-washing);background:var(--well);}
.status-pill.معطلة{color:var(--danger);background:var(--well);}

/* ---- Customers / Machines / Employees cards (reuse manage-card) ---- */
.manage-card .row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3);margin-top:2px;}
.manage-card .row span:last-child{font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.manage-card .progress{height:6px;border-radius:5px;background:var(--well);margin-top:4px;overflow:hidden;
  box-shadow:inset 1px 1px 3px var(--shadow-d);}
.manage-card .progress > span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));}

.switch-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:10.5px;font-weight:800;}
.switch-pill.on{color:var(--st-ready);background:var(--well);}
.switch-pill.off{color:var(--ink-3);background:var(--well);}

/* ---- Reports bars ---- */
.bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:10px;}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;}
.bar-col .bar{width:100%;max-width:34px;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,var(--accent),var(--accent-2));
  box-shadow:2px 2px 6px var(--shadow-d);min-height:4px;}
.bar-col .lbl{font-size:10px;color:var(--ink-3);font-weight:700;}
.bar-col .val{font-size:10px;color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums;}

.top-item-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--shadow-d);}
.top-item-row:last-child{border-bottom:none;}
.top-item-row .rank{width:22px;height:22px;border-radius:8px;background:var(--well);display:grid;place-items:center;
  font-size:11px;font-weight:800;color:var(--accent);flex:none;}
.top-item-row .nm{flex:1;font-size:12.5px;font-weight:700;}
.top-item-row .qty{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;}

/* ---- Settings ---- */
.settings-form{padding:22px;max-width:620px;display:flex;flex-direction:column;gap:2px;}

/* ---- User box (sidebar) ---- */
.user-box{padding:10px 14px;border-radius:16px;background:var(--clay-2);box-shadow:inset 4px 4px 9px var(--shadow-d), inset -4px -4px 9px var(--shadow-l);}
.user-box .nm{font-size:12.5px;font-weight:800;color:var(--ink);}
.user-box .role{font-size:10.5px;color:var(--ink-3);margin-top:2px;}

/* ---- Login page ---- */
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-card{width:100%;max-width:360px;padding:32px 28px;}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px;}
.login-brand .brand-mark{
  width:46px;height:46px;border-radius:18px;display:grid;place-items:center;font-size:21px;
  background:linear-gradient(155deg,var(--accent),var(--accent-2));
  box-shadow:6px 6px 14px var(--shadow-d), -4px -4px 10px var(--shadow-l);
  color:var(--accent-ink);flex:none;overflow:hidden;
}
.login-brand strong{display:block;font-size:14.5px;}
.login-brand span{display:block;font-size:11px;color:var(--ink-3);margin-top:2px;}

/* ---- شعار المحل (صور مرفوعة) ---- */
.brand-mark img, .login-brand .brand-mark img{width:100%;height:100%;object-fit:cover;}
.logo-preview{width:56px;height:56px;border-radius:14px;object-fit:cover;background:var(--well);display:none;
  box-shadow:inset 3px 3px 7px var(--shadow-d), inset -3px -3px 7px var(--shadow-l);}

/* ---- زر طباعة الفاتورة ---- */
.print-btn{
  width:100%;margin-top:8px;padding:8px;border-radius:13px;border:none;
  background:var(--well);color:var(--ink-2);font-size:11.5px;font-weight:800;cursor:pointer;
  box-shadow:3px 3px 7px var(--shadow-d), -3px -3px 7px var(--shadow-l);
  transition:background-color .4s ease, color .4s ease, transform .15s ease;
}
.print-btn:hover{transform:translateY(-2px);}
.login-card h2{font-size:17px;margin-bottom:16px;}
.login-error{font-size:12px;color:var(--danger);margin-top:10px;min-height:15px;opacity:0;transition:opacity .2s;}
.login-error.show{opacity:1;}

/* ---- رابط الدعم الفني ---- */
.support-link{display:block;text-align:center;margin-top:16px;font-size:11.5px;color:var(--ink-3);text-decoration:none;}
.support-link:hover{color:var(--accent);}