:root{
    --bg:#12151a;
    --surface:#181d24;
    --card:#1e242c;
    --card-hi:#242b34;
    --line:#2b323c;
    --accent:#ff8a2b;
    --accent-dim:#4a2b12;
    --accent-soft:#ffb066;
    --amber:#f2a65a;
    --text:#e8edf2;
    --muted:#8b96a5;
    --danger:#e2574c;
    --success:#5fbf77;
    --font-display:'Space Grotesk',ui-sans-serif,sans-serif;
    --font-body:'Inter',ui-sans-serif,sans-serif;
    --font-mono:'JetBrains Mono',ui-monospace,monospace;
    /* Compatibility aliases used by the customer-job components. */
    --orange:var(--accent);
    --panel:var(--card);
    --panel-2:var(--card-hi);
    --border:var(--line);
    --radius:12px;
  }
  @font-face{font-family:'Space Grotesk';src:local('Space Grotesk');}
  *{box-sizing:border-box;}
  html,body{height:100%;overflow-x:hidden;}
  body{
    margin:0;background:var(--bg);color:var(--text);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
  }
  #app{display:flex;min-height:100vh;}

  /* ---------- Sidebar ---------- */
  .sidebar{
    width:230px;flex:0 0 230px;background:var(--surface);
    border-right:1px solid var(--line);
    display:flex;flex-direction:column;
    padding:20px 0;position:sticky;top:0;height:100vh;overflow-y:auto;
  }
  .brand{padding:0 20px 20px 20px;border-bottom:1px solid var(--line);margin-bottom:14px;}
  .brand .mark{
    width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#c65a10);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:700;color:#1a0d00;font-size:15px;
  }
  .brand .name{font-family:var(--font-display);font-weight:600;font-size:14.5px;margin-top:10px;letter-spacing:.2px;line-height:1.3;}
  .brand .sub{font-size:11px;color:var(--muted);margin-top:2px;letter-spacing:.4px;text-transform:uppercase;}
  .nav{display:flex;flex-direction:column;gap:2px;padding:0 10px;}
  .nav button{
    display:flex;align-items:center;gap:10px;
    background:none;border:none;color:var(--muted);
    padding:10px 12px;border-radius:8px;font-size:13.5px;font-family:var(--font-body);
    cursor:pointer;text-align:left;font-weight:500;transition:.12s;
  }
  .nav button:hover{background:var(--card);color:var(--text);}
  .nav button.active{background:var(--accent);color:#1a0d00;font-weight:700;}
  .nav .ico{width:16px;text-align:center;font-size:14px;}
  .sidebar-foot{width:100%;margin-top:auto;padding:16px;box-sizing:border-box;border-top:1px solid var(--line);text-align:center;font-size:10.5px;color:var(--muted);line-height:1.6;}

  /* ---------- Mobile topbar / off-canvas sidebar controls ---------- */
  .mobile-topbar{display:none;}
  .hamburger-btn{
    width:38px;height:38px;flex:0 0 38px;background:var(--card);border:1px solid var(--line);
    color:var(--text);border-radius:8px;font-size:18px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .mobile-topbar-brand{font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:.2px;}
  .sidebar-backdrop{display:none;}

  /* ---------- Main ---------- */
  .main{flex:1;min-width:0;padding:28px 34px 60px 34px;}
  .topbar{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px;flex-wrap:wrap;gap:12px;}
  .topbar h1{font-family:var(--font-display);font-size:22px;font-weight:600;margin:0;letter-spacing:.2px;}
  .topbar .today{font-size:12.5px;color:var(--muted);font-family:var(--font-mono);}

  /* ---------- Cards / glass panes ---------- */
  .grid{display:grid;gap:14px;}
  .grid-6{grid-template-columns:repeat(6,1fr);}
  .grid-5{grid-template-columns:repeat(5,1fr);}
  .grid-4{grid-template-columns:repeat(4,1fr);}
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-2{grid-template-columns:1fr 1fr;}
  @media(max-width:1100px){.grid-6{grid-template-columns:repeat(3,1fr);}.grid-5{grid-template-columns:repeat(3,1fr);}.grid-4,.grid-3{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:640px){.grid-6,.grid-5,.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

  /* ---------- Glass size compare (37.5mm / 53mm) — horizontal scroll wrapper ----------
     Used ONLY by: Monthly Report > Colors tab, and Stock & Inventory.
     Keeps the two size-panes side-by-side at every width; when they don't both
     fit, this wrapper scrolls horizontally (touch swipe / trackpad / scrollbar)
     instead of stacking, clipping, or shrinking text. */
  .hscroll-hint{display:none;}
  .hscroll-x{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
    overscroll-behavior-x:contain;
    width:100%;
    max-width:100%;
    padding-bottom:10px;
    scrollbar-width:thin;
    scrollbar-color:var(--line) var(--surface);
  }
  .hscroll-x::-webkit-scrollbar{height:7px;}
  .hscroll-x::-webkit-scrollbar-track{background:var(--surface);border-radius:8px;}
  .hscroll-x::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;}
  .hscroll-x::-webkit-scrollbar-thumb:hover{background:var(--accent-soft);}
  .glass-compare-row{
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:14px;
  }
  .glass-compare-row > .pane{
    flex:1 1 320px;
    min-width:320px;
  }
  @media(max-width:880px){
    .hscroll-hint{
      display:block;font-size:11px;color:var(--muted);letter-spacing:.3px;
      text-align:center;margin:0 0 8px 0;
    }
  }

  .pane{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:2px;
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
    padding:16px 18px;position:relative;
  }
  .pane::before{
    content:'';position:absolute;top:0;right:0;width:14px;height:14px;
    background:var(--bg);clip-path:polygon(0 0,100% 0,100% 100%);
  }
  .pane.accent::after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);}
  .kpi-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
  .kpi-icon-badge{
    flex:0 0 auto;width:28px;height:28px;border-radius:7px;
    background:rgba(255,138,43,.12);border:1px solid rgba(255,138,43,.22);
    display:flex;align-items:center;justify-content:center;color:var(--accent);
  }
  .kpi-icon-badge svg{width:15px;height:15px;display:block;}
  .kpi-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600;}
  .kpi-value{font-family:var(--font-mono);font-size:23px;font-weight:600;margin-top:8px;color:var(--text);}
  .kpi-sub{font-size:11px;color:var(--muted);margin-top:5px;}
  .kpi-value.amber{color:var(--amber);}
  .kpi-value.cyan{color:var(--accent);}
  .kpi-value.danger{color:var(--danger);}
  .kpi-value.success{color:var(--success);}

  section.block{margin-top:26px;}
  section.block h2{font-family:var(--font-display);font-size:15px;font-weight:600;margin:0 0 12px 0;color:var(--text);}

  /* ---------- Forms ---------- */
  .form-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
  @media(max-width:900px){.form-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:600px){.form-grid{grid-template-columns:1fr;}}
  .field{display:flex;flex-direction:column;gap:6px;}
  .field label{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;}
  .field input,.field select,.field textarea{
    background:var(--surface);border:1px solid var(--line);color:var(--text);
    padding:9px 10px;border-radius:6px;font-size:13.5px;font-family:var(--font-body);outline:none;
  }
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);}
  .field.span2{grid-column:span 2;}
  .field.span3{grid-column:span 3;}
  .field textarea{resize:vertical;min-height:44px;}
  .field-hint{font-size:11px;color:var(--muted);line-height:1.5;}
  .computed{
    background:var(--surface);border:1px dashed var(--accent-dim);border-radius:6px;
    padding:9px 10px;font-family:var(--font-mono);font-size:14px;color:var(--accent);
  }
  .btn{
    background:var(--accent);color:#0a1210;border:none;padding:10px 18px;border-radius:6px;
    font-weight:700;font-size:13.5px;cursor:pointer;font-family:var(--font-body);
  }
  .btn:hover{opacity:.9;}
  .btn.secondary{background:var(--card-hi);color:var(--text);border:1px solid var(--line);}
  .btn.danger{background:var(--danger);color:#fff;}
  .btn.compact{padding:6px 10px;font-size:11px;}
  .btn.ghost{background:none;color:var(--muted);border:1px solid var(--line);}
  .btn:disabled{opacity:.4;cursor:not-allowed;}
  .btn-row{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}

  /* ---------- Table ---------- */
  table{width:100%;border-collapse:collapse;font-size:12.8px;}
  thead th{
    text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
    color:var(--muted);padding:9px 10px;border-bottom:1px solid var(--line);font-weight:600;white-space:nowrap;
  }
  tbody td{padding:9px 10px;border-bottom:1px solid var(--line);color:var(--text);vertical-align:top;}
  tbody tr:hover{background:var(--card-hi);}
  .num{font-family:var(--font-mono);}
  .tag{
    display:inline-block;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:600;
    background:var(--accent-dim);color:var(--accent);
  }
  .row-actions button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12.5px;padding:3px 6px;}
  .row-actions button:hover{color:var(--accent);}
  .row-actions button.del:hover{color:var(--danger);}
  .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:6px;}
  .empty{padding:34px;text-align:center;color:var(--muted);font-size:13px;}

  .filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
  .filters select,.filters input{
    background:var(--surface);border:1px solid var(--line);color:var(--text);
    padding:8px 10px;border-radius:6px;font-size:12.5px;
  }
  .search-box{flex:1;min-width:160px;}

  .badge-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
  .chip{
    background:var(--surface);border:1px solid var(--line);border-radius:20px;
    padding:5px 12px;font-size:12px;display:flex;align-items:center;gap:8px;
  }
  .chip button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;}
  .chip button:hover{color:var(--danger);}
  .add-chip{display:flex;gap:8px;margin-top:10px;}
  .add-chip input{flex:1;background:var(--surface);border:1px solid var(--line);color:var(--text);padding:8px 10px;border-radius:6px;font-size:12.5px;}

  .toast{
    position:fixed;bottom:22px;right:22px;background:var(--card-hi);border:1px solid var(--accent);
    color:var(--text);padding:11px 18px;border-radius:6px;font-size:13px;z-index:999;
    box-shadow:0 8px 24px rgba(0,0,0,.4);
  }
  .update-banner{
    position:fixed;left:14px;right:14px;bottom:14px;z-index:9999;
    max-width:520px;margin:0 auto;
    background:var(--card-hi);border:1px solid var(--accent);color:var(--text);
    padding:12px 14px;border-radius:10px;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    font-size:13px;box-shadow:0 10px 28px rgba(0,0,0,.5);
  }
  .update-banner button{
    background:var(--accent);color:#1a0d00;border:none;padding:8px 14px;border-radius:6px;
    font-weight:700;font-size:12.5px;cursor:pointer;flex:0 0 auto;font-family:var(--font-body);
  }
  .update-banner button:hover{opacity:.9;}
  .environment-warning{position:fixed;left:50%;bottom:14px;z-index:10000;transform:translateX(-50%);width:min(760px,calc(100vw - 28px));display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 13px;background:rgba(36,24,10,.98);border:1px solid rgba(255,157,46,.5);border-radius:8px;box-shadow:0 16px 44px rgba(0,0,0,.48);color:#ffd49b;font-size:12px;line-height:1.45;}
  .environment-warning button{flex:0 0 auto;min-height:32px;padding:0 11px;border:1px solid rgba(255,157,46,.5);border-radius:6px;background:transparent;color:#ffe2ba;font:inherit;font-weight:700;cursor:pointer;}
  @media(max-width:480px){
    .update-banner{left:8px;right:8px;bottom:8px;flex-direction:column;align-items:stretch;text-align:center;}
    .environment-warning{align-items:stretch;flex-direction:column;text-align:left;}
  }
  .modal-bg{position:fixed;inset:0;background:rgba(6,8,10,.6);display:flex;align-items:center;justify-content:center;z-index:998;}
  .modal{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:22px;max-width:380px;width:90%;}
  .modal h3{margin:0 0 8px 0;font-family:var(--font-display);font-size:15px;}
  .modal p{color:var(--muted);font-size:13px;line-height:1.5;}

  .rank-list{display:flex;flex-direction:column;gap:8px;}
  .rank-row{display:flex;align-items:center;gap:10px;font-size:12.5px;}
  .rank-row .rname{width:120px;flex-shrink:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .rank-bar-track{flex:1;background:var(--surface);border-radius:4px;height:8px;overflow:hidden;}
  .rank-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent-dim),var(--accent));}
  .rank-bar-fill.waste{background:linear-gradient(90deg,#5a2b2b,var(--danger));}
  .rank-val{width:70px;text-align:right;font-family:var(--font-mono);color:var(--text);flex-shrink:0;}

  .report-header{
    background:linear-gradient(135deg,var(--card),var(--surface));
    border:1px solid var(--line);border-radius:6px;padding:22px 24px;margin-bottom:18px;
  }
  .report-header .rtitle{font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:.3px;}
  .report-header .rmonth{color:var(--accent);font-family:var(--font-mono);font-size:13px;margin-top:4px;}

  /* ---------- Color layer chips/tags ---------- */
  .color-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
  .color-chip{
    display:inline-flex;align-items:center;gap:6px;cursor:pointer;
    border:1px solid var(--line);border-radius:20px;padding:6px 12px;
    font-size:11.5px;font-weight:700;letter-spacing:.3px;background:var(--surface);color:var(--text);
    transition:.12s;user-select:none;
  }
  .color-chip .dot{width:10px;height:10px;border-radius:50%;background:var(--c);display:inline-block;border:1px solid rgba(255,255,255,.25);}
  .color-chip input{display:none;}
  .color-chip:has(input:checked){background:var(--c);color:var(--tc);border-color:var(--c);}
  .color-chip:has(input:checked) .dot{border-color:rgba(0,0,0,.25);}
  .color-chip.locked{cursor:default;opacity:.95;}
  .color-tag{
    display:inline-block;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700;
    letter-spacing:.2px;margin:0 4px 4px 0;
  }
  .layer-tag-list{display:flex;align-items:center;align-content:flex-start;flex-wrap:wrap;gap:5px;min-width:0;}
  .layer-tag{min-height:23px;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:3px 9px;border:1px solid rgba(255,255,255,.10);border-radius:999px;font-family:var(--font-body);font-size:10.5px;font-weight:700;line-height:1;white-space:nowrap;vertical-align:middle;box-sizing:border-box;}
  .waste-layer-list{width:100%;max-width:290px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:5px 6px;}
  .waste-layer-tag{width:100%;min-width:0;height:26px;min-height:26px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px;padding:0 8px;box-sizing:border-box;border:1px solid rgba(255,255,255,.10);border-radius:999px;font-family:var(--font-body);font-size:9.5px;font-weight:700;line-height:1;white-space:nowrap;overflow:hidden;color:var(--waste-tag-text,#fff);background:var(--waste-tag-background,var(--surface-2));}
  .waste-layer-tag.legacy{grid-template-columns:minmax(0,1fr) auto;}
  .waste-layer-tag .layer-reference{font-family:var(--font-mono);font-size:9px;font-weight:800;white-space:nowrap;}
  .waste-layer-tag .layer-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .waste-layer-tag .layer-quantity{font-size:9px;font-weight:800;white-space:nowrap;}
  .records-table .wasted-layers-cell{width:290px;min-width:290px;max-width:290px;vertical-align:top;}
  .calc-panel{
    display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:4px;
  }
  @media(max-width:640px){.calc-panel{grid-template-columns:1fr;}}
  .calc-box{background:var(--surface);border:1px dashed var(--line);border-radius:6px;padding:10px 12px;}
  .calc-box .clabel{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600;}
  .calc-box .cval{font-family:var(--font-mono);font-size:16px;margin-top:4px;font-weight:600;}
  .calc-box.profit .cval{color:var(--success);}
  .calc-box.waste .cval{color:var(--danger);}
  .calc-box.price .cval{color:var(--accent);}
  .color-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
  @media(max-width:640px){.color-mini-grid{grid-template-columns:repeat(2,1fr);}}
  .color-mini{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .color-mini.low{border-color:var(--danger);}
  .color-mini .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
  .color-mini .cm-name{font-size:11.5px;font-weight:600;flex:1;}
  .color-mini .cm-val{font-family:var(--font-mono);font-size:13px;}

  /* ---------- Waste color + quantity rows (prominent per-color stepper) ---------- */
  .waste-palette{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px;}
  @media(max-width:640px){.waste-palette{grid-template-columns:1fr;}}
  .waste-row{
    border:1px solid var(--line);border-radius:8px;padding:11px 13px;
    background:var(--surface);transition:.12s;
  }
  .waste-row.active{border-color:var(--c);box-shadow:0 0 0 1px var(--c) inset;}
  .waste-row-toggle{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;}
  .waste-row-toggle input{display:none;}
  .waste-row-toggle .dot{width:13px;height:13px;border-radius:50%;background:var(--c);flex:0 0 auto;border:1px solid rgba(255,255,255,.25);}
  .waste-row-name{font-size:12.5px;font-weight:700;letter-spacing:.4px;}
  .waste-row.active .waste-row-name{color:var(--c);}
  .waste-row-status{margin-left:auto;font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:.3px;}
  .waste-row.active .waste-row-status{color:var(--c);}
  .waste-stepper{display:flex;align-items:center;gap:10px;margin-top:11px;}
  .waste-stepper .qty-caption{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-right:2px;}
  .qty-btn{
    width:36px;height:36px;flex:0 0 36px;border-radius:8px;border:1px solid var(--line);
    background:var(--card-hi);color:var(--text);font-size:19px;font-weight:700;cursor:pointer;
    display:flex;align-items:center;justify-content:center;line-height:1;padding:0;
    -webkit-tap-highlight-color:transparent;
  }
  .qty-btn:hover{border-color:var(--accent);color:var(--accent);}
  .qty-btn:active{transform:scale(.94);}
  .waste-qty-input{
    width:60px;text-align:center;background:var(--bg);border:1px solid var(--line);color:var(--text);
    padding:8px 6px;border-radius:8px;font-size:15px;font-family:var(--font-mono);font-weight:700;
  }

  .warn-banner{background:rgba(226,87,76,.14);border:1px solid var(--danger);color:#ffb3ac;padding:12px 16px;border-radius:6px;font-size:13px;margin:14px 0;line-height:1.6;}
  .warn-banner.mini{margin:0 0 16px 0;}
  .info-banner{background:rgba(255,138,43,.1);border:1px solid var(--accent-dim);color:var(--text);padding:10px 14px;border-radius:6px;font-size:12.5px;margin:0 0 16px 0;}
  .stock-low{color:var(--danger)!important;font-weight:700;}
  .rank-1{color:var(--danger);}
  .rank-2{color:var(--amber);}
  .rank-3{color:var(--muted);}

  .subtabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;}
  .subtabs button{background:var(--card);border:1px solid var(--line);color:var(--muted);padding:7px 14px;border-radius:20px;font-size:12px;cursor:pointer;font-weight:600;}
  .subtabs button.active{background:var(--accent-dim);color:var(--accent);border-color:var(--accent-dim);}

  /* ---------- Login ---------- */
  .login-wrap{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:
      radial-gradient(circle at 15% 10%, rgba(255,138,43,.12), transparent 45%),
      radial-gradient(circle at 85% 90%, rgba(255,138,43,.08), transparent 45%),
      var(--bg);
    padding:24px;
  }
  .login-card{
    width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);
    border-radius:12px;padding:34px 32px 30px 32px;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
  }
  .login-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:32px;}
  .login-brand .mark{
    width:68px;height:68px;padding:0;border-radius:18px;background:linear-gradient(145deg,#ffa036,#ed7000);
    display:grid;place-items:center;color:#140b03;white-space:nowrap;
    font-family:var(--font-heading);font-weight:800;font-size:21px;line-height:1;letter-spacing:-.04em;
    box-shadow:0 8px 24px rgba(255,111,0,.22);
  }
  .login-brand h1{margin:18px 0 0;color:var(--text);font-family:var(--font-heading);font-size:clamp(22px,4vw,27px);font-weight:700;line-height:1.15;letter-spacing:-.03em;text-align:center;}
  .login-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
  .login-field label{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;}
  .login-input-wrap{position:relative;display:flex;align-items:center;}
  .login-field input{
    width:100%;background:var(--surface);border:1px solid var(--line);color:var(--text);
    padding:11px 12px;border-radius:8px;font-size:14px;font-family:var(--font-body);outline:none;
  }
  .login-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,138,43,.14);}
  .login-field input.has-toggle{padding-right:40px;}
  .pw-toggle{
    position:absolute;right:10px;background:none;border:none;color:var(--muted);cursor:pointer;
    font-size:12px;padding:4px 6px;font-weight:600;letter-spacing:.2px;
  }
  .pw-toggle:hover{color:var(--accent);}
  .login-error{
    background:rgba(226,87,76,.12);border:1px solid var(--danger);color:#ffb3ac;
    padding:9px 12px;border-radius:8px;font-size:12.5px;margin-bottom:16px;line-height:1.5;
  }
  .login-btn{
    width:100%;background:var(--accent);color:#1a0d00;border:none;padding:12px 18px;border-radius:8px;
    font-weight:700;font-size:14px;cursor:pointer;font-family:var(--font-body);
    display:flex;align-items:center;justify-content:center;gap:8px;
  }
  .login-btn:hover{opacity:.92;}
  .login-btn:disabled{opacity:.55;cursor:not-allowed;}
  .login-spinner{
    width:15px;height:15px;border-radius:50%;border:2px solid rgba(26,13,0,.35);
    border-top-color:#1a0d00;animation:spin .7s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  .login-divider{
    display:flex;align-items:center;gap:12px;margin:18px 0 14px;
    font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;
  }
  .login-divider::before,.login-divider::after{
    content:"";flex:1;height:1px;background:var(--line,rgba(255,255,255,.12));
  }
  .login-google-btn{
    width:100%;background:#ffffff;color:#1f1f1f;border:1px solid rgba(0,0,0,.12);
    padding:11px 18px;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;
    font-family:var(--font-body);display:flex;align-items:center;justify-content:center;gap:10px;
  }
  .login-google-btn:hover{background:#f5f5f5;}
  .login-google-btn:disabled{opacity:.55;cursor:not-allowed;}
  .login-google-btn svg{flex:none;}
  .login-foot{margin-top:20px;text-align:center;font-size:11px;color:var(--muted);}
  .logout-btn{
    display:flex;align-items:center;gap:8px;width:100%;background:none;
    border:1px solid var(--line);color:var(--muted);padding:9px 12px;border-radius:8px;
    font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--font-body);margin-top:10px;
  }
  .logout-btn:hover{border-color:var(--danger);color:#ffb3ac;}
  .auth-gate{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;}

  /* ---------- Sidebar user/logout box (bottom-left, fixed to stay inside sidebar) ---------- */
  .user-box{
    width:100%;display:flex;flex-direction:column;align-items:stretch;gap:9px;padding:12px;box-sizing:border-box;
    background:linear-gradient(145deg,rgba(255,133,8,.075),rgba(14,16,16,.94));border:1px solid rgba(255,133,8,.25);border-radius:11px;box-shadow:0 10px 26px rgba(0,0,0,.24);overflow:hidden;
  }
  .user-email{
    width:100%;min-width:0;padding:2px 3px;box-sizing:border-box;color:var(--text-soft);font-family:var(--font-body);font-size:10.5px;font-weight:550;line-height:1.35;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .sidebar-sync-status{display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:10px;color:var(--muted);font-family:var(--font-body);font-size:10.5px;line-height:1.3;}
  .sidebar-sync-dot{width:7px;height:7px;flex:0 0 7px;background:var(--success);border-radius:50%;box-shadow:0 0 8px rgba(72,201,120,.45);}
  .sidebar-sync-status.sync-error{color:#ffb0b0;}.sidebar-sync-status.sync-error .sidebar-sync-dot{background:var(--danger);box-shadow:0 0 8px rgba(255,83,83,.45);}
  .user-box .logout-btn{width:100%;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;margin:0;padding:0 12px;box-sizing:border-box;color:var(--text);background:rgba(255,255,255,.025);border:1px solid var(--line-neutral);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:12px;font-weight:700;text-align:center;cursor:pointer;white-space:nowrap;transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-standard);}
  .user-box .logout-btn:hover{color:#fff5ea;background:rgba(255,133,8,.10);border-color:rgba(255,133,8,.48);box-shadow:0 0 14px rgba(255,111,0,.13);}
  .user-box .logout-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .admin-role-badge{display:inline-flex;align-items:center;min-height:20px;margin:0 0 8px;padding:2px 7px;border:1px solid rgba(255,139,26,.42);border-radius:999px;background:rgba(255,139,26,.12);color:var(--accent);font-size:9px;font-weight:800;letter-spacing:.08em;}
  .user-box .admin-role-badge,.user-box .user-role-badge{align-self:center;margin:0;}
  .role-status-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 10%,rgba(255,116,0,.10),transparent 35%),var(--bg);}
  .role-status-card{width:min(480px,100%);padding:34px;text-align:center;background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:0 28px 80px rgba(0,0,0,.58),0 0 28px rgba(255,111,0,.08);}
  .role-status-icon{width:52px;height:52px;margin:0 auto 16px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(180deg,#ff941f,#ed7000);color:#160b02;font-weight:900;}
  .role-status-card h1{margin:16px 0 10px;font-size:24px;}.role-status-card p{color:var(--muted);line-height:1.6;}
  .role-status-card .status-badge{margin:auto;}.status-warning{color:#ffc172;background:var(--warning-soft);border-color:rgba(255,157,46,.34);}.status-denied{color:#ff9b92;background:var(--danger-soft);border-color:rgba(255,83,83,.38);}
  .role-account-email{margin:18px 0;padding:10px 12px;border:1px solid var(--line-neutral);border-radius:var(--radius-sm);background:var(--input-bg);color:var(--text-soft);font:600 12px var(--font-mono);overflow-wrap:anywhere;}
  .role-status-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}

  /* ---------- Dashboard date badge (top-right, contained/responsive) ---------- */
  .today-date{
    background:var(--card);border:1px solid var(--line);border-radius:8px;
    padding:8px 14px;box-sizing:border-box;max-width:100%;white-space:normal;
    overflow-wrap:break-word;text-align:right;
  }

  /* ---------- Bulk multi-color restock grid ---------- */
  .restock-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px;}
  .stock-color-id{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:900;color:var(--accent);margin-right:5px;}
  .stock-name-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px;}
  .stock-name-row{display:grid;grid-template-columns:42px 42px minmax(0,1fr);align-items:center;gap:10px;padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);}
  .stock-name-row img{width:42px;height:42px;object-fit:cover;border-radius:7px;background:#080b0f;}
  .stock-name-row strong{color:var(--accent);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;}
  @media(max-width:720px){.stock-name-list{grid-template-columns:1fr;}.stock-name-row{grid-template-columns:38px 38px minmax(0,1fr);}.stock-name-row img{width:38px;height:38px;}}
  @media(max-width:900px){.restock-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:520px){.restock-grid{grid-template-columns:1fr;}}
  .restock-color-row{
    background:var(--surface);border:1px solid var(--line);border-radius:8px;
    padding:9px 10px;display:flex;align-items:center;gap:9px;box-sizing:border-box;cursor:text;min-width:0;
  }
  .restock-color-swatch{width:14px;height:14px;flex:0 0 14px;background:var(--c);border:1px solid rgba(255,255,255,.28);border-radius:50%;box-shadow:0 0 8px color-mix(in srgb,var(--c) 45%,transparent);}
  .restock-color-identity{min-width:0;display:flex;align-items:center;gap:7px;flex:1;}
  .restock-color-reference{flex:0 0 auto;color:var(--accent);font-family:var(--font-mono);font-size:11px;white-space:nowrap;}
  .restock-color-name{min-width:0;color:var(--text);font-family:var(--font-body);font-size:12px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .restock-color-row input{
    width:72px;flex:0 0 72px;min-width:0;background:var(--card);border:1px solid var(--line);color:var(--text);
    padding:7px 8px;border-radius:6px;font-size:13px;font-family:var(--font-body);outline:none;
  }
  .restock-color-row input:focus{border-color:var(--accent);}
  @media(max-width:600px){.restock-color-row input{width:64px;flex:0 0 64px;font-size:16px;}}

  /* Shared compact production selectors and stock/report color identity. */
  .production-color-chip-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
  .production-color-chip{position:relative;min-width:0;min-height:44px;display:flex;align-items:center;gap:8px;padding:8px 11px;color:var(--text-soft);background:var(--input-bg);border:1px solid var(--line-neutral);border-radius:var(--radius-sm);font-size:12px;font-weight:650;overflow:hidden;transition:color .15s ease,background .15s ease,border-color .15s ease,box-shadow .2s ease;}
  label.production-color-chip{cursor:pointer;}.production-color-chip:hover{color:var(--text);border-color:var(--line-strong);background:var(--accent-softer);}
  .production-color-chip.is-selected{color:#fffaf4;background:linear-gradient(180deg,rgba(255,139,26,.20),rgba(255,105,0,.10));border-color:rgba(255,139,26,.82);box-shadow:0 0 0 1px rgba(255,133,8,.12),0 0 14px rgba(255,111,0,.24);}
  .production-color-checkbox{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
  .production-color-swatch,.stock-color-swatch{width:13px;height:13px;flex:0 0 13px;background:var(--swatch);border:1px solid rgba(255,255,255,.26);border-radius:50%;box-shadow:0 0 7px color-mix(in srgb,var(--swatch) 45%,transparent);}
  .production-color-reference,.stock-color-ref{flex:0 0 auto;color:var(--accent);font-family:var(--font-mono);font-size:11px;font-weight:700;white-space:nowrap;}
  .production-color-name,.stock-color-name{min-width:0;overflow:hidden;color:inherit;text-overflow:ellipsis;white-space:nowrap;}
  .production-color-availability{margin-left:auto;color:var(--muted);font:600 10px var(--font-mono);white-space:nowrap;}
  .full-color-layer-chip{cursor:default;}.full-color-layer-chip:hover{background:var(--input-bg);border-color:var(--line-neutral);color:var(--text-soft);}
  @media(max-width:1000px){.production-color-chip-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
  @media(max-width:700px){.production-color-chip-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.production-color-availability{display:none;}}
  @media(max-width:390px){.production-color-chip-grid{grid-template-columns:1fr;}}

  .stock-size-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;}
  .stock-size-grid>.pane{min-width:0;}
  .stock-color-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-md);-webkit-overflow-scrolling:touch;}
  .stock-color-table{width:100%;min-width:980px;table-layout:fixed;border-collapse:collapse;}
  .stock-color-table th,.stock-color-table td{height:52px;padding:9px 12px;vertical-align:middle;border-bottom:1px solid var(--line-neutral);}
  .stock-color-table th{height:48px;color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.025em;line-height:1.2;text-transform:uppercase;white-space:nowrap;}
  .stock-color-table td{color:var(--text-soft);font-size:12px;}
  .stock-color-table th:first-child,.stock-color-table td:first-child{width:190px;}
  .stock-color-table .numeric-cell{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;}
  .stock-color-identity{min-width:170px;display:grid;grid-template-columns:14px 34px minmax(105px,1fr);align-items:center;gap:7px;min-height:30px;}
  .stock-color-swatch{width:12px;height:12px;box-shadow:none;}
  .stock-color-name{color:var(--text-soft);font-size:11.5px;font-weight:650;line-height:1;}
  @media(max-width:1100px){.stock-size-grid{grid-template-columns:1fr;}}

  /* Gobo Glass catalogue (independent of production/waste COLOR_META) */
  .palette-header{margin-bottom:22px;}
  .palette-header h1{margin:0 0 6px;font-size:24px;}
  .palette-kicker{color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
  .palette-description{max-width:720px;margin:10px 0 0;color:var(--muted);line-height:1.6;}
  .palette-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
  .palette-card{min-width:0;margin:0;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .18s ease,transform .18s ease;}
  .palette-card:hover{border-color:var(--accent);transform:translateY(-2px);}
  .palette-image-wrap{overflow:hidden;background:#000;border-radius:8px;aspect-ratio:1/1;}
  .palette-image{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;}
  .palette-caption{padding:13px 4px 4px;text-align:center;border-top:1px solid var(--line);margin-top:12px;}
  .palette-ref{color:var(--accent);font-size:22px;font-weight:800;line-height:1;}
  .palette-name{margin-top:7px;color:var(--text);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.35;}
  .palette-disclaimer{margin:24px 0 0;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.55;}
  @media(max-width:1100px){.palette-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
  @media(max-width:760px){.palette-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.palette-card{padding:9px;}}
  @media(max-width:430px){.palette-grid{grid-template-columns:1fr;}}

  .palette-tabs{display:grid;grid-template-columns:1fr 1fr;width:min(480px,100%);margin:0 0 22px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;}
  .palette-tab{min-height:42px;padding:9px 12px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;}
  .palette-tab[aria-selected="true"]{background:var(--accent);color:#1a0d00;}
  .palette-tab:focus-visible,.full-palette-add:focus-visible,.full-palette-slot-empty:focus-visible,.full-palette-action:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px;}
  .full-palette-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;}
  .full-palette-add{border:0;border-radius:6px;background:var(--accent);color:#1a0d00;padding:10px 16px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;}
  .full-palette-add:disabled{opacity:.5;cursor:not-allowed;}
  .full-palette-count{color:var(--muted);font:600 12px var(--font-mono);}
  .full-palette-feedback{min-height:18px;margin:-6px 0 12px;color:var(--danger);font-size:11.5px;}
  .full-palette-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;}
  .full-palette-slot{min-width:0;margin:0;padding:9px;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
  .full-palette-slot-empty{width:100%;aspect-ratio:1/1;border:1px dashed var(--muted);border-radius:7px;background:var(--surface);color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
  .full-palette-slot-empty:hover{border-color:var(--accent);color:var(--accent);}.full-palette-plus{font-size:25px;line-height:1;}.full-palette-add-label{font-size:11px;font-weight:700;}
  .full-palette-image-wrap{aspect-ratio:1/1;background:#0b0d10;border-radius:7px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
  .full-palette-image{display:block;width:100%;height:100%;object-fit:contain;}
  .full-palette-slot-meta{padding:9px 2px 2px;}.full-palette-slot-number{font:700 11px var(--font-mono);color:var(--text);}.full-palette-filename{margin-top:4px;color:var(--muted);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .full-palette-actions{display:flex;gap:6px;margin-top:8px;}.full-palette-action{flex:1;min-height:32px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--text);font:inherit;font-size:10.5px;cursor:pointer;}.full-palette-action.remove{color:#ffb3ac;}
  .full-palette-loading,.full-palette-empty-note{padding:28px;text-align:center;color:var(--muted);font-size:12.5px;}
  @media(max-width:1100px){.full-palette-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
  @media(max-width:760px){.full-palette-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}}
  @media(max-width:520px){.full-palette-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.full-palette-toolbar{align-items:flex-start;flex-direction:column;}}

  /* ---------- Gobo machine water-change schedule ---------- */
  .water-machine-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
  .water-machine-card{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:17px;}
  .water-machine-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px;}
  .water-machine-name{margin:0;font-family:var(--font-display);font-size:15px;line-height:1.35;}
  .water-status{flex:0 0 auto;padding:5px 8px;border-radius:999px;font-size:9.5px;font-weight:800;letter-spacing:.06em;white-space:nowrap;}
  .water-status.ok{background:rgba(95,191,119,.16);color:var(--success);}.water-status.soon{background:rgba(242,166,90,.17);color:var(--amber);}.water-status.today{background:rgba(255,138,43,.2);color:var(--accent-soft);}.water-status.overdue{background:rgba(226,87,76,.18);color:#ff9b92;}.water-status.not-started{background:var(--card-hi);color:var(--muted);}
  .water-requirement{padding:10px 11px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-size:11.5px;line-height:1.5;}.water-requirement strong{color:var(--accent);}.water-warning{margin-top:6px;color:#ff9b92;font-weight:700;}
  .water-details{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:13px 0;}.water-detail{padding:9px;background:var(--surface);border-radius:6px;}.water-detail-label{color:var(--muted);font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;}.water-detail-value{margin-top:5px;font:700 12px var(--font-mono);overflow-wrap:anywhere;}
  .water-countdown{min-height:19px;margin-bottom:12px;color:var(--muted);font-size:11.5px;font-weight:600;}.water-countdown.overdue{color:#ff9b92;}.water-change-btn{width:100%;}
  .water-history{margin-top:24px;}.water-history h2{margin-bottom:11px;}
  .water-actions{display:flex;gap:6px;white-space:nowrap;}
  .water-last-by{margin:-3px 0 12px;color:var(--muted);font-size:11.5px;}.water-last-by strong{color:var(--text);}
  .water-modal-error{min-height:18px;color:#ff9b92;font-size:11.5px;line-height:1.45;}.water-confirm-check{display:flex;align-items:flex-start;gap:9px;margin:13px 0;color:var(--text);font-size:12px;line-height:1.45;}.water-confirm-check input{width:auto;margin-top:2px;}.water-required{color:#ff9b92;}
  .water-alerts{margin-top:18px;}.water-alert-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:11px;}.water-alert-head h2{margin:0;}.water-alert-badge{padding:5px 9px;border-radius:999px;background:rgba(242,166,90,.17);color:var(--amber);font-size:10.5px;font-weight:800;}.water-alert-badge.all-ok{background:rgba(95,191,119,.16);color:var(--success);}.water-alert-list{display:grid;gap:9px;}.water-alert{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:7px;background:var(--surface);}.water-alert.soon{border-left-color:var(--amber);}.water-alert.today{border-left-color:var(--accent);background:rgba(255,138,43,.06);}.water-alert.overdue{border-left-color:var(--danger);background:rgba(226,87,76,.09);}.water-alert-copy{min-width:0;}.water-alert-name{font-weight:700;font-size:12.5px;}.water-alert-message{margin-top:4px;color:var(--muted);font-size:11.5px;}.water-alert.overdue .water-alert-message{color:#ff9b92;}.water-alert-due{margin-top:3px;color:var(--muted);font:10.5px var(--font-mono);}.water-alert-ok{padding:11px 12px;border:1px solid rgba(95,191,119,.28);border-radius:7px;color:var(--success);background:rgba(95,191,119,.07);font-size:12px;}
  @media(max-width:560px){.water-alert{align-items:flex-start;flex-direction:column;}.water-alert .btn{width:100%;}.water-actions{white-space:normal;}}

  /* ---------- Gobo holder inventory ---------- */
  .holder-intro{margin:-14px 0 18px;color:var(--muted);font-size:12.5px;line-height:1.55;}.holder-note{margin-top:5px;font-size:11.5px;}
  .holder-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 10px;}.holder-toolbar h2{margin:0;}
  .holder-summary{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px;}.holder-summary .kpi-value{font-size:24px;}
  .holder-type{display:inline-block;padding:3px 8px;border-radius:999px;background:var(--card-hi);color:var(--muted);font-size:10px;font-weight:700;}.holder-type.default{background:rgba(95,191,119,.14);color:var(--success);}
  .holder-default-note{margin:8px 0 0;color:var(--muted);font-size:11px;}.holder-empty{padding:28px;text-align:center;color:var(--muted);}.holder-empty .btn{margin-top:14px;}.holder-actions{display:flex;gap:6px;white-space:nowrap;}.holder-form-error{min-height:18px;color:#ff9b92;font-size:11.5px;line-height:1.45;}
  @media(max-width:560px){.holder-toolbar{align-items:flex-start;flex-direction:column;}.holder-toolbar .btn{width:100%;}.holder-summary{grid-template-columns:1fr 1fr;}.holder-actions{white-space:normal;}}

  /* ---------- Machine guide placeholders ---------- */
  .machine-guide-intro{margin:-13px 0 16px;color:var(--muted);font-size:12.5px;line-height:1.6;}
  .machine-guide-notice{margin-bottom:18px;}
  .machine-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
  .machine-guide-card{min-width:0;display:flex;gap:12px;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:8px;}
  .machine-guide-icon{width:38px;height:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;color:var(--accent);background:var(--accent-dim);border-radius:7px;font-size:18px;}
  .machine-guide-card-body{min-width:0;}.machine-guide-card h2{margin:0 0 8px;color:var(--text);font-size:15px;}.machine-guide-card p{margin:0 0 14px;color:var(--muted);font-size:12.5px;line-height:1.55;}.machine-guide-coming-soon{display:inline-flex;white-space:normal;}
  @media(max-width:1000px){.machine-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media(max-width:600px){.machine-guide-grid{grid-template-columns:1fr;}.machine-guide-card{padding:15px;}}
  @media(max-width:1100px){.water-machine-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media(max-width:680px){.water-machine-grid{grid-template-columns:1fr;}.water-details{grid-template-columns:1fr 1fr;}}

  /* ---------- Review highlight (temporary marker for areas changed in this update) ---------- */

  /* ============================================================
     RESPONSIVE — TABLET
     ============================================================ */
  @media(max-width:1000px){
    .sidebar{width:200px;flex:0 0 200px;}
    .main{padding:24px 22px 50px 22px;}
  }

  /* ============================================================
     RESPONSIVE — MOBILE (phones + small tablets, portrait & landscape)
     ============================================================ */
  @media(max-width:880px){
    #app{display:block;}

    .mobile-topbar{
      display:flex;align-items:center;gap:12px;
      padding:10px 14px;position:sticky;top:0;z-index:35;
      background:var(--surface);border-bottom:1px solid var(--line);
    }

    .sidebar-backdrop{
      display:block;position:fixed;inset:0;background:rgba(6,8,10,.6);
      z-index:40;opacity:0;pointer-events:none;transition:opacity .18s ease;
    }
    .sidebar-backdrop.show{opacity:1;pointer-events:auto;}

    .sidebar{
      position:fixed;top:0;left:0;z-index:45;
      width:78vw;max-width:280px;flex:none;height:100vh;
      transform:translateX(-100%);transition:transform .2s ease;
      box-shadow:10px 0 30px rgba(0,0,0,.5);
    }
    .sidebar.open{transform:translateX(0);}

    .main{
      width:100%;max-width:100%;box-sizing:border-box;
      padding:16px 14px 50px 14px;
    }

    .topbar{flex-direction:column;align-items:flex-start;margin-bottom:18px;}
    .topbar h1{font-size:19px;}

    /* Cards & panes always full-width, never overflow */
    .pane,.report-header,.table-wrap,.modal{max-width:100%;}
    .pane{padding:14px 14px;}

    /* Grids collapse to a single column well before desktop breakpoints */
    .grid-6,.grid-5,.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}

    /* Forms: always single column, full-width fields */
    .form-grid{grid-template-columns:1fr;gap:12px;}
    .field.span2,.field.span3{grid-column:span 1;}
    .field input,.field select,.field textarea{width:100%;max-width:100%;font-size:16px;}

    .filters{flex-direction:column;align-items:stretch;}
    .filters select,.filters input,.search-box{width:100%;max-width:100%;}

    .calc-panel{grid-template-columns:1fr;}
    .color-mini-grid{grid-template-columns:repeat(2,1fr);}

    /* Buttons: full width & touch-friendly on mobile */
    .btn-row{flex-direction:column;align-items:stretch;}
    .btn{width:100%;padding:12px 16px;font-size:14px;}
    .subtabs{gap:6px;}
    .subtabs button{padding:8px 12px;}

    /* Tables scroll horizontally instead of breaking the page */
    .table-wrap{-webkit-overflow-scrolling:touch;}
    table{font-size:12px;}

    .rank-row .rname{width:88px;}
    .modal{width:92%;padding:18px;}

    .color-chip{padding:7px 12px;font-size:12px;}
    .waste-palette{grid-template-columns:1fr;}
    .qty-btn{width:40px;height:40px;flex:0 0 40px;font-size:20px;}
    .waste-qty-input{width:64px;padding:9px 6px;font-size:16px;}
    .login-card{padding:26px 22px 24px 22px;}
  }

  @media(max-width:400px){
    .main{padding:14px 10px 46px 10px;}
    .topbar h1{font-size:17px;}
    .kpi-value{font-size:20px;}
  }

  /* ============================================================
     PREMIUM DARK VISUAL SYSTEM
     Theme / Base / App Shell / Sidebar / Typography / Cards
     Buttons / Forms / Tables / Status / Modals / Toasts
     Screen-Specific / Responsive / Print
     ============================================================ */
  :root{
    color-scheme:dark;
    --bg:#070909;--bg-deep:#040606;--surface:#0c0e0e;--surface-2:#111313;
    --card:#121313;--card-hi:#171512;--card-hover:#171512;--input-bg:#0a0c0c;
    --line:rgba(255,139,26,.18);--line-strong:rgba(255,139,26,.38);--line-neutral:rgba(255,255,255,.08);
    --accent:#ff8508;--accent-hover:#ff9d2e;--accent-active:#e96f00;--accent-dim:rgba(255,133,8,.12);--accent-soft:#ffad55;--accent-softer:rgba(255,133,8,.07);
    --text:#f5f5f3;--text-soft:#d9d9d4;--muted:#9a9b96;--muted-2:#6e706c;
    --success:#48c978;--success-soft:rgba(72,201,120,.12);--warning:#ff9d2e;--warning-soft:rgba(255,157,46,.13);--amber:#ff9d2e;
    --danger:#ff5353;--danger-soft:rgba(255,83,83,.13);--info:#55a7ff;--info-soft:rgba(85,167,255,.12);
    --shadow-card:0 12px 34px rgba(0,0,0,.26);--shadow-orange:0 0 0 1px rgba(255,133,8,.26),0 0 18px rgba(255,111,0,.18);--shadow-orange-strong:0 0 0 1px rgba(255,133,8,.52),0 0 12px rgba(255,111,0,.42),0 0 28px rgba(255,111,0,.18);
    --radius-sm:8px;--radius-md:12px;--radius-lg:16px;
    --font-heading:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;--font-display:var(--font-heading);--font-body:'Inter',ui-sans-serif,system-ui,sans-serif;--font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
    --transition-fast:150ms ease;--transition-standard:220ms ease;
  }
  html,body{min-height:100%;background:radial-gradient(circle at 78% -10%,rgba(255,116,0,.07),transparent 34%),radial-gradient(circle at 18% 18%,rgba(255,145,38,.035),transparent 26%),var(--bg);color:var(--text);font-family:var(--font-body);}
  body{line-height:1.45;}button,input,select,textarea{font-family:var(--font-body);}::selection{background:rgba(255,133,8,.28);color:#fff;}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

  .sidebar{width:250px;flex-basis:250px;background:linear-gradient(180deg,rgba(15,16,15,.98),rgba(7,9,9,.99));border-right:1px solid var(--line);box-shadow:10px 0 34px rgba(0,0,0,.34);}
  .brand{border-bottom-color:var(--line);}.brand .mark,.login-brand .mark{background:linear-gradient(145deg,#ffa036,#e96f00);box-shadow:0 8px 24px rgba(255,111,0,.22);}.brand .name,.login-brand .name{font-family:var(--font-heading);}
  .nav{gap:4px;}.nav button{min-height:44px;width:100%;padding:0 15px;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text-soft);font-size:14px;font-weight:500;white-space:nowrap;transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-standard),transform var(--transition-fast);}
  .nav button:hover{color:var(--text);background:var(--accent-softer);border-color:var(--line);}.nav button.active{color:#fff8ef;background:linear-gradient(90deg,rgba(255,112,0,.20),rgba(255,145,42,.10));border-color:rgba(255,133,8,.72);box-shadow:var(--shadow-orange-strong);}.nav button.active .ico{color:var(--accent-hover);}.nav button:active{transform:translateY(1px);}.nav .ico{flex:0 0 16px;}
  .sidebar-foot{border-top-color:var(--line);color:var(--muted);}
  .mobile-topbar{background:rgba(8,10,10,.94);border-bottom-color:var(--line);backdrop-filter:blur(12px);}.hamburger-btn{background:var(--surface-2);border-color:var(--line);border-radius:var(--radius-sm);}.sidebar-backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(3px);}
  .main{padding:34px 38px 64px;}.topbar{margin-bottom:28px;}.topbar h1,.page-title{font-family:var(--font-heading);font-size:clamp(25px,2.2vw,34px);font-weight:700;line-height:1.12;letter-spacing:-.035em;}.topbar .today,.today-date{color:var(--text-soft);background:rgba(17,19,19,.78);border:1px solid var(--line);border-radius:999px;padding:8px 13px;font:500 11px var(--font-body);box-shadow:0 8px 24px rgba(0,0,0,.18);}
  section.block h2,.holder-toolbar h2,.machine-guide-card h2,.water-machine-name,.modal h3,.report-header .rtitle{font-family:var(--font-heading);font-weight:600;letter-spacing:-.02em;}

  .pane,.report-header,.login-card,.water-machine-card,.machine-guide-card,.palette-card,.full-palette-slot{background:linear-gradient(145deg,rgba(21,21,19,.98),rgba(12,14,14,.98));border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-card);}
  .pane{clip-path:none;padding:18px;}.pane::before{display:none;}.pane.accent{border-color:var(--line-strong);}.pane.accent::after{width:3px;border-radius:var(--radius-md) 0 0 var(--radius-md);}
  .kpi-label,.calc-box .clabel{color:var(--text-soft);font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.035em;text-transform:uppercase;}.kpi-value{font-family:var(--font-heading);font-size:clamp(25px,2vw,33px);font-weight:700;line-height:1.05;letter-spacing:-.035em;}.kpi-icon-badge{background:var(--accent-soft);background:rgba(255,133,8,.10);border-color:var(--line);}.calc-box .cval,.palette-ref{font-family:var(--font-heading);}.calc-box,.computed,.water-detail,.water-requirement,.color-mini,.restock-color-row{background:rgba(9,11,11,.72);border-color:var(--line);border-radius:var(--radius-sm);}
  .palette-card{transition:transform var(--transition-standard),border-color var(--transition-standard),box-shadow var(--transition-standard),background var(--transition-standard);}.palette-card:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:var(--shadow-card),0 0 20px rgba(255,119,0,.09);background:var(--card-hover);}

  .btn,.btn.primary,.login-btn,.full-palette-add{min-height:42px;padding:0 17px;border:1px solid rgba(255,138,20,.78);border-radius:var(--radius-sm);background:linear-gradient(180deg,#ff941f,#ed7000);color:#140b03;font-family:var(--font-body);font-size:13px;font-weight:700;box-shadow:0 7px 20px rgba(255,111,0,.16);transition:transform var(--transition-fast),filter var(--transition-fast),box-shadow var(--transition-standard),background var(--transition-fast);}
  .btn:hover,.login-btn:hover,.full-palette-add:hover{opacity:1;filter:brightness(1.08);box-shadow:var(--shadow-orange-strong);transform:translateY(-1px);}.btn:active,.login-btn:active{transform:translateY(0);}.btn:disabled,.login-btn:disabled{opacity:.52;cursor:not-allowed;transform:none;box-shadow:none;}.btn.secondary{color:var(--text);background:var(--surface-2);border-color:var(--line-strong);box-shadow:none;}.btn.secondary:hover{background:var(--card-hover);}.btn.danger{color:#ffdede;background:var(--danger-soft);border-color:rgba(255,83,83,.48);box-shadow:none;}.btn.danger:hover{background:rgba(255,83,83,.20);box-shadow:0 0 18px rgba(255,83,83,.14);}.btn.ghost{background:transparent;color:var(--text-soft);border-color:var(--line-neutral);box-shadow:none;}.btn.compact{min-height:32px;padding:0 10px;font-size:11px;}

  .field label,.login-field label,label{color:var(--text-soft);font-family:var(--font-body);font-size:12px;font-weight:600;}.field label,.login-field label{text-transform:none;letter-spacing:.01em;}
  .field input,.field select,.field textarea,.login-field input,.filters input,.filters select,.add-chip input,.restock-color-row input,.waste-qty-input{color:var(--text);background:var(--input-bg);border:1px solid var(--line-neutral);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:14px;outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-standard),background var(--transition-fast);}
  .field input:hover,.field select:hover,.field textarea:hover,.login-field input:hover,.filters input:hover,.filters select:hover,.add-chip input:hover{border-color:var(--line);}.field input:focus,.field select:focus,.field textarea:focus,.login-field input:focus,.filters input:focus,.filters select:focus,.add-chip input:focus,.restock-color-row input:focus,.waste-qty-input:focus{background:#0d0f0f;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,133,8,.11),0 0 16px rgba(255,111,0,.09);}.field input[readonly]{color:var(--muted);background:#080a0a;}.field-hint,.holder-default-note{color:var(--muted);}
  .filters{padding:14px;background:linear-gradient(145deg,rgba(17,18,17,.92),rgba(10,12,12,.92));border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-card);}.chip{background:var(--surface-2);border-color:var(--line-neutral);}.color-chip,.waste-row{background:var(--surface-2);border-color:var(--line-neutral);}.color-chip:hover,.waste-row:hover{border-color:var(--line);}.waste-row.active{box-shadow:0 0 0 1px var(--c) inset,0 0 16px rgba(255,133,8,.06);}

  .table-wrap{overflow-x:auto;background:rgba(11,13,13,.84);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-card);}table{font-family:var(--font-body);}thead th{color:var(--muted);background:rgba(255,132,8,.045);border-bottom:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.035em;}tbody td{color:var(--text-soft);border-bottom:1px solid var(--line-neutral);font-size:13px;}tbody tr{transition:background var(--transition-fast);}tbody tr:hover{background:rgba(255,133,8,.045);}tbody tr:last-child td{border-bottom:0;}.row-actions button{color:var(--text-soft);}.empty{background:rgba(255,255,255,.012);}
  .tag,.status-badge,.water-status,.holder-type,.water-alert-badge{display:inline-flex;align-items:center;min-height:25px;padding:4px 9px;border:1px solid transparent;border-radius:999px;font-family:var(--font-body);font-size:10.5px;font-weight:700;letter-spacing:.025em;text-transform:uppercase;}.water-status.ok,.holder-type.default,.water-alert-badge.all-ok{color:#8bedad;background:var(--success-soft);border-color:rgba(72,201,120,.32);}.water-status.soon{color:#ffc172;background:var(--warning-soft);border-color:rgba(255,157,46,.34);}.water-status.today,.water-status.overdue{color:#ff8a8a;background:var(--danger-soft);border-color:rgba(255,83,83,.38);}.water-status.not-started,.holder-type{color:var(--text-soft);background:rgba(255,255,255,.055);border-color:var(--line-neutral);}.machine-guide-coming-soon{color:#ffc172;background:var(--warning-soft);border-color:rgba(255,157,46,.34);}

  .modal-bg{z-index:1000;padding:18px;background:rgba(0,0,0,.76);backdrop-filter:blur(7px);}.modal{position:relative;width:min(540px,100%);max-width:540px;max-height:min(86vh,760px);overflow-y:auto;padding:24px;background:linear-gradient(155deg,rgba(24,22,18,.99),rgba(9,11,11,.99));border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:0 26px 80px rgba(0,0,0,.64),0 0 30px rgba(255,111,0,.10);}.modal h3{font-size:19px;padding-right:38px;}.modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border:1px solid var(--line-neutral);border-radius:50%;background:var(--surface-2);color:var(--text-soft);font-size:19px;line-height:1;cursor:pointer;}.modal-close:hover{color:var(--text);border-color:var(--line-strong);}.modal-open{overflow:hidden;}
  .toast{right:22px;bottom:22px;z-index:1200;max-width:min(390px,calc(100vw - 32px));padding:12px 15px;color:var(--text);background:rgba(17,19,19,.97);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:0 18px 46px rgba(0,0,0,.48),0 0 18px rgba(255,111,0,.10);font-family:var(--font-body);font-size:13px;opacity:0;transform:translateY(8px);transition:opacity var(--transition-standard),transform var(--transition-standard);}.toast.show{opacity:1;transform:none;}.toast-success{border-color:rgba(72,201,120,.48);}.toast-error{border-color:rgba(255,83,83,.52);}.toast-warning{border-color:rgba(255,157,46,.52);}.toast-info{border-color:var(--line-strong);}
  .login-wrap{width:100%;min-width:0;background:radial-gradient(circle at 50% 0,rgba(255,116,0,.10),transparent 38%),var(--bg);}.login-card{max-width:410px;padding:38px 34px;border-color:var(--line-strong);box-shadow:0 28px 80px rgba(0,0,0,.58),0 0 28px rgba(255,111,0,.08);}.login-error,.warn-banner{background:var(--danger-soft);border-color:rgba(255,83,83,.44);color:#ffadad;}.info-banner{background:var(--accent-softer);border-color:var(--line-strong);}.report-header{border-color:var(--line-strong);}.subtabs button,.palette-tabs{background:var(--surface-2);border-color:var(--line);}.subtabs button.active,.palette-tab[aria-selected="true"]{background:var(--accent-soft);color:var(--accent-hover);border-color:var(--line-strong);box-shadow:var(--shadow-orange);}.palette-image-wrap,.full-palette-image-wrap{background:#050606;}.palette-caption{border-top-color:var(--line-neutral);}.full-palette-action,.full-palette-slot-empty{background:var(--input-bg);border-color:var(--line-neutral);}.full-palette-action:hover,.full-palette-slot-empty:hover{border-color:var(--line-strong);}.water-machine-card{border-color:var(--line);}.water-machine-card:has(.water-status.overdue){border-color:rgba(255,83,83,.42);box-shadow:var(--shadow-card),0 0 20px rgba(255,83,83,.08);}.water-alert.overdue{background:var(--danger-soft);}.holder-summary .kpi-value{font-family:var(--font-heading);}
  .calc-box.profit.negative .cval{color:var(--danger);}

  /* Shared selected state: Color Palette + Monthly Report tabs */
  .palette-tab,.subtabs button{
    position:relative;min-height:42px;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;
    transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-standard),transform var(--transition-fast);
  }
  .palette-tab:hover:not([aria-selected="true"]),.subtabs button:hover:not(.active){color:var(--text);background:rgba(255,133,8,.065);border-color:rgba(255,133,8,.18);}
  .palette-tab[aria-selected="true"],.subtabs button.active{
    color:#fffaf4;background:linear-gradient(180deg,rgba(255,139,26,.22),rgba(255,105,0,.12));border-color:rgba(255,139,26,.88);
    box-shadow:inset 0 0 0 1px rgba(255,188,104,.08),0 0 0 1px rgba(255,133,8,.16),0 0 12px rgba(255,111,0,.36),0 0 24px rgba(255,111,0,.12);font-weight:700;text-shadow:0 1px 1px rgba(0,0,0,.7);
  }
  .palette-tab[aria-selected="true"]:hover,.subtabs button.active:hover{color:#fff;background:linear-gradient(180deg,rgba(255,145,36,.28),rgba(255,105,0,.16));border-color:var(--accent-hover);box-shadow:inset 0 0 0 1px rgba(255,200,128,.10),0 0 14px rgba(255,111,0,.44),0 0 28px rgba(255,111,0,.14);}
  .palette-tab:active,.subtabs button:active{transform:translateY(1px);}.palette-tab:focus-visible,.subtabs button:focus-visible{outline:2px solid var(--accent-hover);outline-offset:3px;}.palette-tab:disabled,.subtabs button:disabled{cursor:not-allowed;opacity:.62;transform:none;}.palette-tabs,.subtabs{overflow:visible;}.subtabs{padding:4px;}

  @media(max-width:1024px) and (min-width:881px){.sidebar{width:238px;flex-basis:238px}.main{padding:28px 24px 56px}.grid-6{grid-template-columns:repeat(3,minmax(0,1fr));}.grid-5{grid-template-columns:repeat(3,minmax(0,1fr));}}
  @media(max-width:880px){.sidebar{width:84vw;max-width:280px;flex:none}.main{padding:20px 16px 52px}.topbar h1{font-size:clamp(23px,7vw,29px)}.btn-row .btn{width:100%}.table-wrap .btn.compact{width:auto}.modal{width:min(540px,100%);padding:22px}.grid-6,.grid-5,.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.table-wrap{max-width:100%}.nav button{font-size:14px}.today-date{text-align:left}.toast{right:16px;bottom:16px;}}
  @media(max-width:430px){.main{padding:17px 12px 48px}.pane{padding:15px}.topbar{margin-bottom:22px}.topbar h1{font-size:23px}.holder-summary{grid-template-columns:1fr}.modal{padding:20px 16px}.machine-guide-card{padding:15px}.btn{min-height:44px}.palette-grid{grid-template-columns:1fr}.full-palette-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}}

  @media print{
    body{background:#fff!important;color:#111!important;}.sidebar,.mobile-topbar,.sidebar-backdrop,.topbar .today,.no-print,.btn,.toast,.modal-bg,.update-banner{display:none!important;}.main{padding:0!important;width:100%!important;}.pane,.report-header,.table-wrap,.water-machine-card,.machine-guide-card,.palette-card,.full-palette-slot{color:#111!important;background:#fff!important;border-color:#ccc!important;box-shadow:none!important;clip-path:none!important;}th,td,h1,h2,h3,p,span{color:#111!important;text-shadow:none!important;}thead th{background:#f3f3f3!important;}@page{margin:12mm;}
  }

  @media print{
    .sidebar,.topbar .today,.no-print{display:none !important;}
    body{background:#fff;color:#000;}
    .main{padding:0;}
    .pane,.report-header,.table-wrap{border-color:#ccc !important;background:#fff !important;}
    .kpi-value,.rtitle{color:#000 !important;}
  }

/* Customer jobs */
.serial-badge{display:inline-flex;align-items:center;border:1px solid var(--orange);border-radius:999px;padding:5px 10px;color:var(--orange);font-family:var(--font-heading);font-size:12px;font-weight:800;letter-spacing:.04em;white-space:nowrap}.legacy-badge{color:var(--muted);font-size:12px;white-space:nowrap}.job-common{margin-bottom:18px}.job-image-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0}.job-image-card,.job-line-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px}.job-image-heading,.job-line-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.job-image-heading span{color:var(--muted);font-size:12px}.job-image-preview{height:220px;margin:14px 0;background:#090c10;border:1px dashed var(--border);border-radius:12px;display:grid;place-items:center;overflow:hidden}.job-image-preview img,.job-detail-image img{width:100%;height:100%;object-fit:contain}.job-image-placeholder{color:var(--muted);font-size:13px;text-align:center;padding:24px}.job-file-meta{min-height:18px;color:var(--muted);font-size:12px;overflow-wrap:anywhere}.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.job-lines{display:grid;gap:18px;margin-top:18px}.job-line-card h2{margin:6px 0 0;font-size:18px}.job-color-grid{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr));gap:8px}.job-color-option{display:flex;align-items:center;gap:7px;padding:8px;border:1px solid var(--border);border-radius:9px;font-size:12px;text-transform:none}.job-color-option .dot{width:13px;height:13px;border-radius:50%;flex:none}.job-waste-qty{width:62px!important;min-width:0;padding:5px!important;margin-left:auto}.job-line-error{margin-bottom:14px}.job-save-row{position:sticky;bottom:10px;z-index:5;background:rgba(15,19,24,.94);border:1px solid var(--border);border-radius:12px;padding:12px;margin-top:20px;backdrop-filter:blur(8px)}.image-status{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;margin-right:4px;background:#343a43;color:var(--muted);font-size:11px;font-weight:800}.image-status.ready{background:rgba(41,178,96,.2);color:#65df91}.job-detail-modal{width:min(1040px,calc(100vw - 30px));max-height:90vh;overflow:auto}.job-detail-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}.job-detail-meta div{background:var(--panel-2);padding:12px;border-radius:10px}.job-detail-meta span{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.job-detail-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.job-detail-image{min-width:0}.job-detail-image h3{font-size:14px}.job-image-open{display:block;width:100%;height:280px;padding:0;border:1px solid var(--border);border-radius:12px;background:#080b0f;overflow:hidden;cursor:zoom-in}.job-detail-lines{display:grid;gap:12px}.job-detail-lines article{border:1px solid var(--border);border-radius:12px;padding:14px}.job-detail-lines dl{display:grid;grid-template-columns:180px 1fr;gap:7px 14px;margin:12px 0 0}.job-detail-lines dt{color:var(--muted)}.job-detail-lines dd{margin:0;overflow-wrap:anywhere}
@media(max-width:900px){.job-color-grid{grid-template-columns:repeat(3,minmax(100px,1fr))}.job-detail-meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.job-image-grid,.job-detail-images{grid-template-columns:1fr}.job-image-preview,.job-image-open{height:200px}.job-color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.job-line-head{align-items:stretch;flex-direction:column}.job-detail-meta{grid-template-columns:1fr}.job-detail-lines dl{grid-template-columns:1fr}.job-detail-lines dt{margin-top:6px}.job-save-row{bottom:6px}.topbar .serial-badge{white-space:normal}}
@media print{#job-detail-bg{position:static!important;display:block!important;background:#fff!important}.job-detail-modal{max-height:none!important;width:100%!important;box-shadow:none!important}.job-detail-modal .modal-x,.job-detail-modal .btn-row{display:none!important}}

.copy-serial-btn{margin-left:6px;padding:4px 7px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--text-soft);font-size:10px;cursor:pointer}.copy-serial-btn:hover{border-color:var(--accent);color:var(--accent)}.job-image-actions{margin-top:8px}
.job-image-grid{grid-template-columns:repeat(2,minmax(180px,220px));align-items:start}.job-image-card{width:100%}.job-image-preview{width:100%;height:auto;aspect-ratio:1/1;background:#080a0a}.job-image-preview img{object-fit:contain}
@media(max-width:640px){.job-image-grid{grid-template-columns:1fr}.job-image-card{max-width:220px}}
.customer-job-lightbox{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.9)}.customer-job-lightbox-image{max-width:92vw;max-height:88vh;width:auto;height:auto;object-fit:contain}.customer-job-lightbox-close{position:fixed;top:16px;right:18px;width:44px;height:44px;border:1px solid var(--accent);border-radius:50%;background:#111;color:var(--text);font-size:28px;cursor:pointer}
.entry-top-layout{display:grid;grid-template-columns:minmax(380px,460px) minmax(0,1fr);gap:20px;align-items:start;margin:18px 0}.entry-top-layout .job-image-grid{margin:0}.entry-current-stock-panel{min-width:0;padding:16px;border:1px solid rgba(255,136,0,.35);border-radius:14px;background:rgba(12,14,14,.92)}.entry-current-stock-panel h2{margin:0 0 12px;font-size:14px}.entry-stock-empty{margin:0;color:var(--muted)}.entry-current-stock-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.entry-current-stock-item{min-width:0;display:grid;grid-template-columns:18px auto minmax(0,1fr) auto;align-items:center;gap:7px;padding:8px;border:1px solid var(--line);border-radius:9px;background:#090b0b;font-size:11px}.entry-stock-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.entry-stock-qty{font-family:var(--font-mono);font-weight:700}.optional-label{margin-left:5px;color:var(--muted);font-size:10px;font-weight:500}.gradient-color-swatch{width:18px;height:18px;flex:0 0 18px;border-radius:50%;background:var(--swatch-color);background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.75) 0%,color-mix(in srgb,var(--swatch-color) 75%,white) 18%,var(--swatch-color) 52%,color-mix(in srgb,var(--swatch-color) 65%,black) 100%);border:1px solid rgba(255,255,255,.28);box-shadow:0 0 9px color-mix(in srgb,var(--swatch-color) 75%,transparent),inset 0 0 4px rgba(255,255,255,.25)}.job-color-option{cursor:pointer}.job-color-option input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}.job-color-option.is-selected{border-color:#ff8800;background:rgba(255,136,0,.10);box-shadow:0 0 0 1px rgba(255,136,0,.35),0 0 14px rgba(255,136,0,.20)}.job-color-option .color-reference{color:var(--accent);font-family:var(--font-mono);font-weight:800}.job-color-option .color-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.job-color-option .color-stock{margin-left:auto;color:var(--muted);font-family:var(--font-mono)}.full-color-job-layers .job-color-option{cursor:default}.full-color-job-layers .job-color-option:last-child .gradient-color-swatch{border-color:rgba(255,255,255,.55)}
@media(max-width:900px){.entry-top-layout{grid-template-columns:1fr}}@media(max-width:640px){.entry-current-stock-grid{grid-template-columns:1fr}}

/* New Entry layout correction: keep the shell fixed and let only main scroll. */
body.new-entry-page #job-form,body.new-entry-page .job-lines,body.new-entry-page .entry-top-layout{height:auto;min-height:0}
body.new-entry-page #job-form .job-save-row{position:static;bottom:auto;margin-bottom:0}
@media(min-width:881px){
  html.new-entry-page,body.new-entry-page{height:100%;min-height:0;overflow:hidden}
  body.new-entry-page #app{width:100%;height:100vh;height:100dvh;min-height:0;overflow:hidden}
  body.new-entry-page .sidebar{height:100vh;height:100dvh;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  body.new-entry-page .main{height:100vh;height:100dvh;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;padding-bottom:34px}
}

/* Match the image-card column to the Current Stock panel without widening it. */
body.new-entry-page .entry-top-layout{align-items:stretch}
body.new-entry-page .entry-top-layout .job-image-grid{height:100%;align-items:stretch}
body.new-entry-page .entry-top-layout .job-image-card{height:100%;display:flex;flex-direction:column}
body.new-entry-page .entry-top-layout .job-image-preview{flex:0 0 auto;min-height:0;height:auto;aspect-ratio:1/1}
body.new-entry-page .entry-top-layout .job-image-preview img{width:100%;height:100%;object-fit:contain}
@media(max-width:900px){body.new-entry-page .entry-top-layout .job-image-grid,body.new-entry-page .entry-top-layout .job-image-card{height:auto}body.new-entry-page .entry-top-layout .job-image-preview{min-height:220px;aspect-ratio:1/1}}

/* v33: scoped customer-details, stock-panel, image-viewport and records corrections. */
.job-detail-modal .customer-details-close{top:14px;right:14px}
.job-detail-meta strong{display:block;min-width:0;line-height:1.35;overflow-wrap:anywhere}
.records-table .record-date-cell{min-width:96px;white-space:nowrap}
.records-table .row-actions{display:inline-flex;align-items:center;gap:8px;min-width:max-content;white-space:nowrap}
.records-table .row-actions button{flex:0 0 auto;white-space:nowrap}
.records-table .row-actions button.del{padding:5px 8px;color:#ff6262;background:rgba(255,83,83,.10);border:1px solid rgba(255,83,83,.45);border-radius:6px}
.records-table .row-actions button.del:hover{color:#fff;background:#d83b3b;border-color:#ff6262}
body.new-entry-page .entry-current-stock-panel{display:flex;flex-direction:column;height:100%;box-sizing:border-box}
body.new-entry-page .entry-current-stock-grid{flex:1 1 auto;grid-template-rows:repeat(10,minmax(0,1fr));align-content:stretch}
body.new-entry-page .entry-current-stock-item{height:100%;min-height:36px;box-sizing:border-box}
body.new-entry-page .entry-top-layout .job-image-preview{flex:0 0 auto;width:100%;height:auto;min-height:0;aspect-ratio:1/1}
@media(max-width:900px){body.new-entry-page .entry-current-stock-panel{height:auto}body.new-entry-page .entry-current-stock-grid{grid-template-rows:none}}
@media(max-width:640px){body.new-entry-page .entry-top-layout .job-image-preview{min-height:0;aspect-ratio:1/1}}

/* v34: courier master-data controls. */
.courier-name-list{display:grid;gap:8px;margin:14px 0}
.courier-name-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;background:var(--input-bg);border:1px solid var(--line-neutral);border-radius:var(--radius-sm)}
.courier-name-row>.btn-row{flex:0 0 auto;margin:0}
.courier-name-editor{display:flex;align-items:center;gap:8px}
.courier-name-editor input{min-width:0;flex:1 1 auto}
.courier-name-error{min-height:20px;margin-top:8px;color:var(--danger)}
@media(max-width:640px){.courier-name-row{align-items:flex-start;flex-direction:column}.courier-name-editor{align-items:stretch;flex-direction:column}.courier-name-editor .btn{width:100%}}

/* v35: grouped customer Records presentation. */
.customer-record-list{width:100%;max-width:100%;overflow-x:hidden;background:rgba(11,13,13,.84);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
.customer-record-row{display:grid;grid-template-columns:minmax(112px,.75fr) minmax(120px,.9fr) minmax(190px,1.45fr) minmax(120px,.8fr) 54px minmax(80px,.65fr) auto;gap:12px;align-items:center;width:100%;padding:14px;box-sizing:border-box;border-bottom:1px solid var(--line-neutral)}
.customer-record-row:last-child{border-bottom:0}.customer-record-row:hover{background:rgba(255,133,8,.045)}
.customer-record-row>div{min-width:0}.customer-record-serial,.record-glass-items,.customer-record-totals{display:grid;gap:5px}.customer-record-date{white-space:nowrap;color:var(--text-soft);font-size:12px}.customer-record-customer,.customer-record-remarks{overflow-wrap:anywhere}.customer-record-items small{display:block;margin-bottom:5px;color:var(--muted)}.record-glass-items span,.customer-record-totals span{display:block;font-size:12px;line-height:1.35}.customer-record-images{white-space:nowrap}.customer-record-actions{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;white-space:nowrap}.customer-record-actions button{flex:0 0 auto;padding:5px 6px;border:0;background:transparent;color:var(--text-soft);cursor:pointer}.customer-record-actions button:hover{color:var(--accent-hover)}.customer-record-actions button.del{padding:5px 8px;color:#ff6262;background:rgba(255,83,83,.10);border:1px solid rgba(255,83,83,.45);border-radius:6px}.customer-record-actions button.del:hover{color:#fff;background:#d83b3b;border-color:#ff6262}.customer-record-empty{padding:28px;text-align:center}
.job-detail-modal{max-width:min(1040px,calc(100vw - 30px));overflow-x:hidden}.job-detail-meta{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.job-detail-meta>div{min-width:0;height:100%;box-sizing:border-box}.job-detail-images,.job-detail-lines,.job-detail-lines article{min-width:0;max-width:100%;box-sizing:border-box}
@media(max-width:1050px){.customer-record-row{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-record-items,.customer-record-totals,.customer-record-remarks,.customer-record-actions{grid-column:1/-1}.customer-record-actions{justify-content:flex-start}.customer-record-images{justify-self:start}}
@media(max-width:760px){.job-detail-meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.customer-record-row{grid-template-columns:1fr}.customer-record-items,.customer-record-totals,.customer-record-remarks,.customer-record-actions{grid-column:auto}.customer-record-actions{flex-wrap:wrap}.customer-record-serial{display:flex;align-items:center;flex-wrap:wrap;gap:8px}}
@media(max-width:480px){.job-detail-meta{grid-template-columns:1fr}}
@media print{.customer-record-list{overflow:visible;box-shadow:none}.customer-record-row{grid-template-columns:110px 120px 1.4fr 120px 45px 90px auto;gap:8px;padding:10px}.job-detail-modal{overflow:visible!important}}

/* v36: balanced Records filters and selected-customer PDF output. */
.records-filters{display:grid;grid-template-columns:minmax(170px,1.35fr) repeat(5,minmax(105px,1fr)) minmax(95px,.75fr) auto;gap:10px;align-items:center;width:100%;box-sizing:border-box}
.records-filters>*{width:100%;min-width:0;box-sizing:border-box}.records-filters #clear-filters{width:auto;min-width:70px;white-space:nowrap}
@media(max-width:1050px){.records-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.records-filters #clear-filters{width:100%}}
@media(max-width:600px){.records-filters{grid-template-columns:1fr}}

@media print{
  @page{size:A4;margin:10mm}
  body.printing-customer-details{display:block!important;background:#fff!important;color:#111!important}
  body.printing-customer-details .sidebar,body.printing-customer-details .mobile-topbar,body.printing-customer-details .sidebar-backdrop,body.printing-customer-details .topbar,body.printing-customer-details .records-filters,body.printing-customer-details .customer-record-list,body.printing-customer-details #local-preview-warning,body.printing-customer-details .update-banner,body.printing-customer-details .toast{display:none!important}
  body.printing-customer-details #app,body.printing-customer-details .app-shell,body.printing-customer-details .main{display:block!important;width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;overflow:visible!important;background:#fff!important}
  body.printing-customer-details #job-detail-bg{position:static!important;inset:auto!important;display:block!important;width:100%!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;background:transparent!important;backdrop-filter:none!important}
  body.printing-customer-details .job-detail-modal{display:block!important;width:100%!important;max-width:none!important;max-height:none!important;margin:0!important;padding:14mm!important;overflow:visible!important;box-sizing:border-box!important;color:#111!important;background:#fff!important;border:2px solid #d86d00!important;border-radius:0!important;box-shadow:none!important}
  body.printing-customer-details .job-detail-modal::before{content:'GOBO PRINTING REPORT · CUSTOMER DETAILS';display:block;margin:-5mm 0 8mm;padding:0 0 4mm;color:#b85800!important;border-bottom:2px solid #d86d00;font:700 13px var(--font-heading);letter-spacing:.08em}
  body.printing-customer-details .customer-details-close,body.printing-customer-details #print-job-detail,body.printing-customer-details [data-edit-job],body.printing-customer-details .job-image-actions{display:none!important}
  body.printing-customer-details .job-detail-title,body.printing-customer-details .job-detail-meta,body.printing-customer-details .job-detail-images,body.printing-customer-details .job-detail-lines,body.printing-customer-details .info-banner{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
  body.printing-customer-details .job-detail-title{padding-bottom:5mm;border-bottom:1px solid #c9c9c9}
  body.printing-customer-details .job-detail-title h2{margin:5mm 0 2mm;color:#111!important;font-size:25px}
  body.printing-customer-details .serial-badge{color:#a94e00!important;border-color:#d86d00!important;background:#fff7ef!important}
  body.printing-customer-details .job-detail-meta{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3mm!important;margin:6mm 0!important}
  body.printing-customer-details .job-detail-meta>div{min-width:0!important;padding:4mm!important;color:#111!important;background:#f6f6f4!important;border:1px solid #d7d7d2!important;border-radius:2mm!important;break-inside:avoid}
  body.printing-customer-details .job-detail-meta span{color:#666!important}body.printing-customer-details .job-detail-meta strong{color:#111!important;overflow-wrap:anywhere}
  body.printing-customer-details .job-detail-images{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5mm!important}
  body.printing-customer-details .job-detail-image{min-width:0!important;break-inside:avoid}body.printing-customer-details .job-image-open{height:62mm!important;background:#fff!important;border:1px solid #ccc!important}body.printing-customer-details .job-detail-image img{object-fit:contain!important;object-position:center!important}
  body.printing-customer-details .job-detail-lines{display:grid!important;gap:4mm!important}body.printing-customer-details .job-detail-lines article{padding:5mm!important;color:#111!important;background:#fff!important;border:1px solid #bdbdbd!important;border-left:3px solid #d86d00!important;border-radius:2mm!important;break-inside:avoid;page-break-inside:avoid}
  body.printing-customer-details .job-detail-lines dl{grid-template-columns:48mm minmax(0,1fr)!important}body.printing-customer-details .job-detail-lines dt{color:#666!important}body.printing-customer-details .job-detail-lines dd,body.printing-customer-details h2,body.printing-customer-details h3,body.printing-customer-details p,body.printing-customer-details span,body.printing-customer-details strong{color:#111!important}
}
@media print and (max-width:760px){body.printing-customer-details .job-detail-meta{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* v37: Water Change presentation and Monthly Report detail controls. */
.water-machine-grid{align-items:stretch}.water-machine-card{display:flex;flex-direction:column;height:100%;box-sizing:border-box;padding:20px}.water-type-notice{min-height:96px;display:flex;align-items:center;gap:14px;padding:16px 18px;box-sizing:border-box;border:1px solid rgba(255,136,0,.38);border-radius:12px;background:linear-gradient(135deg,rgba(255,136,0,.11),rgba(255,136,0,.025))}.water-type-icon{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;border-radius:12px;color:#ff8800;background:rgba(255,136,0,.13);font-size:24px}.water-type-copy{display:grid;gap:7px}.water-type-copy strong{color:#ff941f;font-size:16px;line-height:1.25}.water-type-copy span{color:#ff7777;font-size:14px;font-weight:700;line-height:1.35}.water-machine-card .water-details{align-items:stretch}.water-machine-card .water-detail{height:100%;box-sizing:border-box}.water-machine-card .water-change-btn{margin-top:auto}
.monthly-report-selector{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md)}.monthly-report-selector label{flex:0 0 auto;font-weight:700}.monthly-report-selector select{width:min(360px,100%);min-height:42px;padding:0 12px;color:var(--text);background:var(--input-bg);border:1px solid var(--line-neutral);border-radius:var(--radius-sm)}.monthly-size-summary{margin-top:22px}.monthly-size-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.monthly-size-summary-card{min-width:0}.monthly-size-summary-card h3{margin:0 0 14px;color:var(--accent-hover)}.monthly-size-summary-card dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px 14px;margin:0}.monthly-size-summary-card dt{color:var(--muted)}.monthly-size-summary-card dd{margin:0;font-family:var(--font-mono);font-weight:700}.monthly-person-kpis{margin-bottom:18px}.monthly-size-breakdown{margin-top:16px}
#report-body .stock-size-grid{grid-template-columns:1fr}#report-body .stock-color-table-wrap{width:100%;overflow-x:auto;overflow-y:hidden}#report-body .stock-color-table{width:100%;min-width:980px;table-layout:fixed;border-collapse:collapse}#report-body .stock-color-table th,#report-body .stock-color-table td{padding:12px 10px;box-sizing:border-box;vertical-align:middle}#report-body .stock-color-table th{white-space:normal;overflow-wrap:break-word;word-break:normal;line-height:1.25;text-align:center}#report-body .stock-color-table th:first-child,#report-body .stock-color-table td:first-child{width:220px;text-align:left}
@media(max-width:900px){.monthly-size-summary-grid{grid-template-columns:1fr}.monthly-report-selector{align-items:stretch;flex-direction:column}.monthly-report-selector select{width:100%}}
@media(max-width:680px){.water-machine-card{padding:16px}.water-type-notice{min-height:88px;padding:14px}.water-type-copy strong{font-size:15px}}
@media print{.monthly-size-summary-card,#report-body .stock-size-grid>.pane{break-inside:avoid;page-break-inside:avoid;margin-bottom:14px}#report-body .stock-size-grid{display:block}#report-body .stock-color-table{min-width:0;width:100%;font-size:9px}#report-body .stock-color-table th,#report-body .stock-color-table td{padding:6px 4px}.monthly-report-selector{display:none!important}}

/* v38: Monthly Overview Customer Job Lines filters. */
.monthly-job-lines-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.monthly-job-lines-head h2{margin:0}.monthly-job-lines-head span{color:var(--muted);font-size:12px;white-space:nowrap}.monthly-job-line-filters{display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(6,minmax(130px,1fr)) auto;gap:10px;align-items:center;width:100%;margin-bottom:16px;box-sizing:border-box}.monthly-job-line-filters>*{width:100%;min-width:0;box-sizing:border-box}.monthly-job-line-filters #monthly-lines-clear{width:auto;min-width:70px;white-space:nowrap}
@media(max-width:1200px){.monthly-job-line-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.monthly-job-line-filters #monthly-lines-clear{width:100%}}
@media(max-width:700px){.monthly-job-lines-head{align-items:flex-start;flex-direction:column}.monthly-job-line-filters{grid-template-columns:1fr}}

/* v41: Daily Report entry filters. */
.daily-entry-filters{display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(6,minmax(130px,1fr)) auto;gap:10px;align-items:center;width:100%;margin-bottom:16px;box-sizing:border-box}.daily-entry-filters>*{width:100%;min-width:0;box-sizing:border-box}.daily-entry-filters #daily-entry-clear{width:auto;min-width:70px;white-space:nowrap}.daily-entry-filter-count{margin:-4px 0 12px;color:var(--muted);font-size:12px;text-align:right}.daily-entry-filtered-out{display:none}
@media(max-width:1200px){.daily-entry-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.daily-entry-filters #daily-entry-clear{width:100%}}
@media(max-width:700px){.daily-entry-filters{grid-template-columns:1fr}}
@media print{.daily-entry-filters,.daily-entry-filter-count,.daily-entry-no-match{display:none!important}.daily-entry-filtered-out{display:table-row!important}}

/* v41: balanced optional image cards and shared drag/focus feedback. */
body.new-entry-page .job-image-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch;height:100%}
body.new-entry-page .job-image-card{min-width:0;width:100%;height:100%;display:flex;flex-direction:column;padding:18px;box-sizing:border-box;border:1px solid rgba(255,136,0,.30);border-radius:14px;background:linear-gradient(145deg,rgba(255,136,0,.04),rgba(9,11,11,.97));transition:border-color 160ms ease,box-shadow 200ms ease,transform 160ms ease}
body.new-entry-page .job-image-heading{min-height:54px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px}
body.new-entry-page .job-image-heading strong{min-width:0;line-height:1.25}
body.new-entry-page .job-image-heading .optional-label{display:block;margin:4px 0 0}
body.new-entry-page .job-image-heading .image-selection-status{max-width:74px;text-align:right;line-height:1.3}
body.new-entry-page .job-image-preview{width:100%;height:auto;min-height:0;aspect-ratio:1/1;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;margin:12px 0;border:1px dashed rgba(255,136,0,.36);border-radius:12px;background:#080a0a}
body.new-entry-page .job-image-preview img{width:100%;height:100%;object-fit:contain;object-position:center}
body.new-entry-page .job-image-helper{min-height:58px;margin:0 0 10px;color:var(--muted);line-height:1.45}
body.new-entry-page .job-file-meta{min-height:22px;margin-bottom:10px;color:var(--muted)}
body.new-entry-page .job-image-card-actions,body.new-entry-page .job-image-card .btn-row{width:100%;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin-top:auto}
body.new-entry-page .job-image-card-actions .btn,body.new-entry-page .job-image-card .btn-row .btn{min-width:132px;justify-content:center;text-align:center}
body.new-entry-page .job-image-card:hover{border-color:rgba(255,136,0,.62);box-shadow:0 0 18px rgba(255,112,0,.13)}
body.new-entry-page .job-image-card:focus-within{border-color:#ff8800;box-shadow:0 0 0 1px rgba(255,136,0,.34),0 0 24px rgba(255,112,0,.20)}
body.new-entry-page .job-image-card.has-image{border-color:rgba(255,136,0,.74);box-shadow:0 0 20px rgba(255,112,0,.16)}
body.new-entry-page .job-image-card.is-drag-over{border-color:#ff9800;background:linear-gradient(145deg,rgba(255,136,0,.14),rgba(10,12,12,.98));box-shadow:0 0 0 2px rgba(255,136,0,.28),0 0 28px rgba(255,112,0,.25)}
@media(max-width:640px){body.new-entry-page .job-image-grid{grid-template-columns:1fr}body.new-entry-page .job-image-card{width:100%;max-width:none;height:auto}}

/* v43: customer-job image viewport and automatic image fitting. */
body.new-entry-page .job-image-preview{position:relative;width:100%;height:auto;min-width:0;min-height:0;aspect-ratio:1/1;overflow:hidden;display:grid;place-items:center;box-sizing:border-box;background:#080a0a}
body.new-entry-page .job-image-preview>img,body.new-entry-page .job-image-preview .job-uploaded-image{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;min-width:0;min-height:0;max-width:100%!important;max-height:100%!important;margin:auto;object-fit:contain!important;object-position:center center!important;image-orientation:from-image;transform:none!important}
.job-detail-image,.job-image-open{min-width:0;overflow:hidden;background:#080a0a}
.job-image-open{position:relative;display:grid;place-items:center}
.job-image-open>img,.job-detail-image .job-uploaded-image{display:block;width:100%!important;height:100%!important;min-width:0;min-height:0;max-width:100%!important;max-height:100%!important;margin:auto;object-fit:contain!important;object-position:center center!important;image-orientation:from-image;transform:none!important}
.customer-job-lightbox-image{display:block;width:auto!important;height:auto!important;max-width:92vw!important;max-height:88vh!important;object-fit:contain!important;object-position:center center!important;image-orientation:from-image;transform:none!important}

/* v44: enlarge phone-camera Projection previews that contain wide black margins. */
body.new-entry-page .job-image-card[data-job-image-card="projection"] .job-image-preview .job-uploaded-image{inset:auto!important;top:50%!important;left:50%!important;margin:0!important;transform:translate(-50%,-50%) scale(1.65)!important;transform-origin:center center!important}
.job-color-toggle{min-width:0;display:flex;align-items:center;gap:7px;flex:1;cursor:pointer}.job-color-toggle input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}.job-color-option .job-waste-qty{position:static;opacity:1;pointer-events:auto;flex:0 0 62px}

/* Firebase-backed Machine Guide */
.machine-guide-grid .machine-guide-card{width:100%;color:inherit;text-align:left;cursor:pointer;transition:border-color .18s,transform .18s,box-shadow .18s}
.machine-guide-grid .machine-guide-card:hover,.machine-guide-grid .machine-guide-card:focus-visible,.machine-guide-grid .machine-guide-card.active{border-color:var(--accent);box-shadow:0 0 0 1px rgba(255,128,0,.18),var(--shadow-card);transform:translateY(-1px)}
.guide-document-list{margin-top:20px}.guide-document{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-neutral)}.guide-document:last-child{border-bottom:0}.guide-document>button{min-width:0;flex:1;display:grid;gap:5px;padding:10px;color:var(--text);background:transparent;border:0;text-align:left;cursor:pointer}.guide-document>button span{color:var(--muted);line-height:1.5}.guide-document>button em{width:max-content;color:#ffc172;font-size:11px;text-transform:uppercase}
.machine-guide-detail,.machine-guide-editor{width:min(900px,calc(100vw - 28px));max-height:min(88vh,900px);overflow:auto}.machine-guide-detail>p,.guide-content{color:var(--muted);line-height:1.65}.guide-content{margin:18px 0}.guide-steps{display:grid;gap:12px;padding-left:24px}.guide-steps li{padding:12px;border:1px solid var(--line-neutral);border-radius:var(--radius-sm)}.guide-steps p{margin:6px 0 0;color:var(--muted)}
.guide-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.guide-images figure{min-width:0;margin:0}.guide-images button{width:100%;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;padding:0;background:#080a0a;border:1px solid var(--line-neutral);border-radius:var(--radius-sm);cursor:zoom-in}.guide-images img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;image-orientation:from-image}.guide-images figcaption{padding:7px 2px;color:var(--muted);font-size:12px}.machine-guide-editor textarea{resize:vertical;min-height:86px}.machine-guide-editor .check-row{align-self:end;min-height:44px;display:flex;align-items:center;gap:9px}
@media(max-width:650px){.guide-document{align-items:stretch;flex-direction:column}.guide-document .btn-row{justify-content:flex-start}.guide-images{grid-template-columns:1fr}.machine-guide-detail,.machine-guide-editor{padding:20px 16px}}

/* New Entry has one viewport shell and one content scroller at every breakpoint. */
html.new-entry-page,body.new-entry-page{width:100%;height:100%;min-height:0;overflow:hidden}
body.new-entry-page #app{width:100%;height:100vh;height:100dvh;min-height:0;overflow:hidden}
body.new-entry-page .main{flex:1 1 auto;height:auto;min-height:0;max-height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable}
body.new-entry-page .sidebar{height:100vh;height:100dvh;min-height:0;align-self:stretch}
@media(max-width:880px){body.new-entry-page #app{display:flex;flex-direction:column}body.new-entry-page .mobile-topbar{position:relative;top:auto;flex:0 0 auto}body.new-entry-page .main{width:100%;max-height:none}}

/* Authoritative New Entry viewport sizing. Fixed inset avoids desktop/file-preview
   dynamic-viewport units collapsing both independent scroll areas. */
html.new-entry-page,body.new-entry-page{width:100%;height:100%;margin:0;overflow:hidden!important}
body.new-entry-page #app{position:fixed;inset:0;width:auto!important;height:auto!important;min-height:0!important;display:flex;flex-direction:row;overflow:hidden!important}
body.new-entry-page .sidebar{position:relative;inset:auto;height:100%!important;max-height:none!important;min-height:0!important;flex-shrink:0;overflow-y:auto;overscroll-behavior:contain}
body.new-entry-page .main{position:relative;width:auto;min-width:0;min-height:0!important;height:100%!important;max-height:none!important;flex:1 1 0;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:contain}
@media(max-width:880px){body.new-entry-page #app{flex-direction:column}body.new-entry-page .mobile-topbar{position:relative;inset:auto;flex:0 0 auto}body.new-entry-page .sidebar{position:fixed;top:0;left:0;height:100%!important}body.new-entry-page .main{width:100%;height:0!important;flex:1 1 0}}

/* ============================================================
   SAFE AREA (iOS notch / Dynamic Island / home indicator)
   ------------------------------------------------------------
   index.html sets viewport-fit=cover, so in standalone PWA mode
   the app paints edge to edge. Anything flush to a screen edge
   can then slide under the notch or the home indicator, so each
   such element gets the inset added here.

   Rules:
   - @media screen so printing is never affected.
   - calc(<existing value> + env(...)) so each element keeps its
     designed padding and only GAINS the inset. env() resolves to
     0px everywhere without a notch, so nothing moves on desktop,
     on Android, or on non-notched iPhones.
   - Inset the elements that touch an edge, never the body.
   ============================================================ */
@media screen{

  /* Slide-out nav: full height, flush left. Base padding is 20px 0. */
  .sidebar{
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
  }

  /* Mobile top bar sits under the status bar. Base padding is 10px 14px. */
  .mobile-topbar{
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-left: calc(14px + env(safe-area-inset-left));
    padding-right: calc(14px + env(safe-area-inset-right));
  }

  /* Fixed overlays would otherwise be clipped by the home indicator. */
  .toast{ bottom: calc(22px + env(safe-area-inset-bottom)); }
  .update-banner,
  .environment-warning{ bottom: calc(14px + env(safe-area-inset-bottom)); }
  .customer-job-lightbox{
    padding-top: calc(24px + env(safe-area-inset-top));
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
  .customer-job-lightbox-close{
    top: calc(16px + env(safe-area-inset-top));
    right: calc(18px + env(safe-area-inset-right));
  }
}

/* Scrolling content: keep the last row clear of the home indicator.
   Scoped to phone/tablet widths, where .main's bottom padding sits
   between 46px and 52px — 52px is used as the common floor. */
@media screen and (max-width:900px){
  .main{ padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
}

/* New Entry runs as a fixed edge-to-edge shell (position:fixed;inset:0)
   with its own scroll container, so it inherits no inset of its own. */
@media screen and (max-width:880px){
  body.new-entry-page .main{ padding-bottom: env(safe-area-inset-bottom); }
}

/* black-translucent status bar shows the page behind it — make sure
   that strip is the app background, not white. */
@media screen and (display-mode: standalone){
  body{ background-color: var(--bg, #070909); }
}