/* =====================================================================
   DESIGN SYSTEM — Aile Dolab staff operations
   ده الملف الوحيد المصدر للتصميم (single source of truth). ممنوع أي صفحة
   جديدة تكتب ألوان/خطوط/مسافات/radius جديدة من عندها. أي صفحة أو كومبوننت
   جديد لازم:
     1. يعمل <link rel="stylesheet" href="/design-system.css"> في الـ <head>
        (أو import لو الـ build system بيدعم CSS imports).
     2. يستخدم الـ CSS variables المعرّفة في :root تحت (--bg, --card,
        --accent, --text, --font-display, --radius-md, إلخ) — مش hex
        values جديدة، ومش fonts جديدة.
     3. يستخدم نفس أسماء الكلاسات الموجودة هنا (.card, .toggle-btn,
        .section, .badge-urgent, .meta-item, إلخ) بدل ما يعيد اختراعها.
     4. لو محتاج كومبوننت مش موجود هنا، يضيفه في آخر الملف ده بنفس
        الأسلوب (متغيرات + كلاسات)، مش في ملف/صفحة لوحدها.
   المرجع الحي اللي كل التصميم ده متطبق عليه فعلياً: frontend-template/index.html
   ===================================================================== */

/* =====================================================================
   FONT — Thmanyah (الفونت اللي اتدّالنا فعلاً)
   الملفات موجودة في assets/fonts/. لو الدومين بتاعك مختلف عن مكان
   الملف ده، عدّل المسارات تحت بس متغيرش أسماء الـ font-family.
   ===================================================================== */
