:root{
    --cream:#f7f5ef;
    --ink:#1f2b28;
    --teal:#1d5c53;
    --teal-dark:#123f39;
    --sage:#a9c2ab;
    --line:#dcd6c8;
    --danger:#a8402f;
    --card-bg:#ffffff;
    --input-bg:#fdfcf9;
    --text-muted:#7a8279;
    --text-muted-2:#6b7570;
    --hover-bg:#f0ede3;
    --row-line:#eee8db;
  }
  [data-theme="dark"]{
    --cream:#141917;
    --ink:#e8ece9;
    --teal:#49b2a0;
    --teal-dark:#7fd6c5;
    --sage:#24413a;
    --line:#33413c;
    --danger:#e18a7d;
    --card-bg:#1c2320;
    --input-bg:#181f1c;
    --text-muted:#93a099;
    --text-muted-2:#8b988f;
    --hover-bg:#232b27;
    --row-line:#2a332e;
  }
  *{box-sizing:border-box;}
  html, body{overflow-x:hidden; max-width:100%;}
  body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:var(--cream);
    color:var(--ink);
    min-height:100vh;
    transition:background-color .2s,color .2s;
  }
  .center-screen{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
  }
  .card{
    background:var(--card-bg);
    border:1px solid var(--line);
    border-radius:14px;
    padding:36px 32px;
    width:100%;
    max-width:380px;
    box-shadow:0 1px 3px rgba(31,43,40,0.06);
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:28px;
  }
  .brand-mark, .logo-img{
    width:34px;height:34px;border-radius:9px;
    background:var(--teal);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:700;font-size:15px;
    flex-shrink:0;object-fit:cover;
  }
  .brand-name{font-weight:600;font-size:15px;letter-spacing:.2px;}
  .brand-sub{font-size:12px;color:var(--text-muted-2);}
  h1{font-size:20px;margin:0 0 4px;font-weight:650;}
  .lead{font-size:13.5px;color:var(--text-muted);margin:0 0 24px;}
  label{
    display:block;font-size:12.5px;font-weight:600;
    color:var(--text-muted-2);margin-bottom:6px;margin-top:16px;
  }
  input{
    width:100%;padding:11px 12px;border:1px solid var(--line);
    border-radius:8px;font-size:14.5px;background:var(--input-bg);color:var(--ink);
    outline:none;transition:border-color .15s;
  }
  input:focus{border-color:var(--teal);}
  button{
    width:100%;padding:12px;border:none;border-radius:8px;
    background:var(--teal);color:#fff;font-size:14.5px;font-weight:600;
    cursor:pointer;margin-top:22px;transition:background .15s;
  }
  button:hover{background:var(--teal-dark);}
  button:disabled{opacity:.6;cursor:default;}
  .error-box{
    background:#fbeae6;border:1px solid #edc3b8;color:var(--danger);
    font-size:13px;padding:10px 12px;border-radius:8px;margin-top:16px;
    display:none;
  }
  #app{display:none;}

  /* ---------- Layout: top bar + bottom icon nav ---------- */
  .app-shell{display:flex;flex-direction:column;min-height:100vh;}
  .top-bar{
    background:var(--card-bg);border-bottom:1px solid var(--line);
    padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;
    position:sticky;top:0;z-index:60;transition:background-color .2s;
  }
  .top-bar-right{display:flex;align-items:center;gap:10px;}
  .icon-btn{
    width:auto;background:none;border:1px solid var(--line);border-radius:8px;
    padding:8px 10px;font-size:15px;cursor:pointer;color:var(--ink);margin-top:0;line-height:1;
  }
  .icon-btn:hover{background:var(--hover-bg);}

  .bottom-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:var(--card-bg);border-top:1px solid var(--line);
    display:flex;justify-content:space-around;align-items:stretch;
    padding-bottom:env(safe-area-inset-bottom,0);transition:background-color .2s;
  }
  .bottom-nav .navtab{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    background:none;border:none;cursor:pointer;margin-top:0;padding:8px 2px 7px;
    color:var(--text-muted-2);border-radius:0;
  }
  .bottom-nav .navtab .nav-icon{display:flex;align-items:center;justify-content:center;}
  .bottom-nav .navtab .nav-icon svg{width:23px;height:23px;flex-shrink:0;}
  .bottom-nav .navtab .nav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
  .bottom-nav .navtab.active{color:var(--teal);}
  .bottom-nav .navtab:hover{color:var(--teal-dark);}

  .main-content{flex:1;min-width:0;padding-bottom:64px;}

  .role-pill{
    background:var(--sage);color:var(--teal-dark);font-size:12px;font-weight:650;
    padding:5px 11px;border-radius:100px;letter-spacing:.2px;text-align:center;
  }
  .logout-link{
    font-size:13px;color:var(--text-muted-2);text-decoration:none;cursor:pointer;
    border:1px solid var(--line);padding:7px 13px;border-radius:8px;background:var(--card-bg);
    text-align:center;
  }
  .logout-link:hover{border-color:var(--teal);}
  main{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:28px 28px 60px;
    box-sizing:border-box;
  }
  /* Landscape / desktop lebar: isi melebar, tetap ada sedikit ruang kiri-kanan */
  @media (min-width: 901px){
    main{
      max-width:min(1320px, calc(100% - 48px));
      padding:32px 24px 64px;
    }
  }
  @media (min-width: 1400px){
    main{
      max-width:min(1400px, calc(100% - 64px));
      padding:36px 28px 68px;
    }
  }

  main h2{font-size:22px;margin:0 0 6px;}
  main .lead{margin-bottom:32px;}
  .grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:14px;
  }
  .module-card{
    background:var(--card-bg);border:1px solid var(--line);border-radius:12px;
    padding:20px;position:relative;overflow:hidden;cursor:pointer;transition:border-color .15s;
  }
  .module-card .tag{
    font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;
    font-weight:650;margin-bottom:8px;
  }
  .module-card h3{font-size:15.5px;margin:0 0 4px;}
  .module-card p{font-size:12.5px;color:var(--text-muted);margin:0;}
  .module-card:hover{border-color:var(--teal);}
  #card-bahanbaku h3, #card-produksi h3, #card-pelabelan h3, #card-distribusi h3, #card-finance h3{
    font-size:24px;font-weight:700;color:var(--teal-dark);
  }
  .soon{
    position:absolute;top:14px;right:14px;font-size:10.5px;
    color:var(--text-muted);background:var(--cream);padding:3px 8px;border-radius:100px;
  }

  .page{display:none;}

  .subnav{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
  .subtab{width:auto;background:var(--card-bg);border:1px solid var(--line);color:var(--text-muted);
    padding:8px 14px;font-size:13px;font-weight:600;border-radius:8px;margin-top:0;}
  .subtab.active{background:var(--teal);color:#fff;border-color:var(--teal);}
  .subpage{display:none;}

  .panel{background:var(--card-bg);border:1px solid var(--line);border-radius:12px;padding:22px;margin-bottom:20px;}
  .panel h3{font-size:15px;margin:0 0 16px;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .form-row > div{display:flex;flex-direction:column;}
  .form-row label{margin-top:0;}
  select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;
    font-size:14.5px;background:var(--input-bg);color:var(--ink);}

  .data-table{width:100%;border-collapse:collapse;font-size:13px;}
  .data-table th{text-align:left;color:var(--text-muted);font-weight:650;font-size:11.5px;
    text-transform:uppercase;letter-spacing:.4px;padding:8px 10px;border-bottom:1px solid var(--line);
    white-space:nowrap;}
  .data-table td{padding:10px;border-bottom:1px solid var(--row-line);}
  .data-table th.sortable{cursor:pointer;user-select:none;}
  .data-table th.sortable:hover{color:var(--teal);}
  .data-table th.sort-active{color:var(--teal-dark);}
  .data-table th .sort-arrow{font-size:9px;margin-left:3px;opacity:.7;}
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

  .status-badge{font-size:11px;font-weight:650;padding:3px 9px;border-radius:100px;white-space:nowrap;}
  .status-menunggu{background:#f3e9c9;color:#8a6d1c;}
  .status-lolos{background:#d9ead9;color:#2e6b2e;}
  .status-tolak{background:#fbeae6;color:var(--danger);}

  .qc1-item{border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:12px;}
  .qc1-item h4{margin:0 0 4px;font-size:14px;}
  .mini-btn{width:auto;padding:8px 16px;font-size:13px;margin-top:12px;}
  .msg-box{font-size:13px;padding:10px 12px;border-radius:8px;margin-top:14px;display:none;}
  .msg-ok{background:#d9ead9;color:#2e6b2e;display:block;}
  .msg-err{background:#fbeae6;color:var(--danger);display:block;}

  .row-actions{white-space:nowrap;}
  .link-btn{
    width:auto;background:none;border:none;color:var(--teal);font-size:12.5px;
    font-weight:600;cursor:pointer;padding:4px 8px;margin:0;border-radius:6px;
  }
  .link-btn:hover{background:var(--hover-bg);}
  .link-danger{color:var(--danger);}
  .data-table input, .data-table select{padding:6px 8px;font-size:12.5px;}

  .summary-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--row-line);font-size:14px;}
  .summary-row.total{font-weight:700;font-size:15.5px;border-bottom:none;border-top:2px solid var(--ink);margin-top:6px;padding-top:14px;}
  .section-title{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);margin:24px 0 4px;}
  .section-title:first-child{margin-top:0;}
  .val-neg{color:var(--danger);}

  /* ---------- Responsive: tablet & mobile ---------- */
  @media (max-width: 900px){
    main{padding:18px 12px 50px;max-width:100%;}
    .form-row{grid-template-columns:1fr;}
    .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
    .card{padding:28px 22px;}
    .subnav{gap:6px;}
    .subtab{padding:7px 11px;font-size:12.5px;}
    .top-bar .brand-name{display:none;}
    .panel{padding:16px;}
  }
  /* Bottom nav tetap ringkas & icon-only di HP (sesuai permintaan: mobile sudah oke, jangan diubah) */
  @media (max-width: 600px){
    .bottom-nav .navtab{padding:9px 2px;}
  }


  .loading-overlay{
    position:fixed;inset:0;background:rgba(31,43,40,.18);z-index:200;
    display:none;align-items:center;justify-content:center;
  }
  .loading-overlay.show{display:flex;}
  .spinner{
    width:36px;height:36px;border:3px solid var(--line);
    border-top-color:var(--teal);border-radius:50%;
    animation:spin .7s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  .toast-wrap{
    position:fixed;bottom:88px;left:50%;transform:translateX(-50%);
    z-index:220;display:flex;flex-direction:column;gap:8px;
    pointer-events:none;width:min(420px,92vw);
  }
  .toast{
    background:var(--card-bg);border:1px solid var(--line);color:var(--ink);
    padding:12px 16px;border-radius:10px;font-size:13.5px;
    box-shadow:0 4px 16px rgba(0,0,0,.12);pointer-events:auto;
    animation:toastIn .2s ease;
  }
  .toast.ok{border-color:#9bc49b;}
  .toast.err{border-color:var(--danger);color:var(--danger);}
  @keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .pager{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-top:12px;flex-wrap:wrap;font-size:13px;color:var(--text-muted);
  }
  .pager .pager-btns{display:flex;gap:8px;}
  .pager button{
    width:auto;margin-top:0;padding:7px 14px;font-size:13px;
    background:var(--card-bg);color:var(--ink);border:1px solid var(--line);
  }
  .pager button:hover{background:var(--hover-bg);}
  .pager button:disabled{opacity:.45;cursor:default;}
  .table-loading{text-align:center;padding:28px;color:var(--text-muted);font-size:13.5px;}
  .inline-spinner{
    display:inline-block;width:14px;height:14px;border:2px solid var(--line);
    border-top-color:var(--teal);border-radius:50%;
    animation:spin .7s linear infinite;vertical-align:-2px;margin-right:6px;
  }

  /* Badge notifikasi di bottom nav */
  .navtab{position:relative;}
  .nav-badge{
    position:absolute;top:2px;right:calc(50% - 18px);
    min-width:16px;height:16px;padding:0 4px;
    background:var(--danger);color:#fff;font-size:10px;font-weight:700;
    border-radius:100px;display:none;align-items:center;justify-content:center;
    line-height:1;pointer-events:none;
  }
  .nav-badge.show{display:flex;}
  .search-row{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap;align-items:center;}
  .search-row input[type="search"]{
    flex:1;min-width:160px;max-width:320px;padding:9px 12px;
    border:1px solid var(--line);border-radius:8px;font-size:13.5px;
    background:var(--input-bg);color:var(--ink);
  }
  /* Tanggal selalu dd/mm/yyyy — hindari type=date (ikut locale OS mm/dd) */
  input.date-id{
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }
  input.date-id::placeholder{color:var(--text-muted);opacity:.75;}

  .export-btn{
    width:auto;margin-top:0;padding:8px 14px;font-size:12.5px;font-weight:650;
    background:var(--card-bg);color:var(--teal);border:1px solid var(--teal);
    border-radius:var(--radius-sm, 8px);cursor:pointer;line-height:1.2;
  }
  .export-btn:hover{background:var(--hover-bg);}
  .report-head{
    display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
    gap:10px 16px;margin-bottom:12px;
  }
  .report-head h3{margin:0;}
  .report-actions{
    display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  }
  .report-actions .export-btn{margin:0;}
  .report-filter{
    display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;
    margin-bottom:14px;max-width:420px;
  }
  .report-filter label{display:block;font-size:12px;margin-bottom:4px;color:var(--text-muted);}

  /* Tablet portrait (601–1023): icon + label kecil, flex merata, tidak overflow */
  @media (min-width: 601px) and (max-width: 1023px){
    .bottom-nav{
      padding:6px 4px calc(6px + env(safe-area-inset-bottom,0));
      justify-content:space-around;gap:0;
      overflow-x:auto;-webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .bottom-nav::-webkit-scrollbar{display:none;}
    .bottom-nav .navtab{
      flex:1 1 0;min-width:0;flex-direction:column;gap:2px;
      padding:8px 4px;border-radius:8px;
    }
    .bottom-nav .navtab .nav-icon svg{width:22px;height:22px;}
    .bottom-nav .navtab .nav-label{
      position:static;width:auto;height:auto;overflow:hidden;clip:auto;
      font-size:10.5px;font-weight:650;white-space:nowrap;
      text-overflow:ellipsis;max-width:100%;
    }
    .bottom-nav .navtab.active{background:var(--hover-bg);}
    .nav-badge{top:0;right:calc(50% - 14px);}
    .main-content{padding-bottom:84px;}
    main{padding:18px 12px 50px;max-width:100%;}
    .top-bar{padding:10px 12px;}
  }

  /* Desktop lebar: dock lega dengan label penuh */
  @media (min-width: 1024px){
    .bottom-nav{padding-top:8px;padding-bottom:8px;justify-content:center;gap:4px;}
    .bottom-nav .navtab{
      flex:0 1 auto;flex-direction:row;gap:9px;padding:14px 20px;border-radius:10px 10px 0 0;
    }
    .bottom-nav .navtab .nav-icon svg{width:26px;height:26px;}
    .bottom-nav .navtab .nav-label{
      position:static;width:auto;height:auto;overflow:visible;clip:auto;
      font-size:13.5px;font-weight:650;white-space:nowrap;
    }
    .bottom-nav .navtab.active{background:var(--hover-bg);}
    .nav-badge{top:6px;right:8px;}
    .main-content{padding-bottom:96px;}
  }

  /* Modal popup */
  .app-modal{
    display:none !important;
    position:fixed;inset:0;z-index:2000;
    align-items:center;justify-content:center;
    padding:16px;
    background:rgba(20,28,24,.5);
    backdrop-filter:blur(3px);
  }
  .app-modal.show{
    display:flex !important;
  }
  .app-modal-card{
    background:var(--card-bg,#fff);
    color:var(--ink);
    border-radius:14px;
    border:1px solid var(--line,#d5ddd8);
    width:100%;max-width:520px;
    max-height:min(90vh,720px);
    overflow:auto;
    padding:20px 20px 16px;
    box-shadow:0 20px 50px rgba(0,0,0,.22);
  }
  .app-modal-card h3{margin:0 0 4px;font-size:1.1rem;}
  .app-modal-head{
    display:flex;align-items:flex-start;justify-content:space-between;
    gap:12px;margin-bottom:14px;
  }
  .app-modal-close{
    width:auto !important;margin:0 !important;padding:6px 12px !important;
    font-size:13px !important;font-weight:600 !important;
    background:var(--card-bg,#fff) !important;
    color:var(--text-muted,#5c655f) !important;
    border:1px solid var(--line,#d5ddd8) !important;
    border-radius:8px !important;cursor:pointer;
    flex-shrink:0;
  }
  .app-modal-close:hover{
    background:var(--hover-bg,#eef5f1) !important;
    color:var(--ink) !important;
  }
  .app-modal-card button[type="submit"]{
    width:100%;
  }


  @media print {
    body * { visibility: hidden !important; }
    #label-print-root, #label-print-root * { visibility: visible !important; }
    #label-print-root {
      position: absolute; left: 0; top: 0; width: 100%;
    }
  }

  /* Slider posisi barcode label thermal */
  input[type="range"].lbl-range{
    -webkit-appearance:none;appearance:none;
    width:100%;height:8px;padding:0;margin:10px 0 4px;
    border:none;border-radius:999px;background:var(--line);
    outline:none;cursor:pointer;
  }
  input[type="range"].lbl-range::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:20px;height:20px;border-radius:50%;
    background:var(--teal);border:2px solid #fff;
    box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer;
  }
  input[type="range"].lbl-range::-moz-range-thumb{
    width:20px;height:20px;border-radius:50%;
    background:var(--teal);border:2px solid #fff;cursor:pointer;
  }
  .lbl-pos-box{
    border:1px solid var(--line);border-radius:10px;
    background:var(--cream);padding:14px 16px;margin:12px 0 16px;
  }
  .lbl-pos-box > p{margin:0 0 12px;font-size:13px;font-weight:650;color:var(--ink);}

  /* ===== AI Assistant ===== */
  #ai-fab{
    position:fixed;right:18px;bottom:88px;z-index:9998;
    width:56px;height:56px;border-radius:50%;border:none;
    background:var(--teal);color:#fff;font-size:22px;cursor:pointer;
    box-shadow:0 6px 20px rgba(29,92,83,.35);
  }
  #ai-fab:hover{background:var(--teal-dark);}
  #ai-panel{
    position:fixed;right:18px;bottom:156px;z-index:9999;
    width:min(400px,calc(100vw - 24px));height:min(520px,calc(100vh - 180px));
    background:#fff;border:1px solid var(--line);border-radius:16px;
    box-shadow:0 12px 40px rgba(0,0,0,.22);display:none;flex-direction:column;overflow:hidden;
  }
  #ai-panel.open{display:flex !important;visibility:visible !important;opacity:1 !important;}
  #ai-panel-head{
    padding:12px 14px;background:var(--teal);color:#fff;
    display:flex;align-items:center;justify-content:space-between;gap:8px;
  }
  #ai-panel-head h3{margin:0;font-size:15px;font-weight:650;}
  #ai-panel-head button{background:transparent;border:none;color:#fff;cursor:pointer;font-size:18px;}
  #ai-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;background:#f7f5ef;}
  .ai-bubble{max-width:92%;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.45;white-space:pre-wrap;}
  .ai-bubble.user{align-self:flex-end;background:var(--teal);color:#fff;border-bottom-right-radius:4px;}
  .ai-bubble.bot{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--ink);}
  .ai-draft{
    align-self:flex-start;width:100%;background:#fff;border:1px solid var(--teal);
    border-radius:12px;padding:12px;font-size:12.5px;
  }
  .ai-draft h4{margin:0 0 8px;font-size:13px;color:var(--teal-dark);}
  .ai-draft pre{margin:0 0 10px;white-space:pre-wrap;font-family:ui-monospace,monospace;font-size:12px;background:#f3f1ea;padding:8px;border-radius:8px;}
  .ai-draft-actions{display:flex;gap:8px;flex-wrap:wrap;}
  .ai-draft-actions button{flex:1;min-width:100px;}
  #ai-input-row{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line);background:#fff;align-items:center;}
  #ai-input-row input{flex:1;margin:0;}
  #ai-input-row button{width:auto;padding:10px 12px;margin:0;}
  #ai-mic.listening{background:#a8402f !important;color:#fff !important;}
  @media (max-width:640px){
    #ai-fab{bottom:72px;right:12px;}
    #ai-panel{right:8px;left:8px;width:auto;bottom:140px;}
  }

/* ================= sprint6-ui.css ================= */
/* =====================================================================
   SPRINT 6 — UI/UX MODERN REFRESH
   Load setelah style utama di index.html
   ===================================================================== */

/* ============ 1. FONT INTER (Google Fonts) ============ */

/* ============ 2. CSS VARIABLES ============ */
:root {
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Warna dasar (sesuai brand) */
  --cream: #f7f5ef;
  --ink: #1f2b28;
  --teal: #1d5c53;
  --teal-dark: #123f39;
  --teal-light: #e8f4f0;
  --sage: #a9c2ab;
  --line: #dcd6c8;
  --danger: #a8402f;
  --warning: #8a6d1c;
  --success: #2e6b2e;
  --info: #2c5670;

  --card-bg: #ffffff;
  --input-bg: #fdfcf9;
  --text-muted: #7a8279;
  --text-muted-2: #6b7570;
  --hover-bg: #f0ede3;
  --row-line: #eee8db;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* Border radius */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(31,43,40,0.04);
  --shadow-sm: 0 1px 3px rgba(31,43,40,0.06), 0 1px 2px rgba(31,43,40,0.04);
  --shadow: 0 4px 12px rgba(31,43,40,0.08), 0 2px 4px rgba(31,43,40,0.04);
  --shadow-md: 0 8px 24px rgba(31,43,40,0.10), 0 4px 8px rgba(31,43,40,0.05);
  --shadow-lg: 0 16px 40px rgba(31,43,40,0.12), 0 8px 16px rgba(31,43,40,0.06);

  /* Transition */
  --t-fast: 0.15s ease;
  --t-normal: 0.25s ease;
}

[data-theme="dark"] {
  --cream: #141917;
  --ink: #e8ece9;
  --teal: #49b2a0;
  --teal-dark: #7fd6c5;
  --teal-light: #1a2b28;
  --sage: #24413a;
  --line: #33413c;
  --card-bg: #1c2320;
  --input-bg: #181f1c;
  --text-muted: #93a099;
  --text-muted-2: #8b988f;
  --hover-bg: #232b27;
  --row-line: #2a332e;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.5);
}

/* ============ 3. GLOBAL RESET & BASE ============ */
body {
  font-family: var(--font-main);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4 {
  font-family: var(--font-main);
  letter-spacing: -0.02em;
}

/* ============ 4. HEADER & TOP BAR ============ */
.top-bar {
  padding: var(--sp-3) var(--sp-5);
  box-shadow: var(--shadow-xs);
  border-bottom: none;
}

.top-bar .brand-name {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.role-pill {
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-xs);
}

.logout-link {
  font-weight: 600;
  transition: all var(--t-fast);
  box-shadow: var(--shadow-xs);
}
.logout-link:hover {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.icon-btn {
  box-shadow: var(--shadow-xs);
  transition: all var(--t-fast);
}
.icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--teal);
}

/* ============ 5. MAIN CONTENT ============ */
main {
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
}
main h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: var(--sp-1);
}
main .lead {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: var(--sp-6);
}

/* ============ 6. CARDS / PANEL ============ */
.panel {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-normal);
}
.panel:hover {
  box-shadow: var(--shadow);
}

.panel h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--row-line);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ============ 7. BUTTONS ============ */
button {
  font-family: var(--font-main);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: all var(--t-fast);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.mini-btn, .export-btn, .subtab, .pager button {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.export-btn {
  border-width: 1.5px;
  padding: 9px 16px;
  font-size: 13px;
}

/* ============ 8. FORM INPUTS ============ */
input, select, textarea {
  font-family: var(--font-main);
  font-size: 14px;
  border-radius: var(--radius);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  border: 1.5px solid var(--line);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-light);
  outline: none;
}

label {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 12.5px;
  color: var(--text-muted-2);
  margin-bottom: var(--sp-2);
}

.form-row {
  gap: var(--sp-5);
  margin-bottom: var(--sp-2);
}

/* ============ 9. SUB-TABS ============ */
.subnav {
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  padding: var(--sp-1);
  background: var(--hover-bg);
  border-radius: var(--radius);
  display: inline-flex;
  flex-wrap: wrap;
}

.subtab {
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted-2);
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: all var(--t-fast);
}
.subtab:hover {
  background: var(--card-bg);
  color: var(--teal);
  box-shadow: none;
  transform: none;
}
.subtab.active {
  background: var(--card-bg);
  color: var(--teal);
  box-shadow: var(--shadow-xs);
}

/* ============ 10. TABLES ============ */
.table-scroll {
  border-radius: var(--radius);
  border: 1px solid var(--row-line);
  overflow: auto;
  background: var(--card-bg);
}

.data-table {
  font-size: 13.5px;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table thead th {
  background: var(--hover-bg);
  color: var(--text-muted-2);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}

.data-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--row-line);
  vertical-align: middle;
}

.data-table tbody tr {
  transition: background var(--t-fast);
}
.data-table tbody tr:hover {
  background: var(--hover-bg);
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}
.data-table tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.01);
}
[data-theme="dark"] .data-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}

.data-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color var(--t-fast);
}
.data-table th.sortable:hover {
  color: var(--teal);
}

/* ============ 11. MODULE CARDS (Ringkasan) ============ */
.module-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition: all var(--t-normal);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.module-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--sage));
  opacity: 0;
  transition: opacity var(--t-normal);
}
.module-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--teal);
}
.module-card:hover::before {
  opacity: 1;
}

