/* ═══════════════════════════════════════════════════════════════════
   Portal Kemitraan Pertashop — komponen bersama
   Tombol, penanda, isian, pesan, kartu, tabel. Dimuat setelah tema.css,
   sebelum gaya.css milik tiap muka. Keduanya (panel & portal mitra)
   memakai persis definisi ini; gaya.css hanya menambah yang khas.

   Setiap komponen punya keadaan lengkap: diam, disentuh, ditekan,
   fokus (keyboard), mati, dan sibuk. Tidak ada yang setengah.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Dasar ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}   /* clip, bukan hidden: tidak mematikan sticky */
body{margin:0;font:400 var(--t-base)/var(--lh-baca) var(--sans);color:var(--ink);
  background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--biru);text-decoration:none;text-underline-offset:2px}
a:hover{text-decoration:underline}
.btn:hover,.tag:hover,.tb-link:hover,.stat a:hover{text-decoration:none}
:focus-visible{outline:none;box-shadow:var(--fokus)}
::selection{background:var(--biru-tint)}

/* Label kecil kapital — satu definisi, dipakai di mana pun */
.label-mono,.kartu-hd,th{font:var(--label-mono);letter-spacing:var(--label-spasi);
  text-transform:uppercase;color:var(--muted)}

/* ── Tombol ────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:44px;padding:0 var(--s-4);border-radius:var(--r-ctl);
  font:600 var(--t-md)/1 var(--sans);letter-spacing:.005em;white-space:nowrap;
  color:var(--biru-tua);background:var(--paper);border:1px solid var(--biru-tua);
  cursor:pointer;text-decoration:none;user-select:none;
  transition:background var(--cepat) var(--lekuk),color var(--cepat) var(--lekuk),
             box-shadow var(--cepat) var(--lekuk),transform var(--cepat) var(--lekuk)}
.btn:hover{background:var(--biru-tua);color:#fff;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{box-shadow:var(--fokus)}
.btn.primary{background:var(--biru-tua);color:#fff}
.btn.primary:hover{background:var(--biru-gelap);border-color:var(--biru-gelap)}
.btn.halus{border-color:var(--rule);color:var(--ink-2)}
.btn.halus:hover{background:var(--kertas);color:var(--ink);border-color:var(--rule)}
.btn.bahaya{border-color:var(--merah);color:var(--merah-teks)}
.btn.bahaya:hover{background:var(--merah);border-color:var(--merah);color:#fff}
.btn.mini{min-height:36px;padding:0 var(--s-3);font-size:var(--t-sm)}
.btn.besar{min-height:50px;padding:0 var(--s-5);font-size:var(--t-base)}
.btn.penuh{width:100%}

/* Mati: tampak mati, tidak menjanjikan apa pun */
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;
  box-shadow:none}
