/*
  Lapisan tipis di atas template Basalt.
  Kerangka halaman, sidebar, topbar, hero, kartu, form, tabel, dialog, toast,
  date picker, dan select seluruhnya berasal dari Basalt. File ini hanya berisi
  kepala kartu (Basalt tidak punya kelas bersama untuk itu, tiap halaman
  template menulis sendiri) dan bagian khusus DOC Masuk. Semua warna dan ukuran
  memakai token --basalt-*, jadi ikut palet dan mode gelap.
*/

/* ---------- Kepala kartu ----------
   Sama dengan kepala kartu di halaman template (mis. new-invoice.html):
   judul tebal + penjelasan singkat, tanpa garis pemisah. */

.ks-card-head {
  flex: 0 0 auto; /* tidak ikut melar bila kartu diregangkan setinggi kartu sebelahnya */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

/* Jarak ke isi kartu dihitung dari kepala, jadi kartu isi biasa dan kartu
   tabel (card-body p-0) mendapat jarak yang sama. */
.ks-card-head {
  padding-bottom: 0.75rem;
}

.ks-card-head + .card-body {
  padding-top: 0;
}

.ks-card-title {
  margin: 0;
  font-size: var(--basalt-fs-card-title, 1.2rem);
  font-weight: 700;
  color: var(--basalt-copy);
}

.ks-filter {
  min-width: 14rem;
}

/* Di HP, judul kartu dan filternya bertumpuk (judul di atas, filter satu baris
   penuh di bawahnya), tidak berdampingan kiri-kanan. */
@media (max-width: 575.98px) {
  .ks-card-head > .ks-filter {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* Nama lantai: selebar secukupnya di desktop, satu baris penuh di HP. */
.ks-lantai-name {
  flex: 0 1 17.5rem;
}

@media (max-width: 575.98px) {
  .ks-lantai-name {
    flex-basis: 100%;
    max-width: none;
  }
}

/* ---------- DOC Masuk ---------- */

.ks-doc-panel {
  height: 100%;
  border-top: 4px solid var(--basalt-hue);
}

.ks-doc-panel.is-k2 {
  border-top-color: var(--basalt-info);
}

.ks-doc-big {
  font-size: clamp(2.4rem, 7vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--basalt-copy);
}

/* Bar komposisi: lebar tiap bagian dikirim skrip lewat --w. */
.ks-bar {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--basalt-edge);
}

.ks-bar > i {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  transition: width 0.35s ease;
}

.ks-bar .is-sehat { background: var(--basalt-hue); }
.ks-bar .is-lemah { background: var(--bs-warning, #d99a1f); }
.ks-bar .is-mati { background: var(--bs-danger, #c0392b); }

.ks-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 0.4rem;
}

.ks-dot.is-sehat { background: var(--basalt-hue); }
.ks-dot.is-lemah { background: var(--bs-warning, #d99a1f); }
.ks-dot.is-mati { background: var(--bs-danger, #c0392b); }

.ks-kandang-badge {
  background: var(--basalt-hue-soft);
  color: var(--basalt-hue-deep);
  font-weight: 700;
}

.ks-kandang-badge.is-k2 {
  background: var(--basalt-flare-soft);
  color: color-mix(in srgb, var(--basalt-info) 70%, var(--basalt-copy));
}

@media (prefers-reduced-motion: reduce) {
  .ks-bar > i { transition: none; }
}

/* Gambar laporan suhu di modal riwayat. */
.ks-history-image {
  width: 380px;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Kolom angka (Kotak, Isi, Mati, Lemah) rata tengah, header dan isinya. */
.ks-num-center {
  text-align: center;
}

/* ---------- Kelompok line (Sampel) ---------- */

/* Tanpa kotak bersarang: lantai dan kelompok line berurutan di dalam satu
   kartu. Pemisahnya garis tebal selebar kartu penuh (tanpa jarak kiri-kanan):
   margin negatif sebesar padding kartu, digambar lewat ::before supaya isi di
   bawahnya tetap punya padding biasa. */
.lantai-block + .lantai-block::before,
.line-group + .line-group::before,
.ks-split-col + .ks-split-col::before {
  content: "";
  display: block;
  height: 3px;
  margin-inline: calc(-1 * var(--basalt-foot-x, 1.25rem));
  background: var(--basalt-edge-strong);
}

/* Pemisah berdiri sendiri (<hr class="ks-divider">): tebal, selebar kartu. */
.ks-divider {
  height: 3px;
  margin: 1.25rem calc(-1 * var(--basalt-foot-x, 1.25rem));
  border: 0;
  background: var(--basalt-edge-strong);
  opacity: 1;
}

.lantai-block + .lantai-block::before {
  margin-bottom: 1.25rem;
}

.lantai-block + .lantai-block {
  margin-top: 1.25rem;
}

.line-group + .line-group::before {
  margin-bottom: 1rem;
}

.line-group + .line-group {
  margin-top: 1rem;
}

/* Ringkasan Jantan / Betina: dua bagian bertumpuk di HP, berdampingan di layar
   lebar (dipisah garis tegak). */
.ks-split {
  display: grid;
  gap: 1.25rem;
}

.ks-split-col + .ks-split-col::before {
  margin-bottom: 1.25rem;
}

@media (min-width: 992px) {
  .ks-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .ks-split-col:first-child {
    padding-right: 1.5rem;
  }

  .ks-split-col + .ks-split-col {
    padding-left: 1.5rem;
    border-left: 3px solid var(--basalt-edge-strong);
  }

  .ks-split-col + .ks-split-col::before {
    display: none;
  }
}

/* ---------- Tabel isian di layar sempit ----------
   Tabel yang berisi kolom input tidak muat di HP dan membuat tombol Hapus
   terdorong keluar layar. Di bawah 576px tiap baris jadi blok bertumpuk:
   label kecil di atas tiap isian, tanpa geser samping. Label diambil dari
   atribut data-label di tiap sel. */

@media (max-width: 575.98px) {
  /* Tabel yang sudah bertumpuk tidak perlu digeser. overflow: auto pada
     pembungkusnya memotong ring fokus input (atas, bawah, dan samping). */
  .table-responsive:has(> .ks-stack) {
    overflow: visible;
  }

  .ks-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .ks-stack,
  .ks-stack tbody,
  .ks-stack tfoot {
    display: block;
    width: 100%;
  }

  .ks-stack tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--basalt-edge);
  }

  .ks-stack tbody tr:last-child {
    border-bottom: 0;
  }

  .ks-stack td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none; /* tabel Bootstrap melukis latar sel lewat box-shadow */
  }

  .ks-stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--basalt-copy-muted);
  }

  /* Baris line: nama penuh, sampel 1 & 2 berdampingan, total + Hapus di bawah. */
  .ks-stack-lines tbody td:first-child {
    grid-column: 1 / -1;
  }

  .ks-stack-lines tbody td:last-child,
  .ks-stack-krat tbody td:last-child {
    align-self: end;
    justify-self: end;
  }

  /* Baris tabel data (riwayat, rekap): kartu dua kolom, tombol aksi di bawah. */
  .ks-stack-cards tbody td:last-child {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.375rem;
  }

  .ks-stack-cards tbody td:empty {
    display: none;
  }

  /* Kolom pertama (mis. nama petugas) selebar kartu. */
  .ks-stack-wide-first tbody td:first-child {
    grid-column: 1 / -1;
  }

  /* Baris krat: nomor + Hapus di atas, lalu ekor dan berat. */
  .ks-stack-krat tbody td:nth-child(1) { order: 1; align-self: center; }
  .ks-stack-krat tbody td:nth-child(4) { order: 2; }
  .ks-stack-krat tbody td:nth-child(2) { order: 3; }
  .ks-stack-krat tbody td:nth-child(3) { order: 4; }

  .ks-stack tfoot tr {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    padding-top: 0.75rem;
  }

  .ks-stack tfoot td {
    padding: 0;
  }

  .ks-stack tfoot td:empty {
    display: none;
  }
}

/* ---------- Modal di HP ----------
   Lebih kecil: margin samping lebih lebar (dialog lebih sempit), padding dan
   huruf lebih rapat, tombol lebih ringkas. */

@media (max-width: 575.98px) {
  .modal .modal-dialog {
    margin-inline: 1.25rem;
  }

  .modal .modal-header {
    padding: 0.75rem 1rem;
  }

  .modal .modal-title {
    font-size: 1rem;
  }

  .modal .modal-body {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .modal .modal-footer {
    padding: 0.625rem 1rem;
    gap: 0.5rem;
  }

  .modal .modal-footer .btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
  }
}