.module-card .tag {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--teal);
  background: var(--teal-light);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  display: inline-block;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

.module-card h3 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-1);
  color: var(--ink);
}

.module-card p {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
}

#card-bahanbaku h3, #card-produksi h3, #card-pelabelan h3,
#card-distribusi h3, #card-finance h3, #card-perhatian h3 {
  color: var(--teal-dark);
}

/* ============ 12. STATUS BADGES ============ */
.status-badge {
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
}

/* ============ 13. SUMMARY / TOTAL ============ */
.summary-row {
  padding: var(--sp-3) 0;
  font-size: 14px;
}
.summary-row.total {
  font-weight: 800;
  font-size: 16px;
  padding-top: var(--sp-4);
  margin-top: var(--sp-3);
}

/* ============ 14. EMPTY STATE ============ */
.table-loading {
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--text-muted);
  font-size: 13.5px;
  font-style: italic;
}

/* ============ 15. BOTTOM NAV ============ */
.bottom-nav {
  box-shadow: 0 -2px 12px rgba(31,43,40,0.06);
  border-top: 1px solid var(--line);
}

.bottom-nav .navtab {
  font-family: var(--font-main);
  font-weight: 600;
  transition: all var(--t-fast);
  position: relative;
}
.bottom-nav .navtab.active {
  color: var(--teal);
}
.bottom-nav .navtab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  background: var(--teal);
  border-radius: 0 0 3px 3px;
}