.btn:disabled:hover{background:var(--paper);color:var(--biru-tua)}
.btn.primary:disabled:hover{background:var(--biru-tua);color:#fff}

/* Sibuk: teks tetap terbaca, ada putaran kecil, tidak bisa ditekan dua kali */
.btn[aria-busy="true"]{pointer-events:none;position:relative;color:transparent}
.btn[aria-busy="true"]::after{content:"";position:absolute;width:16px;height:16px;
  border-radius:50%;border:2px solid currentColor;border-color:#fff #fff #fff transparent;
  animation:putar .7s linear infinite}
.btn:not(.primary)[aria-busy="true"]::after{border-color:var(--biru-tua) var(--biru-tua) var(--biru-tua) transparent}
@keyframes putar{to{transform:rotate(360deg)}}

/* ── Penanda status ────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:0 var(--s-2);
  border-radius:var(--r-pill);font:var(--label-mono);letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;border:1px solid transparent;
  background:var(--kertas);color:var(--muted);border-color:var(--rule)}
.tag.biru{background:var(--biru-tint);color:var(--biru-teks);border-color:#C6DBF0}
.tag.hijau{background:var(--hijau-tint);color:var(--hijau-teks);border-color:#B8DEC7}
.tag.emas{background:var(--emas-tint);color:var(--emas-teks);border-color:#EBD6A6}
.tag.merah{background:var(--merah-tint);color:var(--merah-teks);border-color:#F3CFD2}
.tag.abu{background:var(--kertas);color:var(--muted);border-color:var(--rule)}
.tag svg{flex:0 0 auto}

/* Penanda yang sekaligus tombol: bentuk pil, huruf biasa, dapat ditekan */
button.tag,.tag.tombol{cursor:pointer;font:500 var(--t-sm)/1 var(--sans);letter-spacing:0;
  text-transform:none;min-height:28px;padding:0 var(--s-3);
  transition:box-shadow var(--cepat),transform var(--cepat)}
button.tag:hover{box-shadow:0 1px 4px rgba(18,32,63,.16)}
button.tag:active{transform:translateY(1px)}
button.tag:focus-visible{box-shadow:var(--fokus)}

/* Petak warna kecil untuk legenda */
.petak-warna{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;
  background:var(--muted)}
.petak-warna.hijau{background:var(--hijau)} .petak-warna.emas{background:var(--emas)}
.petak-warna.merah{background:var(--merah)} .petak-warna.biru{background:var(--biru)}

/* ── Pesan umpan balik ─────────────────────────────────────────── */
.pesan{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);
  border-radius:var(--r-ctl);font-size:var(--t-md);line-height:var(--lh-baca);
  margin-bottom:var(--s-4);border:1px solid var(--rule);background:var(--paper);color:var(--ink-2)}
.pesan.ok{background:var(--hijau-tint);color:var(--hijau-teks);border-color:#B8DEC7}
.pesan.bad{background:var(--merah-tint);color:var(--merah-teks);border-color:#F3CFD2}
.pesan.info{background:var(--biru-tint);color:var(--biru-teks);border-color:#C6DBF0}
.pesan.peringatan{background:var(--emas-tint);color:var(--emas-teks);border-color:#EBD6A6}
.pesan strong,.pesan b{font-weight:600}

/* ── Isian ─────────────────────────────────────────────────────── */
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s-4)}
.fld label{font-size:var(--t-md);font-weight:600;color:var(--ink)}
.fld .hint,.hint{font-size:var(--t-sm);color:var(--muted);line-height:var(--lh-baca)}
.fld input:not([type=checkbox]):not([type=radio]):not([type=file]),
.fld select,.fld textarea,
input.isian,select.isian,textarea.isian{
  width:100%;min-height:40px;padding:var(--s-2) var(--s-3);
  font:400 var(--t-base)/1.4 var(--sans);color:var(--ink);
  background:var(--field);border:1px solid var(--rule);border-radius:var(--r-ctl);
  transition:border-color var(--cepat),box-shadow var(--cepat),background var(--cepat)}
.fld textarea{min-height:88px;line-height:var(--lh-baca);resize:vertical}
.fld select{appearance:none;-webkit-appearance:none;padding-right:36px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236B7C99' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:#B9C6D8}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;background:#fff;
  border-color:var(--biru);box-shadow:var(--fokus)}
.fld input:disabled,.fld select:disabled,.fld textarea:disabled{opacity:.6;cursor:not-allowed}
.fld input[aria-invalid="true"],.fld.salah input,.fld.salah select{border-color:var(--merah);
  background:var(--merah-tint)}
.fld .salah-ket{font-size:var(--t-sm);color:var(--merah-teks)}
.fld ::placeholder{color:#9AA8BE}

/* Pilih berkas: tombol bawaan peramban diseragamkan */
input[type=file]{font:400 var(--t-sm) var(--sans);color:var(--muted);max-width:100%}
input[type=file]::file-selector-button{margin:0 var(--s-2) 0 0;padding:6px var(--s-3);
  font:600 var(--t-sm)/1 var(--sans);color:var(--ink-2);background:var(--paper);
  border:1px solid var(--rule);border-radius:6px;cursor:pointer;
  transition:border-color var(--cepat),color var(--cepat)}
input[type=file]::file-selector-button:hover{border-color:var(--biru);color:var(--biru)}
input[type=file]:focus-visible{box-shadow:var(--fokus);border-radius:6px}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-4)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s-4)}
@media (max-width:760px){.grid2,.grid3{grid-template-columns:1fr}}

