/**
 * Changes:
 * 2026-09-15: Initial creation CSS untuk halaman pengembalian linen bersih (transaksi/pengembalian).
 * 2026-09-16: Tinggi modal Data Linen ditingkatkan menjadi ~70% viewport height: set `min-height` dan `max-height` menjadi `70vh` pada `#modalDataLinen .modal-dialog-centered`, dan tambah `flex: 1` pada `#modalDataLinen .modal-body` agar body mengisi sisa ruang vertikal.
 *           : Tambah nested modal slide CSS: fixed positioning + transform-based slide untuk #modalSirkulasi dan #modalDataLinen, responsive --nested-peek variable (32/56/88px), .nested-peek-label vertical strip, shift-left state management. Perbaiki toolbar order dengan CSS flex order. Badge count conditional visibility.
 *           : Ganti modal Tambah Item Linen menjadi panel inline `#entryPanel` di dalam panel kanan Data Linen, meniru pola `stok/opname/periode_detail.php`. Tambah style scan feedback `.scan-ok`/`.scan-fail` untuk `#f_item_scan`.
 * 2026-09-18: Penyempurnaan style daftar kontainer: total footer stick on bottom di luar `<ul>` (flex column layout), tombol aksi kontainer disesuaikan dengan task list `index.html` (link `<a>` + icon Feather + tooltip), ganti badge total menjadi teks biasa `#totalItemCount` dengan ukuran font `0.75rem` agar sejalan dengan ukuran badge, hapus style progressbar `entryProgress` yang tidak dipakai lagi, tambah style `.count-text` untuk angka jumlah kategori filter (`fw-semibold text-muted`, `0.75rem`), dan pertahankan badge hanya untuk kategori Draft.
 * 2026-09-23: [REFACTOR] Rename file `style_distribusi.css` → `style_distribusilinenbersih.css` mengikuti rename controller `Distribusi` → `DistribusiLinenBersih` dan URL `transaksi/distribusi` menjadi `transaksi/distribusi-linen-bersih`.
 * 2026-09-23: [REFACTOR] Rename file `style_pengembalian.css` → `style_pengembalian_bersih.css` mengikuti rename controller `Pengembalian` → `PengembalianLinenBersih` dan URL `transaksi/pengembalian` menjadi `transaksi/pengembalian-linen-bersih`.
 * 2026-09-24: [UI] Ubah kolom Lokasi di DataTable halaman pengembalian linen bersih dari format asal -> tujuan menjadi hanya nama lokasi tujuan. Update JS `script_pengembalian_bersih.js`.
 *           : [UI] Ubah default kategori aktif di halaman pengembalian linen bersih menjadi Draft saat pertama kali dibuka. Update JS `script_pengembalian_bersih.js` dan view `pengembalian_bersih/index.php`.
 */

/* Statistik cards */
.stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* Kategori filter */
#kategoriFilter .list-group-item {
  border: none;
  border-radius: 0;
  padding: 0.75rem 1rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}

#kategoriFilter .list-group-item:hover {
  background-color: rgba(var(--primary-rgb), 0.05);
}

#kategoriFilter.list-group {
  margin-right: 5px;
}

#kategoriFilter .list-group-item.active {
  background-color: rgba(var(--primary-rgb), 0.1) !important;
  color: var(--primary-color) !important;
  font-weight: 600;
  border-radius: 0 20px 20px 0 !important;
}

#kategoriFilter .badge {
  font-size: 0.75rem;
}

#kategoriFilter .count-text {
  font-size: 0.75rem;
  font-weight: 600;
}

/* Kategori More/Less toggle */
#kategoriMoreWrap {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 4px;
}

#btnKategoriToggle {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--primary-color);
  border: 1px solid transparent;
  background: transparent;
}

#btnKategoriToggle:hover {
  background-color: rgba(var(--primary-rgb), 0.05);
  border-color: rgba(var(--primary-rgb), 0.15);
}

.rotate-180 {
  transform: rotate(180deg);
}

/* Row checkbox highlight */
#pengembalianTable tbody tr.row-checked {
  background-color: rgba(var(--primary-rgb), 0.08) !important;
}
#pengembalianTable tbody tr.row-checked > td {
  background-color: rgba(var(--primary-rgb), 0.08) !important;
  box-shadow: none !important;
}

