/* PERAPIAN TAMPILAN LAYAR PESANAN — hanya di bawah .xh-pesanan.
 *
 * Tidak ada satu pun aturan di berkas ini yang berlaku di luar layar
 * Pesanan Form / Data Tertinggal: semuanya bersarang di kelas akar.
 * Mengikuti pola yang sudah ada di proyek ini (dashboard-refinement.css,
 * inbox-refinement.css, rekon-refinement.css).
 *
 * `!important` dipakai karena komponennya sengaja memakai gaya inline —
 * lihat catatan di kepala komponen: kelas Tailwind arbitrer tidak ada di
 * CSS ter-build, jadi gaya inline adalah satu-satunya cara yang bekerja
 * di sana, dan inline hanya bisa dikalahkan dengan !important.
 *
 * Angka di bawah bukan kira-kira; diukur pada bundel yang sedang tayang:
 *   - tinggi kendali di batang atas: 15 nilai berbeda (16..83px)  -> 36px
 *   - ukuran font: 11 nilai berbeda di desktop, 13 di HP
 *   - tombol "Arsip" 36px/r8/12.5px di tengah kendali 38px/r10/13px
 *   - di 390px: 642px harus digulir sebelum pesanan pertama terlihat
 */

.xh-pesanan{
  --xh-garis:#e5e8ee;
  --xh-garis2:#f1f3f6;
  --xh-teks:#0f172a;
  --xh-redup:#64748b;
  --xh-redup2:#94a3b8;
  --xh-utama:#059669;
  --xh-tinggi:36px;
  --xh-radius:9px;
  /* Angka rata satu sama lain di kolom uang — ini yang paling terasa saat
     mata menyusuri kolom Total dari atas ke bawah. */
  font-variant-numeric:tabular-nums;
}
.xh-pesanan *{box-sizing:border-box}

/* Satu keadaan fokus untuk seluruh layar. Sebelumnya bawaan peramban,
   yang di atas latar putih nyaris tak terlihat. */
.xh-pesanan :is(button,select,input,a,[tabindex]):focus-visible{
  outline:2px solid var(--xh-utama);
  outline-offset:2px;
  border-radius:8px;
}

/* ---------------- KEPALA ---------------- */
.xh-kepala{margin-bottom:16px!important}
.xh-kepala h1{font-weight:700!important;letter-spacing:-.5px!important}
.xh-kepala button{
  height:var(--xh-tinggi)!important;
  border-radius:var(--xh-radius)!important;
  font-size:12.5px!important;
  font-weight:600!important;
  border-color:var(--xh-garis)!important;
}

/* ---------------- BARIS TANGGAL ---------------- */
.xh-tanggal{
  border-radius:12px!important;
  padding:8px 10px!important;
  margin-bottom:10px!important;
  border-color:var(--xh-garis)!important;
}
.xh-tanggal button{
  height:32px!important;
  border-radius:8px!important;
  font-size:12.5px!important;
  font-weight:600!important;
}
/* Kolom tanggal bawaan peramban tampil mentah di antara kendali lain. */
.xh-tanggal input[type="date"]{
  height:32px!important;
  border:1px solid var(--xh-garis)!important;
  border-radius:8px!important;
  padding:0 8px!important;
  font-size:12.5px!important;
  color:var(--xh-teks)!important;
  background:#fff!important;
}

/* ---------------- BATANG RINGKASAN ---------------- */
.xh-ringkas{
  border-radius:12px!important;
  margin-bottom:10px!important;
  box-shadow:0 1px 2px rgba(16,24,40,.10)!important;
}
/* HANYA anak langsung — yaitu tombol "Lihat rincian lengkap".
   JANGAN `.xh-ringkas button`: tiap sel metrik di dalamnya juga <button>
   (memang bisa diklik untuk membuka rinciannya), dan memaksanya setinggi
   34px membuat isinya yang ~55px saling menimpa. Terlihat langsung pada
   tangkapan layar uji — label baris kedua tercetak di atas keterangan
   baris pertama. */
.xh-ringkas > button{
  height:34px!important;
  border-radius:8px!important;
  font-size:12.5px!important;
  font-weight:600!important;
}

/* ---------------- BARIS TINDAKAN MASSAL ---------------- */
.xh-tindakan{border-radius:10px!important;padding:9px 11px!important}
.xh-tindakan button{
  height:32px!important;
  border-radius:8px!important;
  font-size:12px!important;
  font-weight:600!important;
}

/* ---------------- BATANG PENYARING ----------------
   Dijadikan satu panel, bukan kendali yang mengambang lepas. Sebelumnya
   delapan kendali melayang langsung di atas latar halaman dengan tinggi
   38/36 dan radius 10/8 bercampur, jadi tepi bawahnya bergerigi. */