/* ============ 16. MODAL ============ */
.app-modal-card {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: none;
  animation: modalIn 0.2s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.app-modal-card h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ============ 17. TOAST ============ */
.toast {
  border-radius: var(--radius);
  font-weight: 500;
  box-shadow: var(--shadow-md);
}

/* ============ 18. SEARCH INPUT ============ */
.search-row input[type="search"] {
  border-radius: var(--radius);
  padding: 9px 14px;
}

/* ============ 19. PAGER ============ */
.pager button {
  border-radius: var(--radius-sm);
  font-weight: 600;
}

/* ============ 20. RESPONSIVE ============ */
@media (max-width: 900px) {
  main {
    padding: var(--sp-4) var(--sp-4) var(--sp-8);
  }
  main h2 { font-size: 22px; }
  main .lead { font-size: 13px; }

  .panel {
    padding: var(--sp-4);
    border-radius: var(--radius);
    margin-bottom: var(--sp-4);
  }
  .panel h3 {
    font-size: 15px;
    margin-bottom: var(--sp-3);
  }

  .module-card { padding: var(--sp-4); }
  .module-card h3 { font-size: 22px; }

  /* Subnav jadi horizontal scroll */
  .subnav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--sp-1);
    width: 100%;
  }
  .subnav::-webkit-scrollbar { display: none; }
  .subtab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 14px;
    font-size: 12.5px;
  }

  /* Tabel lebih compact */
  .data-table thead th { padding: 10px 12px; font-size: 11px; }
  .data-table tbody td { padding: 10px 12px; font-size: 13px; }
}

