/* Shared web and mobile interface. */
:root{--bg:#111719;--surface:#192225;--surface2:#222e31;--line:#334247;--text:#edf3f3;--muted:#a0b2b6;--accent:#68cfb6;--critical:#f39389;--soon:#e6bc76;--ok:#68cfb6;font-family:"Segoe UI",system-ui,sans-serif;line-height:1.5}
html[data-theme=light]{--bg:#f3f5f5;--surface:#fff;--surface2:#edf2f1;--line:#dce4e2;--text:#1c302e;--muted:#5f726f;--accent:#147963;--critical:#ba4139;--soon:#966516;--ok:#147963}
body{font-size:14px}button{cursor:pointer}button:disabled{cursor:not-allowed}h1{font-size:30px;line-height:1.2;letter-spacing:-.035em;font-weight:650}h2{font-size:20px;line-height:1.35;font-weight:650}h3{font-size:15px;line-height:1.4}p{line-height:1.6}.eyebrow,.section-label{font-size:11px;letter-spacing:.07em}.muted,small{line-height:1.5}
.panel,.card,.stat,.restock-card{border:1px solid var(--line);background:var(--surface);border-radius:14px;box-shadow:none}.panel{padding:24px}.card{padding:18px}.stat{padding:20px}.stat strong{font-size:30px;font-weight:600;letter-spacing:-.04em}.stat span{font-size:13px}.card:is(button):hover,.stat:hover,.restock-card:hover{transform:none;border-color:var(--accent);box-shadow:none}.card:active{transform:none}.list{gap:12px}.stats{gap:14px;margin-bottom:24px}
.btn{border-radius:9px;min-height:44px;padding:10px 16px;background:var(--surface);font-size:13px;font-weight:600;line-height:1.35;box-shadow:none}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--bg)}.btn.primary:hover{background:color-mix(in srgb,var(--accent) 85%,var(--text));color:var(--bg)}.btn.compact{min-height:36px;font-size:12px}.btn:disabled{opacity:.4}.icon-btn{border-radius:10px}.avatar{background:var(--surface2);color:var(--accent)}
input,select,textarea,.search{border-radius:8px;background:var(--surface);padding:11px 12px;font-size:14px;min-width:0;max-width:100%}input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}input:focus,select:focus,textarea:focus{border-color:var(--accent)}.form-card{gap:18px}.form-card label,.field-label,.machine-add-slot label{font-size:13px;color:var(--text);font-weight:500}.form-row{gap:14px}.filters{gap:5px;flex-wrap:wrap}.filters button{border-color:transparent;font-size:13px;border-radius:8px;padding:9px 12px}.filters button.active,.segmented button.active{background:var(--surface2);color:var(--accent);border-color:var(--line)}.segmented{background:var(--bg)}.toggle.on{background:var(--accent)}.toggle.on:after{background:var(--bg)}.badge{font-size:11px;border:0;background:var(--surface2);border-radius:6px;padding:5px 9px}.badge.critical{background:color-mix(in srgb,var(--critical) 12%,var(--surface))}.badge.soon{background:color-mix(in srgb,var(--soon) 12%,var(--surface))}.badge.ok{background:color-mix(in srgb,var(--ok) 12%,var(--surface))}
.table th{font-size:11px;letter-spacing:.02em;text-transform:none;background:var(--surface2);color:var(--muted)}.table th,.table td{padding:15px 13px}.table td{font-size:13px}.table small{color:var(--muted)}.table input[type=number]{width:90px}.table select{max-width:280px}.table tbody tr:hover{background:var(--surface2)}.toolbar{flex-wrap:wrap;gap:12px}.toolbar .search{margin-bottom:0}.panel:has(.table){overflow-x:auto}.table-scroll{max-width:100%}
.workflow-hero{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;box-shadow:none}.workflow-hero h2{font-size:25px}.workflow-steps{margin-top:18px}.workflow-steps b{background:var(--surface2);color:var(--accent)}.restock-meter em,.onboarding-progress i{background:var(--accent)}.restock-meter i{background:var(--surface2)}.login{background:var(--bg)}.login-box{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:32px;width:min(430px,100%)}#toast{background:var(--text);color:var(--bg);white-space:normal;width:max-content;max-width:calc(100vw - 32px)}
.machine-editor-head{padding:0 0 24px;align-items:flex-start}.machine-editor-head p{margin:6px 0 0}.planogram{background:transparent;border:0;padding:0;margin:0 0 30px;border-radius:0}.planogram>.toolbar{padding:20px 0;border-top:1px solid var(--line);align-items:center}.planogram>.toolbar>.row{flex-wrap:wrap}.plan-cols{font-size:12px;color:var(--muted)}.slot-workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}.slot-map{min-width:0}.slot-map-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.slot-map>p{font-size:13px;margin:6px 0 18px}.slot-map-grid{display:grid;grid-template-columns:repeat(var(--slot-columns),minmax(0,1fr));gap:10px}.slot-tile{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:158px;padding:14px;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--text)}.slot-tile:hover{border-color:var(--accent);background:var(--surface2)}.slot-tile-head{display:flex;align-items:center;justify-content:space-between;gap:6px}.slot-tile-head b{font-size:13px}.slot-tile>strong{font-size:13px;line-height:1.4;overflow-wrap:anywhere}.slot-tile>small{color:var(--muted);font-size:10px}.slot-tile-stock{font-size:20px;font-weight:600;margin-top:auto}.slot-tile-stock small{font-size:11px;font-weight:400;color:var(--muted)}.slot-indicator{display:inline-block;width:7px;height:7px;flex:none;border-radius:50%;background:var(--ok)}.depleted .slot-indicator,.slot-indicator.depleted{background:var(--critical)}.uncounted .slot-indicator,.slot-indicator.uncounted{background:var(--soon)}.slot-map-key{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;font-size:11px;color:var(--muted)}.slot-map-key span{display:flex;align-items:center;gap:6px}.slot-map-empty{grid-column:1/-1;padding:48px 24px;border:1px dashed var(--line);border-radius:12px;text-align:center}.slot-map-empty p{color:var(--muted)}.machine-add-slot{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:20px;gap:18px;box-shadow:none}.machine-add-slot p{font-size:13px;margin:0}.machine-add-slot input,.machine-add-slot select{width:100%}.machine-add-slot label{gap:7px}.machine-add-slot .form-row{gap:12px}.machine-add-slot small{font-size:12px}.machine-advanced{padding:16px 0;margin-top:22px}.machine-advanced summary{color:var(--muted);font-weight:500;font-size:13px}.machine-advanced .plan-grid{margin-top:16px}.plan-slot{box-shadow:none;background:var(--bg)}.slot-form-aside{position:sticky;top:24px}.focus-row{outline:2px solid var(--accent);outline-offset:-2px;animation:none}
@media(min-width:900px){.admin{grid-template-columns:224px minmax(0,1fr)}.sidebar{width:auto;padding:28px 16px;position:sticky;top:0;height:100vh;overflow:auto;background:var(--surface)}.sidebar .brand{margin:0 12px 32px}.sidebar .brand small{font-size:11px}.sidebar>button{font-size:13px;min-height:43px;gap:10px;margin-bottom:5px}.sidebar>button.active{background:var(--surface2);color:var(--accent)}.sidebar>button:hover{background:var(--surface2)}.sidebar footer{padding:20px 10px 0}.admin-main{max-width:1680px;margin:0 auto;padding:32px 36px 64px}.admin-main>header{margin-bottom:30px;padding-bottom:24px;border-bottom:1px solid var(--line)}.admin-main>header h1{font-size:28px}.admin-grid{gap:20px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.settings-grid{gap:20px}.page-enter>section+section{margin-top:20px}}
@media(min-width:900px) and (max-width:1200px){.admin{grid-template-columns:190px minmax(0,1fr)}.admin-main{padding:26px 22px}.slot-workspace{grid-template-columns:minmax(0,1fr)}.slot-form-aside{position:static}.machine-add-slot{grid-template-columns:1fr 1fr}.machine-add-slot>h3,.machine-add-slot>p,.machine-add-slot>small,.machine-add-slot>button{grid-column:1/-1}.admin-grid{grid-template-columns:minmax(0,1fr)}.employee-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:899px){.shell{display:block!important;max-width:600px;padding:24px 18px calc(var(--nav) + 32px)}header{margin-bottom:24px}h1{font-size:27px}.panel{padding:18px}.card{padding:17px}.stat{padding:17px}.stat strong{font-size:26px}.stat span{font-size:12px}.stats{gap:10px}.machine-metrics .stat{padding:12px}.machine-metrics .stat strong{font-size:20px}.btn{min-height:46px}.btn.compact{min-height:38px}nav{width:min(600px,100%);padding-top:12px;background:var(--surface)}nav button{font-size:11px;gap:5px}nav button.active{color:var(--accent)}.footer-actions{gap:10px;padding-top:24px}.menu-row{align-items:center}.row{flex-wrap:wrap}.qty{flex-wrap:nowrap}.card.row>.qty{margin-left:auto}.slot-workspace{grid-template-columns:minmax(0,1fr)}.slot-form-aside{position:static}.slot-map-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workflow-hero{padding:20px}.workflow-hero h2{font-size:23px}.restock-grid{grid-template-columns:minmax(0,1fr)}.login-box{padding:26px}.filters{flex-wrap:nowrap;overflow:auto}.onboarding-step .btn{width:auto}.form-row{display:grid;grid-template-columns:minmax(0,1fr)}.search{min-height:46px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.mx-tile[draggable=true]{cursor:grab}.mx-tile.dragging{opacity:.45;transform:scale(.98)}.mx-tile.drop-target{outline:2px solid var(--accent);outline-offset:-2px}
.mx-tile-wrap{min-width:0;position:relative}.mx-tile-wrap .mx-tile{width:100%}.mx-tile-controls,.mx-row-controls{display:flex;gap:4px}.mx-tile-controls{position:absolute;right:8px;top:8px;opacity:.25;transition:opacity .15s}.mx-tile-wrap:hover .mx-tile-controls,.mx-tile-controls:focus-within{opacity:1}.mx-tile-controls .btn,.mx-row-controls .btn{min-height:28px;padding:3px 8px;font-size:12px}.mx-row{position:relative}.mx-row-label{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.mx-row-controls{margin-left:4px}.mx-add-row-bottom{margin-top:12px}
.mx-tile-wrap{transition:transform .18s ease,opacity .18s ease}.mx-tile-wrap:hover{transform:translateY(-2px)}.mx-tile{transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,transform .18s ease}.mx-tile:active{transform:scale(.985)}.mx-tile.dragging,.mx-tile-wrap:has(.mx-tile.dragging){opacity:.48;transform:scale(.98)}.mx-tile.drop-target,.mx-tile-wrap:has(.mx-tile.drop-target){outline:2px solid var(--accent);outline-offset:3px;animation:planogram-pulse .8s ease-in-out infinite alternate}.mx-row{transition:background-color .18s ease,transform .18s ease}.mx-row:has([data-move-row]:focus-visible){background:color-mix(in srgb,var(--accent) 5%,transparent)}.mx-add-row-bottom{transition:transform .18s ease,background-color .18s ease}.mx-add-row-bottom:hover{transform:translateY(-1px)}@keyframes planogram-pulse{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}to{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}}