:root{--ink:#172c49;--muted:#647994;--line:#dce6f2;--paper:#f0f5fc;--green:#1759aa;--green-deep:#103c78;--lime:#49c9ff;--lime-soft:#e0f4ff;--shadow:0 14px 40px #123d7510}body{background:radial-gradient(ellipse at 90% 0,#cdeaff70,transparent 55%),#f0f5fc}.sidebar{background:linear-gradient(165deg,#103e7b,#0b254c);color:#dfeeff}.brand,.brand strong,.sidebar-foot strong,.sync-card strong{color:#f2f8ff}.brand-mark{background:#45c8ff;color:#092b53;box-shadow:0 0 25px #3fbfff44}.nav-item{color:#bbd5f4}.nav-item:hover{background:#ffffff12;color:white}.nav-item.is-active{background:linear-gradient(90deg,#177bd8,#1462b0);color:white;box-shadow:inset 3px 0 #5fe4ff}.sidebar small,.sidebar .sync-meta,.sidebar .sync-card p{color:#a8c3e3}.sidebar .sync-card{background:#ffffff08;border-color:#ffffff20}.hero-panel{background:linear-gradient(120deg,#e2efff,#f8fcff);border-color:#c8def4}.hero-kicker,.eyebrow{color:#2378ba}.hero-flow .is-highlight{background:#c7edff;color:#104d7c}.avatar{background:#237bbf;color:white}.topbar{border-bottom:1px solid #dae6f5;padding-bottom:20px}.hero-panel,.stat-card,.table-panel{border-radius:12px}
#warehouseDashboard{--wd-line:#24486d;background:radial-gradient(ellipse at 50% 30%,#123c60 0,#091b31 65%);color:#e0f0ff;padding:24px;border:1px solid #24486d;border-radius:14px;min-height:800px;font-variant-numeric:tabular-nums}#warehouseDashboard:fullscreen{overflow:auto;border-radius:0;padding:32px}#warehouseDashboard h2,#warehouseDashboard h3,#warehouseDashboard h4{color:#edf7ff;margin:0}#warehouseDashboard h2{font-size:28px;letter-spacing:3px}#warehouseDashboard h3{font-size:15px;border-left:3px solid #37c9ff;padding-left:10px;margin-bottom:16px}.wd-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.wd-heading p{font-size:10px;letter-spacing:3px;color:#58c8ff;margin:0 0 6px}.wd-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.wd-controls select,.wd-controls button{color:#cce8ff;background:#102f50;border:1px solid #346187;padding:8px 10px;border-radius:5px;cursor:pointer}.wd-controls label{font-size:12px;color:#9bbad6}#wdStatus{color:#83bedc;font-size:12px;margin:14px 0 22px}.wd-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:18px}.wd-kpi{padding:18px 14px;background:linear-gradient(125deg,#16436388,#112b4588);border:1px solid #285273;position:relative;border-radius:6px}.wd-kpi span{color:#a8c6dd;font-size:12px}.wd-kpi strong{display:block;font-size:34px;color:#50d7ff;line-height:1.6}.wd-kpi small{font-size:11px;margin-left:8px;font-weight:400;color:#8eb3d1}.wd-kpi i{position:absolute;right:12px;top:12px;color:#44748c;font-size:10px}.wd-warning strong{color:#ffbc66}.wd-main-grid{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:16px}.wd-panel{background:#0c233bb3;border:1px solid var(--wd-line);padding:18px;border-radius:6px;min-width:0}.wd-note{font-size:11px;color:#819fb9;line-height:1.6}.wd-chart{display:flex;gap:8px;height:180px;align-items:end;margin-top:25px}.wd-day{flex:1;min-width:0;text-align:center}.wd-day small{font-size:10px;color:#89a8c3}.wd-bars{height:155px;display:flex;gap:3px;align-items:end;justify-content:center}.wd-bar{width:45%;height:100%;display:flex;flex-direction:column;justify-content:end;align-items:center;color:#47cdff}.wd-bar b{font-size:10px}.wd-bar meter{appearance:none;writing-mode:vertical-lr;direction:rtl;height:120px;width:13px}.wd-bar meter::-webkit-meter-bar{background:#142f49;border:0;border-radius:2px}.wd-bar meter::-webkit-meter-optimum-value{background:#32c7ff}.wd-bar.out meter::-webkit-meter-optimum-value{background:#6384ff}.wd-legend{color:#32c7ff;font-size:11px}.wd-legend span{color:#809aff;margin-left:18px}.wd-center{text-align:center;background:radial-gradient(ellipse,#17446480,#0c233b)}#warehouseDashboard .wd-center h3{border:0}.wd-building{width:180px;margin:35px auto 24px;transform:skewY(-7deg);filter:drop-shadow(0 20px 20px #008cff33)}.wd-roof{height:30px;background:linear-gradient(140deg,#479dd5,#245981);clip-path:polygon(0 100%,30% 0,100% 0,100% 100%)}.wd-racks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px;background:linear-gradient(100deg,#153551,#216a97);border:1px solid #4f9bc2}.wd-racks span{font-size:28px;color:#5ccfff}.wd-base{background:#133c60;font-size:9px;letter-spacing:2px;padding:8px;color:#82d4ff;border-bottom:3px solid #3c9ed0}.wd-flow{display:flex;align-items:center;justify-content:space-around;font-size:11px;color:#9dbbd6}.wd-flow b{display:block;font-size:24px;color:#66d5ff}.wd-flow i{color:#2779ab}.wd-center a{display:inline-block;color:#67cfff;font-size:12px;margin-top:20px}.wd-stock{display:flex;gap:18px;flex-wrap:wrap}.wd-stock strong{font-size:27px;color:#68dfff}.wd-stock span{font-size:12px;color:#a6c4db;margin-left:7px}.wd-panel h4{font-size:12px;padding:16px 0 10px}.wd-locations{max-height:170px;overflow:auto}.wd-locations>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #24445c;font-size:11px}.wd-locations b{color:#5bcaff;white-space:nowrap}.wd-bottom-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:16px}.wd-table-wrap{overflow:auto}#warehouseDashboard table{width:100%;border-collapse:collapse;font-size:11px;color:#c0d6e8}#warehouseDashboard th{color:#87afcf;background:#102f4b;font-weight:500;padding:10px;text-align:left}#warehouseDashboard td{padding:12px 10px;border-bottom:1px solid #203c56;white-space:nowrap}.wd-tag{padding:4px 8px;border:1px solid #245578;background:#154368;color:#7bdaff;border-radius:4px}.wd-empty{color:#6f93af;text-align:center;font-size:12px;padding:30px 0}.wd-alert{padding:10px 0;border-bottom:1px solid #29435b}.wd-alert b{font-size:12px;color:#ffd08b}.wd-alert small{display:block;color:#83a6c2}.wd-alert p{font-size:12px;overflow-wrap:anywhere;color:#b8c9da}.wd-alert-count{float:right;color:#ffc175}@media(max-width:1250px){.wd-kpis{grid-template-columns:repeat(3,1fr)}.wd-main-grid{grid-template-columns:1fr 1fr}.wd-main-grid>.wd-panel:last-child{grid-column:1/-1}.wd-locations{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}}@media(max-width:700px){#warehouseDashboard{padding:14px}.wd-heading{align-items:start;flex-direction:column}.wd-main-grid,.wd-bottom-grid{grid-template-columns:1fr}.wd-kpis{grid-template-columns:repeat(2,1fr)}.wd-locations{grid-template-columns:1fr}.wd-heading h2{font-size:22px!important}}

/* Desktop control room: fit every panel into the available browser viewport. */
@media (min-width: 1000px) {
  body:has(#warehouseDashboard:not([hidden])) .app-shell {height:100dvh;min-height:0;grid-template-columns:210px minmax(0,1fr)}
  body:has(#warehouseDashboard:not([hidden])) .sidebar {height:100dvh;padding:18px 14px 12px;min-height:0}
  body:has(#warehouseDashboard:not([hidden])) .brand {padding:0 4px 18px}
  body:has(#warehouseDashboard:not([hidden])) .brand strong {font-size:15px}
  body:has(#warehouseDashboard:not([hidden])) .nav-list {gap:4px}
  body:has(#warehouseDashboard:not([hidden])) .nav-item {min-height:40px;font-size:13px}
  body:has(#warehouseDashboard:not([hidden])) .sync-card {padding:10px}
  body:has(#warehouseDashboard:not([hidden])) .sync-card p {min-height:0;margin:6px 0;font-size:11px}
  body:has(#warehouseDashboard:not([hidden])) .main {height:100dvh;min-height:0;padding:12px 16px;display:flex;flex-direction:column;gap:10px}
  body:has(#warehouseDashboard:not([hidden])) .topbar {flex:0 0 auto;margin:0;padding:0 0 8px;gap:12px}
  body:has(#warehouseDashboard:not([hidden])) .topbar h1 {font-size:22px}
  body:has(#warehouseDashboard:not([hidden])) .eyebrow {display:none}
  #warehouseDashboard:not([hidden]) {min-height:0;flex:1;padding:14px;display:flex;flex-direction:column;border-radius:10px;overflow:hidden}
  #warehouseDashboard:fullscreen {height:100dvh;padding:18px}
  #warehouseDashboard h2 {font-size:21px;letter-spacing:2px}
  .wd-heading {gap:10px;flex-shrink:0}
  .wd-heading p {font-size:8px;margin-bottom:2px}
  .wd-controls select,.wd-controls button {padding:5px 8px;font-size:11px}
  #wdStatus {font-size:10px;margin:5px 0 9px;flex-shrink:0}
  #wdContent {flex:1;min-height:0;display:grid;grid-template-rows:76px minmax(0,1.7fr) minmax(0,1fr);gap:10px}
  .wd-kpis {grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0;min-height:0}
  .wd-kpi {padding:8px 10px}
  .wd-kpi strong {font-size:27px;line-height:1.35}
  .wd-kpi span {font-size:11px}
  .wd-kpi small {font-size:10px}
  .wd-main-grid {grid-template-columns:1fr 1.08fr 1fr;gap:10px;min-height:0}
  .wd-main-grid>.wd-panel:last-child {grid-column:auto}
  .wd-panel {padding:10px 12px;min-height:0;overflow:auto}
  #warehouseDashboard h3 {font-size:13px;margin-bottom:7px}
  .wd-note {font-size:10px;margin:4px 0;line-height:1.4}
  .wd-main-grid>.wd-panel:first-child {display:flex;flex-direction:column;overflow:hidden}
  .wd-chart {height:auto;flex:1;min-height:0;margin-top:5px;align-items:stretch}
  .wd-day {display:flex;flex-direction:column;min-height:0}
  .wd-bars {height:auto;flex:1;min-height:0}
  .wd-bar meter {height:100%;min-height:0;flex:1;width:10px}
  .wd-bar b {flex-shrink:0}
  .wd-legend {font-size:10px;margin:5px 0 0}
  .wd-center {display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden}
  .wd-center>.wd-note {display:none}
  .wd-building {width:125px;margin:6px auto;min-height:0;flex:1;max-height:155px;display:flex;flex-direction:column}
  .wd-roof {height:18px;flex-shrink:0}
  .wd-racks {flex:1;min-height:0;padding:6px 12px;gap:2px;align-content:space-around}
  .wd-racks span {font-size:20px;line-height:1}
  .wd-base {font-size:7px;letter-spacing:1px;padding:4px}
  .wd-flow {width:100%;font-size:10px;flex-shrink:0}
  .wd-flow b {font-size:20px;line-height:1.2}
  .wd-center a {font-size:10px;margin-top:5px;flex-shrink:0}
  .wd-stock strong {font-size:25px}
  .wd-panel h4 {padding:5px 0;font-size:11px}
  .wd-locations {display:block;max-height:70px}
  .wd-locations>div {font-size:10px;padding:3px 0}
  .wd-bottom-grid {grid-template-columns:2fr 1fr;gap:10px;margin:0;min-height:0}
  .wd-bottom-grid>.wd-panel {display:flex;flex-direction:column;overflow:auto}
  .wd-table-wrap {min-height:0;flex:1}
  #warehouseDashboard table {min-width:0;font-size:10px}
  #warehouseDashboard th,#warehouseDashboard td {padding:5px 7px}
  .wd-empty {padding:10px 0;margin:auto 0;font-size:11px}
  .wd-alert {padding:5px 0}
}

/* Readable text on the light ERP surfaces and dark dashboard panels. */
:root {--muted:#4c617b}
.hero-panel,.hero-panel h2 {color:#183657}
.hero-panel p {color:#435d77;font-size:14px;font-weight:500}
.hero-flow span {color:#294d70;background:#ffffffb3;border-color:#b8cde2;font-size:12px;font-weight:600}
.hero-flow i {color:#456a8c}
.hero-panel::after {border-color:#b9d5ef}
.metric-card>small,.tracking-cell small,.stack-cell small,.item-summary small,.quantity small,.time-cell small {color:#53667b;font-size:12px}
.main th {color:#41566e;font-size:12px}
.search-box input::placeholder {color:#62748a}
.status-tab span {color:#576c84}
#warehouseDashboard .wd-note,#warehouseDashboard .wd-empty,#warehouseDashboard .wd-day small {color:#b4cce0}
#warehouseDashboard .wd-kpi span,#warehouseDashboard .wd-kpi small,#warehouseDashboard .wd-flow,#warehouseDashboard .wd-controls label {color:#c2daec}
#warehouseDashboard #wdStatus {color:#b4dcf1}
#warehouseDashboard .wd-alert small {color:#b4cce0}
@media(min-width:1000px) {
  #warehouseDashboard .wd-note,#warehouseDashboard .wd-empty,#warehouseDashboard #wdStatus {font-size:11px}
  #warehouseDashboard .wd-kpi span,#warehouseDashboard .wd-controls select,#warehouseDashboard .wd-controls button {font-size:12px}
  #warehouseDashboard th,#warehouseDashboard td {font-size:11px}
}