/* ============ 21. MOBILE — CARD VIEW UNTUK TABEL ============ */
@media (max-width: 640px) {
  /* Tabel dengan class .responsive-cards jadi card view */
  .data-table.responsive-cards {
    display: block;
  }
  .data-table.responsive-cards thead {
    display: none;
  }
  .data-table.responsive-cards tbody,
  .data-table.responsive-cards tr,
  .data-table.responsive-cards td {
    display: block;
    width: 100%;
  }
  .data-table.responsive-cards tr {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: var(--sp-3);
    padding: var(--sp-3);
    box-shadow: var(--shadow-xs);
  }
  .data-table.responsive-cards tbody tr:hover {
    background: var(--card-bg);
  }
  .data-table.responsive-cards td {
    border: none;
    padding: 6px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    font-size: 13px;
  }
  .data-table.responsive-cards td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted-2);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    min-width: 80px;
  }
  .data-table.responsive-cards td:first-child {
    border-bottom: 1px solid var(--row-line);
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-2);
    font-weight: 700;
    font-size: 14px;
  }
  .data-table.responsive-cards td:first-child::before {
    display: none;
  }
  .data-table.responsive-cards td.row-actions {
    padding-top: var(--sp-2);
    margin-top: var(--sp-2);
    border-top: 1px solid var(--row-line);
    justify-content: flex-end;
  }
}

/* ============ 22. UTILITY ============ */
.text-muted { color: var(--text-muted); }
.text-teal { color: var(--teal); }
.text-danger { color: var(--danger); }
.font-mono { font-family: var(--font-mono); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }