:root{
  --font-ui:'Assistant','Plus Jakarta Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'MuseoModerno','Plus Jakarta Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  --bg:#f0f2f5;--bg2:#f7f8fa;--panel:#ffffff;--panel2:#ffffff;--ink:#111827;--muted:#6b7280;--line:#e5e7eb;--soft:#f3f4f6;--brand:#10b981;--brand2:#059669;--ok:#10b981;--warn:#f59e0b;--bad:#ef4444;--shadow-color:rgba(0,0,0,.06);--shadow-hard:rgba(0,0,0,.08);--shadow-soft:rgba(0,0,0,.04);--glass-bg:rgba(255,255,255,.92);--glass-panel:rgba(255,255,255,.96);--glass-main:rgba(255,255,255,.90);--glass-logo:rgba(255,255,255,.98);--tbl-separator:rgba(0,0,0,.06);--tbl-separator-subtle:rgba(0,0,0,.04);--ico-ok:rgba(16,185,129,.10);--ico-warn:rgba(245,158,11,.10);--ico-out:rgba(239,68,68,.08);--ico-inf:rgba(59,130,246,.08);--ico-gld:rgba(16,185,129,.10);--alert-danger-bg:#fef2f2;--alert-warn-bg:#fffbeb;--error-bg:#fef2f2;--shadow-inset-subtle:rgba(0,0,0,.02);--shadow-inset-strong:rgba(0,0,0,.08);--tbl-border-gradient-dark:rgba(0,0,0,.08);--shadow:0 4px 24px rgba(0,0,0,.06);--radius:16px;--radius-sm:10px;--ring:0 0 0 3px rgba(16,185,129,.22)
}
html[data-theme="dark"]{--bg:#0f172a;--bg2:#111827;--panel:#1e293b;--panel2:#1e293b;--ink:#f1f5f9;--muted:#94a3b8;--line:#334155;--soft:#1e293b;--brand:#34d399;--brand2:#10b981;--shadow-color:rgba(0,0,0,.32);--shadow-hard:rgba(0,0,0,.24);--shadow-soft:rgba(0,0,0,.16);--glass-bg:rgba(30,41,59,.94);--glass-panel:rgba(30,41,59,.96);--glass-main:rgba(15,23,42,.92);--glass-logo:rgba(30,41,59,.98);--tbl-separator:rgba(241,245,249,.08);--tbl-separator-subtle:rgba(241,245,249,.05);--ico-ok:rgba(52,211,153,.15);--ico-warn:rgba(245,158,11,.15);--ico-out:rgba(239,68,68,.15);--ico-inf:rgba(59,130,246,.15);--ico-gld:rgba(52,211,153,.12);--alert-danger-bg:rgba(239,68,68,.1);--alert-warn-bg:rgba(245,158,11,.1);--error-bg:rgba(239,68,68,.1);--shadow-inset-subtle:rgba(241,245,249,.03);--shadow-inset-strong:rgba(241,245,249,.1);--tbl-border-gradient-dark:rgba(241,245,249,.1);--shadow:0 4px 32px rgba(0,0,0,.24)}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body.floralid-wms-body{font-family:var(--font-ui);background:var(--bg);color:var(--ink);overflow:hidden}button,input,select,textarea{font:inherit}button{cursor:pointer}svg.bi{width:1em;height:1em;vertical-align:-.16em;fill:currentColor}
.wms-boot{height:100vh;display:grid;place-content:center;gap:18px;text-align:center}.flower,.brand-mark,.sb-logo-ico{width:56px;height:56px;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;background:var(--brand);box-shadow:0 2px 8px rgba(16,185,129,.15);margin:auto;color:#fff}.boot-title{font-family:var(--font-display);font-size:42px;letter-spacing:-.04em;font-weight:800}.skeleton-line{display:block;width:220px;height:12px;border-radius:999px;background:linear-gradient(90deg,var(--soft),var(--panel),var(--soft));animation:sh 1.4s infinite;background-size:220%}.skeleton-line.short{width:140px;margin:auto}@keyframes sh{to{background-position:-220%}}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:34px}.login-card{width:min(480px,100%);background:var(--panel);backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:0 8px 32px var(--shadow-color);border-radius:var(--radius);padding:34px;position:relative}.login-card:before{content:"FLORALID WMS";position:absolute;top:18px;left:30px;font-weight:800;font-size:11px;letter-spacing:.1em;color:var(--muted)}.login-lang{display:flex;justify-content:flex-end}.brand{display:flex;gap:18px;align-items:center;margin:20px 0 20px}.brand-mark{margin:0}.brand h1{font-family:var(--font-display);font-size:32px;line-height:.9;letter-spacing:-.06em;margin:0}.brand p{margin:8px 0 0;color:var(--muted);font-weight:700}.login-card label,.fg label{display:block;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;margin:12px 0 6px}.login-card input,.fg input,.fg textarea,.srch input{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel2);color:var(--ink);padding:14px 18px;outline:0;box-shadow:0 1px 4px var(--shadow-soft)}.fg textarea{border-radius:20px;min-height:96px;resize:vertical}.login-card input:focus,.fg input:focus,.fg textarea:focus,.srch input:focus{box-shadow:var(--ring)}.primary,.btn{border:1px solid transparent;background:var(--brand);color:#fff;font-weight:900;border-radius:999px;padding:13px 18px;box-shadow:0 2px 8px rgba(16,185,129,.15);transition:.16s}.primary{width:100%;margin-top:16px}.btn:hover,.primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(16,185,129,.2)}.btn-g{background:var(--panel2);color:var(--ink);border:1px solid var(--line)!important;box-shadow:0 1px 3px var(--shadow-soft)}.btn-g:hover{background:var(--soft);border-color:var(--line)!important}.btn-b{background:var(--ink);color:var(--panel)}.btn.sm{padding:7px 12px;font-size:12px}.form-error{margin-top:14px;border:1px solid var(--bad);color:var(--bad);background:var(--error-bg);padding:12px;border-radius:16px;font-weight:800}.login-note{margin-top:12px;color:var(--muted);font-size:13px;font-weight:650;line-height:1.5}.lang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:var(--panel2);padding:4px;gap:4px}.lang-toggle button{border:0;background:transparent;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:900;color:var(--ink)}.lang-toggle .on{background:var(--brand);color:#fff}
.wms-shell{height:100vh;display:grid;grid-template-columns:292px 1fr;padding:22px;gap:22px}.sidebar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 3px var(--shadow-soft);padding:18px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:rgba(16,185,129,.3) transparent}.sb-logo{display:flex;align-items:center;gap:12px;padding:10px 8px 20px;border-bottom:1px solid var(--line);margin-bottom:12px}.sb-logo-ico{width:44px;height:44px;box-shadow:0 2px 6px rgba(16,185,129,.12);margin:0;border-radius:12px}.sb-logo-t{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.05em}.sb-logo-s{font:700 11px var(--font-mono);color:var(--muted);text-transform:uppercase}.sb-sec{font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.12em;margin:18px 10px 8px;color:var(--muted)}.sbi{width:100%;display:flex;align-items:center;gap:11px;border:0;background:transparent;color:var(--ink);padding:11px 12px;border-radius:16px;font-weight:850;position:relative;text-align:left}.sbi .ico{display:grid;place-items:center;width:28px;height:28px;border:1.5px solid var(--line);border-radius:10px;background:var(--panel2)}.sbi.active{background:var(--brand);border:1px solid var(--brand);box-shadow:none;color:#fff}.sbi.active .ico{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.3)}.nb,.reddot{margin-left:auto;background:var(--ink);color:var(--panel);border-radius:999px;min-width:22px;height:22px;display:inline-grid;place-items:center;font-size:11px;font-weight:900}.sb-usr{display:flex;align-items:center;gap:12px;margin-top:22px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--soft)}.ava{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-weight:900}.sb-un{font-weight:900}.sb-ur{font-size:12px;color:var(--muted);font-weight:700}.main{min-width:0;background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-rows:auto 1fr}.topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--line);background:var(--panel)}.bc{font-size:13px;font-weight:900;color:var(--muted);white-space:nowrap}.bc span{color:var(--ink)}.srch{flex:1;max-width:470px;margin-left:auto}.tbtn{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--ink);display:grid;place-items:center;position:relative}.reddot{position:absolute;right:-2px;top:-2px;min-width:8px;width:8px;height:8px;background:var(--bad);border:1px solid var(--panel);font-size:0}.content{overflow:auto;padding:24px}.hero,.ph{display:flex;justify-content:space-between;gap:22px;align-items:center;margin-bottom:24px;border-bottom:1px solid var(--line);padding-bottom:22px}.hero h1,.ph-t{font-family:var(--font-display);font-size:clamp(28px,4vw,48px);line-height:.88;font-weight: bold; letter-spacing: 4px !important;argin:0;text-transform:uppercase}.hero p,.ph-s{color:var(--muted);font-weight:700;max-width:760px;line-height:1.55}.hero-actions,.bg{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}.kpis,.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.card,.kpi{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 2px 8px var(--shadow-soft);min-width:0}.kpi{position:relative;overflow:hidden}.kpi:after{display:none}.kpi-k,.rd-k{font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.kpi-v{font-family:var(--font-display);font-size:32px;font-weight:900;letter-spacing:-.06em;margin-top:8px}.kpi-s{margin-top:8px;color:var(--muted);font-size:12px;font-weight:800}.ch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.ct{font-weight:950;letter-spacing:-.02em}.c-m,.card p{color:var(--muted);line-height:1.55;font-weight:650}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius-sm)}.tbl{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}.tbl th{background:var(--soft);font-size:11px;text-transform:uppercase;letter-spacing:.08em;text-align:left;padding:13px;border-bottom:1px solid var(--line)}.tbl td{padding:13px;border-bottom:1px solid var(--tbl-separator);font-weight:650}.tbl tr:last-child td{border-bottom:0}.b{display:inline-flex;align-items:center;gap:6px;border:1.5px solid currentColor;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:950}.b.ok{color:var(--ok)}.b.pen,.b.pri{color:var(--warn)}.b.lo{color:var(--bad)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.fg.full{grid-column:1/-1}.release-description,.copy-guide{margin-bottom:16px}.rd-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.toast{position:fixed;right:30px;bottom:30px;z-index:9000;background:var(--ink);color:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px 18px;font-weight:900;box-shadow:0 4px 12px rgba(16,185,129,.2);display:none}.empty{display:grid;place-items:center;text-align:center;padding:48px}.empty .ico{font-size:42px;color:var(--brand)}
.chart-bars{display:flex;gap:8px;align-items:flex-end;height:180px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px}.bar{flex:1;min-width:10px;background:linear-gradient(180deg,var(--brand),rgba(16,185,129,.2));border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0}.barcode-box svg{max-width:100%;height:auto;border:1px solid var(--line);border-radius:18px;background:var(--panel2)}.pill-row{display:flex;gap:8px;flex-wrap:wrap}.pill{border:1px solid var(--line);border-radius:999px;padding:8px 11px;background:var(--soft);font-weight:900;font-size:12px}
@media(max-width:1100px){.wms-shell{grid-template-columns:1fr}.sidebar{display:none}.kpis,.g4,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.hero,.ph{align-items:flex-start;flex-direction:column}.srch{display:none}}@media(max-width:680px){body.floralid-wms-body{overflow:auto}.wms-shell{height:auto;padding:12px}.topbar{flex-wrap:wrap}.content{padding:16px}.kpis,.g4,.g3,.g2,.form-grid,.rd-grid{grid-template-columns:1fr}.hero h1,.ph-t{font-size:42px}.login-card{box-shadow:0 2px 8px rgba(16,185,129,.15);padding:26px}}
/* Compatibility selectors used by the bundled Vue workspace */
.sg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}.ga{display:grid;grid-template-columns:1.4fr .9fr;gap:16px;margin-top:16px}.sc{background:var(--panel2);border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:0 2px 8px var(--shadow-soft);position:relative;overflow:hidden}.sc:after{content:"";position:absolute;right:-30px;top:-30px;width:96px;height:96px;border-radius:50%;background:var(--soft);opacity:.8}.sc-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px}.sc-lbl{font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.sc-ico{position:relative;z-index:1;width:42px;height:42px;border:1px solid var(--line);border-radius:15px;display:grid;place-items:center;background:var(--brand);color:var(--ink);box-shadow:0 1px 4px rgba(16,185,129,.1)}.sc-ico.ok{background:var(--ico-ok)}.sc-ico.pen{background:var(--ico-warn)}.sc-ico.out{background:var(--ico-out)}.sc-ico.inf{background:var(--ico-inf)}.sc-ico.gld{background:var(--ico-gld)}.sc-v{position:relative;z-index:1;font-family:var(--font-display);font-size:38px;font-weight:900;letter-spacing:-.06em;margin-top:10px}.sc-sub{position:relative;z-index:1;margin-top:7px;color:var(--muted);font-size:12px;font-weight:800}.al{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:20px;padding:14px 16px;margin-bottom:12px;background:var(--panel2);box-shadow:0 2px 6px var(--shadow-soft);font-weight:700}.al.d{background:var(--alert-danger-bg)}.al.w{background:var(--alert-warn-bg)}.alert-ico{display:grid;place-items:center;min-width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:var(--brand)}.chart-bars i{flex:1;min-width:10px;background:linear-gradient(180deg,var(--brand),rgba(16,185,129,.2));border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;display:block}.progress{height:10px;border:1px solid var(--line);border-radius:999px;background:var(--soft);overflow:hidden}.progress i{display:block;height:100%;background:var(--brand2)}.fi{display:grid;gap:8px}.fl{font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.fr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.fr2{display:grid;grid-template-columns:2fr 1fr;gap:16px}.fr3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.fs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.fi input,.fi textarea,.fi select{width:100%;border:1px solid var(--line);border-radius:18px;background:var(--panel2);color:var(--ink);padding:13px 15px;outline:0}.fi textarea{min-height:92px}.fi input:focus,.fi textarea:focus,.fi select:focus{box-shadow:var(--ring)}.mono{font-family:var(--font-mono)}.barcode-preview,.barcode-box{display:grid;place-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:22px;padding:18px}.empty-state{text-align:center;padding:44px 20px;display:grid;place-items:center;gap:10px}.empty-svg{width:190px;max-width:70%;fill:var(--brand);stroke:var(--line);stroke-width:3}.empty-state h3{font-family:var(--font-display);font-size:30px;letter-spacing:-.04em;margin:0}.empty-state p{margin:0;color:var(--muted);max-width:460px}.btn-p{background:var(--brand);color:#fff}.skel,.skel-card{display:block;border-radius:18px;background:linear-gradient(90deg,var(--soft),var(--panel2),var(--soft));animation:sh 1.3s infinite;background-size:220%}.skel{height:16px}.skel-card{height:116px;border:1px solid var(--line)}.toast.error{background:var(--bad);color:#fff;display:none}@media(max-width:1100px){.sg{grid-template-columns:repeat(2,minmax(0,1fr))}.ga,.fr2,.fr3{grid-template-columns:1fr}}@media(max-width:680px){.sg,.fr,.fs{grid-template-columns:1fr}.sc-v{font-size:32px}}

/* v3.2.1 hardening: sidebar SVG icons, enterprise form layout, disabled workflow affordances */
.sbi .ico svg{width:18px;height:18px;display:block;fill:currentColor;stroke:currentColor;vector-effect:non-scaling-stroke}
.sbi[data-disabled],button[data-disabled]{opacity:.52;cursor:not-allowed;filter:saturate(.65)}
.sbi[data-disabled]:hover,button[data-disabled]:hover{transform:none;box-shadow:inherit}
.fi,.fr input,.fr2 input,.fr3 input,.fr select,.fr2 select,.fr3 select{min-height:48px;line-height:1.2}
.fr,.fr2,.fr3{align-items:end;margin-bottom:14px}
.fr label,.fr2 label,.fr3 label{display:block;margin:0 0 8px}
input[readonly]{background:var(--soft);cursor:not-allowed;color:var(--muted)}
.card .btn,.card button{margin-top:10px}
.progress{position:relative;display:grid;grid-template-columns:minmax(130px,1fr) auto;align-items:center;gap:10px;margin:12px 0;padding:10px 12px;height:auto;background:var(--panel2)}
.progress em{grid-column:1/-1;display:block;height:10px;border-radius:999px;background:var(--brand);border:1px solid var(--line)}
@media(max-width:680px){.topbar{gap:10px}.tbtn{width:38px;height:38px}.form-grid,.fr,.fr2,.fr3{gap:12px}.sbi .ico{width:34px;height:34px}.sbi .ico svg{width:19px;height:19px}}


/* v3.2.2 UI refinement: dashboard icon, enterprise form controls, consistent content typography */
.sbi{min-height:52px}
.sbi .ico{flex:0 0 28px}
input.fi,textarea.fi,select.fi,select.fs{display:block;width:100%;min-height:56px;padding:15px 16px;border:1px solid var(--line);border-radius:18px;background:var(--panel2);color:var(--ink);outline:0;box-shadow:0 1px 4px var(--shadow-soft);font-family:var(--font-ui);font-weight:650;line-height:1.35}
input.fi::placeholder,textarea.fi::placeholder,select.fs{color:var(--muted)}
input.fi:focus,textarea.fi:focus,select.fi:focus,select.fs:focus{box-shadow:var(--ring)}
select.fs{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% - 3px),calc(100% - 12px) calc(50% - 3px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:34px}
.fr,.fr2,.fr3{align-items:start;gap:16px;margin-bottom:16px}
.fr>label.fl,.fr2 label.fl,.fr3 label.fl{display:block;margin:0 0 8px}
.card>.fr3:first-child,.card>.fr2:first-child,.card>.fr:first-child{margin-top:2px}
.card>.fr3:last-child,.card>.fr2:last-child,.card>.fr:last-child{margin-bottom:0}
.g2>.card:first-child .btn,.card .btn[data-act="barcode"],.card .btn[data-act="saveProduct"]{margin-top:14px}
.copy-guide,.release-description{padding:22px 24px}
.copy-guide .ct,.release-description .rd-k,.copy-guide ol,.copy-guide li,.release-description p{font-family:var(--font-ui)}
.copy-guide .ct{margin-bottom:10px}
.copy-guide ol{margin:0 0 0 20px;padding:0;color:var(--ink);font-size:16px;line-height:1.7;font-weight:650}
.copy-guide li+li{margin-top:4px}
.release-description p,.copy-guide p,.ph-s,.c-m,.card p{font-size:15px;line-height:1.65}
.barcode-preview h2{margin:14px 0 4px;font-size:22px}
.barcode-preview p{margin:0}

/* v3.2.3 user-management flow and responsive edge hardening */
.field-grid{display:grid;gap:16px}
.field-grid.cols-1{grid-template-columns:1fr}
.field-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.field-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.field-group{min-width:0}
.field-control,.field-group>.fi,.field-group>.fs{width:100%;min-height:56px}
.form-card .ch{align-items:flex-start}
.form-card .btn{margin-top:16px}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}
.tbl td .row-actions .btn{margin-top:0}
@media(max-width:900px){.field-grid.cols-2,.field-grid.cols-3{grid-template-columns:1fr}.row-actions{flex-direction:column}.row-actions .btn{width:100%}}

/* v3.2.5 first-login password setup */
.login-card .btn.btn-g{display:inline-flex;align-items:center;justify-content:center}


/* v3.2.7 release: consistent card/section breathing room */
.content{display:flex;flex-direction:column;gap:20px}
.content>.card,.content>.g2,.content>.g3,.content>.g4,.content>.ga,.content>.sg,.content>.al,.content>.ph{margin-top:0;margin-bottom:0}
.g2,.g3,.g4,.ga,.sg,.rd-grid,.field-grid{row-gap:20px;column-gap:20px}
.card{min-width:0}
.card+.card{margin-top:0}
@media(max-width:680px){.content{gap:16px}.g2,.g3,.g4,.ga,.sg,.rd-grid,.field-grid{gap:16px}}

/* v3.2.7 production hotfix: responsive stock forms, placeholders, and table safety */
.stock-workspace{align-items:start}
.stock-form-card .field-grid,.form-card .field-grid{margin-bottom:16px}
.stock-form-card .field-grid:last-of-type,.form-card .field-grid:last-of-type{margin-bottom:0}
.field-group label.fl{display:block;margin:0 0 8px}
.fi::placeholder,input.fi::placeholder,textarea.fi::placeholder{color:var(--muted);opacity:.72}
input[type=number].fi{appearance:textfield}
input[type=number].fi::-webkit-outer-spin-button,input[type=number].fi::-webkit-inner-spin-button{margin:0}
.stock-table-card{overflow:hidden}
.table-wrap{width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.tbl{min-width:720px}
.g2.stock-workspace{grid-template-columns:minmax(360px,.95fr) minmax(460px,1.05fr)}
.al.ok{background:#e6f8ee}
@media(max-width:1180px){.g2.stock-workspace{grid-template-columns:1fr}.stock-table-card{order:2}.stock-form-card{order:1}}
@media(max-width:680px){.field-grid.cols-2,.field-grid.cols-3{grid-template-columns:1fr}.stock-form-card .btn{width:100%;min-height:52px}.tbl{min-width:640px}.ph-t{overflow-wrap:anywhere}}

/* v3.2.7 sidebar UX hotfix: polished scrollbar + stable menu scroll position */
.sidebar::-webkit-scrollbar{width:10px}
.sidebar::-webkit-scrollbar-track{background:var(--tbl-separator-subtle);border-radius:999px;margin:18px 0}
.sidebar::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--brand),var(--brand2));border:2px solid var(--glass-logo);border-radius:999px}
.sidebar::-webkit-scrollbar-thumb:hover{background:var(--brand2)}
.sidebar .sbi{scroll-margin-block:18px}


/* v3.2.7 sidebar logo + scrollbar alignment hotfix */
.sidebar{overflow:hidden;display:flex;flex-direction:column;min-height:0;padding:0;scrollbar-width:auto}
.sb-logo{position:sticky;top:0;z-index:5;flex:0 0 auto;margin:0;padding:28px 18px 22px;background:var(--glass-logo);backdrop-filter:blur(12px);border-radius:calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;box-shadow:0 10px 18px var(--shadow-soft)}
.sb-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 18px 18px;scrollbar-gutter:stable both-edges;scrollbar-width:thin;scrollbar-color:var(--brand) transparent}
.sb-scroll::-webkit-scrollbar{width:8px}
.sb-scroll::-webkit-scrollbar-track{background:transparent;margin:12px 0 18px}
.sb-scroll::-webkit-scrollbar-thumb{background:var(--brand);border:2px solid var(--glass-logo);border-radius:999px}
.sb-scroll::-webkit-scrollbar-thumb:hover{background:var(--brand2)}
.sidebar::-webkit-scrollbar{width:0;height:0}
.sb-scroll .sbi{scroll-margin-block:16px}
@media(max-width:1100px){.sidebar{display:none}}
html[data-theme="dark"] .sb-logo{background:var(--glass-logo);box-shadow:0 10px 18px rgba(28,22,27,.72)}
html[data-theme="dark"] .sb-scroll::-webkit-scrollbar-thumb{border-color:var(--glass-logo)}

/* v3.2.8 release polish: reusable admin guide and hardened menu scroll */
.wms-shell{min-height:0}.sidebar{overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0}.sb-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 4px 4px 0;scrollbar-width:thin;scrollbar-color:rgba(16,185,129,.3) transparent}.sb-scroll::-webkit-scrollbar{width:8px}.sb-scroll::-webkit-scrollbar-track{background:var(--tbl-separator-subtle);border-radius:999px}.sb-scroll::-webkit-scrollbar-thumb{background:var(--brand);border:2px solid var(--panel);border-radius:999px}.sbi{scroll-margin-block:92px}.admin-guide-card{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px;align-items:center;margin:0 0 18px;padding:24px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(135deg,var(--panel2),var(--panel));box-shadow:0 2px 8px var(--shadow-soft);position:relative;overflow:hidden}.admin-guide-card:before{content:"";position:absolute;inset:auto -70px -110px auto;width:280px;height:280px;border:1px solid var(--line);border-radius:50%;background:var(--soft);opacity:.55}.guide-copy{position:relative;z-index:1}.guide-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--soft);font-size:11px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.guide-eyebrow:before{content:"";width:8px;height:8px;border-radius:999px;background:var(--brand2);box-shadow:0 0 0 3px rgba(16,185,129,.25)}.guide-copy h2{font-family:var(--font-display);font-size:clamp(28px,3vw,42px);line-height:.95;letter-spacing:-.055em;margin:0 0 10px;text-transform:uppercase}.guide-copy>p{max-width:780px;margin:0 0 16px;color:var(--muted);font-weight:750;line-height:1.6}.guide-copy ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}.guide-copy li{display:flex;gap:10px;align-items:flex-start;padding:12px;border:2px solid var(--tbl-separator);border-radius:18px;background:var(--panel2);opacity:.85;font-weight:760;line-height:1.45}.guide-copy li span{flex:0 0 26px;height:26px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--brand);font-size:12px;font-weight:950;color:var(--ink)}.guide-copy li p{margin:0;color:var(--ink);font-size:13px}.guide-art{position:relative;z-index:1;display:grid;place-items:center;min-height:168px}.guide-svg{width:100%;max-width:250px;overflow:visible}.guide-svg *{vector-effect:non-scaling-stroke}.guide-svg .g-back{fill:var(--panel2);stroke:var(--line);stroke-width:4}.guide-svg .g-grid{fill:none;stroke:var(--muted);stroke-width:5;stroke-linecap:round;opacity:.55}.guide-svg .g-dot{fill:var(--brand);stroke:var(--line);stroke-width:4}.guide-svg .g-check{fill:none;stroke:var(--line);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}.guide-svg .g-box,.guide-svg .g-box2{fill:var(--soft);stroke:var(--line);stroke-width:4;stroke-linejoin:round}.guide-svg .g-box2{fill:var(--panel2)}.guide-svg .g-flower{fill:var(--brand);stroke:var(--line);stroke-width:3;stroke-linejoin:round}.guide-svg .g-core{fill:var(--line)}html[data-theme="dark"] .guide-copy li{border-color:rgba(241,245,249,.28);background:var(--panel2);opacity:.85}html[data-theme="dark"] .admin-guide-card:before{opacity:.28}@media(max-width:1100px){.admin-guide-card{grid-template-columns:1fr}.guide-art{min-height:auto}.guide-svg{max-width:220px}.guide-copy ul{grid-template-columns:1fr}}@media(max-width:680px){.admin-guide-card{padding:18px;border-radius:22px}.guide-copy h2{font-size:30px}.guide-copy li{padding:10px}.guide-art{display:none}}

/* v3.2.8 UI correction: stable compact admin overview + breathable sidebar */
.sidebar{overflow:hidden;display:flex;flex-direction:column;min-height:0;padding:0;scrollbar-width:auto}
.sb-logo{flex:0 0 auto;padding:28px 20px 24px;margin:0}
.sb-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:14px 18px 24px;scrollbar-gutter:stable both-edges;overscroll-behavior:contain}
.sb-scroll .sb-sec{margin:22px 8px 12px;font-size:11px;line-height:1.2;letter-spacing:.13em}
.sb-scroll .sb-sec:first-child{margin-top:6px}
.sb-scroll .sbi{min-height:56px;margin:0 0 9px;padding:13px 14px;gap:13px;border-radius:18px;font-size:15px;line-height:1.25;scroll-margin-block:92px}
.sb-scroll .sbi .ico{flex:0 0 32px;width:32px;height:32px;border-radius:12px}
.sb-scroll .sbi .ico svg{width:18px;height:18px}
.sb-scroll .nb{margin-left:auto;flex:0 0 auto}
.sb-usr{margin:18px 0 0;padding:16px;border-radius:22px}
.admin-guide-card{display:grid;grid-template-columns:minmax(0,1fr) clamp(150px,17vw,230px);gap:22px;align-items:center;min-height:172px;margin:0 0 22px;padding:24px 28px;border-radius:28px;overflow:hidden}
.admin-guide-card:before{width:270px;height:270px;right:-76px;bottom:-126px;opacity:.48}
.guide-copy{position:relative;z-index:1;display:grid;align-content:center;row-gap:12px;min-width:0}
.guide-copy h2{display:none}
.guide-eyebrow{width:max-content;max-width:100%;margin:0;white-space:nowrap}
.guide-copy>p{max-width:880px;margin:0;color:var(--muted);font-size:15px;line-height:1.55;font-weight:760}
.guide-copy ul{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.guide-copy li{min-height:58px;padding:12px 14px;align-items:flex-start;border-radius:18px;background:var(--panel2);opacity:.85}
.guide-copy li span{flex:0 0 26px;width:26px;height:26px}
.guide-copy li p{font-size:13px;line-height:1.35;font-weight:780}
.guide-art{position:relative;z-index:1;display:grid;place-items:center;min-height:140px;align-self:stretch}
.guide-svg{max-width:220px;width:100%;height:auto}
@media(max-width:1280px){.admin-guide-card{grid-template-columns:minmax(0,1fr) 170px;padding:22px}.guide-copy ul{grid-template-columns:repeat(3,minmax(120px,1fr))}.guide-svg{max-width:170px}}
@media(max-width:1100px){.admin-guide-card{grid-template-columns:1fr}.guide-art{display:none}.guide-copy ul{grid-template-columns:1fr}.sidebar{display:none}}
@media(max-width:680px){.admin-guide-card{min-height:0;padding:18px;border-radius:22px}.guide-copy ul{grid-template-columns:1fr}.guide-copy li{min-height:0}}
html[data-theme="dark"] .guide-copy li{background:var(--panel2);opacity:.85}

/* v3.2.8 emergency correction: deterministic admin guide placement + non-clipping layout */
.admin-guide-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(150px,220px);
  gap:24px;
  align-items:center;
  width:100%;
  min-height:0;
  height:auto;
  margin:0 0 24px;
  padding:24px 28px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:28px;
  background:linear-gradient(135deg,var(--panel2),var(--panel));
  box-shadow:0 2px 8px var(--shadow-soft);
}
.admin-guide-card:before{
  content:"";
  position:absolute;
  width:250px;
  height:250px;
  right:-88px;
  bottom:-120px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--soft);
  opacity:.46;
  pointer-events:none;
}
.guide-copy{
  position:relative;
  z-index:2;
  display:grid;
  row-gap:12px;
  align-content:start;
  min-width:0;
}
.guide-copy h2{display:none}
.guide-eyebrow{margin:0;max-width:max-content;white-space:nowrap}
.guide-copy>p{
  margin:0;
  max-width:980px;
  font-size:15px;
  line-height:1.55;
  font-weight:760;
  color:var(--muted);
}
.guide-copy ul{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}
.guide-copy li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-height:0;
  height:auto;
  padding:12px 14px;
  border-radius:18px;
  border:2px solid var(--tbl-separator);
  background:var(--panel2);opacity:.85;
}
.guide-copy li span{flex:0 0 26px;width:26px;height:26px}
.guide-copy li p{margin:0;font-size:13px;line-height:1.35;font-weight:780;color:var(--ink)}
.guide-art{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  align-self:center;
  min-height:120px;
  pointer-events:none;
}
.guide-svg{width:100%;max-width:200px;height:auto;display:block}
.g2>.admin-guide-card,.g3>.admin-guide-card,.sg>.admin-guide-card{grid-column:1/-1}
@media(max-width:1440px){
  .admin-guide-card{grid-template-columns:minmax(0,1fr) 160px;padding:22px 24px}
  .guide-svg{max-width:160px}
  .guide-copy ul{gap:10px}
  .guide-copy li{padding:11px 12px}
  .guide-copy li p{font-size:12.5px}
}
@media(max-width:1180px){
  .admin-guide-card{grid-template-columns:1fr}
  .guide-art{display:none}
  .guide-copy ul{grid-template-columns:1fr}
}


/* v3.2.8 hard fix: safe admin guide card, no clipping, no overlap */
.content > .admin-guide-card{
  flex:0 0 auto;
  align-self:stretch;
}
.admin-guide-card{
  display:block;
  width:100%;
  box-sizing:border-box;
  height:auto;
  min-height:unset;
  max-height:none;
  margin:0 0 24px;
  padding:22px 26px 24px;
  overflow:visible;
  contain:none;
  position:relative;
  border:1px solid var(--line);
  border-radius:26px;
  background:linear-gradient(135deg,var(--panel2),var(--panel));
  box-shadow:0 2px 8px var(--shadow-soft);
}
.admin-guide-card:before,
.admin-guide-card:after{
  display:none;
  content:none;
}
.guide-copy{
  display:block;
  position:relative;
  z-index:1;
  width:100%;
  max-width:none;
  min-width:0;
}
.guide-copy h2{display:none}
.guide-eyebrow{
  display:inline-flex;
  align-items:center;
  width:auto;
  max-width:100%;
  margin:0 0 14px;
  white-space:nowrap;
}
.guide-copy>p{
  display:block;
  max-width:1120px;
  margin:0 0 16px;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
  font-weight:760;
}
.guide-copy ul{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
  width:100%;
}
.guide-copy li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  height:auto;
  min-height:64px;
  max-height:none;
  padding:12px 14px;
  overflow:visible;
  border:2px solid var(--tbl-separator);
  border-radius:18px;
  background:var(--panel2);opacity:.85;
  box-sizing:border-box;
}
.guide-copy li span{
  flex:0 0 26px;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
}
.guide-copy li p{
  margin:0;
  font-size:13px;
  line-height:1.35;
  font-weight:780;
  color:var(--ink);
  overflow:visible;
}
.guide-art,
.guide-svg{
  display:none;
}
.g2>.admin-guide-card,
.g3>.admin-guide-card,
.sg>.admin-guide-card{
  grid-column:1/-1;
}
@media(max-width:1180px){
  .guide-copy ul{grid-template-columns:1fr}
  .guide-copy li{min-height:0}
}
@media(max-width:680px){
  .admin-guide-card{padding:18px;border-radius:22px}
  .guide-eyebrow{font-size:10px;white-space:normal}
  .guide-copy>p{font-size:14px}
}

/* v3.2.8 final placement correction: overview card directly below page header */
.content > .ph + .admin-guide-card{
  margin-top:0;
  margin-bottom:22px;
}
.admin-guide-card{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  min-height:auto;
  height:auto;
  max-height:none;
  overflow:visible;
  padding:24px 28px;
  box-sizing:border-box;
}
.admin-guide-card:before,
.admin-guide-card:after,
.guide-art,
.guide-svg{
  display:none;
}
.guide-copy{
  display:block;
  min-width:0;
}
.guide-eyebrow{
  display:inline-flex;
  width:auto;
  max-width:100%;
  margin:0 0 14px;
  white-space:nowrap;
}
.guide-copy>p{
  display:block;
  max-width:100%;
  margin:0 0 18px;
  line-height:1.55;
}
.guide-copy ul{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}
.guide-copy li{
  min-height:64px;
  height:auto;
  overflow:visible;
  align-items:flex-start;
}
@media(max-width:980px){
  .guide-copy ul{grid-template-columns:1fr;}
  .guide-copy li{min-height:0;}
}