/* Bulk status change button */
#statusBulkWrap {
  display: inline-block;
  margin-left: 12px;
}
#statusBulkWrap #statusBulkBtn {
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Panel utama */
#pengembalianMainRow {
  min-height: 60vh;
}

/* DataTable action buttons */
#pengembalianTable .btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

/* Kontainer list */
.kontainer-item {
  transition: all 0.2s;
}

.kontainer-item:hover {
  background-color: rgba(var(--primary-rgb), 0.05);
}

.kontainer-item.active {
  background-color: var(--primary01) !important;
}

.kontainer-item.active strong {
  color: var(--default-text-color);
}

.kontainer-item strong small {
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
}

.kontainer-item-actions {
  position: relative;
  width: 6.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.kontainer-item-count {
  transition: opacity 0.2s;
}

.kontainer-hover-panel {
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  gap: 0.5rem;
}

.kontainer-item:hover .kontainer-item-count {
  display: none;
}

.kontainer-item:hover .kontainer-hover-panel {
  display: flex;
}

.kontainer-hover-panel .kontainer-action-btn {
  font-size: 14px;
  line-height: 1;
  padding: 2px;
  border-radius: 4px;
  transition: background 0.2s;
}

.kontainer-hover-panel .kontainer-action-btn:hover {
  background: rgba(var(--dark-rgb), 0.08);
  color: var(--default-text-color);
}

.kontainer-total {
  background-color: rgba(var(--primary-rgb), 0.05);
  font-size: 0.875rem;
  flex-shrink: 0;
}

#totalItemCount {
  font-size: 0.75rem;
}

#kontainerTotal {
  display: none;
}

/* Mail-style item linen */
.mail-item {
  padding: 0.75rem 1rem;
  transition: background-color 0.2s;
}

.mail-item:hover {
  background-color: rgba(var(--dark-rgb), 0.03);
}

/* Detail item linen: compact ~40px, RFID right-side, hover delete */
.detail-item {
  padding: 4px 12px !important;
  min-height: 40px;
}

.detail-item-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.detail-item-title {
  font-size: 0.8125rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}

.detail-item-meta {
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--text-muted);
  margin-top: 0;
}

.detail-item-rfid {
  font-size: 0.75rem;
  font-family: monospace;
  color: var(--text-muted);
}

.detail-item-actions {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 80px;
  justify-content: flex-end;
}

.detail-item:hover .detail-item-rfid {
  display: none;
}

.detail-item:hover .kontainer-hover-panel {
  display: flex;
}

.kondisi-badge {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
}

/* Zebra striping */
#listDetailLinen .detail-item:nth-child(odd) {
  background-color: rgba(var(--dark-rgb), 0.02);
}

/* Modal centered dengan efek slide dari kanan (default, untuk modal yang TIDAK ikut nested-slide,
   mis. Preview Sirkulasi) */
.modal-dialog-centered {
  transform: translateX(60px);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.modal.show .modal-dialog-centered {
  transform: translateX(0);
  opacity: 1;
}

/* Modal with right panel */
#modalSirkulasi .modal-dialog-centered {
  max-width: 1100px;
}

#statusLogList .border-bottom:last-child {
  border-bottom: none !important;
}

/* =======================================================================
   NESTED MODAL SLIDE (off-canvas style)
   Rantai: #modalSirkulasi -> #modalDataLinen -> #modalTambahKontainer
                                             -> #modalTambahItem
   Hanya #modalSirkulasi dan #modalDataLinen yang pernah "digeser" (karena
   masing-masing punya anak). #modalTambahKontainer & #modalTambahItem adalah
   dialog paling ujung sehingga tetap pakai posisi/animasi default di atas.
   ======================================================================= */
:root {
  --nested-peek: 32px;   /* lebar minimum sisa dialog yang terlihat di layar sempit */
}
@media (min-width: 576px) { :root { --nested-peek: 56px; } }
@media (min-width: 992px) { :root { --nested-peek: 88px; } }

#modalSirkulasi .modal-dialog-centered {
  position: fixed;
  top: 50%;
  left: 0;
  margin: 0;
  max-height: 88vh;
  width: min(1140px, 94vw);
  transform: translateX(calc(50vw + 60px)) translateX(-50%) translateY(-50%);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.3s ease-out;
}