@font-face{ font-family:'Thmanyah Sans'; src:url('assets/fonts/thmanyah-sans-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Thmanyah Sans'; src:url('assets/fonts/thmanyah-sans-medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Thmanyah Sans'; src:url('assets/fonts/thmanyah-sans-bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Thmanyah Sans'; src:url('assets/fonts/thmanyah-sans-black.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Thmanyah Serif Display'; src:url('assets/fonts/thmanyah-serif-display-bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
:root{
  /* ===== Dark theme (افتراضي) — درجات أزرق هادية ===== */
  --bg:#0e1420;
  --bg-soft:#141c2b;
  --card:#182236;
  --card-border:#28374d;
  --text:#e7edf6;
  --text-dim:#a7b4c8;
  --muted:#647186;
  --accent:#6f9bd1;
  --accent-2:#4c78ab;
  --accent-soft:rgba(111,155,209,.14);
  --green:#6fab8e;
  --green-soft:rgba(111,171,142,.16);
  --red:#c9766c;
  --red-2:#5c2e2a;
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:9px;
  --shadow:0 14px 34px -14px rgba(0,0,0,.55);
  --font-display:'Thmanyah Serif Display','Cairo',sans-serif;
  --font-body:'Thmanyah Sans','IBM Plex Sans Arabic',sans-serif;
}
:root[data-theme="light"]{
  /* ===== Light theme — نفس درجات الأزرق بس فاتحة ===== */
  --bg:#f3f6fb;
  --bg-soft:#e7edf6;
  --card:#ffffff;
  --card-border:#d7e1ee;
  --text:#1b2636;
  --text-dim:#4c5a70;
  --muted:#8797ae;
  --accent:#3f6f9e;
  --accent-2:#2c5075;
  --accent-soft:rgba(63,111,158,.10);
  --green:#3d8567;
  --green-soft:rgba(61,133,103,.12);
  --red:#b3483d;
  --red-2:#f3d9d5;
  --shadow:0 14px 30px -16px rgba(28,45,66,.18);
}
/* في كل الملف: (--cream, --cream-dim) اتبدلوا بـ (--text, --text-dim).
   لو لقيت أي مكان لسه بيستخدم --cream القديم دور عليه وابدله. */
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0; background:var(--bg); color:var(--text); font-family:var(--font-body); overscroll-behavior-y:contain; transition:background .25s ease, color .25s ease;}
body{
  min-height:100vh;
  background:
    radial-gradient(1200px 500px at 15% -10%, var(--accent-soft), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, var(--green-soft), transparent 55%),
    var(--bg);
}
::-webkit-scrollbar{display:none;}
*{scrollbar-width:none;}

/* ===== App shell ===== */
.app{max-width:480px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; position:relative; overflow-x:hidden;}
.app[hidden]{display:none!important;}

/* ===== Header ===== */
header.top{
  position:sticky; top:0; z-index:30;
  padding:calc(env(safe-area-inset-top) + 14px) 16px 0;
  background:linear-gradient(180deg, var(--bg) 60%, transparent);
  backdrop-filter:blur(6px);
}
.brand{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.brand-name{font-family:var(--font-display); font-weight:900; font-size:19px; letter-spacing:.2px;}
.brand-name span{color:var(--accent);}
.sync-pill{
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:var(--muted);
  padding:6px 10px; border-radius:99px; border:1px solid var(--card-border); background:var(--bg-soft);
}
.theme-toggle{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--card-border); background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-dim); flex:none;
}
.theme-toggle svg{width:15px; height:15px;}
.theme-toggle .sun{display:none;}
[data-theme="light"] .theme-toggle .moon{display:none;}
[data-theme="light"] .theme-toggle .sun{display:block;}
.header-actions{display:flex; align-items:center; gap:8px;}
.account-btn{border:1px solid var(--card-border); background:var(--bg-soft); color:var(--text-dim); border-radius:99px; padding:7px 10px; font:600 10px var(--font-body); cursor:pointer;}
.logo-img{height:22px; width:auto; display:block;}
.logo-img[hidden]{display:none;}
.sync-dot{width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2.4s infinite;}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.35}}

/* stage tabs */
.tabs{display:flex; gap:6px; overflow-x:auto; padding-bottom:12px;}
.tab{
  flex:none; font-family:var(--font-display); font-weight:700; font-size:13px;
  padding:9px 16px; border-radius:99px; color:var(--muted);
  background:var(--bg-soft); border:1px solid var(--card-border); white-space:nowrap;
  transition:.2s;
}
.tab.active{color:var(--bg); background:var(--accent); border-color:var(--accent); box-shadow:0 8px 18px -8px rgba(111,155,209,.55);}
.tab .count{opacity:.65; font-weight:500; margin-inline-start:4px;}
.tab.active .count{opacity:.85;}

/* filters */
.filters{display:flex; gap:8px; padding:0 16px 12px; align-items:center;}
.search{
  flex:1; display:flex; align-items:center; gap:8px;
  background:var(--bg-soft); border:1px solid var(--card-border); border-radius:var(--radius-md);
  padding:10px 12px; color:var(--text-dim);
}
.search input{background:none; border:none; outline:none; color:var(--text); font-family:var(--font-body); font-size:13.5px; width:100%;}
.search svg{flex:none; opacity:.6;}
.chip-scroll{display:flex; gap:6px; overflow-x:auto; padding:0 16px 14px;}
.chip{
  flex:none; font-size:12px; padding:7px 13px; border-radius:99px; color:var(--text-dim);
  background:var(--bg-soft); border:1px solid var(--card-border); white-space:nowrap; display:flex; align-items:center; gap:5px;
}
.chip.on{color:var(--bg); background:var(--text-dim); border-color:var(--text-dim); font-weight:600;}
.chip .dot-urgent{width:6px;height:6px;border-radius:50%;background:var(--red);}

/* ===== Card list ===== */
main{flex:1; padding:4px 16px 120px; display:flex; flex-direction:column; gap:14px;}
.stage-view{display:none; flex-direction:column; gap:14px;}
.stage-view.active{display:flex;}

.card{
  position:relative;
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--card), var(--bg-soft) 130%);
  border:1px solid var(--card-border);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:opacity .5s ease, transform .5s ease, filter .4s ease;
}
.card::before{
  content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px;
  background:var(--edge-color, var(--muted)); opacity:var(--edge-opacity, .5);
}
.card.urgent::before{background:var(--red); box-shadow:0 0 14px var(--red);}
.card.removing{opacity:0; transform:scale(.92) translateY(-6px); filter:blur(2px);}
.card.syncing{filter:grayscale(.85) brightness(.72); pointer-events:none;}
.card.error-flash{animation:errorFlash 1s ease;}
@keyframes errorFlash{
  0%{box-shadow:0 0 0 0 rgba(201,118,108,0)}
  30%{box-shadow:0 0 0 6px rgba(201,118,108,.35)}
  100%{box-shadow:0 0 0 0 rgba(201,118,108,0)}
}