/* v3.2.8 pixel alignment correction: admin guide step content vertically centered */
.guide-copy ul{
  align-items:stretch;
}
.guide-copy li{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:64px;
  height:100%;
  padding:12px 14px;
  box-sizing:border-box;
}
.guide-copy li span{
  align-self:center;
  flex:0 0 26px;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  line-height:1;
}
.guide-copy li p{
  display:flex;
  align-items:center;
  min-height:26px;
  margin:0;
}
@media(max-width:980px){
  .guide-copy li{height:auto;min-height:56px;}
}

/* v3.2.8 table and scrollbar system audit fix: unified scrollbars + polished data tables */
:root{
  scrollbar-color:rgba(16,185,129,.3) transparent;
  scrollbar-width:thin;
}
*{
  scrollbar-color:rgba(16,185,129,.3) transparent;
  scrollbar-width:thin;
}
*::-webkit-scrollbar{
  width:10px;
  height:10px;
}
*::-webkit-scrollbar-track{
  background:var(--tbl-separator-subtle);
  border-radius:999px;
  margin:6px;
}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--brand),var(--brand2));
  border:2px solid var(--panel);
  border-radius:999px;
}
*::-webkit-scrollbar-thumb:hover{
  background:var(--brand2);
}
*::-webkit-scrollbar-corner{
  background:transparent;
}
.content,.sb-scroll{
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
/* .table-wrap overscroll-behavior is JS-managed (SmartScrollContain in app.enhance.js).
   Static :contain blocks parent scroll when table has no overflow — broken UX.
   JS adds .wms-scroll-contained only when the element actually overflows. */
.table-wrap{
  scrollbar-gutter:stable;
}
.table-wrap.wms-scroll-contained{
  overscroll-behavior:contain;
}
.sb-scroll::-webkit-scrollbar{
  width:8px;
  height:8px;
}
.sb-scroll::-webkit-scrollbar-track{
  background:var(--tbl-separator-subtle);
  border-radius:999px;
  margin:14px 0 18px;
}
.sb-scroll::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--brand),var(--brand2));
  border:2px solid var(--panel);
  border-radius:999px;
}
.content::-webkit-scrollbar{
  width:10px;
  height:10px;
}
.content::-webkit-scrollbar-track{
  background:var(--tbl-separator-subtle);
  border-radius:999px;
  margin:12px 0;
}
.content::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--brand),var(--brand2));
  border:2px solid var(--panel);
  border-radius:999px;
}
.table-wrap{
  width:100%;
  max-width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel2);
  box-shadow:inset 0 0 0 1px var(--shadow-inset-subtle);
}
.table-wrap::-webkit-scrollbar{
  width:10px;
  height:10px;
}
.table-wrap::-webkit-scrollbar-track{
  background:var(--tbl-separator-subtle);
  border-radius:999px;
  margin:8px;
}
.table-wrap::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  border:2px solid var(--panel);
  border-radius:999px;
}
.table-wrap::-webkit-scrollbar-thumb:hover{
  background:var(--brand2);
}
.tbl{
  width:100%;
  min-width:720px;
  border-collapse:separate;
  border-spacing:0;
  table-layout:auto;
  background:var(--panel2);
  font-size:13px;
  line-height:1.35;
}
.tbl th,
.tbl td{
  vertical-align:middle;
  white-space:nowrap;
}
.tbl th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--soft);
  color:var(--ink);
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  font-size:11px;
  font-weight:950;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-align:left;
}
.tbl td{
  padding:14px 16px;
  border-bottom:1px solid var(--tbl-separator);
  color:var(--ink);
  font-weight:750;
}
.tbl tbody tr:nth-child(even) td{
  background:rgba(241,245,249,.18);
}
.tbl tbody tr:hover td{
  background:rgba(16,185,129,.12);
}
.tbl tbody tr:last-child td{
  border-bottom:0;
}
.tbl th:first-child,
.tbl td:first-child{
  padding-left:18px;
}
.tbl th:last-child,
.tbl td:last-child{
  padding-right:18px;
}
.tbl .b{
  vertical-align:middle;
}
.card .table-wrap{
  margin-top:6px;
}
html[data-theme="dark"] *{
  scrollbar-color:rgba(16,185,129,.3) transparent;
}
html[data-theme="dark"] *::-webkit-scrollbar-track{
  background:var(--tbl-separator-subtle);
}
html[data-theme="dark"] *::-webkit-scrollbar-thumb{
  border-color:var(--panel);
}
@media(max-width:900px){
  .tbl{min-width:680px;font-size:12px;}
  .tbl th,.tbl td{padding:12px 14px;}
}

/* v3.2.8 Premium Table UI Kit: elevated table system for every WMS data grid */
.table-wrap{
  position:relative;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:24px;
  background:
    linear-gradient(180deg,var(--panel2),var(--glass-panel)) padding-box,
    linear-gradient(135deg,rgba(16,185,129,.72),var(--tbl-border-gradient-dark)) border-box;
  box-shadow:
    8px 8px 0 var(--shadow-soft),
    inset 0 1px 0 var(--shadow-soft);
  padding:10px;
  isolation:isolate;
}
.table-wrap:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:22px;
  background:
    radial-gradient(circle at 18px 18px,rgba(16,185,129,.18) 0 2px,transparent 3px),
    linear-gradient(90deg,rgba(16,185,129,.08),transparent 28%,transparent 72%,rgba(16,185,129,.07));
  background-size:18px 18px,100% 100%;
  opacity:.9;
  z-index:-1;
}
.tbl{
  min-width:760px;
  overflow:hidden;
  border-collapse:separate;
  border-spacing:0;
  background:var(--panel2);
  border:1.5px solid var(--tbl-separator);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}
.tbl thead th,
.tbl th{
  position:sticky;
  top:0;
  z-index:5;
  padding:15px 18px;
  background:
    linear-gradient(180deg,#f8dce5 0%,#f0c7d4 100%);
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:900;
  letter-spacing:.105em;
  text-transform:uppercase;
  text-shadow:none;
}
.tbl th:first-child{border-top-left-radius:16px;}
.tbl th:last-child{border-top-right-radius:16px;}
.tbl td{
  position:relative;
  padding:16px 18px;
  border-bottom:1px solid var(--tbl-separator-subtle);
  color:var(--ink);
  font-size:13px;
  font-weight:780;
  background:var(--panel2);
  transition:background .16s ease,transform .16s ease,box-shadow .16s ease;
}
.tbl tbody tr:nth-child(even) td{
  background:var(--panel);
}
.tbl tbody tr:hover td{
  background:var(--soft);
  box-shadow:inset 0 1px 0 rgba(16,185,129,.22),inset 0 -1px 0 rgba(16,185,129,.18);
}
.tbl tbody tr:hover td:first-child:before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:5px;
  border-radius:0 999px 999px 0;
  background:var(--brand);
  box-shadow:2px 0 0 var(--line);
}
.tbl tbody tr:last-child td{border-bottom:0;}
.tbl tbody tr:last-child td:first-child{border-bottom-left-radius:16px;}
.tbl tbody tr:last-child td:last-child{border-bottom-right-radius:16px;}
.tbl td:first-child,
.tbl th:first-child{
  padding-left:22px;
}
.tbl td:last-child,
.tbl th:last-child{
  padding-right:22px;
}
.tbl .mono,
.tbl td:first-child{
  font-family:var(--font-mono);
  font-weight:850;
}
.tbl .b{
  border-width:2px;
  background:var(--panel2);
  box-shadow:0 1px 3px var(--shadow-soft);
}
.card:has(.table-wrap){
  background:var(--panel2);
}
.card>.table-wrap:first-child,
.card .ch + .table-wrap{
  margin-top:12px;
}
.table-wrap::-webkit-scrollbar{width:12px;height:12px;}
.table-wrap::-webkit-scrollbar-track{
  background:var(--tbl-separator-subtle);
  border:1px solid var(--tbl-separator);
  border-radius:999px;
  margin:10px;
}
.table-wrap::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,var(--brand),#f0a8bd,var(--brand));
  border:3px solid var(--panel2);
  border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--shadow-inset-strong);
}
.table-wrap::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(90deg,var(--brand2),var(--brand));
}
html[data-theme="dark"] .table-wrap:before{
  opacity:.28;
}
@media(max-width:900px){
  .table-wrap{padding:8px;border-radius:22px;}
  .tbl{min-width:700px;}
  .tbl th,.tbl td{padding:14px 15px;}
}

/* v3.2.9 UI polish: reference-matched table surface + no boot shimmer */
.wms-boot .skeleton-line,
.wms-boot .skeleton-line.short{
  background:var(--soft);
  animation:none;
  background-size:auto;
  opacity:.72;
}

/* Reference table style: clean black outline, soft pink header, white/pink rows, smooth non-gradient hover */
.table-wrap{
  position:relative;
  width:100%;
  max-width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--glass-panel);
  background-image:none;
  box-shadow:none;
  padding:20px;
  isolation:auto;
}
.table-wrap:before{
  content:none;
  display:none;
}
.tbl{
  width:100%;
  min-width:760px;
  overflow:hidden;
  border-collapse:separate;
  border-spacing:0;
  table-layout:auto;
  background:var(--panel2);
  background-image:none;
  border:1px solid var(--tbl-separator);
  border-radius:18px;
  box-shadow:none;
  font-size:13px;
  line-height:1.35;
}
.tbl thead th,
.tbl th{
  position:sticky;
  top:0;
  z-index:5;
  padding:15px 22px;
  background:var(--soft);
  background-image:none;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:900;
  letter-spacing:.105em;
  text-transform:uppercase;
  text-align:left;
  text-shadow:none;
  white-space:nowrap;
}
.tbl th:first-child{border-top-left-radius:17px;}
.tbl th:last-child{border-top-right-radius:17px;}
.tbl td{
  position:relative;
  padding:18px 22px;
  border-bottom:1px solid var(--tbl-separator-subtle);
  color:var(--ink);
  font-size:13px;
  font-weight:780;
  background:var(--panel2);
  background-image:none;
  transition:background-color .22s ease,border-color .22s ease;
  white-space:nowrap;
  vertical-align:middle;
  box-shadow:none;
}
.tbl tbody tr:nth-child(even) td{
  background:var(--panel);
  background-image:none;
}
.tbl tbody tr:hover td{
  background:var(--soft);
  background-image:none;
  box-shadow:none;
}
.tbl tbody tr:hover td:first-child:before{
  content:none;
  display:none;
}
.tbl tbody tr:last-child td{border-bottom:0;}
.tbl tbody tr:last-child td:first-child{border-bottom-left-radius:17px;}
.tbl tbody tr:last-child td:last-child{border-bottom-right-radius:17px;}
.tbl td:first-child,
.tbl th:first-child{
  padding-left:22px;
}
.tbl td:last-child,
.tbl th:last-child{
  padding-right:22px;
}
.tbl .mono,
.tbl td:first-child{
  font-family:var(--font-mono);
  font-weight:850;
}
.card:has(.table-wrap){
  background:var(--panel2);
  background-image:none;
}
.card>.table-wrap:first-child,
.card .ch + .table-wrap{
  margin-top:10px;
}
.table-wrap::-webkit-scrollbar{width:10px;height:10px;}
.table-wrap::-webkit-scrollbar-track{
  background:var(--tbl-separator-subtle);
  border:0;
  border-radius:999px;
  margin:10px;
}
.table-wrap::-webkit-scrollbar-thumb{
  background:var(--brand);
  background-image:none;
  border:2px solid var(--panel2);
  border-radius:999px;
  box-shadow:none;
}
.table-wrap::-webkit-scrollbar-thumb:hover{
  background:var(--brand2);
  background-image:none;
}

html[data-theme="dark"] .table-wrap{
  background:rgba(36,28,34,.96);
  background-image:none;
  box-shadow:none;
}
@media(max-width:900px){
  .table-wrap{padding:12px;border-radius:22px;}
  .tbl{min-width:700px;}
  .tbl th,.tbl td{padding:14px 16px;}
}

/* v3.2.15 dark-mode token completion */
html[data-theme="dark"] .login-card{background:var(--glass-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
html[data-theme="dark"] .login-card input:not([type="checkbox"]){background:var(--panel2);color:var(--ink)}
html[data-theme="dark"] .barcode-preview,html[data-theme="dark"] .barcode-box{background:var(--panel2)}
html[data-theme="dark"] .barcode-box svg{background:var(--panel2);filter:invert(1) hue-rotate(180deg)}
html[data-theme="dark"] .barcode-box svg text{filter:invert(1)}

/* v3.2.16 canonical dark table rules */
html[data-theme="dark"] .tbl{
  background:rgba(36,28,34,.94);
  border-color:rgba(241,245,249,.22);
  box-shadow:none;
}
html[data-theme="dark"] .tbl th{
  background:#3d2a34;
  color:var(--ink);
}
html[data-theme="dark"] .tbl td{
  background:rgba(36,28,34,.92);
  border-bottom-color:var(--tbl-separator-subtle);
  color:var(--ink);
}
html[data-theme="dark"] .tbl tbody tr:nth-child(even) td{
  background:var(--panel);
}
html[data-theme="dark"] .tbl tbody tr:hover td{
  background:rgba(240,154,181,.12);
}
html[data-theme="dark"] .tbl .b{
  background:var(--panel2);
}

/* v3.2.17 form UX and layout refinement */
.form-card{max-width:100%;overflow:hidden}
.field-grid{display:grid;gap:16px;margin-bottom:16px}
.field-grid.cols-1{grid-template-columns:minmax(0,1fr)}
.field-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.field-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.field-group{display:flex;flex-direction:column;gap:8px;min-width:0}
.field-group .fi,.field-group select.fi,.field-group textarea.fi{width:100%;box-sizing:border-box}
input.fi,textarea.fi,select.fi,.field-group input.fi,.field-group textarea.fi,.field-group select.fi{border:1px solid var(--line);border-radius:18px;background:var(--panel2);color:var(--ink);padding:13px 15px;outline:0;font:700 14px var(--font-body)}
textarea.fi{min-height:96px;resize:vertical;line-height:1.45}
select.fi{appearance:auto}
input.fi::placeholder,textarea.fi::placeholder{color:var(--muted);opacity:.74}
input.fi:focus,textarea.fi:focus,select.fi:focus{box-shadow:var(--ring)}
.row-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.card.form-card .btn{margin-top:4px}
@media(max-width:900px){.field-grid.cols-2,.field-grid.cols-3,.form-grid,.fr,.fr2,.fr3,.fs{grid-template-columns:1fr}.row-actions{align-items:stretch}.row-actions .btn{width:100%}}

/* v3.2.17 dark-mode architecture correction: canonical semantic surface map */
html[data-theme="dark"] body.floralid-wms-body{
  background:
    radial-gradient(circle at 14% 0,rgba(240,154,181,.14),transparent 28%),
    linear-gradient(135deg,var(--bg),var(--bg2));
  color:var(--ink);
}
html[data-theme="dark"] .wms-shell{
  background:transparent;
}
html[data-theme="dark"] .main,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .login-card{
  background:var(--glass-main);
  color:var(--ink);
  border-color:var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
html[data-theme="dark"] .sidebar{
  background:var(--glass-panel);
  box-shadow:0 2px 12px var(--shadow-soft),var(--shadow);
}
html[data-theme="dark"] .login-card{
  background:var(--glass-bg);
  box-shadow:0 8px 32px var(--shadow-color);
}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .sb-logo{
  background:var(--glass-logo);
  color:var(--ink);
  border-color:var(--line);
}
html[data-theme="dark"] .content{
  background:transparent;
  color:var(--ink);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .sc,
html[data-theme="dark"] .admin-guide-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .stock-form-card,
html[data-theme="dark"] .stock-table-card,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .wms-modal-backdrop .card{
  background:var(--panel2);
  background-image:none;
  color:var(--ink);
  border-color:var(--line);
  box-shadow:0 2px 8px var(--shadow-soft);
}
html[data-theme="dark"] .admin-guide-card{
  background:linear-gradient(135deg,var(--panel2),var(--panel));
}
html[data-theme="dark"] .admin-guide-card:before{
  background:var(--soft);
  opacity:.26;
}
html[data-theme="dark"] .guide-eyebrow{
  background:var(--soft);
  color:var(--ink);
  border-color:var(--line);
}
html[data-theme="dark"] .guide-copy li{
  background:var(--panel);
  border-color:var(--tbl-separator);
  color:var(--ink);
  opacity:1;
}
html[data-theme="dark"] .guide-copy li p,
html[data-theme="dark"] .ct,
html[data-theme="dark"] .ph-t,
html[data-theme="dark"] .sb-logo-t,
html[data-theme="dark"] .bc,
html[data-theme="dark"] .bc span{
  color:var(--ink);
}
html[data-theme="dark"] .ph-s,
html[data-theme="dark"] .c-m,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .guide-copy>p,
html[data-theme="dark"] .sb-logo-s,
html[data-theme="dark"] .sb-ur,
html[data-theme="dark"] .fl,
html[data-theme="dark"] .sc-lbl,
html[data-theme="dark"] .sc-sub{
  color:var(--muted);
}
html[data-theme="dark"] .sbi{
  color:var(--ink);
  background:transparent;
  border-color:transparent;
}
html[data-theme="dark"] .sbi:hover,
html[data-theme="dark"] .sbi.active{
  background:var(--brand);
  color:#111827;
  border-color:var(--brand);
  box-shadow:0 2px 6px var(--shadow-soft);
}
html[data-theme="dark"] .ico,
html[data-theme="dark"] .tbtn,
html[data-theme="dark"] .lang-toggle,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .b{
  border-color:var(--line);
}
html[data-theme="dark"] .tbtn,
html[data-theme="dark"] .lang-toggle,
html[data-theme="dark"] .srch input,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .fi,
html[data-theme="dark"] input.fi,
html[data-theme="dark"] textarea.fi,
html[data-theme="dark"] select.fi{
  background:var(--panel2);
  color:var(--ink);
  border-color:var(--line);
  box-shadow:0 1px 4px var(--shadow-soft);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .srch input::placeholder{
  color:var(--muted);
  opacity:.76;
}
html[data-theme="dark"] .btn-p,
html[data-theme="dark"] button.primary,
html[data-theme="dark"] .primary{
  background:var(--brand);
  color:#fff;
  border-color:var(--line);
}
html[data-theme="dark"] .btn-g{
  background:var(--panel);
  color:var(--ink);
  border-color:var(--line)!important;
}
html[data-theme="dark"] .table-wrap{
  background:var(--panel2);
  background-image:none;
  border-color:var(--line);
  box-shadow:none;
}
html[data-theme="dark"] .tbl{
  background:var(--panel2);
  color:var(--ink);
  border-color:var(--tbl-separator);
  box-shadow:none;
}
html[data-theme="dark"] .tbl th{
  background:var(--soft);
  color:var(--ink);
  border-bottom-color:var(--line);
}
html[data-theme="dark"] .tbl td{
  background:var(--panel2);
  color:var(--ink);
  border-bottom:1px solid var(--tbl-separator);
}
html[data-theme="dark"] .tbl tbody tr:nth-child(even) td{
  background:var(--panel);
}
html[data-theme="dark"] .tbl tbody tr:hover td{
  background:rgba(240,154,181,.12);
}
html[data-theme="dark"] .barcode-preview,
html[data-theme="dark"] .barcode-box{
  background:var(--panel2);
  color:var(--ink);
}
html[data-theme="dark"] .barcode-box svg{
  background:var(--panel2);
  filter:invert(1) hue-rotate(180deg);
}
html[data-theme="dark"] .barcode-box svg text{
  filter:invert(1);
}
html[data-theme="dark"] .al.d{background:var(--alert-danger-bg);}
html[data-theme="dark"] .al.w{background:var(--alert-warn-bg);}
html[data-theme="dark"] .form-error{background:var(--error-bg);color:var(--ink);}
html[data-theme="dark"] .sc-ico.ok{background:var(--ico-ok);}
html[data-theme="dark"] .sc-ico.pen{background:var(--ico-warn);}
html[data-theme="dark"] .sc-ico.out{background:var(--ico-out);}
html[data-theme="dark"] .sc-ico.inf{background:var(--ico-inf);}
html[data-theme="dark"] .sc-ico.gld{background:var(--ico-gld);}

/* v3.2.17 boot polish: remove loading skeleton ghost bars from the startup screen. */
.wms-boot .skeleton-line,.wms-boot .skeleton-line.short{display:none}

/* v3.2.17 card/table layout correction: table wrappers inside cards are neutral surfaces. */
.g2,.g3,.g4,.stock-workspace,.op-workspace{align-items:start}
.stock-workspace{grid-template-columns:minmax(340px,440px) minmax(0,1fr);gap:28px}
.stock-form-card,.stock-table-card,.op-form-card,.op-table-card{align-self:start;height:auto}
.card .table-wrap,.stock-table-card .table-wrap,.op-table-card .table-wrap{
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  background-image:none;
  box-shadow:none;
  border-radius:0;
}
.card .table-wrap:before,.stock-table-card .table-wrap:before,.op-table-card .table-wrap:before{display:none}
.card .tbl,.stock-table-card .tbl,.op-table-card .tbl{
  border:1.5px solid var(--tbl-separator);
  border-radius:18px;
  overflow:hidden;
  background:var(--panel2);
}
.card .tbl th:first-child{border-top-left-radius:16px}
.card .tbl th:last-child{border-top-right-radius:16px}
.card .tbl tr:last-child td:first-child{border-bottom-left-radius:16px}
.card .tbl tr:last-child td:last-child{border-bottom-right-radius:16px}
.form-card .field-grid{align-items:end}
.form-card .field-group:has(textarea[name="items_text"]),.op-form-card .field-group:has(textarea[name="items_text"]){grid-column:1/-1}
.form-card textarea[name="items_text"],.op-form-card textarea[name="items_text"]{min-height:132px;line-height:1.5;resize:vertical}
.form-card .row-actions,.op-form-card .row-actions{margin-top:4px;justify-content:flex-start}
html[data-theme="dark"] .card .table-wrap,html[data-theme="dark"] .stock-table-card .table-wrap,html[data-theme="dark"] .op-table-card .table-wrap{
  background:transparent;
  background-image:none;
  border:0;
  box-shadow:none;
}
html[data-theme="dark"] .card .tbl,html[data-theme="dark"] .stock-table-card .tbl,html[data-theme="dark"] .op-table-card .tbl{
  border-color:var(--tbl-separator);
  background:var(--panel2);
}
@media(max-width:1180px){.stock-workspace{grid-template-columns:1fr}.stock-form-card{max-width:100%}}
@media(max-width:760px){.stock-workspace,.op-workspace{gap:18px}.card .tbl,.stock-table-card .tbl,.op-table-card .tbl{min-width:640px}}

/* v3.2.17 final table/card spacing override for all card-contained tables. */
.g2.stock-workspace{grid-template-columns:minmax(340px,440px) minmax(0,1fr);gap:28px;align-items:start}
.card>.table-wrap:first-child,.card .ch + .table-wrap,.card .table-wrap,.stock-table-card .ch + .table-wrap,.op-table-card .ch + .table-wrap{
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  background-image:none;
  box-shadow:none;
  border-radius:0;
}
.card>.table-wrap:first-child:before,.card .ch + .table-wrap:before,.card .table-wrap:before,.stock-table-card .ch + .table-wrap:before,.op-table-card .ch + .table-wrap:before{display:none}
@media(max-width:1180px){.g2.stock-workspace{grid-template-columns:1fr}.stock-table-card{order:2}.stock-form-card{order:1}}

/* v3.2.17 presentation layout correction: loose section flow and neutral table surfaces. */
.content{
  display:flex;
  flex-direction:column;
  gap:28px;
  overflow-y:auto;
  overflow-x:hidden;
  align-content:start;
}
.content > *{
  flex:0 0 auto;
  min-width:0;
}
.content > .ph,
.content > .hero,
.content > .admin-guide-card,
.content > .card,
.content > .g2,
.content > .g3,
.content > .g4,
.content > .sg,
.content > .op-workspace,
.content > .stock-workspace{
  margin-top:0;
  margin-bottom:0;
}
.ph,
.hero{
  flex-wrap:wrap;
  align-items:flex-start;
}
.admin-guide-card,
.card,
.form-card,
.stock-form-card,
.stock-table-card,
.op-form-card,
.op-table-card{
  min-height:0;
  height:auto;
  max-height:none;
  overflow:visible;
}
.op-workspace,
.stock-workspace{
  display:grid;
  grid-template-columns:minmax(360px,.92fr) minmax(480px,1.35fr);
  gap:32px;
  align-items:start;
  width:100%;
}
.op-form-card,
.stock-form-card{
  padding:24px;
}
.op-table-card,
.stock-table-card{
  padding:24px;
}
.op-form,
.card form[data-entity-form],
.card form[data-op-form]{
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
}
.op-form-card > .ct,
.form-card > .ct,
.stock-form-card > .ct{
  margin-bottom:18px;
}
.field-grid{
  width:100%;
  gap:18px;
  align-items:start;
}
.field-grid.cols-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.field-grid.cols-4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.field-group{
  min-width:0;
}
.field-group .fi,
.field-group input.fi,
.field-group textarea.fi,
.field-group select.fi{
  width:100%;
  max-width:100%;
}
.line-items-block{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:2px;
  padding-top:18px;
}
.line-items-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.line-item-row{
  margin:0;
  padding:14px;
  border:1.5px solid var(--tbl-separator);
  border-radius:18px;
  background:var(--panel);
}
.op-submit-row,
.form-card .row-actions,
.op-form-card .row-actions{
  margin-top:2px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
}
.card .table-wrap,
.stock-table-card .table-wrap,
.op-table-card .table-wrap{
  width:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  background-image:none;
  box-shadow:none;
  overflow-x:auto;
  overflow-y:visible;
}
.card .table-wrap:before,
.stock-table-card .table-wrap:before,
.op-table-card .table-wrap:before{
  display:none;
}
.card .tbl,
.stock-table-card .tbl,
.op-table-card .tbl{
  width:100%;
  min-width:0;
  border:0;
  border-radius:16px;
  overflow:hidden;
  background:var(--panel2);
}
.card .tbl th,
.stock-table-card .tbl th,
.op-table-card .tbl th{
  padding:14px 16px;
}
.card .tbl td,
.stock-table-card .tbl td,
.op-table-card .tbl td{
  padding:15px 16px;
  border-bottom:1px solid var(--tbl-separator);
}
.card .tbl tr:last-child td,
.stock-table-card .tbl tr:last-child td,
.op-table-card .tbl tr:last-child td{
  border-bottom:0;
}
.empty-state{
  padding:54px 20px;
  min-height:260px;
}
html[data-theme="dark"] .line-item-row{
  background:var(--panel);
  border-color:var(--tbl-separator);
}
html[data-theme="dark"] .card .table-wrap,
html[data-theme="dark"] .stock-table-card .table-wrap,
html[data-theme="dark"] .op-table-card .table-wrap{
  background:transparent;
  background-image:none;
  border:0;
  box-shadow:none;
}
html[data-theme="dark"] .card .tbl,
html[data-theme="dark"] .stock-table-card .tbl,
html[data-theme="dark"] .op-table-card .tbl{
  background:var(--panel2);
  border:0;
}
@media(max-width:1180px){
  .op-workspace,
  .stock-workspace{
    grid-template-columns:1fr;
    gap:24px;
  }
}
@media(max-width:900px){
  .field-grid.cols-3,
  .field-grid.cols-4{
    grid-template-columns:1fr;
  }
  .op-form-card,
  .op-table-card,
  .stock-form-card,
  .stock-table-card{
    padding:20px;
  }
}
@media(max-width:680px){
  .content{gap:20px;padding:16px;overflow-x:hidden;}
  .op-form-card,
  .op-table-card,
  .stock-form-card,
  .stock-table-card{
    padding:16px;
    border-radius:22px;
  }
  .card .tbl,
  .stock-table-card .tbl,
  .op-table-card .tbl{
    min-width:640px;
  }
}


/* v3.2.17 owner-layout correction: avoid cramped two-column workspaces and nested table frames */
.stock-workspace,
.g2.stock-workspace,
.op-workspace,
.content > .stock-workspace,
.content > .op-workspace{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:30px;
  align-items:start;
  width:100%;
}
.stock-form-card,
.stock-table-card,
.op-form-card,
.op-table-card{
  width:100%;
  max-width:none;
  min-width:0;
  align-self:stretch;
}
.stock-form-card .field-grid.cols-2,
.op-form-card .field-grid.cols-2,
.op-form-card .field-grid.cols-3{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.stock-form-card .field-grid.cols-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.stock-table-card .table-wrap,
.op-table-card .table-wrap,
.card .table-wrap{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  background-image:none;
  box-shadow:none;
  overflow-x:auto;
  overflow-y:visible;
}
.stock-table-card .tbl,
.op-table-card .tbl{
  width:100%;
  min-width:0;
  table-layout:auto;
  border:0;
  border-radius:16px;
}
.stock-table-card .tbl th,
.stock-table-card .tbl td,
.op-table-card .tbl th,
.op-table-card .tbl td{
  white-space:normal;
  overflow-wrap:anywhere;
}
@media(max-width:760px){
  .stock-table-card .tbl,
  .op-table-card .tbl{
    min-width:620px;
  }
}

/* v3.2.17 balanced-form correction: one-column page sections, two-column field groups */
.stock-workspace,
.g2.stock-workspace,
.op-workspace,
.content > .stock-workspace,
.content > .op-workspace{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:30px;
  align-items:start;
  width:100%;
}
.stock-form-card,
.op-form-card{
  max-width:none;
}
.stock-form-balanced .field-grid.cols-2,
.stock-form-card .field-grid.cols-2,
.op-form-card .field-grid.cols-2,
.op-form-card .field-grid.cols-3{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.stock-form-balanced .field-group,
.op-form-card .field-group{
  min-width:0;
}
.stock-form-balanced .fi,
.op-form-card .fi,
.op-form-card .fs{
  width:100%;
  min-width:0;
  max-width:100%;
}
.stock-form-card .btn,
.op-form-card .btn{
  width:auto;
  min-width:180px;
}
.stock-table-card .table-wrap,
.op-table-card .table-wrap{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
@media(max-width:900px){
  .stock-form-balanced .field-grid.cols-2,
  .stock-form-card .field-grid.cols-2,
  .op-form-card .field-grid.cols-2,
  .op-form-card .field-grid.cols-3{
    grid-template-columns:minmax(0,1fr);
  }
  .stock-form-card .btn,
  .op-form-card .btn{
    width:100%;
  }
}

/* FloralID WMS 3.2.18: production reCAPTCHA login rendering */
.recaptcha-box{margin:14px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:78px}
.login-card label:first-of-type{margin-top:0}
.recaptcha-box iframe{max-width:100%}
.recaptcha-box .login-note{margin-top:0}
#floralid-recaptcha-widget{min-height:78px;max-width:100%;overflow:hidden;border-radius:12px}
@media (max-width:420px){.recaptcha-box{transform:scale(.92);transform-origin:left top;margin-bottom:-4px}}

/* v3.2.22 interaction hardening: prevent decorative layers/observers from stealing clicks */
#floralid-wms-root,.wms-shell,.login-wrap,.login-card,.sidebar,.sb-scroll,.main,.topbar,.content{pointer-events:auto;}
button,[role="button"],a,input,select,textarea,label,.sbi,.tbtn,.primary,.btn,.lang-toggle button{pointer-events:auto;cursor:pointer;}
input,select,textarea{cursor:text;}
select,label{cursor:pointer;}
.login-card:before,.sc:after,.admin-guide-card:before,.table-wrap:before,.reddot{pointer-events:none!important;}
.recaptcha-box,#floralid-recaptcha-widget,#floralid-recaptcha-widget iframe{position:relative;z-index:20;pointer-events:auto!important;}
.recaptcha-box{min-height:84px;overflow:visible;}
#floralid-recaptcha-widget{min-height:78px;width:304px;max-width:100%;overflow:visible;}
#floralid-recaptcha-widget iframe{display:block;}
/* v3.2.22 touch-action: desktop sidebar scrolls vertically (pan-y).
   On mobile (≤1100px) the sidebar becomes a horizontal rail so we need pan-x.
   The media-query override is in the v3.3.9 block at the end of this file. */
.sidebar,.sb-scroll{touch-action:pan-y;}

/* 3.2.24 interaction hardening hotfix: keep decorative layers inert and reCAPTCHA stable. */
#floralid-wms-root{position:relative;z-index:1;min-height:100vh;pointer-events:auto!important;}
.login-wrap,.wms-shell,.login-card,.main,.content,.sidebar,.sb-scroll{pointer-events:auto!important;}
.login-card::before,.login-card::after,.brand-mark::before,.brand-mark::after,.sc::after,.kpi::after,.admin-guide-card::before,.admin-guide-card::after,.table-wrap::before,.tbl tbody tr:hover td:first-child::before{pointer-events:none!important;}
button,a,input,select,textarea,label,[data-page],[data-act],[data-op-save],[data-entity-save],[data-entity-delete],[data-op-transition],[data-op-delete],[data-stock],[data-approve],[data-reject],[data-confirm],.sbi,.tbtn,.primary,.btn{pointer-events:auto!important;}
body.floralid-wms-body .sidebar{contain:layout style;}
body.floralid-wms-body .sb-usr{contain:layout paint;}
.recaptcha-box{position:relative;z-index:30;min-height:96px;margin-top:18px;display:block;pointer-events:auto!important;}
#floralid-recaptcha-widget,#floralid-recaptcha-widget>div,#floralid-recaptcha-widget iframe{position:relative;z-index:31;pointer-events:auto!important;}

/* 3.2.24 hotfix: isolate WMS from site-level decorative overlays/cursor scripts. */
body.floralid-wms-body #floralid-sleep-overlay,
body.floralid-wms-body .floralid-sleep-overlay,
body.floralid-wms-body [data-floralid-sleep-overlay]{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
body.floralid-wms-body .login-card,
body.floralid-wms-body .login-wrap,
body.floralid-wms-body #floralid-wms-root{
  transform:none;
  will-change:auto;
}
body.floralid-wms-body #floralid-recaptcha-widget,
body.floralid-wms-body #floralid-recaptcha-widget *,
body.floralid-wms-body #floralid-recaptcha-widget iframe{
  cursor:auto!important;
}

/* 3.2.24 login interaction/layout hardening: keep controls stable and centered. */
body.floralid-wms-body .login-lang{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
body.floralid-wms-body .login-theme-toggle{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel2);
  color:var(--ink);
  box-shadow:0 1px 3px var(--shadow-soft);
  padding:0;
  flex:0 0 auto;
}
body.floralid-wms-body .login-theme-toggle:hover,
body.floralid-wms-body .login-theme-toggle:focus-visible{
  transform:none;
  box-shadow:var(--ring);
}
body.floralid-wms-body .login-card .primary:hover,
body.floralid-wms-body .login-card .btn:hover{
  transform:none;
}
body.floralid-wms-body .recaptcha-box{
  width:100%;
  display:flex!important;
  flex-direction:column;
  align-items:center!important;
  justify-content:center;
  text-align:center;
  margin:18px auto 2px!important;
  min-height:104px;
  overflow:visible!important;
}
body.floralid-wms-body #floralid-recaptcha-widget{
  width:304px;
  max-width:100%;
  margin:0 auto!important;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible!important;
}
body.floralid-wms-body #floralid-recaptcha-widget > div{
  margin:0 auto!important;
}
body.floralid-wms-body .recaptcha-box .login-note{
  width:100%;
  margin-top:6px!important;
  text-align:center;
}
body.floralid-wms-body #floralid-recaptcha-widget,
body.floralid-wms-body #floralid-recaptcha-widget *,
body.floralid-wms-body #floralid-recaptcha-widget iframe{
  cursor:initial!important;
}
@media (max-width:420px){
  body.floralid-wms-body .recaptcha-box{
    transform:none!important;
    margin-bottom:2px!important;
  }
}

/* 3.2.24 sidebar/login layout refinement: stable footer user card + centered login copy. */
body.floralid-wms-body .login-card > .login-note:last-child{
  max-width:380px;
  margin:16px auto 0!important;
  text-align:center;
}
body.floralid-wms-body .login-card > .primary + .login-note{
  display:block;
  max-width:380px;
  margin:16px auto 0!important;
  text-align:center;
}
body.floralid-wms-body .sidebar{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  overflow:hidden!important;
  padding:0!important;
}
body.floralid-wms-body .sb-logo{
  margin:0!important;
  padding:18px 20px!important;
  background:var(--panel);
  position:relative;
  z-index:2;
}
body.floralid-wms-body .sb-scroll{
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:14px 18px 18px!important;
  scrollbar-gutter:stable both-edges;
}
body.floralid-wms-body .sb-usr{
  flex:0 0 auto;
  margin:0!important;
  padding:18px 20px!important;
  border:0!important;
  border-top:2px solid var(--line)!important;
  border-radius:0!important;
  background:var(--panel)!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  position:relative;
  z-index:2;
}
body.floralid-wms-body .sb-usr .ava{
  flex:0 0 44px;
  width:44px;
  height:44px;
  box-shadow:0 2px 6px rgba(16,185,129,.12);
}
body.floralid-wms-body .sb-user-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
}
body.floralid-wms-body .sb-un{
  max-width:178px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.2;
}
body.floralid-wms-body .sb-ur{
  max-width:178px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font:800 11px/1.2 var(--font-mono);
  color:var(--muted);
  text-transform:lowercase;
}
/* v3.3.7 — Removed the legacy `display:none!important` mobile-sidebar override.
   It was added before v3.3.6 introduced the horizontal swipeable nav, and its
   higher specificity (`body.floralid-wms-body .sidebar`) was silently winning
   against the v3.3.6 responsive bar block further down this file — making the
   mobile menu invisible. The horizontal-nav block (see end of file) now
   carries the same `body.floralid-wms-body` prefix so it both wins and stays
   immune to future high-specificity overrides. */
@media(max-width:1100px){
  /* intentionally empty — see the v3.3.7 horizontal-nav block at end of file */
}

/* 3.2.24 admin settings + sidebar role badge refinement. */
body.floralid-wms-body .static-field{
  min-height:54px;
  display:flex;
  align-items:center;
  background:var(--panel2);
  cursor:default!important;
}
body.floralid-wms-body .role-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:100%;
  min-height:26px;
  padding:5px 10px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:var(--soft);
  color:var(--ink);
  font:900 11px/1 var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  white-space:nowrap;
}
body.floralid-wms-body .sb-ur{
  text-transform:none!important;
  overflow:visible!important;
}
body.floralid-wms-body .sb-ur .role-badge{
  max-width:178px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* FloralID WMS reusable searchable dropdown (v3.2.24 hardening) */
.wms-native-select{position:absolute!important;width:1px!important;height:1px!important;min-height:1px!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;overflow:hidden!important;white-space:nowrap!important;}
.wms-select{position:relative;width:100%;min-width:0;z-index:1;}
.wms-select.open{z-index:1000;}
.wms-select-trigger{width:100%;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border:1px solid var(--line);border-radius:18px;background:var(--panel2);color:var(--ink);box-shadow:0 1px 4px var(--shadow-soft);font:700 14px var(--font-body);line-height:1.35;text-align:left;outline:0;cursor:pointer;transition:box-shadow .16s ease,transform .16s ease,background .16s ease;}
.wms-select-trigger:hover{transform:translateY(-1px);box-shadow:0 2px 8px var(--shadow-soft);}
.wms-select-trigger:focus-visible,.wms-select.open .wms-select-trigger{box-shadow:var(--ring);}
.wms-select-value{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);}
.wms-select:not(.has-value) .wms-select-value{color:var(--muted);opacity:.82;}
.wms-select-chev{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border:1px solid var(--line);border-radius:999px;background:var(--brand);box-shadow:0 1px 3px var(--shadow-soft);font-weight:950;line-height:1;transition:transform .16s ease;}
.wms-select.open .wms-select-chev{transform:rotate(180deg);}
.wms-select-panel{position:absolute;left:0;right:0;top:calc(100% + 8px);display:none;padding:10px;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:0 4px 16px var(--shadow-color);max-height:min(340px,52vh);overflow:hidden;z-index:1001;}
.wms-select.open .wms-select-panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;}
.wms-select-search-wrap{position:relative;}
.wms-select-search{width:100%;height:44px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);color:var(--ink);padding:10px 12px;outline:0;font:700 13px var(--font-body);box-shadow:0 1px 3px var(--shadow-soft);cursor:text;}
.wms-select-search::placeholder{color:var(--muted);opacity:.72;}
.wms-select-search:focus{box-shadow:var(--ring);}
.wms-select-list{display:grid;gap:6px;max-height:240px;overflow:auto;padding:2px 2px 4px;scrollbar-width:thin;}
.wms-select-option{width:100%;display:flex;align-items:center;gap:10px;min-height:42px;padding:9px 10px;border:2px solid transparent;border-radius:14px;background:transparent;color:var(--ink);text-align:left;font:800 14px var(--font-body);cursor:pointer;}
.wms-select-option:hover,.wms-select-option:focus-visible{background:var(--soft);border-color:var(--line);outline:0;}
.wms-select-option[aria-selected="true"]{background:var(--brand);border-color:var(--line);box-shadow:0 1px 3px var(--shadow-soft);}
.wms-select-dot{width:10px;height:10px;border:1px solid var(--line);border-radius:999px;background:var(--panel2);flex:0 0 10px;}
.wms-select-option[aria-selected="true"] .wms-select-dot{background:var(--ink);}
.wms-select-empty{padding:12px 10px;color:var(--muted);font-weight:800;text-align:center;}
html[data-theme="dark"] .wms-select-panel{background:var(--panel);}
html[data-theme="dark"] .wms-select-trigger,html[data-theme="dark"] .wms-select-search{background:var(--panel2);color:var(--ink);}
@media(max-width:680px){.wms-select-panel{position:fixed;left:16px;right:16px;top:auto;bottom:16px;max-height:62vh;border-radius:24px;padding:12px}.wms-select-list{max-height:42vh}.wms-select-option{min-height:46px}.wms-select-trigger{min-height:54px}}

