/* ===== Design system (matches Browser Calculator) ===== */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  :root{
    --navy:#1a365d; --navy2:#2d4a7c; --accent:#4a6fa5; --bg:#f7f8fa;
    --ink:#2d3748; --muted:#718096; --line:#e2e8f0;
    --green:#38a169; --greenbg:#c6f6d5; --greenink:#22543d;
    --amber:#d69e2e; --amberbg:#feebc8; --amberink:#744210;
    --red:#e53e3e; --redbg:#fed7d7; --redink:#742a2a;
    --blue:#3182ce; --bluebg:#bee3f8;
  }
  html{font-size:16px;-webkit-font-smoothing:antialiased;}
  body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
       line-height:1.6;color:var(--ink);background:var(--bg);}
  .mono{font-family:"Consolas","Courier New",monospace;}

  /* ===== Top nav ===== */
  nav{position:fixed;top:0;left:0;right:0;background:var(--navy);color:#fff;
      display:flex;align-items:center;gap:1.5rem;padding:.7rem 1.5rem;
      box-shadow:0 2px 4px rgba(0,0,0,.1);z-index:1000;}
  nav .brand{font-size:1.15rem;font-weight:700;letter-spacing:.01em;}
  nav .tabs{display:flex;gap:.25rem;margin-left:1rem;}
  nav .tab{color:#cbd8ea;text-decoration:none;font-weight:500;padding:.4rem .9rem;border-radius:6px;
           cursor:pointer;font-size:.95rem;border:none;background:none;}
  nav .tab:hover{background:rgba(255,255,255,.08);color:#fff;}
  nav .tab.active{background:var(--accent);color:#fff;}
  nav .spacer{flex:1;}
  nav .who{font-size:.85rem;color:#cbd8ea;display:flex;align-items:center;gap:.5rem;}
  nav .who b{color:#fff;}
  nav .rolepill{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
                background:var(--accent);padding:.15rem .5rem;border-radius:4px;cursor:pointer;}
  nav .logout{color:#cbd8ea;font-size:.85rem;text-decoration:none;cursor:pointer;}
  nav .logout:hover{color:#fff;}

  main{margin-top:64px;padding:1.5rem;max-width:min(2200px,95vw);margin-left:auto;margin-right:auto;}
  h1{color:var(--navy);font-size:1.6rem;font-weight:700;margin-bottom:.2rem;}
  .sub{color:var(--muted);margin-bottom:1.2rem;font-size:.95rem;}
  h2{color:var(--navy);font-size:1.15rem;font-weight:600;margin:1.6rem 0 .8rem;
     padding-bottom:.4rem;border-bottom:2px solid var(--accent);}
  .view{display:none;} .view.active{display:block;}

  /* ===== Login ===== */
  #login{position:fixed;inset:0;background:linear-gradient(160deg,#1a365d,#2d4a7c);
         display:flex;align-items:center;justify-content:center;z-index:2000;}
  .loginbox{background:#fff;border-radius:10px;padding:2.2rem 2.4rem;width:360px;
            box-shadow:0 20px 50px rgba(0,0,0,.35);}
  .loginbox h2{border:none;color:var(--navy);font-size:1.4rem;margin:0 0 .3rem;padding:0;}
  .loginbox p{color:var(--muted);font-size:.9rem;margin-bottom:1.3rem;}
  .loginbox label{display:block;font-weight:600;font-size:.85rem;margin:.7rem 0 .25rem;color:var(--ink);}
  .loginbox input{width:100%;padding:.6rem .75rem;border:1px solid #cbd5e0;border-radius:6px;font-size:.95rem;}
  .loginbox input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(74,111,165,.12);}
  .loginbox button{width:100%;margin-top:1.3rem;padding:.7rem;background:var(--navy);color:#fff;
                   border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;}
  .loginbox button:hover{background:var(--navy2);}
  .loginbox .hint{margin-top:1rem;font-size:.75rem;color:var(--muted);text-align:center;}

  /* ===== Toolbar (filters) ===== */
  .toolbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:1rem;
           background:#fff;border:1px solid var(--line);border-radius:8px;padding:.7rem .9rem;}
  .toolbar input[type=text],.toolbar select{padding:.45rem .6rem;border:1px solid #cbd5e0;border-radius:6px;font-size:.9rem;}
  .toolbar input[type=text]{min-width:230px;}
  .toolbar .chk{display:flex;align-items:center;gap:.35rem;font-size:.88rem;color:var(--ink);cursor:pointer;}
  .toolbar .grow{flex:1;}
  .toolbar .count{font-size:.85rem;color:var(--muted);}

  /* ===== Tracker progress strip (all users) ===== */
  .progress-strip{background:#fff;border:1px solid var(--line);border-radius:8px;padding:.7rem .95rem;
                  margin-bottom:1rem;display:flex;flex-direction:column;gap:.5rem;}
  .ps-row{display:flex;align-items:center;gap:.8rem;}
  .ps-label{flex:0 0 6.5rem;font-size:.72rem;font-weight:700;text-transform:uppercase;
            letter-spacing:.03em;color:var(--muted);}

  /* While the window is actively being resized, suppress all transitions/
     animations so the many progress-bar width tweens don't thrash paint. */
  html.resizing *, html.resizing *::before, html.resizing *::after {
    transition: none !important; animation: none !important;
  }
  .ps-bar{flex:1;height:10px;background:#e2e8f0;border-radius:5px;overflow:hidden;display:flex;min-width:120px;}
  .ps-fg{height:100%;background:var(--green);transition:width .25s;}
  .ps-fr{height:100%;background:#63b3ed;transition:width .25s;}
  .ps-fw{height:100%;background:#a0aec0;transition:width .25s;}
  .ps-fo{height:100%;background:#f6ad55;transition:width .25s;}   /* SO awaiting review */
  .ps-txt{font-size:.88rem;color:var(--ink);white-space:nowrap;}
  .ps-pct{color:var(--muted);margin-left:.5rem;}

  /* ===== SO groups ===== */
  .so{background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:.8rem;overflow:hidden;
      content-visibility:auto;contain-intrinsic-size:auto 120px;}   /* skip layout/paint for off-screen orders */
  .so-head{display:flex;align-items:center;gap:.9rem;padding:.7rem 1rem;cursor:pointer;
           background:#f0f4f9;border-bottom:1px solid var(--line);}
  .so-head:hover{background:#e8eef6;}
  /* finalized orders stand out: green header tint + left accent */
  .so.finalized{border-color:#9ae6b4;border-left:4px solid var(--green);}
  .so.finalized .so-head{background:#e6f7ec;border-bottom-color:#c6f6d5;}
  .so.finalized .so-head:hover{background:#d7f0e0;}
  .so-head .caret{color:var(--accent);font-size:.8rem;width:1rem;transition:transform .15s;}
  .so.collapsed .caret{transform:rotate(-90deg);}
  .so.collapsed .so-body{display:none;}
  .so-head .sonum{font-weight:700;color:var(--navy);font-family:"Consolas",monospace;}
  .so-head .cust{color:var(--ink);font-size:.92rem;}
  .so-head .status-badge{font-size:.68rem;}
  .so-head .rollup{margin-left:auto;display:flex;align-items:center;gap:.7rem;min-width:230px;}
  .so-head .rollup .txt{font-size:.82rem;color:var(--muted);white-space:nowrap;}
  .bar{flex:1;height:8px;background:#e2e8f0;border-radius:5px;overflow:hidden;min-width:90px;display:flex;}
  .bar .fg{height:100%;background:var(--green);transition:width .25s;}
  .bar .fr{height:100%;background:#63b3ed;transition:width .25s;}
  .bar .fw{height:100%;background:#a0aec0;transition:width .25s;}
  .status-badge.na, .status-badge.namtr{background:#e0e7ff;color:#3730a3;}  /* indigo "No MTR" */
  .mtr-done{color:#2f855a;font-weight:600;}
  .status-badge.ready{background:#bee3f8;color:#2c5282;}
  table.lines tr.na{background:#f5f6ff;}
  table.lines tr.ready{background:#f0f7ff;}
  /* SO final-review state */
  .so-state{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:.12rem .5rem;border-radius:4px;}
  .so-state.progress{background:#edf2f7;color:#718096;}
  .so-state.review{background:#feebc8;color:#975a16;}
  .so-state.finalized{background:#c6f6d5;color:#22543d;}
  .finalbtn{margin-left:.2rem;}
  .ck:disabled{opacity:.35;cursor:not-allowed;}
  .mtrwrap{display:flex;align-items:center;justify-content:center;gap:.6rem;}
  .kebab{background:none;border:none;color:var(--muted);font-size:1.05rem;line-height:1;cursor:pointer;padding:0 .35rem;border-radius:4px;}
  .kebab:hover{background:#edf2f7;color:var(--navy);}
  .rowmenu{position:absolute;display:none;background:#fff;border:1px solid #cbd5e0;border-radius:8px;
           box-shadow:0 8px 24px rgba(0,0,0,.18);min-width:200px;z-index:1500;overflow:hidden;}
  .rowmenu div{padding:.55rem .85rem;font-size:.85rem;cursor:pointer;color:var(--ink);}
  .rowmenu div:hover{background:#f0f4f9;color:var(--navy);}
  /* de-emphasized ERP order status (reference data from import) */
  .erp{display:inline-block;font-size:.66rem;font-weight:600;padding:.05rem .45rem;border-radius:4px;
       border:1px solid;background:transparent;text-transform:uppercase;letter-spacing:.03em;}
  .erp.completed{color:#2f855a;border-color:#9ae6b4;}
  .erp.open{color:#2c5282;border-color:#bee3f8;}
  .erp.hold{color:#975a16;border-color:#fbd38d;}
  .link{color:var(--accent);cursor:pointer;text-decoration:underline;font-size:.78rem;}
  .link:hover{color:var(--navy);}
  .muted{color:#a0aec0;}
  /* activity log */
  .log{max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:8px;}
  .logrow{display:grid;grid-template-columns:128px 118px 1fr;gap:.6rem;align-items:baseline;
          padding:.45rem .85rem;border-bottom:1px solid var(--line);font-size:.85rem;}
  .logrow:last-child{border-bottom:none;}
  .logtime{color:var(--muted);font-size:.76rem;}
  .logwho{font-weight:600;color:var(--navy);}

  table.lines{width:100%;border-collapse:collapse;}
  table.lines th{background:var(--navy);color:#fff;font-size:.72rem;text-transform:uppercase;
                 letter-spacing:.04em;text-align:center;padding:.45rem .7rem;font-weight:600;}
  table.lines td{padding:.5rem .7rem;border-bottom:1px solid var(--line);font-size:.9rem;}
  table.lines tr:last-child td{border-bottom:none;}
  table.lines tr.done{background:#f3faf5;}
  table.lines tr:hover{background:#eef4fb;}
  table.lines .mono{font-size:.85rem;}
  /* center numeric / status / lot columns to match their headers */
  table.lines td[data-label="Line"],
  table.lines td[data-label="Qty"],
  table.lines td[data-label="Status"],
  table.lines td[data-label="Lot Number"]{text-align:center;}
  .ck{width:20px;height:20px;cursor:pointer;accent-color:var(--green);}
  td.desc{max-width:280px;}
  .small{font-size:.78rem;color:var(--muted);}

  /* lot number chips */
  .lotcell{display:inline-flex;flex-wrap:wrap;gap:.25rem;justify-content:center;}
  .lotchip{display:inline-block;background:#edf2f7;color:var(--navy);border:1px solid #d6dee8;
           border-radius:4px;padding:.05rem .4rem;font-size:.78rem;font-weight:600;white-space:nowrap;}
  .lotchip.more{background:#e2e8f0;color:var(--muted);}
  td.lotcol.editable{cursor:pointer;}
  td.lotcol.editable:hover .lotchip{border-color:var(--accent);}

  .status-badge{display:inline-block;padding:.15rem .55rem;border-radius:4px;font-size:.72rem;font-weight:700;
                text-transform:uppercase;letter-spacing:.03em;}
  .status-badge.completed{background:var(--greenbg);color:var(--greenink);}
  .status-badge.open{background:var(--bluebg);color:#2c5282;}
  .status-badge.hold{background:var(--amberbg);color:var(--amberink);}

  .btn{padding:.4rem .8rem;border:none;border-radius:6px;font-size:.85rem;font-weight:600;cursor:pointer;}
  .btn.primary{background:var(--navy);color:#fff;} .btn.primary:hover{background:var(--navy2);}
  .btn.ghost{background:#fff;color:var(--navy);border:1.5px solid var(--navy);}
  .btn.ghost:hover{background:#f0f4f9;}
  .btn.tiny{padding:.2rem .5rem;font-size:.75rem;}

  /* ===== Dashboard ===== */
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-bottom:.5rem;}
  .card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.2rem;}
  .card .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;}
  .card .v{font-size:2rem;font-weight:700;color:var(--navy);font-family:"Consolas",monospace;line-height:1.2;}
  .card .v small{font-size:1rem;color:var(--muted);}
  .card.accent{background:var(--navy);color:#fff;} .card.accent .k{color:#a9c0de;} .card.accent .v{color:#fff;}

  .panel{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.2rem;margin-bottom:1rem;}
  .panel h3{color:var(--navy);font-size:1rem;margin-bottom:.9rem;display:flex;align-items:center;gap:.5rem;}
  .panel h3 .lock{font-size:.66rem;background:var(--amberbg);color:var(--amberink);padding:.1rem .45rem;
                  border-radius:4px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}

  .sobar{display:grid;grid-template-columns:120px 1fr 70px;align-items:center;gap:.7rem;margin-bottom:.5rem;font-size:.88rem;}
  .sobar .lbl{font-family:"Consolas",monospace;font-weight:600;color:var(--navy);}
  .sobar .num{text-align:right;color:var(--muted);font-size:.82rem;}

  /* throughput chart */
  .chart{display:flex;align-items:flex-end;gap:.5rem;height:150px;padding-top:.5rem;}
  .chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:.35rem;height:100%;justify-content:flex-end;}
  .chart .col .b{width:70%;background:var(--accent);border-radius:4px 4px 0 0;min-height:3px;transition:height .3s;}
  .chart .col .b:hover{background:var(--navy);}
  .chart .col .cl{font-size:.72rem;color:var(--muted);}
  .chart .col .cv{font-size:.74rem;color:var(--ink);font-weight:600;}

  table.people{width:100%;border-collapse:collapse;}
  table.people th{text-align:left;font-size:.72rem;text-transform:uppercase;color:var(--muted);
                  padding:.4rem .6rem;border-bottom:2px solid var(--line);}
  table.people td{padding:.5rem .6rem;border-bottom:1px solid var(--line);font-size:.9rem;}
  table.people .pbar{height:8px;background:#e2e8f0;border-radius:5px;overflow:hidden;}
  table.people .pbar>span{display:block;height:100%;background:var(--accent);}

  .age-row{display:grid;grid-template-columns:90px 1fr 50px;align-items:center;gap:.7rem;margin-bottom:.5rem;font-size:.86rem;}
  .age-row .pbar{height:14px;background:#eef2f7;border-radius:5px;overflow:hidden;}
  .age-row .pbar>span{display:block;height:100%;border-radius:5px;}
  .age-row .pbar>span.a{background:#48bb78;} .age-row .pbar>span.b{background:#ecc94b;} .age-row .pbar>span.c{background:#f56565;}

  /* per-person trend chart */
  .chartctl{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;font-size:.85rem;color:var(--ink);margin-bottom:.6rem;}
  .chartctl label{display:flex;align-items:center;gap:.4rem;}
  .chartctl select{padding:.3rem .5rem;border:1px solid #cbd5e0;border-radius:5px;font-size:.85rem;}
  .legend{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:.7rem;font-size:.82rem;color:var(--ink);}
  .legend .lg{display:flex;align-items:center;gap:.45rem;}
  .legend .sw{width:16px;height:3px;border-radius:2px;display:inline-block;}

  /* admin */
  .drop{border:2px dashed #cbd5e0;border-radius:10px;padding:1.6rem;text-align:center;color:var(--muted);background:#fafbfc;}
  .drop b{color:var(--navy);}
  .importlog{font-family:"Consolas",monospace;font-size:.82rem;background:#0f1b2d;color:#cfe3ff;border-radius:8px;
             padding:.8rem 1rem;margin-top:.9rem;}
  table.adm{width:100%;border-collapse:collapse;margin-top:.6rem;}
  table.adm th{background:var(--navy);color:#fff;font-size:.74rem;text-transform:uppercase;text-align:left;padding:.5rem .7rem;}
  table.adm td{padding:.5rem .7rem;border-bottom:1px solid var(--line);font-size:.9rem;}
  .pill{display:inline-block;font-size:.7rem;font-weight:700;padding:.12rem .5rem;border-radius:4px;text-transform:uppercase;}
  .pill.admin{background:#e9d8fd;color:#553c9a;} .pill.member{background:#e2e8f0;color:#4a5568;}
  .pill.on{background:var(--greenbg);color:var(--greenink);} .pill.off{background:var(--redbg);color:var(--redink);}

  .memberhide{display:block;}
  body.role-member .memberhide{display:none;}
  body.role-member .adminonlytab, body.role-reviewer .adminonlytab{display:none;}

  .note{background:#fffaf0;border:1px solid #f6e2bc;border-radius:8px;padding:.6rem .9rem;font-size:.82rem;color:#7b5e1a;margin-bottom:1rem;}

  /* Help tab */
  .helpdoc{max-width:760px;line-height:1.55;font-size:.92rem;}
  .helpdoc h3{margin-top:1.5rem;}
  .helpdoc h3:first-child{margin-top:0;}
  .helpdoc p{margin:.5rem 0;color:var(--ink);}
  .helpdoc ul,.helpdoc ol{margin:.4rem 0 .8rem 1.2rem;}
  .helpdoc li{margin:.25rem 0;}
  .helpdoc code{background:#edf2f7;padding:.05rem .3rem;border-radius:4px;font-family:"Consolas","Courier New",monospace;font-size:.85em;}

  /* generic modal overlay (e.g. Lot Number entry) */
  .overlay{position:fixed;inset:0;background:rgba(15,27,45,.5);display:flex;align-items:center;justify-content:center;z-index:2500;}
  .overlay-box{background:#fff;border-radius:10px;padding:1.6rem;width:min(360px,92vw);box-shadow:0 20px 50px rgba(0,0,0,.35);}
  .overlay-box h2{border:none;color:var(--navy);font-size:1.2rem;margin:0 0 .3rem;padding:0;}
  .overlay-box p{color:var(--muted);font-size:.85rem;margin-bottom:.9rem;}
  .overlay-box input{width:100%;padding:.6rem .75rem;border:1px solid #cbd5e0;border-radius:6px;font-size:.95rem;}
  .overlay-box input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(74,111,165,.12);}
  .overlay-box .errline{color:#c0392b;font-size:.8rem;min-height:1em;margin-top:.4rem;}
  .overlay-actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem;}

  /* lot manager modal */
  .lotlist{list-style:none;margin:.2rem 0 .8rem;padding:0;max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:.35rem;}
  .lotlist li{display:flex;align-items:center;justify-content:space-between;gap:.6rem;}
  .lotlist li.nolots{justify-content:flex-start;font-size:.85rem;}
  .lotdel{background:none;border:none;color:#c0392b;font-size:.95rem;cursor:pointer;line-height:1;padding:.1rem .35rem;border-radius:4px;}
  .lotdel:hover{background:#fde8e8;}
  .lotadd{display:flex;gap:.5rem;align-items:center;}
  .lotadd input{flex:1;}
  .lotadd .btn{white-space:nowrap;}

  /* ===== Mobile ===== */
  @media (max-width: 640px) {
    /* top nav: scrollable bar so every tab is reachable */
    nav { gap: .4rem; padding: .5rem .6rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    nav > * { flex: 0 0 auto; }
    nav .brand { font-size: 1rem; }
    nav .tabs { margin-left: .25rem; gap: .15rem; }
    nav .tab { padding: .4rem .65rem; font-size: .9rem; }
    nav .spacer { display: none; }
    nav .who { display: none; }

    main { margin-top: 56px; padding: 1rem .7rem; }
    h1 { font-size: 1.35rem; }

    /* login / change-password boxes fit the screen */
    .loginbox { width: auto; max-width: 92vw; padding: 1.6rem 1.4rem; }

    /* tracker toolbar filters stack full-width */
    .toolbar { flex-direction: column; align-items: stretch; gap: .5rem; }
    .toolbar input[type=text], .toolbar select { width: 100%; min-width: 0; }
    .toolbar .grow, .toolbar .count { display: none; }

    /* progress strip wraps instead of overflowing */
    .progress-strip { flex-wrap: wrap; }
    .ps-bar { flex-basis: 100%; }
    .ps-txt { white-space: normal; font-size: .82rem; }

    /* SO header reflows; the roll-up bar drops to its own line */
    .so-head { flex-wrap: wrap; gap: .35rem .5rem; }
    .so-head .cust { font-size: .82rem; }
    .so-head .rollup { margin-left: 0; order: 20; flex-basis: 100%; min-width: 0; }
    .so-head .btn.tiny { order: 30; }

    /* line table → card per row (labels from data-label) */
    table.lines thead { display: none; }
    table.lines, table.lines tbody, table.lines tr, table.lines td { display: block; width: auto; }
    table.lines tr { border: 1px solid var(--line); border-radius: 8px; margin: .45rem 0; padding: .35rem .5rem; }
    table.lines tr:hover { background: #fff; }
    table.lines tr.done { background: #f3faf5; } table.lines tr.na { background: #f5f6ff; } table.lines tr.ready { background: #f0f7ff; }
    table.lines td { border: none; display: flex; justify-content: space-between; gap: 1rem; padding: .2rem .1rem; align-items: center; }
    table.lines td.desc { white-space: normal; max-width: none; text-align: right; }
    table.lines td::before { content: attr(data-label); font-weight: 600; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
    table.lines td[data-label="Done"] { justify-content: flex-start; gap: .5rem; }
    .mtrwrap { width: 100%; justify-content: space-between; }   /* keep status left / kebab right in mobile cards */

    /* dense admin/import tables scroll horizontally */
    .panel { overflow-x: auto; }
    table.adm { min-width: 520px; }

    /* dashboard: cards already auto-fit; wrap the chart controls */
    .chartctl { flex-wrap: wrap; gap: .6rem; }

    /* activity log rows stack */
    .logrow { grid-template-columns: 1fr; gap: .1rem; padding: .5rem .6rem; }
    .logtime { font-size: .72rem; }
  }