.card-top{padding:16px 16px 12px; display:flex; flex-direction:column; gap:10px;}
.card-toprow{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.ref{font-family:var(--font-display); font-weight:800; font-size:16px; display:flex; align-items:center; gap:8px;}
.ref .num{color:var(--accent);}
.badge-urgent{
  font-size:10px; font-weight:700; color:#fff; background:var(--red); padding:3px 8px; border-radius:99px;
  display:inline-flex; align-items:center; gap:4px;
}
.time-tag{font-size:11px; color:var(--muted); white-space:nowrap;}

.meta-grid{display:grid; grid-template-columns:1fr 1fr; gap:7px 14px; font-size:12.5px;}
.meta-item{display:flex; flex-direction:column; gap:2px; min-width:0;}
.meta-item .k{color:var(--muted); font-size:10.5px;}
.meta-item .v{color:var(--text); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.meta-item.locked .v{color:var(--text-dim);}
.meta-item.locked .k::after{content:" 🔒";font-size:8px;}
.meta-item.copyable{cursor:pointer;}
.meta-item.copyable .v{border-bottom:1px dashed var(--muted);}
.copied-toast{
  position:fixed; bottom:96px; left:50%; transform:translateX(-50%) translateY(10px);
  background:var(--text); color:var(--bg); font-size:12px; font-weight:700; padding:8px 16px;
  border-radius:99px; opacity:0; transition:.25s; pointer-events:none; z-index:80;
}
.copied-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* raw message accordion */
.raw-toggle{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:2px auto 0; font-size:11.5px; color:var(--accent); background:var(--accent-soft);
  padding:7px 14px; border-radius:99px; width:fit-content; cursor:pointer; border:1px solid var(--accent-soft);
}
.raw-toggle svg{transition:.25s;}
.raw-toggle.open svg{transform:rotate(180deg);}
.raw-body{
  max-height:0; overflow:hidden; transition:max-height .35s ease;
  text-align:center; font-size:12.5px; color:var(--text-dim); line-height:1.8;
}
.raw-body.open{max-height:220px; margin-top:10px;}
.raw-body p{margin:0; padding:12px 14px; background:var(--bg-soft); border-radius:var(--radius-sm); border:1px dashed var(--card-border);}
.flags-row{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:8px;}
.flag{font-size:10.5px; background:var(--red-2); color:var(--red); padding:4px 9px; border-radius:99px; border:1px solid rgba(201,118,108,.28);}

/* items table */
.items{border-top:1px solid var(--card-border); padding:12px 16px;}
.items-title{font-size:11px; color:var(--muted); margin-bottom:8px; font-weight:600;}
.item-row{display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:12px;}
.item-row:last-child{border-bottom:none;}
.item-name{color:var(--text); font-weight:500;}
.item-name .sub{display:block; color:var(--muted); font-size:10.5px; margin-top:1px;}
.size-pill{font-size:10.5px; padding:3px 8px; border-radius:7px; background:var(--bg-soft); border:1px solid var(--card-border); color:var(--text-dim);}
.size-pill.on{background:var(--green-soft); color:var(--green); border-color:rgba(127,174,111,.35); font-weight:700;}
.match-tag{font-size:10px; color:var(--muted);}

/* sections (payment conditional blocks) */
.section{border-top:1px solid var(--card-border); padding:14px 16px;}
.section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.section-title{font-size:12px; font-weight:700; color:var(--text-dim); display:flex; align-items:center; gap:6px;}
.section-title .ico{width:16px; height:16px; opacity:.7;}
.section.modification{background:linear-gradient(180deg, var(--accent-soft), transparent);}
.section.refund{background:linear-gradient(180deg, rgba(201,118,108,.08), transparent);}

.field-row{display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:12.5px;}
.field-row .k{color:var(--muted);}
.field-row .v{color:var(--text); font-weight:600;}

/* toggle / checkbox with undo ring */
.toggle-line{display:flex; align-items:center; justify-content:space-between; padding:9px 0;}
.toggle-label{font-size:12.5px; color:var(--text-dim);}
.toggle-btn{
  --size:40px; width:var(--size); height:var(--size); position:relative; flex:none;
  border:none; background:none; cursor:pointer;
}
.toggle-btn svg.ring{position:absolute; inset:0; transform:rotate(-90deg);}
.toggle-btn .ring-bg{fill:none; stroke:var(--card-border); stroke-width:3;}
.toggle-btn .ring-fg{fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; stroke-dasharray:100.5; stroke-dashoffset:100.5; transition:stroke-dashoffset linear;}
.toggle-core{
  position:absolute; inset:6px; border-radius:50%; background:var(--bg-soft); border:1.5px solid var(--card-border);
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.toggle-btn.on .toggle-core{background:var(--accent); border-color:var(--accent);}
.toggle-btn.locked{opacity:.35; pointer-events:none;}
.toggle-core svg{width:14px; height:14px; opacity:0; transition:.2s; stroke:var(--bg);}
.toggle-btn.on .toggle-core svg{opacity:1;}
.toggle-btn.countdown .toggle-core{background:var(--accent-soft);}

/* overall confirm gate */
.gate-note{font-size:10.5px; color:var(--muted); margin-top:6px; line-height:1.6;}
.gate-note.ready{color:var(--green);}

/* OCR images */
.ocr-block{display:flex; flex-direction:column; gap:12px;}
.ocr-pair{display:flex; gap:10px; align-items:flex-start;}
.ocr-thumb{
  width:76px; height:76px; border-radius:12px; object-fit:cover; flex:none; cursor:zoom-in;
  border:1px solid var(--card-border);
}
.ocr-data{flex:1; display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; font-size:11px;}
.ocr-data .k{color:var(--muted);}
.ocr-data .v{color:var(--text); font-weight:500;}
.confidence{grid-column:1/-1; display:flex; align-items:center; gap:6px; margin-top:2px;}
.conf-bar{flex:1; height:4px; border-radius:99px; background:var(--card-border); overflow:hidden;}
.conf-fill{height:100%; background:var(--green); border-radius:99px;}

/* whatsapp / fake stage */
.wa-preview{background:var(--bg-soft); border:1px solid var(--card-border); border-radius:var(--radius-sm); padding:12px; font-size:12px; color:var(--text-dim); line-height:1.8; margin-bottom:10px;}
.wa-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background:#3fae62; color:#fff; font-family:var(--font-display); font-weight:700; font-size:13px;
  padding:12px; border-radius:var(--radius-md); border:none; cursor:pointer;
}
.resolve-btn{
  width:100%; margin-top:10px; padding:11px; border-radius:var(--radius-md); border:1px solid var(--red-2);
  background:rgba(201,118,108,.12); color:var(--red); font-family:var(--font-body); font-weight:600; font-size:12.5px; cursor:pointer;
}

/* prep card ready button */
.ready-btn{
  display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:var(--radius-md);
  background:var(--bg-soft); border:1px solid var(--card-border); cursor:pointer;
}
.ready-btn.on{background:var(--green-soft); border-color:rgba(127,174,111,.35);}
.ready-btn .label{font-size:12.5px; font-weight:600; color:var(--text-dim);}
.ready-btn.on .label{color:var(--green);}

/* locked footer note */
.locked-note{padding:10px 16px 16px; font-size:10px; color:var(--muted); display:flex; align-items:center; gap:5px;}

/* ===== bottom nav ===== */
nav.bottom{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px;
  padding:10px 14px calc(env(safe-area-inset-bottom) + 10px);
  background:linear-gradient(0deg, var(--bg) 55%, transparent);
  z-index:40;
}
.bottom-inner{
  display:flex; justify-content:space-around; align-items:center;
  background:rgba(28,25,20,.9); backdrop-filter:blur(14px);
  border:1px solid var(--card-border); border-radius:22px; padding:8px 6px; box-shadow:var(--shadow);
}
.nav-item{display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--muted); background:none; border:none; padding:7px 10px; border-radius:14px; font-family:var(--font-body); font-size:9.5px;}
.nav-item.active{color:var(--accent); background:var(--accent-soft);}
.nav-item svg{width:19px; height:19px;}

/* zoom modal */
.zoom-overlay{
  position:fixed; inset:0; background:rgba(10,8,6,.92); z-index:100; display:none;
  align-items:center; justify-content:center; flex-direction:column; gap:16px; padding:24px;
  backdrop-filter:blur(4px);
}
.zoom-overlay.show{display:flex;}
.zoom-overlay img{max-width:100%; max-height:65vh; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.6);}
.zoom-actions{display:flex; gap:10px;}
.zoom-actions a, .zoom-actions button{
  display:flex; align-items:center; gap:6px; font-size:12.5px; font-family:var(--font-body); font-weight:600;
  padding:10px 18px; border-radius:99px; border:1px solid var(--card-border); background:var(--bg-soft); color:var(--text);
  cursor:pointer; text-decoration:none;
}
.zoom-close{position:absolute; top:calc(env(safe-area-inset-top) + 16px); left:20px; color:var(--text); background:none; border:none; font-size:26px; cursor:pointer;}

.empty{padding:60px 20px; text-align:center; color:var(--muted); font-size:13px;}
.empty b{display:block; font-family:var(--font-display); color:var(--text-dim); font-size:15px; margin-bottom:6px;}

/* ===== Production Demand ===== */
.demand-select-wrap{padding:2px 2px 14px;}
.demand-select{
  width:100%; appearance:none; -webkit-appearance:none;
  background:var(--bg-soft) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238f8471" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>') left 12px center no-repeat;
  background-size:16px; border:1px solid var(--card-border); border-radius:var(--radius-md);
  color:var(--text); font-family:var(--font-display); font-weight:700; font-size:14px;
  padding:12px 40px 12px 14px; cursor:pointer;
}
.demand-summary{
  display:flex; gap:8px; overflow-x:auto; padding:2px 2px 14px;
}
.demand-summary .pill{
  flex:none; font-size:11px; padding:6px 12px; border-radius:99px; background:var(--bg-soft);
  border:1px solid var(--card-border); color:var(--text-dim); display:flex; align-items:center; gap:5px;
}
.demand-summary .pill b{color:var(--red); font-family:var(--font-display);}
.demand-card{
  border-radius:var(--radius-md); background:var(--card); border:1px solid var(--card-border);
  padding:13px 15px; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px;
}
.demand-card .pname{font-size:13px; font-weight:600; color:var(--text);}
.demand-sizes{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
.demand-chip{
  min-width:38px; text-align:center; font-size:11px; font-weight:700; padding:5px 8px; border-radius:8px;
  background:var(--red-2); color:var(--red); border:1px solid rgba(201,118,108,.32);
}
.demand-chip .lbl{display:block; font-size:8.5px; opacity:.75; font-weight:500;}
.demand-empty-state{
  text-align:center; padding:40px 20px; color:var(--green); font-size:12.5px; background:var(--green-soft);
  border-radius:var(--radius-md); border:1px dashed rgba(127,174,111,.35);
}

/* Embedded Production Demand — same locked tokens and card language */
.demand-panel{grid-column:1/-1; min-width:0; margin-bottom:14px; overflow:visible;}
.demand-head{padding:18px 16px 14px; align-items:flex-start;}
.demand-head h2{font-family:var(--font-display); font-size:26px; line-height:1.15; margin:4px 0 2px; color:var(--text); text-wrap:balance;}
.eyebrow{font-size:10px; letter-spacing:.12em; color:var(--accent); font-weight:800;}
.statline{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:12px 8px 6px; font-size:12px; color:var(--text-dim);}
.stat-total b{font-family:var(--font-display); color:var(--text); font-size:23px;}.stat-date{font-size:11px; color:var(--muted);}
.manufacturing-total{margin:3px 8px 14px; padding:12px 14px; border:1px solid var(--card-border); border-radius:var(--radius-sm); background:var(--bg-soft); color:var(--text-dim); font-size:12px;}.manufacturing-total b{font-family:var(--font-display); color:var(--accent); font-size:22px; margin-inline-start:6px;}
.demand-collapse{border:1px solid var(--card-border); background:var(--bg-soft); color:var(--text); border-radius:99px; padding:8px 13px; font:600 12px var(--font-body); cursor:pointer;}
.demand-body{padding:0 4px 10px;}
.demand-controls{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0 14px;}
.pillnav{display:flex; gap:7px; overflow:auto; scrollbar-width:none; padding:2px 0 8px;}
.pillnav::-webkit-scrollbar{display:none;}
.pillnav .pill{flex:none; white-space:nowrap; border:1px solid var(--card-border); background:var(--bg-soft); color:var(--text-dim); border-radius:99px; padding:9px 14px; font:600 12px var(--font-body); cursor:pointer;}
.pillnav .pill b{display:inline-grid; place-items:center; min-width:24px; height:24px; margin-inline-start:6px; border-radius:99px; background:var(--card); color:var(--text); font-size:11px;}
.pillnav .pill.active{background:var(--accent); color:var(--bg); border-color:var(--accent);}
.pillnav .pill.active b{background:var(--accent-2); color:var(--text);}
.pillnum{display:inline-grid; place-items:center; min-width:29px; min-height:29px; padding:4px 6px; border-radius:8px; color:var(--text-dim); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;}
.switch-line{display:flex; justify-content:space-between; align-items:center; color:var(--text-dim); font-size:11px;}
.switch{position:relative; width:38px; height:22px; flex:none;}
.switch input{position:absolute; opacity:0;}
.slider{position:absolute; inset:0; border-radius:99px; background:var(--bg-soft); border:1px solid var(--card-border); cursor:pointer;}
.slider::after{content:""; position:absolute; width:16px; height:16px; inset-block-start:2px; inset-inline-start:2px; border-radius:50%; background:var(--muted); transition:transform .2s ease,background .2s ease;}
.switch input:checked+.slider::after{transform:translateX(-16px); background:var(--accent);}
.cat{min-width:0; border:1px solid var(--card-border); border-radius:var(--radius-md); background:var(--bg-soft); margin-top:10px; overflow:hidden; scroll-margin-top:110px;}
.cat>summary{list-style:none; display:flex; align-items:center; gap:11px; padding:15px 14px; cursor:pointer; color:var(--text);}
.cat>summary::-webkit-details-marker{display:none;}
.glyph{width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--bg-soft); color:var(--text-dim); font-size:14px;}
.cat-title{flex:1; font-family:var(--font-display); font-weight:700; font-size:16px;}
.cat-total{font-size:12px; color:var(--text-dim); white-space:nowrap;}.cat-total b{color:var(--text); font-size:13px;}
.chev{width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .15s; margin-inline-start:2px;}.cat[open]>summary .chev{transform:rotate(-135deg);}
.cat-body{padding:0 6px 10px;}
.cat table{width:100%; min-width:0; border-collapse:collapse; table-layout:fixed; font-size:12px;}
.cat .product-col{width:38%;}
.cat th,.cat td{padding:8px 4px; border-top:1px solid var(--card-border); text-align:center; color:var(--text-dim); overflow-wrap:anywhere; word-break:break-word;}
.cat thead th{font-size:11px; color:var(--muted); border-top:0;}.cat th:first-child,.cat td:first-child{text-align:start; padding-inline-start:6px;}
.cat tbody th{font-size:12px; font-weight:600; color:var(--text); line-height:1.35;}
.product-row{cursor:pointer;}
.lvl1{background:var(--accent-soft);color:var(--accent);}.lvl2{background:var(--red-2);color:var(--red);}.lvl3,.lvl4,.lvl5{background:var(--red);color:var(--card);}
.totalnum{font-family:var(--font-display); font-weight:700; color:var(--text)!important;}.totalnum.hasred{color:var(--red)!important;}
.cat tfoot td,.cat tfoot th{font-size:13px; font-weight:700; border-top:2px solid var(--text);}
.detailwrap td{padding:0!important; border-top:0!important;}.detail{margin:3px 0 8px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--bg);}
.detail-line{display:flex; justify-content:space-between; gap:10px; padding:4px 0; font-size:11.5px; color:var(--text-dim);}.detail-line b{color:var(--text);}.detail-line i,.demand-legend i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-inline-end:6px;}.dot-g{background:var(--green);}.dot-r{background:var(--red);}
.demand-legend{display:flex; justify-content:center; gap:18px; padding:13px 0 4px; color:var(--text-dim); font-size:11.5px;}
.receipt-empty{display:grid; place-items:center; font-size:9px; text-align:center; color:var(--muted);}
.login-shell{min-height:100vh; display:grid; place-items:center; padding:24px;}
.login-shell[hidden]{display:none;}
.login-card{width:min(100%,390px); padding:28px;}
.login-card h1{font-family:var(--font-display); font-size:28px; margin:5px 0 3px; color:var(--text);}
.login-card>p{color:var(--text-dim); font-size:12px; margin-bottom:22px;}
.login-card label{display:grid; gap:7px; color:var(--text-dim); font-size:11px; font-weight:700; margin-top:13px;}
.login-card input{width:100%; border:1px solid var(--card-border); background:var(--bg-soft); color:var(--text); border-radius:var(--radius-md); padding:12px 13px; font:500 13px var(--font-body); outline:none;}
.login-card input:focus{border-color:var(--accent);}
.login-submit{width:100%; margin-top:20px; padding:12px; border:0; border-radius:var(--radius-md); background:var(--accent); color:var(--bg); font:800 13px var(--font-body); cursor:pointer;}
.login-submit:disabled{opacity:.55; cursor:wait;}
.login-error{min-height:18px; margin-top:10px; color:var(--red); font-size:11px;}
.account-overlay{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px; background:var(--bg-soft);}
.account-overlay[hidden]{display:none;}
.account-panel{width:min(100%,420px); max-height:90vh; overflow:auto; padding:20px;}
.account-panel h2{margin:0; color:var(--text); font:700 21px var(--font-display);}.account-close{border:0;background:transparent;color:var(--text);font-size:24px;cursor:pointer;}.account-user{color:var(--text-dim);font-size:11px;}
.account-form{display:grid;gap:11px;}.account-form label{display:grid;gap:6px;color:var(--text-dim);font-size:11px;font-weight:700;}.account-form input,.account-form select{border:1px solid var(--card-border);background:var(--bg-soft);color:var(--text);border-radius:var(--radius-sm);padding:11px;font:500 13px var(--font-body);}.account-form button,.logout-btn{border:0;border-radius:var(--radius-sm);padding:11px;background:var(--accent);color:var(--bg);font:700 12px var(--font-body);cursor:pointer;}.logout-btn{width:100%;margin-top:16px;background:var(--red);}.account-admin{margin-top:20px;border-top:1px solid var(--card-border);}.account-admin h3{font:700 16px var(--font-display);color:var(--text);}.user-row{display:grid;grid-template-columns:1fr auto;gap:2px;padding:9px 0;border-top:1px solid var(--card-border);font-size:12px;color:var(--text);}.user-row small{grid-column:1;}.user-row small,.account-message{color:var(--text-dim);font-size:10px;}.account-message{min-height:14px;}.user-delete{grid-column:2;grid-row:1/3;border:1px solid var(--red);border-radius:var(--radius-sm);background:var(--red-2);color:var(--red);font:700 10px var(--font-body);padding:6px 8px;cursor:pointer;}
.meta-group-title{grid-column:1/-1; margin-top:5px; padding-top:9px; border-top:1px solid var(--card-border); color:var(--accent); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;}
.meta-group-title:first-child{margin-top:0; padding-top:0; border-top:0;}
.meta-item.editable input,.meta-item.editable select,.review-item-controls input,.review-item-controls select,.item-name .meta-item.editable select{
  width:100%;min-height:40px;border:1px solid var(--card-border);border-radius:var(--radius-sm);background:var(--bg-soft);color:var(--text);padding:8px 9px;font:600 12px var(--font-body);outline:none;
}
.meta-item.editable input:focus,.meta-item.editable select:focus,.review-item-controls input:focus,.review-item-controls select:focus{border-color:var(--accent);}
.review-item-controls{display:grid;grid-template-columns:minmax(150px,1fr) minmax(82px,.45fr);gap:8px;min-width:min(100%,290px);}
.review-item-controls .meta-item{min-width:0;}
.toggle-line.compact{grid-column:1/-1;margin-top:4px;padding-top:7px;}
.size-badges{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;}
.item-name>.meta-item.editable{margin-top:8px;}
@media (max-width:560px){.review-item-controls{grid-template-columns:1fr;width:100%;}.review-row{grid-template-columns:1fr;}.size-badges{justify-content:flex-start;}}

/* ===== Shipping queue ===== */
.shipping-intro{padding:16px;grid-column:1/-1;}
.shipping-intro .section-head{margin:0;}
.shipping-intro h2{margin:2px 0 0;font:800 22px var(--font-display);color:var(--text);}
.shipping-intro p{margin:10px 0 0;color:var(--text-dim);font:500 12px/1.75 var(--font-body);}
.shipping-count{border:1px solid var(--card-border);border-radius:99px;padding:6px 10px;color:var(--accent);background:var(--accent-soft);font:700 11px var(--font-body);}
.shipping-lane{display:contents;}
.lane-title{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;color:var(--text);font:800 17px var(--font-display);padding:4px 2px 0;}
.lane-title b{min-width:26px;text-align:center;padding:4px 7px;border-radius:99px;background:var(--bg-soft);border:1px solid var(--card-border);color:var(--text-dim);font:700 11px var(--font-body);}
.shipping-error{margin:0 16px 12px;padding:9px 10px;border-radius:var(--radius-sm);background:var(--red-2);border:1px solid var(--red);color:var(--red);font:600 11px/1.6 var(--font-body);}
.shipping-page.active{display:block!important;}
.shipping-page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;margin-bottom:12px;}
.shipping-page-head h2{margin:3px 0;font:800 24px var(--font-display);color:var(--text);}
.shipping-page-head p{margin:0;color:var(--text-dim);font-size:11px;}
.shipping-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.shipping-actions button,.dispatch-file{min-height:44px;border:1px solid var(--accent);border-radius:var(--radius-md);background:var(--accent);color:var(--bg);padding:10px 14px;font:800 12px var(--font-body);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.shipping-actions button[data-action="selected"]{background:var(--bg-soft);color:var(--accent);}
.shipping-actions button:disabled{opacity:.38;cursor:not-allowed;}
.shipping-actions button.busy{opacity:.65;cursor:wait;}
.shipping-subtabs{display:flex;gap:6px;margin-bottom:12px;padding:4px;border:1px solid var(--card-border);border-radius:var(--radius-md);background:var(--bg-soft);}
.shipping-subtabs button{flex:1;min-height:44px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-dim);font:700 12px var(--font-body);cursor:pointer;}
.shipping-subtabs button.active{background:var(--card);color:var(--text);box-shadow:var(--shadow);}
.shipping-panel{display:none;}.shipping-panel.active{display:block;}
.shipping-queue-grid,.dispatch-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start;}
.shipping-edit-field{display:grid;gap:6px;margin-top:10px;color:var(--muted);font-size:10.5px;}
.shipping-edit-field input,.shipping-edit-field textarea{width:100%;min-height:44px;border:1px solid var(--card-border);border-radius:var(--radius-sm);background:var(--bg-soft);color:var(--text);padding:10px 11px;font:500 12px var(--font-body);resize:vertical;}
.immediate-check{width:44px;height:44px;border:1px solid var(--card-border);border-radius:50%;background:var(--bg-soft);color:transparent;font:800 18px var(--font-body);cursor:pointer;transition:transform .16s ease,background .16s ease,color .16s ease;}
.immediate-check.on{background:var(--green);border-color:var(--green);color:var(--bg);}
.immediate-check:active{transform:scale(.94);}
.dispatch-card{padding-bottom:14px;}
.dispatch-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px;border-bottom:1px solid var(--card-border);}
.dispatch-id{color:var(--accent);font:800 12px var(--font-body);overflow-wrap:anywhere;}.dispatch-head time{color:var(--muted);font-size:10px;white-space:nowrap;}
.dispatch-stats{display:flex;gap:7px;overflow-x:auto;padding:12px 16px;}
.dispatch-stat{min-width:70px;border:1px solid var(--card-border);border-radius:var(--radius-sm);background:var(--bg-soft);padding:8px;display:grid;gap:3px;text-align:center;}
.dispatch-stat small{color:var(--muted);font-size:9px;}.dispatch-stat b{color:var(--text);font-size:13px;}.dispatch-stat.ok b{color:var(--green);}.dispatch-stat.bad b{color:var(--red);}
.dispatch-files{display:grid;grid-template-columns:1fr;gap:8px;padding:4px 16px 12px;}.dispatch-file{background:var(--bg-soft);color:var(--accent);}
.dispatch-customers,.dispatch-failures{margin:0 16px 12px;border:1px solid var(--card-border);border-radius:var(--radius-md);overflow:hidden;}.dispatch-customers h3{margin:0;padding:11px 12px;border-bottom:1px solid var(--card-border);font:800 13px var(--font-display);color:var(--text);}
.dispatch-customer,.dispatch-failure{display:grid;gap:4px;padding:10px 12px;border-bottom:1px solid var(--card-border);font-size:11px;color:var(--text-dim);}.dispatch-customer:last-child,.dispatch-failure:last-child{border-bottom:0;}.dispatch-customer small{color:var(--muted);}.dispatch-failure{background:var(--red-2);}.dispatch-failure b{color:var(--red);}.dispatch-failure span{color:var(--text-dim);}
.dispatch-refs{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px;}.dispatch-refs span{border:1px solid var(--card-border);border-radius:99px;background:var(--bg-soft);color:var(--text-dim);padding:5px 8px;font:700 10px var(--font-body);}