/* User creation password generator (v3.2.24 hardening) */
body.floralid-wms-body .password-inline{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
body.floralid-wms-body .password-inline .fi{
  width:100%;
  min-width:0;
}
body.floralid-wms-body .pass-gen-btn{
  width:50px;
  min-width:50px;
  height:50px;
  padding:0!important;
  display:inline-grid;
  place-items:center;
  border-radius:16px;
  font-size:20px;
  line-height:1;
}
body.floralid-wms-body .user-create-grid .field-group{
  min-width:0;
}
@media(max-width:760px){
  body.floralid-wms-body .password-inline{grid-template-columns:1fr;}
  body.floralid-wms-body .pass-gen-btn{width:100%;}
}


/* User & Role form layout hardening (v3.2.24) */
body.floralid-wms-body .user-role-workspace{
  display:grid;
  grid-template-columns:minmax(360px,.92fr) minmax(420px,1.08fr);
  gap:22px;
  align-items:start;
  margin-top:22px;
}
body.floralid-wms-body .user-create-card{
  overflow:visible;
}
body.floralid-wms-body .user-create-card .ch{
  margin-bottom:18px;
}
body.floralid-wms-body .user-create-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:start;
  margin:0;
}
body.floralid-wms-body .user-create-grid .field-group{
  min-width:0;
}
body.floralid-wms-body .user-create-grid .username-field{grid-column:1/2;grid-row:1;}
body.floralid-wms-body .user-create-grid .password-field{grid-column:2/3;grid-row:1;}
body.floralid-wms-body .user-create-grid .fullname-field{grid-column:1/2;grid-row:2;}
body.floralid-wms-body .user-create-grid .email-field{grid-column:2/3;grid-row:2;}
body.floralid-wms-body .user-create-grid .role-field{grid-column:1/2;grid-row:3;}
body.floralid-wms-body .user-create-card .form-actions{
  margin-top:20px;
  display:flex;
  justify-content:flex-start;
}
body.floralid-wms-body .user-create-card .form-actions .btn{
  margin-top:0;
}
body.floralid-wms-body .users-card{
  min-width:0;
}
body.floralid-wms-body .password-inline{
  display:grid;
  grid-template-columns:minmax(0,1fr) 54px;
  gap:10px;
  align-items:center;
}
body.floralid-wms-body .password-inline .fi{
  width:100%;
  min-width:0;
}
body.floralid-wms-body .pass-gen-btn{
  width:54px;
  min-width:54px;
  height:54px;
  margin:0!important;
  padding:0!important;
  display:inline-grid;
  place-items:center;
  border-radius:16px;
  font-size:20px;
  line-height:1;
}
@media(max-width:1260px){
  body.floralid-wms-body .user-role-workspace{grid-template-columns:1fr;}
}
@media(max-width:760px){
  body.floralid-wms-body .user-create-grid{grid-template-columns:1fr;}
  body.floralid-wms-body .user-create-grid .username-field,
  body.floralid-wms-body .user-create-grid .password-field,
  body.floralid-wms-body .user-create-grid .fullname-field,
  body.floralid-wms-body .user-create-grid .email-field,
  body.floralid-wms-body .user-create-grid .role-field{grid-column:1;grid-row:auto;}
  body.floralid-wms-body .password-inline{grid-template-columns:minmax(0,1fr) 52px;}
}

/* FloralID WMS custom checkbox UI kit (role permission matrix hardening) */
body.floralid-wms-body .sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
body.floralid-wms-body .perm-cell{
  text-align:center;
  vertical-align:middle;
}
body.floralid-wms-body .wms-check{
  --check-size:24px;
  --check-shadow:3px 3px 0 var(--shadow-soft);
  display:inline-grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:14px;
  cursor:pointer!important;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  position:relative;
  isolation:isolate;
}
body.floralid-wms-body .wms-check input[type="checkbox"]{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  opacity:0!important;
  cursor:pointer!important;
  z-index:2;
}
body.floralid-wms-body .wms-check-box{
  width:var(--check-size);
  height:var(--check-size);
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel2);
  box-shadow:var(--check-shadow);
  transform:translateY(0) scale(1);
  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .12s cubic-bezier(.2,.9,.2,1.15);
  position:relative;
  z-index:1;
  overflow:hidden;
}
body.floralid-wms-body .wms-check-box::after{
  content:"";
  position:absolute;
  inset:50%;
  width:4px;
  height:4px;
  border-radius:999px;
  background:rgba(16,185,129,.34);
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  pointer-events:none;
}
body.floralid-wms-body .wms-check-svg{
  width:18px;
  height:18px;
  display:block;
  overflow:visible;
}
body.floralid-wms-body .wms-check-mark{
  fill:none;
  stroke:var(--panel2);
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:22;
  stroke-dashoffset:22;
  transition:stroke-dashoffset .22s cubic-bezier(.16,1,.3,1) .05s;
}
body.floralid-wms-body .wms-check:hover .wms-check-box{
  transform:translateY(-1px) scale(1.04);
  box-shadow:0 1px 4px var(--shadow-soft);
}
body.floralid-wms-body .wms-check:active .wms-check-box{
  transform:translateY(1px) scale(.94);
  box-shadow:0 1px 2px var(--shadow-soft);
}
body.floralid-wms-body .wms-check input[type="checkbox"]:focus-visible + .wms-check-box{
  outline:0;
  box-shadow:var(--ring), var(--check-shadow);
}
body.floralid-wms-body .wms-check input[type="checkbox"]:checked + .wms-check-box{
  background:var(--brand);
  border-color:var(--line);
  transform:scale(1.02);
  animation:wmsCheckPop .22s cubic-bezier(.2,.9,.2,1.3);
}
body.floralid-wms-body .wms-check input[type="checkbox"]:checked + .wms-check-box::after{
  animation:wmsCheckRipple .38s ease-out;
}
body.floralid-wms-body .wms-check input[type="checkbox"]:checked + .wms-check-box .wms-check-mark{
  stroke-dashoffset:0;
}
body.floralid-wms-body .wms-check input[type="checkbox"]:disabled{
  cursor:not-allowed!important;
}
body.floralid-wms-body .wms-check input[type="checkbox"]:disabled + .wms-check-box{
  opacity:.46;
  filter:grayscale(.45);
  box-shadow:none;
}
html[data-theme="dark"] body.floralid-wms-body .wms-check-box{
  background:var(--panel2);
}
html[data-theme="dark"] body.floralid-wms-body .wms-check input[type="checkbox"]:checked + .wms-check-box{
  background:var(--brand);
}
@keyframes wmsCheckPop{
  0%{transform:scale(.86) rotate(-4deg)}
  62%{transform:scale(1.14) rotate(2deg)}
  100%{transform:scale(1.02) rotate(0)}
}
@keyframes wmsCheckRipple{
  0%{opacity:.45;transform:translate(-50%,-50%) scale(0)}
  70%{opacity:.16;transform:translate(-50%,-50%) scale(11)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(14)}
}
@media (prefers-reduced-motion:reduce){
  body.floralid-wms-body .wms-check-box,
  body.floralid-wms-body .wms-check-mark{
    transition:none!important;
    animation:none!important;
  }
  body.floralid-wms-body .wms-check input[type="checkbox"]:checked + .wms-check-box::after{
    animation:none!important;
  }
}

