@font-face{font-family:'Plex';font-weight:400;font-display:swap;src:url(/fonts/plex-arabic-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Plex';font-weight:600;font-display:swap;src:url(/fonts/plex-arabic-arabic-600.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Plex';font-weight:700;font-display:swap;src:url(/fonts/plex-arabic-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Plex';font-weight:400;font-display:swap;src:url(/fonts/plex-arabic-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:'Plex';font-weight:700;font-display:swap;src:url(/fonts/plex-arabic-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
:root{--navy:#012756;--navy2:#071d3f;--gold:#02adc1;--gold-soft:#e0f6f9;--bg:#f3f5f9;--paper:#fff;--ink:#14213d;--muted:#64748b;--line:#e2e8f0;--ok:#15803d;--ok-soft:#dcfce7;--warn:#b45309;--warn-soft:#fef3c7;--bad:#b91c1c;--bad-soft:#fee2e2;--radius:14px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 Plex,'Segoe UI',Tahoma,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.boot{display:grid;place-items:center;min-height:100vh;color:var(--muted)}
.hidden{display:none!important}
.muted{color:var(--muted)}.small{font-size:13px}
/* header */
.top{position:sticky;top:0;z-index:30;background:var(--navy);color:#fff;padding:10px 14px calc(10px) ;display:flex;align-items:center;gap:10px;box-shadow:0 2px 12px #0002}
.top .brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.top .brand img{width:36px;height:36px;border-radius:10px;background:#fff1;object-fit:contain}
.top .brand strong{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .brand small{display:block;font-size:11px;color:#cbd5e1;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{position:relative;background:#0127560f;border:1px solid #01275614;border-radius:12px;width:42px;height:42px;display:grid;place-items:center;color:var(--navy);cursor:pointer}.icon-btn:hover{background:#0127561f}
.icon-btn svg{width:22px;height:22px}
.badge{position:absolute;top:-4px;left:-4px;min-width:20px;height:20px;border-radius:10px;background:var(--gold);color:var(--navy2);font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 5px}
/* layout */
main{max-width:980px;margin:0 auto;padding:14px 14px calc(96px + env(safe-area-inset-bottom))}
h1{font-size:22px;margin:4px 0 12px}h2{font-size:18px;margin:0 0 10px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:10px}
.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}
/* bottom tabs */
.tabs{position:fixed;inset:auto 0 0 0;z-index:40;background:var(--paper);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px #0001}
.tabs button{flex:1;max-width:120px;background:none;border:0;border-radius:12px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;color:var(--muted);position:relative}
.tabs button svg{width:24px;height:24px}
.tabs button.active{color:var(--navy);font-weight:700;background:#0127560d}
.tabs .badge{top:0;left:calc(50% - 22px)}
/* forms */
label{display:block;font-size:14px;font-weight:600;margin:10px 0 4px}
input,select,textarea{width:100%;min-height:48px;border:1px solid #cbd5e1;border-radius:12px;padding:10px 12px;background:#fff;font-size:16px}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid #01275633;border-color:var(--navy)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 18px;border-radius:12px;border:1px solid var(--line);background:var(--paper);font-weight:700;font-size:15px;text-decoration:none;color:var(--ink)}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--navy2)}
.btn.danger{color:var(--bad);border-color:#fecaca}
.btn.block{width:100%}.btn.small{min-height:38px;padding:6px 12px;font-size:13px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.check{display:flex;align-items:center;gap:8px;font-weight:400;font-size:14px}.check input{width:20px;min-height:0;height:20px}
.error{background:var(--bad-soft);color:var(--bad);border-radius:10px;padding:10px 12px;margin:10px 0;font-size:14px}
.ok-box{background:var(--ok-soft);color:var(--ok);border-radius:10px;padding:12px;margin:10px 0}
/* auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(160deg,var(--navy) 0 45%,var(--bg) 45%)}
.auth .box{width:100%;max-width:420px;background:var(--paper);border-radius:20px;padding:24px;box-shadow:0 20px 60px #0003}
.auth .logo{display:flex;align-items:center;gap:12px;margin-bottom:12px}.auth .logo img{width:56px;height:56px;border-radius:14px}
.auth .logo strong{font-size:22px;color:var(--navy)}.auth .switch{text-align:center;margin-top:14px;font-size:14px}
.linkish{background:none;border:0;color:var(--navy);font-weight:700;text-decoration:underline;padding:0}
/* catalog */
.search{position:sticky;top:62px;z-index:20;background:var(--bg);padding:6px 0 8px}
.search input{padding-inline-start:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='m14 14 4 4'/%3E%3C/svg%3E") no-repeat right 12px center}
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 14px;font-size:13px;white-space:nowrap}
.chips button.active{background:var(--navy);border-color:var(--navy);color:#fff}
.item{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center}
.item .name{font-weight:700;line-height:1.4}.item .code{font-size:12px;color:var(--muted);direction:ltr;text-align:right}
.item .price{font-weight:700;color:var(--navy)}.item .price.none{font-weight:400;color:var(--muted);font-size:13px}
.qty{grid-column:1/-1;display:flex;gap:8px;align-items:stretch}
.stepper{flex:1;display:flex;align-items:center;border:1px solid #cbd5e1;border-radius:12px;overflow:hidden;background:#fff}
.stepper button{width:44px;height:46px;border:0;background:#f1f5f9;font-size:20px;font-weight:700;color:var(--navy)}
.stepper input{border:0;min-height:46px;text-align:center;padding:0;border-radius:0;font-weight:700}
.stepper span{font-size:11px;color:var(--muted);padding:0 6px;white-space:nowrap}
.in-cart{outline:2px solid var(--gold);background:var(--gold-soft)}
/* cart bar */
.cartbar{position:fixed;inset:auto 10px calc(72px + env(safe-area-inset-bottom)) 10px;z-index:35;max-width:960px;margin:0 auto;background:var(--navy);color:#fff;border-radius:16px;padding:10px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 10px 30px #0004}
.cartbar .btn{min-height:42px}
/* orders */
.status{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 12px;font-size:13px;font-weight:700;white-space:nowrap}
.st-submitted{background:#e0e7ff;color:#3730a3}.st-sent{background:#dbeafe;color:#1d4ed8}.st-prepared{background:var(--gold-soft);color:#92400e}.st-pickup{background:#fef08a;color:#713f12}.st-delivered{background:var(--ok-soft);color:var(--ok)}.st-cancelled,.st-rejected{background:var(--bad-soft);color:var(--bad)}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:10px 0 4px}
.timeline div{text-align:center;font-size:11px;color:var(--muted);position:relative;padding-top:30px;line-height:1.35}
.timeline div::before{content:'';position:absolute;top:4px;right:calc(50% - 11px);width:22px;height:22px;border-radius:50%;background:#e2e8f0;border:3px solid #fff;box-shadow:0 0 0 1px #cbd5e1}
.timeline div::after{content:'';position:absolute;top:14px;right:calc(50% + 11px);width:calc(100% - 22px);height:3px;background:#e2e8f0}
.timeline div:last-child::after{display:none}
.timeline div.done{color:var(--navy);font-weight:700}.timeline div.done::before{background:var(--navy);box-shadow:0 0 0 1px var(--navy)}.timeline div.done::after{background:var(--navy)}
.timeline div.now::before{background:var(--gold);box-shadow:0 0 0 4px #02adc155}
.lines{width:100%;border-collapse:collapse;font-size:14px}.lines th{text-align:right;font-size:12px;color:var(--muted);font-weight:600;padding:6px 4px;border-bottom:1px solid var(--line)}.lines td{padding:8px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.miss{display:block;font-size:12px;color:var(--warn)}.cancelled-line{color:var(--bad);text-decoration:line-through}
.total{display:flex;justify-content:space-between;align-items:center;background:var(--navy);color:#fff;border-radius:12px;padding:12px 14px;margin-top:10px;font-weight:700}
.events{list-style:none;margin:0;padding:0;font-size:13px}.events li{padding:6px 0;border-bottom:1px dashed var(--line)}.events time{color:var(--muted);font-size:12px;margin-inline-start:6px}
/* notifications */
.notes{list-style:none;padding:0;margin:0}.notes li{padding:10px 4px;border-bottom:1px solid var(--line);font-size:14px}.notes li.unread{font-weight:700}.notes time{display:block;font-size:12px;color:var(--muted);font-weight:400}
/* admin */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:12px}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:12px;text-align:center}.kpi strong{display:block;font-size:26px;color:var(--navy)}.kpi span{font-size:13px;color:var(--muted)}
.kpi.attn{border-color:var(--gold);background:var(--gold-soft)}
.admin-line{border-bottom:1px solid var(--line);padding:10px 0}.admin-line .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.admin-line .grid label{margin:0;font-size:12px;font-weight:400;color:var(--muted)}.admin-line input{min-height:42px}
.stock{font-size:12px;color:var(--muted)}.stock b{color:var(--ink)}
.pubrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}.pubrow input{width:22px;height:22px;min-height:0}
/* dialog & toast */
dialog{border:0;border-radius:18px;padding:0;width:min(520px,calc(100vw - 20px));max-height:calc(100vh - 30px)}
dialog::backdrop{background:#0b1b2e88}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}.modal-head h2{margin:0}
.modal-body{padding:14px 16px}.modal-foot{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
#toast{position:fixed;inset:auto 16px calc(150px + env(safe-area-inset-bottom)) 16px;z-index:100;max-width:460px;margin:0 auto;text-align:center;pointer-events:none}
#toast div{display:inline-block;background:#0f172a;color:#fff;border-radius:12px;padding:10px 16px;font-size:14px;box-shadow:0 10px 30px #0005;animation:pop .2s ease-out}
#toast div.bad{background:var(--bad)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}
.empty{text-align:center;color:var(--muted);padding:30px 10px}
@media (min-width:900px){main{padding-top:20px}.tabs{max-width:620px;margin:0 auto 12px;border:1px solid var(--line);border-radius:18px;inset:auto 0 0 0}}
.top{background:#fff;color:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 2px 10px #01275612}
.top .brand{gap:12px}.top .brand .logo-img{height:34px;width:auto;max-width:58vw;background:none;border-radius:0;object-fit:contain}
.top .brand small{color:var(--muted);font-size:12px;border-inline-start:1px solid var(--line);padding-inline-start:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .icon-btn{background:#0127560f;color:var(--navy)}
.auth .logo{flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:14px}.auth .logo img{width:min(260px,80%);height:auto;border-radius:0}
.search{top:58px}.admin-line.unavailable{background:var(--bad-soft);border-radius:10px;padding:10px;margin:6px 0}.admin-line.unavailable strong{text-decoration:line-through;color:var(--bad)}.unavail-note{color:var(--bad);font-weight:700;font-size:13px;margin-top:6px}
.receive-card{display:flex;align-items:center;justify-content:space-between;gap:12px;border-color:var(--gold);background:var(--gold-soft)}.receive-card.done{background:var(--ok-soft);border-color:#86efac;color:var(--ok)}
.timeline{grid-template-columns:repeat(6,1fr)}.timeline div{font-size:10.5px}
/* live alerts */
#alert{position:fixed;inset:calc(70px + env(safe-area-inset-top)) 12px auto 12px;z-index:120;max-width:520px;margin:0 auto}
.alert-card{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;background:#fff7ed;border:2px solid #ea580c;border-inline-start:8px solid #ea580c;border-radius:16px;padding:14px;box-shadow:0 16px 40px #7c2d1240;animation:shake .5s ease-out}
.alert-card strong{color:#c2410c;font-size:15px}.alert-card time{display:block;font-size:12px;color:var(--muted);margin-top:2px}.alert-card .grow{min-width:180px}
.alert-icon{flex:none;width:34px;height:34px;border-radius:50%;background:#ea580c;color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px}
.alert-actions{display:flex;gap:8px;width:100%;justify-content:flex-end}
@keyframes shake{0%{opacity:0;transform:translateY(-10px)}40%{opacity:1;transform:translateX(-6px)}60%{transform:translateX(6px)}80%{transform:translateX(-3px)}100%{transform:none}}
.notes li.important{background:#fff7ed;border-inline-start:4px solid #ea580c;padding-inline-start:10px;border-radius:6px}.imp-tag{display:inline-block;background:#ea580c;color:#fff;font-size:11px;border-radius:6px;padding:1px 7px;margin-inline-start:6px;vertical-align:middle}
.notify-ask{display:flex;gap:10px;align-items:center;justify-content:space-between;background:var(--gold-soft);border-radius:12px;padding:10px;margin-bottom:10px;font-size:13px}
.push-on{display:inline-block;color:var(--ok);font-weight:700;margin-bottom:4px}
#update-bar{position:fixed;inset:auto 12px calc(84px + env(safe-area-inset-bottom)) 12px;z-index:130;max-width:460px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--navy);color:#fff;border:2px solid var(--gold);border-radius:14px;padding:10px 14px;font:inherit;cursor:pointer;box-shadow:0 12px 30px #01275655;animation:pop .2s ease-out}#update-bar span{font-size:12px;opacity:.85}
.edit-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;border-color:var(--gold);background:var(--gold-soft)}.edit-banner .btn{flex:none;display:inline-flex;align-items:center;gap:4px}.edit-banner svg,.remove-btn svg,.empty .btn svg{width:16px;height:16px;vertical-align:-3px}
.remove-btn{display:inline-flex;align-items:center;gap:4px}
/* requested materials, photos */
.custom-tag{display:inline-block;background:var(--gold-soft);color:var(--navy);border:1px solid var(--gold);font-size:11px;font-weight:700;border-radius:6px;padding:0 6px;vertical-align:middle}
.custom-ask{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border-style:dashed;border-color:var(--gold)}.custom-ask .btn svg{width:16px;height:16px;vertical-align:-3px}
.photos{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.photo{position:relative;width:84px;height:84px;border-radius:10px;overflow:hidden;border:1px solid var(--line);display:block;background:#f1f5f9}.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo button{position:absolute;top:3px;inset-inline-end:3px;width:24px;height:24px;border-radius:50%;border:0;background:#0f172acc;color:#fff;font-size:16px;line-height:1;cursor:pointer}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.icon-btn.small-icon{width:30px;height:30px;min-height:0;flex:none;padding:0}.icon-btn.small-icon svg{width:16px;height:16px}
/* warehouse staff */
.w-line{border:1px solid var(--line);border-radius:12px;padding:10px;margin:8px 0}.w-line.full{border-color:#86efac;background:var(--ok-soft)}.w-line.part{border-color:var(--gold);background:var(--gold-soft)}.w-line.none{border-color:#fca5a5;background:var(--bad-soft)}
.w-qty{text-align:center;font-weight:700;color:var(--navy);white-space:nowrap}.w-qty span{display:block}.w-marks{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.btn.ok{background:var(--ok);color:#fff;border-color:var(--ok)}.btn.warn{background:var(--gold);color:var(--navy);border-color:var(--gold)}.btn.bad{background:var(--bad);color:#fff;border-color:var(--bad)}
/* audit trail */
.log-row{padding:9px 0;border-bottom:1px solid var(--line)}.log-row time{font-size:12px;color:var(--muted);white-space:nowrap}.log-row.failed strong{color:var(--bad)}
.tabs button{min-width:0}.tabs button{font-size:11.5px}
.card .btn{white-space:nowrap}.card .btn svg{width:16px;height:16px;vertical-align:-3px}
.w-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.w-head strong{font-size:16px}.w-qty{flex:none;font-size:17px;font-weight:800;color:var(--navy);background:#0127560d;border-radius:10px;padding:4px 12px;white-space:nowrap}
.w-marks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.w-marks .btn{min-height:46px;font-weight:700}
.w-part{display:flex;align-items:center;gap:10px;margin-top:10px;background:#fff;border-radius:10px;padding:8px 10px}.w-part label{margin:0;font-weight:700;white-space:nowrap}.w-part input{max-width:140px;font-size:18px;text-align:center}
.w-result{display:inline-block;margin-top:6px;font-weight:700;border-radius:8px;padding:2px 10px;font-size:13px;white-space:nowrap}.w-result.ok{background:var(--ok-soft);color:var(--ok)}.w-result.warn{background:#fef3c7;color:#92400e}.w-result.bad{background:var(--bad-soft);color:var(--bad)}
.btn.warn{background:#f59e0b;color:#fff;border-color:#f59e0b}.w-line.part{border-color:#f59e0b;background:#fffbeb}
.push-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;max-width:900px;margin:10px auto 0;padding:10px 14px;border-radius:12px;font-size:14px;font-weight:600}
.push-banner.blocked{background:var(--bad-soft);color:var(--bad);border:1px solid #fca5a5}.push-banner.off{background:var(--gold-soft);color:var(--navy);border:1px solid var(--gold)}
.unblock{margin:8px 0 0;padding-inline-start:20px;font-size:14px;line-height:1.9}
.split-line{border-bottom:1px solid var(--line);padding:8px 0}.split-line input[type=checkbox]{width:22px;height:22px;min-height:0;flex:none}.split-qty{margin-top:6px;gap:8px}
.related{margin-top:8px;background:#0127560a;border-radius:10px;padding:8px 10px;line-height:1.9}.related a{font-weight:700;color:var(--navy)}
.link{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--navy);text-decoration:underline;cursor:pointer}
.na-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.na-q{display:flex;flex-direction:column;font-size:11px;color:var(--muted);margin:0;gap:2px}.na-q input{width:78px;min-height:38px;text-align:center}
.na-list{list-style:none;margin:0;padding:0}.na-list li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line)}.na-list li span{flex:1}.na-list li b{white-space:nowrap;color:var(--navy)}
.perms{display:flex;flex-direction:column;gap:2px}.perm{display:flex;align-items:flex-start;gap:8px;margin:0;padding:7px 0;border-bottom:1px dashed var(--line);font-weight:400;font-size:14px}.perm input{width:20px;height:20px;min-height:0;flex:none;margin-top:2px}
.quote-card{border-color:var(--gold);background:var(--gold-soft)}.quote-card.ready{border-color:#86efac;background:var(--ok-soft)}.quote-card .total{margin-top:10px}
.st-quote{background:#fef3c7;color:#92400e}.st-quoted{background:var(--ok-soft);color:var(--ok)}
.hist-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 12px;margin-top:8px}.hist-grid div{font-size:13px}.hist-grid span{display:block;font-size:11px;color:var(--muted)}@media(min-width:700px){.hist-grid{grid-template-columns:repeat(3,1fr)}}
.acc-link{font-size:16px;text-decoration:none}.acc-link:hover{text-decoration:underline}
.acc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}.acc-facts div{background:#0127560a;border-radius:10px;padding:8px 10px;font-weight:700;color:var(--navy)}.acc-facts span{display:block;font-size:11px;color:var(--muted);font-weight:400}
.expected{border-color:var(--gold);background:var(--gold-soft);font-size:15px}
.top .back-btn{flex:none}.top .back-btn svg{width:22px;height:22px}
.sent-msgs{margin-top:12px;border-top:1px dashed var(--line);padding-top:8px}.sent-msg{background:#0127560a;border-radius:10px;padding:8px 10px;margin-top:6px;font-size:14px}.sent-msg time{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
/* conversations */
.chat{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px;height:calc(100vh - 330px);min-height:260px;overflow-y:auto}
.bubble{max-width:78%;border-radius:14px;padding:7px 11px;font-size:15px;line-height:1.6;word-wrap:break-word;white-space:pre-wrap}.bubble .who{font-size:11px;font-weight:700;opacity:.75}.bubble time{display:block;font-size:10.5px;opacity:.7;text-align:left}
.bubble.mine{align-self:flex-start;background:var(--navy);color:#fff;border-bottom-right-radius:4px}.bubble.theirs{align-self:flex-end;background:#eef2f7;color:var(--ink);border-bottom-left-radius:4px}
.chat-day{align-self:center;font-size:11.5px;color:var(--muted);background:#f1f5f9;border-radius:999px;padding:2px 10px;margin:6px 0}
.composer{display:flex;gap:8px;align-items:flex-end;margin-top:8px;position:sticky;bottom:calc(84px + env(safe-area-inset-bottom))}.composer textarea{flex:1;min-height:46px;max-height:140px;resize:none}.composer .btn{min-height:46px}
.chat-thread.unread{border-color:var(--gold);background:var(--gold-soft)}.chat-thread .badge{position:static;display:inline-block}
.contact{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:right;background:none;border:0;border-bottom:1px solid var(--line);padding:9px 2px;font:inherit;cursor:pointer}.contact:hover{background:#0127560a}
.composer .icon-btn{flex:none;width:44px;height:46px}.composer .icon-btn svg{width:22px;height:22px}
.composer.recording{background:#fff;border:1px solid #fca5a5;border-radius:14px;padding:6px 10px;align-items:center}.rec-dot{width:12px;height:12px;border-radius:50%;background:#dc2626;animation:blink 1s infinite}@keyframes blink{50%{opacity:.25}}
.chat-img{display:block;max-width:240px;max-height:260px;border-radius:10px;margin-top:4px;object-fit:cover}.chat-audio{display:block;max-width:260px;height:40px;margin-top:4px}
/* fixed messaging button on every screen */
.chat-fab{position:fixed;left:16px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center;gap:6px;background:var(--gold);color:var(--navy);border:0;border-radius:999px;padding:12px 16px;font:inherit;font-weight:700;box-shadow:0 10px 26px #01275640;cursor:pointer}
.chat-fab svg{width:22px;height:22px}.chat-fab .badge{position:absolute;top:-6px;right:-4px}.chat-fab.lifted{bottom:calc(150px + env(safe-area-inset-bottom))}
@media (min-width:900px){.chat-fab{left:calc(50% - 470px)}}
/* picture viewer */
#lightbox{position:fixed;inset:0;z-index:200;background:#0b1220f2;display:grid;place-items:center;padding:56px 12px 20px}#lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.lb-close{position:fixed;top:calc(12px + env(safe-area-inset-top));right:14px;width:44px;height:44px;border-radius:50%;border:0;background:#ffffffe6;color:#0b1220;font-size:22px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px #0006}
.img-btn{background:none;border:0;padding:0;cursor:zoom-in;display:block}button.photo{padding:0;cursor:zoom-in}
.ticks{display:inline-block;margin-inline-start:5px;font-size:12px;letter-spacing:-3px;font-weight:700}.ticks.sent,.ticks.delivered{color:#94a3b8}.bubble.mine .ticks.sent,.bubble.mine .ticks.delivered{color:#cbd5e1}.ticks.read{color:#53bdeb}
/* photos of materials */
.item.has-photo{grid-template-columns:auto 1fr auto}.item.has-photo .qty{grid-column:1/-1}
.item-thumb{position:relative;width:64px;height:64px;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f1f5f9;cursor:zoom-in;grid-row:span 1}.item-thumb img{width:100%;height:100%;object-fit:cover;display:block}.item-thumb span{position:absolute;bottom:2px;left:2px;background:#0b1220cc;color:#fff;font-size:10px;border-radius:6px;padding:0 5px}
.pubrow .icon-btn.small-icon img{width:100%;height:100%;object-fit:cover;border-radius:8px}.pubrow .icon-btn.small-icon.has{padding:0;overflow:hidden}
.gal-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;max-height:100%;max-width:100%}.gal-wrap>img{max-width:100%;max-height:70vh;object-fit:contain;border-radius:8px}.gal-title{color:#fff;font-weight:700;text-align:center}
.gal{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.gal button{width:56px;height:56px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:none;cursor:pointer}.gal button.on{border-color:var(--gold)}.gal img{width:100%;height:100%;object-fit:cover}
.gal-wrap>img{max-height:calc(100vh - 190px)}
.seen{display:inline-block;font-size:11.5px;font-weight:400;color:var(--muted);margin-inline-start:6px}.seen.on{color:#16a34a;font-weight:700}
/* material window */
.name-btn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--ink);text-align:right;cursor:pointer;line-height:1.4}.name-btn:hover{color:var(--navy);text-decoration:underline}
.item-info{display:flex;flex-direction:column;gap:12px}.info-photo{padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#f1f5f9;cursor:zoom-in}.info-photo img{display:block;width:100%;max-height:300px;object-fit:contain}
.info-strip{display:flex;gap:6px;flex-wrap:wrap}.info-strip button{width:54px;height:54px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:none;cursor:pointer}.info-strip button.on{border-color:var(--gold)}.info-strip img{width:100%;height:100%;object-fit:cover}
.info-nophoto{background:#f1f5f9;border-radius:12px;padding:22px;text-align:center;color:var(--muted);font-size:13px}
.info-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.info-facts div{background:#0127560a;border-radius:10px;padding:8px 10px;font-weight:700;color:var(--navy);font-size:14px}.info-facts span{display:block;font-size:11px;color:var(--muted);font-weight:400}
.info-desc{background:var(--gold-soft);border-radius:10px;padding:10px;font-size:14px;white-space:pre-wrap}.info-hist{font-size:13px;color:var(--muted)}.info-qty .qty{margin-top:6px}
/* full-screen photo viewer */
body.no-scroll{overflow:hidden}
#lightbox.viewer{position:fixed;inset:0;z-index:300;background:#000;padding:0;display:block;touch-action:none;user-select:none;-webkit-user-select:none;color:#fff;animation:vin .18s ease-out}@keyframes vin{from{opacity:0}}
.v-top{position:absolute;inset:0 0 auto 0;z-index:3;display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 14px 22px;background:linear-gradient(#000c,#0000);transition:opacity .2s}
.v-btn{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:#ffffff2e;color:#fff;font-size:20px;cursor:pointer;backdrop-filter:blur(6px)}.v-btn:hover{background:#ffffff47}
.v-title{flex:1;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v-count{flex:none;font-size:14px;font-weight:600;opacity:.9;direction:ltr}
.v-stage{position:absolute;inset:0;overflow:hidden}.v-track{display:flex;height:100%;will-change:transform}
.v-slide{flex:0 0 100%;height:100%;display:grid;place-items:center;overflow:hidden}.v-slide img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center;will-change:transform;-webkit-user-drag:none;pointer-events:none}
.viewer.zoomed .v-stage{cursor:grab}
.v-nav{position:absolute;top:50%;z-index:3;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:#ffffff2e;color:#fff;font-size:34px;line-height:1;cursor:pointer;backdrop-filter:blur(6px);transition:opacity .2s}.v-nav:hover{background:#ffffff47}.v-nav[disabled]{opacity:0;pointer-events:none}
.v-prev{right:16px}.v-next{left:16px}@media (hover:none){.v-nav{display:none}}
.v-thumbs{position:absolute;inset:auto 0 0 0;z-index:3;display:flex;gap:6px;justify-content:center;overflow-x:auto;padding:22px 12px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(#0000,#000c);transition:opacity .2s}
.v-thumbs button{flex:none;width:54px;height:54px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:#222;opacity:.55;cursor:pointer;transition:opacity .15s}.v-thumbs button.on{border-color:#fff;opacity:1}.v-thumbs img{width:100%;height:100%;object-fit:cover}
.viewer.chrome-off .v-top,.viewer.chrome-off .v-thumbs,.viewer.chrome-off .v-nav{opacity:0;pointer-events:none}
mark{background:#fde68a;color:inherit;border-radius:3px;padding:0 1px}
/* material mentions */
.composer{position:relative}.mention-box{position:absolute;inset:auto 0 calc(100% + 6px) 0;z-index:20;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 -8px 28px #01275626;max-height:300px;overflow-y:auto;padding:4px}
.m-row{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-radius:10px;padding:6px 8px;font:inherit;text-align:right;cursor:pointer;color:var(--ink)}.m-row.on,.m-row:hover{background:#0127560d}
.m-row img,.mention-card img,.m-noimg{flex:none;width:40px;height:40px;border-radius:8px;object-fit:cover;background:#f1f5f9;display:grid;place-items:center;color:var(--muted)}.m-noimg svg{width:20px;height:20px}
.m-info{display:flex;flex-direction:column;min-width:0;flex:1}.m-info strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-info span{font-size:12px;color:var(--muted);direction:ltr;text-align:right}.m-hint{padding:10px;font-size:13px;color:var(--muted)}
.mention-card{display:flex;align-items:center;gap:8px;margin:4px 0;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:6px 8px;cursor:pointer;white-space:normal;min-width:220px}
.m-go{flex:none;font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px;background:#0127560f;color:var(--navy)}.m-go.order{background:var(--gold);color:var(--navy)}
/* WhatsApp-like conversation */
body.in-chat{overflow:hidden;overscroll-behavior:none}body.in-chat .tabs,body.in-chat .chat-fab,body.in-chat .push-banner{display:none!important}
.wa{position:fixed;inset:0 0 auto 0;height:100dvh;z-index:50;display:flex;flex-direction:column;background:#efeae2;background-image:radial-gradient(#0000000a 1px,transparent 1.2px);background-size:18px 18px}
.wa-head{flex:none;display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 10px 8px;background:var(--navy);color:#fff;box-shadow:0 1px 4px #0003}
.wa-back{flex:none;width:38px;height:38px;border:0;border-radius:50%;background:none;color:#fff;display:grid;place-items:center;cursor:pointer}.wa-back svg{width:24px;height:24px}
.wa-avatar{flex:none;width:40px;height:40px;border-radius:50%;background:#02adc1;color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;object-fit:cover;background-color:#fff}
span.wa-avatar{background:#02adc1}
.wa-who{flex:1;min-width:0;display:flex;flex-direction:column}.wa-who strong{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wa-who span{font-size:12px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wa-who .seen{color:#cbd5e1;margin:0}.wa-who .seen.on{color:#86efac}
.wa-msgs{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 10px 6px;display:flex;flex-direction:column;gap:2px;overscroll-behavior:contain}
.wa .bubble{max-width:82%;border-radius:10px;padding:6px 9px 4px;font-size:15.5px;line-height:1.55;box-shadow:0 1px .5px #0b141a26;margin:2px 0;color:#111b21;white-space:pre-wrap;word-wrap:break-word}
.wa .bubble.mine{align-self:flex-end;background:#d9fdd3;border-top-left-radius:2px}.wa .bubble.theirs{align-self:flex-start;background:#fff;border-top-right-radius:2px}
.wa .bubble .who{font-size:12.5px;font-weight:700;color:#02adc1;opacity:1}.wa .bubble time{display:block;text-align:left;font-size:11px;color:#667781;margin-top:1px;opacity:1}
.wa .bubble.media{padding:3px 3px 4px}.wa .bubble.media time{padding:0 6px}.wa .chat-img{max-width:min(260px,70vw);border-radius:8px;margin:0}.wa .chat-audio{max-width:min(260px,68vw)}
.wa .ticks.sent,.wa .ticks.delivered,.wa .bubble.mine .ticks.sent,.wa .bubble.mine .ticks.delivered{color:#8696a0}.wa .ticks.read{color:#53bdeb}
.wa .chat-day{align-self:center;background:#ffffffe6;color:#54656f;font-size:12px;border-radius:8px;padding:4px 12px;margin:8px 0;box-shadow:0 1px .5px #0b141a1a}
.wa .mention-card{background:#ffffffb3}.wa .empty{background:#ffffffd9;border-radius:10px;align-self:center;margin-top:20px;padding:12px 16px}
.wa-compose{flex:none;position:relative;display:flex;align-items:flex-end;gap:6px;padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.wa-input{flex:1;min-width:0;display:flex;align-items:flex-end;gap:4px;background:#fff;border-radius:24px;padding:4px 6px 4px 4px;box-shadow:0 1px .5px #0b141a26}
.wa-input textarea{flex:1;border:0;outline:0;resize:none;background:none;font:inherit;font-size:16px;line-height:1.4;padding:9px 10px;min-height:42px;max-height:140px;box-shadow:none}
.wa-ico{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:none;color:#54656f;display:grid;place-items:center;cursor:pointer}.wa-ico svg{width:23px;height:23px}
.wa-send{flex:none;width:50px;height:50px;border:0;border-radius:50%;background:#00a884;color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 3px #0003}.wa-send svg{width:22px;height:22px}.wa-send[data-mode=send] svg{transform:scaleX(-1)}
.wa-rec{align-items:center;padding:4px 12px;gap:10px;min-height:50px}.wa-rec b{font-variant-numeric:tabular-nums}
.wa-closed{flex:none;text-align:center;background:#fff;padding:12px;color:var(--muted);font-size:13px}
.wa .mention-box{inset:auto 8px calc(100% + 2px) 8px}
/* conversation colors in the portal identity (navy + turquoise) */
.wa{background-color:#e9eff5;background-image:radial-gradient(#0127560f 1px,transparent 1.2px)}
.wa .bubble.mine{background:#d4f1f6;box-shadow:0 1px .5px #01275624}.wa .bubble.theirs{background:#fff}
.wa-send{background:var(--navy);box-shadow:0 2px 6px #01275640}.wa-send:active{background:#02adc1}
.wa-who .seen.on{color:#7ee3ef}.wa .chat-day{background:#ffffffeb;color:#3b5068}
.wa .ticks.read{color:#0396a8}.wa .bubble .who{color:#0396a8}
/* conversation v3: stronger identity colors, clean box, material cards */
.wa{background-color:#dfe7f0;background-image:radial-gradient(#01275618 1px,transparent 1.3px);background-size:18px 18px}
.wa .bubble.mine{background:var(--navy);color:#fff;box-shadow:0 1px 2px #01275640}.wa .bubble.theirs{background:#fff;color:#0f172a;box-shadow:0 1px 2px #0127561f}
.wa .bubble.mine time{color:#b8c6d8}.wa .bubble.mine .ticks.sent,.wa .bubble.mine .ticks.delivered{color:#b8c6d8}.wa .bubble.mine .ticks.read{color:#5ee0f0}
.wa .bubble.theirs .who{color:#0396a8}.wa .bubble.mine audio{filter:invert(1) hue-rotate(180deg)}
.wa-send{background:#02adc1;color:#fff}.wa-send:active{background:var(--navy)}
.wa-cart{position:relative;flex:none;width:42px;height:42px;border:0;border-radius:50%;background:#ffffff1f;color:#fff;display:grid;place-items:center;cursor:pointer}.wa-cart svg{width:22px;height:22px}.wa-cart .badge{position:absolute;top:-3px;left:-3px}
.m-text{display:block;white-space:pre-wrap}
.wa .mention-card{display:block;width:min(270px,72vw);background:#fff;color:#0f172a;border:0;border-radius:10px;padding:0;margin:4px 0;overflow:hidden;cursor:default;box-shadow:0 1px 2px #0127561f}
.m-photo{display:block;position:relative;width:100%;padding:0;border:0;background:#f1f5f9;cursor:zoom-in}.m-photo img{display:block;width:100%;height:170px;object-fit:cover}.m-photo span{position:absolute;bottom:6px;left:6px;background:#0b1220cc;color:#fff;font-size:11px;border-radius:6px;padding:1px 6px}
.m-head{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer}.m-head .m-info strong{white-space:normal;font-size:14px;line-height:1.35}
.m-go{flex:none;font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px;background:#0127560f;color:var(--navy)}
.m-qty{display:flex;flex-wrap:wrap;gap:6px;padding:0 8px 8px}.m-qty .stepper{flex:1;min-width:120px}.m-qty .stepper input{font-size:16px}
.m-gone{font-size:12px;color:var(--bad);padding:0 10px 8px}
.wa .bubble .txt{white-space:normal}.wa .mention-card,.wa .mention-card *{white-space:normal}
/* conversation looks: 1 calm light, 2 clean white, 3 royal blue */
.wa.t1{background:#f4f6f9;background-image:none}.wa.t1 .bubble.mine{background:#e3eef9;color:#012756;box-shadow:0 1px 1px #0127561a}.wa.t1 .bubble.theirs{background:#fff;border:0.5px solid #d8dee8;box-shadow:none}
.wa.t1 .bubble.mine time,.wa.t1 .bubble.mine .ticks.sent,.wa.t1 .bubble.mine .ticks.delivered{color:#5b7290}.wa.t1 .bubble.mine .ticks.read{color:#0396a8}.wa.t1 .bubble.mine audio{filter:none}.wa.t1 .wa-send{background:var(--navy)}
.wa.t2{background:#fff;background-image:none}.wa.t2 .bubble{border-radius:18px;box-shadow:none}.wa.t2 .bubble.mine{background:#02adc1;color:#fff;border-top-left-radius:6px}.wa.t2 .bubble.theirs{background:#eef1f5;color:#0f172a;border-top-right-radius:6px}
.wa.t2 .bubble.mine time,.wa.t2 .bubble.mine .ticks.sent,.wa.t2 .bubble.mine .ticks.delivered{color:#dff7fa}.wa.t2 .bubble.mine .ticks.read{color:#012756}.wa.t2 .wa-compose{border-top:0.5px solid #e5e9ef;background:#fff}.wa.t2 .wa-input{background:#f1f4f8;box-shadow:none}.wa.t2 .wa-send{background:#02adc1}.wa.t2 .chat-day{background:#f1f4f8;box-shadow:none}.wa.t2 .mention-card{box-shadow:0 0 0 0.5px #d8dee8}
.wa.t3{background:#eceff3;background-image:none}.wa.t3 .bubble.mine{background:#1d4f8a;color:#fff}.wa.t3 .bubble.theirs{background:#fff}.wa.t3 .bubble.mine time,.wa.t3 .bubble.mine .ticks.sent,.wa.t3 .bubble.mine .ticks.delivered{color:#bcd0e6}.wa.t3 .bubble.mine .ticks.read{color:#7ee3ef}.wa.t3 .wa-send{background:#1d4f8a}
.theme-pick{display:flex;flex-direction:column;gap:8px}.theme-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:right;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;font:inherit;cursor:pointer}.theme-opt.on{border:2px solid var(--navy)}
.theme-opt strong{display:block}.theme-opt small{color:var(--muted)}.theme-sw{flex:none;width:64px;height:44px;border-radius:8px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:6px;border:0.5px solid #d8dee8}
.theme-sw i,.theme-sw b{display:block;height:9px;border-radius:5px;width:60%}.theme-sw b{align-self:flex-end}.theme-sw.t1{background:#f4f6f9}.theme-sw.t1 i{background:#fff;border:0.5px solid #d8dee8}.theme-sw.t1 b{background:#e3eef9}
.theme-sw.t2{background:#fff}.theme-sw.t2 i{background:#eef1f5}.theme-sw.t2 b{background:#02adc1}.theme-sw.t3{background:#eceff3}.theme-sw.t3 i{background:#fff}.theme-sw.t3 b{background:#1d4f8a}
.m-pick{display:flex;align-items:center;gap:6px;margin:0 8px 8px;padding:7px 10px;border-radius:8px;background:#e6f7f9;color:#035e69;font-size:13px}.m-pick svg{width:16px;height:16px;flex:none}.m-pick.off{background:#f1f5f9;color:#64748b}
/* slow connections */
#net-banner{position:fixed;inset:0 0 auto 0;z-index:400;background:#b45309;color:#fff;text-align:center;font-size:13px;font-weight:700;padding:calc(6px + env(safe-area-inset-top)) 12px 6px}
.skel{display:flex;flex-direction:column;gap:10px}.skel-card{background:#fff;border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:8px}
.skel-card i,.skel-card b{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,#eef1f5 25%,#e2e8f0 50%,#eef1f5 75%);background-size:200% 100%;animation:sk 1.2s linear infinite}.skel-card i{width:55%;height:14px}.skel-card b{width:85%}.skel-card b.short{width:35%}
@keyframes sk{to{background-position:-200% 0}}
.bubble.pending{opacity:.75}
.offline-boot{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px}.offline-boot img{height:44px;margin-bottom:8px}.offline-boot p{color:var(--muted);margin:0 0 6px}
/* messaging button: round, with a small red count */
.chat-fab{width:58px;height:58px;padding:0;justify-content:center;border-radius:50%;background:var(--navy);color:#fff;box-shadow:0 6px 18px #01275659,0 2px 4px #01275633}
.chat-fab svg{width:26px;height:26px}
.chat-fab .badge{left:auto;right:-3px;top:-3px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#e11d48;color:#fff;border:2px solid #fff;font-size:12px;line-height:1;box-shadow:0 1px 3px #0003}
.chat-fab:active{transform:scale(.94)}
main{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
.print-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}.print-row{gap:8px;align-items:stretch}
.when-pick{display:flex;flex-wrap:wrap;gap:6px}.when-pick label{position:relative;margin:0;cursor:pointer}.when-pick input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}.when-pick span{display:inline-block;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:7px 16px;font-size:14px}.when-pick input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}.when-pick input:focus-visible+span{outline:2px solid var(--navy);outline-offset:2px}
.all-out{display:flex;gap:10px;align-items:flex-start;background:#fef2f2;border:1px solid #fecaca;color:#7f1d1d;border-radius:12px;padding:12px;margin:10px 0}.all-out svg{width:22px;height:22px;flex:none}.print-row .btn{margin-bottom:10px}
.printed-tag{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--navy);background:#e8eef7;border-radius:999px;padding:1px 8px}.printed-tag svg{width:13px;height:13px}
.sel-bar{position:sticky;top:8px;z-index:5;box-shadow:0 4px 14px #01275622}.sel-bar .row.wrap{gap:6px}
.sel-box{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:2px solid var(--line);border-radius:6px;margin-left:8px;vertical-align:middle;font-size:14px;color:#fff;background:#fff}.sel-box.on{background:var(--navy);border-color:var(--navy)}
.card.picked{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy) inset}.print-btn svg,.btn svg{width:18px;height:18px}
.size-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}.size-opt{display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;cursor:pointer}.size-opt b{font-size:22px;color:var(--navy)}.size-opt small{color:var(--muted)}.size-opt.on{border:2px solid var(--navy)}

/* statistics */
.st-custom{gap:10px;align-items:end;margin:4px 0 6px}.st-custom label{margin:0;font-size:13px}.st-custom input{width:auto}
.st-range{margin:4px 0 10px}
.st-sections{display:flex;gap:4px;overflow-x:auto;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:12px;position:sticky;top:6px;z-index:4;scrollbar-width:none}
.st-sections button{flex:1 0 auto;border:0;background:transparent;border-radius:9px;padding:9px 12px;font:inherit;font-weight:600;color:var(--muted);white-space:nowrap;cursor:pointer}
.st-sections button.active{background:var(--navy);color:#fff}
.st-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:10px}
.st-kpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:4px}
.st-kpi .st-label{font-size:13px;color:var(--muted)}.st-kpi strong{font-size:24px;color:var(--ink);font-variant-numeric:tabular-nums}
.st-delta{font-size:12px;font-weight:700}.st-delta.up{color:var(--ok)}.st-delta.down{color:var(--bad)}.st-delta.flat{color:var(--muted);font-weight:500}
.st-chart{margin:0}.st-chart figcaption{font-weight:700;margin-bottom:6px;color:var(--ink)}.st-chart svg{width:100%;height:auto;display:block;direction:ltr}
.st-grid{stroke:#e8edf3;stroke-width:1}.st-axis{fill:#7a879a;font-size:13px;font-family:inherit}
.st-bar:hover path{opacity:.8}.st-bar:hover rect{fill:rgba(31,95,174,.06)}
.st-rank{list-style:none;margin:0;padding:0}.st-rank li{padding:8px 0;border-bottom:1px solid var(--line)}.st-rank li:last-child{border-bottom:0}
.st-rank-head{display:flex;justify-content:space-between;gap:10px}.st-rank-name{font-weight:600}.st-rank-head b{font-variant-numeric:tabular-nums;white-space:nowrap}
.st-track{height:6px;background:#eef2f7;border-radius:3px;margin:6px 0 2px;overflow:hidden}.st-track i{display:block;height:100%;background:#1f5fae;border-radius:3px}
.st-click{cursor:pointer}.st-click:hover .st-rank-name,.st-list li.st-click:hover span:first-child{color:var(--navy);text-decoration:underline}
.st-list{list-style:none;margin:0;padding:0}.st-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--line)}.st-list li:last-child{border-bottom:0}
.st-bad{color:var(--bad);font-weight:700}
.st-table{width:100%;border-collapse:collapse;font-size:14px}.st-table th{text-align:right;color:var(--muted);font-weight:600;font-size:12px;padding:6px;border-bottom:1px solid var(--line)}.st-table td{padding:8px 6px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.st-split{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px;background:var(--paper)}.st-split i{display:block;height:100%}
.st-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:13px;color:var(--ink)}.st-legend span{display:inline-flex;align-items:center;gap:6px}.st-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
@media (max-width:600px){.st-table{font-size:12px}.st-kpi strong{font-size:20px}}

/* welcome video on the sign-in page */
.auth{align-content:center;gap:22px}
.promo{width:100%;max-width:640px}
.promo-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 4px 8px}.promo-head strong{color:var(--navy);font-size:17px}.promo-head span{color:var(--muted);font-size:13px}
.promo-frame{position:relative;border-radius:18px;overflow:hidden;background:#e9eff7;box-shadow:0 14px 40px #01275626;aspect-ratio:16/9}
.promo-frame video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.promo-play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;border:0;background:#012756d9;color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px #0004;transition:opacity .2s}
.promo-play svg{width:30px;height:30px;margin-left:4px}
.promo-frame.playing .promo-play{opacity:0;pointer-events:none}
.promo-sound{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:7px 12px;background:#012756cc;color:#fff;font:inherit;font-size:13px;cursor:pointer}
.promo-sound svg{width:18px;height:18px}

/* offer of the Android app (Android browsers only) */
.app-banner{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin:10px 0;box-shadow:0 6px 18px #01275614;width:100%;max-width:640px}
.app-banner>svg{width:30px;height:30px;color:var(--navy);flex:none}
.app-banner b{display:block;color:var(--navy);font-size:15px}.app-banner span{display:block;color:var(--muted);font-size:12.5px}
.app-banner .app-later{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;padding:6px}
.auth>.app-banner{max-width:420px;margin:0}
.app-steps{margin:0;padding-inline-start:20px;line-height:1.9}

/* voice notes */
.vn{display:flex;align-items:center;gap:10px;min-width:min(230px,62vw);padding:6px 8px 2px}
.vn-play{flex:none;width:38px;height:38px;border-radius:50%;border:0;display:grid;place-items:center;background:#0396a8;color:#fff;cursor:pointer}
.vn-play svg{width:18px;height:18px}
.vn-track{position:relative;flex:1;height:6px;border-radius:3px;background:#0396a833;cursor:pointer}
.vn-track::after{content:"";position:absolute;inset:-12px 0}
.vn-track i{position:absolute;inset-inline-start:0;top:0;bottom:0;width:0;border-radius:3px;background:#0396a8}
.vn-time{flex:none;min-width:34px;font-size:12px;font-variant-numeric:tabular-nums;color:inherit;opacity:.8}
.vn-mic{flex:none;display:inline-flex;opacity:.45}.vn-mic svg{width:16px;height:16px}.vn-mic.on{opacity:1;color:#53bdeb}
.bubble.theirs .vn-mic{display:none}
.wa .bubble.mine .vn-play{background:#ffffff33}.wa.t1 .bubble.mine .vn-play{background:var(--navy)}
.wa .bubble.mine .vn-track{background:#ffffff40}.wa .bubble.mine .vn-track i{background:#fff}.wa.t1 .bubble.mine .vn-track{background:#01275626}.wa.t1 .bubble.mine .vn-track i{background:var(--navy)}
.vn-fail{color:#fecaca;font-weight:700}.wa.t1 .vn-fail{color:var(--bad)}
.vn-spin{display:inline-block;width:10px;height:10px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:vnspin .8s linear infinite;vertical-align:-1px}
@keyframes vnspin{to{transform:rotate(360deg)}}
.bubble.pending .linkish{color:inherit;text-decoration:underline;font-size:12px}

/* documents inside the portal (phones) */
.doc-view{position:fixed;inset:0;z-index:2000;background:var(--bg);display:flex;flex-direction:column}
.doc-view header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top));background:var(--navy);color:#fff}
.doc-view header b{flex:1;text-align:center;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-view header .btn{display:inline-flex;align-items:center;gap:6px}.doc-view header .btn svg{width:16px;height:16px}
.doc-view iframe{flex:1;width:100%;border:0;background:#fff}
body.doc-open{overflow:hidden}

/* "new messages" while reading older ones */
.wa-new{position:absolute;left:50%;transform:translateX(-50%);bottom:84px;z-index:5;border:0;border-radius:999px;padding:8px 16px;background:var(--navy);color:#fff;font:inherit;font-size:13px;font-weight:700;box-shadow:0 6px 18px #0003;cursor:pointer}

/* conversation extras */
.wa .bubble{position:relative}
.b-reply{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:0;background:#fff;color:var(--navy);box-shadow:0 2px 8px #0002;font-size:16px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .15s}
.bubble.mine .b-reply{right:-36px}.bubble.theirs .b-reply{left:-36px}
.bubble:hover .b-reply,.bubble.sel .b-reply{opacity:1;pointer-events:auto}
@media (pointer:coarse){.b-reply{opacity:.55;pointer-events:auto;width:26px;height:26px;font-size:14px}}
.b-quote{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:start;border:0;border-inline-start:3px solid #0396a8;background:#0000000d;border-radius:8px;padding:5px 8px;margin:2px 0 4px;font:inherit;color:inherit;cursor:pointer}
.b-quote b{font-size:12px;color:#0396a8}.b-quote span{font-size:13px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.bubble.mine .b-quote{background:#ffffff26;border-color:#fff}.bubble.mine .b-quote b{color:inherit}
.wa.t1 .bubble.mine .b-quote{background:#0127560f;border-color:var(--navy)}
.bubble.flash{animation:bflash 1.4s}@keyframes bflash{0%,40%{box-shadow:0 0 0 3px #f5b301}100%{box-shadow:none}}
.wa-compose{flex-wrap:wrap}
.wa-reply{flex-basis:100%;display:flex;align-items:center;gap:8px;background:#f1f4f8;border-inline-start:3px solid #0396a8;border-radius:10px;padding:6px 8px;margin-bottom:2px}
.wa-reply b{display:block;font-size:12px;color:#0396a8}.wa-reply span{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-search{flex:none;display:flex;align-items:center;gap:6px;padding:6px 8px;background:#fff;border-bottom:1px solid #e5e9ef}
.wa-search input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit}
.wa-search span{color:var(--muted);white-space:nowrap}
.wa .bubble.hit{box-shadow:0 0 0 2px #f5b30199}.wa .bubble.hit-now{box-shadow:0 0 0 3px #f5b301,0 4px 14px #f5b30155}
.wa-who span.typing{color:#5ee0f0;font-weight:700}

/* warehouse staff: materials to look at */
.w-item{align-items:flex-start}
.w-desc{margin-top:4px;color:var(--ink);opacity:.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.w-pack{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;padding:6px 8px;border-radius:12px;background:var(--gold-soft);color:var(--navy);text-align:center}
.w-pack b{font-size:20px;line-height:1.1}.w-pack span{font-size:11px}

/* requests between warehouses */
.tr-box{border:1px solid #bfeef3}.tr-h{font-size:14px;color:var(--muted);margin:12px 0 6px}
.tr-row{margin-bottom:8px;padding:10px 12px}
.tr-chip{font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;background:#eef2f7;color:var(--ink);white-space:nowrap}
.tr-chip.warn{background:var(--warn-soft);color:var(--warn)}.tr-chip.ok{background:var(--ok-soft);color:var(--ok)}.tr-chip.bad{background:var(--bad-soft);color:var(--bad)}
.tr-line{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}.tr-line:last-child{border-bottom:0}
.tr-line input{width:96px;flex:none;text-align:center}
.tr-short{color:var(--bad)}

.tr-line.on{background:#f2fbfc}
.tr-step{flex:none;display:flex;align-items:stretch;border:1px solid var(--line);border-radius:12px;overflow:hidden;height:40px}
.tr-step button{width:38px;border:0;background:#eef2f8;color:var(--navy);font:inherit;font-size:20px;font-weight:700;cursor:pointer}
.tr-line .tr-step input{width:52px;border:0;border-radius:0;text-align:center;font-weight:700;padding:0}
.tr-x{flex:none;width:28px;height:28px;border-radius:50%;border:0;background:var(--bad-soft);color:var(--bad);font-size:13px;cursor:pointer}
.tr-cats{margin-top:8px}

.place{display:inline-block;margin-top:4px;font-size:13px;color:var(--navy)}
.grp-table{display:grid;gap:8px;margin-top:6px}
.grp-row{border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.grp-caps{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px}
.grp-caps .perm{margin:0}

.lnotes{margin-top:6px;display:grid;gap:6px}
.lnote{border-radius:10px;padding:7px 10px;background:#f4f6fa;font-size:14px}
.lnote.inner{background:#fff8e6;border:1px dashed #e6c46a}
.lnote.shared{background:#eaf7f8;border:1px solid #bfe6ea}
.lnote.from-cust{background:#eef2ff;border:1px solid #c9d3f5}
.lnote .linkish{font-size:13px}
.lnote-form{margin-top:8px;display:grid;gap:6px}
form.row.lnote-form{display:flex}
.lnote-form textarea{min-height:56px}

.ask-box{margin-top:6px;border:1px dashed #c9d3f5;border-radius:10px;padding:8px 10px;background:#f7f9ff}
.ask-photo{display:block;max-width:140px;max-height:140px;border-radius:8px;margin-top:6px;cursor:zoom-in}
.ask-thumb{display:block;max-width:80px;max-height:80px;border-radius:8px;margin-top:6px}
.ask-state{display:inline-block;margin-top:4px;font-size:13px;color:#0f6b75;background:#e6f6f7;border-radius:8px;padding:2px 8px}

.owner-card{display:flex;gap:14px;align-items:center;background:#fff;border-radius:22px;padding:16px;margin:16px 0;box-shadow:0 8px 24px rgba(16,37,74,.08)}
.owner-card img{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:50% 15%;border:3px solid #18b5c4;flex:none}
.owner-card strong{display:block;font-size:17px;color:var(--navy)}
.owner-card p{margin:6px 0 0;font-size:14px;color:#44506a;line-height:1.6}

.only-tag{background:#e6f6f7;color:#0f6b75}