/* ============================================================
     Bahasa visual: lavender lembut, kartu membulat tanpa garis.
     Nama variabel LAMA dipertahankan (--biru, --hijau, ...) karena dipakai
     langsung di dalam template JS di seluruh berkas ini; menggantinya berarti
     memburu ratusan pemakaian dan satu yang terlewat jadi warna hilang tanpa
     pesan. Yang berubah nilainya, bukan namanya.
     ============================================================ */
  :root{
    --bg:#f2f1fa; --panel:#fff; --line:#eceaf7; --teks:#1b1b32; --redup:#8b8ba7;
    --biru:#6c5ce7;        /* warna utama -- lavender, bukan biru lagi */
    --biru-lembut:#efecfe;
    --hijau:#0e9f6e; --merah:#e0455b; --kuning:#b07d17;
    --t1:#efecfe; --t2:#e6f6f0; --t3:#fdeef1;   /* corak kartu ringkasan */
    --radius:16px;
    --bayang:0 1px 2px rgba(27,27,50,.04), 0 10px 30px rgba(108,92,231,.06);
  }
  *{box-sizing:border-box}
  body{margin:0;font:14px/1.55 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
       background:var(--bg);color:var(--teks);-webkit-font-smoothing:antialiased}
  button{font:inherit;cursor:pointer;border:1px solid var(--line);background:#fff;
         padding:8px 14px;border-radius:11px;color:var(--teks)}
  button:hover{background:var(--biru-lembut);border-color:#ded8fb}
  button.utama{background:var(--biru);border-color:var(--biru);color:#fff;
               box-shadow:0 6px 16px rgba(108,92,231,.24)}
  button.utama:hover{background:#5b4bdc;border-color:#5b4bdc}
  button.bahaya{background:var(--merah);border-color:var(--merah);color:#fff}
  button.bahaya:hover{background:#c93c50;border-color:#c93c50}
  button:disabled{opacity:.45;cursor:not-allowed}
  input,select,textarea{font:inherit;padding:9px 11px;border:1px solid var(--line);
    border-radius:11px;background:#fff;width:100%;color:var(--teks)}
  input:focus,select:focus,textarea:focus{outline:2px solid #d9d2fb;outline-offset:0;border-color:#c9bffa}
  a{color:var(--biru)}

  /* ---- login ---- */
  #login{max-width:360px;margin:12vh auto;background:var(--panel);padding:32px;
    border-radius:22px;box-shadow:var(--bayang)}
  #login h1{margin:0 0 4px;font-size:21px;letter-spacing:-.01em}
  #login p{margin:0 0 22px;color:var(--redup);font-size:13px}
  #login label{display:block;margin-bottom:14px;font-size:13px;color:var(--redup)}
  #login input{margin-top:5px}

  /* ---- kerangka: rel kiri + panggung ---- */
  #app{display:flex;min-height:100vh}
  #rel{width:232px;flex:0 0 232px;background:var(--panel);padding:20px 14px;
    display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh}
  #rel .merek{display:flex;align-items:center;gap:9px;padding:2px 8px 0;
    font-weight:700;font-size:15px;letter-spacing:-.01em}
  #rel .merek i{width:26px;height:26px;border-radius:9px;background:var(--biru);
    display:inline-block;position:relative}
  #rel .merek i::after{content:"";position:absolute;inset:8px;border-radius:3px;background:#fff}
  .tab-pemisah{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--redup);padding:14px 12px 4px;font-weight:700}
  #rel .rel-bawah{margin-top:auto;display:flex;flex-direction:column;gap:6px}
  #rel .rel-bawah button{border:0;background:none;text-align:left;color:var(--redup);
    padding:9px 12px;border-radius:11px}
  #rel .rel-bawah button:hover{background:var(--bg);color:var(--teks)}

  #panggung{flex:1;min-width:0;display:flex;flex-direction:column}
  header{padding:22px 26px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  header .sapa{margin-right:auto}
  header h1{font-size:24px;margin:0;font-weight:700;letter-spacing:-.02em}
  header .sapa p{margin:2px 0 0;font-size:13px;color:var(--redup)}
  header .siapa{display:inline-flex;align-items:center;gap:8px;background:var(--panel);
    border-radius:999px;padding:5px 14px 5px 6px;font-size:13px;color:var(--teks);
    box-shadow:var(--bayang)}
  header .siapa::before{content:attr(data-inisial);width:26px;height:26px;border-radius:999px;
    background:var(--biru-lembut);color:var(--biru);display:grid;place-items:center;
    font-weight:700;font-size:12px}
  main{padding:0 26px 26px;flex:1}

  /* ---- kartu ringkasan ---- */
  .kartu{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px;
    margin-bottom:18px}
  .kartu>div{background:var(--panel);border-radius:var(--radius);padding:16px 18px;
    box-shadow:var(--bayang)}
  /* Corak menandai status yang paling sering dibaca, dan diikat ke NAMA
     statusnya -- bukan ke urutan kartu. Versi pertama memakai nth-child dan
     hasilnya justru mewarnai dua kartu yang isinya nol, sementara "Disetujui"
     dan "Dibayar" yang memuat seluruh uangnya tampil putih polos. */
  .kartu>div.k-disetujui{background:var(--t1)}
  .kartu>div.k-dibayar{background:var(--t2)}
  .kartu>div.k-diajukan{background:var(--t3)}
  .kartu .angka{font-size:24px;font-weight:700;margin-top:3px;letter-spacing:-.02em}
  .kartu .rp{font-size:12px;color:var(--redup)}
  .kartu .judul{font-size:11px;color:var(--redup);text-transform:uppercase;letter-spacing:.6px;
    font-weight:600}

  /* Kartu satu baris kerja: dipakai daftar mutasi belum cocok, kelompok PO,
     dan invoice. Dulu digambar lewat gaya inline yang menunjuk `--garis` --
     variabel yang tidak pernah ada, jadi selama ini semuanya memakai warna
     cadangan #ddd dan tampak abu-abu di tengah halaman lavender. */
  .kartu-baris{background:var(--panel);border-radius:14px;margin-bottom:10px;
    box-shadow:var(--bayang);overflow:hidden}
  .kartu-baris.putus{background:transparent;box-shadow:none;
    border:1px dashed #d9d5ef}
  .kartu-baris:hover{box-shadow:0 1px 2px rgba(27,27,50,.05),0 12px 30px rgba(108,92,231,.12)}

  /* ---- kotak umum (dipakai tab Pembelian & Penjualan) ---- */
  .kotak{background:var(--panel);border-radius:var(--radius);padding:18px;
    box-shadow:var(--bayang);margin-bottom:16px}
  .kotak h3{margin:0 0 4px;font-size:16px;letter-spacing:-.01em}

  /* ---- saringan ---- */
  .saring{background:var(--panel);border-radius:var(--radius);padding:14px 16px;
    display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr auto;gap:12px;
    margin-bottom:16px;align-items:end;box-shadow:var(--bayang)}
  .saring label{font-size:12px;color:var(--redup);display:block;margin-bottom:5px}

  /* ---- tabel ---- */
  .bungkus{background:var(--panel);border-radius:var(--radius);overflow-x:auto;
    box-shadow:var(--bayang)}
  table{border-collapse:collapse;width:100%;min-width:900px}
  th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);
    white-space:nowrap}
  th{font-size:11px;color:var(--redup);text-transform:uppercase;letter-spacing:.6px;
    background:var(--panel);position:sticky;top:0;font-weight:600}
  tbody tr{cursor:pointer}
  tbody tr:hover{background:var(--biru-lembut)}
  tbody tr:last-child td{border-bottom:0}
  td.rp{text-align:right;font-variant-numeric:tabular-nums}
  /* Lencana status: teks berwarna status, latar versi pucatnya. Dipakai
     color-mix supaya satu aturan melayani kelima status -- menuliskan latar
     tiap status satu per satu berarti lima tempat yang bisa lupa diperbarui. */
  .lencana{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;
    font-weight:600;color:var(--redup);
    background:color-mix(in srgb, currentColor 14%, #fff)}
  .s-draft{color:#9a9ab4} .s-diajukan{color:var(--kuning)}
  .s-disetujui{color:var(--biru)} .s-ditolak{color:var(--merah)}
  .s-dibayar{color:var(--hijau)}
  .kosong{padding:48px;text-align:center;color:var(--redup)}

  /* ---- panel detail ---- */
  #tirai{position:fixed;inset:0;background:rgba(27,27,50,.32);display:none;z-index:2}
  #tirai.buka{display:block}
  #detail{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--panel);
    overflow-y:auto;transform:translateX(100%);transition:transform .2s ease;z-index:3;
    border-radius:22px 0 0 22px;box-shadow:-20px 0 50px rgba(27,27,50,.12)}
  #detail.buka{transform:none}

  /* ---- panel Kelengkapan & proses ---- */
  #rangkaian{position:fixed;top:0;right:0;bottom:0;width:min(680px,100%);
    background:var(--bg);overflow-y:auto;transform:translateX(100%);
    transition:transform .2s ease;z-index:3;border-radius:22px 0 0 22px;
    box-shadow:-20px 0 50px rgba(27,27,50,.12)}
  #rangkaian.buka{transform:none}
  #rangkaian .isi{padding:22px;position:relative}
  .rk-kotak{background:var(--panel);border-radius:var(--radius);padding:18px;
    box-shadow:var(--bayang);margin-bottom:14px}
  .rk-eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--biru);font-weight:700;margin-bottom:4px}
  .rk-kepala h3{margin:0 0 2px;font-size:19px;letter-spacing:-.01em}
  .rk-posisi-utama{background:var(--biru-lembut);color:var(--teks);
    border-radius:12px;padding:11px 13px;font-size:13px;margin:12px 0}
  .ringkas-angka{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:10px;margin-bottom:14px}
  .ringkas-angka>div{background:var(--bg);border-radius:12px;padding:10px 12px}
  .ringkas-angka small{display:block;color:var(--redup);font-size:11px;
    letter-spacing:.04em;text-transform:uppercase}
  .ringkas-angka b{font-size:17px;font-variant-numeric:tabular-nums}
  .ringkas-angka b.sisa{color:var(--kuning)}
  .rk-daftar{border-top:1px solid var(--line)}
  .rk-baris{display:grid;grid-template-columns:26px 1fr auto auto;gap:10px;
    align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
  .rk-ikon{font-weight:700;text-align:center;line-height:1.4}
  .rk-label{font-size:13px;font-weight:600}
  .rk-posisi{font-weight:400;color:var(--redup);font-size:12px;margin-top:2px}
  .rk-status{font-size:12px;white-space:nowrap}
  .rk-aksi{display:flex;gap:6px}
  .rk-barang:empty{display:none}
  /* Padding kiri 36px sempat dipakai untuk meratakannya dengan label di
     atasnya, dan itu yang membuat kolom Qty & Jumlah terdorong keluar drawer.
     Tabel angka tidak boleh dikorbankan demi perataan hiasan. */
  .rk-barang{padding:2px 0 10px;overflow-x:auto}
  /* `min-width:auto` WAJIB di sini: ada aturan global `table{min-width:900px}`
     untuk tabel daftar yang memang lebar dan bergulir sendiri. Tanpa
     menimpanya, tabel barang ini melebar jadi persis 900 px di dalam panel
     512 px -- dan kolom Qty serta Jumlah terdorong ke luar layar. Diukur, bukan
     ditebak: tiga percobaan sebelumnya (colgroup, kurangi kolom, overflow-x)
     tidak menyentuh sebabnya sama sekali. */
  .rk-tabel{width:100%;min-width:auto;font-size:12px;border-collapse:collapse;
    table-layout:fixed}
  .rk-tabel th{text-align:left;font-weight:600;color:var(--redup);
    font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:4px 4px}
  .rk-tabel td{padding:4px 4px;border-top:1px solid var(--line);
    overflow-wrap:anywhere}
  .rk-tabel .ka{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
  .rk-tabel .redup{color:var(--redup)}
  .rk-tabel tfoot td{border-top:2px solid var(--line)}
  .rk-tabel col.c-qty{width:26%} .rk-tabel col.c-jml{width:30%}
  .rk-tabel .kecil{font-size:10px;line-height:1.3}
  .rk-tindakan{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .rk-alokasi{display:flex;justify-content:space-between;gap:12px;
    padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
  .kandidat{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
  .kandidat .redup{color:var(--redup)}
  .kandidat .kecil{font-size:12px;margin-top:2px}
  .kandidat-aksi{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
  .kandidat-aksi input[type=number]{max-width:150px}
  .kandidat-aksi input[type=text]{max-width:180px}
  button.tautan{border:0;background:none;color:var(--biru);padding:4px 2px;
    font-size:12px;text-decoration:underline}
  button.tautan:hover{background:none;color:#5b4bdc}
  #rangkaian .tutup{position:absolute;top:14px;right:16px;border:0;background:var(--panel);
    border-radius:999px;width:34px;height:34px;font-size:18px;line-height:1;z-index:1}
  @media (max-width:700px){
    .rk-baris{grid-template-columns:22px 1fr;row-gap:2px}
    .rk-status,.rk-aksi{grid-column:2}
  }
  #detail .isi{padding:24px}
  #detail h2{margin:0 0 2px;font-size:18px;letter-spacing:-.01em}
  #detail .nomor{color:var(--redup);font-size:13px;margin-bottom:18px}
  .baris{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
    border-bottom:1px solid var(--line);font-size:13px}
  .baris span:first-child{color:var(--redup)}
  .baris span:last-child{text-align:right}
  .seksi{margin-top:22px;margin-bottom:2px;font-size:11px;color:var(--redup);
    text-transform:uppercase;letter-spacing:.6px;font-weight:600}
  .aksi{margin-top:20px;display:flex;gap:8px;flex-wrap:wrap}
  .pesan{padding:11px 14px;border-radius:12px;font-size:13px;margin-top:12px}
  .pesan.salah{background:#fdeef1;color:var(--merah)}
  .pesan.benar{background:#e6f6f0;color:var(--hijau)}
  .catatan{background:var(--biru-lembut);padding:11px 14px;border-radius:12px;
    font-size:13px;margin-top:10px;color:#4a4370}
  /* Angka ringkasan bukan peringatan -- ia tidak perlu kotak. Dulu ikut
     memakai .catatan dan hasilnya dua kotak lavender bertumpuk yang sama
     mencoloknya, padahal yang satu penjelasan dan yang satu sekadar hitungan. */
  .ringkas{font-size:13px;color:var(--redup);margin:2px 0 12px}

  /* ---- form pengajuan ---- */
  #form,#kelola{position:fixed;top:0;right:0;bottom:0;width:min(640px,100%);
    background:var(--panel);overflow-y:auto;transform:translateX(100%);
    transition:transform .2s ease;z-index:3;border-radius:22px 0 0 22px;
    box-shadow:-20px 0 50px rgba(27,27,50,.12)}
  #kelola{z-index:4}
  #form.buka,#kelola.buka{transform:none}
  #form .isi,#kelola .isi{padding:24px}

  /* ---- navigasi brand ---- */
  .grid-brand{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
  .brand-kartu{background:var(--panel);border:0;border-radius:var(--radius);
    padding:18px;cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit;
    box-shadow:var(--bayang);transition:transform .12s ease}
  .brand-kartu:hover{transform:translateY(-2px);background:var(--panel)}
  .brand-kartu .kode{font-size:17px;font-weight:700;letter-spacing:-.01em}
  .brand-kartu .badan{font-size:12px;color:var(--redup);margin:2px 0 12px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .brand-kartu .angka-baris{display:flex;justify-content:space-between;font-size:12px;
    padding:5px 0;border-top:1px solid var(--line)}
  .brand-kartu .angka-baris span:last-child{font-variant-numeric:tabular-nums;font-weight:700}
  .jalur{font-size:13px;color:var(--redup);margin-bottom:14px;display:flex;
    align-items:center;gap:8px;flex-wrap:wrap}
  .jalur b{color:var(--teks);font-size:15px}

  /* ---- tab: kini tegak di rel kiri ---- */
  .tab{display:flex;flex-direction:column;gap:3px}
  .tab button{border:0;background:none;border-radius:11px;padding:10px 12px;
    color:var(--redup);text-align:left;width:100%;display:flex;align-items:center;
    justify-content:space-between;gap:8px}
  .tab button:hover{background:var(--bg)}
  .tab button.aktif{background:var(--biru-lembut);color:var(--biru);font-weight:600}
  .tab .lencana-n{background:var(--biru);color:#fff;border-radius:999px;
    padding:1px 8px;font-size:11px;font-weight:700}

  /* ---- bilah periode ---- */
  .periode{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
  .periode .pil{border:0;border-radius:999px;padding:7px 15px;
    background:var(--panel);font-size:13px;box-shadow:var(--bayang)}
  .periode .pil.aktif{background:var(--biru);color:#fff;font-weight:600;
    box-shadow:0 6px 16px rgba(108,92,231,.24)}
  .periode input[type=month]{width:auto;padding:6px 10px;border-radius:999px}
  .periode .cap{font-size:12px;color:var(--redup);margin-left:4px}

  #form h2{margin:0 0 18px;font-size:18px;letter-spacing:-.01em}
  .kolom{margin-bottom:14px}
  .kolom label{display:block;font-size:12px;color:var(--redup);margin-bottom:5px}
  .dua{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .rincian{background:var(--bg);border-radius:12px;padding:12px;margin-bottom:9px;
    display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:9px;align-items:end}
  /* Baris barang PR/PO punya satu kolom lebih (Satuan). Tanpa aturan sendiri,
     kolom keempat mendorong tombol hapus turun ke baris berikutnya dan
     barisnya terbaca seperti dua baris terpisah. */
  .rincian.empat{grid-template-columns:2fr .8fr .8fr 1.2fr auto}
  @media(max-width:700px){
    .rincian, .rincian.empat{grid-template-columns:1fr 1fr;row-gap:8px}
    .rincian>button, .rincian.empat>button{grid-column:2;justify-self:end}
  }
  .total{text-align:right;font-size:17px;font-weight:700;margin:12px 0}
  .tutup{position:absolute;top:16px;right:18px;border:0;background:none;font-size:22px;
    line-height:1;padding:4px;color:var(--redup)}

  @media(max-width:980px){
    #app{flex-direction:column}
    #rel{width:auto;flex:none;height:auto;position:static;flex-direction:row;
      align-items:center;gap:12px;overflow-x:auto;padding:12px 16px}
    #rel .merek{padding:0}
    .tab{flex-direction:row}
    .tab button{width:auto}
    #rel .rel-bawah{margin-top:0;margin-left:auto;flex-direction:row}
    header{padding:16px}
    main{padding:0 16px 16px}
  }
  @media(max-width:820px){
    .saring{grid-template-columns:1fr 1fr}
    header h1{font-size:20px}
  }