.xh-toolbar{
  background:#fff;
  border:1px solid var(--xh-garis);
  border-radius:12px;
  padding:10px;
  gap:8px!important;
  margin-bottom:12px!important;
  align-items:center!important;
}
.xh-toolbar > div,
.xh-toolbar > span{height:var(--xh-tinggi)!important}
.xh-toolbar button,
.xh-toolbar select,
.xh-toolbar input{
  height:var(--xh-tinggi)!important;
  border-radius:var(--xh-radius)!important;
  font-size:12.5px!important;
  font-weight:600!important;
}
.xh-toolbar select{
  border:1px solid var(--xh-garis)!important;
  background-color:#fff!important;
  color:var(--xh-teks)!important;
  padding:0 28px 0 10px!important;
}
.xh-toolbar input{
  border:1px solid var(--xh-garis)!important;
  font-weight:500!important;
}
/* Pencarian memanjang mengisi sisa ruang, jadi ia yang paling gampang
   ditemukan di batang ini sesudah tombol utama. 300px, bukan 260: di
   260 teks petunjuknya sendiri sudah terpotong di tengah kata. */
.xh-toolbar > div:has(input){flex:1 1 300px!important;min-width:240px}
/* Tepi kanan yang rata: satu-satunya kendali yang didorong ke kanan. */
.xh-toolbar > button.btn-secondary:last-child{margin-left:auto}

/* ---------------- TABEL ---------------- */
.xh-tabel{border-radius:12px!important;border-color:var(--xh-garis)!important}

/* Batang geser yang KELIHATAN. Tabelnya 2571px pada bingkai 1071px, jadi
   memang harus digeser — yang salah selama ini bukan penggeserannya,
   melainkan tidak adanya tanda bahwa masih ada lanjutan di kanan. */
