:root{
    --concrete:#ECEFEE;
    --paper:#FFFFFF;
    --ink:#16211F;
    --ink2:#5B6763;
    --line:#DBE0DE;
    --line2:#C7CFCC;
    --teal:#14554F;
    --teal-soft:#E2EEEB;
    --amber:#C4820F;
    --red:#B03F2C;
    --green:#2C7A57;
    --blue:#3A6CB4;
    --violet:#6E56A6;
    --ochre:#A96520;
    --brick:#B44238;
    --radius:10px;
    --shadow:0 1px 2px rgba(22,33,31,.06), 0 8px 24px -12px rgba(22,33,31,.18);
    --display:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
    --body:"IBM Plex Sans", system-ui, -apple-system, Segoe UI, sans-serif;
    --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--concrete);
    color:var(--ink);
    font-family:var(--body);
    font-size:14px;
    line-height:1.45;
    -webkit-font-smoothing:antialiased;
  }
  button,input,select,textarea{font:inherit;color:inherit}
  button{cursor:pointer}
  a{color:var(--teal)}
  :focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}

  .eyebrow{
    font-family:var(--display);
    text-transform:uppercase;
    letter-spacing:.10em;
    font-weight:600;
    font-size:12px;
    color:var(--ink2);
  }
  .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

  /* ---------- shell ---------- */
  .topbar{
    position:sticky;top:0;z-index:40;
    background:var(--ink);color:#F2F5F4;
    border-bottom:3px solid var(--teal);
  }
  .topbar-in{
    max-width:1180px;margin:0 auto;padding:10px 16px;
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  }
  .brand{display:flex;align-items:center;gap:9px;margin-right:4px}
  .brand-mark{display:block}
  .brand-name{
    font-family:var(--display);font-weight:700;font-size:22px;
    letter-spacing:.06em;text-transform:uppercase;line-height:1;
  }
  .brand-sub{
    font-family:var(--display);font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:#93A5A0;line-height:1;margin-top:3px;
  }
  .tabs{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
  .tab{
    background:transparent;border:0;color:#A9B8B4;
    font-family:var(--display);font-size:15px;letter-spacing:.08em;
    text-transform:uppercase;font-weight:600;
    padding:7px 12px;border-radius:6px;
  }
  .tab:hover{color:#fff;background:rgba(255,255,255,.07)}
  .tab.is-on{color:var(--ink);background:#F2F5F4}
  .btn-new{
    background:var(--teal);border:0;color:#fff;font-weight:600;
    padding:8px 14px;border-radius:8px;font-size:13px;
  }
  .btn-new:hover{background:#0F433E}

  .wrap{max-width:1180px;margin:0 auto;padding:18px 16px 80px}

  /* ---------- generic bits ---------- */
  .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
  .btn{
    background:var(--paper);border:1px solid var(--line2);border-radius:8px;
    padding:7px 12px;font-size:13px;font-weight:500;color:var(--ink);
  }
  .btn:hover{border-color:var(--ink2);background:#FAFBFB}
  .btn-primary{background:var(--teal);border-color:var(--teal);color:#fff}
  .btn-primary:hover{background:#0F433E;border-color:#0F433E}
  .btn-wa{background:#1E8A5F;border-color:#1E8A5F;color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
  .btn-wa:hover{background:#186F4C;border-color:#186F4C}
  .btn-danger{color:var(--red);border-color:#E3C6C0}
  .btn-danger:hover{background:#FCF3F1;border-color:var(--red)}
  .btn-sm{padding:5px 9px;font-size:12px;border-radius:7px}
  .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .grow{flex:1 1 auto}
  .muted{color:var(--ink2)}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  input[type=text],input[type=number],input[type=date],input[type=tel],select,textarea{
    background:var(--paper);border:1px solid var(--line2);border-radius:8px;
    padding:8px 10px;width:100%;
  }
  input:hover,select:hover,textarea:hover{border-color:var(--ink2)}
  label.field{display:block}
  label.field > span{display:block;margin-bottom:5px;font-size:12px;font-weight:600;color:var(--ink2)}

  /* ---------- dashboard ---------- */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
  .stat{padding:12px 14px}
  .stat .k{font-family:var(--display);font-size:30px;font-weight:700;line-height:1.05}
  .stat .l{margin-top:2px}
  .stat.warn .k{color:var(--amber)}
  .stat.bad .k{color:var(--red)}
  .stat .sub{font-size:12px;color:var(--ink2);margin-top:3px}

  .load{padding:14px}
  .load h3{margin:0 0 10px;font-family:var(--display);font-size:16px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
  .load-row{display:grid;grid-template-columns:170px 1fr 96px;gap:12px;align-items:center;padding:6px 0}
  .load-name{display:flex;align-items:center;gap:8px;font-weight:500}
  .load-track{height:9px;background:#E7EBE9;border-radius:99px;overflow:hidden}
  .load-fill{height:100%;border-radius:99px}
  .load-val{text-align:right;font-family:var(--mono);font-size:12px;color:var(--ink2)}

  .dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto}

  /* ---------- filters ---------- */
  .filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:16px 0 10px}
  .filters input[type=text]{max-width:280px}
  .filters select{width:auto;min-width:130px}

  /* ---------- PO list ---------- */
  .list{display:flex;flex-direction:column;gap:8px}
  .po{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
    padding:12px 14px;display:grid;
    grid-template-columns:minmax(0,1fr) 220px 128px;
    gap:14px;align-items:center;text-align:left;width:100%;
    font:inherit;color:inherit;cursor:pointer;
  }
  .po:hover{border-color:var(--ink2);box-shadow:var(--shadow)}
  .po.is-late{border-left:3px solid var(--red)}
  .po.is-done{background:#F6F8F7;border-style:dashed}
  .po.is-done .po-no,.po.is-done .po-cust{color:#4A5551}
  .po.is-done .alloc-track{opacity:.6}
  .po-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:7px}
  .section-rule{
    display:flex;align-items:center;gap:10px;margin:26px 0 10px;
  }
  .section-rule .line-h{height:1px;background:var(--line2);flex:1}
  select.mini{width:auto;padding:4px 7px;font-size:12px;border-radius:6px}
  .moved{animation:flash 1.1s ease-out}
  @keyframes flash{from{background:#FBF1DF}to{background:transparent}}
  @media (prefers-reduced-motion:reduce){.moved{animation:none}}
  .po-no{font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:-.01em}
  .po-cust{font-weight:600;font-size:15px}
  .po-meta{font-size:12.5px;color:var(--ink2);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
  .po-meta .late{color:var(--red);font-weight:600}

  /* signature element: allocation bar */
  .alloc{display:block}
  .alloc-track{display:flex;height:14px;border-radius:4px;overflow:hidden;background:#E7EBE9}
  .alloc-seg{height:100%;position:relative}
  .alloc-seg + .alloc-seg{border-left:2px solid var(--paper)}
  .alloc-legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:11.5px;color:var(--ink2)}
  .alloc-legend b{font-weight:600;color:var(--ink)}
  .alloc-chip{display:inline-flex;align-items:center;gap:5px}

  .po-right{text-align:right}
  .po-value{font-family:var(--mono);font-size:13.5px;font-weight:500}
  .pill{
    display:inline-block;padding:3px 8px;border-radius:99px;
    font-size:11px;font-weight:600;letter-spacing:.02em;margin-top:5px;
    border:1px solid transparent;
  }
  .pill-new{background:#EAF0F7;color:#2F5C97;border-color:#D2E0F0}
  .pill-scheduled{background:#F3EEF9;color:#5B4691;border-color:#E4DAF3}
  .pill-production{background:#FBF1DF;color:#8A5A08;border-color:#F2E2C4}
  .pill-ready{background:#E6F1EC;color:#1E6B4B;border-color:#CFE5DA}
  .pill-delivered{background:#EDEFEE;color:#5B6763;border-color:#DDE2E0}
  .pill-cancelled{background:#F7EBE9;color:#8F3626;border-color:#EBD3CE}

  .empty{
    padding:44px 20px;text-align:center;background:var(--paper);
    border:1px dashed var(--line2);border-radius:var(--radius);
  }
  .empty h3{font-family:var(--display);font-size:20px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 6px}

  /* ---------- drawer ---------- */
  .scrim{
    position:fixed;inset:0;background:rgba(22,33,31,.42);z-index:50;
    display:flex;justify-content:flex-end;
  }
  .drawer{
    background:var(--concrete);width:min(680px,100%);height:100%;
    display:flex;flex-direction:column;box-shadow:-20px 0 50px -20px rgba(0,0,0,.4);
    animation:slide .18s ease-out;
  }
  @keyframes slide{from{transform:translateX(22px);opacity:.4}to{transform:none;opacity:1}}
  @media (prefers-reduced-motion:reduce){.drawer{animation:none}}
  .drawer-head{
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:14px 18px;display:flex;align-items:flex-start;gap:12px;
  }
  .drawer-body{overflow:auto;padding:16px 18px 40px;flex:1}
  .drawer-foot{
    background:var(--paper);border-top:1px solid var(--line);
    padding:12px 18px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;
  }
  .x{background:transparent;border:0;font-size:22px;line-height:1;color:var(--ink2);padding:2px 6px}
  .x:hover{color:var(--ink)}

  /* docket: per-plant block in PO detail */
  .docket{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
  .docket-head{
    display:flex;align-items:center;gap:10px;padding:10px 14px;
    border-bottom:1px dashed var(--line2);
  }
  .docket-title{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
  .docket-body{padding:4px 14px 12px}
  table.items{width:100%;border-collapse:collapse}
  table.items th{
    text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink2);font-weight:600;padding:8px 6px;border-bottom:1px solid var(--line);
  }
  table.items td{padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
  table.items tr:last-child td{border-bottom:0}
  table.items td.n{text-align:right;font-family:var(--mono);font-size:13px;white-space:nowrap}
  table.items th.n{text-align:right}
  .docket-foot{display:flex;gap:8px;flex-wrap:wrap;padding:0 14px 14px;align-items:center}

  /* ---------- form ---------- */
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
  .form-grid .full{grid-column:1/-1}
  .lines{display:flex;flex-direction:column;gap:8px}
  .line{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
    padding:10px 12px;display:grid;
    grid-template-columns:minmax(0,1.9fr) minmax(0,1.1fr) 92px 80px minmax(0,1.35fr) 30px;
    gap:8px;align-items:end;
  }
  .line .lbl{font-size:11px;font-weight:600;color:var(--ink2);display:block;margin-bottom:4px}
  .line-plant select{border-left:4px solid var(--line2)}
  .lbl-toggle{
    background:#EEF1F0;border:1px solid var(--line2);color:var(--ink2);
    font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    padding:1px 5px;border-radius:99px;margin-left:4px;line-height:1.5;
  }
  .lbl-toggle:hover{border-color:var(--ink2);color:var(--ink)}
  .lbl-toggle.is-on{background:var(--teal);border-color:var(--teal);color:#fff}
  .line-truck{
    grid-column:1/-1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
    background:var(--teal-soft);border-radius:8px;padding:8px 10px;margin-top:2px;
  }
  .line-truck .lbl{margin:0}
  .line-truck input[type=number]{width:62px}
  .line-truck select{width:auto;min-width:130px}
  .line.is-flex input[data-f="qty"]{background:#F7F9F8;color:var(--ink2)}
  .tag-muatan{
    display:inline-block;background:var(--teal-soft);color:var(--teal);
    border:1px solid #C9E0DA;border-radius:99px;padding:1px 7px;
    font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  }
  .prio{
    display:inline-block;border-radius:99px;padding:1px 7px;vertical-align:middle;
    font-size:10px;font-weight:800;letter-spacing:.06em;line-height:1.6;
  }
  .prio-urgent{background:#FCE9E7;color:#A3261B;border:1px solid #F3C9C4}
  .prio-high{background:#FBF1DF;color:#8A5A08;border:1px solid #F2E2C4}
  .prio-low{background:#EEF1F0;color:var(--ink2);border:1px solid var(--line2)}
  .po.is-urgent{border-left:3px solid #C0392B}
  .po.is-high{border-left:3px solid #D08A12}
  .merk{
    display:inline-block;background:#EEF1F0;color:var(--ink2);
    border:1px solid var(--line2);border-radius:99px;padding:1px 7px;
    font-size:10.5px;font-weight:700;letter-spacing:.04em;
  }
  .line-del{background:transparent;border:0;color:var(--ink2);font-size:18px;padding:6px}
  .line-del:hover{color:var(--red)}
  .line-total{font-family:var(--mono);font-size:12px;color:var(--ink2);grid-column:1/-1;text-align:right}

  /* ---------- plants tab ---------- */
  .plant-card{padding:14px;display:grid;grid-template-columns:16px 1fr;gap:12px;margin-bottom:8px}
  .plant-grid{display:grid;grid-template-columns:1fr 1fr 150px;gap:10px}

  /* ---------- modal (share / text) ---------- */
  .modal-scrim{position:fixed;inset:0;background:rgba(22,33,31,.45);z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
  .modal{background:var(--paper);border-radius:12px;width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow)}
  .modal-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
  .modal-body{padding:14px 16px;overflow:auto}
  .modal-foot{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
  .wa-preview{
    width:100%;min-height:230px;font-family:var(--mono);font-size:12.5px;line-height:1.5;
    background:#F7F9F8;border:1px solid var(--line);border-radius:8px;padding:12px;resize:vertical;
  }
  .toast{
    position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
    background:var(--ink);color:#fff;padding:9px 16px;border-radius:99px;
    font-size:13px;z-index:80;box-shadow:var(--shadow);
  }
  .savebar{font-size:12px;color:var(--ink2);padding:10px 2px 0}

  @media (max-width:860px){
    .stats{grid-template-columns:1fr 1fr}
    .po{grid-template-columns:1fr;gap:10px}
    .po-right{text-align:left;display:flex;align-items:center;gap:10px}
    .po-right .pill{margin-top:0}
    .load-row{grid-template-columns:120px 1fr;grid-template-areas:"name val" "bar bar"}
    .load-name{grid-area:name}.load-val{grid-area:val}.load-track{grid-area:bar}
    .form-grid{grid-template-columns:1fr}
    .line{grid-template-columns:1fr 1fr;}
    .line .l-prod{grid-column:1/-1}
    .line .l-merk{grid-column:1/-1}
    .line .l-plant{grid-column:1/-1}
    .plant-grid{grid-template-columns:1fr}
    .brand-sub{display:none}
  }

  /* ---------- hosted app additions ---------- */
  .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
  .login{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:26px;width:min(380px,100%);box-shadow:var(--shadow)}
  .login h1{font-family:var(--display);font-size:30px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 2px}
  .login .sub{color:var(--ink2);font-size:13px;margin-bottom:18px}
  .login label{display:block;margin-bottom:12px}
  .login .err{background:#FBEEEB;border:1px solid #E8CFC9;color:#8F3626;padding:9px 12px;border-radius:8px;font-size:13px;margin-bottom:12px}
  .whoami{display:flex;align-items:center;gap:8px;color:#A9B8B4;font-size:12.5px}
  .whoami b{color:#F2F5F4;font-weight:600}
  .role-tag{background:rgba(255,255,255,.12);border-radius:99px;padding:2px 8px;font-size:10.5px;
    letter-spacing:.06em;text-transform:uppercase;font-weight:700}
  .link-btn{background:none;border:0;color:#A9B8B4;text-decoration:underline;font-size:12.5px;padding:0}
  .link-btn:hover{color:#fff}
  .offline{background:#FBF1DF;border:1px solid #F2E2C4;color:#8A5A08;padding:8px 12px;
    border-radius:8px;font-size:13px;margin-bottom:12px}
  .fresh{background:var(--teal-soft);border:1px solid #C9E0DA;color:var(--teal);padding:8px 12px;
    border-radius:8px;font-size:13px;margin-bottom:12px;display:flex;gap:10px;align-items:center}
  .user-row{display:grid;grid-template-columns:1fr 130px 150px auto;gap:10px;align-items:center;
    padding:11px 14px;border-bottom:1px solid var(--line)}
  .user-row:last-child{border-bottom:0}
  .audit{font-size:12.5px}
  .audit-row{display:grid;grid-template-columns:120px 90px 1fr;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
  .audit-row:last-child{border-bottom:0}
  .report-box{background:var(--teal-soft);border-radius:8px;padding:10px 12px;margin-top:8px;
    display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .report-box input{width:110px}
  .status-actions{display:flex;gap:6px;flex-wrap:wrap}
  @media (max-width:860px){
    .user-row{grid-template-columns:1fr;gap:6px}
    .audit-row{grid-template-columns:1fr;gap:2px}
  }

  /* ---------- production ---------- */
  .subtabs{display:flex;gap:4px;margin-bottom:14px;flex-wrap:wrap}
  .subtab{
    background:var(--paper);border:1px solid var(--line2);border-radius:99px;
    padding:6px 14px;font-size:13px;font-weight:500;
  }
  .subtab:hover{border-color:var(--ink2)}
  .subtab.is-on{background:var(--ink);border-color:var(--ink);color:#F2F5F4}
  .prod-head{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .prows{display:flex;flex-direction:column;gap:6px}
  .prow{
    display:grid;grid-template-columns:minmax(0,1fr) 132px 24px 30px;
    gap:10px;align-items:center;padding:6px 8px;
    border-radius:8px;border:1px solid var(--line);background:var(--paper);
  }
  .prow:hover{border-color:var(--line2)}
  .prow.has-value{background:var(--teal-soft);border-color:#C9E0DA}
  .prow input[data-f="kg"]{text-align:right;font-family:var(--mono);font-size:13px}
  .prow-unit{font-size:12px;color:var(--ink2)}
  .item-row{
    display:grid;grid-template-columns:1fr 130px 150px auto;gap:10px;align-items:center;
    padding:9px 14px;border-bottom:1px solid var(--line);
  }
  .item-row:last-child{border-bottom:0}
  .item-row.is-off{background:#FAFBFB;color:var(--ink2)}
  .item-row.is-off input[data-f="name"]{color:var(--ink2)}
  .kg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 14px}
  .kg-row{
    display:grid;grid-template-columns:1fr 118px;gap:10px;align-items:center;
    padding:5px 8px;border-radius:8px;border:1px solid transparent;
  }
  .kg-row:hover{background:#F7F9F8}
  .kg-row.has-value{background:var(--teal-soft);border-color:#C9E0DA}
  .kg-name{font-size:13.5px}
  .kg-row input{text-align:right;font-family:var(--mono);font-size:13px}
  table.laporan{width:100%;border-collapse:collapse;font-size:13px}
  table.laporan th{
    background:#F4F6F5;border:1px solid var(--line2);padding:7px 9px;
    font-family:var(--display);font-size:13px;letter-spacing:.03em;font-weight:600;text-align:center;
  }
  table.laporan th.ket{text-align:left;min-width:210px}
  table.laporan th .wk{font-family:var(--body);font-size:10.5px;font-weight:400;color:var(--ink2);letter-spacing:0}
  table.laporan td{border:1px solid var(--line);padding:5px 9px}
  table.laporan td.ket{padding-left:26px}
  table.laporan td.n{text-align:right;font-family:var(--mono);font-size:12.5px;white-space:nowrap}
  table.laporan tr.group td{font-weight:600;padding-left:9px;background:#FAFBFB}
  table.laporan .total-col{background:#F7F9F8;font-weight:600}
  table.laporan tbody tr:hover td{background:#F7F9F8}
  table.laporan tfoot td{
    border-top:2px solid var(--ink);font-weight:700;background:#F4F6F5;
    font-family:var(--mono);
  }
  table.laporan tfoot td.ket{font-family:var(--body)}
  .log-row{
    display:grid;grid-template-columns:1fr 120px auto;gap:12px;align-items:center;
    padding:12px 14px;border-bottom:1px solid var(--line);
  }
  .log-row:last-child{border-bottom:0}
  @media (max-width:860px){
    .prod-head{grid-template-columns:1fr}
    .kg-grid{grid-template-columns:1fr}
    .prow{grid-template-columns:minmax(0,1fr) 96px 22px 26px;gap:6px}
    .item-row{grid-template-columns:1fr;gap:6px}
    .log-row{grid-template-columns:1fr;gap:6px}
    .log-row .row{justify-content:flex-start}
  }