#dialogDataLinen.modal-dialog-centered {
  position: fixed;
  top: 50%;
  left: 0;
  margin: 0;
  height: 70vh;
  width: min(1140px, 94vw);
  transform: translateX(calc(50vw + 60px)) translateX(-50%) translateY(-50%);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.3s ease-out;
}

/* Tampil normal: benar-benar di tengah layar */
#modalSirkulasi.show .modal-dialog-centered,
#modalDataLinen.show .modal-dialog-centered {
  transform: translateX(50vw) translateX(-50%) translateY(-50%);
  opacity: 1;
}

/* Digeser ke kiri karena anaknya sedang terbuka: hanya sisakan var(--nested-peek) */
#modalSirkulasi.shift-left .modal-dialog-centered,
#modalDataLinen.shift-left .modal-dialog-centered {
  transform: translateX(var(--nested-peek)) translateX(-100%) translateY(-50%);
  opacity: 1;
}

#modalSirkulasi .modal-content,
#modalDataLinen .modal-content {
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#modalSirkulasi .modal-content {
  max-height: 88vh;
}
#modalDataLinen .modal-content {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#modalSirkulasi .modal-body {
  overflow-y: auto;
}
#modalDataLinen .modal-body {
  overflow-y: auto;
  flex: 1;
}

/* Label kecil di tepi kanan dialog, hanya berarti/terlihat saat digeser (shift-left) */
.nested-peek-label {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--nested-peek);
  background: var(--primary, #206bc4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  writing-mode: vertical-rl;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease 0.1s;
}
#modalSirkulasi.shift-left .nested-peek-label,
#modalDataLinen.shift-left .nested-peek-label {
  opacity: 1;
}

/* Responsif */
@media (max-width: 991.98px) {
  #pengembalianMainRow {
    flex-direction: column;
  }

  #pengembalianMainRow .border-end {
    border-right: none !important;
    border-bottom: 1px solid var(--border-color);
  }

  #modalDataLinen .modal-body .row {
    flex-direction: column;
  }

  #modalDataLinen .col-12.col-md-4,
  #modalDataLinen .col-12.col-md-8 {
    max-height: none;
    flex: none;
  }

  .mail-nav-list {
    max-height: none;
  }
}

/* DataTables Bootstrap grid overrides */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  display: block;
}

#pengembalianTable_wrapper .row:not(:last-child) {
  margin-bottom: 0.5rem;
}

#pengembalianTable_wrapper .dataTables_filter {
  text-align: right;
}

#pengembalianTable_wrapper .dataTables_filter input {
  margin-left: 0.5rem;
}

#pengembalianTable_wrapper .dataTables_info {
  padding-top: 0.5rem;
}

#pengembalianTable_wrapper .dataTables_paginate {
  text-align: right;
  padding-top: 0.5rem;
}

/* DataTables header toolbar: search + buttons on same row */
#pengembalianTable_wrapper .dt-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

#pengembalianTable_wrapper .dt-toolbar .dataTables_filter {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  order: 3;
}

#pengembalianTable_wrapper .dt-toolbar .dt-buttons {
  display: flex;
  gap: 0.25rem;
  order: 2;
}

#pengembalianTable_wrapper .dt-toolbar #btnRefreshDistribusi {
  order: 1;
}

/* Text truncate */
.text-truncate-custom {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
  display: inline-block;
}

/* Scrollbar styling untuk panel list */
.mail-nav-list::-webkit-scrollbar,
#mail-messages-linen::-webkit-scrollbar {
  width: 8px;
}

.mail-nav-list::-webkit-scrollbar-thumb,
#mail-messages-linen::-webkit-scrollbar-thumb {
  background-color: rgba(var(--dark-rgb), 0.2);
  border-radius: 4px;
}

.mail-nav-list::-webkit-scrollbar-thumb:hover,
#mail-messages-linen::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--dark-rgb), 0.4);
}

/* Entry panel scan feedback */
#f_item_scan.scan-ok {
  border-color: #198754 !important;
  box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .35);
}

#f_item_scan.scan-fail {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .35);
}