.xh-geser{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
.xh-geser::-webkit-scrollbar{height:11px}
.xh-geser::-webkit-scrollbar-track{background:transparent}
.xh-geser::-webkit-scrollbar-thumb{
  background:#cbd5e1;
  border-radius:99px;
  border:3px solid #fff;
}
.xh-geser::-webkit-scrollbar-thumb:hover{background:#94a3b8}

.xh-tabel thead th{
  font-size:10.5px!important;
  font-weight:600!important;
  text-transform:uppercase;
  letter-spacing:.5px!important;
  color:var(--xh-redup)!important;
  background:#f8fafc!important;
  padding:9px 12px!important;
  border-bottom:1px solid var(--xh-garis)!important;
  z-index:2;
}
.xh-tabel tbody td{
  padding:10px 12px!important;
  font-size:13px!important;
  line-height:1.45!important;
  border-bottom:1px solid var(--xh-garis2)!important;
}
.xh-tabel tbody tr:last-child td{border-bottom:0!important}
/* Membantu mata mengikuti satu baris sampai ujung kanan tabel. */
.xh-tabel tbody tr:hover{background:#f8fafc}

/* Baris terpilih. Garis tebal di tepi kiri terbaca walau barisnya sedang
   digeser jauh ke kanan — warna latar saja hilang dari pandangan. */
.xh-tabel tbody tr:has(input[type="checkbox"]:checked){
  background:#ecfdf5!important;
  box-shadow:inset 3px 0 0 var(--xh-utama);
}

/* Satu sistem tombol di kolom Aksi. Sebelumnya tinggi dan radiusnya
   bercampur, dan tumpukan itulah yang menentukan tinggi seluruh baris
   (diukur: 128px isi pada baris setinggi 151px).

   SASARANNYA `td:last-child`, BUKAN semua `td button`. Dua alasan:
   kolom Aksi bertanda `inti` sehingga tidak pernah bisa disembunyikan dan
   selalu menjadi sel terakhir; sedangkan `td button` akan ikut menangkap
   lencana bulat di kolom Follow Up dan Tag — dan memaksanya setinggi 30px
   merusak bentuk pilnya. Menyaringnya lewat `[style*="border-radius:999"]`
   sempat dicoba dan RAPUH: komponennya memakai 999 maupun 99. */
.xh-tabel tbody td:last-child button,
.xh-tabel tbody td:last-child select{
  height:30px!important;
  border-radius:8px!important;
  font-size:12px!important;
  font-weight:600!important;
}
/* Tumpukan di sel Aksi dirapatkan 6px -> 4px. Empat baris kendali berarti
   tiga celah, jadi ini memangkas 6px dari SETIAP baris tabel.
   Tumpukannya sendiri TIDAK dijadikan dua kolom: lebar kolomnya 320px, dan
   sepasang tombol di setengahnya (±146px) memotong label "🚚 Mengantar".
   Label aksi yang terpotong lebih buruk daripada baris yang tinggi. */
.xh-tabel tbody td:last-child div{gap:4px!important}

/* ALAMAT — pengungkit tinggi baris yang paling besar.
   Diukur: teksnya dirender 14px/20px, LEBIH BESAR daripada nama produk di
   kolom sebelahnya, dan enam baris bungkusnya memakan 120px sendirian —
   itulah yang membuat baris tertinggi mencapai 201px. Alamat adalah data
   rujukan, bukan judul baris, jadi ia turun ke ukuran yang sama dengan
   sekitarnya. Tidak ada yang dipotong atau disembunyikan. */
.xh-tabel tbody td > .text-sm{
  font-size:12.5px!important;
  line-height:1.4!important;
}

/* ---------------- KEADAAN KOSONG ---------------- */
.xh-kosong{padding:48px 20px!important}

/* ---------------- KARTU DI LAYAR KECIL ---------------- */
.xh-kartu-list > div{
  border-radius:12px!important;
  border-color:var(--xh-garis)!important;
}
.xh-kartu-list button,
.xh-kartu-list select{
  border-radius:8px!important;
  font-weight:600!important;
}

/* ---------------- LAYAR KECIL ----------------
   Diukur pada 390px: kepala 99 + tanggal 71 + ringkasan 204 + penyaring
   268 = 642px yang harus digulir sebelum pesanan pertama terlihat.
   Yang dirapatkan di sini hanya JARAK dan SUSUNAN — tidak ada satu pun
   penyaring yang disembunyikan atau dibuang. */
@media (max-width:820px){
  .xh-toolbar{padding:8px;gap:6px!important;border-radius:11px}
  /* Tiga penyaring berdampingan dua-dua, bukan tiga baris penuh. */
  .xh-toolbar > select{
    flex:1 1 calc(50% - 3px)!important;
    width:auto!important;
    min-width:0!important;
  }
  .xh-kepala{margin-bottom:12px!important}
  .xh-tanggal{margin-bottom:8px!important;padding:7px 8px!important}
  .xh-ringkas{margin-bottom:8px!important}

  /* Baris tanggal digeser mendatar di HP — batang gesernya dibuat terlihat
     supaya "Realtime (semua)" yang terpotong di tepi tidak disangka rusak. */
  .xh-tanggal{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
  .xh-tanggal::-webkit-scrollbar{height:4px}
  .xh-tanggal::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}

  .xh-kartu-list > div{margin-bottom:10px!important}

  /* ANGKA UANG TIDAK BOLEH TERPOTONG.
     Di 390px nilai "Rp 1.990.050" tampil sebagai "Rp 1.990...." — digit
     yang hilang pada angka omzet lebih buruk daripada kartu yang sedikit
     lebih tinggi, jadi teksnya dibiarkan membungkus. Dipakai apa adanya
     tanpa menebak struktur dalamnya: yang diubah hanya perilaku potong. */
  .xh-ringkas button,
  .xh-ringkas button *{
    white-space:normal!important;
    text-overflow:clip!important;
    min-width:0!important;
  }

  /* Label penyaring muat di setengah lebar. Pada 12.5px "Skor Lincah:
     semua" perlu ±156px sedangkan ruangnya 146px, jadi ia terpotong tepat
     di kata terakhir — yang justru bagian yang membedakan pilihannya. */
  .xh-toolbar select{
    font-size:12px!important;
    padding:0 22px 0 9px!important;
  }
}
/* Di layar tersempit, ruang anak panah bawaan peramban memakan lebih banyak
   daripada padding yang diminta, jadi label masih terpotong di 12px.
   Diturunkan lagi seperlunya — bukan disembunyikan: penyaring yang tidak
   terbaca isinya sama saja dengan penyaring yang hilang. */
@media (max-width:430px){
  .xh-toolbar select{
    font-size:11.5px!important;
    padding:0 17px 0 8px!important;
  }

  /* Baris tanggal digeser mendatar. Tepi kanannya dibuat memudar supaya
     terbaca sebagai "masih ada lanjutan", bukan sebagai chip yang terpotong
     karena rusak. Tidak ada yang disembunyikan — digeser tetap terlihat. */
  .xh-tanggal{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);
  }
}

/* Sasaran sentuh tidak boleh ikut mengecil di layar sentuh. */
@media (max-width:820px){
  .xh-toolbar button,
  .xh-toolbar select,
  .xh-toolbar input,
  .xh-kepala button{height:38px!important}
  .xh-toolbar > div,
  .xh-toolbar > span{height:38px!important}
}