:root{--primary:#2457d6;--primary-dark:#1e48b5;--primary-soft:#eef3ff;--text:#1f2937;--muted:#6f7888;--border:#e3e8ef;--surface:#fff;--canvas:#f5f7fa;--success:#178044;--success-soft:#edf8f1;--warning:#a8670e;--warning-soft:#fff7e8;--danger:#c33535;--danger-soft:#fff0f0;--info:#156ca6;--info-soft:#edf7ff;--radius:10px;--sidebar:252px;--topbar:66px}
*{box-sizing:border-box}
html{background:var(--canvas)}
body{margin:0;background:var(--canvas);color:var(--text);font:14px Inter,Roboto,system-ui,-apple-system,sans-serif}
button,a,input,select,textarea{transition:border-color .18s,color .18s,background-color .18s,box-shadow .18s}
button,a{cursor:pointer}
:focus-visible{outline:3px solid rgba(36,87,214,.3);outline-offset:2px}
.app-shell{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:#172033;color:#fff;z-index:1040;display:flex;flex-direction:column;transition:width .2s,transform .2s}
.brand{height:var(--topbar);display:flex;align-items:center;gap:11px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.08);color:#fff;text-decoration:none}
.brand-icon{width:36px;height:36px;border-radius:9px;background:#2d5ed2;display:grid;place-items:center;font-size:18px;flex:none}
.brand-copy strong,.brand-copy small{display:block;white-space:nowrap}
.brand-copy strong{font-size:14px}.brand-copy small{font-size:14px;color:#aeb8ca;margin-top:2px}
.sidebar-nav{padding:14px 10px;overflow:auto;scrollbar-width:thin}
.nav-caption{font-size:14px;letter-spacing:.08em;color:#7e8ba4;font-weight:700;margin:18px 10px 7px;white-space:nowrap}
.nav-entry{width:100%;color:#bbc5d5;padding:10px 11px;margin-bottom:3px;border-radius:8px;display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:500;white-space:nowrap}
.nav-entry:hover,.nav-entry:focus,.nav-entry.active{background:#25324a;color:#fff}
.nav-entry i{width:18px;text-align:center;font-size:16px;flex:none}
.sidebar-foot{margin-top:auto;padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:14px;color:#aeb8ca;white-space:nowrap}
.sidebar-foot span{display:inline-block;width:8px;height:8px;background:#36c77a;border-radius:50%;margin-right:6px}.sidebar-foot em{font-style:normal}
.main{margin-left:var(--sidebar);min-height:100vh;transition:margin-left .2s}
.topbar{height:var(--topbar);position:sticky;top:0;z-index:1020;background:rgba(255,255,255,.97);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 22px;gap:8px}
.icon-button{width:38px;height:38px;border:0;background:transparent;border-radius:8px;display:grid;place-items:center;color:#596376;padding:0;flex:none}
.icon-button:hover{background:#f0f3f7;color:#222}
.global-search{width:min(520px,44vw);height:38px;background:#f3f5f8;border:1px solid transparent;border-radius:9px;align-items:center;gap:8px;padding:0 11px;color:#8a94a4;margin-left:4px}
.global-search:focus-within{background:#fff;border-color:#aebfe9;box-shadow:0 0 0 3px rgba(36,87,214,.08)}
.global-search input{border:0;background:transparent;outline:0;flex:1;min-width:0;color:var(--text)}
.global-search kbd{font-size:14px;color:#727d8d;background:#fff;border:1px solid #dce2e9;box-shadow:none}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:7px}.topbar-actions form{margin:0}
.user-box{display:flex;align-items:center;gap:9px;padding:4px 7px;border-radius:9px}
.avatar{width:34px;height:34px;border-radius:9px;background:#eaf0ff;color:var(--primary);font-weight:700;display:grid;place-items:center;font-size:14px}
.user-copy strong,.user-copy small{display:block}.user-copy strong{font-size:14px}.user-copy small{font-size:14px;color:var(--muted);margin-top:2px}
.content{width:100%;padding:24px}
.page-header{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:20px}
.page-header h1{font-size:1.25rem;margin:0 0 5px;font-weight:600;letter-spacing:-.025em}.page-header p{color:var(--muted);margin:0}
.page-header>div+div{display:flex;gap:8px;flex-wrap:wrap}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 2px rgba(16,24,40,.025);padding:10px}
.panel+.panel{margin-top:16px}
.panel>h2:first-child,.panel>h3:first-child{font-weight:700}
.panel .table-responsive{margin-left:-10px;margin-right:-10px}.panel .table-responsive:last-child{margin-bottom:-10px}
.filter-bar,#toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.record-filter-bar{display:grid!important;grid-template-columns:minmax(120px,.7fr) minmax(135px,.8fr) minmax(170px,1fr) minmax(150px,.9fr) minmax(160px,.95fr) minmax(160px,.95fr) minmax(190px,1.1fr) auto;width:100%}
.record-filter-bar>.form-control,.record-filter-bar>.form-select{width:100%;min-width:0}
.record-filter-bar>.btn{white-space:nowrap}
.btn,.form-control,.form-select{border-radius:8px}.btn{font-weight:600;min-height:38px}
.btn-sm{min-height:32px}.btn-lg{min-height:46px}
.btn-primary{background:var(--primary);border-color:var(--primary)}.btn-primary:hover,.btn-primary:focus{background:var(--primary-dark);border-color:var(--primary-dark)}
.btn-outline-primary{color:var(--primary);border-color:#aebfe9}.btn-outline-primary:hover{background:var(--primary);border-color:var(--primary)}
.form-control,.form-select{min-height:40px;border-color:#dce2e9;color:var(--text)}
.form-control:focus,.form-select:focus{border-color:#91a9e9;box-shadow:0 0 0 3px rgba(36,87,214,.08)}
.form-label{font-size:14px;font-weight:600;color:#4d586a;margin-bottom:6px}.form-text{font-size:14px;color:#8a94a3}
.app-alert{display:flex;align-items:center;gap:9px;border-radius:9px;border-width:1px;padding:12px 14px}
.metric{height:100%;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:10px;display:flex;align-items:flex-start;gap:13px}
.metric-icon{width:42px;height:42px;border-radius:9px;display:grid;place-items:center;font-size:19px;flex:none}
.metric-icon.blue{background:var(--primary-soft);color:var(--primary)}.metric-icon.green{background:var(--success-soft);color:var(--success)}.metric-icon.amber{background:var(--warning-soft);color:var(--warning)}.metric-icon.red{background:var(--danger-soft);color:var(--danger)}
.metric-copy{min-width:0}.metric-copy span{font-size:14px;color:var(--muted)}.metric-copy strong{font-size:23px;display:block;margin:4px 0 3px;letter-spacing:-.03em}.metric-copy small{font-size:14px;color:#8791a0}
.table{font-size:14px;margin-bottom:0}.table>:not(caption)>*>*{padding:12px 13px;border-color:#edf0f4;vertical-align:middle}
.table thead th,.bootstrap-table .table thead th{background:#f8fafc;color:#667085;border-color:var(--border);font-size:14px;font-weight:700;white-space:nowrap}
.table tbody tr:hover{background:#fafcff}
.bootstrap-table .fixed-table-container{border:0}.bootstrap-table .fixed-table-toolbar{margin-top:0}
.pagination .page-link{border-radius:7px!important;margin:0 2px;border-color:#e0e5ec;color:#566174}.pagination .active>.page-link{background:var(--primary);border-color:var(--primary)}
.badge{font-size:14px;border-radius:99px;padding:.45em .7em}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.status-active{background:var(--success)}.status-locked{background:var(--danger)}
.empty-state{padding:40px;text-align:center;color:var(--muted)}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:#f5f7fa}
.login-box{width:min(100%,420px);background:#fff;border:1px solid var(--border);border-radius:12px;padding:30px;box-shadow:0 14px 36px rgba(25,38,58,.08)}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}.login-brand .brand-icon{color:#fff}.login-brand strong,.login-brand small{display:block}.login-brand strong{font-size:14px}.login-brand small{font-size:14px;color:var(--muted);margin-top:2px}
.warehouse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.slot{display:grid;gap:4px;padding:12px;border:1px solid var(--border);border-left:4px solid var(--success);border-radius:8px;background:#fff;color:var(--text);text-decoration:none}
.slot:hover{border-color:#b7c5e6;box-shadow:0 6px 15px rgba(22,34,52,.07)}.slot-empty{border-left-color:#9aa7b4}.slot-inuse{border-left-color:var(--success)}.slot-nearlyfull{border-left-color:#d99b16}.slot-full{border-left-color:var(--danger)}.slot-locked{border-left-color:#7b8794;background:#f3f4f5}.slot span,.slot small{color:var(--muted)}
.nav-tabs{border-bottom-color:var(--border)}.nav-tabs .nav-link{color:#596578;border-radius:8px 8px 0 0}.nav-tabs .nav-link.active{color:var(--primary);font-weight:600}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:1030;border:0;width:100%;height:100%}
body.sidebar-small .sidebar{width:72px}body.sidebar-small .brand-copy,body.sidebar-small .nav-entry span,body.sidebar-small .nav-caption,body.sidebar-small .sidebar-foot{display:none}body.sidebar-small .brand,body.sidebar-small .nav-entry{justify-content:center}body.sidebar-small .main{margin-left:72px}
@media(max-width:991.98px){.sidebar{transform:translateX(-100%)}body.sidebar-open .sidebar{transform:translateX(0)}body.sidebar-open .sidebar-backdrop{display:block}.main,body.sidebar-small .main{width:100%;margin-left:0}.content{padding:18px}}
@media(max-width:1199.98px){.record-filter-bar{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767.98px){.content{padding:14px}.topbar{padding:0 12px}.page-header{align-items:flex-start;flex-direction:column}.page-header>div+div{width:100%}.page-header>div+div .btn{flex:1}.filter-bar,#toolbar{align-items:stretch}.record-filter-bar{grid-template-columns:1fr}.filter-bar>.form-control,.filter-bar>.form-select,#toolbar>.form-control,#toolbar>.form-select{width:100%!important}.user-box{padding-right:0}}

/* Trạng thái sức chứa dùng chung cho chú giải, giá và ô lưu trữ. */
.map-legend span{display:inline-flex;align-items:center;gap:7px;border-width:2px!important;font-weight:600}
.map-legend span::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.map-rack.state-empty,.rack-slot.state-empty,.map-legend .state-empty{background:#dbeafe!important;border-color:#2563eb!important;color:#1e3a8a!important}
.map-rack.state-inuse,.rack-slot.state-inuse,.map-legend .state-inuse{background:#dcfce7!important;border-color:#16a34a!important;color:#14532d!important}
.map-rack.state-nearlyfull,.rack-slot.state-nearlyfull,.map-legend .state-nearlyfull{background:#fef3c7!important;border-color:#d97706!important;color:#78350f!important}
.map-rack.state-full,.rack-slot.state-full,.map-legend .state-full{background:#fee2e2!important;border-color:#dc2626!important;color:#7f1d1d!important}
.map-rack.state-locked,.rack-slot.state-locked,.map-legend .state-locked{background:#e5e7eb!important;border-color:#64748b!important;color:#334155!important}
.rack-slot-status{margin-top:4px;font-weight:600}
@media(max-width:479.98px){.content{padding:12px}.login-shell{padding:14px}.login-box{padding:22px}.page-header>div+div{display:grid;grid-template-columns:1fr}.page-header>div+div .btn{width:100%}.metric-copy strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{.sidebar,.topbar,.sidebar-backdrop{display:none!important}.main{margin:0!important;width:100%!important}.content{padding:0;max-width:none}.panel{box-shadow:none}}
/* Visual warehouse map */
.map-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.map-toolbar form,.map-toolbar .input-group{flex:1;min-width:220px}.map-toolbar select{min-width:220px}.map-metrics,.map-legend{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.map-metrics span,.map-legend span{border:1px solid var(--border-color,#dfe5ec);border-radius:8px;padding:7px 10px;background:#fff}.map-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:12px}.warehouse-map-shell{height:min(68vh,720px);min-height:480px;overflow:hidden;border:1px solid #cfd8e3;border-radius:10px;background:#f3f6f9;touch-action:none}.warehouse-map-stage{position:relative;width:100%;height:100%;transform-origin:0 0;background-image:linear-gradient(#dce3eb 1px,transparent 1px),linear-gradient(90deg,#dce3eb 1px,transparent 1px);background-size:5% 5%}.map-element{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);z-index:var(--layer);transform:rotate(var(--r));border:1px solid #7f8c99;border-radius:9px;padding:8px;color:#263746;text-align:left;display:flex;align-items:center;justify-content:center;overflow:visible;background:#dceeff}.map-element-content{display:flex;min-width:0;max-width:100%;flex-direction:column;transform:rotate(calc(var(--r) * -1));text-align:left}.map-element strong,.map-element small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.map-element small{font-size:14px}.map-rack.state-inuse,.state-inuse{background:#dff3e5}.map-rack.state-nearlyfull,.state-nearlyfull{background:#fff0bf}.map-rack.state-full,.state-full{background:#f8d7da}.map-rack.state-locked,.state-locked{background:#e2e6ea}.map-rack.state-empty,.state-empty{background:#dceeff}.map-entrance{background:#fff;border-style:dashed}.map-element.is-highlighted,.map-element.is-selected{outline:4px solid #1261a0;outline-offset:2px}.map-element.is-dimmed{opacity:.25}.map-detail{margin:0;overflow:auto}.map-detail dt{font-size:14px;color:#667788}.map-detail dd{margin-bottom:10px}.rack-path{font-size:14px;color:#667788}.rack-visual{display:flex;flex-direction:column;gap:10px}.rack-shelf{border:1px solid #d9e1ea;border-radius:8px;padding:8px;background:#f8fafc}.rack-shelf-title{display:flex;justify-content:space-between;gap:8px;margin-bottom:7px}.rack-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.rack-slot{border:1px solid #cfd8e3;border-radius:7px;padding:7px;background:#fff;min-width:0}.rack-slot strong,.rack-slot small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rack-slot.state-full{border-color:#dc9ca2}.rack-slot.state-nearlyfull{border-color:#e2bd54}.rack-slot.state-locked{color:#6c757d}.is-designer .map-element{cursor:grab}.is-designer .map-element:active{cursor:grabbing}.is-designer .map-element.is-locked{cursor:not-allowed;background-image:repeating-linear-gradient(135deg,transparent,transparent 8px,rgba(0,0,0,.05) 8px,rgba(0,0,0,.05) 16px)}.designer-shell{height:70vh}@media(max-width:991.98px){.map-layout{grid-template-columns:1fr}.map-detail{max-height:360px}.warehouse-map-shell{height:62vh}}@media(max-width:575.98px){.map-toolbar .btn-group{width:100%}.map-toolbar .btn-group .btn{flex:1}.warehouse-map-shell{min-height:420px;height:54vh}.map-layout{display:flex;flex-direction:column}.map-detail{order:-1}.map-element{padding:4px}.map-element small{display:none}}