/* ── Kartu ─────────────────────────────────────────────────────── */
.kartu{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);
  box-shadow:var(--shadow);margin-bottom:var(--s-4);overflow:hidden}
.kartu-hd{padding:var(--s-3) var(--s-5);border-bottom:1px solid var(--rule-soft);
  background:var(--kertas)}
.kartu-bd{padding:var(--s-5)}
.kartu-bd > :last-child{margin-bottom:0}
.kosong{padding:var(--s-10) var(--s-4);text-align:center;color:var(--muted);
  font-size:var(--t-md);line-height:var(--lh-baca)}
.kosong b{display:block;color:var(--ink);margin-bottom:var(--s-1)}

/* ── Tabel ─────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse}
th,td{padding:var(--s-3) var(--s-4);text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--rule-soft);font-size:var(--t-md)}
th{background:var(--kertas);white-space:nowrap;font:var(--label-mono);
  letter-spacing:var(--label-spasi);text-transform:uppercase;color:var(--muted)}
tbody tr{transition:background var(--cepat)}
tbody tr:hover{background:#FAFBFD}
td small{display:block;color:var(--muted);font-size:var(--t-xs);margin-top:2px}
td .no{font-family:var(--mono);font-size:var(--t-sm);color:var(--biru-tua)}
td form{margin:0}
td.urut{font-family:var(--mono);font-size:var(--t-sm);color:var(--muted);text-align:right;
  padding-right:var(--s-4);font-variant-numeric:tabular-nums}

/* ── Statistik ringkas (angka besar + label) ───────────────────── */
.stat{display:flex;gap:var(--s-8);flex-wrap:wrap}
.stat > div{min-width:96px}
.stat b{display:block;font:700 var(--t-2xl)/1 var(--disp);color:var(--ink)}
.stat span{display:block;margin-top:6px;font:var(--label-mono);letter-spacing:var(--label-spasi);
  text-transform:uppercase;color:var(--muted)}

/* ── Bagian lipat ──────────────────────────────────────────────── */
details.kartu > summary{list-style:none;cursor:pointer;padding:var(--s-3) var(--s-5);
  display:flex;align-items:center;gap:var(--s-2);font:var(--label-mono);
  letter-spacing:var(--label-spasi);text-transform:uppercase;color:var(--muted);
  transition:color var(--cepat)}
details.kartu > summary::-webkit-details-marker{display:none}
details.kartu > summary::before{content:"";width:7px;height:7px;flex:0 0 auto;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);transition:transform var(--cepat)}
details.kartu[open] > summary::before{transform:rotate(45deg)}
details.kartu > summary:hover{color:var(--biru)}
details.kartu > summary:focus-visible{box-shadow:inset var(--fokus)}

/* ── Lewati ke isi (pembaca layar & keyboard) ──────────────────── */
.lewati{position:absolute;left:-9999px;top:var(--s-2);z-index:100;padding:var(--s-2) var(--s-3);
  background:var(--ink);color:#fff;border-radius:var(--r-ctl);font-weight:600}
.lewati:focus{left:var(--s-2)}

/* ── Hanya pembaca layar ───────────────────────────────────────── */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* ═══════════════════════════════════════════════════════════════════
   Layar sempit
   Dua hal yang tidak mungkin dipaksa muat 390 px: menu bar atas dan
   tabel banyak kolom. Keduanya bergulir mendatar di dalam wadahnya
   sendiri, bukan meluapkan seluruh halaman.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .tb-in{padding:8px 12px;gap:8px;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .tb-in::-webkit-scrollbar{display:none}
  .tb-in > *{flex:0 0 auto;scroll-snap-align:start}
  .tb-label{display:none}
  .tb-link{padding:6px 11px;font-size:12px}

  .kartu:has(> table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .kartu:has(> table) > table{min-width:600px}

  .judul h1{font-size:var(--t-2xl)}
}