/* ===== Modal Preview Sirkulasi — slide-in from right (mimic admin/groups pattern) ===== */
#modalPreviewSirkulasi.right-side-panel {
  padding: 0 !important;
}
#modalPreviewSirkulasi.right-side-panel .modal-dialog {
  position: fixed;
  top: 10px;
  right: 10px;
  margin: 0;
  width: 1000px;
  max-width: calc(100vw - 20px);
  height: calc(100vh - 20px);
  transform: translateX(120%);
  transition: transform 0.3s ease-in-out;
  z-index: 1070;
}
#modalPreviewSirkulasi.right-side-panel.show .modal-dialog {
  transform: translateX(0);
}
#modalPreviewSirkulasi.right-side-panel .modal-content {
  height: 100%;
  border-radius: 0.5rem;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
#modalPreviewSirkulasi.right-side-panel .modal-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#modalPreviewSirkulasi.right-side-panel .modal-footer {
  margin-top: auto;
}
#modalPreviewSirkulasi.right-side-panel ~ .modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1060;
}

/* Shared preview layout classes (reused from admin modules) */
.preview-row-layout {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  height: 100%;
}
.preview-col-left {
  flex: 0 0 auto;
  max-height: 100%;
  overflow: hidden;
}
.preview-panel-wrapper {
  flex-shrink: 0;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  overflow-y: auto;
  max-height: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--body-color-rgb), 0.35) transparent;
}
.preview-panel-wrapper::-webkit-scrollbar {
  width: 8px;
}
.preview-panel-wrapper::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}
.preview-panel-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(var(--body-color-rgb), 0.35);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.preview-panel-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--body-color-rgb), 0.55);
  border: 0;
}

/* Responsif: stack panels on small screens */
@media (max-width: 991.98px) {
  #modalPreviewSirkulasi.right-side-panel .modal-dialog {
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    top: 0;
    right: 0;
  }
  .preview-row-layout {
    flex-direction: column;
  }
  .preview-col-left {
    max-height: none;
  }
}
.status-log-timeline {
  position: relative;
  padding-left: 0.47rem;
  margin: 0;
}
.status-log-timeline > li {
  position: relative;
  padding-bottom: 1.1rem;
  padding-left: 0.75rem;
  margin-left: 0.25rem;
  border-left: 2px dashed var(--primary02);
}
.status-log-timeline > li:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}
.status-log-timeline > li:before {
  content: "";
  position: absolute;
  left: -0.33rem;
  top: 0.2rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--custom-white, #fff);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
}
.status-log-timeline > li:first-child:before {
  box-shadow: 0 0 0 2px rgb(var(--danger-rgb));
  /* border: 1px solid rgb(var(--danger-rgb)); */
  background: rgb(var(--danger-rgb));
}
[data-theme-mode="dark"] .status-log-timeline > li:before {
  border-color: var(--bs-body-bg, #212529);
}
.status-log-timeline .timeline-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.1rem;
}
.status-log-timeline .timeline-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  margin-bottom: 0;
  line-height: 1.2;
}
.status-log-timeline .timeline-status {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0;
  line-height: 1.2;
  text-align: right;
}
.status-log-timeline .timeline-note {
  font-size: 0.8rem;
  color: rgb(var(--dark-rgb)) !important;
  margin-bottom: 0;
  font-style: italic;
  line-height: 1.25;
}

#entryPanel .btn-group .btn.active {
  background-color: rgba(var(--primary-rgb), 0.1);
  border-color: rgba(var(--primary-rgb), 0.3);
  color: var(--primary);
}

/* DataTable: cursor arrow on avatar/badge elements */
#tipeAvatar,
.tipe-avatar,
#pengembalianTable .pic-avatar,
#modalPreviewSirkulasi .tipe-avatar {
  cursor: default;
}

/* DataTable layout fixes for pengembalian_linen_bersih */
#pengembalianTable .tipe-avatar {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 0;
}

#pengembalianTable .pic-avatar {
  flex-shrink: 0;
}

#pengembalianTable .dataTables_wrapper table {
  table-layout: auto;
}

#pengembalianTable th:nth-child(2),
#pengembalianTable td:nth-child(2) {
  min-width: 160px;
}

#pengembalianTable th:nth-child(6),
#pengembalianTable td:nth-child(6),
#pengembalianTable th:nth-child(7),
#pengembalianTable td:nth-child(7) {
  white-space: nowrap;
  width: 110px;
}

#pengembalianTable th:nth-child(8),
#pengembalianTable td:nth-child(8) {
  white-space: nowrap;
  width: 140px;
}