*{box-sizing:border-box}body{margin:0;background:#f3f6fa;color:#17283b;font:15px system-ui;display:flex}aside{width:230px;min-height:100vh;background:#10243a;color:white;padding:22px;flex-shrink:0}aside h2{font-size:17px}nav{display:grid;gap:8px;margin-top:30px}button{cursor:pointer;border:0;border-radius:8px;padding:11px 14px;font-weight:700}nav button{text-align:left;background:#203d5b;color:white}nav button:hover{background:#315779}main{flex:1;min-width:0}header{background:white;padding:18px 28px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dfe7ef}h1{margin:3px 0;font-size:25px}header small,.muted{color:#8292a4}#app{padding:25px;max-width:1400px;margin:auto}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{background:white;border:1px solid #e0e7ef;border-radius:12px;padding:18px;margin-bottom:15px}.metric strong{display:block;font-size:30px;margin-top:8px}.metric small{color:#718397}.map{display:grid;grid-template-columns:1fr 75px 1fr;gap:10px;min-width:600px}.side{display:grid;gap:7px}.aisle{background:#ffedd8;color:#9b4d06;border:1px solid #f2a04b;border-radius:8px;padding:13px;text-align:center;font-weight:800}.central{writing-mode:vertical-rl;display:flex;justify-content:center;align-items:center;background:#ffedd8;border:2px solid #f2a04b;color:#9b4d06;border-radius:8px;font-weight:900;text-align:center;padding:10px}.pair{background:#eaf2fb;border:1px solid #bfd2e5;border-radius:8px;padding:7px;display:grid;gap:6px}.row{background:#dceafa;color:#194a77;border:1px solid #a9c5e2}.row.sel{background:#245d91;color:white}.position{background:#f3f7fb;border:1px solid #d9e4ee;margin:5px;color:#244b70}.orange{background:#ed8b27;color:#17283b}.field{display:grid;gap:6px;margin:10px 0}.field input,.field select{padding:11px;border:1px solid #cbd7e3;border-radius:7px;width:100%}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}table{width:100%;border-collapse:collapse;font-size:13px}td,th{padding:10px;border-bottom:1px solid #e9eef3;text-align:left}th{color:#728397;font-size:11px}footer{text-align:center;color:#8b99a8;font-size:11px;padding:15px}.pill{background:#e5f4e9;color:#247543;border-radius:20px;padding:4px 8px;font-size:11px}@media(max-width:800px){aside{width:62px;padding:10px}aside h2,aside small,nav button{font-size:0}nav button{height:43px}nav button:first-letter{font-size:16px}.cards{grid-template-columns:1fr 1fr}#app{padding:12px}.grid2{grid-template-columns:1fr}}
.label-tools{display:grid;grid-template-columns:minmax(180px,300px) 1fr;gap:16px;align-items:start;margin:12px 0 20px}.label-tools img{display:block;width:100%;max-height:300px;object-fit:contain;border:1px solid #d7e1eb;border-radius:9px;background:#f7f9fc}.scan-panel{padding:14px;border:1px solid #dfe7ef;border-radius:9px;background:#f8fafc}.scan-panel button{background:#203d5b;color:#fff}.scan-panel button:disabled{opacity:.6;cursor:wait}#scanStatus{min-height:38px}#labelPhoto{padding:12px;background:#f8fafc;border:1px dashed #aebdcb;border-radius:8px;width:100%}@media(max-width:700px){.label-tools{grid-template-columns:1fr}.label-tools img{max-height:240px}}

.scan-panel textarea{width:100%;min-height:130px;padding:10px;border:1px solid #cbd7e3;border-radius:7px;background:#fff;color:#17283b;font:13px ui-monospace,monospace}.scan-panel details{margin-top:10px}.scan-panel summary{cursor:pointer;font-weight:700;color:#315779}.scan-panel hr{border:0;border-top:1px solid #dfe7ef;margin:16px 0}


/* CGL Warehouse responsive layout — desktop rules above remain unchanged. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 0; }
main { min-width: 0; width: 100%; }
#app { width: 100%; min-width: 0; }
#userArea { display:flex; align-items:center; justify-content:flex-end; gap:10px; min-width:0; }
.account-label { overflow-wrap:anywhere; }
.logout-button { white-space:nowrap; }

.map-scroll, .table-scroll {
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.map-scroll { padding-bottom:8px; }
.map-scroll .map { width:100%; min-width:0; grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr); gap:4px; }
.table-scroll .data-table { min-width:760px; }
.table-scroll .history-table { min-width:1120px; }
.table-scroll:focus-visible, .map-scroll:focus-visible { outline:2px solid #3978b8; outline-offset:2px; }

@media (max-width: 800px) {
  body { display:block; padding-bottom:76px; }
  aside {
    position:fixed;
    z-index:1000;
    left:0; right:0; bottom:0; top:auto;
    width:100%;
    min-height:0;
    height:auto;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));
    display:block;
    border-top:1px solid rgba(255,255,255,.15);
    box-shadow:0 -3px 14px rgba(16,36,58,.18);
  }
  aside h2, aside > small, aside > p { display:none !important; }
  aside nav {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:7px;
    margin:0;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }
  aside nav button {
    flex:0 0 auto;
    width:auto;
    min-width:max-content;
    height:48px;
    padding:0 13px;
    border-radius:9px;
    font-size:13px !important;
    line-height:1.1;
    text-align:center;
    white-space:nowrap;
  }
  aside nav button:first-letter { font-size:inherit; }
  main { width:100%; min-height:100vh; padding:0; }
  header {
    position:relative;
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:8px 12px;
    padding:14px 16px;
  }
  header > div:first-child { flex:1 1 100%; min-width:0; }
  header h1 { font-size:clamp(23px, 6vw, 30px); overflow-wrap:anywhere; }
  #userArea {
    flex:1 1 100%;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px;
    font-size:13px;
  }
  #userArea .account-label { flex:1 1 150px; min-width:0; }
  #userArea button { flex:0 0 auto; }
  #app {
    padding:12px;
    padding-bottom:18px;
    max-width:none;
  }
  .card {
    min-width:0;
    padding:14px;
    border-radius:11px;
  }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .metric strong { font-size:clamp(23px, 6vw, 30px); }
  .metric small { font-size:12px; }
  .grid2 { grid-template-columns:minmax(0,1fr); gap:8px; }
  .field, .field input, .field select, .field textarea { min-width:0; }
  input, select, textarea, button { max-width:100%; }
  .label-tools { grid-template-columns:minmax(0,1fr); }
  footer { padding:10px 14px 18px; }
  .map-scroll .map { width:100%; min-width:0; grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr); gap:4px; }
}

@media (max-width: 380px) {
  header { padding:12px; }
  #app { padding:9px; }
  .cards { gap:7px; }
  .card { padding:11px; }
  aside nav button { padding:0 10px; font-size:12px !important; }
}


/* Compact mobile warehouse map: all rows visible without horizontal scrolling. */
@media (max-width: 800px) {
  .map-scroll { overflow-x:hidden; }
  .map-scroll .map { width:100%; min-width:0; grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr); gap:4px; }
  .map-scroll .side { min-width:0; gap:4px; }
  .map-scroll .pair { min-width:0; padding:3px; gap:3px; }
  .map-scroll .row { min-width:0; padding:7px 2px; font-size:clamp(8px, 2.5vw, 11px); line-height:1.15; overflow-wrap:anywhere; }
  .map-scroll .aisle { min-width:0; padding:7px 2px; font-size:clamp(7px, 2.1vw, 9px); line-height:1.15; overflow-wrap:anywhere; }
  .map-scroll .central { min-width:0; padding:3px 1px; font-size:8px; line-height:1.1; overflow-wrap:anywhere; }
  aside nav button { font-size:0 !important; }
  aside nav button::after { font-size:12px; line-height:1; }
  aside nav button[data-p="Dashboard"]::after { content:"Dash"; }
  aside nav button[data-p="Map"]::after { content:"W.M"; }
  aside nav button[data-p="Receive"]::after { content:"R.Stock"; }
  aside nav button[data-p="Dispatch"]::after { content:"D.Stock"; }
  aside nav button[data-p="Inventory"]::after { content:"Inv"; }
  aside nav button[data-p="History"]::after { content:"M.Hstry"; }
  aside nav button#adminNav::after { content:"Admin"; }
}
@media (max-width: 360px) {
  .map-scroll .map { grid-template-columns:minmax(0,1fr) 25px minmax(0,1fr); gap:3px; }
  .map-scroll .row { padding:6px 1px; font-size:8px; }
  .map-scroll .aisle { font-size:7px; }
  aside nav { gap:4px; }
  aside nav button { padding:0 8px; }
  aside nav button::after { font-size:11px; }
}

/* Password recovery screens */
.auth-card { max-width:480px; margin:35px auto; }
.auth-link { background:transparent; color:#245d91; padding:10px 8px; text-decoration:underline; }
.auth-link:hover { background:#edf4fb; }