/* 3.2.24 sidebar dark-hover icon correction: keep icon tokenized, readable, and stable. */
body.floralid-wms-body .sb-scroll .sbi,
body.floralid-wms-body .sb-scroll .sbi .ico,
body.floralid-wms-body .sb-scroll .sbi .ico svg{
  transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
body.floralid-wms-body .sb-scroll .sbi:hover,
body.floralid-wms-body .sb-scroll .sbi:focus-visible{
  cursor:pointer;
}
body.floralid-wms-body .sb-scroll .sbi:hover .ico,
body.floralid-wms-body .sb-scroll .sbi:focus-visible .ico,
body.floralid-wms-body .sb-scroll .sbi.active .ico{
  background:var(--ink)!important;
  color:var(--panel)!important;
  border-color:var(--ink)!important;
  box-shadow:none!important;
}
body.floralid-wms-body .sb-scroll .sbi:hover .ico svg,
body.floralid-wms-body .sb-scroll .sbi:focus-visible .ico svg,
body.floralid-wms-body .sb-scroll .sbi.active .ico svg{
  color:inherit!important;
  fill:currentColor!important;
  stroke:currentColor!important;
}
html[data-theme="dark"] body.floralid-wms-body .sb-scroll .sbi:hover,
html[data-theme="dark"] body.floralid-wms-body .sb-scroll .sbi:focus-visible,
html[data-theme="dark"] body.floralid-wms-body .sb-scroll .sbi.active{
  background:var(--brand)!important;
  color:#111827!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] body.floralid-wms-body .sb-scroll .sbi:hover .ico,
html[data-theme="dark"] body.floralid-wms-body .sb-scroll .sbi:focus-visible .ico,
html[data-theme="dark"] body.floralid-wms-body .sb-scroll .sbi.active .ico{
  background:#111827!important;
  color:#fff7fb!important;
  border-color:#111827!important;
}
html[data-theme="dark"] body.floralid-wms-body .sb-scroll .sbi:not(:hover):not(:focus-visible):not(.active) .ico{
  background:var(--panel2)!important;
  color:var(--ink)!important;
  border-color:var(--line)!important;
}

/* Loading Overlay — v3.2.25 */
/* ── v3.3.19 Flower-wheel loader ────────────────────────────────────────
   The brand's Floralid flower SVG spins with realistic momentum easing
   (fast-out-slow-in → fast-out-slow-in) so it feels like a weighted wheel
   rather than a machine. Surrounding the flower: a conic-gradient flare
   ring that sweeps like a solar corona, and a radial glow that breathes
   in sync. The entire composition is compact (100px diameter) and GPU-
   composited (only transform + opacity animate, no repaints).
   ─────────────────────────────────────────────────────────────────── */

/* ── Backdrop ── */
.wms-loading-overlay{
  position:fixed;inset:0;z-index:99999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(10,18,32,.42);
  backdrop-filter:blur(10px) saturate(1.6);
  -webkit-backdrop-filter:blur(10px) saturate(1.6);
  opacity:0;pointer-events:none;
  transition:opacity .24s cubic-bezier(.4,0,.2,1);
}
html[data-theme="light"] .wms-loading-overlay{background:rgba(236,253,245,.58)}
.wms-loading-overlay.active{opacity:1;pointer-events:auto}

/* ── Outer wrapper: contains the flare ring + flower ── */
.wms-loading-wheel{
  position:relative;
  width:100px;height:100px;
  display:grid;place-items:center;
}

/* ── Conic flare ring (canvas layer behind flower) ──
   A hard-masked conic gradient that rotates at the same cadence as the
   flower, but its own conic sweep gives the impression of a bright hot-
   spot chasing the petals around — the "flare" effect.               */
.wms-loading-flare{
  position:absolute;inset:0;
  border-radius:50%;
  /* Conic sweep: bright brand-green arc → fade to transparent */
  background:conic-gradient(
    from 0deg,
    transparent          0deg,
    transparent         200deg,
    rgba(16,185,129,.08) 230deg,
    rgba(16,185,129,.28) 270deg,
    rgba(52,211,153,.55) 300deg,
    rgba(52,211,153,.85) 330deg,
    rgba(255,255,255,.4) 350deg,
    rgba(52,211,153,.6)  358deg,
    transparent         360deg
  );
  /* Mask: keep only the outermost ring (between r=42px and r=50px) */
  -webkit-mask:radial-gradient(circle,transparent 40px,#000 41px,#000 50px,transparent 51px);
  mask:radial-gradient(circle,transparent 40px,#000 41px,#000 50px,transparent 51px);
  animation:wmsFlareOrbit 1.6s cubic-bezier(.45,.05,.55,.95) infinite;
  will-change:transform;
}
@keyframes wmsFlareOrbit{
  0%   {transform:rotate(  0deg)}
  100% {transform:rotate(360deg)}
}

/* Second flare pass at offset phase — creates depth / counter-corona */
.wms-loading-flare2{
  position:absolute;inset:4px;
  border-radius:50%;
  background:conic-gradient(
    from 180deg,
    transparent          0deg,
    transparent         220deg,
    rgba(16,185,129,.04) 250deg,
    rgba(16,185,129,.14) 290deg,
    rgba(52,211,153,.28) 330deg,
    transparent         360deg
  );
  -webkit-mask:radial-gradient(circle,transparent 36px,#000 37px,#000 46px,transparent 47px);
  mask:radial-gradient(circle,transparent 36px,#000 37px,#000 46px,transparent 47px);
  animation:wmsFlareOrbit2 2.4s cubic-bezier(.45,.05,.55,.95) infinite reverse;
  will-change:transform;
}
@keyframes wmsFlareOrbit2{
  0%   {transform:rotate(  0deg)}
  100% {transform:rotate(360deg)}
}

/* Outer glow halo that breathes — makes the loader feel warm/alive */
.wms-loading-glow{
  position:absolute;inset:-8px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(16,185,129,.22) 30%,transparent 70%);
  animation:wmsGlowBreath 1.6s ease-in-out infinite;
  will-change:opacity,transform;
}
@keyframes wmsGlowBreath{
  0%,100%{opacity:.6;transform:scale(.92)}
  50%    {opacity:1; transform:scale(1.06)}
}

/* ── Flower wrapper ──
   The flower SVG itself lives here. We apply the wheel-momentum spin
   directly via the .wms-loader-flower animation — separate from the
   .wms-flower-spin group animation that runs on sidebars/boot screens,
   so the loader has its own cadence without touching global logo rules. */
.wms-loading-flower-wrap{
  position:relative;z-index:2;
  width:62px;height:62px;
  display:grid;place-items:center;
}
.wms-loading-flower-wrap .wms-flower-logo{
  width:100%!important;height:100%!important;
  animation:wmsWheelSpin 1.6s cubic-bezier(.45,.05,.55,.95) infinite!important;
  will-change:transform;
  filter:drop-shadow(0 0 6px rgba(16,185,129,.5));
}
/* Realistic wheel: accelerates fast then eases out, like a flywheel.
   cubic-bezier(.45,.05,.55,.95) gives the "has mass" feel. */
@keyframes wmsWheelSpin{
  0%   {transform:rotate(  0deg)}
  100% {transform:rotate(360deg)}
}
/* When the petal paths are inside the loader, boost brightness slightly */
.wms-loading-flower-wrap .petal-primary{
  fill:var(--brand,#10b981);
  filter:brightness(1.08);
}
.wms-loading-flower-wrap .petal-shade{fill:var(--floral-logo-petal-shade,rgba(16,185,129,.78));}
.wms-loading-flower-wrap .petal-depth{fill:var(--floral-logo-petal-depth,rgba(16,185,129,.6));}
.wms-loading-flower-wrap .flower-core{fill:#fff;opacity:.9;}
.wms-loading-flower-wrap .flower-core-shade{fill:rgba(255,255,255,.6);}
/* Suppress the default .wms-flower-spin group rotation inside the loader —
   the outer wrapper handles the full-logo spin instead */
.wms-loading-flower-wrap .wms-flower-spin{
  animation:none!important;
  transform:none!important;
}

/* ── Label ── */
.wms-loading-msg{
  margin-top:18px;
  font-family:var(--font-ui,inherit);
  font-size:11.5px;font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted,#94a3b8);
  text-align:center;
  max-width:180px;line-height:1.45;
  animation:wmsMsgPulse 1.6s ease-in-out infinite;
}
@keyframes wmsMsgPulse{0%,100%{opacity:.55}50%{opacity:1}}
html[data-theme="light"] .wms-loading-msg{color:var(--muted,#64748b)}

@media (prefers-reduced-motion:reduce){
  .wms-loading-flare,.wms-loading-flare2,.wms-loading-glow,
  .wms-loading-flower-wrap .wms-flower-logo{
    animation:none!important;
  }
}

/* 3.2.27 dropdown hardening: replace native select visually with stable WMS UI */
select.wms-native-select,
.wms-native-select{
  position:absolute!important;
  inset:auto!important;
  width:1px!important;
  height:1px!important;
  min-width:1px!important;
  min-height:1px!important;
  padding:0!important;
  margin:-1px!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
.wms-select{position:relative;width:100%;min-width:0;z-index:1;}
.wms-select.open{z-index:1000;}
.wms-select-trigger{appearance:none;-webkit-appearance:none;width:100%;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px 13px 16px;border:1px solid var(--line);border-radius:18px;background:var(--panel2);color:var(--ink);box-shadow:0 1px 4px var(--shadow-soft);font:800 14px var(--font-body);line-height:1.35;text-align:left;outline:0;cursor:pointer;transition:box-shadow .16s ease,transform .16s ease,background .16s ease,border-color .16s ease;}
.wms-select-trigger:hover{transform:translateY(-1px);box-shadow:0 2px 8px var(--shadow-soft);}
.wms-select-trigger:active{transform:translateY(0);box-shadow:0 1px 3px var(--shadow-soft);}
.wms-select-trigger:focus-visible,.wms-select.open .wms-select-trigger{box-shadow:var(--ring);}
.wms-select-value{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);}
.wms-select:not(.has-value) .wms-select-value{color:var(--muted);opacity:.82;}
.wms-select-chev{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border:1px solid var(--line);border-radius:999px;background:var(--brand);color:var(--ink);box-shadow:0 1px 3px var(--shadow-soft);transition:transform .18s cubic-bezier(.2,.9,.25,1.35),background .16s ease,color .16s ease;}
.wms-select-chev-svg{display:block;transition:transform .18s cubic-bezier(.2,.9,.25,1.35);}
.wms-select.open .wms-select-chev-svg{transform:rotate(180deg);}
.wms-select.just-selected .wms-select-chev{animation:wmsSelectPop .22s ease both;}
@keyframes wmsSelectPop{0%{transform:scale(.96)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
.wms-select-panel{position:absolute;left:0;right:0;top:calc(100% + 10px);display:none;padding:10px;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:0 4px 20px var(--shadow-color);max-height:min(360px,52vh);overflow:hidden;z-index:1001;}
.wms-select.open .wms-select-panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;}
.wms-select-search-wrap{position:relative;}
.wms-select-search{width:100%;height:44px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);color:var(--ink);padding:10px 12px;outline:0;font:800 13px var(--font-body);box-shadow:0 1px 3px var(--shadow-soft);cursor:text;}
.wms-select-search::placeholder{color:var(--muted);opacity:.72;}
.wms-select-search:focus{box-shadow:var(--ring);}
.wms-select-list{display:grid;gap:6px;max-height:250px;overflow:auto;padding:2px 2px 4px;scrollbar-width:thin;}
.wms-select-option{width:100%;display:flex;align-items:center;gap:10px;min-height:42px;padding:9px 10px;border:2px solid transparent;border-radius:14px;background:transparent;color:var(--ink);text-align:left;font:850 14px var(--font-body);cursor:pointer;transition:background .14s ease,border-color .14s ease,transform .14s ease;}
.wms-select-option:hover,.wms-select-option:focus-visible{background:var(--soft);border-color:var(--line);outline:0;transform:translateX(1px);}
.wms-select-option[aria-selected="true"]{background:var(--brand);border-color:var(--line);box-shadow:0 1px 3px var(--shadow-soft);}
.wms-select-dot{width:18px;height:18px;border:1px solid var(--line);border-radius:999px;background:var(--panel2);color:transparent;display:grid;place-items:center;flex:0 0 18px;transition:background .14s ease,color .14s ease,transform .14s ease;}
.wms-select-option[aria-selected="true"] .wms-select-dot{background:var(--ink);color:var(--panel);transform:scale(1.04);}
.wms-select-option-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wms-select-empty{padding:12px 10px;color:var(--muted);font-weight:850;text-align:center;}
html[data-theme="dark"] .wms-select-trigger,
html[data-theme="dark"] .wms-select-search{background:var(--panel2);color:var(--ink);}
html[data-theme="dark"] .wms-select-panel{background:var(--panel);}
html[data-theme="dark"] .wms-select-chev{background:var(--brand);color:var(--ink);}
@media(max-width:680px){.wms-select-panel{position:fixed;left:16px;right:16px;top:auto;bottom:16px;max-height:62vh;border-radius:24px;padding:12px}.wms-select-list{max-height:42vh}.wms-select-option{min-height:46px}.wms-select-trigger{min-height:54px}}
@media(prefers-reduced-motion:reduce){.wms-select-trigger,.wms-select-chev,.wms-select-chev-svg,.wms-select-option,.wms-select-dot{transition:none!important;animation:none!important}}


/* v3.2.27 floral SVG identity: uploaded flower logo + smooth wheel animation. */
.flower,.brand-mark,.sb-logo-ico{
  overflow:hidden;
  isolation:isolate;
}
.brand-mark .bi,.sb-logo-ico .bi{
  display:none;
}
.wms-flower-logo{
  width:78%;
  height:78%;
  display:block;
  transform-origin:50% 50%;
  animation:floralidLogoWheel 16s linear infinite;
  will-change:transform;
  contain:paint;
}
.brand-mark .wms-flower-logo{
  width:82%;
  height:82%;
}
.sb-logo-ico .wms-flower-logo{
  width:80%;
  height:80%;
}
.wms-boot .wms-flower-logo{
  width:80%;
  height:80%;
}
@keyframes floralidLogoWheel{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .wms-flower-logo{animation:none!important;transform:none!important;}
}

/* v3.2.27 identity header precision: match requested compact sidebar brand lockup. */
body.floralid-wms-body .sidebar .sb-logo{
  position:relative;
  top:auto;
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  flex:0 0 auto;
  min-height:82px;
  margin:0;
  padding:18px 20px 18px 20px;
  border-bottom:1px solid var(--line);
  border-radius:calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
  background:var(--glass-logo);
  box-shadow:none;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  overflow:visible;
}
body.floralid-wms-body .sidebar .sb-logo-ico{
  flex:0 0 46px;
  width:46px;
  height:46px;
  margin:0;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--ink);
  box-shadow:0 2px 12px var(--shadow-soft);
  display:grid;
  place-items:center;
  overflow:visible;
  isolation:isolate;
}
body.floralid-wms-body .sidebar .sb-logo-ico .wms-flower-logo{
  width:46px;
  height:46px;
  display:block;
  transform-origin:50% 50%;
}
body.floralid-wms-body .sidebar .sb-logo > div:not(.sb-logo-ico){
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  transform:translateY(1px);
}
body.floralid-wms-body .sidebar .sb-logo-t{
  font-family:var(--font-display);
  font-size:25px;
  line-height:.92;
  font-weight:900;
  letter-spacing:-.065em;
  white-space:nowrap;
  color:var(--ink);
  text-transform:none;
}
body.floralid-wms-body .sidebar .sb-logo-s{
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
html[data-theme="dark"] body.floralid-wms-body .sidebar .sb-logo{
  background:var(--glass-logo);
  box-shadow:none;
}
html[data-theme="dark"] body.floralid-wms-body .sidebar .sb-logo-ico{
  box-shadow:0 2px 12px var(--shadow-soft);
}
@media(max-width:360px){
  body.floralid-wms-body .sidebar .sb-logo{padding-inline:16px;gap:10px;}
  body.floralid-wms-body .sidebar .sb-logo-t{font-size:22px;}
  body.floralid-wms-body .sidebar .sb-logo-s{font-size:10px;}
}

/* v3.2.27 custom scrollbar finalization: thumb-only, no track wrapper, no arrows */
:root{
  --wms-scrollbar-size: 8px;
  --wms-scrollbar-radius: 999px;
  --wms-scrollbar-thumb: var(--brand);
  --wms-scrollbar-thumb-hover: var(--brand2);
  --wms-scrollbar-thumb-active: var(--ink);
}
html[data-theme="dark"]{
  --wms-scrollbar-thumb: var(--brand);
  --wms-scrollbar-thumb-hover: #f3a5bd;
  --wms-scrollbar-thumb-active: #fff4f8;
}
html,
body,
.wms-shell,
.sidebar,
.sb-scroll,
.main,
.content,
.table-wrap,
.wms-select-list,
.modal-body,
.drawer-body,
textarea{
  scrollbar-width: thin;
  scrollbar-color: var(--wms-scrollbar-thumb) transparent;
}
.sidebar,
.sb-scroll,
.content,
.table-wrap,
.wms-select-list,
.modal-body,
.drawer-body{
  scrollbar-gutter: auto !important;
}
*::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.sb-scroll::-webkit-scrollbar,
.content::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.wms-select-list::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.drawer-body::-webkit-scrollbar,
textarea::-webkit-scrollbar{
  width: var(--wms-scrollbar-size) !important;
  height: var(--wms-scrollbar-size) !important;
  background: transparent !important;
}
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track-piece,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.sb-scroll::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.wms-select-list::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.drawer-body::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
*::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.sb-scroll::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.wms-select-list::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.drawer-body::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb{
  min-height: 42px;
  min-width: 42px;
  background: var(--wms-scrollbar-thumb) !important;
  border: 0 !important;
  border-radius: var(--wms-scrollbar-radius) !important;
  box-shadow: none !important;
}
*::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.sb-scroll::-webkit-scrollbar-thumb:hover,
.content::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover,
.wms-select-list::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.drawer-body::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover{
  background: var(--wms-scrollbar-thumb-hover) !important;
}
*::-webkit-scrollbar-thumb:active,
html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
.sidebar::-webkit-scrollbar-thumb:active,
.sb-scroll::-webkit-scrollbar-thumb:active,
.content::-webkit-scrollbar-thumb:active,
.table-wrap::-webkit-scrollbar-thumb:active,
.wms-select-list::-webkit-scrollbar-thumb:active,
.modal-body::-webkit-scrollbar-thumb:active,
.drawer-body::-webkit-scrollbar-thumb:active,
textarea::-webkit-scrollbar-thumb:active{
  background: var(--wms-scrollbar-thumb-active) !important;
}
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-corner,
*::-webkit-resizer,
html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
.sidebar::-webkit-scrollbar-button,
.sb-scroll::-webkit-scrollbar-button,
.content::-webkit-scrollbar-button,
.table-wrap::-webkit-scrollbar-button,
.wms-select-list::-webkit-scrollbar-button,
.modal-body::-webkit-scrollbar-button,
.drawer-body::-webkit-scrollbar-button,
textarea::-webkit-scrollbar-button{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}
*::-webkit-scrollbar-corner,
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
.sidebar::-webkit-scrollbar-corner,
.sb-scroll::-webkit-scrollbar-corner,
.content::-webkit-scrollbar-corner,
.table-wrap::-webkit-scrollbar-corner,
.wms-select-list::-webkit-scrollbar-corner,
.modal-body::-webkit-scrollbar-corner,
.drawer-body::-webkit-scrollbar-corner,
textarea::-webkit-scrollbar-corner{
  background: transparent !important;
}
@media (pointer: coarse){
  :root{--wms-scrollbar-size: 4px;}
}

/* v3.2.27 logo token correction: no brutalist chip/shadow, token-driven inline flower. */
:root{
  --floral-logo-petal: var(--brand);
  --floral-logo-petal-shade: color-mix(in srgb, var(--brand) 78%, var(--ink) 22%);
  --floral-logo-petal-depth: color-mix(in srgb, var(--brand) 64%, var(--ink) 36%);
  --floral-logo-core: var(--soft);
  --floral-logo-core-shade: color-mix(in srgb, var(--soft) 72%, var(--brand) 28%);
}
html[data-theme="dark"]{
  --floral-logo-petal: var(--brand);
  --floral-logo-petal-shade: color-mix(in srgb, var(--brand) 78%, var(--panel) 22%);
  --floral-logo-petal-depth: color-mix(in srgb, var(--brand) 58%, var(--panel) 42%);
  --floral-logo-core: var(--soft);
  --floral-logo-core-shade: color-mix(in srgb, var(--soft) 60%, var(--brand) 40%);
}
body.floralid-wms-body .flower,
body.floralid-wms-body .brand-mark,
body.floralid-wms-body .sb-logo-ico,
html[data-theme="dark"] body.floralid-wms-body .flower,
html[data-theme="dark"] body.floralid-wms-body .brand-mark,
html[data-theme="dark"] body.floralid-wms-body .sb-logo-ico,
html[data-theme="dark"] body.floralid-wms-body .sidebar .sb-logo-ico,
body.floralid-wms-body .sidebar .sb-logo-ico{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:0!important;
  margin:0;
  overflow:visible!important;
  isolation:isolate;
}
body.floralid-wms-body .wms-boot .flower{
  width:72px!important;
  height:72px!important;
  margin-inline:auto!important;
  display:grid!important;
  place-items:center!important;
}
body.floralid-wms-body .brand-mark{
  flex:0 0 56px;
  width:56px!important;
  height:56px!important;
  display:grid!important;
  place-items:center!important;
}
body.floralid-wms-body .sidebar .sb-logo-ico{
  flex:0 0 46px!important;
  width:46px!important;
  height:46px!important;
  display:grid!important;
  place-items:center!important;
}
body.floralid-wms-body .wms-flower-logo{
  width:100%!important;
  height:100%!important;
  display:block;
  overflow:visible;
  contain:paint;
}
body.floralid-wms-body .wms-flower-logo .petal-primary{fill:var(--floral-logo-petal);}
body.floralid-wms-body .wms-flower-logo .petal-shade{fill:var(--floral-logo-petal-shade);}
body.floralid-wms-body .wms-flower-logo .petal-depth{fill:var(--floral-logo-petal-depth);}
body.floralid-wms-body .wms-flower-logo .flower-core{fill:var(--floral-logo-core);}
body.floralid-wms-body .wms-flower-logo .flower-core-shade{fill:var(--floral-logo-core-shade);}
body.floralid-wms-body .wms-flower-logo .wms-flower-spin{
  transform-origin:50% 50%;
  animation:floralidLogoWheel 16s linear infinite;
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  body.floralid-wms-body .wms-flower-logo,
  body.floralid-wms-body .wms-flower-logo .wms-flower-spin{animation:none!important;transform:none!important;}
}

/* 3.2.27 header action icon correction: uniform one-tone SVG strokes */
.topbar .tbtn svg.bi-action,
.login-theme-toggle svg.bi-action{
  width:20px!important;
  height:20px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.05!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  vector-effect:non-scaling-stroke;
}
.topbar .tbtn svg.bi-action *,
.login-theme-toggle svg.bi-action *{
  fill:none!important;
  stroke:currentColor!important;
  vector-effect:non-scaling-stroke;
}
.topbar .tbtn{
  overflow:visible;
}
.topbar .tbtn:hover svg.bi-action,
.topbar .tbtn:focus-visible svg.bi-action,
.login-theme-toggle:hover svg.bi-action,
.login-theme-toggle:focus-visible svg.bi-action{
  transform:translateY(-.5px);
}
@media (prefers-reduced-motion: reduce){
  .topbar .tbtn svg.bi-action,
  .login-theme-toggle svg.bi-action{transition:none!important;transform:none!important;}
}

/* v3.2.29 final UI/UX form polish: stable professional form grids with notes/help text */
body.floralid-wms-body .wms-polished-form,
body.floralid-wms-body .form-card,
body.floralid-wms-body .stock-form-card,
body.floralid-wms-body .op-form-card{
  overflow:visible;
}
body.floralid-wms-body .wms-polished-form .ch,
body.floralid-wms-body .form-card .ch{
  align-items:flex-start;
  gap:16px;
}
body.floralid-wms-body .wms-polished-form .ct,
body.floralid-wms-body .form-card .ct{
  line-height:1.2;
}
body.floralid-wms-body .wms-polished-form .field-grid,
body.floralid-wms-body .form-card .field-grid,
body.floralid-wms-body .stock-form-card .field-grid,
body.floralid-wms-body .op-form-card .field-grid{
  align-items:start!important;
  gap:20px 22px;
}
body.floralid-wms-body .wms-polished-form .field-group,
body.floralid-wms-body .form-card .field-group,
body.floralid-wms-body .stock-form-card .field-group,
body.floralid-wms-body .op-form-card .field-group{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  min-width:0;
}
body.floralid-wms-body .fl{
  min-height:18px;
  line-height:1.25;
  letter-spacing:.055em;
  word-break:normal;
  overflow-wrap:normal;
}
body.floralid-wms-body .field-group .fi,
body.floralid-wms-body .field-group input.fi,
body.floralid-wms-body .field-group select.fi,
body.floralid-wms-body .field-group textarea.fi,
body.floralid-wms-body .wms-select-trigger{
  width:100%;
  min-width:0;
  min-height:56px;
  box-sizing:border-box;
  line-height:1.35;
}
body.floralid-wms-body .field-group > .c-m,
body.floralid-wms-body .form-help{
  display:block;
  margin:2px 0 0;
  max-width:68ch;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:0;
  text-transform:none;
  overflow-wrap:break-word;
}
body.floralid-wms-body .account-security-card,
body.floralid-wms-body .system-settings-card,
body.floralid-wms-body .user-create-card{
  padding:24px;
}
body.floralid-wms-body .account-password-grid,
body.floralid-wms-body .system-settings-grid{
  grid-template-columns:repeat(3,minmax(220px,1fr));
}
body.floralid-wms-body .system-settings-grid .field-group:nth-last-child(-n+3){
  align-self:start;
}
body.floralid-wms-body .password-inline{
  grid-template-columns:minmax(0,1fr) 56px!important;
  align-items:start!important;
  gap:10px!important;
}
body.floralid-wms-body .password-inline .fi{
  min-height:56px;
}
body.floralid-wms-body .pass-gen-btn{
  width:56px!important;
  min-width:56px!important;
  height:56px!important;
  margin:0!important;
  align-self:start;
}
body.floralid-wms-body .user-create-grid{
  gap:20px 22px!important;
  align-items:start!important;
}
body.floralid-wms-body .user-create-grid .password-field{
  min-width:280px;
}
body.floralid-wms-body .user-create-card .form-actions,
body.floralid-wms-body .wms-polished-form > .btn,
body.floralid-wms-body .form-card > .btn{
  margin-top:8px;
}
body.floralid-wms-body .wms-polished-form > .btn,
body.floralid-wms-body .form-card > .btn{
  display:inline-flex;
  width:auto;
  min-width:150px;
  justify-content:center;
}
body.floralid-wms-body .static-field{
  display:flex;
  align-items:center;
  min-height:56px;
  white-space:normal;
}
@media(max-width:1180px){
  body.floralid-wms-body .account-password-grid,
  body.floralid-wms-body .system-settings-grid{
    grid-template-columns:repeat(2,minmax(220px,1fr));
  }
}
@media(max-width:820px){
  body.floralid-wms-body .account-password-grid,
  body.floralid-wms-body .system-settings-grid,
  body.floralid-wms-body .user-create-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.floralid-wms-body .user-create-grid .username-field,
  body.floralid-wms-body .user-create-grid .password-field,
  body.floralid-wms-body .user-create-grid .fullname-field,
  body.floralid-wms-body .user-create-grid .email-field,
  body.floralid-wms-body .user-create-grid .role-field{
    grid-column:1!important;
    grid-row:auto!important;
    min-width:0;
  }
  body.floralid-wms-body .wms-polished-form > .btn,
  body.floralid-wms-body .form-card > .btn,
  body.floralid-wms-body .user-create-card .form-actions .btn{
    width:100%;
  }
}
@media(max-width:480px){
  body.floralid-wms-body .account-security-card,
  body.floralid-wms-body .system-settings-card,
  body.floralid-wms-body .user-create-card{
    padding:18px;
  }
  body.floralid-wms-body .password-inline{
    grid-template-columns:minmax(0,1fr) 52px!important;
  }
  body.floralid-wms-body .pass-gen-btn{
    width:52px!important;
    min-width:52px!important;
    height:52px!important;
  }
}

/* v3.2.29 final-professional-form-system: definitive form layout correction. */
body.floralid-wms-body .card,
body.floralid-wms-body .form-card,
body.floralid-wms-body .op-form-card,
body.floralid-wms-body .stock-form-card{
  box-sizing:border-box;
}
body.floralid-wms-body .form-card .field-grid,
body.floralid-wms-body .op-form-card .field-grid,
body.floralid-wms-body .stock-form-card .field-grid,
body.floralid-wms-body .account-password-grid,
body.floralid-wms-body .system-settings-grid,
body.floralid-wms-body .user-create-grid,
body.floralid-wms-body .line-item-row{
  display:grid!important;
  align-items:start!important;
  justify-items:stretch!important;
  grid-auto-flow:row!important;
  grid-auto-rows:auto!important;
  gap:18px 22px!important;
  width:100%!important;
  min-width:0!important;
}
body.floralid-wms-body .form-card .field-group,
body.floralid-wms-body .op-form-card .field-group,
body.floralid-wms-body .stock-form-card .field-group,
body.floralid-wms-body .account-password-grid .field-group,
body.floralid-wms-body .system-settings-grid .field-group,
body.floralid-wms-body .user-create-grid .field-group,
body.floralid-wms-body .line-item-row .field-group{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  align-self:start!important;
  gap:8px!important;
  min-width:0!important;
  width:100%!important;
  margin:0!important;
}
body.floralid-wms-body .field-group.full-field,
body.floralid-wms-body .form-card .field-group.full-field,
body.floralid-wms-body .op-form-card .field-group.full-field,
body.floralid-wms-body .stock-form-card .field-group.full-field{
  grid-column:1 / -1!important;
}
body.floralid-wms-body .form-card .field-group:has(textarea),
body.floralid-wms-body .op-form-card .field-group:has(textarea),
body.floralid-wms-body .stock-form-card .field-group:has(textarea){
  grid-column:1 / -1!important;
}
body.floralid-wms-body .field-group label.fl {
    bottom: -21px;
    position: relative;
    left: 15px;
    background-color: #ffffff;
    display: inline-block !important;
    max-width: max-content;
    padding: 0 5px !important;
    z-index: 1000 !important;
}
body.floralid-wms-body .field-group, 
body.floralid-wms-body .form-card .field-group {
    margin-bottom: -33px !important;
}
body.floralid-wms-body .fi,
body.floralid-wms-body input.fi,
body.floralid-wms-body select.fi,
body.floralid-wms-body textarea.fi,
body.floralid-wms-body .wms-select,
body.floralid-wms-body .wms-select-trigger,
body.floralid-wms-body .password-inline{
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
body.floralid-wms-body input.fi,
body.floralid-wms-body select.fi,
body.floralid-wms-body .wms-select-trigger{
  height:56px!important;
  min-height:56px!important;
}
body.floralid-wms-body textarea.fi{
  min-height:74px!important;
  line-height:1.45!important;
  resize:vertical;
}
body.floralid-wms-body .form-help,
body.floralid-wms-body .field-group > .c-m,
body.floralid-wms-body .field-group > p.c-m{
  display:block!important;
  margin:0!important;
  padding:0!important;
  max-width:66ch!important;
  font-size:13px!important;
  line-height:1.45!important;
  font-weight:700!important;
  letter-spacing:0!important;
  text-transform:none!important;
  color:var(--muted)!important;
  overflow-wrap:break-word!important;
}
body.floralid-wms-body .account-password-grid{
  grid-template-columns:repeat(3,minmax(240px,1fr))!important;
}
body.floralid-wms-body .system-settings-grid{
  grid-template-columns:repeat(2,minmax(280px,1fr))!important;
}
body.floralid-wms-body .user-create-grid{
  grid-template-columns:repeat(2,minmax(260px,1fr))!important;
}
body.floralid-wms-body .user-create-grid .username-field,
body.floralid-wms-body .user-create-grid .password-field,
body.floralid-wms-body .user-create-grid .fullname-field,
body.floralid-wms-body .user-create-grid .email-field,
body.floralid-wms-body .user-create-grid .role-field{
  grid-column:auto!important;
  grid-row:auto!important;
  min-width:0!important;
}
body.floralid-wms-body .user-create-grid .role-field:last-child{
  max-width:420px;
}
body.floralid-wms-body .password-inline{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 56px!important;
  gap:10px!important;
  align-items:start!important;
  width:100%!important;
}
body.floralid-wms-body .password-inline .fi{
  width:100%!important;
}
body.floralid-wms-body .pass-gen-btn{
  width:56px!important;
  min-width:56px!important;
  height:56px!important;
  min-height:56px!important;
  padding:0!important;
  margin:0!important;
  align-self:start!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body.floralid-wms-body .op-form-card .field-grid.cols-2,
body.floralid-wms-body .op-form-card .field-grid.cols-3,
body.floralid-wms-body .stock-form-card .field-grid.cols-2,
body.floralid-wms-body .stock-form-card .field-grid.cols-3,
body.floralid-wms-body .form-card .field-grid.cols-2,
body.floralid-wms-body .form-card .field-grid.cols-3{
  grid-template-columns:repeat(2,minmax(280px,1fr))!important;
}
body.floralid-wms-body .line-items-block{
  margin-top:4px!important;
  padding-top:20px!important;
}
body.floralid-wms-body .line-items-list{
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
}
body.floralid-wms-body .line-item-row,
body.floralid-wms-body .field-grid.cols-4.line-item-row{
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;
  padding:14px!important;
  border-radius:18px!important;
  overflow:visible!important;
}
body.floralid-wms-body .line-item-row .wms-select,
body.floralid-wms-body .line-item-row .wms-select-trigger,
body.floralid-wms-body .line-item-row input.fi{
  width:100%!important;
}
body.floralid-wms-body .form-actions,
body.floralid-wms-body .row-actions,
body.floralid-wms-body .op-submit-row{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  margin-top:16px!important;
  width:100%!important;
}
body.floralid-wms-body .account-security-card > .btn,
body.floralid-wms-body .system-settings-card > .btn,
body.floralid-wms-body .user-create-card .form-actions .btn{
  margin-top:16px!important;
}
@media(max-width:1080px){
  body.floralid-wms-body .account-password-grid,
  body.floralid-wms-body .system-settings-grid,
  body.floralid-wms-body .user-create-grid,
  body.floralid-wms-body .op-form-card .field-grid.cols-2,
  body.floralid-wms-body .op-form-card .field-grid.cols-3,
  body.floralid-wms-body .stock-form-card .field-grid.cols-2,
  body.floralid-wms-body .stock-form-card .field-grid.cols-3,
  body.floralid-wms-body .form-card .field-grid.cols-2,
  body.floralid-wms-body .form-card .field-grid.cols-3{
    grid-template-columns:repeat(2,minmax(240px,1fr))!important;
  }
}
@media(max-width:760px){
  body.floralid-wms-body .account-password-grid,
  body.floralid-wms-body .system-settings-grid,
  body.floralid-wms-body .user-create-grid,
  body.floralid-wms-body .op-form-card .field-grid.cols-2,
  body.floralid-wms-body .op-form-card .field-grid.cols-3,
  body.floralid-wms-body .stock-form-card .field-grid.cols-2,
  body.floralid-wms-body .stock-form-card .field-grid.cols-3,
  body.floralid-wms-body .form-card .field-grid.cols-2,
  body.floralid-wms-body .form-card .field-grid.cols-3,
  body.floralid-wms-body .line-item-row,
  body.floralid-wms-body .field-grid.cols-4.line-item-row{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.floralid-wms-body .form-actions .btn,
  body.floralid-wms-body .row-actions .btn,
  body.floralid-wms-body .op-submit-row .btn,
  body.floralid-wms-body .account-security-card > .btn,
  body.floralid-wms-body .system-settings-card > .btn{
    width:100%!important;
  }
}


/* v3.2.29 definitive layout system: aligned form rows across all WMS pages. */
body.floralid-wms-body{
  --wms-field-height:56px;
  --wms-field-gap-x:22px;
  --wms-field-gap-y:18px;
  --wms-label-height:18px;
}
body.floralid-wms-body .content{
  box-sizing:border-box;
}
body.floralid-wms-body .card,
body.floralid-wms-body .form-card,
body.floralid-wms-body .op-form-card,
body.floralid-wms-body .stock-form-card,
body.floralid-wms-body .stock-table-card,
body.floralid-wms-body .op-table-card{
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
}
body.floralid-wms-body .form-card .field-grid,
body.floralid-wms-body .op-form-card .field-grid,
body.floralid-wms-body .stock-form-card .field-grid,
body.floralid-wms-body .account-password-grid,
body.floralid-wms-body .system-settings-grid,
body.floralid-wms-body .user-create-grid,
body.floralid-wms-body .line-item-row{
  display:grid!important;
  align-items:start!important;
  justify-items:stretch!important;
  grid-auto-flow:row!important;
  grid-auto-rows:auto!important;
  gap:var(--wms-field-gap-y) var(--wms-field-gap-x)!important;
  width:100%!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
}
body.floralid-wms-body .field-grid.cols-1{grid-template-columns:minmax(0,1fr)!important;}
body.floralid-wms-body .form-card .field-grid.cols-2,
body.floralid-wms-body .op-form-card .field-grid.cols-2,
body.floralid-wms-body .stock-form-card .field-grid.cols-2,
body.floralid-wms-body .system-settings-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
body.floralid-wms-body .form-card .field-grid.cols-3,
body.floralid-wms-body .op-form-card .field-grid.cols-3,
body.floralid-wms-body .stock-form-card .field-grid.cols-3{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
body.floralid-wms-body .account-password-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
body.floralid-wms-body .user-create-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
body.floralid-wms-body .line-item-row,
body.floralid-wms-body .field-grid.cols-4.line-item-row{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
}
body.floralid-wms-body .field-group,
body.floralid-wms-body .form-card .field-group,
body.floralid-wms-body .op-form-card .field-group,
body.floralid-wms-body .stock-form-card .field-group,
body.floralid-wms-body .account-password-grid .field-group,
body.floralid-wms-body .system-settings-grid .field-group,
body.floralid-wms-body .user-create-grid .field-group,
body.floralid-wms-body .line-item-row .field-group{
  display:grid!important;
  grid-template-rows:var(--wms-label-height) auto auto!important;
  align-items:start!important;
  align-self:start!important;
  justify-content:stretch!important;
  gap:8px!important;
  min-width:0!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}
body.floralid-wms-body .field-group.full-field,
body.floralid-wms-body .form-card .field-group.full-field,
body.floralid-wms-body .op-form-card .field-group.full-field,
body.floralid-wms-body .stock-form-card .field-group.full-field,
body.floralid-wms-body .form-card .field-group:has(textarea),
body.floralid-wms-body .op-form-card .field-group:has(textarea),
body.floralid-wms-body .stock-form-card .field-group:has(textarea){
  grid-column:1 / -1!important;
}
body.floralid-wms-body .field-group label.fl,
body.floralid-wms-body .fl{
  display:flex!important;
  align-items:end!important;
  height:var(--wms-label-height)!important;
  min-height:var(--wms-label-height)!important;
  max-height:var(--wms-label-height)!important;
  margin:0!important;
  padding:0!important;
  color:var(--muted)!important;
  font-size:12px!important;
  font-weight:950!important;
  line-height:1.15!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.floralid-wms-body .fi,
body.floralid-wms-body input.fi,
body.floralid-wms-body select.fi,
body.floralid-wms-body textarea.fi,
body.floralid-wms-body .wms-select,
body.floralid-wms-body .wms-select-trigger,
body.floralid-wms-body .password-inline,
body.floralid-wms-body .static-field{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
body.floralid-wms-body input.fi,
body.floralid-wms-body select.fi,
body.floralid-wms-body .wms-select-trigger,
body.floralid-wms-body .static-field{
  height:var(--wms-field-height)!important;
  min-height:var(--wms-field-height)!important;
}
body.floralid-wms-body textarea.fi{
  min-height:76px!important;
  height:auto!important;
  resize:vertical;
}
body.floralid-wms-body .password-inline{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) var(--wms-field-height)!important;
  gap:10px!important;
  align-items:start!important;
}
body.floralid-wms-body .password-inline .fi,
body.floralid-wms-body .pass-gen-btn{
  height:var(--wms-field-height)!important;
  min-height:var(--wms-field-height)!important;
}
body.floralid-wms-body .pass-gen-btn{
  width:var(--wms-field-height)!important;
  min-width:var(--wms-field-height)!important;
  margin:0!important;
  padding:0!important;
  align-self:start!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body.floralid-wms-body .field-group > .c-m,
body.floralid-wms-body .field-group > p.c-m,
body.floralid-wms-body .form-help{
  margin:0!important;
  padding:0!important;
  max-width:68ch!important;
  color:var(--muted)!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1.45!important;
  letter-spacing:0!important;
  text-transform:none!important;
  white-space:normal!important;
  overflow:visible!important;
  overflow-wrap:break-word!important;
}
body.floralid-wms-body .row-actions,
body.floralid-wms-body .form-actions,
body.floralid-wms-body .op-submit-row{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  width:100%!important;
  margin-top:18px!important;
}
body.floralid-wms-body .account-security-card > .btn,
body.floralid-wms-body .system-settings-card > .btn{
  margin-top:18px!important;
}
body.floralid-wms-body .user-create-grid .username-field,
body.floralid-wms-body .user-create-grid .password-field,
body.floralid-wms-body .user-create-grid .fullname-field,
body.floralid-wms-body .user-create-grid .email-field,
body.floralid-wms-body .user-create-grid .role-field{
  grid-column:auto!important;
  grid-row:auto!important;
}
body.floralid-wms-body .user-create-grid .role-field:last-child{max-width:none!important;}
@media(max-width:1180px){
  body.floralid-wms-body .account-password-grid,
  body.floralid-wms-body .system-settings-grid,
  body.floralid-wms-body .user-create-grid,
  body.floralid-wms-body .form-card .field-grid.cols-2,
  body.floralid-wms-body .form-card .field-grid.cols-3,
  body.floralid-wms-body .op-form-card .field-grid.cols-2,
  body.floralid-wms-body .op-form-card .field-grid.cols-3,
  body.floralid-wms-body .stock-form-card .field-grid.cols-2,
  body.floralid-wms-body .stock-form-card .field-grid.cols-3{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:760px){
  body.floralid-wms-body .account-password-grid,
  body.floralid-wms-body .system-settings-grid,
  body.floralid-wms-body .user-create-grid,
  body.floralid-wms-body .line-item-row,
  body.floralid-wms-body .field-grid.cols-4.line-item-row,
  body.floralid-wms-body .form-card .field-grid.cols-2,
  body.floralid-wms-body .form-card .field-grid.cols-3,
  body.floralid-wms-body .op-form-card .field-grid.cols-2,
  body.floralid-wms-body .op-form-card .field-grid.cols-3,
  body.floralid-wms-body .stock-form-card .field-grid.cols-2,
  body.floralid-wms-body .stock-form-card .field-grid.cols-3{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.floralid-wms-body .form-actions .btn,
  body.floralid-wms-body .row-actions .btn,
  body.floralid-wms-body .op-submit-row .btn,
  body.floralid-wms-body .account-security-card > .btn,
  body.floralid-wms-body .system-settings-card > .btn{
    width:100%!important;
  }
}


/* v3.2.29 pixel-form final: unify every form control to one visual grid. */
body.floralid-wms-body{
  --wms-field-height:56px;
  --wms-field-radius:18px;
  --wms-field-border:2px;
  --wms-field-pad-x:16px;
  --wms-field-shadow:4px 4px 0 var(--shadow-soft);
  --wms-field-gap-x:24px;
  --wms-field-gap-y:18px;
  --wms-label-height:18px;
}
body.floralid-wms-body .content,
body.floralid-wms-body .card,
body.floralid-wms-body .form-card,
body.floralid-wms-body .op-form-card,
body.floralid-wms-body .stock-form-card{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
body.floralid-wms-body .field-grid,
body.floralid-wms-body .fr,
body.floralid-wms-body .fr2,
body.floralid-wms-body .fr3,
body.floralid-wms-body .fs,
body.floralid-wms-body .account-password-grid,
body.floralid-wms-body .system-settings-grid,
body.floralid-wms-body .user-create-grid,
body.floralid-wms-body .line-item-row{
  display:grid!important;
  align-items:start!important;
  justify-items:stretch!important;
  grid-auto-flow:row!important;
  grid-auto-rows:auto!important;
  gap:var(--wms-field-gap-y) var(--wms-field-gap-x)!important;
  width:100%!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
}
body.floralid-wms-body .field-grid.cols-1{grid-template-columns:minmax(0,1fr)!important;}
body.floralid-wms-body .fr,
body.floralid-wms-body .fr2,
body.floralid-wms-body .fs,
body.floralid-wms-body .field-grid.cols-2,
body.floralid-wms-body .system-settings-grid,
body.floralid-wms-body .user-create-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
body.floralid-wms-body .fr3,
body.floralid-wms-body .field-grid.cols-3{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
body.floralid-wms-body .account-password-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
body.floralid-wms-body .line-item-row,
body.floralid-wms-body .field-grid.cols-4.line-item-row{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
body.floralid-wms-body .line-item-row:has(.field-group:nth-child(4)),
body.floralid-wms-body .field-grid.cols-4.line-item-row:has(.field-group:nth-child(4)){
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
body.floralid-wms-body .field-group,
body.floralid-wms-body .field-grid > .field-group,
body.floralid-wms-body .account-password-grid > .field-group,
body.floralid-wms-body .system-settings-grid > .field-group,
body.floralid-wms-body .user-create-grid > .field-group,
body.floralid-wms-body .line-item-row > .field-group{
  display:grid!important;
  grid-template-rows:var(--wms-label-height) auto auto!important;
  gap:8px!important;
  align-self:start!important;
  align-items:start!important;
  justify-content:stretch!important;
  min-width:0!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
body.floralid-wms-body .field-group.full-field,
body.floralid-wms-body .field-group:has(textarea){grid-column:1 / -1!important;}
body.floralid-wms-body .field-group label.fl,
body.floralid-wms-body .fl{
  display:flex!important;
  align-items:flex-end!important;
  height:var(--wms-label-height)!important;
  min-height:var(--wms-label-height)!important;
  max-height:var(--wms-label-height)!important;
  margin:0!important;
  padding:0!important;
  color:var(--muted)!important;
  font:950 12px/1.15 var(--font-ui)!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.floralid-wms-body input.fi,
body.floralid-wms-body select.fi,
body.floralid-wms-body select.fs,
body.floralid-wms-body textarea.fi,
body.floralid-wms-body .wms-select,
body.floralid-wms-body .wms-select-trigger,
body.floralid-wms-body .password-inline,
body.floralid-wms-body .static-field,
body.floralid-wms-body .fr > input.fi,
body.floralid-wms-body .fr2 > input.fi,
body.floralid-wms-body .fr3 > input.fi,
body.floralid-wms-body .fr3 > .wms-select,
body.floralid-wms-body .fs > input.fi,
body.floralid-wms-body .fs > .wms-select{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  align-self:start!important;
  justify-self:stretch!important;
}
body.floralid-wms-body input.fi,
body.floralid-wms-body select.fi,
body.floralid-wms-body select.fs,
body.floralid-wms-body .wms-select-trigger,
body.floralid-wms-body .static-field{
  height:var(--wms-field-height)!important;
  min-height:var(--wms-field-height)!important;
  max-height:var(--wms-field-height)!important;
  padding:0 var(--wms-field-pad-x)!important;
  border:var(--wms-field-border) solid var(--line)!important;
  border-radius:var(--wms-field-radius)!important;
  background-color:var(--panel2)!important;
  color:var(--ink)!important;
  box-shadow:var(--wms-field-shadow)!important;
  font:700 15px/1.35 var(--font-ui)!important;
  outline:0!important;
}
body.floralid-wms-body input.fi::placeholder,
body.floralid-wms-body textarea.fi::placeholder{
  color:var(--muted)!important;
  opacity:.72!important;
}
body.floralid-wms-body textarea.fi{
  min-height:76px!important;
  height:auto!important;
  padding:14px var(--wms-field-pad-x)!important;
  border:var(--wms-field-border) solid var(--line)!important;
  border-radius:var(--wms-field-radius)!important;
  background-color:var(--panel2)!important;
  color:var(--ink)!important;
  box-shadow:var(--wms-field-shadow)!important;
  font:700 15px/1.45 var(--font-ui)!important;
  resize:vertical!important;
}
body.floralid-wms-body .wms-select{position:relative!important;display:block!important;z-index:1!important;}
body.floralid-wms-body .wms-select.open{z-index:1000!important;}
body.floralid-wms-body .wms-select-trigger{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 22px!important;
  align-items:center!important;
  gap:10px!important;
  text-align:left!important;
  cursor:pointer!important;
  transform:none!important;
}
body.floralid-wms-body .wms-select-trigger:hover,
body.floralid-wms-body .wms-select-trigger:active{
  transform:none!important;
  box-shadow:var(--wms-field-shadow)!important;
}
body.floralid-wms-body input.fi:focus,
body.floralid-wms-body select.fi:focus,
body.floralid-wms-body select.fs:focus,
body.floralid-wms-body textarea.fi:focus,
body.floralid-wms-body .wms-select-trigger:focus-visible,
body.floralid-wms-body .wms-select.open .wms-select-trigger{
  box-shadow:var(--ring)!important;
}
body.floralid-wms-body .wms-select-value{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  line-height:1.35!important;
}
body.floralid-wms-body .wms-select-chev{
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  flex:0 0 22px!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--ink)!important;
  box-shadow:none!important;
}
body.floralid-wms-body .wms-select-chev-svg{width:20px!important;height:20px!important;}
body.floralid-wms-body .wms-select-panel{
  left:0!important;
  right:0!important;
  box-sizing:border-box!important;
  border-radius:18px!important;
}
body.floralid-wms-body .password-inline{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) var(--wms-field-height)!important;
  gap:10px!important;
  align-items:start!important;
}
body.floralid-wms-body .password-inline .fi,
body.floralid-wms-body .pass-gen-btn{
  height:var(--wms-field-height)!important;
  min-height:var(--wms-field-height)!important;
  max-height:var(--wms-field-height)!important;
}
body.floralid-wms-body .pass-gen-btn{
  width:var(--wms-field-height)!important;
  min-width:var(--wms-field-height)!important;
  margin:0!important;
  padding:0!important;
  display:inline-grid!important;
  place-items:center!important;
  align-self:start!important;
}
body.floralid-wms-body .field-group > .c-m,
body.floralid-wms-body .field-group > p.c-m,
body.floralid-wms-body .form-help{
  margin:0!important;
  padding:0!important;
  max-width:68ch!important;
  color:var(--muted)!important;
  font:700 13px/1.45 var(--font-ui)!important;
  letter-spacing:0!important;
  text-transform:none!important;
  white-space:normal!important;
  overflow:visible!important;
  overflow-wrap:break-word!important;
}
body.floralid-wms-body .row-actions,
body.floralid-wms-body .form-actions,
body.floralid-wms-body .op-submit-row{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  width:100%!important;
  margin-top:18px!important;
}
body.floralid-wms-body .form-card .btn,
body.floralid-wms-body .op-form-card .btn,
body.floralid-wms-body .stock-form-card .btn{margin-top:0!important;}
body.floralid-wms-body .account-security-card > .btn,
body.floralid-wms-body .system-settings-card > .btn{margin-top:18px!important;}
body.floralid-wms-body .user-create-grid .username-field,
body.floralid-wms-body .user-create-grid .password-field,
body.floralid-wms-body .user-create-grid .fullname-field,
body.floralid-wms-body .user-create-grid .email-field,
body.floralid-wms-body .user-create-grid .role-field{grid-column:auto!important;grid-row:auto!important;}
@media(max-width:1280px){
  body.floralid-wms-body .fr3,
  body.floralid-wms-body .field-grid.cols-3,
  body.floralid-wms-body .account-password-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.floralid-wms-body .line-item-row,
  body.floralid-wms-body .field-grid.cols-4.line-item-row,
  body.floralid-wms-body .line-item-row:has(.field-group:nth-child(4)),
  body.floralid-wms-body .field-grid.cols-4.line-item-row:has(.field-group:nth-child(4)){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:760px){
  body.floralid-wms-body .fr,
  body.floralid-wms-body .fr2,
  body.floralid-wms-body .fr3,
  body.floralid-wms-body .fs,
  body.floralid-wms-body .field-grid.cols-2,
  body.floralid-wms-body .field-grid.cols-3,
  body.floralid-wms-body .line-item-row,
  body.floralid-wms-body .field-grid.cols-4.line-item-row,
  body.floralid-wms-body .account-password-grid,
  body.floralid-wms-body .system-settings-grid,
  body.floralid-wms-body .user-create-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.floralid-wms-body .form-actions .btn,
  body.floralid-wms-body .row-actions .btn,
  body.floralid-wms-body .op-submit-row .btn,
  body.floralid-wms-body .account-security-card > .btn,
  body.floralid-wms-body .system-settings-card > .btn{width:100%!important;}
}


/* v3.2.29 ACTUAL final form-control alignment fix.
   Purpose: remove the remaining select/dropdown visual offset and enforce one control geometry. */
body.floralid-wms-body{
  --wms-control-h:56px;
  --wms-control-radius:18px;
  --wms-control-border:2px;
  --wms-control-pad-x:16px;
  --wms-control-shadow:4px 4px 0 var(--shadow-soft);
  --wms-control-gap-x:24px;
  --wms-control-gap-y:18px;
  --wms-control-label-h:18px;
}
#floralid-wms-root .form-card,
#floralid-wms-root .op-form-card,
#floralid-wms-root .stock-form-card,
#floralid-wms-root .product-form-card,
#floralid-wms-root .barcode-form-card{
  overflow:visible!important;
}
#floralid-wms-root .field-grid,
#floralid-wms-root .fr,
#floralid-wms-root .fr2,
#floralid-wms-root .fr3,
#floralid-wms-root .fs,
#floralid-wms-root .account-password-grid,
#floralid-wms-root .system-settings-grid,
#floralid-wms-root .user-create-grid,
#floralid-wms-root .line-item-row{
  display:grid!important;
  align-items:start!important;
  justify-items:stretch!important;
  grid-auto-flow:row!important;
  grid-auto-rows:auto!important;
  gap:var(--wms-control-gap-y) var(--wms-control-gap-x)!important;
  width:100%!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
}
#floralid-wms-root .field-grid.cols-1{grid-template-columns:minmax(0,1fr)!important;}
#floralid-wms-root .field-grid.cols-2,
#floralid-wms-root .fr,
#floralid-wms-root .fr2,
#floralid-wms-root .fs,
#floralid-wms-root .system-settings-grid,
#floralid-wms-root .user-create-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
#floralid-wms-root .field-grid.cols-3,
#floralid-wms-root .fr3,
#floralid-wms-root .product-form-grid,
#floralid-wms-root .account-password-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
#floralid-wms-root .line-item-row,
#floralid-wms-root .field-grid.cols-4.line-item-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
#floralid-wms-root .line-item-row:has(.field-group:nth-child(4)),
#floralid-wms-root .field-grid.cols-4.line-item-row:has(.field-group:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))!important;}
#floralid-wms-root .field-group,
#floralid-wms-root .field-grid > .field-group,
#floralid-wms-root .account-password-grid > .field-group,
#floralid-wms-root .system-settings-grid > .field-group,
#floralid-wms-root .user-create-grid > .field-group,
#floralid-wms-root .line-item-row > .field-group{
  display:grid!important;
  grid-template-rows:var(--wms-control-label-h) auto auto!important;
  align-items:start!important;
  align-self:start!important;
  gap:8px!important;
  min-width:0!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
#floralid-wms-root .field-group.full-field,
#floralid-wms-root .field-group:has(textarea){grid-column:1 / -1!important;}
#floralid-wms-root label.fl,
#floralid-wms-root .fl{
  display:flex!important;
  align-items:flex-end!important;
  height:var(--wms-control-label-h)!important;
  min-height:var(--wms-control-label-h)!important;
  max-height:var(--wms-control-label-h)!important;
  margin:0!important;
  padding:0!important;
  color:var(--muted)!important;
  font:950 12px/1.15 var(--font-ui)!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#floralid-wms-root input.fi,
#floralid-wms-root select.fi,
#floralid-wms-root select.fs,
#floralid-wms-root textarea.fi,
#floralid-wms-root .wms-select,
#floralid-wms-root .wms-select-trigger,
#floralid-wms-root .password-inline,
#floralid-wms-root .static-field{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  justify-self:stretch!important;
  align-self:start!important;
}
#floralid-wms-root input.fi,
#floralid-wms-root select.fi,
#floralid-wms-root select.fs,
#floralid-wms-root .wms-select-trigger,
#floralid-wms-root .static-field{
  height:var(--wms-control-h)!important;
  min-height:var(--wms-control-h)!important;
  max-height:var(--wms-control-h)!important;
  padding:0 var(--wms-control-pad-x)!important;
  border:var(--wms-control-border) solid var(--line)!important;
  border-radius:var(--wms-control-radius)!important;
  background-color:var(--panel2)!important;
  color:var(--ink)!important;
  box-shadow:var(--wms-control-shadow)!important;
  font:700 15px/1.35 var(--font-ui)!important;
  outline:0!important;
}
#floralid-wms-root select.fi,
#floralid-wms-root select.fs{
  -webkit-appearance:none!important;
  appearance:none!important;
  padding-right:44px!important;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%)!important;
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%!important;
  background-size:6px 6px,6px 6px!important;
  background-repeat:no-repeat!important;
}
#floralid-wms-root textarea.fi{
  min-height:76px!important;
  height:auto!important;
  padding:14px var(--wms-control-pad-x)!important;
  border:var(--wms-control-border) solid var(--line)!important;
  border-radius:var(--wms-control-radius)!important;
  background-color:var(--panel2)!important;
  color:var(--ink)!important;
  box-shadow:var(--wms-control-shadow)!important;
  font:700 15px/1.45 var(--font-ui)!important;
  resize:vertical!important;
}
#floralid-wms-root .wms-select{position:relative!important;display:block!important;z-index:1!important;}
#floralid-wms-root .wms-select.open{z-index:1000!important;}
#floralid-wms-root .wms-select-trigger{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 20px!important;
  align-items:center!important;
  gap:10px!important;
  text-align:left!important;
  cursor:pointer!important;
  transform:none!important;
}
#floralid-wms-root .wms-select-trigger:hover,
#floralid-wms-root .wms-select-trigger:active{transform:none!important;box-shadow:var(--wms-control-shadow)!important;}
#floralid-wms-root .wms-select-value{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;line-height:1.35!important;}
#floralid-wms-root .wms-select-chev,
#floralid-wms-root .wms-select-arrow{
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  flex:0 0 20px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  color:var(--ink)!important;
}
#floralid-wms-root .wms-select-chev::before,
#floralid-wms-root .wms-select-chev::after,
#floralid-wms-root .wms-select-arrow::before,
#floralid-wms-root .wms-select-arrow::after{display:none!important;content:none!important;}
#floralid-wms-root .wms-select-chev svg,
#floralid-wms-root .wms-select-arrow svg,
#floralid-wms-root .wms-select-chev-svg{width:20px!important;height:20px!important;display:block!important;}
#floralid-wms-root .password-inline{display:grid!important;grid-template-columns:minmax(0,1fr) var(--wms-control-h)!important;gap:10px!important;align-items:start!important;}
#floralid-wms-root .password-inline .fi,
#floralid-wms-root .pass-gen-btn{height:var(--wms-control-h)!important;min-height:var(--wms-control-h)!important;max-height:var(--wms-control-h)!important;}
#floralid-wms-root .pass-gen-btn{width:var(--wms-control-h)!important;min-width:var(--wms-control-h)!important;margin:0!important;padding:0!important;display:inline-grid!important;place-items:center!important;align-self:start!important;}
#floralid-wms-root .row-actions,
#floralid-wms-root .form-actions,
#floralid-wms-root .op-submit-row{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;flex-wrap:wrap!important;width:100%!important;margin-top:18px!important;}
@media(max-width:1280px){
  #floralid-wms-root .field-grid.cols-3,
  #floralid-wms-root .fr3,
  #floralid-wms-root .product-form-grid,
  #floralid-wms-root .account-password-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #floralid-wms-root .line-item-row,
  #floralid-wms-root .field-grid.cols-4.line-item-row,
  #floralid-wms-root .line-item-row:has(.field-group:nth-child(4)),
  #floralid-wms-root .field-grid.cols-4.line-item-row:has(.field-group:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:760px){
  #floralid-wms-root .field-grid.cols-2,
  #floralid-wms-root .field-grid.cols-3,
  #floralid-wms-root .fr,
  #floralid-wms-root .fr2,
  #floralid-wms-root .fr3,
  #floralid-wms-root .fs,
  #floralid-wms-root .account-password-grid,
  #floralid-wms-root .system-settings-grid,
  #floralid-wms-root .user-create-grid,
  #floralid-wms-root .product-form-grid,
  #floralid-wms-root .line-item-row,
  #floralid-wms-root .field-grid.cols-4.line-item-row{grid-template-columns:minmax(0,1fr)!important;}
}


/* v3.2.29 final-actual-grid-pass: balanced, professional form geometry.
   This block intentionally sits at the end of the compiled CSS so it wins over legacy module rules. */
#floralid-wms-root{
  --wms-form-control-h:56px;
  --wms-form-control-radius:18px;
  --wms-form-control-border:2px;
  --wms-form-control-x:16px;
  --wms-form-control-shadow:4px 4px 0 var(--shadow-soft);
  --wms-form-label-h:18px;
  --wms-form-gap-x:24px;
  --wms-form-gap-y:18px;
}
#floralid-wms-root .op-form-card,
#floralid-wms-root .form-card,
#floralid-wms-root .product-form-card,
#floralid-wms-root .barcode-form-card,
#floralid-wms-root .stock-form-card{box-sizing:border-box!important;overflow:visible!important;}
#floralid-wms-root .op-form,
#floralid-wms-root [data-op-form],
#floralid-wms-root .entity-form,
#floralid-wms-root .product-form-grid,
#floralid-wms-root .barcode-form-grid{width:100%!important;min-width:0!important;box-sizing:border-box!important;}
#floralid-wms-root .field-grid,
#floralid-wms-root .op-header-grid,
#floralid-wms-root .product-form-grid,
#floralid-wms-root .barcode-form-grid,
#floralid-wms-root .system-settings-grid,
#floralid-wms-root .user-create-grid,
#floralid-wms-root .account-password-grid,
#floralid-wms-root .line-item-row{
  display:grid!important;
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  align-items:start!important;
  justify-items:stretch!important;
  grid-auto-flow:row!important;
  grid-auto-rows:auto!important;
  gap:var(--wms-form-gap-y) var(--wms-form-gap-x)!important;
}
#floralid-wms-root .op-header-grid,
#floralid-wms-root .field-grid.cols-2,
#floralid-wms-root .system-settings-grid,
#floralid-wms-root .user-create-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
#floralid-wms-root .product-form-grid,
#floralid-wms-root .field-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
#floralid-wms-root .account-password-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
#floralid-wms-root .line-item-row,
#floralid-wms-root .field-grid.cols-4.line-item-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
#floralid-wms-root .line-item-row:has(.field-group:nth-child(4)),
#floralid-wms-root .field-grid.cols-4.line-item-row:has(.field-group:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))!important;}
#floralid-wms-root .field-group,
#floralid-wms-root .field-grid > .field-group,
#floralid-wms-root .op-header-grid > .field-group,
#floralid-wms-root .product-form-grid > .field-group,
#floralid-wms-root .barcode-form-grid > .field-group,
#floralid-wms-root .system-settings-grid > .field-group,
#floralid-wms-root .user-create-grid > .field-group,
#floralid-wms-root .account-password-grid > .field-group,
#floralid-wms-root .line-item-row > .field-group{
  display:grid!important;
  grid-template-rows:var(--wms-form-label-h) var(--wms-form-control-h) auto!important;
  gap:8px!important;
  align-self:start!important;
  align-items:start!important;
  justify-self:stretch!important;
  min-width:0!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
}
#floralid-wms-root .field-group.full-field,
#floralid-wms-root .field-group:has(textarea){grid-column:1 / -1!important;grid-template-rows:var(--wms-form-label-h) auto auto!important;}
#floralid-wms-root .field-group > label.fl,
#floralid-wms-root .fl{
  height:var(--wms-form-label-h)!important;
  min-height:var(--wms-form-label-h)!important;
  max-height:var(--wms-form-label-h)!important;
  display:flex!important;
  align-items:flex-end!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  line-height:1.15!important;
}
#floralid-wms-root input.fi,
#floralid-wms-root select.fi,
#floralid-wms-root select.fs,
#floralid-wms-root .wms-select,
#floralid-wms-root .wms-select-trigger,
#floralid-wms-root .static-field,
#floralid-wms-root .password-inline{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  justify-self:stretch!important;
  align-self:start!important;
}
#floralid-wms-root input.fi,
#floralid-wms-root select.fi,
#floralid-wms-root select.fs,
#floralid-wms-root .wms-select-trigger,
#floralid-wms-root .static-field{
  height:var(--wms-form-control-h)!important;
  min-height:var(--wms-form-control-h)!important;
  max-height:var(--wms-form-control-h)!important;
  padding:0 var(--wms-form-control-x)!important;
  border:var(--wms-form-control-border) solid var(--line)!important;
  border-radius:var(--wms-form-control-radius)!important;
  background:var(--panel2)!important;
  color:var(--ink)!important;
  box-shadow:var(--wms-form-control-shadow)!important;
  font:700 15px/1.35 var(--font-ui)!important;
  outline:0!important;
  transform:none!important;
}
#floralid-wms-root textarea.fi{
  width:100%!important;
  min-width:0!important;
  min-height:76px!important;
  box-sizing:border-box!important;
  padding:14px var(--wms-form-control-x)!important;
  border:var(--wms-form-control-border) solid var(--line)!important;
  border-radius:var(--wms-form-control-radius)!important;
  background:var(--panel2)!important;
  color:var(--ink)!important;
  box-shadow:var(--wms-form-control-shadow)!important;
  font:700 15px/1.45 var(--font-ui)!important;
  resize:vertical!important;
}
#floralid-wms-root .wms-select{position:relative!important;display:block!important;z-index:1!important;}
#floralid-wms-root .wms-select.open{z-index:1000!important;}
#floralid-wms-root .wms-select-trigger{display:grid!important;grid-template-columns:minmax(0,1fr) 20px!important;align-items:center!important;gap:10px!important;text-align:left!important;}
#floralid-wms-root .wms-select-trigger:hover,
#floralid-wms-root .wms-select-trigger:active{transform:none!important;box-shadow:var(--wms-form-control-shadow)!important;}
#floralid-wms-root .wms-select-value{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
#floralid-wms-root .wms-select-arrow,
#floralid-wms-root .wms-select-chev{width:20px!important;height:20px!important;min-width:20px!important;display:grid!important;place-items:center!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--ink)!important;}
#floralid-wms-root .help-text,
#floralid-wms-root .field-help,
#floralid-wms-root .hint,
#floralid-wms-root .note{grid-row:3!important;margin:0!important;line-height:1.45!important;max-width:100%!important;}
#floralid-wms-root .row-actions,
#floralid-wms-root .op-submit-row{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;margin-top:22px!important;}
@media(max-width:1180px){
  #floralid-wms-root .product-form-grid,
  #floralid-wms-root .field-grid.cols-3,
  #floralid-wms-root .line-item-row,
  #floralid-wms-root .field-grid.cols-4.line-item-row,
  #floralid-wms-root .line-item-row:has(.field-group:nth-child(4)),
  #floralid-wms-root .field-grid.cols-4.line-item-row:has(.field-group:nth-child(4)),
  #floralid-wms-root .account-password-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:760px){
  #floralid-wms-root .op-header-grid,
  #floralid-wms-root .field-grid.cols-2,
  #floralid-wms-root .field-grid.cols-3,
  #floralid-wms-root .product-form-grid,
  #floralid-wms-root .barcode-form-grid,
  #floralid-wms-root .system-settings-grid,
  #floralid-wms-root .user-create-grid,
  #floralid-wms-root .account-password-grid,
  #floralid-wms-root .line-item-row,
  #floralid-wms-root .field-grid.cols-4.line-item-row{grid-template-columns:minmax(0,1fr)!important;}
}

/* v3.2.29 all-form-grid-final: close the remaining alignment gaps globally.
   Every operational line item now declares its actual column count in markup. */
#floralid-wms-root .op-form-card *{box-sizing:border-box!important;}
#floralid-wms-root .op-header-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:start!important;
  column-gap:24px!important;
  row-gap:18px!important;
}
#floralid-wms-root .line-items-list{display:grid!important;gap:14px!important;width:100%!important;min-width:0!important;}
#floralid-wms-root .line-item-row{
  width:100%!important;
  min-width:0!important;
  align-items:start!important;
  justify-items:stretch!important;
  column-gap:24px!important;
  row-gap:18px!important;
}
#floralid-wms-root .line-item-row.line-item-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
#floralid-wms-root .line-item-row.line-item-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
#floralid-wms-root .line-item-row.line-item-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
#floralid-wms-root .line-item-row > .field-group,
#floralid-wms-root .op-header-grid > .field-group{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  justify-self:stretch!important;
  align-self:start!important;
}
#floralid-wms-root .line-item-row .field-group > input.fi,
#floralid-wms-root .line-item-row .field-group > select.fi,
#floralid-wms-root .line-item-row .field-group > .wms-select,
#floralid-wms-root .line-item-row .field-group > .wms-select > .wms-select-trigger,
#floralid-wms-root .op-header-grid .field-group > input.fi,
#floralid-wms-root .op-header-grid .field-group > select.fi,
#floralid-wms-root .op-header-grid .field-group > .wms-select,
#floralid-wms-root .op-header-grid .field-group > .wms-select > .wms-select-trigger{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
#floralid-wms-root .wms-native-select{
  position:absolute!important;
  inline-size:1px!important;
  block-size:1px!important;
  min-width:1px!important;
  min-height:1px!important;
  max-width:1px!important;
  max-height:1px!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
}
@media(max-width:1180px){
  #floralid-wms-root .op-header-grid,
  #floralid-wms-root .line-item-row.line-item-cols-2,
  #floralid-wms-root .line-item-row.line-item-cols-3,
  #floralid-wms-root .line-item-row.line-item-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:760px){
  #floralid-wms-root .op-header-grid,
  #floralid-wms-root .line-item-row.line-item-cols-2,
  #floralid-wms-root .line-item-row.line-item-cols-3,
  #floralid-wms-root .line-item-row.line-item-cols-4{grid-template-columns:minmax(0,1fr)!important;}
}


/* v3.2.29 cascade-select-alignment-final
   Root cause fixed: legacy `.card button { margin-top:10px; }` was moving custom select triggers.
   Select/search triggers are buttons, so they must be treated as form controls, not action buttons. */
#floralid-wms-root .card .wms-select-trigger,
#floralid-wms-root .form-card .wms-select-trigger,
#floralid-wms-root .op-form-card .wms-select-trigger,
#floralid-wms-root .stock-form-card .wms-select-trigger,
#floralid-wms-root .product-form-card .wms-select-trigger,
#floralid-wms-root .barcode-form-card .wms-select-trigger,
#floralid-wms-root .user-create-card .wms-select-trigger,
#floralid-wms-root .system-settings-card .wms-select-trigger,
#floralid-wms-root .account-security-card .wms-select-trigger{
  margin:0!important;
  margin-top:0!important;
  margin-bottom:0!important;
}
#floralid-wms-root .card .wms-select-option,
#floralid-wms-root .form-card .wms-select-option,
#floralid-wms-root .op-form-card .wms-select-option,
#floralid-wms-root .stock-form-card .wms-select-option,
#floralid-wms-root .product-form-card .wms-select-option,
#floralid-wms-root .barcode-form-card .wms-select-option{
  margin:0!important;
  margin-top:0!important;
}
#floralid-wms-root .field-group > .wms-select,
#floralid-wms-root .field-group > input.fi,
#floralid-wms-root .field-group > select.fi,
#floralid-wms-root .field-group > textarea.fi,
#floralid-wms-root .field-group > .password-inline,
#floralid-wms-root .field-group > .static-field{
  margin:0!important;
  margin-top:0!important;
  margin-bottom:0!important;
}
#floralid-wms-root .field-group > .wms-select{
  display:block!important;
  height:var(--wms-form-control-h,56px)!important;
  min-height:var(--wms-form-control-h,56px)!important;
}
#floralid-wms-root .field-group > .wms-select > .wms-select-trigger{
  position:relative!important;
  top:0!important;
  left:0!important;
}
#floralid-wms-root .op-header-grid,
#floralid-wms-root .line-item-row,
#floralid-wms-root .product-form-grid,
#floralid-wms-root .barcode-form-grid,
#floralid-wms-root .system-settings-grid,
#floralid-wms-root .user-create-grid,
#floralid-wms-root .account-password-grid{
  align-items:start!important;
}
#floralid-wms-root .op-header-grid > .field-group,
#floralid-wms-root .line-item-row > .field-group,
#floralid-wms-root .product-form-grid > .field-group,
#floralid-wms-root .barcode-form-grid > .field-group,
#floralid-wms-root .system-settings-grid > .field-group,
#floralid-wms-root .user-create-grid > .field-group,
#floralid-wms-root .account-password-grid > .field-group{
  align-content:start!important;
  justify-content:stretch!important;
}
#floralid-wms-root .op-header-grid .wms-select-trigger,
#floralid-wms-root .line-item-row .wms-select-trigger,
#floralid-wms-root .product-form-grid .wms-select-trigger,
#floralid-wms-root .barcode-form-grid .wms-select-trigger,
#floralid-wms-root .system-settings-grid .wms-select-trigger,
#floralid-wms-root .user-create-grid .wms-select-trigger,
#floralid-wms-root .account-password-grid .wms-select-trigger{
  height:var(--wms-form-control-h,56px)!important;
  min-height:var(--wms-form-control-h,56px)!important;
  max-height:var(--wms-form-control-h,56px)!important;
}
/* Keep action buttons spaced only when they are actual row/card actions, never when they are form controls. */
#floralid-wms-root .card button:not(.btn):not(.primary):not(.tbtn):not(.sbi):not(.wms-select-trigger):not(.wms-select-option):not(.pass-gen-btn):not([data-theme-toggle]):not([data-locale]){
  margin-top:0!important;
}
#floralid-wms-root .row-actions > .btn,
#floralid-wms-root .form-actions > .btn,
#floralid-wms-root .op-submit-row > .btn{
  margin-top:0!important;
}