@media (min-width:768px){
  .app{max-width:1320px;}
  #mainViews .stage-view.active{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start;}
  nav.bottom{display:none;}
  body{padding-bottom:30px;}
  .demand-panel .demand-body{padding-inline:18px;}
  .demand-panel .cat-body{padding-inline:14px;}
  .shipping-queue-grid,.dispatch-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dispatch-files{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){.shipping-page-head{align-items:stretch;flex-direction:column;}.shipping-actions{display:grid;grid-template-columns:1fr 1fr;}.shipping-actions button:only-child{grid-column:1/-1;}.dispatch-head{align-items:flex-start;flex-direction:column;}}
@media (min-width:1180px){#mainViews .stage-view.active{grid-template-columns:repeat(3,minmax(0,1fr));}.shipping-queue-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.dispatch-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

@media (prefers-reduced-motion:reduce){.immediate-check,.card,.raw-body,.chev{transition:none!important;animation:none!important;}}

.locked-inline{display:grid;gap:2px;margin-top:7px;color:var(--text-dim);font:600 11px var(--font-body);}
.locked-inline small{color:var(--muted);font-size:9.5px;}
.locked-inline small::after{content:" 🔒";font-size:8px;}

.footnote{
  text-align:center; font-size:10px; color:var(--muted); padding:18px 30px 4px; line-height:1.7;
}