/* SRX BCM look, same language as the Android app: misty-mountain backdrop, silver/chrome + purple accents, glass buttons. */
:root{color-scheme:dark;--bg:#03070c;--card:rgba(14,17,20,.82);--line:rgba(199,208,214,.22);--line-strong:rgba(199,208,214,.40);--text:#eaf0f5;--muted:rgba(255,255,255,.6);--faint:rgba(255,255,255,.38);--lime:#c7d0d6;--lime-hi:#f4f7f9;--lime-lo:#8a949d;--purple:#b02cf0;--danger:#ff8b8b;--field:rgba(8,10,13,.8)}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;background:var(--bg) url(assets/srx_bg.jpg) center top/cover no-repeat fixed;position:relative}
body{padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
body.inner{background-image:url(assets/srx_bg_soft.jpg)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 82% 8%,rgba(199,208,214,.10),transparent 38%),radial-gradient(circle at 12% 70%,rgba(176,44,240,.07),transparent 40%)}
header,main,footer{position:relative;width:min(1100px,100%);margin:auto}
header{display:flex;flex-direction:column;align-items:center;padding:18px 0 6px}
header .logo{width:min(300px,78%);height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.55))}
body.inner header .logo{width:min(150px,40%)}
.pill{position:absolute;top:18px;left:0;border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--muted);font-size:12px;background:rgba(3,7,12,.55)}
.card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:clamp(16px,3vw,26px);margin:14px 0;backdrop-filter:blur(6px);box-shadow:0 12px 35px rgba(0,0,0,.35)}
.login-card{max-width:480px;margin:3vh auto}
h1,h2,h3,p{margin-top:0}h1{font-size:clamp(21px,4vw,28px);margin-bottom:8px}h2{font-size:19px;margin:0}
small,.muted{color:var(--muted)}.muted{padding:8px 0}
label{display:flex;flex-direction:column;gap:7px;margin:12px 0;color:#cfd9e2;font-size:14px}
input,select{width:100%;min-height:48px;border:1px solid rgba(255,255,255,.18);background:var(--field);color:var(--text);border-radius:14px;padding:10px 14px;font:inherit;outline:none}
input:focus,select:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(199,208,214,.18)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
/* primary = the app's bright chrome button; .secondary = its dark glass button */
button{border:1px solid rgba(255,255,255,.35);border-radius:18px;min-height:48px;padding:10px 18px;background:linear-gradient(135deg,#f6f9fb,#c7d0d6 45%,#8a949d 70%,#dde3e7);color:#111;font:inherit;font-weight:800;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35)}
button:hover{filter:brightness(1.06)}button:disabled{opacity:.5;cursor:not-allowed}
button.secondary{background:linear-gradient(rgba(26,29,33,.87),rgba(8,10,13,.93));color:var(--text);border-color:var(--line-strong)}
.inline{display:flex;gap:8px}.inline input{flex:1;min-width:0}.inline button{white-space:nowrap}
/* home: list of glass buttons (icon tile, title, subtitle, chevron) */
.home{display:flex;flex-direction:column;gap:12px;width:min(640px,100%);margin:6px auto 0}
button.glass{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:12px 14px;text-align:right;border-radius:25px;background:linear-gradient(rgba(26,29,33,.87),rgba(8,10,13,.93));border:1px solid var(--line-strong);color:#fff;font-weight:400}
.glass .ico{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:15px;background:rgba(255,255,255,.05);border:1px solid rgba(199,208,214,.45)}
.glass .ico svg{width:26px;height:26px;fill:none;stroke:var(--lime);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.glass .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.glass b{font-size:16px;font-weight:800}.glass small{font-size:11.5px;color:var(--muted)}
.glass .chev svg{width:22px;height:22px;fill:none;stroke:rgba(255,255,255,.5);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
button.glass.bright{background:linear-gradient(135deg,#f6f9fb,#c7d0d6 45%,#8a949d 70%,#dde3e7);border-color:rgba(255,255,255,.35);color:#111}
button.glass.bright .ico{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.26)}button.glass.bright .ico svg{stroke:rgba(0,0,0,.87)}
button.glass.bright small{color:rgba(0,0,0,.6)}button.glass.bright .chev svg{stroke:rgba(0,0,0,.45)}
.whoami{display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(640px,100%);margin:10px auto 14px;padding:14px 18px}
.whoami small{display:block;font-size:12px}.whoami h1{margin:2px 0 0;font-size:18px}
.whoami button{min-height:40px;padding:6px 16px}
/* inner pages: title bar with back arrow, like the app's TitleBar */
.titlebar{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;margin-bottom:10px;direction:ltr}
.titlebar h2{text-align:center;direction:rtl;font-size:20px;font-weight:800}
.titlebar .back{width:44px;min-height:44px;padding:0;border-radius:14px;display:grid;place-items:center}
.titlebar .back svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
body.forced .titlebar .back{visibility:hidden}
.tab-content{max-width:1100px}
.section-title{display:flex;align-items:center;justify-content:flex-end;gap:12px}.section-title h2{display:none}.section-title:not(:has(button)){display:none}
.search-row{display:flex;gap:8px;margin:14px 0}.search-row input{flex:1;min-width:0}
.table-wrap{overflow:auto;margin-top:14px}
table{width:100%;border-collapse:collapse;min-width:570px}
th,td{text-align:right;padding:12px;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top}
th{color:var(--muted);font-size:12.5px;font-weight:600}td{font-size:14px}
tbody tr:hover{background:rgba(199,208,214,.05)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}.wide{grid-column:1/-1}
.move-box{margin-top:18px;padding:16px;border:1px solid var(--line-strong);border-radius:18px;background:rgba(0,0,0,.25)}
.error{color:var(--danger);min-height:1.3em}.okmsg{color:var(--lime)}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}.row-actions button{font-size:12.5px;min-height:36px;padding:5px 12px;border-radius:12px}
.status{display:inline-block;border-radius:999px;padding:4px 10px;background:rgba(255,255,255,.08);color:#d9e7f3;font-size:12px;font-weight:600}
.status.ok{background:rgba(199,208,214,.18);color:#e8edf0}.status.bad{background:rgba(255,100,100,.16);color:#ffb3b3}
.filters{margin-top:10px}.filters label{margin:6px 0}
#approvedMsg,#returnMsg,#userMsg,#pwMsg{min-height:1.3em;margin:10px 0 0}
video{width:100%;max-height:320px;border-radius:18px;background:#000;margin-bottom:12px}
details{margin:10px 0}summary{cursor:pointer;color:var(--muted);font-size:13px}
.switch{text-align:center;margin:14px 0 0;color:var(--muted);font-size:14px}.switch a{color:var(--lime)}
.role-sel{min-height:38px;padding:4px 10px;width:auto;border-radius:12px}
#registerForm h2{margin:18px 0 6px}
#loginForm button[type=submit],#registerForm button[type=submit],.form-grid button[type=submit]{width:100%}
footer{text-align:center;padding:26px 0 34px;color:var(--faint)}
footer .team{font-size:11px;letter-spacing:4px}footer .by{font-size:11px;margin-top:4px;letter-spacing:1px;font-style:italic}
[hidden]{display:none!important}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}.search-row{flex-direction:column}.card{border-radius:20px}.pill{top:14px}}
@media(prefers-reduced-motion:no-preference){button{transition:filter .15s,transform .1s}button:active{transform:scale(.985)}}

/* returns list: every item looks like a glass button, status at the end */
.item{margin-bottom:12px}
.item .row{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 14px;border-radius:25px;cursor:pointer;background:linear-gradient(rgba(26,29,33,.87),rgba(8,10,13,.93));border:1px solid var(--line-strong);box-shadow:0 4px 14px rgba(0,0,0,.35);transition:filter .15s}
.item .row:hover{filter:brightness(1.12)}.item .row:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.item .row[aria-expanded=true]{border-color:var(--lime)}
.item .txt small{white-space:normal;overflow-wrap:anywhere}.item .txt b{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.item .txt em{font-style:normal;color:var(--lime);font-size:13px}
.state{flex:none;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;white-space:nowrap;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#e8eef4}
.state.ok{background:rgba(199,208,214,.18);border-color:rgba(199,208,214,.55);color:#e8edf0}
.state.done{background:linear-gradient(135deg,#f6f9fb,#c7d0d6 45%,#8a949d 70%,#dde3e7);border-color:rgba(255,255,255,.35);color:#111}
.state.bad{background:rgba(255,100,100,.16);border-color:rgba(255,120,120,.5);color:#ffb3b3}
.state.wait{background:rgba(255,196,64,.14);border-color:rgba(255,196,64,.5);color:#ffd98a}
.item-detail{margin:6px 12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.3)}
.item-detail p{display:flex;justify-content:space-between;gap:14px;margin:0 0 6px;font-size:13px}.item-detail .k{color:var(--muted);flex:none}
.item-detail .row-actions{margin-top:10px}.item-detail .row-actions button{min-height:40px;padding:6px 18px;font-size:13.5px}
@media(max-width:560px){.item .row{gap:10px;padding:10px 12px}.state{padding:5px 9px;font-size:11.5px}}
/* etiket (label printing) pages */
.et-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}.et-head b{font-size:17px}
#etVideo{width:100%;max-height:260px;border-radius:18px;margin-bottom:10px;background:#000;object-fit:cover}
.et-tools{margin:10px 0}.et-tools button{min-height:42px}
.wide-btn{width:100%;margin-top:6px}
#etItems{margin-top:6px}
.qty{display:flex;align-items:center;gap:6px;flex:none;direction:ltr}
.qty button{min-height:38px;min-width:38px;padding:0 10px;border-radius:12px;font-size:18px;line-height:1}
.qty button.num{min-width:48px;font-size:15px;color:var(--lime)}
.qty button.del{color:#ffb3b3}
.qty .num-static{font-size:16px;color:var(--lime);min-width:36px;text-align:center}
.item.et .row{cursor:default}
.files{margin-top:10px}.files .qty button{font-size:13px;padding:0 14px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.stats>div{padding:12px 14px;border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.25)}
.stats small{display:block;color:var(--muted);font-size:12px}.stats b{font-size:22px;color:var(--lime)}
label.chk{display:flex;align-items:center;gap:10px;margin:0 0 14px;cursor:pointer}
label.chk input{width:22px;height:22px;min-height:0;flex:none;accent-color:var(--lime)}
.gn-preview{display:grid;place-items:center;margin:10px 0}.gn-preview canvas{max-width:100%;height:auto;border-radius:14px;background:#fff}
@media(max-width:560px){.qty{gap:4px}.qty button{min-width:34px;min-height:36px;padding:0 8px}}
.photo-box{margin:4px 0 14px}.photo-box .lbl{display:block;margin-bottom:8px;color:var(--muted);font-size:13px}
#photoPrev{display:block;margin-top:10px;max-width:100%;max-height:260px;border-radius:16px;border:1px solid var(--line-strong)}
.item-detail .photo{margin-top:10px}.return-photo{display:block;max-width:100%;border-radius:14px;border:1px solid var(--line-strong)}
.notice-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;width:min(640px,100%);margin:10px auto}
.notice-banner small{display:block;color:var(--muted);margin-top:4px;font-size:12.5px}.notice-banner .row-actions button{min-height:40px}
.notice-text{margin:10px 0;padding:14px 16px;border:1px solid var(--line-strong);border-radius:18px;background:rgba(0,0,0,.28);font-weight:700;line-height:1.9}

.rk-box{border:1px solid var(--line);border-radius:18px;padding:14px;margin-bottom:14px;background:rgba(0,0,0,.25)}.rk-box h3{margin:0 0 8px;font-size:15px}
.rk-box input[type=file]{display:block;width:100%;margin:10px 0;padding:10px;border:1px dashed var(--line-strong);border-radius:14px;background:transparent;color:inherit}
.rk-prog{height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:6px}.rk-prog i{display:block;height:100%;background:linear-gradient(135deg,#f6f9fb,#c7d0d6 45%,#8a949d 70%,#dde3e7)}
.item-detail select{max-width:100%}
.et-file{margin-bottom:12px;padding-bottom:10px;border-bottom:1px dashed var(--line)}.et-pre{max-height:240px;overflow:auto;margin:8px 0 0;padding:10px;border-radius:12px;background:rgba(0,0,0,.45);direction:ltr;text-align:left;font-size:12.5px;white-space:pre-wrap}
#login .titlebar{display:none}
.user-line{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 8px;font-size:13px}.user-line .k{color:var(--muted);flex:none}.user-line select{flex:1;max-width:240px}
#usersSearch{margin-top:6px}.item[hidden]{display:none}

/* ---------- camera frame (phones / tablets only; scanner.js creates it) ---------- */
.is-desktop .camframe{display:none}
.camframe{position:relative;border-radius:20px;overflow:hidden;background:#000;margin:0 0 12px;border:1px solid var(--line);aspect-ratio:4/3;max-height:42vh;width:100%}
.camframe video{width:100%;height:100%;max-height:none;margin:0;border-radius:0;object-fit:cover;display:block}
.camaim{position:absolute;inset:18% 9%;border:2px solid rgba(220,228,233,.9);border-radius:16px;box-shadow:0 0 0 9999px rgba(0,0,0,.28);pointer-events:none;transition:border-color .15s}
.camaim::after{content:"";position:absolute;left:6%;right:6%;top:50%;height:2px;background:rgba(220,228,233,.85);box-shadow:0 0 10px rgba(220,228,233,.85)}
.camframe.hit .camaim{border-color:#fff}
.camstat{position:absolute;left:0;right:0;bottom:0;margin:0;padding:8px 12px;text-align:center;font-size:13px;color:#e8f3ff;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.camstat.bad{color:#ffb3b3;background:rgba(0,0,0,.78);top:0;display:flex;align-items:center;justify-content:center;padding:18px;line-height:1.8}
.camretry{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:2}
.camretry[hidden]{display:none}
.iosbar{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.07);font-size:13px;line-height:1.8;color:#dce9f5}
.iosbar button{flex:none;min-height:32px;padding:2px 10px;border-radius:10px}
/* iPhone / iPad: no zoom on focus (inputs must be >= 16px), no sticky tap highlight, safe areas, dynamic viewport */
html{-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent;min-height:100vh;min-height:100dvh}
button,.glass,[role=button]{touch-action:manipulation}
.is-ios input,.is-ios select,.is-ios textarea{font-size:16px}
.is-standalone header{padding-top:max(0px,env(safe-area-inset-top,0px))}
body{padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
.danger{border-color:rgba(255,120,120,.5);color:#ffb3b3}

/* compact sizing: smaller, proportional boxes; iOS date fields kept inside the card */
.card{padding:clamp(12px,3vw,20px);border-radius:20px;margin:10px 0}
.whoami{margin:10px auto 14px}.login-card{margin:3vh auto}.notice-banner{margin-inline:auto}
label{margin:8px 0;gap:5px;font-size:13px}
input,select{min-height:40px;border-radius:12px;padding:6px 12px;font-size:15px}
input[type=date],input[type=datetime-local],input[type=time]{-webkit-appearance:none;appearance:none;display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;text-align:right;direction:ltr}
input[type=date]::-webkit-date-and-time-value{text-align:right;min-height:1.3em}
button{min-height:40px;padding:6px 14px;border-radius:14px;font-size:14px}
button.secondary{font-size:13.5px}
.titlebar .back{width:38px;min-height:38px;border-radius:12px}
.titlebar h2{font-size:18px}
button.glass{min-height:60px;padding:9px 12px;border-radius:20px}
.glass b{font-size:15px}
.item{margin-bottom:8px}
.item .row{min-height:56px;padding:8px 12px;border-radius:18px;gap:10px}
.item .txt{min-width:0;flex:1}.item .txt b{font-size:14.5px}.item .txt small{font-size:11.5px}
.item .row .ico,.glass .ico{width:40px;height:40px;min-width:40px;border-radius:12px;flex:none}
.state{padding:4px 9px;font-size:11px}
.item-detail{margin:4px 8px 0;padding:9px 12px;border-radius:14px}
.item-detail p{font-size:12.5px;margin:0 0 4px}
.item-detail .row-actions button{min-height:34px;padding:4px 14px;font-size:13px}
.qty button{min-height:34px;min-width:34px;border-radius:10px;font-size:16px}
.qty button.num{min-width:40px;font-size:14px}
.rk-box,.move-box{padding:11px;border-radius:14px}
.search-row{margin:10px 0}
.inline{gap:6px}
.is-ios input,.is-ios select,.is-ios textarea{font-size:16px}

/* motion: soft page transitions, staggered rows, press feedback (all off for people who prefer reduced motion) */
@keyframes srxPageIn{from{opacity:0;transform:translateX(-22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes srxRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes srxOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes srxPop{0%{transform:scale(1)}40%{transform:scale(.96)}100%{transform:scale(1)}}
.screen:not([hidden]),.tab-content:not([hidden]){animation:srxPageIn 1s cubic-bezier(.22,.8,.3,1) both}
:is(.tab-content,.screen):not([hidden]) .glass,:is(.tab-content,.screen):not([hidden]) .item{animation-fill-mode:both;animation:srxRise .44s cubic-bezier(.22,.8,.3,1) both}
:is(.tab-content,.screen):not([hidden]) .glass:nth-child(2),:is(.tab-content,.screen):not([hidden]) .item:nth-child(2){animation-delay:.22s}
:is(.tab-content,.screen):not([hidden]) .glass:nth-child(3),:is(.tab-content,.screen):not([hidden]) .item:nth-child(3){animation-delay:.44s}
:is(.tab-content,.screen):not([hidden]) .glass:nth-child(4),:is(.tab-content,.screen):not([hidden]) .item:nth-child(4){animation-delay:.66s}
:is(.tab-content,.screen):not([hidden]) .glass:nth-child(5),:is(.tab-content,.screen):not([hidden]) .item:nth-child(5){animation-delay:.88s}
:is(.tab-content,.screen):not([hidden]) .glass:nth-child(n+6),:is(.tab-content,.screen):not([hidden]) .item:nth-child(n+6){animation-delay:1.1s}
.item-detail:not([hidden]){animation:srxOpen .69s ease-out both}
button,.glass,.item .row{transition:transform .38s ease,box-shadow .63s ease,background-color .63s ease,border-color .63s ease,opacity .63s ease}
button:active,.glass:active{transform:scale(.97)}
.item .row[aria-expanded=true]{border-color:var(--accent,#c7d0d6)}
@media (prefers-reduced-motion:reduce){
  .screen:not([hidden]),.tab-content:not([hidden]),:is(.tab-content,.screen):not([hidden]) .glass,:is(.tab-content,.screen):not([hidden]) .item,.item-detail:not([hidden]){animation:none!important}
  button,.glass,.item .row{transition:none}
}