/* v3.2.29 final role-permission matrix hardening
   Fixes clipped Users & Roles permission table by separating the card header from
   the scrollable matrix, pinning the role column, and centering checkbox columns. */
body.floralid-wms-body #floralid-wms-root .role-permissions-card{
  overflow:hidden!important;
  max-width:100%!important;
  min-width:0!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:18px!important;
  flex-wrap:wrap!important;
  margin-bottom:14px!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-head #save-role-perms-btn{
  flex:0 0 auto!important;
  margin:0!important;
  white-space:nowrap!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-scroll{
  width:100%!important;
  max-width:100%!important;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch!important;
  border:1px solid rgba(0,0,0,.12)!important;
  border-radius:18px!important;
  background:var(--panel2)!important;
  scrollbar-gutter:stable both-edges!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table{
  width:max-content!important;
  min-width:2360px!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  margin:0!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table th,
body.floralid-wms-body #floralid-wms-root .role-permissions-table td{
  box-sizing:border-box!important;
  height:64px!important;
  padding:12px 10px!important;
  border-bottom:1px solid rgba(0,0,0,.10)!important;
  vertical-align:middle!important;
  white-space:nowrap!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table thead th{
  position:sticky!important;
  top:0!important;
  z-index:5!important;
  background:#e5e7eb!important;
  color:var(--ink)!important;
  text-align:center!important;
  font-size:11px!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  box-shadow:0 1px 0 rgba(0,0,0,.20)!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table th:first-child,
body.floralid-wms-body #floralid-wms-root .role-permissions-table td:first-child{
  position:sticky!important;
  left:0!important;
  z-index:6!important;
  width:260px!important;
  min-width:260px!important;
  max-width:260px!important;
  text-align:left!important;
  background:var(--panel)!important;
  box-shadow:8px 0 12px rgba(0,0,0,.05)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table thead th:first-child{
  z-index:8!important;
  background:#e5e7eb!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table th:not(:first-child),
body.floralid-wms-body #floralid-wms-root .role-permissions-table td:not(:first-child){
  width:76px!important;
  min-width:76px!important;
  max-width:76px!important;
  text-align:center!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody tr:nth-child(even) td{
  background:rgba(255,255,255,.42)!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody tr:nth-child(even) td:first-child{
  background:var(--panel)!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody tr:hover td{
  background:rgba(16,185,129,.16)!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody tr:hover td:first-child{
  background:#f9e6ed!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table .perm-cell{
  padding:10px 8px!important;
  text-align:center!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table .wms-check{
  margin:0 auto!important;
  width:40px!important;
  height:40px!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table .wms-check-box{
  margin:0!important;
}
@media(max-width:900px){
  body.floralid-wms-body #floralid-wms-root .role-permissions-table{min-width:2200px!important;}
  body.floralid-wms-body #floralid-wms-root .role-permissions-table th:first-child,
  body.floralid-wms-body #floralid-wms-root .role-permissions-table td:first-child{
    width:220px!important;min-width:220px!important;max-width:220px!important;
  }
}
html[data-theme="dark"] body.floralid-wms-body #floralid-wms-root .role-permissions-table thead th,
html[data-theme="dark"] body.floralid-wms-body #floralid-wms-root .role-permissions-table thead th:first-child{
  background:var(--panel2)!important;
}
html[data-theme="dark"] body.floralid-wms-body #floralid-wms-root .role-permissions-table th:first-child,
html[data-theme="dark"] body.floralid-wms-body #floralid-wms-root .role-permissions-table td:first-child{
  background:var(--panel)!important;
}

/* v3.2.29 permission matrix definitive pass
   Purpose: prevent the Users & Roles permission matrix from clipping under the app shell,
   keep the role names readable, and make checkbox columns uniform in a controlled scroll area. */
body.floralid-wms-body #floralid-wms-root .role-permissions-card{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  padding:22px!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  column-gap:18px!important;
  row-gap:12px!important;
  padding-bottom:14px!important;
  border-bottom:1px solid rgba(0,0,0,.10)!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-head #save-role-perms-btn{
  justify-self:end!important;
  align-self:start!important;
  margin:0!important;
  min-height:42px!important;
  white-space:nowrap!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-scroll{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:14px 0 0!important;
  overflow-x:auto!important;
  overflow-y:auto!important;
  max-height:min(68vh,720px)!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  border:1px solid rgba(0,0,0,.14)!important;
  border-radius:18px!important;
  background:var(--panel2)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)!important;
  scrollbar-gutter:stable!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table.tbl,
body.floralid-wms-body #floralid-wms-root table.role-permissions-table{
  display:table!important;
  width:max-content!important;
  min-width:2380px!important;
  max-width:none!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  margin:0!important;
  font-size:12px!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table thead th,
body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody td{
  box-sizing:border-box!important;
  height:62px!important;
  min-height:62px!important;
  padding:10px 8px!important;
  vertical-align:middle!important;
  white-space:nowrap!important;
  border-bottom:1px solid rgba(0,0,0,.10)!important;
  text-align:center!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table thead th{
  position:sticky!important;
  top:0!important;
  z-index:20!important;
  background:#f5d3df!important;
  color:var(--ink)!important;
  font-family:var(--font-mono)!important;
  font-size:10px!important;
  line-height:1.2!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  border-bottom:1px solid var(--line)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table thead th:first-child,
body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody td:first-child,
body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody td.role-cell{
  position:sticky!important;
  left:0!important;
  z-index:25!important;
  width:250px!important;
  min-width:250px!important;
  max-width:250px!important;
  text-align:left!important;
  padding-left:16px!important;
  padding-right:16px!important;
  background:var(--panel2)!important;
  box-shadow:10px 0 14px rgba(0,0,0,.06)!important;
  overflow:hidden!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table thead th:first-child{
  z-index:35!important;
  background:#f5d3df!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody td:first-child strong,
body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody td.role-cell strong{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-family:var(--font-mono)!important;
  font-size:12px!important;
  line-height:1.25!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody td:first-child .mono,
body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody td.role-cell .mono{
  display:block!important;
  max-width:100%!important;
  margin-top:4px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:12px!important;
  line-height:1.25!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table thead th:not(:first-child),
body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody td:not(:first-child){
  width:71px!important;
  min-width:71px!important;
  max-width:71px!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table .perm-cell{
  padding:8px!important;
  text-align:center!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table .wms-check{
  display:inline-grid!important;
  place-items:center!important;
  width:38px!important;
  height:38px!important;
  margin:0 auto!important;
  padding:0!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table .wms-check input{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table .wms-check-box{
  width:24px!important;
  height:24px!important;
  margin:0!important;
  border-radius:7px!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.42)!important;}
body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody tr:nth-child(even) td:first-child{background:var(--panel2)!important;}
body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody tr:hover td{background:rgba(16,185,129,.16)!important;}
body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody tr:hover td:first-child{background:#fae7ee!important;}
body.floralid-wms-body #floralid-wms-root .role-permissions-scroll::-webkit-scrollbar{width:12px;height:12px;}
body.floralid-wms-body #floralid-wms-root .role-permissions-scroll::-webkit-scrollbar-track{background:rgba(16,185,129,.12);border-radius:999px;}
body.floralid-wms-body #floralid-wms-root .role-permissions-scroll::-webkit-scrollbar-thumb{background:var(--brand);border:3px solid var(--panel2);border-radius:999px;}
@media(max-width:900px){
  body.floralid-wms-body #floralid-wms-root .role-permissions-head{grid-template-columns:1fr!important;}
  body.floralid-wms-body #floralid-wms-root .role-permissions-head #save-role-perms-btn{justify-self:start!important;width:100%!important;}
  body.floralid-wms-body #floralid-wms-root .role-permissions-table.tbl,
  body.floralid-wms-body #floralid-wms-root table.role-permissions-table{min-width:2200px!important;}
  body.floralid-wms-body #floralid-wms-root .role-permissions-table thead th:first-child,
  body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody td:first-child,
  body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody td.role-cell{width:218px!important;min-width:218px!important;max-width:218px!important;}
}


/* v3.2.30 definitive role matrix + overflow hardening.
   Keep the permission matrix inside its own scroll viewport so the horizontal
   scrollbar is visible at the bottom of the matrix instead of being clipped by
   the app shell. */
body.floralid-wms-body #floralid-wms-root .role-permissions-card{
  overflow:visible!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  padding:22px!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-head{
  position:sticky!important;
  top:0!important;
  z-index:50!important;
  background:var(--panel2)!important;
  padding-bottom:14px!important;
  margin-bottom:14px!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-scroll{
  display:block!important;
  position:relative!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:min(48vh,520px)!important;
  min-height:360px!important;
  overflow-x:scroll!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  background:var(--panel2)!important;
  box-shadow:0 1px 4px var(--shadow-soft)!important;
  scrollbar-gutter:stable both-edges!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-scroll::after{
  content:"Scroll sideways to view all permissions";
  position:sticky!important;
  left:0!important;
  bottom:0!important;
  display:block!important;
  width:max-content!important;
  min-width:260px!important;
  padding:7px 12px!important;
  margin-top:-1px!important;
  background:linear-gradient(90deg,var(--panel2),rgba(255,255,255,.74))!important;
  color:var(--muted)!important;
  font:800 11px/1 var(--font-ui)!important;
  letter-spacing:.04em!important;
  pointer-events:none!important;
  z-index:45!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table.tbl,
body.floralid-wms-body #floralid-wms-root table.role-permissions-table{
  width:max-content!important;
  min-width:2520px!important;
  max-width:none!important;
  table-layout:fixed!important;
  margin:0 0 18px 0!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table thead th{
  position:sticky!important;
  top:0!important;
  z-index:30!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table thead th:first-child,
body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody td:first-child,
body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody td.role-cell{
  position:sticky!important;
  left:0!important;
  z-index:35!important;
  width:270px!important;
  min-width:270px!important;
  max-width:270px!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-table thead th:first-child{z-index:55!important;}
body.floralid-wms-body #floralid-wms-root .role-permissions-table thead th:not(:first-child),
body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody td:not(:first-child){
  width:76px!important;
  min-width:76px!important;
  max-width:76px!important;
}
body.floralid-wms-body #floralid-wms-root .role-permissions-scroll::-webkit-scrollbar{width:14px!important;height:14px!important;display:block!important;}
body.floralid-wms-body #floralid-wms-root .role-permissions-scroll::-webkit-scrollbar-track{background:rgba(16,185,129,.16)!important;border-radius:999px!important;}
body.floralid-wms-body #floralid-wms-root .role-permissions-scroll::-webkit-scrollbar-thumb{background:var(--brand)!important;border:3px solid var(--panel2)!important;border-radius:999px!important;}
@media(max-width:900px){
  body.floralid-wms-body #floralid-wms-root .role-permissions-scroll{height:min(54vh,520px)!important;min-height:320px!important;}
  body.floralid-wms-body #floralid-wms-root .role-permissions-table.tbl,
  body.floralid-wms-body #floralid-wms-root table.role-permissions-table{min-width:2360px!important;}
  body.floralid-wms-body #floralid-wms-root .role-permissions-table thead th:first-child,
  body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody td:first-child,
  body.floralid-wms-body #floralid-wms-root .role-permissions-table tbody td.role-cell{width:230px!important;min-width:230px!important;max-width:230px!important;}
}

/* === FloralID WMS v3.2.36 — item view modal & barcode enhancement === */
.fwms-view-modal-backdrop{position:fixed;inset:0;background:rgba(15,15,20,.55);display:none;align-items:center;justify-content:center;z-index:99999;padding:24px 16px;overflow-y:auto}
.fwms-view-modal-backdrop.open{display:flex}
.fwms-view-modal{background:var(--surface,#fff);color:var(--text,#111);border-radius:18px;max-width:920px;width:100%;max-height:90dvh;overflow-y:auto;box-shadow:0 30px 80px rgba(0,0,0,.35);padding:28px 30px;position:relative;border:1px solid var(--border,rgba(0,0,0,.08))}
.fwms-view-modal-close{position:absolute;top:14px;right:18px;background:transparent;border:0;font-size:28px;cursor:pointer;color:inherit;line-height:1;padding:0;width:36px;height:36px;border-radius:50%}
.fwms-view-modal-close:hover{background:rgba(0,0,0,.06)}
.fwms-modal-title{font-family:var(--font-display);font-size:28px;margin:0 0 4px 0;line-height:1.15}
.fwms-modal-sub{color:var(--muted,#666);font-size:13px;margin-bottom:18px}
.fwms-modal-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:24px;margin-bottom:18px}
@media (max-width:720px){.fwms-modal-grid{grid-template-columns:1fr}}
.fwms-modal-media img{width:100%;border-radius:14px;display:block;background:#f8f8fb;aspect-ratio:1/1;object-fit:cover}
.fwms-modal-noimg{height:200px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--soft,#f0fdf4),var(--panel2,#fff));border:1px solid var(--line,rgba(0,0,0,.08));overflow:hidden}.fwms-noimg-svg{width:130px;height:130px;display:block}
.fwms-modal-barcode{margin-top:12px;background:#fff;border:1px solid var(--border,rgba(0,0,0,.08));border-radius:10px;padding:8px;overflow:auto}
.fwms-modal-barcode svg{display:block;max-width:100%;height:auto}
.fwms-modal-meta dl{display:grid;grid-template-columns:140px 1fr;gap:10px 16px;margin:0}
.fwms-modal-meta dt{color:var(--muted,#666);font-weight:500;font-size:13px}
.fwms-modal-meta dd{margin:0;font-weight:600;font-size:14px}
.fwms-modal-section{margin-top:8px}
.fwms-modal-section h3{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted,#666);margin:18px 0 10px 0;font-weight:700}
.fwms-modal-table{width:100%;border-collapse:collapse;font-size:13px}
.fwms-modal-table th,.fwms-modal-table td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--border,rgba(0,0,0,.07))}
.fwms-modal-table th{font-weight:600;color:var(--muted,#666);background:rgba(0,0,0,.02)}
.fwms-modal-table th.num,.fwms-modal-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.fwms-modal-loading,.fwms-modal-error,.fwms-empty{padding:32px;text-align:center;color:var(--muted,#666);font-size:14px}
.fwms-modal-error{color:#c0392b}
.fwms-view-item-btn{margin-top:12px}
.fwms-btn{background:transparent;border:1px solid var(--border,rgba(0,0,0,.15));padding:4px 10px;border-radius:8px;cursor:pointer;font:inherit;font-size:13px}
.fwms-btn:hover{background:rgba(0,0,0,.04)}
[data-theme="dark"] .fwms-view-modal{background:#16161c;color:#eaeaea;border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .fwms-view-modal-close:hover{background:rgba(255,255,255,.08)}
[data-theme="dark"] .fwms-modal-barcode{background:#fff}
[data-theme="dark"] .fwms-modal-table th{background:rgba(255,255,255,.04)}
[data-theme="dark"] .fwms-btn:hover{background:rgba(255,255,255,.06)}

/* v3.2.36 form action separator polish: visually separates submit actions from fields. */
body.floralid-wms-body .form-submit-row{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:12px!important;
  width:100%!important;
  margin-top:24px!important;
  padding-top:18px!important;
  border-top:1px solid color-mix(in srgb, var(--line) 72%, transparent)!important;
}
body.floralid-wms-body .row-actions.form-submit-row,
body.floralid-wms-body .form-actions.form-submit-row,
body.floralid-wms-body .op-submit-row.form-submit-row{
  margin-top:24px!important;
  padding-top:18px!important;
}
body.floralid-wms-body .form-submit-row .btn{
  margin-top:0!important;
}
body.floralid-wms-body .form-submit-row + .form-help,
body.floralid-wms-body .form-submit-row + .c-m{
  margin-top:10px!important;
}
@media(max-width:760px){
  body.floralid-wms-body .form-submit-row .btn{
    width:100%!important;
  }
}


/* v3.2.36b action placement fix: every create/edit form keeps its primary action inside the form card. */
body.floralid-wms-body .product-form-card .product-submit-row{
  margin-top:28px!important;
  padding-top:20px!important;
  border-top:1px solid color-mix(in srgb, var(--line) 78%, transparent)!important;
}
body.floralid-wms-body .product-form-card .product-submit-row .btn + .btn{
  margin-left:0!important;
}
body.floralid-wms-body .form-card > .form-submit-row,
body.floralid-wms-body .form-card form > .form-submit-row,
body.floralid-wms-body .stock-form-card > .form-submit-row,
body.floralid-wms-body .op-form-card form > .form-submit-row{
  clear:both!important;
}

/* v3.2.36c submit/action row audit: one separator language for every form card. */
#floralid-wms-root .form-submit-row,
body.floralid-wms-body .form-submit-row,
#floralid-wms-root .row-actions.form-submit-row,
#floralid-wms-root .form-actions.form-submit-row,
#floralid-wms-root .op-submit-row.form-submit-row{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:12px!important;
  width:100%!important;
  margin-top:26px!important;
  padding-top:18px!important;
  border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent)!important;
}
#floralid-wms-root .field-grid + .form-submit-row,
#floralid-wms-root .field-grid + .row-actions.form-submit-row,
#floralid-wms-root .al + .form-submit-row,
#floralid-wms-root .op-items + .op-submit-row,
#floralid-wms-root .form-error + .form-submit-row{
  margin-top:26px!important;
}
#floralid-wms-root .form-submit-row .btn,
#floralid-wms-root .row-actions.form-submit-row .btn,
#floralid-wms-root .form-actions.form-submit-row .btn{
  margin-top:0!important;
}
#floralid-wms-root .btn.has-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
#floralid-wms-root .btn.has-icon .btn-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:16px!important;
  height:16px!important;
  flex:0 0 16px!important;
  margin-left:-1px!important;
}
#floralid-wms-root .btn.has-icon .btn-icon .bi{
  width:16px!important;
  height:16px!important;
  display:block!important;
  vertical-align:middle!important;
}
@media(max-width:760px){
  #floralid-wms-root .form-submit-row .btn,
  #floralid-wms-root .row-actions.form-submit-row .btn,
  #floralid-wms-root .form-actions.form-submit-row .btn{
    width:100%!important;
  }
}


/* v3.2.36d final form submit separator audit
   Match the Line Items divider language exactly: one thin rule, same token,
   same padding rhythm, with actions aligned cleanly under the fields. */
#floralid-wms-root .form-submit-row,
body.floralid-wms-body #floralid-wms-root .form-submit-row,
#floralid-wms-root .row-actions.form-submit-row,
#floralid-wms-root .form-actions.form-submit-row,
#floralid-wms-root .op-submit-row.form-submit-row,
#floralid-wms-root .product-submit-row{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:12px!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  margin:28px 0 0!important;
  padding:18px 0 0!important;
  border-top:1.5px solid var(--tbl-separator)!important;
  border-right:0!important;
  border-bottom:0!important;
  border-left:0!important;
  background:transparent!important;
}
#floralid-wms-root .line-items-block + .form-submit-row,
#floralid-wms-root .line-items-list + .form-submit-row,
#floralid-wms-root .line-item-row + .form-submit-row{
  margin-top:28px!important;
}
#floralid-wms-root .form-submit-row .btn,
#floralid-wms-root .row-actions.form-submit-row .btn,
#floralid-wms-root .form-actions.form-submit-row .btn,
#floralid-wms-root .op-submit-row.form-submit-row .btn{
  margin:0!important;
  align-self:center!important;
}
#floralid-wms-root .btn.has-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
#floralid-wms-root .btn.has-icon .btn-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  flex:0 0 16px!important;
  margin:0!important;
}
#floralid-wms-root .btn.has-icon .btn-icon .bi,
#floralid-wms-root .btn.has-icon .btn-icon svg{
  display:block!important;
  width:16px!important;
  height:16px!important;
}
@media(max-width:760px){
  #floralid-wms-root .form-submit-row .btn,
  #floralid-wms-root .row-actions.form-submit-row .btn,
  #floralid-wms-root .form-actions.form-submit-row .btn,
  #floralid-wms-root .op-submit-row.form-submit-row .btn{
    width:100%!important;
  }
}

/* ═══════════════════════════════════════════════════════
   3.2.37 — User Management: Single-card layout + Add User modal
   ═══════════════════════════════════════════════════════ */

/* ── Remove the old two-column workspace layout ── */
body.floralid-wms-body .user-role-workspace{
  display:block;
  margin-top:0;
}

/* ── Full-width users card ── */
body.floralid-wms-body .users-card-full{
  width:100%;
}
body.floralid-wms-body .users-ch{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
body.floralid-wms-body .users-ch > div{
  flex:1 1 0;
  min-width:0;
}

/* ═══════════════════════════════════════════════════════
   Modal backdrop — full-screen frosted overlay
   ═══════════════════════════════════════════════════════ */
.wms-umodal-backdrop{
  position:fixed;
  inset:0;
  z-index:8500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
  background:rgba(0,0,0,0.38);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:wms-backdrop-in 220ms cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes wms-backdrop-in{
  from{opacity:0}
  to{opacity:1}
}

/* ═══════════════════════════════════════════════════════
   Modal card — slides up on open, scales from centre
   ═══════════════════════════════════════════════════════ */
.wms-umodal{
  background:var(--panel2,#fff);
  border:2px solid var(--line,#ececec);
  border-radius:24px;
  box-shadow:0 8px 32px rgba(0,0,0,.12);
  padding:32px 28px 24px;
  width:min(580px,100%);
  max-height:90dvh;
  overflow-y:auto;
  position:relative;
  animation:wms-modal-in 260ms cubic-bezier(.22,.68,0,1.2) both;
  scroll-behavior:smooth;
}
@keyframes wms-modal-in{
  from{opacity:0;transform:translateY(22px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ── Modal header ── */
.wms-umodal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:22px;
}
.wms-umodal-head .ct{
  font-size:18px;
}
.wms-umodal-close{
  flex-shrink:0;
  width:36px;
  height:36px;
  border:2px solid var(--line,#ececec);
  border-radius:50%;
  background:var(--panel,#f9f0f2);
  color:var(--ink,#111);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 140ms,border-color 140ms,transform 100ms;
}
.wms-umodal-close:hover{
  background:var(--brand,#10b981);
  border-color:var(--brand,#10b981);
  color:#fff;
  transform:scale(1.08);
}
.wms-umodal-close:active{
  transform:scale(.95);
}

/* ── Modal form grid ── */
.wms-umodal .user-create-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.wms-umodal .username-field,
.wms-umodal .password-field{
  grid-column:span 1;
}
.wms-umodal .fullname-field,
.wms-umodal .email-field,
.wms-umodal .role-field{
  grid-column:span 2;
}
@media(max-width:520px){
  .wms-umodal .user-create-grid{
    grid-template-columns:1fr;
  }
  .wms-umodal .username-field,
  .wms-umodal .password-field,
  .wms-umodal .fullname-field,
  .wms-umodal .email-field,
  .wms-umodal .role-field{
    grid-column:span 1;
  }
}

/* ── Modal footer ── */
.wms-umodal-foot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:24px;
  padding-top:20px;
  border-top:1.5px solid var(--line,#ececec);
}

/* ── Dark mode modal ── */
html[data-theme="dark"] .wms-umodal-backdrop{
  background:rgba(0,0,0,.56);
}
html[data-theme="dark"] .wms-umodal{
  background:var(--panel2);
  border-color:var(--line);
  box-shadow:0 8px 32px rgba(0,0,0,.24);
}
html[data-theme="dark"] .wms-umodal-close{
  background:var(--panel);
  border-color:var(--line);
  color:var(--ink);
}


/* === Users section: single-row card with modal add === */


/* ═══════════════════════════════════════════════════════
   v3.2.39 — Users table: responsive column sizing
   ═══════════════════════════════════════════════════════ */
.users-tbl{
  table-layout:fixed;
  width:100%;
  min-width:640px;
}
.users-tbl .utcol-name   { width: 18%; }
.users-tbl .utcol-email  { width: 26%; }
.users-tbl .utcol-role   { width: 14%; }
.users-tbl .utcol-status { width: 10%; }
.users-tbl .utcol-actions{ width: 32%; }

.users-tbl td:nth-child(1),
.users-tbl td:nth-child(2){
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:0;
}
.users-tbl td:nth-child(5){
  vertical-align:middle;
}
.users-tbl td:nth-child(5) .row-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.users-tbl-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

@media(max-width:860px){
  .users-tbl{
    min-width:560px;
    font-size:12px;
  }
  .users-tbl .utcol-name   { width: 20%; }
  .users-tbl .utcol-email  { width: 24%; }
  .users-tbl .utcol-role   { width: 16%; }
  .users-tbl .utcol-status { width: 10%; }
  .users-tbl .utcol-actions{ width: 30%; }
}

@media(max-width:640px){
  .users-tbl{ min-width:520px; }
  .users-tbl td:nth-child(5) .row-actions{
    flex-direction:column;
    align-items:flex-start;
  }
  .users-tbl td:nth-child(5) .btn{
    width:100%;
    justify-content:center;
  }
}

/* ============================================================
   FORM SPACING UNIFICATION — v3.2.39-fix
   Root cause: multiple layered iterations left field-group gap
   AND label.fl margin-bottom both active, creating double space.
   Also: inconsistent field-grid / form-container gap values.
   Fix: one canonical block at max specificity, !important fence.
   ============================================================ */

/* 1. FIELD-GROUP: pure flex-column, gap controls ALL spacing.
      Zero out any margin on children to kill double-gap. */
body.floralid-wms-body .field-group,
body.floralid-wms-body .form-card  .field-group,
body.floralid-wms-body .op-form-card .field-group,
body.floralid-wms-body .stock-form-card .field-group,
body.floralid-wms-body .product-form-card .field-group,
body.floralid-wms-body .barcode-form-card .field-group,
body.floralid-wms-body .account-password-grid .field-group,
body.floralid-wms-body .system-settings-grid .field-group,
body.floralid-wms-body .user-create-grid .field-group,
body.floralid-wms-body .line-item-row .field-group,
#floralid-wms-root .field-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. LABEL (.fl): zero out all margins — gap alone drives spacing.
      Keeps the ghost space from label margin-top and margin-bottom. */
body.floralid-wms-body .field-group label.fl,
body.floralid-wms-body .field-group > label,
body.floralid-wms-body .fl,
body.floralid-wms-body label.fl,
#floralid-wms-root .field-group > label.fl,
#floralid-wms-root .field-group > label,
#floralid-wms-root label.fl,
#floralid-wms-root .fl,
.login-card label,
.fg label {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--muted) !important;
  line-height: 1.2 !important;
}

/* 3. INPUTS: zero out any rogue margin-top/margin-bottom on inputs
      inside field-group — gap handles separation. */
body.floralid-wms-body .field-group > input.fi,
body.floralid-wms-body .field-group > select.fi,
body.floralid-wms-body .field-group > textarea.fi,
body.floralid-wms-body .field-group > .wms-select,
body.floralid-wms-body .field-group > .wms-select-trigger,
body.floralid-wms-body .field-group > .password-inline,
body.floralid-wms-body .field-group > .static-field,
#floralid-wms-root .field-group > input.fi,
#floralid-wms-root .field-group > select.fi,
#floralid-wms-root .field-group > textarea.fi,
#floralid-wms-root .field-group > .wms-select,
#floralid-wms-root .field-group > .wms-select-trigger,
#floralid-wms-root .field-group > .static-field {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 4. FIELD-GRID: uniform 16px gap between columns,
      uniform row gap between field-group rows.
      Consistent across ALL form card variants. */
body.floralid-wms-body .field-grid,
body.floralid-wms-body .form-card .field-grid,
body.floralid-wms-body .op-form-card .field-grid,
body.floralid-wms-body .stock-form-card .field-grid,
body.floralid-wms-body .product-form-card .field-grid,
body.floralid-wms-body .barcode-form-card .field-grid,
body.floralid-wms-body .account-password-grid,
body.floralid-wms-body .system-settings-grid,
body.floralid-wms-body .user-create-grid,
body.floralid-wms-body .line-item-row,
#floralid-wms-root .field-grid,
#floralid-wms-root .account-password-grid,
#floralid-wms-root .system-settings-grid,
#floralid-wms-root .user-create-grid {
  display: grid !important;
  gap: 16px !important;
  align-items: start !important;
  width: 100% !important;
}

/* 5. FORM CONTAINER (op-form / entity-form flex column):
      uniform 16px gap between field-grids and sections. */
body.floralid-wms-body .op-form,
body.floralid-wms-body .card form[data-entity-form],
body.floralid-wms-body .card form[data-op-form],
body.floralid-wms-body .wms-polished-form,
#floralid-wms-root .op-form,
#floralid-wms-root .card form[data-entity-form],
#floralid-wms-root .card form[data-op-form] {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* 6. CARD HEADER (.ct / .ch): consistent bottom margin before form body */
body.floralid-wms-body .form-card > .ct,
body.floralid-wms-body .op-form-card > .ct,
body.floralid-wms-body .stock-form-card > .ct,
#floralid-wms-root .form-card > .ct,
#floralid-wms-root .op-form-card > .ct,
#floralid-wms-root .stock-form-card > .ct {
  margin-bottom: 16px !important;
  margin-top: 0 !important;
}

/* 7. SUBMIT / ROW-ACTIONS: consistent top separation */
body.floralid-wms-body .row-actions,
body.floralid-wms-body .form-actions,
body.floralid-wms-body .op-submit-row,
body.floralid-wms-body .form-submit-row,
#floralid-wms-root .row-actions,
#floralid-wms-root .form-actions,
#floralid-wms-root .op-submit-row,
#floralid-wms-root .form-submit-row {
  margin-top: 8px !important;
  padding-top: 0 !important;
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* 8. BTN inside any form card: no extra margin-top (gap handles it) */
body.floralid-wms-body .form-card .btn,
body.floralid-wms-body .op-form-card .btn,
body.floralid-wms-body .stock-form-card .btn,
body.floralid-wms-body .product-form-card .btn,
#floralid-wms-root .form-card .btn,
#floralid-wms-root .op-form-card .btn,
#floralid-wms-root .stock-form-card .btn {
  margin-top: 0 !important;
}

/* 9. Old .fg label system: kill 16px top margin that bleeds in */
.fg label,
.login-card label {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 10. FR / FR2 / FR3 / FS legacy grids: unify gap to 16px */
body.floralid-wms-body .fr,
body.floralid-wms-body .fr2,
body.floralid-wms-body .fr3,
body.floralid-wms-body .fs,
#floralid-wms-root .fr,
#floralid-wms-root .fr2,
#floralid-wms-root .fr3,
#floralid-wms-root .fs {
  gap: 16px !important;
}

body.floralid-wms-body .fr > label.fl,
body.floralid-wms-body .fr2 > label.fl,
body.floralid-wms-body .fr3 > label.fl,
#floralid-wms-root .fr > label,
#floralid-wms-root .fr2 > label,
#floralid-wms-root .fr3 > label {
  margin: 0 !important;
}


/* ============================================================
   SUBMIT-ROW SPACING FINAL LOCK — v3.2.39-submitfix
   Problem: many layered rules set margin-top 18-28px on
   .row-actions / .form-submit-row. Some have double-ancestor
   specificity (body.floralid-wms-body #floralid-wms-root …)
   that beats our earlier patch. Also .card .btn{margin-top:10px}
   at the base layer adds phantom space above buttons inside
   field-groups.

   Target gap between last field and submit button: 16px.
   Achieved via margin-top on the submit row only (no padding).
   Buttons inside the row get margin-top:0.
   ============================================================ */

/* ── Max-specificity override for every submit/action row variant ── */
body.floralid-wms-body #floralid-wms-root .form-submit-row,
body.floralid-wms-body #floralid-wms-root .row-actions.form-submit-row,
body.floralid-wms-body #floralid-wms-root .form-actions.form-submit-row,
body.floralid-wms-body #floralid-wms-root .op-submit-row.form-submit-row,
body.floralid-wms-body #floralid-wms-root .op-submit-row,
body.floralid-wms-body #floralid-wms-root .row-actions,
body.floralid-wms-body #floralid-wms-root .form-actions,
body.floralid-wms-body .form-submit-row,
body.floralid-wms-body .row-actions,
body.floralid-wms-body .form-actions,
body.floralid-wms-body .op-submit-row,
#floralid-wms-root .form-submit-row,
#floralid-wms-root .row-actions,
#floralid-wms-root .form-actions,
#floralid-wms-root .op-submit-row,
.form-submit-row,
.row-actions,
.form-actions,
.op-submit-row {
  margin-top: 16px !important;
  padding-top: 0 !important;
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* ── Kill .card .btn { margin-top:10px } bleed on ALL buttons inside
      any form container — the row's own margin-top is enough ── */
body.floralid-wms-body #floralid-wms-root .form-submit-row .btn,
body.floralid-wms-body #floralid-wms-root .row-actions .btn,
body.floralid-wms-body #floralid-wms-root .form-actions .btn,
body.floralid-wms-body #floralid-wms-root .op-submit-row .btn,
body.floralid-wms-body .form-submit-row .btn,
body.floralid-wms-body .row-actions .btn,
body.floralid-wms-body .form-actions .btn,
body.floralid-wms-body .op-submit-row .btn,
#floralid-wms-root .form-submit-row .btn,
#floralid-wms-root .row-actions .btn,
#floralid-wms-root .form-actions .btn,
#floralid-wms-root .op-submit-row .btn,
.form-submit-row .btn,
.row-actions .btn,
.form-actions .btn,
.op-submit-row .btn {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ── Also zero out the generic .card .btn / .card button rule
      for any button that lives INSIDE a field-group or submit row
      (prevents double spacing from the base layer) ── */
body.floralid-wms-body .field-group .btn,
body.floralid-wms-body .field-group button,
body.floralid-wms-body .form-card .btn,
body.floralid-wms-body .op-form-card .btn,
body.floralid-wms-body .stock-form-card .btn,
body.floralid-wms-body .product-form-card .btn,
body.floralid-wms-body .barcode-form-card .btn,
#floralid-wms-root .field-group .btn,
#floralid-wms-root .field-group button,
#floralid-wms-root .form-card .btn,
#floralid-wms-root .op-form-card .btn,
#floralid-wms-root .stock-form-card .btn,
#floralid-wms-root .product-form-card .btn,
#floralid-wms-root .barcode-form-card .btn {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ── Entity-form (.card form[data-entity-form]) submit area:
      the form uses flex-column gap:16px, so the submit row
      already gets 16px from the gap. Neutralise the extra
      margin-top so we don't double-count. ── */
body.floralid-wms-body .card form[data-entity-form] .row-actions,
body.floralid-wms-body .card form[data-entity-form] .form-submit-row,
body.floralid-wms-body .card form[data-op-form] .row-actions,
body.floralid-wms-body .card form[data-op-form] .form-submit-row,
#floralid-wms-root .card form[data-entity-form] .row-actions,
#floralid-wms-root .card form[data-entity-form] .form-submit-row,
#floralid-wms-root .card form[data-op-form] .row-actions,
#floralid-wms-root .card form[data-op-form] .form-submit-row {
  margin-top: 0 !important;
}

/* ── Special case: adjustment form has an .al.w alert between
      fields and submit. Give it the same 16px gap from the alert. ── */
body.floralid-wms-body .al + .form-submit-row,
body.floralid-wms-body .al + .row-actions,
#floralid-wms-root .al + .form-submit-row,
#floralid-wms-root .al + .row-actions {
  margin-top: 16px !important;
}


/* ============================================================
   ENTITY-FORM SUBMIT ROW CORRECTION — v3.2.39-entityfix
   entityCrudView uses <form data-entity-form> with a field-grid
   directly inside (no op-form flex wrapper). The submit row IS
   a direct sibling of field-grid, so margin-top:16px is correct
   and must NOT be zeroed. Restore it here after the earlier
   blanket zero-out for flex-gap contexts.
   ============================================================ */
body.floralid-wms-body .card form[data-entity-form] > .row-actions,
body.floralid-wms-body .card form[data-entity-form] > .form-submit-row,
body.floralid-wms-body .card form[data-op-form] > .row-actions,
body.floralid-wms-body .card form[data-op-form] > .form-submit-row,
#floralid-wms-root .card form[data-entity-form] > .row-actions,
#floralid-wms-root .card form[data-entity-form] > .form-submit-row,
#floralid-wms-root .card form[data-op-form] > .row-actions,
#floralid-wms-root .card form[data-op-form] > .form-submit-row,
body.floralid-wms-body #floralid-wms-root .card form[data-entity-form] > .row-actions,
body.floralid-wms-body #floralid-wms-root .card form[data-entity-form] > .form-submit-row,
body.floralid-wms-body #floralid-wms-root .card form[data-op-form] > .row-actions,
body.floralid-wms-body #floralid-wms-root .card form[data-op-form] > .form-submit-row {
  margin-top: 16px !important;
}

/* Buttons inside these rows must still have zero individual margin */
body.floralid-wms-body .card form[data-entity-form] > .row-actions .btn,
body.floralid-wms-body .card form[data-entity-form] > .form-submit-row .btn,
body.floralid-wms-body .card form[data-op-form] > .row-actions .btn,
body.floralid-wms-body .card form[data-op-form] > .form-submit-row .btn,
#floralid-wms-root .card form[data-entity-form] > .row-actions .btn,
#floralid-wms-root .card form[data-entity-form] > .form-submit-row .btn,
#floralid-wms-root .card form[data-op-form] > .row-actions .btn,
#floralid-wms-root .card form[data-op-form] > .form-submit-row .btn,
body.floralid-wms-body #floralid-wms-root .card form[data-entity-form] > .row-actions .btn,
body.floralid-wms-body #floralid-wms-root .card form[data-entity-form] > .form-submit-row .btn,
body.floralid-wms-body #floralid-wms-root .card form[data-op-form] > .row-actions .btn,
body.floralid-wms-body #floralid-wms-root .card form[data-op-form] > .form-submit-row .btn {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* ============================================================
   SUBMIT-ROW FINAL NUCLEAR FIX — v3.2.41-gap
   Root causes identified:
   1. .field-grid { margin-bottom:16px } bleeds into submit area
   2. .product-submit-row: margin-top:28px + padding-top:20px  
   3. #root .product-submit-row: margin:28px + padding:18px
   4. border-top adds visual height ON TOP of all margins
   All combined = 62-64px gap. Target = 16px total.
   ============================================================ */

/* ── 1. Kill margin-bottom on ALL field-grids inside form cards ── */
body.floralid-wms-body .form-card .field-grid,
body.floralid-wms-body .op-form-card .field-grid,
body.floralid-wms-body .stock-form-card .field-grid,
body.floralid-wms-body .product-form-card .field-grid,
body.floralid-wms-body .barcode-form-card .field-grid,
body.floralid-wms-body .card form[data-entity-form] .field-grid,
body.floralid-wms-body .card form[data-op-form] .field-grid,
body.floralid-wms-body #floralid-wms-root .form-card .field-grid,
body.floralid-wms-body #floralid-wms-root .product-form-card .field-grid,
body.floralid-wms-body #floralid-wms-root .barcode-form-card .field-grid,
body.floralid-wms-body #floralid-wms-root .op-form-card .field-grid,
body.floralid-wms-body #floralid-wms-root .stock-form-card .field-grid,
#floralid-wms-root .form-card .field-grid,
#floralid-wms-root .op-form-card .field-grid,
#floralid-wms-root .stock-form-card .field-grid,
#floralid-wms-root .product-form-card .field-grid,
#floralid-wms-root .barcode-form-card .field-grid,
#floralid-wms-root .card form[data-entity-form] .field-grid,
#floralid-wms-root .card form[data-op-form] .field-grid {
  margin-bottom: 0 !important;
}

/* ── 2. Product submit row: strip all extra margin/padding/border ── */
body.floralid-wms-body .product-form-card .product-submit-row,
body.floralid-wms-body .product-form-card .form-submit-row,
body.floralid-wms-body #floralid-wms-root .product-form-card .product-submit-row,
body.floralid-wms-body #floralid-wms-root .product-form-card .form-submit-row,
#floralid-wms-root .product-submit-row,
#floralid-wms-root .product-form-card .product-submit-row,
#floralid-wms-root .product-form-card .form-submit-row {
  margin-top: 16px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top: none !important;
  border: none !important;
}

/* ── 3. Barcode form submit row: same treatment ── */
body.floralid-wms-body .barcode-form-card .row-actions,
body.floralid-wms-body .barcode-form-card .form-submit-row,
body.floralid-wms-body #floralid-wms-root .barcode-form-card .row-actions,
body.floralid-wms-body #floralid-wms-root .barcode-form-card .form-submit-row,
#floralid-wms-root .barcode-form-card .row-actions,
#floralid-wms-root .barcode-form-card .form-submit-row {
  margin-top: 16px !important;
  padding-top: 0 !important;
  border-top: none !important;
  border: none !important;
}

/* ── 4. Entity form (categories/suppliers/warehouses): same ── */
body.floralid-wms-body .card form[data-entity-form] > .row-actions,
body.floralid-wms-body .card form[data-entity-form] > .form-submit-row,
body.floralid-wms-body #floralid-wms-root .card form[data-entity-form] > .row-actions,
body.floralid-wms-body #floralid-wms-root .card form[data-entity-form] > .form-submit-row,
#floralid-wms-root .card form[data-entity-form] > .row-actions,
#floralid-wms-root .card form[data-entity-form] > .form-submit-row {
  margin-top: 16px !important;
  padding-top: 0 !important;
  border-top: none !important;
  border: none !important;
}

/* ── 5. Stock/op forms: same ── */
body.floralid-wms-body .stock-form-card .form-submit-row,
body.floralid-wms-body .stock-form-card .row-actions,
body.floralid-wms-body .op-form-card .form-submit-row,
body.floralid-wms-body .op-form-card .row-actions,
body.floralid-wms-body .form-card .form-submit-row,
body.floralid-wms-body .form-card .row-actions,
body.floralid-wms-body #floralid-wms-root .stock-form-card .form-submit-row,
body.floralid-wms-body #floralid-wms-root .op-form-card .form-submit-row,
body.floralid-wms-body #floralid-wms-root .form-card .form-submit-row,
#floralid-wms-root .stock-form-card .form-submit-row,
#floralid-wms-root .op-form-card .form-submit-row,
#floralid-wms-root .form-card .form-submit-row {
  margin-top: 16px !important;
  padding-top: 0 !important;
  border-top: none !important;
  border: none !important;
}

/* ── 6. All .btn inside any submit row: zero margin ── */
body.floralid-wms-body #floralid-wms-root .product-submit-row .btn,
body.floralid-wms-body #floralid-wms-root .form-submit-row .btn,
body.floralid-wms-body #floralid-wms-root .row-actions .btn,
body.floralid-wms-body .product-submit-row .btn,
body.floralid-wms-body .form-submit-row .btn,
body.floralid-wms-body .row-actions .btn,
#floralid-wms-root .product-submit-row .btn,
#floralid-wms-root .form-submit-row .btn,
#floralid-wms-root .row-actions .btn {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* ============================================================
   SUBMIT-ROW SEPARATOR RESTORE + CORRECT SPACING — v3.2.42-b
   Previous fix wrongly removed border-top (the visual separator
   line between fields and submit area). That line is correct UX.
   The problem was margin-top:28px + padding-top:20px PLUS the
   border — stacking to 48-64px total gap.
   Correct: border-top separator with margin-top:16px + padding-top:12px
   That gives: 16px gap above line, 12px gap below line to button.
   ============================================================ */

/* Universal submit row: consistent separator + tight spacing */
body.floralid-wms-body #floralid-wms-root .product-submit-row,
body.floralid-wms-body #floralid-wms-root .product-form-card .form-submit-row,
body.floralid-wms-body #floralid-wms-root .barcode-form-card .form-submit-row,
body.floralid-wms-body #floralid-wms-root .barcode-form-card .row-actions,
body.floralid-wms-body #floralid-wms-root .form-card .form-submit-row,
body.floralid-wms-body #floralid-wms-root .form-card .row-actions,
body.floralid-wms-body #floralid-wms-root .stock-form-card .form-submit-row,
body.floralid-wms-body #floralid-wms-root .stock-form-card .row-actions,
body.floralid-wms-body #floralid-wms-root .op-form-card .form-submit-row,
body.floralid-wms-body #floralid-wms-root .op-form-card .row-actions,
body.floralid-wms-body #floralid-wms-root .card form[data-entity-form] > .row-actions,
body.floralid-wms-body #floralid-wms-root .card form[data-entity-form] > .form-submit-row,
body.floralid-wms-body .product-submit-row,
body.floralid-wms-body .product-form-card .form-submit-row,
body.floralid-wms-body .barcode-form-card .form-submit-row,
body.floralid-wms-body .barcode-form-card .row-actions,
body.floralid-wms-body .form-card .form-submit-row,
body.floralid-wms-body .form-card .row-actions,
body.floralid-wms-body .stock-form-card .form-submit-row,
body.floralid-wms-body .op-form-card .form-submit-row,
body.floralid-wms-body .card form[data-entity-form] > .row-actions,
body.floralid-wms-body .card form[data-entity-form] > .form-submit-row,
#floralid-wms-root .product-submit-row,
#floralid-wms-root .product-form-card .form-submit-row,
#floralid-wms-root .barcode-form-card .form-submit-row,
#floralid-wms-root .barcode-form-card .row-actions,
#floralid-wms-root .form-card .form-submit-row,
#floralid-wms-root .form-card .row-actions,
#floralid-wms-root .stock-form-card .form-submit-row,
#floralid-wms-root .op-form-card .form-submit-row,
#floralid-wms-root .card form[data-entity-form] > .row-actions,
#floralid-wms-root .card form[data-entity-form] > .form-submit-row {
  margin-top: 16px !important;
  padding-top: 14px !important;
  padding-bottom: 0 !important;
  border-top: 1.5px solid var(--tbl-separator) !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: none !important;
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Buttons inside: zero individual margin */
body.floralid-wms-body #floralid-wms-root .product-submit-row .btn,
body.floralid-wms-body #floralid-wms-root .form-submit-row .btn,
body.floralid-wms-body #floralid-wms-root .row-actions .btn,
body.floralid-wms-body .product-submit-row .btn,
body.floralid-wms-body .form-submit-row .btn,
body.floralid-wms-body .row-actions .btn,
#floralid-wms-root .product-submit-row .btn,
#floralid-wms-root .form-submit-row .btn,
#floralid-wms-root .row-actions .btn {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* ============================================================
   SUBMIT-ROW SINGLE SOURCE OF TRUTH — v3.2.43-final
   One block. Maximum specificity. Covers every form type.
   ALL submit rows get identical treatment:
     - margin-top: 16px  (space from last field to separator line)
     - border-top: 1.5px solid var(--tbl-separator)  (the divider)
     - padding-top: 14px  (space from separator line to button)
     - padding-bottom: 0
     - no other borders
   This overrides ALL prior conflicting rules.
   ============================================================ */

body.floralid-wms-body #floralid-wms-root .form-submit-row,
body.floralid-wms-body #floralid-wms-root .row-actions.form-submit-row,
body.floralid-wms-body #floralid-wms-root .op-submit-row.form-submit-row,
body.floralid-wms-body #floralid-wms-root .product-submit-row,
body.floralid-wms-body #floralid-wms-root .op-submit-row,
body.floralid-wms-body #floralid-wms-root .row-actions,
body.floralid-wms-body #floralid-wms-root .form-actions,
body.floralid-wms-body .form-submit-row,
body.floralid-wms-body .row-actions.form-submit-row,
body.floralid-wms-body .op-submit-row.form-submit-row,
body.floralid-wms-body .product-submit-row,
body.floralid-wms-body .op-submit-row,
body.floralid-wms-body .row-actions,
body.floralid-wms-body .form-actions,
#floralid-wms-root .form-submit-row,
#floralid-wms-root .row-actions.form-submit-row,
#floralid-wms-root .op-submit-row.form-submit-row,
#floralid-wms-root .product-submit-row,
#floralid-wms-root .op-submit-row,
#floralid-wms-root .row-actions,
#floralid-wms-root .form-actions {
  margin-top: 16px !important;
  padding-top: 14px !important;
  padding-bottom: 0 !important;
  border-top: 1.5px solid var(--tbl-separator) !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: none !important;
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* ── Exception: .row-actions used INSIDE table cells (not submit rows) ── */
body.floralid-wms-body #floralid-wms-root .tbl .row-actions,
body.floralid-wms-body #floralid-wms-root td .row-actions,
body.floralid-wms-body .tbl .row-actions,
body.floralid-wms-body td .row-actions,
#floralid-wms-root .tbl .row-actions,
#floralid-wms-root td .row-actions {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* ── All buttons inside any submit/action row: zero individual margin ── */
body.floralid-wms-body #floralid-wms-root .form-submit-row .btn,
body.floralid-wms-body #floralid-wms-root .row-actions .btn,
body.floralid-wms-body #floralid-wms-root .op-submit-row .btn,
body.floralid-wms-body #floralid-wms-root .product-submit-row .btn,
body.floralid-wms-body #floralid-wms-root .form-actions .btn,
body.floralid-wms-body .form-submit-row .btn,
body.floralid-wms-body .row-actions .btn,
body.floralid-wms-body .op-submit-row .btn,
body.floralid-wms-body .product-submit-row .btn,
body.floralid-wms-body .form-actions .btn,
#floralid-wms-root .form-submit-row .btn,
#floralid-wms-root .row-actions .btn,
#floralid-wms-root .op-submit-row .btn,
#floralid-wms-root .product-submit-row .btn,
#floralid-wms-root .form-actions .btn {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ── Confirm modal row-actions: no separator (it's a dialog, not a form) ── */
body.floralid-wms-body #floralid-wms-root .wms-modal-backdrop .row-actions,
body.floralid-wms-body .wms-modal-backdrop .row-actions,
#floralid-wms-root .wms-modal-backdrop .row-actions {
  margin-top: 16px !important;
  padding-top: 0 !important;
  border-top: none !important;
}


/* ══════════════════════════════════════════════════════════════════
   CONFIRM MODAL — v3.2.46
   Uses the same wms-umodal-backdrop / wms-umodal infrastructure as
   the user-creation modal so it is always perfectly centered with
   the same backdrop, animation, border-radius, and dark-mode support.
   The wms-confirm-dialog modifier makes it narrower than the user
   modal (420 px vs 580 px) and keeps the footer right-aligned.
══════════════════════════════════════════════════════════════════ */

.wms-confirm-backdrop {
  z-index: 9000;            /* above user modal (8500) */
}

.wms-confirm-dialog {
  width: min(440px, 100%);  /* tighter than the user modal */
  max-height: 80dvh;
}

.wms-confirm-dialog .wms-umodal-head .ct {
  font-size: 16px;
}

.wms-confirm-dialog .wms-umodal-head p.c-m {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted, #888);
  max-width: 360px;
}

.wms-confirm-dialog textarea.fi {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  margin-top: 4px;
}

/* Footer: Cancel (ghost) left, Confirm (brand) right */
.wms-confirm-dialog .wms-umodal-foot {
  justify-content: flex-end;
  gap: 10px;
}

/* ══════════════════════════════════════════════════════════════════
   SKELETON / SHIMMER — v3.2.51
   More robust shimmer: explicit from/to, smoother easing, and
   height tokens that match the actual content dimensions.
══════════════════════════════════════════════════════════════════ */

/* Re-declare @keyframes sh with explicit from step for full shimmer range */
@keyframes sh {
  from { background-position: 220% center; }
  to   { background-position: -220% center; }
}

/* Normalise all skeleton elements to use the same animation */
.skel, .skel-card, .skeleton-line {
  animation: sh 1.5s ease-in-out infinite !important;
  background: linear-gradient(
    90deg,
    var(--soft, #f5e8ec) 0%,
    var(--panel2, #fff)  40%,
    var(--panel2, #fff)  60%,
    var(--soft, #f5e8ec) 100%
  ) !important;
  background-size: 300% 100% !important;
  border-radius: 10px;
}

.skel-card {
  border-radius: 18px !important;
  border: 2px solid var(--line, #ececec) !important;
  height: 116px;
}

/* Dark-mode palette override */
html[data-theme="dark"] .skel,
html[data-theme="dark"] .skel-card,
html[data-theme="dark"] .skeleton-line {
  background: linear-gradient(
    90deg,
    var(--soft, #2a1f24) 0%,
    var(--panel2, #2e2229) 40%,
    var(--panel2, #2e2229) 60%,
    var(--soft, #2a1f24) 100%
  ) !important;
}

/* Skel inline-style spans inside the context-aware skeleton */
.skel[style], .skel-card[style] {
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   DYNAMIC LINE ITEMS — v3.2.54
   Add Item / Remove Item UX for operational form line-item blocks.
══════════════════════════════════════════════════════════════════ */

.line-items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.line-items-header .ct {
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
}

.op-add-item-btn {
  font-size: .8rem;
  font-weight: 600;
  color: var(--brand, #C4607A);
  border-color: var(--brand, #C4607A) !important;
  border-radius: 999px !important;
  padding: 4px 14px !important;
  letter-spacing: .01em;
  transition: background .15s, color .15s;
}

.op-add-item-btn:hover {
  background: var(--brand, #C4607A) !important;
  color: #fff !important;
}

.item-remove-col {
  display: flex;
  align-items: flex-end;
  padding-bottom: 2px;
}

.item-remove-btn {
  font-size: .8rem;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  color: var(--ink2) !important;
  border-color: var(--line) !important;
  transition: background .12s, color .12s, border-color .12s;
  line-height: 1.4;
}

.item-remove-btn:hover {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border-color: #dc2626 !important;
}

html[data-theme="dark"] .item-remove-btn:hover {
  background: rgba(220,38,38,.18) !important;
}

.op-item-row {
  position: relative;
  transition: opacity .15s ease;
}

.op-item-row.removing {
  opacity: 0;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════
   ANTI-FLICKER — smooth content transition when loading state changes.
   The .content div is the only area that swaps skeleton ↔ data,
   so a short opacity fade on it eliminates the jarring flash.
══════════════════════════════════════════════════════════════════ */

.content {
  transition: opacity .18s ease;
}

.content.wms-loading {
  opacity: 0;
  pointer-events: none;
}

/* Loading indicator inside the content area during view transitions */
.wms-view-loading {
  opacity: 1;
  transition: opacity .18s ease;
}

/* ══════════════════════════════════════════════════════════════════
   LINE-ITEM REMOVE BUTTON — v3.2.55
   × is absolutely-positioned on the top-right of the card so it
   never participates in the field-grid and never creates empty space.
══════════════════════════════════════════════════════════════════ */

/* The outer card wrapper — establishes the stacking context */
.op-item-row {
  position: relative !important;
  border: 1.5px solid var(--line, #ece6e8);
  border-radius: 18px;
  padding: 16px 14px 14px;
  background: var(--panel);
}

/* When a remove button is present give the card a bit of top padding
   so the × doesn't overlap the first row label */
.op-item-row.has-remove {
  padding-top: 36px !important;
}

/* The inner field grid — no extra margin needed now */
.op-item-row .line-item-row {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* × button — absolutely pinned top-right */
.item-remove-btn {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--ink2, #a08090) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background .13s ease, color .13s ease !important;
  z-index: 2 !important;
}

.item-remove-btn:hover {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}
.fwms-ios-wrap {
    position: relative;
    top: 15px;
    left: 0;
}
html[data-theme="dark"] .item-remove-btn:hover {
  background: rgba(220, 38, 38, .18) !important;
  color: #f87171 !important;
}

/* Remove the old item-remove-col field-group approach */
.item-remove-col { display: none !important; }

/* ─── v3.2.61 — Premium UI Overhaul ─────────────────────────────────── */

/* ── Typography Refinement ── */
body.floralid-wms-body{
  font-feature-settings:'cv01','cv02','cv11';
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  letter-spacing:-0.011em;
}
.content{font-size:14px;line-height:1.6}
.tbl td{font-size:13px;font-weight:600;letter-spacing:-0.006em}
.tbl th{font-size:10.5px;font-weight:900;letter-spacing:.1em}
.ct{font-size:15px;font-weight:850;letter-spacing:-0.02em}
.c-m,.card p{font-size:13.5px;font-weight:600;line-height:1.55}
.kpi-k,.rd-k,.sb-sec{font-size:10.5px;font-weight:900;letter-spacing:.13em}
.kpi-v{font-size:38px;font-weight:900;letter-spacing:-0.055em}
.ph-t{letter-spacing:-0.065em}
.hero h1{letter-spacing:-0.065em}
.sbi{font-size:13.5px;font-weight:800;letter-spacing:-0.01em}
.btn,.primary{font-size:13.5px;font-weight:850;letter-spacing:-0.01em}
.fl{font-size:11.5px;font-weight:900;letter-spacing:.06em}
.fi{font-size:14px;font-weight:600}

/* ── Page Transition System ── */
.content{
  --page-dur:.28s;
}
.content>.ph,
.content>.card,
.content>.sg,
.content>.ga,
.content>.g2,
.content>.g3,
.content>.g4,
.content>.kpis,
.content>.op-workspace,
.content>.stock-workspace,
.content>.admin-guide-card,
.content>.form-card{
  animation:wmsPageIn var(--page-dur) cubic-bezier(.22,1,.36,1) both;
}
.content>.ph{animation-delay:0s}
.content>.admin-guide-card{animation-delay:.04s}
.content>:nth-child(3){animation-delay:.06s}
.content>:nth-child(4){animation-delay:.08s}
.content>:nth-child(5){animation-delay:.1s}
.content>:nth-child(6){animation-delay:.12s}
.content>:nth-child(n+7){animation-delay:.14s}

@keyframes wmsPageIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* ── Loading Overlay v3.3.18 (duplicate-override neutralised — primary
   styles live at the first wms-loading-overlay block above) ── */
/* Intentionally empty: second-occurrence overrides removed to avoid
   clobbering the v3.3.18 premium loader styles defined earlier. */

/* ── Skeleton pulse refinement ── */
.skel,.skeleton-line{
  background:linear-gradient(90deg,var(--soft) 25%,var(--panel) 50%,var(--soft) 75%);
  background-size:250% 100%;
  animation:wmsShimmer 1.6s ease infinite;
  border-radius:12px;
}
@keyframes wmsShimmer{
  0%{background-position:200% 0}
  100%{background-position:-50% 0}
}
.skel-card{
  border:1px solid var(--line);border-radius:22px;
  padding:20px;min-height:110px;
  background:var(--panel2);
  box-shadow:0 2px 6px var(--shadow-soft);
  position:relative;overflow:hidden;
}
.skel-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%);
  background-size:250% 100%;
  animation:wmsShimmer 1.6s ease infinite;
}

/* ── Premium Card Polish ── */
.card,.kpi{
  transition:box-shadow .2s ease,transform .16s ease;
}
.card:hover{
  box-shadow:0 2px 10px var(--shadow-soft);
}
.form-card,.op-form-card,.stock-form-card{
  box-shadow:0 2px 8px var(--shadow-soft);
}

/* ── Sidebar refinement ── */
.sbi{transition:background .14s ease,box-shadow .14s ease,transform .12s ease}
.sbi:hover:not(.active){background:var(--soft);transform:translateX(2px)}
.sb-logo-t{font-size:24px;letter-spacing:-0.04em}
.sb-usr{transition:background .16s ease}

/* ── Button micro-interactions ── */
.btn,.primary{transition:transform .14s ease,box-shadow .14s ease,background .14s ease,opacity .14s ease}
.btn:active,.primary:active{transform:translateY(1px)!important;box-shadow:0 1px 2px var(--shadow-soft)!important}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important}

/* ── Toast animation ── */
.toast{
  animation:wmsToastIn .32s cubic-bezier(.22,1,.36,1);
}
@keyframes wmsToastIn{
  from{opacity:0;transform:translateY(16px) scale(.96)}
  to{opacity:1;transform:none}
}

/* ── Table row hover ── */
.tbl tbody tr{transition:background .12s ease}
.tbl tbody tr:hover{background:var(--soft)}

/* ── Badge/pill polish ── */
.b{transition:transform .12s ease}
.b.ok{background:var(--ico-ok)}.b.pen,.b.pri{background:var(--ico-warn)}.b.lo{background:var(--ico-out)}
.b.info{background:var(--ico-inf)}

/* ── Form field focus enhancement ── */
.fi:focus,.fg input:focus,.fg textarea:focus,.fg select:focus{
  border-color:var(--brand);
  box-shadow:var(--ring),4px 4px 0 var(--shadow-soft);
  transition:box-shadow .16s ease,border-color .16s ease;
}

/* ── Empty state polish ── */
.empty-state{padding:48px 24px}
.empty-state h3{font-family:var(--font-display);font-size:28px;letter-spacing:-0.04em;margin:16px 0 8px}
.empty-state p{color:var(--muted);font-weight:650;line-height:1.5;max-width:480px;margin:0 auto 18px}
.empty-svg{width:160px;height:auto;opacity:.7}
.empty-svg .petal{fill:var(--soft);stroke:var(--line);stroke-width:1.5}
.empty-svg .core{fill:var(--brand);stroke:var(--line);stroke-width:1.5}
.empty-svg rect{fill:var(--soft);stroke:none;opacity:.5}

/* ── Hide rack_code column from stock view tables (v3.2.61 - rak deprecation) ── */
/* The rack column is the 6th column (index 5) in stock form tables */
.stock-workspace .stock-table-card .tbl th:nth-child(6),
.stock-workspace .stock-table-card .tbl td:nth-child(6){display:none}

/* ── Progress bar polish ── */
.progress{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--tbl-separator-subtle);position:relative}
.progress:last-child{border-bottom:0}
.progress span{min-width:90px;font-weight:800;font-size:12.5px}
.progress b{min-width:70px;text-align:right;font-family:var(--font-mono);font-size:12px;font-weight:700}
.progress em{display:block;flex:1;height:10px;background:linear-gradient(90deg,var(--brand),var(--soft));border:1.5px solid var(--line);border-radius:999px;font-style:normal;transition:width .4s cubic-bezier(.22,1,.36,1)}

/* ── Responsive typography scaling ── */
@media(max-width:680px){
  .content{font-size:13.5px}
  .kpi-v{font-size:30px}
  .ct{font-size:14px}
  .sbi{font-size:13px}
  .btn,.primary{font-size:13px}
}

/* ── Dark theme loading overlay ── */
html[data-theme="dark"] .wms-loading-overlay{background:rgba(0,0,0,.32)}
html[data-theme="dark"] .wms-loading-msg{color:var(--ink)}

/* ── Confirm/User modal entrance transition ── */
.wms-umodal-backdrop,
#wms-confirm-modal,
.fwms-view-modal-backdrop{
  animation:wmsModalFadeIn .22s ease;
}
.wms-umodal,
.wms-confirm-card,
.fwms-view-modal{
  animation:wmsModalSlideIn .26s cubic-bezier(.22,1,.36,1);
}
@keyframes wmsModalFadeIn{from{opacity:0}to{opacity:1}}
@keyframes wmsModalSlideIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* ── Custom select open/close transition ── */
.wms-select-panel{
  transition:opacity .16s ease,transform .16s ease;
  transform-origin:top center;
}
.wms-select:not(.open) .wms-select-panel{
  opacity:0;transform:scaleY(.96) translateY(-4px);pointer-events:none;
}
.wms-select.open .wms-select-panel{
  opacity:1;transform:none;pointer-events:auto;
}

/* ── v3.2.61 end ── */

/* ── v3.3.3: login form spacing & responsiveness fix ── */

/* Card & wrapper */
body.floralid-wms-body .login-wrap{
  padding: clamp(16px, 5vw, 48px) !important;
  box-sizing: border-box;
}
body.floralid-wms-body .login-card{
  width: min(480px, 100%) !important;
  padding: clamp(24px, 6vw, 44px) !important;
}
body.floralid-wms-body .login-card .brand{
  margin: 24px 0 28px !important;
  gap: 16px !important;
}

/* Labels — override the !important margin:0 from the field-group normalizer */
body.floralid-wms-body .login-card label,
body.floralid-wms-body .login-wrap .login-card label{
  margin-top: 20px !important;
  margin-bottom: 8px !important;
}
/* First label needs no top gap */
body.floralid-wms-body .login-card label:first-of-type,
body.floralid-wms-body .login-wrap .login-card label:first-of-type{
  margin-top: 4px !important;
}

/* Inputs */
body.floralid-wms-body .login-card input:not([type="checkbox"]){
  padding: 15px 18px !important;
  min-height: 52px !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  border-radius: 12px !important;
}

/* reCAPTCHA box */
body.floralid-wms-body .login-card .recaptcha-box{
  margin-top: 20px !important;
  margin-bottom: 4px !important;
  gap: 10px !important;
}

/* Forgot password link */
body.floralid-wms-body .login-card .fwms-forgot-link,
body.floralid-wms-body .login-card a[href*="forgot"]{
  display: inline-block !important;
  margin-top: 10px !important;
  font-size: 13px !important;
}

/* Login button */
body.floralid-wms-body .login-card .primary{
  margin-top: 22px !important;
  padding: 15px 18px !important;
  font-size: 15px !important;
}

/* Login note */
body.floralid-wms-body .login-card .login-note{
  margin-top: 18px !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

/* Mobile */
@media (max-width: 480px){
  body.floralid-wms-body .login-card{
    padding: 24px 20px !important;
    border-radius: 16px !important;
  }
  body.floralid-wms-body .login-card .brand h1{
    font-size: 26px !important;
  }
  body.floralid-wms-body .login-card .brand{
    margin: 18px 0 22px !important;
  }
  body.floralid-wms-body .login-card label,
  body.floralid-wms-body .login-wrap .login-card label{
    margin-top: 16px !important;
    margin-bottom: 7px !important;
  }
  body.floralid-wms-body .login-card input:not([type="checkbox"]){
    padding: 13px 16px !important;
    min-height: 48px !important;
  }
  body.floralid-wms-body .login-card .primary{
    margin-top: 18px !important;
    padding: 14px 18px !important;
  }
  body.floralid-wms-body .login-card .recaptcha-box{
    margin-top: 16px !important;
  }
}
/* ── v3.3.3 end ── */

/* ── v3.3.3 scroll-fix v2: full scroll system rebuild ──────────────────────
   DESKTOP SCROLL CHAIN (>680px):
     body { overflow:hidden }          ← intentional, body never scrolls
     .wms-shell { height:100vh }       ← viewport-locked, clips only x
     .main { overflow:hidden }         ← clips border-radius; rows: auto+1fr
     .content { overflow-y:auto }      ← THE scroll container, gets height from 1fr
     .table-wrap { overflow:auto }     ← inner horizontal+vertical for tables

   MOBILE SCROLL CHAIN (≤680px):
     body { overflow:auto }            ← page scrolls naturally
     .wms-shell { height:auto }        ← grows with content
     .content { overflow:visible }     ← no independent scroll, body handles it

   FIXES APPLIED:
   A. Restore .main to overflow:hidden (NOT clip — clip breaks Firefox grid height)
   B. Ensure full height chain: wms-shell→main→content all have min-height:0
   C. .content gets explicit overflow-y:auto + scrollbar-gutter:stable
   D. .stock-table-card overflow:hidden→visible (was clipping table-wrap scroll)
   E. .table-wrap gets max-height cap so rows never escape the scroll boundary
   F. touch-action on .content and .table-wrap for trackpad/touch devices
   G. overscroll-behavior:contain on .content to prevent body scroll leak
   H. wms-shell stays 100vh; uses dvh as enhancement only (not replacement)
────────────────────────────────────────────────────────────────────────────── */

/* A. Height chain: shell is the root, main and content must not blow out */
body.floralid-wms-body .wms-shell {
  height: 100vh !important;
  min-height: 0 !important;
  /* dvh enhancement: on browsers that support it, exclude mobile browser chrome */
  height: 100dvh !important;
}

body.floralid-wms-body .main {
  /* overflow:hidden is correct here — it clips the border-radius on the panel.
     Do NOT change to clip: that breaks Firefox grid 1fr height resolution. */
  overflow: hidden !important;
  min-height: 0 !important;
  /* main IS a grid item inside wms-shell; it stretches to fill the 1fr column.
     grid-template-rows:auto 1fr means topbar takes auto, content takes 1fr. */
  display: grid !important;
  grid-template-rows: auto 1fr !important;
}

/* B. .content: THE scroll container — must have bounded height (from grid 1fr above) */
body.floralid-wms-body .content {
  min-height: 0 !important;        /* critical: allows grid 1fr to constrain it */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;   /* prevents layout shift when scrollbar appears */
  overscroll-behavior-y: contain !important; /* stops scroll chaining to body */
  touch-action: pan-y !important;       /* lets trackpad/touch scroll work */
}

/* C. .stock-table-card and .op-table-card: overflow:hidden clips the inner
      table-wrap's scrollbar and bottom rows. Must be visible. */
body.floralid-wms-body .stock-table-card,
body.floralid-wms-body .op-table-card {
  overflow: visible !important;
}

/* D. .table-wrap: must have a max-height so it doesn't grow taller than
      .content's viewport, pushing rows below the reachable scroll boundary.
      Also needs touch-action for two-axis touch/trackpad scroll. */
body.floralid-wms-body .table-wrap {
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  /* overscroll-behavior is intentionally NOT set here — managed by JS SmartScrollContain.
     Only .wms-scroll-contained (added by JS) enables contain, and only when
     the table actually has overflow to scroll. This prevents the table from
     blocking parent (.content) scroll when the table itself fits in view. */
  touch-action: pan-x pan-y !important;
}
/* JS-managed overscroll containment — applied only when table overflows */
body.floralid-wms-body .table-wrap.wms-scroll-contained {
  overscroll-behavior: contain !important;
}

/* Max-height cap: inside a card wrapper */
body.floralid-wms-body .card .table-wrap,
body.floralid-wms-body .stock-table-card .table-wrap,
body.floralid-wms-body .op-table-card .table-wrap,
body.floralid-wms-body .content > .table-wrap {
  max-height: min(68vh, 680px) !important;
}

/* dvh enhancement for max-height where supported */
@supports (max-height: 1dvh) {
  body.floralid-wms-body .card .table-wrap,
  body.floralid-wms-body .stock-table-card .table-wrap,
  body.floralid-wms-body .op-table-card .table-wrap,
  body.floralid-wms-body .content > .table-wrap {
    max-height: min(68dvh, 680px) !important;
  }
}

/* ── Tablet: 681px–1100px ── */
/* Sidebar hidden, single-column layout, content still scrolls independently */
@media (min-width: 681px) and (max-width: 1100px) {
  body.floralid-wms-body .wms-shell {
    height: 100vh !important;
    height: 100dvh !important;
  }
  body.floralid-wms-body .main {
    overflow: hidden !important;
    min-height: 0 !important;
  }
  body.floralid-wms-body .content {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

/* ── Mobile: ≤680px ── */
/* Shell becomes height:auto; body scrolls the whole page */
@media (max-width: 680px) {
  body.floralid-wms-body .wms-shell {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  body.floralid-wms-body .main {
    overflow: visible !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body.floralid-wms-body .content {
    overflow: visible !important;
    min-height: 0 !important;
    height: auto !important;
    scrollbar-gutter: auto !important;
    touch-action: auto !important;
    overscroll-behavior-y: auto !important;
  }
  /* On mobile, no height cap — body scroll handles everything */
  body.floralid-wms-body .card .table-wrap,
  body.floralid-wms-body .stock-table-card .table-wrap,
  body.floralid-wms-body .op-table-card .table-wrap,
  body.floralid-wms-body .content > .table-wrap {
    max-height: none !important;
  }
}
/* ── v3.3.3 scroll-fix v2 end ── */


/* ════════════════════════════════════════════════════════════════════════
   v3.3.6 — Overview card-icon restyle + Dark-mode contrast + Responsive nav
   Appended at end of file for highest precedence (later rules win on ties).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Task 2: premium tinted stat-card icons. Replaces the dated solid-green
   "pri" badge (white glyph on a filled green chip) with a translucent brand
   tint + brand-colored glyph, and gives every variant a matching semantic
   glyph color. Tuned for contrast in both light and dark themes. ─────────── */
:root{
  --ico-pri:rgba(16,185,129,.10);
  --ico-fg-pri:#0e9f6e;
  --ico-fg-ok:#0e9f6e;
  --ico-fg-warn:#c2700a;
  --ico-fg-out:#dc2626;
  --ico-fg-inf:#2563eb;
  --ico-fg-gld:#0e9f6e;
}
html[data-theme="dark"]{
  --ico-pri:rgba(52,211,153,.15);
  --ico-fg-pri:#34d399;
  --ico-fg-ok:#34d399;
  --ico-fg-warn:#fbbf24;
  --ico-fg-out:#f87171;
  --ico-fg-inf:#60a5fa;
  --ico-fg-gld:#34d399;
}
/* Light (and default): base + every variant get a tinted bg and colored glyph */
.sc-ico{background:var(--ico-pri);color:var(--ico-fg-pri);box-shadow:none}
.sc-ico.pri{background:var(--ico-pri);color:var(--ico-fg-pri)}
.sc-ico.ok{background:var(--ico-ok);color:var(--ico-fg-ok)}
.sc-ico.pen{background:var(--ico-warn);color:var(--ico-fg-warn)}
.sc-ico.out{background:var(--ico-out);color:var(--ico-fg-out)}
.sc-ico.inf{background:var(--ico-inf);color:var(--ico-fg-inf)}
.sc-ico.gld{background:var(--ico-gld);color:var(--ico-fg-gld)}
/* Dark: same selectors, theme-prefixed so they outrank the existing
   `html[data-theme="dark"] .sc-ico{color:var(--ink)}` rule, which would
   otherwise force the glyph back to near-white and kill the contrast. */
html[data-theme="dark"] .sc-ico{background:var(--ico-pri);color:var(--ico-fg-pri);box-shadow:none}
html[data-theme="dark"] .sc-ico.pri{background:var(--ico-pri);color:var(--ico-fg-pri)}
html[data-theme="dark"] .sc-ico.ok{background:var(--ico-ok);color:var(--ico-fg-ok)}
html[data-theme="dark"] .sc-ico.pen{background:var(--ico-warn);color:var(--ico-fg-warn)}
html[data-theme="dark"] .sc-ico.out{background:var(--ico-out);color:var(--ico-fg-out)}
html[data-theme="dark"] .sc-ico.inf{background:var(--ico-inf);color:var(--ico-fg-inf)}
html[data-theme="dark"] .sc-ico.gld{background:var(--ico-gld);color:var(--ico-fg-gld)}

/* ── v3.3.15: responsive horizontal navigation (≤1100px), pure CSS.
   The sidebar stays where Vue renders it (as a child of .wms-shell, sibling
   of .main). To visually place it BETWEEN .topbar and .content on mobile
   without touching the DOM, we set .main { display:contents } so its
   children (.topbar, .content) flatten into .wms-shell's flex container,
   then use `order` to lay them out as: topbar → sidebar → content.

   Why this is race-condition-free: the Vue shim re-renders by assigning
   .main.innerHTML on the fast path. With the sidebar never inside .main,
   that wipe cannot destroy or detach it. The shim's syncSidebar() updates
   the sidebar node in place, preserving its identity across navigations.
   No MutationObserver, no setTimeout, no rAF chase — the browser handles
   ordering in a single layout pass on every paint.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width:1100px){

  /* Shell: flex column so `order` works on its children, including the
     descendants of .main lifted in via display:contents. */
  body.floralid-wms-body .wms-shell{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    height:auto !important;
    min-height:100vh;
    padding:12px !important;
    gap:12px !important;
  }

  /* .main becomes layout-transparent on mobile: .topbar and .content
     become direct flex children of .wms-shell. .main keeps its semantic
     role (<main>) but generates no box. */
  body.floralid-wms-body .main{
    display:contents !important;
  }

  /* Order: topbar (1) → sidebar (2) → content (3) */
  body.floralid-wms-body .topbar  { order:1; }
  body.floralid-wms-body .sidebar { order:2; }
  body.floralid-wms-body .content { order:3; }

  /* Re-apply the card visuals that used to belong to .main, but to
     .topbar and .content individually now that .main has no box. */
  body.floralid-wms-body .topbar{
    border:1px solid var(--line) !important;
    border-radius:var(--radius) !important;
    background:var(--panel) !important;
    box-shadow:0 1px 3px var(--shadow-soft);
  }
  body.floralid-wms-body .content{
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--bg2);
    box-shadow:0 1px 3px var(--shadow-soft);
    min-width:0;
    max-width:100%;
  }

  /* Sidebar as pill bar (card-styled to match topbar/content on mobile).
     Note: .sidebar is the visual wrapper. .sb-scroll inside is THE scroller
     (overflow-x:auto). Do not put -webkit-overflow-scrolling on .sidebar —
     it's only meaningful on the actual scrolling element. */
  body.floralid-wms-body .sidebar{
    display:flex !important;
    flex-direction:row !important;
    align-items:stretch;
    overflow:hidden;
    background:var(--panel) !important;
    border:1px solid var(--line) !important;
    border-radius:var(--radius) !important;
    box-shadow:0 1px 3px var(--shadow-soft) !important;
    padding:0;
    margin:0;
    position:relative;
    /* Allow horizontal pan to bubble to the inner scroller. */
    touch-action:pan-x !important;
  }

  /* Hide desktop-only sidebar sections */
  body.floralid-wms-body .sidebar .sb-logo,
  body.floralid-wms-body .sidebar .sb-usr,
  body.floralid-wms-body .sidebar .sb-sec{display:none !important}

  /* Scroll rail — THE actual horizontal scroll container.
     `scroll-snap-type` has been deliberately removed: on iOS Safari and
     several Android WebViews, scroll-snap combined with `align-items:center`
     on a flex-row container intermittently locks scrolling and refuses to
     accept the first swipe gesture (you can scroll only after the page has
     been touched once elsewhere). Free scrolling is much more reliable. */
  body.floralid-wms-body .sidebar .sb-scroll{
    flex:1 1 auto;
    min-width:0;
    width:100%;
    max-width:100%;
    min-height:0;
    display:flex !important;
    flex-direction:row !important;
    align-items:center;
    gap:8px;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    /* pan-x ONLY (no `manipulation`) — manipulation disables double-tap
       zoom but in some browsers also interacts poorly with horizontal pan
       when the touch begins on a child button. Pure `pan-x` is the
       narrowest permission and most reliable. */
    touch-action:pan-x !important;
    scroll-behavior:smooth;
    padding:10px 16px !important;
    scrollbar-width:none;
    /* Hint to the compositor for smoother momentum on iOS. */
    -webkit-mask-image:-webkit-linear-gradient(top,#000,#000);
  }
  body.floralid-wms-body .sidebar .sb-scroll::-webkit-scrollbar{width:0;height:0;display:none}

  /* Pills */
  body.floralid-wms-body .sidebar .sbi{
    width:auto !important;
    flex:0 0 auto;
    white-space:nowrap;
    padding:9px 14px !important;
    margin:0 !important;
    min-height:0 !important;
  }

  /* Edge fades — toggled by app.enhance.js .fade-left / .fade-right */
  body.floralid-wms-body .sidebar::before,
  body.floralid-wms-body .sidebar::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:34px;
    pointer-events:none;
    z-index:3;
    opacity:0;
    transition:opacity .18s ease;
  }
  body.floralid-wms-body .sidebar::before{left:0;background:linear-gradient(to right,var(--panel),rgba(0,0,0,0))}
  body.floralid-wms-body .sidebar::after{right:0;background:linear-gradient(to left,var(--panel),rgba(0,0,0,0))}
  body.floralid-wms-body .sidebar.fade-left::before{opacity:1}
  body.floralid-wms-body .sidebar.fade-right::after{opacity:1}

  /* ── Topbar: strict 1-row layout on mobile ──
     Row 1: breadcrumb (.bc) left | icon buttons right — no wrapping.
     The search bar (.srch) is already hidden at this breakpoint.
     We force nowrap and let .bc truncate with ellipsis so the icon
     row never breaks onto a second line. */
  body.floralid-wms-body .topbar{
    flex-wrap:nowrap !important;
    padding:12px 14px !important;
    gap:8px !important;
  }
  body.floralid-wms-body .topbar .bc{
    flex:1 1 0;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  /* Group: lang-toggle + icon buttons — kept together, never shrink */
  body.floralid-wms-body .topbar .lang-toggle,
  body.floralid-wms-body .topbar .tbtn{
    flex:0 0 auto;
  }
}
/* ── v3.3.15 end ── */

/* ── v3.3.8: compact page-title on small mobile.
   The base rule (line 11) declares `.hero h1, .ph-t { font-size:clamp(28px,4vw,48px);
   letter-spacing:4px !important }`, and the `@media(max-width:680px)` block at
   line 13 then pushes font-size *up* to a hard 42px on mobile. The combination
   forces titles like "PRODUCT MASTER" to wrap to two lines on ~380px viewports.

   This block scales the title down on small mobile, drops the tracking to a more
   comfortable 1px (using !important to win over the global 4px !important), and
   adds `overflow-wrap` so genuinely long titles still degrade gracefully on very
   narrow phones instead of overflowing the content column. Result: "PRODUCT
   MASTER", "OWNER DASHBOARD", and equally-sized titles fit on one line; longer
   titles still wrap but at a tighter, more compact size. ─────────────────── */
@media(max-width:680px){
  body.floralid-wms-body .hero h1,
  body.floralid-wms-body .ph-t{
    font-size:clamp(22px, 7vw, 32px) !important;
    letter-spacing:1px !important;
    line-height:1 !important;
    overflow-wrap:break-word;
    word-break:normal;
    max-width:100%;
  }
}
/* ── v3.3.8 end ── */

/* ── v3.3.17: Zero-zoom normalizer — CSS layer ──────────────────────────
 * Root cause: iOS Safari (and some Android WebViews) automatically zoom
 * in whenever the user taps an <input>, <select>, or <textarea> whose
 * computed font-size is below 16px. The WMS app never set an explicit
 * font-size on inputs, so they inherited from the body (~14–15px on many
 * WordPress themes) — comfortably below the zoom threshold.
 *
 * Fix A — font-size ≥ 16px on every interactive field:
 *   The 16px floor is hard-coded into iOS Safari's zoom heuristic and cannot
 *   be negotiated away by any other CSS property. We set it on every selector
 *   that produces a user-editable field in this app, using `!important` so
 *   theme overrides from WordPress's own stylesheet do not regress this.
 *   The visual size stays unchanged because the field's padding/height is
 *   already explicit; only the text inside gets fractionally larger (16px vs
 *   ~14px is unnoticeable at the design scale we use).
 *
 * Fix B — touch-action: manipulation on inputs:
 *   `manipulation` allows panning and pinching but disables double-tap-zoom
 *   specifically on the element. This is the direct CSS kill-switch for the
 *   double-tap trigger (separate from the focus-zoom). Accessibility-safe:
 *   it only removes double-tap-zoom, not pinch-zoom or any other gesture.
 *
 * Fix C — -webkit-text-size-adjust: 100%:
 *   Stops Mobile Safari from boosting text sizes on rotation or reflow.
 *   Already best-practice; added defensively so theme resets can't undo it.
 * ──────────────────────────────────────────────────────────────────── */

/* C — text-size-adjust */
body.floralid-wms-body,
#floralid-wms-root {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* A + B — 16px floor + disable double-tap-zoom on every input type */
body.floralid-wms-body input,
body.floralid-wms-body select,
body.floralid-wms-body textarea,
#floralid-wms-root input,
#floralid-wms-root select,
#floralid-wms-root textarea {
  font-size: 16px !important;
  touch-action: manipulation;
}

/* Preserve mono style on SKU / barcode fields */
body.floralid-wms-body input.mono,
#floralid-wms-root input.mono {
  font-family: var(--font-mono) !important;
}

/* The wms-select custom dropdown search input inherits 16px from above,
   but its container has a tighter visual — keep the same floor. */
body.floralid-wms-body .wms-select-search,
#floralid-wms-root .wms-select-search {
  font-size: 16px !important;
}
/* ── v3.3.17 CSS end ── */

/* ──────────────────────────────────────────────────────────────────────
 * v3.6.0 — Premium toast notification
 *
 * Replaces the legacy `.toast` (sharp box, no icon) with a layered card
 * design that pairs an SVG status icon, semantic title, body message,
 * dismiss button, and a depleting progress strip. Colour tokens map to
 * the same palette the rest of the UI uses (--brand, --bad, --warn) so
 * the toast picks up light/dark theme automatically.
 *
 * Stacking rules:
 *   • Single-toast model on the App level (`this.toast`). A new flash()
 *     replaces the previous toast immediately and clears its lingering
 *     timer to prevent the timer-leak that the old code shipped with.
 *   • Toast sits above modals (z-index 9100) but below the loading
 *     overlay (9999) so a long-running request shows the spinner, not
 *     stale toast content.
 *
 * Accessibility:
 *   • role="status" + aria-live="polite" for success/info/warning,
 *     aria-live="assertive" for error so screen-reader users hear it
 *     immediately.
 *   • aria-atomic="true" so the entire content is announced as one unit
 *     rather than letter-by-letter as it streams in.
 *   • Dismiss button has aria-label translated via t('toast_close').
 *   • prefers-reduced-motion honoured: drop the slide-in and progress
 *     animation but keep the static layout.
 * ──────────────────────────────────────────────────────────────────── */
.wms-toast{
  position:fixed;
  right:clamp(16px, 3vw, 30px);
  bottom:clamp(16px, 3vw, 30px);
  z-index:9100;
  display:flex;
  align-items:flex-start;
  gap:14px;
  width:min(420px, calc(100vw - 32px));
  padding:16px 16px 16px 18px;
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:
    0 1px 1px rgba(15,23,42,.04),
    0 8px 24px -8px rgba(15,23,42,.18),
    0 18px 40px -16px rgba(15,23,42,.22);
  font-family:var(--font-ui, inherit);
  overflow:hidden;
  animation:wmsToastSlideIn .42s cubic-bezier(.22,1,.36,1);
  isolation:isolate;
}
.wms-toast::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:var(--brand);
  border-radius:18px 0 0 18px;
}
.wms-toast-icon{
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(16,185,129,.10);
  color:var(--brand);
}
.wms-toast-icon svg{display:block;width:22px;height:22px}
.wms-toast-body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-top:1px;
}
.wms-toast-title{
  font-size:13px;
  font-weight:900;
  letter-spacing:.01em;
  line-height:1.2;
  color:var(--ink);
}
.wms-toast-message{
  font-size:13.5px;
  font-weight:600;
  line-height:1.5;
  color:var(--muted, #475569);
  word-break:break-word;
}
.wms-toast-close{
  flex:0 0 auto;
  width:28px;
  height:28px;
  margin:-2px -4px 0 0;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:var(--muted, #94a3b8);
  cursor:pointer;
  transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.wms-toast-close:hover,
.wms-toast-close:focus-visible{
  background:var(--soft);
  color:var(--ink);
  border-color:var(--line);
  outline:none;
}
.wms-toast-close svg{display:block}
.wms-toast-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:linear-gradient(90deg, var(--brand) 0%, var(--brand) 100%);
  transform-origin:left center;
  animation:wmsToastProgress 3.5s linear forwards;
  opacity:.65;
}

/* ── Variant: success ── */
.wms-toast-success::before{background:var(--ok, #10b981)}
.wms-toast-success .wms-toast-icon{
  background:rgba(16,185,129,.12);
  color:var(--ok, #10b981);
}
.wms-toast-progress-success{background:var(--ok, #10b981)}

/* ── Variant: error ── */
.wms-toast-error::before{background:var(--bad, #ef4444)}
.wms-toast-error .wms-toast-icon{
  background:rgba(239,68,68,.12);
  color:var(--bad, #ef4444);
}
.wms-toast-progress-error{background:var(--bad, #ef4444);animation-duration:5.5s}

/* ── Variant: warning ── */
.wms-toast-warning::before{background:var(--warn, #f59e0b)}
.wms-toast-warning .wms-toast-icon{
  background:rgba(245,158,11,.14);
  color:var(--warn, #f59e0b);
}
.wms-toast-progress-warning{background:var(--warn, #f59e0b)}

/* ── Variant: info ── */
.wms-toast-info::before{background:var(--ico-inf, #6366f1)}
.wms-toast-info .wms-toast-icon{
  background:rgba(99,102,241,.12);
  color:var(--ico-inf, #6366f1);
}
.wms-toast-progress-info{background:var(--ico-inf, #6366f1)}

/* ── Dark theme adjustments ── */
html[data-theme="dark"] .wms-toast{
  box-shadow:
    0 1px 1px rgba(0,0,0,.20),
    0 10px 28px -10px rgba(0,0,0,.55),
    0 20px 44px -18px rgba(0,0,0,.65);
}
html[data-theme="dark"] .wms-toast-close:hover,
html[data-theme="dark"] .wms-toast-close:focus-visible{
  background:rgba(255,255,255,.06);
}

/* ── Animations ── */
@keyframes wmsToastSlideIn{
  from{
    opacity:0;
    transform:translate3d(8px, 14px, 0) scale(.97);
  }
  to{
    opacity:1;
    transform:translate3d(0, 0, 0) scale(1);
  }
}
@keyframes wmsToastProgress{
  from{transform:scaleX(1)}
  to{transform:scaleX(0)}
}

/* ── Mobile compaction ── */
@media (max-width: 480px){
  .wms-toast{
    width:calc(100vw - 24px);
    padding:14px 14px 14px 16px;
    gap:12px;
    border-radius:16px;
  }
  .wms-toast-icon{width:34px;height:34px}
  .wms-toast-icon svg{width:20px;height:20px}
  .wms-toast-title{font-size:12.5px}
  .wms-toast-message{font-size:13px}
}

/* ── Reduced-motion users ── */
@media (prefers-reduced-motion: reduce){
  .wms-toast{animation:none}
  .wms-toast-progress{animation:none;transform:scaleX(0);opacity:0}
}
/* ── v3.6.0 toast end ── */

/* ============================================================
   v3.6.5 — Admin Guide Step Cards: Enhanced Visual Design
   Fixes: number badge color (white on brand green),
   adds gradient backgrounds, SVG connector lines, hover lift,
   subtle shimmer, and full responsive support.
   ============================================================ */

/* Card wrapper — glass-morphic with a faint green mesh gradient */
.admin-guide-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) clamp(140px,16vw,210px);
  gap: 24px;
  align-items: center;
  padding: 26px 30px;
  border-radius: 28px;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 80% at 0% 100%, rgba(16,185,129,.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 100% 0%, rgba(5,150,105,.05) 0%, transparent 65%),
    var(--panel2);
  box-shadow: 0 2px 16px var(--shadow-soft), 0 0 0 0.5px var(--line);
  position: relative;
  overflow: hidden;
  margin: 0 0 20px;
}

/* Decorative SVG-style arc in the corner */
.admin-guide-card::before {
  content: "";
  position: absolute;
  inset: auto -60px -80px auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 1.5px solid rgba(16,185,129,.18);
  background: radial-gradient(circle, rgba(16,185,129,.06) 0%, transparent 70%);
  pointer-events: none;
}
.admin-guide-card::after {
  content: "";
  position: absolute;
  inset: auto -30px -40px auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1.5px solid rgba(16,185,129,.22);
  background: transparent;
  pointer-events: none;
}

/* Guide copy: always visible, full z-index */
.guide-copy {
  position: relative;
  z-index: 2;
  display: grid;
  row-gap: 14px;
  align-content: center;
}
.guide-copy h2 { display: none; }

/* Eyebrow pill */
.guide-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1.5px solid rgba(16,185,129,.3);
  border-radius: 999px;
  background: rgba(16,185,129,.08);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand2);
  margin: 0;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}
.guide-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(16,185,129,.28), 0 0 6px rgba(16,185,129,.4);
  flex-shrink: 0;
}

/* Body text */
.guide-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  max-width: 100%;
}

/* Step list: 3 columns with connector feel */
.guide-copy ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
  position: relative;
}

/* Decorative SVG connector line between steps (pseudo on ul) */
.guide-copy ul::before {
  content: "";
  position: absolute;
  top: 22px;
  left: calc(33.333% - 6px);
  width: calc(33.333% + 12px);
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(16,185,129,.35), transparent);
  pointer-events: none;
  z-index: 0;
}

/* Step card */
.guide-copy li {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 14px 14px 14px 14px;
  border-radius: 20px;
  border: 1.5px solid rgba(16,185,129,.15);
  background: linear-gradient(135deg, var(--panel2) 0%, rgba(16,185,129,.04) 100%);
  box-shadow: 0 1px 6px var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.6);
  min-height: 64px;
  height: 100%;
  box-sizing: border-box;
  font-weight: 760;
  line-height: 1.45;
  opacity: 1;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.guide-copy li:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16,185,129,.12), 0 1px 4px var(--shadow-soft);
  border-color: rgba(16,185,129,.32);
}

/* Number badge — WHITE text on brand green, with glow ring */
.guide-copy li span {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
  border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 0 0 3px rgba(16,185,129,.22), 0 2px 6px rgba(16,185,129,.3);
  font-size: 12px;
  font-weight: 950;
  color: #ffffff !important;    /* FIX: was var(--ink) → black; now always white */
  line-height: 1;
  align-self: flex-start;
  margin-top: 1px;
  flex-shrink: 0;
}

/* Step text */
.guide-copy li p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 760;
  color: var(--ink);
  display: flex;
  align-items: flex-start;
  min-height: 26px;
}

/* SVG illustration pane */
.guide-art {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 130px;
}
.guide-svg {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(16,185,129,.18));
  transition: transform .3s ease;
}
.admin-guide-card:hover .guide-svg {
  transform: scale(1.04) translateY(-2px);
}
.guide-svg .g-back { fill: var(--panel2); stroke: var(--line); stroke-width: 3.5; }
.guide-svg .g-grid { fill: none; stroke: var(--muted); stroke-width: 4; stroke-linecap: round; opacity: .4; }
.guide-svg .g-dot  { fill: var(--brand); stroke: rgba(255,255,255,.4); stroke-width: 3; }
.guide-svg .g-check { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.guide-svg .g-box  { fill: rgba(16,185,129,.08); stroke: rgba(16,185,129,.3); stroke-width: 3; stroke-linejoin: round; }
.guide-svg .g-box2 { fill: var(--panel2); stroke: rgba(16,185,129,.2); stroke-width: 2.5; stroke-linejoin: round; }
.guide-svg .g-flower { fill: var(--brand); stroke: rgba(5,150,105,.6); stroke-width: 2; stroke-linejoin: round; }
.guide-svg .g-core { fill: var(--brand2); }

/* Dark mode adjustments */
html[data-theme="dark"] .admin-guide-card {
  background:
    radial-gradient(ellipse 60% 80% at 0% 100%, rgba(52,211,153,.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 100% 0%, rgba(16,185,129,.04) 0%, transparent 65%),
    var(--panel2);
  box-shadow: 0 2px 20px rgba(0,0,0,.28), 0 0 0 0.5px var(--line);
}
html[data-theme="dark"] .admin-guide-card::before {
  border-color: rgba(52,211,153,.12);
  background: radial-gradient(circle, rgba(52,211,153,.05) 0%, transparent 70%);
}
html[data-theme="dark"] .guide-eyebrow {
  background: rgba(52,211,153,.1);
  border-color: rgba(52,211,153,.24);
  color: var(--brand);
}
html[data-theme="dark"] .guide-copy li {
  background: linear-gradient(135deg, var(--panel2) 0%, rgba(52,211,153,.05) 100%);
  border-color: rgba(52,211,153,.14);
  box-shadow: 0 1px 6px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04);
  opacity: 1;
}
html[data-theme="dark"] .guide-copy li:hover {
  border-color: rgba(52,211,153,.28);
  box-shadow: 0 6px 18px rgba(52,211,153,.1), 0 1px 4px rgba(0,0,0,.2);
}
html[data-theme="dark"] .guide-copy li span {
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 0 0 3px rgba(52,211,153,.18), 0 2px 6px rgba(52,211,153,.25);
}
html[data-theme="dark"] .guide-copy ul::before {
  background: linear-gradient(90deg, transparent, rgba(52,211,153,.28), transparent);
}
html[data-theme="dark"] .guide-svg {
  filter: drop-shadow(0 4px 12px rgba(52,211,153,.14));
}

/* Responsive: hide art on medium, stack on small */
@media (max-width: 1280px) {
  .admin-guide-card {
    grid-template-columns: minmax(0,1fr) clamp(120px,13vw,175px);
    padding: 22px 24px;
  }
  .guide-svg { max-width: 160px; }
  .guide-copy ul { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
}
@media (max-width: 1100px) {
  .admin-guide-card { grid-template-columns: 1fr; }
  .guide-art { display: none; }
  .guide-copy ul { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 800px) {
  .guide-copy ul { grid-template-columns: 1fr; }
  .guide-copy ul::before { display: none; }
  .guide-copy li { min-height: 0; }
}
@media (max-width: 680px) {
  .admin-guide-card { padding: 18px; border-radius: 22px; }
  .guide-eyebrow { font-size: 10px; white-space: normal; }
  .guide-copy > p { font-size: 13px; }
}


/* ============================================================
   v3.6.7 CANONICAL PATCH SET
   Applied in order; each block carries max specificity so it
   wins over every prior layered rule without touching older CSS.
   ============================================================ */

/* ── PATCH 1 — DARK MODE: label.fl background blend ─────────
   The primary label.fl block (legacy "floating label" system)
   hard-codes background-color:#ffffff to create the cut-out
   effect where the label sits on top of the field border.
   In dark mode that white chip becomes a glowing white rectangle.
   Fix: override with var(--panel2) so the chip always matches
   the card/form-card surface behind it.
   ──────────────────────────────────────────────────────────── */
html[data-theme="dark"] body.floralid-wms-body .field-group label.fl,
html[data-theme="dark"] body.floralid-wms-body .fl,
html[data-theme="dark"] #floralid-wms-root .field-group label.fl,
html[data-theme="dark"] #floralid-wms-root .fl,
html[data-theme="dark"] .field-group label.fl {
  background-color: var(--panel2) !important;
  color: var(--muted) !important;
}

/* ── PATCH 2 — FIELD-GROUP compact: margin-bottom -33px ─────
   The form-spacing unification block (v3.2.39-fix) set
   margin:0 !important on every .field-group, which zeroed the
   deliberate -33px negative bottom margin used to pull
   field groups together for a denser layout.
   Fix: re-apply margin-bottom:-33px at higher specificity so
   the compact rhythm is restored across every form card type.
   ──────────────────────────────────────────────────────────── */
body.floralid-wms-body #floralid-wms-root .field-group,
body.floralid-wms-body .field-group,
body.floralid-wms-body .form-card .field-group,
body.floralid-wms-body .op-form-card .field-group,
body.floralid-wms-body .stock-form-card .field-group,
body.floralid-wms-body .product-form-card .field-group,
body.floralid-wms-body .barcode-form-card .field-group,
body.floralid-wms-body .account-password-grid .field-group,
body.floralid-wms-body .system-settings-grid .field-group,
body.floralid-wms-body .user-create-grid .field-group,
body.floralid-wms-body .line-item-row .field-group,
#floralid-wms-root .field-group {
  margin-bottom: -33px !important;
}

#floralid-wms-root .op-item-row .line-item-row .field-group {
    margin: -30px 0 -15px !important;
}

.al.w {
    margin-top: 50px;
}

/* ── PATCH 3 — SUBMIT ROW: remove visual separator ──────────
   Versions v3.2.42-b and v3.2.43-final restored a
   border-top:1.5px separator above every submit / action row
   based on earlier UX reasoning. The current design language
   no longer needs this divider; the -33px field-group compact
   layout and adequate margin-top already provide visual
   separation without a hard line.
   Fix: zero out border-top, reduce padding-top to 0 on every
   submit / action row variant at maximum specificity.
   ──────────────────────────────────────────────────────────── */
body.floralid-wms-body #floralid-wms-root .form-submit-row,
body.floralid-wms-body #floralid-wms-root .row-actions.form-submit-row,
body.floralid-wms-body #floralid-wms-root .form-actions.form-submit-row,
body.floralid-wms-body #floralid-wms-root .op-submit-row.form-submit-row,
body.floralid-wms-body #floralid-wms-root .product-submit-row,
body.floralid-wms-body #floralid-wms-root .op-submit-row,
body.floralid-wms-body #floralid-wms-root .row-actions,
body.floralid-wms-body #floralid-wms-root .form-actions,
body.floralid-wms-body .form-submit-row,
body.floralid-wms-body .row-actions.form-submit-row,
body.floralid-wms-body .form-actions.form-submit-row,
body.floralid-wms-body .op-submit-row.form-submit-row,
body.floralid-wms-body .product-submit-row,
body.floralid-wms-body .op-submit-row,
body.floralid-wms-body .row-actions,
body.floralid-wms-body .form-actions,
#floralid-wms-root .form-submit-row,
#floralid-wms-root .row-actions.form-submit-row,
#floralid-wms-root .form-actions.form-submit-row,
#floralid-wms-root .op-submit-row.form-submit-row,
#floralid-wms-root .product-submit-row,
#floralid-wms-root .op-submit-row,
#floralid-wms-root .row-actions,
#floralid-wms-root .form-actions {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 16px !important;
}

/* Exception: table-cell row-actions must never inherit form row styles */
body.floralid-wms-body #floralid-wms-root .tbl .row-actions,
body.floralid-wms-body #floralid-wms-root td .row-actions,
body.floralid-wms-body .tbl .row-actions,
body.floralid-wms-body td .row-actions,
#floralid-wms-root .tbl .row-actions,
#floralid-wms-root td .row-actions {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}


/* ============================================================
   v3.6.8 — fwms-float FIELD GROUP: label-on-top + accent focus
   ============================================================
   Context: .field-group.fwms-float renders the input BEFORE the
   label in DOM order (input, then <label class="fl">), which is
   required for the CSS sibling focus trick to work. Without an
   explicit order rule, the label naturally falls below the input.

   Fix A — Visual order: apply order:-1 to the label so it
            renders above the input inside the flex column,
            regardless of DOM position.

   Fix B — Reset the legacy floating-label positioning: the base
            .field-group label.fl rule applies bottom:-21px /
            position:relative / left:15px — that was designed for
            the old "label cuts through input border" pattern.
            fwms-float uses a clean label-above layout so those
            offsets must be zeroed out for this variant.

   Fix C — Accent colour on active / hover: use the CSS adjacent-
            sibling selector (.fwms-fl-ctrl:focus ~ label.fl) and
            the container hover (div:hover label.fl) so the label
            transitions to var(--brand) when the field is engaged.
   ============================================================ */

/* ── A + B: layout reset for fwms-float field groups ── */
body.floralid-wms-body .field-group.fwms-float,
#floralid-wms-root .field-group.fwms-float {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  position: relative !important;
}

body.floralid-wms-body .field-group.fwms-float label.fl,
#floralid-wms-root .field-group.fwms-float label.fl {
  /* move above the input regardless of DOM order */
  order: -1 !important;

  /* zero out the legacy floating-label offsets */
  position: static !important;
  bottom: auto !important;
  left: auto !important;

  /* visual treatment */
  display: block !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  line-height: 1.2 !important;
  transition: color .18s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── C: accent colour on focus (sibling selector) ── */
body.floralid-wms-body .field-group.fwms-float .fwms-fl-ctrl:focus ~ label.fl,
body.floralid-wms-body .field-group.fwms-float .fwms-fl-ctrl:focus-within ~ label.fl,
#floralid-wms-root .field-group.fwms-float .fwms-fl-ctrl:focus ~ label.fl,
#floralid-wms-root .field-group.fwms-float .fwms-fl-ctrl:focus-within ~ label.fl {
  color: var(--brand) !important;
}

/* ── C: accent colour on container hover ── */
body.floralid-wms-body .field-group.fwms-float:hover label.fl,
#floralid-wms-root .field-group.fwms-float:hover label.fl {
  color: var(--brand) !important;
}

/* ── Dark mode: no override needed (already uses var tokens) ── */
/* var(--muted) and var(--brand) resolve correctly in dark mode  */


/* ============================================================
   v3.6.9 SPECIFICITY-CORRECT FINAL PATCH
   Two root causes identified from browser inspection:

   BUG 1 — Separator border persists
   Selectors at v3.2.36d, v3.2.42-b and v3.2.43-final include
   three-class + ID chains such as:
     body.floralid-wms-body #floralid-wms-root .form-card .form-submit-row
   Specificity: (1,3,1) — higher than the (1,2,1) selectors used
   in the v3.6.7 PATCH 3 remove-block, so !important border-top
   survived. Fix: mirror EVERY exact selector from those three
   blocks and declare border-top:none !important at equal or
   greater specificity, positioned later in the cascade.

   BUG 2 — Label accent on focus/hover has no effect
   The canonical label colour block at v3.2.39-fix line 5008 uses
     #floralid-wms-root label.fl  { color:var(--muted) !important }
   Specificity (1,1,2) — ID-anchored. Our v3.6.8 hover/focus
   selectors had no ID, so (0,4,3) < (1,1,2) and the muted colour
   always won, even when the field was focused.
   Fix: prefix all accent-colour rules with #floralid-wms-root so
   the specificity is at least (1, …) and then wins by cascade
   position when specificity is tied.
   ============================================================ */


/* ── FIX 1a: mirror v3.2.36d selectors, kill border-top ──── */
#floralid-wms-root .form-submit-row,
body.floralid-wms-body #floralid-wms-root .form-submit-row,
#floralid-wms-root .row-actions.form-submit-row,
#floralid-wms-root .form-actions.form-submit-row,
#floralid-wms-root .op-submit-row.form-submit-row,
#floralid-wms-root .product-submit-row {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 16px !important;
}

/* ── FIX 1b: mirror v3.2.42-b selectors (3-class chains) ─── */
body.floralid-wms-body #floralid-wms-root .product-submit-row,
body.floralid-wms-body #floralid-wms-root .product-form-card .form-submit-row,
body.floralid-wms-body #floralid-wms-root .barcode-form-card .form-submit-row,
body.floralid-wms-body #floralid-wms-root .barcode-form-card .row-actions,
body.floralid-wms-body #floralid-wms-root .form-card .form-submit-row,
body.floralid-wms-body #floralid-wms-root .form-card .row-actions,
body.floralid-wms-body #floralid-wms-root .stock-form-card .form-submit-row,
body.floralid-wms-body #floralid-wms-root .stock-form-card .row-actions,
body.floralid-wms-body #floralid-wms-root .op-form-card .form-submit-row,
body.floralid-wms-body #floralid-wms-root .op-form-card .row-actions,
body.floralid-wms-body #floralid-wms-root .card form[data-entity-form] > .row-actions,
body.floralid-wms-body #floralid-wms-root .card form[data-entity-form] > .form-submit-row,
body.floralid-wms-body .product-submit-row,
body.floralid-wms-body .product-form-card .form-submit-row,
body.floralid-wms-body .barcode-form-card .form-submit-row,
body.floralid-wms-body .barcode-form-card .row-actions,
body.floralid-wms-body .form-card .form-submit-row,
body.floralid-wms-body .form-card .row-actions,
body.floralid-wms-body .stock-form-card .form-submit-row,
body.floralid-wms-body .op-form-card .form-submit-row,
body.floralid-wms-body .card form[data-entity-form] > .row-actions,
body.floralid-wms-body .card form[data-entity-form] > .form-submit-row,
#floralid-wms-root .product-submit-row,
#floralid-wms-root .product-form-card .form-submit-row,
#floralid-wms-root .barcode-form-card .form-submit-row,
#floralid-wms-root .barcode-form-card .row-actions,
#floralid-wms-root .form-card .form-submit-row,
#floralid-wms-root .form-card .row-actions,
#floralid-wms-root .stock-form-card .form-submit-row,
#floralid-wms-root .op-form-card .form-submit-row,
#floralid-wms-root .card form[data-entity-form] > .row-actions,
#floralid-wms-root .card form[data-entity-form] > .form-submit-row {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 16px !important;
}

/* ── FIX 1c: mirror v3.2.43-final selectors ─────────────── */
body.floralid-wms-body #floralid-wms-root .form-submit-row,
body.floralid-wms-body #floralid-wms-root .row-actions.form-submit-row,
body.floralid-wms-body #floralid-wms-root .op-submit-row.form-submit-row,
body.floralid-wms-body #floralid-wms-root .product-submit-row,
body.floralid-wms-body #floralid-wms-root .op-submit-row,
body.floralid-wms-body #floralid-wms-root .row-actions,
body.floralid-wms-body #floralid-wms-root .form-actions,
body.floralid-wms-body .form-submit-row,
body.floralid-wms-body .row-actions.form-submit-row,
body.floralid-wms-body .op-submit-row.form-submit-row,
body.floralid-wms-body .product-submit-row,
body.floralid-wms-body .op-submit-row,
body.floralid-wms-body .row-actions,
body.floralid-wms-body .form-actions,
#floralid-wms-root .form-submit-row,
#floralid-wms-root .row-actions.form-submit-row,
#floralid-wms-root .op-submit-row.form-submit-row,
#floralid-wms-root .product-submit-row,
#floralid-wms-root .op-submit-row,
#floralid-wms-root .row-actions,
#floralid-wms-root .form-actions {
  border-top: none !important;
  padding-top: 0 !important;
}

/* ── Table cell exception (must come after to re-zero) ───── */
body.floralid-wms-body #floralid-wms-root .tbl .row-actions,
body.floralid-wms-body #floralid-wms-root td .row-actions,
body.floralid-wms-body .tbl .row-actions,
body.floralid-wms-body td .row-actions,
#floralid-wms-root .tbl .row-actions,
#floralid-wms-root td .row-actions {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}


/* ── FIX 2: label accent colour — ID-anchored so (1,N,N)
      beats every existing (1,1,2) muted-lock rule ────────── */

/* 2a. Enable smooth transition on ALL .fl labels inside root */
body.floralid-wms-body #floralid-wms-root .field-group label.fl,
body.floralid-wms-body #floralid-wms-root .field-group .fl,
body.floralid-wms-body #floralid-wms-root label.fl,
body.floralid-wms-body #floralid-wms-root .fl,
#floralid-wms-root .field-group label.fl,
#floralid-wms-root .field-group .fl,
#floralid-wms-root label.fl,
#floralid-wms-root .fl {
  transition: color .18s ease !important;
}

/* 2b. fwms-float: sibling selector (input precedes label in DOM) */
body.floralid-wms-body #floralid-wms-root .field-group.fwms-float .fwms-fl-ctrl:focus ~ label.fl,
body.floralid-wms-body #floralid-wms-root .field-group.fwms-float .fwms-fl-ctrl:focus-visible ~ label.fl,
body.floralid-wms-body #floralid-wms-root .field-group.fwms-float input.fi:focus ~ label.fl,
body.floralid-wms-body #floralid-wms-root .field-group.fwms-float select.fi:focus ~ label.fl,
body.floralid-wms-body #floralid-wms-root .field-group.fwms-float textarea.fi:focus ~ label.fl,
#floralid-wms-root .field-group.fwms-float .fwms-fl-ctrl:focus ~ label.fl,
#floralid-wms-root .field-group.fwms-float .fwms-fl-ctrl:focus-visible ~ label.fl,
#floralid-wms-root .field-group.fwms-float input.fi:focus ~ label.fl,
#floralid-wms-root .field-group.fwms-float select.fi:focus ~ label.fl,
#floralid-wms-root .field-group.fwms-float textarea.fi:focus ~ label.fl {
  color: var(--brand) !important;
}

/* 2c. :has() for standard label-before-input fields + wms-select */
body.floralid-wms-body #floralid-wms-root .field-group:has(input.fi:focus) label.fl,
body.floralid-wms-body #floralid-wms-root .field-group:has(select.fi:focus) label.fl,
body.floralid-wms-body #floralid-wms-root .field-group:has(textarea.fi:focus) label.fl,
body.floralid-wms-body #floralid-wms-root .field-group:has(.fwms-fl-ctrl:focus) label.fl,
body.floralid-wms-body #floralid-wms-root .field-group:has(.wms-select-trigger:focus) label.fl,
body.floralid-wms-body #floralid-wms-root .field-group:has(.wms-select.open) label.fl,
#floralid-wms-root .field-group:has(input.fi:focus) label.fl,
#floralid-wms-root .field-group:has(select.fi:focus) label.fl,
#floralid-wms-root .field-group:has(textarea.fi:focus) label.fl,
#floralid-wms-root .field-group:has(.fwms-fl-ctrl:focus) label.fl,
#floralid-wms-root .field-group:has(.wms-select-trigger:focus) label.fl,
#floralid-wms-root .field-group:has(.wms-select.open) label.fl {
  color: var(--brand) !important;
}

/* 2d. Container hover — covers both layout patterns */
body.floralid-wms-body #floralid-wms-root .field-group:hover label.fl,
body.floralid-wms-body #floralid-wms-root .field-group:hover .fl,
#floralid-wms-root .field-group:hover label.fl,
#floralid-wms-root .field-group:hover .fl {
  color: var(--brand) !important;
}

/* v3.8.4 — stock form submit row separator: restore proper spacing/divider
   for Barang Masuk, Barang Keluar, Transfer Gudang submit buttons.
   Must be last to win over the blanket border-top:none rules above. */
body.floralid-wms-body #floralid-wms-root .form-card > .row-actions.op-submit-row.form-submit-row,
body.floralid-wms-body #floralid-wms-root .form-card > .op-submit-row.form-submit-row,
#floralid-wms-root .form-card > .row-actions.op-submit-row.form-submit-row,
#floralid-wms-root .form-card > .op-submit-row.form-submit-row {
  margin-top: 24px !important;
  padding-top: 18px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
 * v3.8.13 — RESPONSIVE DROPDOWN HARDENING
 * Mobile bottom-sheet + scrim, viewport-safe desktop flip-up, proper touch
 * targets. Scoped under #floralid-wms-root and appended last so it wins the
 * cascade without adding further !important churn than necessary.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Tap-to-dismiss scrim behind the mobile bottom-sheet panel. */
#floralid-wms-root ~ .wms-select-scrim,
.wms-select-scrim {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.wms-select-scrim.show {
  opacity: 1;
  pointer-events: auto;
}

/* Desktop/tablet flip-up state set by JS positionPanel(). */
.wms-select-panel.flip-up {
  top: auto;
  transform-origin: bottom center;
}

/* Ensure the panel never exceeds the viewport width on any breakpoint. */
.wms-select-panel {
  box-sizing: border-box;
  max-width: 100vw;
}
.wms-select-list {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Comfortable touch targets for options & search on coarse pointers. */
@media (pointer: coarse) {
  .wms-select-option {
    min-height: 48px;
  }
  .wms-select-trigger {
    min-height: 52px;
  }
  .wms-select-search {
    min-height: 46px;
    font-size: 16px; /* prevents iOS auto-zoom on focus */
  }
}

/* Mobile bottom-sheet: anchored above the safe-area inset, scrolls cleanly,
 * and the internal grid is height-bounded so the option list never overflows
 * past the search box or below the viewport edge. */
@media (max-width: 680px) {
  .wms-select.open .wms-select-panel,
  .wms-select-panel {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(70vh, 70dvh) !important;
    margin: 0 !important;
    border-radius: 22px !important;
    z-index: 401 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.28) !important;
    transform-origin: bottom center;
  }
  .wms-select-panel .wms-select-list {
    max-height: none !important; /* the grid row bounds it; let it flex */
    min-height: 0 !important;
  }
  .wms-select-panel .wms-select-search {
    font-size: 16px !important; /* no iOS zoom */
  }
  .wms-select-option {
    min-height: 50px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* Very narrow phones: edge-to-edge sheet for maximum tap area. */
@media (max-width: 380px) {
  .wms-select.open .wms-select-panel,
  .wms-select-panel {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 18px !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
 * v3.8.14 — DROPDOWN-IN-MODAL FIX + TRIGGER ALIGNMENT
 * The .wms-umodal-backdrop uses backdrop-filter, which establishes a containing
 * block for position:fixed descendants, and .wms-umodal uses overflow-y:auto,
 * which clips floating children. Together they broke custom-select panels that
 * are opened from inside a modal (user-add form, operational forms): the panel
 * was clipped by the modal scroll box or anchored to the wrong box. These rules
 * let the open panel escape cleanly on both mobile (bottom-sheet) and desktop.
 * ─────────────────────────────────────────────────────────────────────────── */

/* While a dropdown is open inside a modal, don't let the modal's scroll box clip
 * the floating panel. The modal content rarely needs to scroll at the exact
 * moment a select is open, and the panel itself is height-bounded. */
.wms-umodal:has(.wms-select.open){
  overflow:visible;
}

/* Raise the open select (and its panel) above the modal card stacking context
 * so the option list is never painted underneath the modal chrome. */
.wms-umodal .wms-select.open{
  z-index:8600;
}
.wms-umodal .wms-select.open .wms-select-panel{
  z-index:8601;
}

/* Mobile: the bottom-sheet panel must anchor to the viewport, not to the
 * backdrop's transformed/filtered box. Re-assert fixed viewport anchoring with
 * the highest specificity so it wins even nested several levels inside a modal.
 * The scrim is appended to <body> by the JS, so it already sits above the
 * backdrop; here we make sure the sheet sits above the scrim. */
@media (max-width:680px){
  .wms-umodal .wms-select.open .wms-select-panel,
  .wms-umodal-backdrop .wms-select.open .wms-select-panel{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    top:auto !important;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    width:auto !important;
    max-width:none !important;
    max-height:min(70vh, 70dvh) !important;
    z-index:8602 !important;
  }
}

/* Trigger alignment hardening: inside any grid/flex form cell the trigger must
 * shrink rather than push the layout wider, and its label/value must ellipsize
 * instead of overflowing the rounded control. Fixes the "misaligned / breaks
 * form symmetry" reports on narrow viewports. */
.field-group .wms-select,
.field-grid .wms-select,
.user-create-grid .wms-select{
  min-width:0;
  max-width:100%;
}
.wms-select-trigger{
  max-width:100%;
}
.wms-select-value{
  flex:1 1 auto;
  min-width:0;
}

/* The hidden native <select> that the custom control wraps must never
 * contribute layout width or a stray tap target, even on the first paint
 * before JS finishes upgrading it on a slow device. */
select.wms-native-select{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
}

/* Coarse-pointer safety: keep the search input at a 16px font so iOS/Android
 * never trigger an auto-zoom that visually "breaks" the open sheet, and keep
 * the trigger tap target comfortable even inside dense modal grids. */
@media (pointer: coarse){
  .wms-umodal .wms-select-trigger{
    min-height:52px;
  }
  .wms-umodal .wms-select-search{
    font-size:16px;
  }
}
/* Non-:has() fallback for the modal overflow-clip fix. The dropdown JS adds
 * .wms-modal-has-open-select to the nearest .wms-umodal while any select inside
 * it is open, and removes it on close. This guarantees the panel can escape the
 * modal's scroll box even on engines without :has() support. */
.wms-umodal.wms-modal-has-open-select{
  overflow:visible;
}





/* ============================================================
   v3.8.16 — Floating label + wms-select-trigger alignment fix
   ─────────────────────────────────────────────────────────────
   The floating label system (bottom:-21px, margin-bottom:-33px
   on .field-group) was designed for input.fi / textarea.fi
   where the label chip cuts through the flat top border of the
   input box. The .wms-select-trigger has the same border but
   with border-radius:18px, and the trigger content (placeholder
   text + chevron) was not offset to clear the label chip,
   causing the label to visually sit ON the trigger face rather
   than in the border gap. Additionally, the label z-index:1000
   must stay below the portaled panel (9050) so a portaled open
   panel always covers closed-state labels.
   ============================================================ */

/* Scope only to field-groups that use the floating-label layout
   (margin-bottom:-33px is the tell). Give the trigger padding-top
   so the select value text clears the overlapping label chip. */
body.floralid-wms-body .field-group .wms-select-trigger,
body.floralid-wms-body .form-card .field-group .wms-select-trigger,
body.floralid-wms-body .product-form-card .field-group .wms-select-trigger,
body.floralid-wms-body .op-form-card .field-group .wms-select-trigger,
body.floralid-wms-body .stock-form-card .field-group .wms-select-trigger,
body.floralid-wms-body .barcode-form-card .field-group .wms-select-trigger,
body.floralid-wms-body .user-create-card .field-group .wms-select-trigger,
body.floralid-wms-body .system-settings-card .field-group .wms-select-trigger,
#floralid-wms-root .field-group .wms-select-trigger {
  padding-top: 20px;
  padding-bottom: 8px;
  min-height: 56px;
}

/* Keep the label chip above the trigger border but below portaled panels */
body.floralid-wms-body .field-group label.fl,
#floralid-wms-root .field-group label.fl {
  z-index: 2;
}

/* ── Portaled panel: override all !important positioning rules ──────────────
   When JS moves .wms-select-panel to <body> (inside a .wms-select-portal-ghost
   wrapper) it adds .wms-panel-portaled.
   The existing CSS has several !important rules setting left:0, right:0,
   top:calc(...), position:absolute etc. Inline styles cannot override
   !important declarations. This rule uses higher specificity to override
   them — no coordinates needed, JS sets those via inline style. */
body.floralid-wms-body .wms-panel-portaled,
body .wms-panel-portaled {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(440px, 92vw) !important;
  max-width: min(440px, 92vw) !important;
  max-height: min(520px, 80vh) !important;
  z-index: 9050 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 8px !important;
  transition: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  border-radius: 20px !important;
}

/* Ghost wrapper sits above the backdrop (z:9038) but the panel inside it
 * is raised to 9050 via fixed positioning. The ghost itself must not
 * intercept pointer events — only the panel (pointer-events:auto) does. */
.wms-select-portal-ghost {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9039 !important;
  pointer-events: none !important;
  /* Keep it as .wms-select.open so app.js closest() check passes */
}