:root{
    --navy:#1E3A5F;
    --navy-dark:#152A47;
    --navy-tint:#EEF2F7;
    --brand-text:var(--navy);
    --sidebar-from:#1E3A5F;
    --sidebar-to:#152A47;
    --accent:#2F6FED;
    --accent-tint:#EAF1FE;
    --bg:#F6F7F9;
    --panel:#FFFFFF;
    --input-bg:#FFFFFF;
    --table-hover:#FAFBFC;
    --overlay:rgba(21,42,71,.5);
    --grid-line:rgba(16,24,40,.025);
    --ink:#1B1F27;
    --grey:#667085;
    --grey-light:#98A2B3;
    --border:#E5E8EC;
    --red:#C0362C;
    --red-bg:#FBEAE9;
    --green:#3A7D44;
    --green-bg:#EAF5EC;
    --amber:#9A6700;
    --amber-bg:#FDF3DC;
    --radius:8px;
    --radius-sm:6px;
    --shadow-sm:0 1px 2px rgba(16,24,40,.06);
    --shadow-md:0 4px 16px rgba(16,24,40,.08);
    --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  }

  *{box-sizing:border-box;}

  html,body{margin:0;padding:0;height:100%;}
  body{
    font-family:var(--font);
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--accent-tint);color:var(--brand-text);}
  button{font-family:inherit;cursor:pointer;}
  input,select,textarea{font-family:inherit;}

  /* ================= AUTH SCREEN ================= */
  #auth-screen{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--bg);
    padding:24px;
  }
  .auth-wrap{
    width:100%;max-width:920px;
    display:grid;grid-template-columns:1fr 1fr;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow-md);
    overflow:hidden;
  }
  .auth-brand{
    position:relative;
    background:
      radial-gradient(circle at 12% 8%, rgba(255,255,255,.06), transparent 42%),
      linear-gradient(160deg, var(--sidebar-from) 0%, var(--sidebar-to) 100%);
    color:#fff;
    padding:48px 44px;
    display:flex;flex-direction:column;justify-content:space-between;
    overflow:hidden;
    border-left:4px solid var(--amber);
  }
  .auth-brand::before{
    content:'';
    position:absolute;inset:0;
    background-image:
      repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
      repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px);
    z-index:0;
  }
  .auth-brand::after{
    content:'';
    position:absolute;right:-30px;bottom:-30px;
    width:280px;height:280px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpolygon points='34,6 54,17 54,39 34,50 14,39 14,17' stroke-opacity='.10'/%3E%3Ccircle cx='34' cy='28' r='7' stroke-opacity='.10'/%3E%3Cpolygon points='104,78 122,88 122,108 104,118 86,108 86,88' stroke-opacity='.08'/%3E%3Ccircle cx='104' cy='98' r='6' stroke-opacity='.08'/%3E%3Cline x1='0' y1='130' x2='140' y2='60' stroke-opacity='.06'/%3E%3Cline x1='20' y1='140' x2='140' y2='90' stroke-opacity='.06'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size:contain;
    z-index:0;
  }
  .auth-brand > div{position:relative;z-index:1;}
  .auth-brand .tag{
    letter-spacing:.04em;
    color:#9FB6D6;
    font-size:12.5px;
    font-weight:600;
    text-transform:uppercase;
  }
  .auth-brand h1{
    font-size:28px;
    line-height:1.25;
    margin:14px 0 12px;
    font-weight:700;
  }
  .auth-brand p{
    color:#C7D3E0;
    font-size:14px;
    line-height:1.6;
    max-width:340px;
    margin:0;
  }
  .auth-brand .stamp{
    font-size:12.5px;
    color:#9FB6D6;
    font-weight:500;
  }
  .app-credit .dev-credit{
    cursor:pointer;
    color:#A9BBD1;
    text-decoration:none;
    border-bottom:1px solid rgba(169,187,209,.4);
    transition:color .12s,border-color .12s;
  }
  .app-credit .dev-credit:hover{
    color:#fff;
    border-color:rgba(255,255,255,.6);
  }
  .app-credit{
    font-size:9.5px;
    color:#7086A0;
    font-weight:500;
    letter-spacing:.03em;
    text-transform:uppercase;
    margin-top:6px;
    padding-top:6px;
    border-top:1px solid rgba(255,255,255,.08);
    line-height:1.5;
  }
  .auth-form-side{
    padding:48px 44px;
    display:flex;flex-direction:column;justify-content:center;
  }
  .auth-form-side h2{
    font-size:22px;
    font-weight:700;
    margin:0 0 6px;
    color:var(--ink);
  }
  .auth-sub{color:var(--grey);font-size:13.5px;margin-bottom:24px;}
  .field{margin-bottom:16px;}
  .field label{
    display:block;font-size:12.5px;font-weight:600;color:var(--grey);
    margin-bottom:6px;
  }
  .field input,.field select,.field textarea{
    width:100%;padding:10px 12px;border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--input-bg);font-size:14px;color:var(--ink);
    transition:border-color .15s,box-shadow .15s;
  }
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);
  }
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .password-field{position:relative;}
  .password-field input{width:100%;padding-right:56px;}
  .password-toggle{
    position:absolute;right:6px;top:50%;transform:translateY(-50%);
    background:none;border:none;cursor:pointer;
    font-size:12px;font-weight:700;color:var(--brand-text);
    padding:4px 6px;letter-spacing:.02em;
  }
  .password-toggle:hover{text-decoration:underline;}
  .password-match-hint{font-size:12.5px;margin-top:6px;font-weight:600;}
  .password-match-hint.ok{color:#1a8a4a;}
  .password-match-hint.err{color:var(--red);}
  .btn{
    border:none;padding:10px 18px;font-size:14px;font-weight:600;
    border-radius:var(--radius-sm);
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    transition:background .15s,color .15s,border-color .15s;
  }
  .btn-primary{background:var(--navy);color:#fff;}
  .btn-primary:hover{background:var(--navy-dark);}
  .btn-dark{background:var(--navy);color:#fff;}
  .btn-dark:hover{background:var(--navy-dark);}
  .btn-outline{background:transparent;border:1px solid var(--border);color:var(--brand-text);}
  .btn-outline:hover{background:var(--navy-tint);border-color:var(--navy);}
  .btn-danger{background:var(--red-bg);color:var(--red);}
  .btn-danger:hover{background:var(--red);color:#fff;}
  .btn-block{width:100%;}
  .btn-sm{padding:6px 12px;font-size:12.5px;}
  .btn:disabled{opacity:.45;cursor:not-allowed;}
  .auth-switch{margin-top:20px;font-size:13.5px;color:var(--grey);}
  .auth-switch a{color:var(--brand-text);font-weight:600;cursor:pointer;text-decoration:none;}
  .auth-switch a:hover{text-decoration:underline;}
  .forgot-link{margin-top:8px;text-align:right;font-size:12.5px;}
  .forgot-link a{color:var(--brand-text);font-weight:600;cursor:pointer;text-decoration:none;}
  .forgot-link a:hover{text-decoration:underline;}
  .auth-error{
    background:var(--red-bg);color:var(--red);font-size:13px;
    padding:10px 12px;margin-bottom:16px;border-radius:var(--radius-sm);
  }
  .auth-hint{
    background:var(--amber-bg);color:var(--amber);font-size:12.5px;
    padding:10px 12px;margin-top:18px;border-radius:var(--radius-sm);
  }

  /* ================= APP SHELL ================= */
  #app{display:none;min-height:100vh;}
  #app.active{display:flex;}
  .sidebar{
    width:232px;flex-shrink:0;
    background:
      radial-gradient(circle at 85% 95%, rgba(255,255,255,.05), transparent 45%),
      linear-gradient(165deg, var(--sidebar-from) 0%, var(--sidebar-to) 100%);
    color:#fff;
    display:flex;flex-direction:column;
    position:sticky;top:0;height:100vh;
    overflow:hidden;
  }
  .sidebar::before{
    content:'';
    position:absolute;inset:0;
    background-image:
      repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 28px),
      repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 28px);
    z-index:0;
  }
  .sidebar::after{
    content:'';
    position:absolute;left:-40px;bottom:-40px;
    width:220px;height:220px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpolygon points='34,6 54,17 54,39 34,50 14,39 14,17' stroke-opacity='.07'/%3E%3Ccircle cx='34' cy='28' r='7' stroke-opacity='.07'/%3E%3Cline x1='0' y1='130' x2='140' y2='60' stroke-opacity='.05'/%3E%3Cline x1='20' y1='140' x2='140' y2='90' stroke-opacity='.05'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size:contain;
    z-index:0;
  }
  .sidebar > *{position:relative;z-index:1;}
  .sidebar-brand{
    padding:22px 20px 16px;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .sidebar-brand .full{
    font-size:11px;color:#9FB0C3;margin-top:2px;letter-spacing:.01em;
    line-height:1.4;
  }
  .nav{
    flex:1;overflow-y:auto;padding:12px 8px 12px 12px;
    scroll-behavior:smooth;
    /* Firefox */
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.22) transparent;
  }
  /* Professional slim scrollbar for the nav list (Chrome/Edge/Safari) */
  .nav::-webkit-scrollbar{width:6px;}
  .nav::-webkit-scrollbar-track{background:transparent;margin:4px 0;}
  .nav::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.2);border-radius:10px;
    border:1px solid rgba(255,255,255,0);
    background-clip:padding-box;
  }
  .nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.38);}
  .nav-group-label{
    font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
    color:#7590AC;margin:16px 6px 6px;font-weight:700;
  }
  .nav-item{
    position:relative;
    display:flex;align-items:center;gap:11px;
    padding:9px 12px;color:#C6D3E0;font-size:13.5px;font-weight:500;
    border-radius:var(--radius-sm);
    margin-bottom:3px;
    cursor:pointer;
    border:1px solid transparent;
    transition:background .15s,color .15s,border-color .15s,transform .1s;
  }
  .nav-item:hover{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.08);}
  .nav-item:active{transform:scale(.98);}
  .nav-item.active{
    background:rgba(255,255,255,.13);color:#fff;
    border-color:rgba(255,255,255,.14);
    box-shadow:inset 3px 0 0 0 rgba(255,255,255,.9);
  }
  .nav-item .ic{
    width:26px;height:26px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border-radius:7px;
    background:rgba(255,255,255,.06);
    color:#AFC0D2;
    transition:background .15s,color .15s;
  }
  .nav-item .ic svg{width:15px;height:15px;display:block;}
  .nav-item:hover .ic{background:rgba(255,255,255,.12);color:#fff;}
  .nav-item.active .ic{background:rgba(255,255,255,.18);color:#fff;}
  .nav-item .nav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .sidebar-foot{
    padding:16px 20px;border-top:1px solid rgba(255,255,255,.1);
    font-size:13px;
  }
  .foot-avatar{
    display:block;width:40px;height:40px;border-radius:50%;object-fit:cover;
    margin-bottom:8px;border:2px solid rgba(255,255,255,.25);
  }
  .sidebar-foot .who{color:#fff;font-weight:600;margin-bottom:2px;}
  .sidebar-foot .role{color:#8FA3B8;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;}
  .sidebar-foot button{
    margin-top:10px;width:100%;background:transparent;color:#B9C6D4;
    border:1px solid rgba(255,255,255,.16);padding:8px;font-size:12.5px;
    border-radius:var(--radius-sm);
  }
  .sidebar-foot button:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.06);}

  .content{
    flex:1;min-width:0;padding:28px 34px 60px;
    background-image:
      repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 32px),
      repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 32px);
    background-color:var(--bg);
  }
  .page-head{
    display:flex;align-items:flex-end;justify-content:space-between;
    margin-bottom:22px;flex-wrap:wrap;gap:14px;
  }
  .dash-brand-row{display:flex;align-items:center;gap:14px;}
  .page-head .eyebrow{
    font-size:11.5px;color:var(--grey);letter-spacing:.04em;text-transform:uppercase;font-weight:700;
  }
  .page-head h1{
    font-size:24px;font-weight:700;margin:2px 0 0;color:var(--ink);
  }
  .head-actions{display:flex;gap:10px;flex-wrap:wrap;}

  .panel{
    background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:var(--shadow-sm);padding:20px;margin-bottom:18px;
  }
  .panel h3{
    font-size:15px;font-weight:700;margin:0 0 14px;color:var(--ink);
    display:flex;align-items:center;justify-content:space-between;
  }

  /* stat cards */
  .stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px;}
  .stat-card{
    background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:var(--shadow-sm);padding:16px 18px;
  }
  .stat-card.clickable{cursor:pointer;transition:transform .12s ease, box-shadow .12s ease;}
  .stat-card.clickable:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
  .stat-card .num{font-size:28px;font-weight:700;color:var(--ink);line-height:1;}
  .stat-card .lbl{font-size:12px;color:var(--grey);margin-top:8px;font-weight:600;}
  .stat-card.acc-yellow .num{color:var(--amber);}
  .stat-card.acc-cyan .num{color:var(--accent);}
  .stat-card.acc-red .num{color:var(--red);}
  .stat-card.acc-green .num{color:var(--green);}

  table{width:100%;border-collapse:collapse;font-size:13.5px;}
  th{
    text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.03em;
    color:var(--grey);padding:9px 10px;border-bottom:1px solid var(--border);font-weight:700;
  }
  td{padding:10px 10px;border-bottom:1px solid var(--border);color:var(--ink);}
  tr:hover td{background:var(--table-hover);}
  .empty-row td{text-align:center;color:var(--grey-light);padding:30px;font-style:italic;}

  .badge{
    display:inline-block;padding:3px 10px;font-size:11px;font-weight:700;
    border-radius:999px;
  }
  .badge-green{background:var(--green-bg);color:var(--green);}
  .badge-navy{background:var(--navy-tint);color:var(--brand-text);}
  .badge-red{background:var(--red-bg);color:var(--red);}
  .badge-yellow{background:var(--amber-bg);color:var(--amber);}

  .toolbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center;}
  .toolbar input[type=text],.toolbar select{
    padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13.5px;background:var(--input-bg);
  }
  .toolbar input[type=text]{min-width:220px;}

  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;}

  .modal-overlay{
    position:fixed;inset:0;background:var(--overlay);
    display:none;align-items:center;justify-content:center;z-index:100;padding:20px;
  }
  .modal-overlay.active{display:flex;}
  .modal{
    background:var(--panel);width:100%;max-width:480px;padding:26px;position:relative;
    max-height:88vh;overflow-y:auto;border-radius:var(--radius);box-shadow:var(--shadow-md);
  }
  .modal h3{font-size:18px;font-weight:700;margin:0 0 4px;color:var(--ink);}
  .modal .modal-sub{font-size:13px;color:var(--grey);margin-bottom:18px;}
  .modal-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:20px;color:var(--grey);}

  .welcome-popup-overlay{
    position:fixed;inset:0;background:var(--overlay);
    display:none;align-items:center;justify-content:center;z-index:300;padding:20px;
  }
  .welcome-popup-overlay.active{display:flex;}
  .welcome-popup{
    background:var(--panel);width:100%;max-width:340px;padding:30px 26px;position:relative;
    border-radius:var(--radius);box-shadow:var(--shadow-md);text-align:center;
    animation:welcomePopIn .25s ease-out;
  }
  .welcome-popup-icon{font-size:34px;margin-bottom:10px;}
  .welcome-popup h3{font-size:19px;font-weight:700;margin:0 0 6px;color:var(--ink);}
  .welcome-popup p{font-size:13.5px;color:var(--grey);margin:0;line-height:1.5;}
  .welcome-popup-close{
    position:absolute;top:10px;right:12px;background:none;border:none;
    font-size:20px;line-height:1;color:var(--grey);cursor:pointer;
  }
  .welcome-popup-close:hover{color:var(--ink);}
  @keyframes welcomePopIn{
    from{opacity:0;transform:scale(.94) translateY(6px);}
    to{opacity:1;transform:scale(1) translateY(0);}
  }

  .toast-wrap{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:10px;}

  .toast{
    background:var(--navy);color:#fff;padding:12px 16px;font-size:14px;
    box-shadow:var(--shadow-md);border-radius:var(--radius-sm);
    min-width:260px;animation:slidein .2s ease;
  }
  .toast.err{background:var(--red);}
  @keyframes slidein{from{transform:translateY(10px);opacity:0;}to{transform:translateY(0);opacity:1;}}

  .qty-cell{font-weight:700;font-size:14.5px;}
  .photo-thumb-preview{max-width:170px;max-height:130px;display:block;margin-top:10px;border:1px solid var(--border);border-radius:var(--radius-sm);object-fit:cover;}
  .photo-thumb{width:44px;height:34px;object-fit:cover;border:1px solid var(--border);border-radius:4px;cursor:pointer;display:block;}
  .photo-remove{margin-top:6px;background:none;border:none;color:var(--red);font-size:12px;font-weight:600;padding:0;text-decoration:underline;cursor:pointer;}
  .photo-full{max-width:100%;max-height:70vh;display:block;border:1px solid var(--border);border-radius:var(--radius-sm);}
  .muted{color:var(--grey);}
  .help-text{font-size:12px;color:var(--grey);margin-top:4px;}
  .low-stock-item{
    display:flex;justify-content:space-between;align-items:center;
    padding:9px 0;border-bottom:1px solid var(--border);font-size:13.5px;
  }
  .low-stock-item:last-child{border-bottom:none;}
  .low-stock-item.clickable{cursor:pointer;}
  .low-stock-item.clickable:hover{background:var(--table-hover);}
  .row-clickable{cursor:pointer;}
  .empty-state{
    text-align:center;padding:50px 20px;color:var(--grey);
  }
  .empty-state .big{font-size:15px;color:var(--ink);font-weight:600;margin-bottom:6px;}
  .split-actions{display:flex;gap:8px;flex-wrap:wrap;}
  .repair-hold-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);}
  .repair-hold-row:last-child{border-bottom:none;}
  .filter-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
  .filter-tab{
    padding:7px 14px;font-size:13px;font-weight:600;border:1px solid var(--border);
    background:var(--panel);color:var(--grey);border-radius:999px;
  }
  .filter-tab.active{background:var(--navy);border-color:var(--navy);color:#fff;}
  .backup-box{border:1.5px dashed var(--border);border-radius:var(--radius);padding:24px;text-align:center;}
  .backup-box input[type=file]{display:none;}
  @media (max-width:980px){
    .stat-grid{grid-template-columns:repeat(2,1fr);}
    .grid-2,.grid-3{grid-template-columns:1fr;}
    .auth-wrap{grid-template-columns:1fr;}
    .auth-brand{display:none;}
  }


  /* ================= WHO'S ONLINE (top-right icon) ================= */
  .online-widget{position:fixed;top:12px;right:20px;z-index:70;}
  .online-btn{
    position:relative;width:42px;height:42px;display:flex;align-items:center;justify-content:center;
    background:var(--panel);color:var(--brand-text);border:1px solid var(--border);border-radius:12px;
    padding:0;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12);
  }
  .online-btn:hover{border-color:var(--navy);}
  .online-count{
    position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
    display:flex;align-items:center;justify-content:center;box-sizing:border-box;
    background:var(--green);color:#fff;font-size:11px;font-weight:700;line-height:1;
    border:2px solid var(--panel);border-radius:10px;
  }
  .online-count.zero{background:#9aa3ae;}
  .online-panel{
    display:none;position:absolute;top:50px;right:0;width:min(320px,calc(100vw - 28px));
    max-height:70vh;overflow-y:auto;background:var(--panel);color:var(--ink);
    border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 32px rgba(0,0,0,.22);
  }
  .online-widget.open .online-panel{display:block;}
  .op-head{padding:12px 14px;font-weight:700;font-size:14px;border-bottom:1px solid var(--border);}
  .op-sec{padding:8px 14px 2px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.6;}
  .op-row{display:flex;align-items:center;gap:10px;padding:8px 14px;}
  .op-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:var(--green);box-shadow:0 0 0 3px var(--green-bg);}
  .op-dot.off{background:#b6bdc6;box-shadow:none;}
  .op-name{font-size:14px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .op-sub{font-size:12px;opacity:.65;white-space:nowrap;}
  .op-txt{min-width:0;flex:1;}
  .op-empty{padding:12px 14px;font-size:13px;opacity:.65;}
  .op-foot{padding:10px 14px;border-top:1px solid var(--border);}
  .op-foot a{font-size:13px;font-weight:600;color:var(--brand-text);cursor:pointer;}
  /* Desktop: keep the icon clear of page titles / buttons at the top of each page. */
  @media (min-width:901px){ body.has-online-widget .content{padding-top:64px;} }
  /* Phones/tablets: the icon sits inside the top bar, on its right. */
  @media (max-width:900px){
    .online-widget{top:calc(11px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));}
    .mobile-title{padding-right:56px;}
  }
  @media print{ .online-widget{display:none !important;} }

  /* ================= MOBILE / TABLET (Android + iOS) =================
     The layout adapts to any screen width: on phones and small tablets the
     fixed sidebar becomes a slide-out menu opened from a top bar, tables
     scroll sideways inside their panel instead of stretching the page,
     forms and dialogs go full-width, and iPhone notch / home-bar areas are
     respected via env(safe-area-inset-*). */
  .mobile-topbar,.sidebar-backdrop{display:none;}
  html{-webkit-text-size-adjust:100%;}
  body{-webkit-tap-highlight-color:transparent;overflow-x:hidden;}
  .table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  img{max-width:100%;}

  @media (max-width:900px){
    #app.active{display:block;}
    .mobile-topbar{
      display:flex;align-items:center;gap:12px;
      position:sticky;top:0;z-index:60;
      padding:10px 14px;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));
      background:linear-gradient(165deg, var(--sidebar-from) 0%, var(--sidebar-to) 100%);
      color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18);
    }
    .mobile-menu-btn{
      width:44px;height:44px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
      background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
      border-radius:10px;color:#fff;padding:0;
    }
    .mobile-title{font-size:15px;font-weight:700;line-height:1.2;min-width:0;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

    .sidebar{
      position:fixed;top:0;left:0;bottom:0;height:100%;height:100dvh;
      width:min(292px,84vw);z-index:120;
      transform:translateX(-102%);transition:transform .25s ease;
      padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
      padding-left:env(safe-area-inset-left);
      box-shadow:none;
    }
    body.sidebar-open .sidebar{transform:translateX(0);box-shadow:6px 0 28px rgba(0,0,0,.35);}
    .sidebar-backdrop{
      display:block;position:fixed;inset:0;z-index:110;background:var(--overlay);
      opacity:0;pointer-events:none;transition:opacity .25s ease;
    }
    body.sidebar-open .sidebar-backdrop{opacity:1;pointer-events:auto;}
    body.sidebar-open{overflow:hidden;}
    .nav-item{min-height:44px;}

    .content{
      padding:16px 14px 56px;
      padding-left:calc(14px + env(safe-area-inset-left));
      padding-right:calc(14px + env(safe-area-inset-right));
      padding-bottom:calc(56px + env(safe-area-inset-bottom));
    }
    .page-head{margin-bottom:16px;align-items:flex-start;}
    .page-head h1{font-size:20px;}
    .head-actions{width:100%;}
    .head-actions .btn{flex:1 1 auto;}
    .panel{padding:14px;}
    .panel h3{flex-wrap:wrap;gap:6px;}

    /* Stop iOS Safari zooming the page whenever a field is tapped (it does
       that for any input under 16px) and make everything finger-sized. */
    input,select,textarea,
    .field input,.field select,.field textarea{font-size:16px;}
    .field input,.field select,.field textarea{padding:12px;}
    .btn,button.btn{min-height:44px;}
    .filter-tab{padding:10px 14px;}
    .field-row{grid-template-columns:1fr;}
    .split-actions .btn{min-height:40px;}

    th,td{white-space:nowrap;}
    td.wrap,th.wrap{white-space:normal;}
    td .split-actions{flex-wrap:nowrap;}

    .modal-overlay{padding:0;align-items:flex-end;}
    .modal{
      max-width:100% !important;width:100%;
      max-height:94vh;max-height:94dvh;
      border-radius:16px 16px 0 0;padding:20px 16px;
      padding-bottom:calc(20px + env(safe-area-inset-bottom));
    }
    .modal-close{top:8px;right:8px;width:44px;height:44px;font-size:26px;}
    .welcome-popup-overlay{padding:16px;}

    .toast-wrap{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));}
    .toast{width:100%;}

    /* Delivery receipts / purchase orders are landscape paper sheets:
       keep them at readable size and let them scroll sideways. */
    .receipt-sheet{min-width:860px;}
    .receipt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

    #auth-screen{padding:16px;align-items:flex-start;
      padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom));}
    .auth-form-side{padding:28px 20px;}
  }
  @media (max-width:520px){
    .stat-grid{grid-template-columns:1fr 1fr;gap:10px;}
    .stat-card{padding:12px;}
    .stat-card .num{font-size:22px;}
  }
  @media (max-width:360px){
    .stat-grid{grid-template-columns:1fr !important;}
  }
  /* Touch devices: no hover-only lift effects */
  @media (hover:none){
    .stat-card.clickable:hover{transform:none;}
  }
  @media print{
    .mobile-topbar,.sidebar-backdrop{display:none !important;}
    .receipt-sheet{min-width:0 !important;}
  }


  /* ================= SMALL LAPTOP / TABLET-LANDSCAPE (901px – 1280px) =================
     Windows laptops at 125-150% display scaling and half-width browser
     windows land here. Slimmer menu + tighter tables so every column and
     the row buttons (Edit / History / Remove ...) fit without being cut off. */
  @media (min-width:901px) and (max-width:1280px){
    .sidebar{width:206px;}
    .nav-item{padding-left:10px;padding-right:8px;}
    .content{padding:24px 20px 56px;}
    .page-head h1{font-size:22px;}
    .stat-grid{grid-template-columns:repeat(3,1fr);}
    table{font-size:13px;}
    th{padding:8px 6px;}
    td{padding:9px 6px;}
    td .split-actions,td .row-actions,td .actions{flex-wrap:nowrap;}
    td .btn,td .btn-sm,td button{white-space:nowrap;padding:5px 8px !important;font-size:12px !important;}
    th{white-space:normal;}
  }
  /* Narrower still (about 900-1100px): line the row buttons up two-by-two
     instead of in one long row, so the table fits without side-scrolling. */
  @media (min-width:901px) and (max-width:1100px){
    td .split-actions{display:grid;grid-template-columns:repeat(2,auto);gap:5px;justify-content:start;}
    td .split-actions .btn{text-align:center;}
  }

  /* ---------------- Delivery Receipt / Purchase Order (bond-paper template:
     3 copies — Original/Duplicate/Triplicate — side by side, all sharing one
     full landscape page. Auto-fit scales row height/font to the item count so
     the 3 columns always fill the full page height, however many items. ---------------- */
  .receipt-sheet{max-width:11.69in;padding:0.3in;}
  .drt-sheet{display:flex;flex-direction:row;align-items:stretch;gap:0;}
  .drt-copy{flex:1 1 0;min-width:0;padding:0 14px;box-sizing:border-box;display:flex;flex-direction:column;position:relative;}
  /* Dashed cut guide + scissors/label marks between copies, so the printed
     sheet can be cut into 3 separate slips along a clear, visible line. */
  .drt-copy + .drt-copy{border-left:1px dashed var(--grey);margin-left:10px;padding-left:14px;}
  .drt-copy + .drt-copy::before{
    content:"\2702";
    position:absolute;top:-13px;left:-8px;
    font-size:11px;color:var(--grey);background:#fff;
    padding:0 2px;line-height:1;
  }
  .drt-copy + .drt-copy::after{
    content:"CUT HERE";
    position:absolute;top:50%;left:-6px;
    transform:translateY(-50%) rotate(90deg);
    transform-origin:center;
    font-size:6px;letter-spacing:.12em;color:var(--grey);
    background:#fff;padding:2px 4px;white-space:nowrap;
  }
  /* Pins the remarks/signature block to the very bottom of the copy, however
     few items are on the receipt/order, instead of leaving blank space below
     the signatures when the item table doesn't reach the full page height. */
  [data-drt-bottom]{margin-top:auto;}
  .drt-copy-label{font-size:8.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--navy);text-align:center;margin-bottom:4px;}
  .drt-header{display:flex;justify-content:space-between;align-items:center;gap:6px;border-bottom:2px solid var(--navy);padding-bottom:6px;margin-bottom:6px;}
  .drt-header-left{display:flex;align-items:center;gap:6px;min-width:0;}
  .drt-logo{height:28px;width:auto;object-fit:contain;flex:0 0 auto;}
  .drt-company{font-size:14px;font-weight:700;color:var(--navy);margin:0;}
  .drt-sub{font-size:7px;font-style:italic;color:var(--grey);margin:1px 0 0 0;}
  .drt-title{font-size:12px;line-height:1.15;letter-spacing:.02em;color:var(--navy);text-align:right;margin:0;font-weight:700;}
  .drt-meta{width:100%;border-collapse:collapse;margin-bottom:6px;font-size:8.5px;}
  .drt-meta td{border:1px solid var(--border);padding:3px 5px;vertical-align:middle;}
  .drt-meta td.label{background:#f2f2f2;font-weight:700;width:22%;color:var(--ink);}
  .drt-items{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:2px;}
  .drt-items th{border:1px solid var(--border);background:#eef1f5;font-size:calc(var(--font-s,9.5px) + 0.5px);height:var(--row-h,18px);}
  .drt-items td{border:1px solid var(--border);font-size:var(--font-s,9.5px);height:var(--row-h,18px);padding:0 4px;overflow:hidden;}
  .drt-col-no{width:9%;text-align:center;color:var(--grey);}
  .drt-col-qty{width:15%;text-align:center;font-weight:700;}
  .drt-col-unit{width:18%;text-align:center;}
  .drt-col-desc{width:58%;text-align:left;}
  .drt-col-desc-narrow{width:28%;text-align:left;}
  .drt-col-price{width:14%;text-align:right;}
  .drt-col-amount{width:16%;text-align:right;font-weight:700;}
  .drt-total-row td{font-weight:700;background:#f7f8fa;}
  .drt-remarks-label{font-size:8.5px;font-weight:700;margin:6px 0 2px 0;}
  .drt-remarks-line{border-bottom:1px solid var(--border);min-height:13px;padding:1px 4px;font-size:8.5px;margin-bottom:6px;}
  /* Purchase Order: single copy filling the whole page (no 3-up cut guides),
     with a directly-editable Remarks field on screen before printing. */
  .po-sheet .po-copy{padding:0;}
  .po-sheet .drt-remarks-line{cursor:text;}
  /* The PO prints portrait (unlike the DR's landscape 3-up sheet), so it
     gets its own narrower max-width and its own named @page below. */
  /* Stretches the single copy (.po-copy, itself a flex column) to the full
     page height set by fitPurchaseOrderToPage, so [data-drt-bottom]'s
     margin-top:auto can push the Remarks/signature block all the way down
     to the bottom of the page instead of leaving blank space under it. */
  .po-sheet{max-width:8.27in;display:flex;align-items:stretch;}

  /* ---- Professional, easy-to-read look for the Purchase Order specifically
     (scoped under .po-sheet so the Delivery Receipt's compact 3-up copies,
     which need small type to fit 3 across, are left untouched). Now that
     the PO gets a whole page to itself, it uses larger type, real spacing,
     a bordered frame, a solid header bar and zebra-striped rows instead of
     the tight receipt-slip styling. ---- */
  .po-sheet.receipt-sheet{border:1px solid var(--border);border-radius:6px;padding:0.45in;}
  .po-sheet .drt-header{border-bottom:3px solid var(--navy);padding-bottom:16px;margin-bottom:18px;}
  .po-sheet .drt-logo{height:48px;}
  .po-sheet .drt-title{font-size:24px;letter-spacing:.06em;line-height:1.25;}
  .po-sheet .drt-meta{font-size:11.5px;margin-bottom:18px;border:1.5px solid var(--navy);border-radius:4px;overflow:hidden;}
  .po-sheet .drt-meta td{padding:8px 12px;border-color:var(--border);}
  .po-sheet .drt-meta td.label{background:var(--navy-tint);color:var(--navy);width:18%;}
  .po-sheet .drt-items{margin-top:0;border:1.5px solid var(--navy);border-radius:4px;overflow:hidden;}
  .po-sheet .drt-items th{background:var(--navy);color:#fff;font-weight:700;letter-spacing:.04em;padding:0 6px;border-color:var(--navy-dark);}
  .po-sheet .drt-items td{padding:0 8px;}
  .po-sheet .drt-items tbody tr:nth-child(even) td{background:#f5f7fa;}
  .po-sheet .drt-total-row td{background:var(--navy-tint);color:var(--navy);font-size:calc(var(--font-s,11px) + 1.5px);}
  .po-sheet .drt-remarks-label{font-size:11.5px;margin:16px 0 6px 0;color:var(--navy);}
  .po-sheet .drt-remarks-line{border:1px solid var(--border);border-radius:4px;min-height:44px;padding:8px 10px;font-size:11.5px;margin-bottom:10px;background:#fbfbfc;}
  .po-sheet .drt-remarks-line:focus{outline:1.5px solid var(--navy);outline-offset:1px;background:#fff;}
  /* Editable Supplier/Date and every item-table cell (Qty, Unit,
     Description, Unit Price) get the same click-to-edit affordance as
     Remarks: a text cursor, a subtle hover tint, and a navy focus ring
     that's stripped again at print time below. */
  .po-sheet [contenteditable="true"]{cursor:text;}
  .po-sheet .drt-meta td [contenteditable="true"]:hover,
  .po-sheet .drt-items td[contenteditable="true"]:hover{background:var(--navy-tint);}
  .po-sheet .drt-meta td [contenteditable="true"]:focus,
  .po-sheet .drt-items td[contenteditable="true"]:focus{outline:1.5px solid var(--navy);outline-offset:-1px;background:#fff;}
  /* Payment Proof: a capped-size thumbnail so a large photo can never push
     the one-page Purchase Order past a single sheet — object-fit:contain
     keeps the whole image visible within that cap instead of cropping it. */
  .po-payment-img{display:block;max-width:220px;max-height:110px;object-fit:contain;border:1px solid var(--border);border-radius:4px;margin-top:2px;}
  .po-payment-empty{font-size:12.5px;font-style:italic;color:var(--grey);padding:4px 0;}
  /* Payment Proof page (2nd printed page, only present when an image is
     attached): fitPaymentPageToPage() sets .po-payment-copy's height in
     JS to exactly the printable page height (same approach as
     fitPurchaseOrderToPage for page 1), so the image's flex:1 container
     always fills precisely one page — auto-scaling up to that space via
     object-fit:contain, or down if the photo is larger, but never
     spilling onto a 3rd page. */
  .po-payment-page-sheet{margin-top:20px;}
  .po-payment-copy{overflow:hidden;}
  .po-payment-page-body{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:14px;}
  .po-payment-page-img{max-width:100%;max-height:100%;object-fit:contain;}
  @media print{
    .po-payment-page-sheet{margin-top:0;}
    /* .panel's base margin-bottom:18px would otherwise be extra height
       tacked on after a sheet that's already sized to exactly one page,
       risking a spilled-over blank 3rd page. */
    .po-sheet.receipt-sheet{margin-bottom:0;}
  }
  .po-sheet .drt-sign-row{margin-top:34px;gap:40px;}
  .po-sheet .drt-sign-space{height:30px;}
  .po-sheet .drt-sign-line{border-top:1.5px solid var(--ink);}
  .po-sheet .drt-sign-caption{font-size:10px;letter-spacing:.02em;padding-top:5px;}
  .drt-sign-row{display:flex;justify-content:space-between;gap:12px;margin-top:10px;flex-wrap:wrap;}
  .drt-sign-block{flex:1;min-width:100px;}
  .drt-sign-space{height:16px;}
  .drt-sign-line{border-top:1.5px solid var(--ink);}
  .drt-sign-name{font-size:8.5px;font-weight:700;padding-top:3px;color:var(--ink);}
  .drt-sign-caption{font-size:7.5px;color:var(--grey);padding-top:2px;}

  @media print{
    .sidebar, .toast-wrap, .modal-overlay, .welcome-popup-overlay, .no-print{display:none !important;}
    .content{padding:0;margin:0;background:#fff;}
    .receipt-sheet{border:none;max-width:100%;box-shadow:none;padding:0;}
    body{background:#fff;}
    @page{size:A4 landscape;margin:0.35in;}
    .po-sheet .drt-remarks-line,
    .po-sheet [contenteditable="true"]{outline:none !important;background:transparent !important;}
    /* The on-screen PO gets its own border+padding for a polished look
       (see .po-sheet.receipt-sheet above), but that rule's higher
       specificity would otherwise survive into print and, combined with
       the @page margin already set by withPortraitPrintPage, push the
       page over the one-sheet budget fitPurchaseOrderToPage calculated
       for. Reset it here so print relies on the @page margin alone. */
    .po-sheet.receipt-sheet{border:none;padding:0;}
  }

  /* ---------------- Searchable item select ----------------
   Replaces plain <select> item pickers with a text input + filtered
   dropdown, so long item lists can be searched instead of scrolled. */
.isel{position:relative;}
.isel-menu{
  display:none;position:absolute;top:100%;left:0;right:0;z-index:40;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);
  margin-top:4px;max-height:230px;overflow-y:auto;
  box-shadow:0 10px 28px rgba(16,24,40,.10);
}
.isel-menu.open{display:block;}
.isel-opt{padding:9px 12px;font-size:13.5px;cursor:pointer;}
.isel-opt:hover,.isel-opt.hi{background:var(--accent-tint);}
.isel-empty{padding:9px 12px;font-size:13.5px;color:var(--grey);}