/* ==========================================================================
   Tema Cloudflare untuk WMS Tiga Logistik
   Lapisan override di atas AdminLTE 3 / Bootstrap 4.
   Dimuat SETELAH adminlte.min.css. Tidak ada markup Blade yang perlu diubah.
   ========================================================================== */

:root {
  /* Arah desain HRMate: orange dominan, biru muda sebagai penopang, kartu
     membulat lembut dengan bayangan halus menggantikan garis tepi. */

  /* Orange brand dipakai untuk aksen, ikon, dan keadaan aktif. Untuk tombol
     berisi teks putih dipakai versi lebih pekat: #f6821f di atas putih hanya
     mencapai rasio kontras ~2,6:1, terlalu rendah untuk teks tombol. */
  --cf-orange:        #f6821f;
  --cf-orange-dark:   #e36f14;
  --cf-orange-btn:    #de5f17;
  --cf-orange-btn-hi: #c44e11;
  --cf-orange-soft:   #fff1e5;
  --cf-orange-line:   #fbd9bc;

  /* Biru muda hanya sebagai permukaan penopang, bukan warna aksi. */
  --cf-blue-soft:     #dceaf7;
  --cf-blue-soft-2:   #eef5fc;
  --cf-blue:          #2f6fed;
  --cf-blue-dark:     #1d4fbb;

  --cf-ink:           #16232b;
  --cf-ink-2:         #33454f;
  --cf-muted:         #5b6b76;
  --cf-muted-2:       #8494a0;

  --cf-border:        #e8edf1;
  --cf-border-strong: #d5dee5;
  --cf-bg:            #f1f4f7;
  --cf-surface:       #ffffff;
  --cf-hover:         #f4f7fa;

  --cf-green:         #1f8a55;
  --cf-red:           #d64545;
  --cf-amber:         #b26a00;

  --cf-black:         #16232b;
  --cf-black-hover:   #0d171d;

  --cf-radius:        10px;
  --cf-radius-lg:     18px;
  --cf-radius-btn:    10px;
  --cf-radius-btn-sm: 8px;
  --cf-radius-full:   9999px;
  --cf-shadow:        0 1px 3px rgba(16,32,45,.05), 0 1px 2px rgba(16,32,45,.03);
  --cf-shadow-md:     0 4px 16px rgba(16,32,45,.08);
  --cf-shadow-lg:     0 12px 32px rgba(16,32,45,.10);

  --cf-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Dasar ---------- */
body,
.wrapper {
  font-family: var(--cf-font);
  background: var(--cf-bg);
  color: var(--cf-ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cf-blue); }
a:hover { color: var(--cf-blue-dark); }

/* ==========================================================================
   Sidebar — putih, item berkelompok, aksen oranye pada state aktif
   ========================================================================== */
.main-sidebar {
  background: var(--cf-surface) !important;
  border-right: 1px solid var(--cf-border);
  box-shadow: none !important;
}

.main-sidebar .brand-link {
  background: var(--cf-surface) !important;
  border-bottom: 1px solid var(--cf-border);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.main-sidebar .brand-link .brand-image {
  margin: 0;
  opacity: 1 !important;
  width: 30px;
  height: 30px;
  box-shadow: none !important;
}

.main-sidebar .brand-text {
  color: var(--cf-ink) !important;
  font-size: 14px;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* Panel user */
.main-sidebar .user-panel {
  border-bottom: 1px solid var(--cf-border) !important;
  padding: 12px 16px !important;
  margin: 0 !important;
}
.main-sidebar .user-panel .info a {
  color: var(--cf-ink) !important;
  font-weight: 500;
  font-size: 13px;
  padding: 0;
}
.main-sidebar .user-panel .image img { box-shadow: none !important; }

/* Pencarian cepat di dalam sidebar, seperti "Quick search... Ctrl K" milik Cloudflare */
.cf-side-search {
  position: relative;
  margin: 12px 12px 4px;
  display: flex;
  align-items: center;
}
.cf-side-search input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--cf-border-strong);
  border-radius: var(--cf-radius);
  background: var(--cf-surface);
  padding: 7px 46px 7px 30px;
  font-size: 13px;
  font-family: inherit;
  color: var(--cf-ink);
}
.cf-side-search input::placeholder { color: #9a9a9a; }
.cf-side-search input:focus {
  outline: none;
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 3px rgba(246,130,31,.20);
}
.cf-side-search .cf-side-search-icon {
  position: absolute; left: 10px;
  font-size: 12px; color: var(--cf-muted-2); pointer-events: none;
}
.cf-side-search .cf-kbd-mini {
  position: absolute; right: 8px;
  font-size: 10.5px; color: var(--cf-muted-2);
  background: #f4f4f4; border: 1px solid var(--cf-border);
  border-radius: 3px; padding: 2px 5px; pointer-events: none;
}

/* Sidebar dikecilkan ke mode ikon-saja (klik tombol pushmenu). Tanpa aturan ini,
   kotak pencarian tetap lebar penuh dan tumpang tindih dengan konten sidebar. */
@media (min-width: 768px) {
  .sidebar-collapse .cf-side-search { display: none; }
}

/* Label kelompok, meniru "Observe" / "Build" di dashboard Cloudflare.
   Cloudflare memakai sentence case, bukan kapital semua. */
.nav-sidebar .nav-header {
  color: var(--cf-muted-2) !important;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 18px 16px 6px;
  background: transparent;
  text-transform: none;
}

.nav-sidebar .nav-link {
  color: var(--cf-ink-2) !important;
  border-radius: var(--cf-radius);
  margin: 1px 8px;
  padding: 7px 10px !important;
  font-size: 13.5px;
  font-weight: 400;
  display: flex;
  align-items: center;
  transition: background .12s ease, color .12s ease;
}

.nav-sidebar .nav-link .nav-icon {
  color: var(--cf-muted-2);
  font-size: 14px;
  width: 20px;
  margin-right: 8px;
  text-align: center;
  transition: color .12s ease;
}

.nav-sidebar .nav-link:hover {
  background: var(--cf-hover) !important;
  color: var(--cf-ink) !important;
}
.nav-sidebar .nav-link:hover .nav-icon { color: var(--cf-ink-2); }

/* Aktif: latar lembut + garis oranye, bukan blok biru AdminLTE */
.nav-sidebar .nav-link.active,
.nav-sidebar .nav-link.active:hover {
  background: var(--cf-orange-soft) !important;
  color: var(--cf-orange-dark) !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--cf-orange);
}
.nav-sidebar .nav-link.active .nav-icon { color: var(--cf-orange-dark); }

/* Submenu treeview */
.nav-treeview .nav-link {
  font-size: 13px;
  padding-left: 34px !important;
  color: var(--cf-muted) !important;
}
.nav-sidebar .menu-open > .nav-link > .right { transform: rotate(-90deg); }
.nav-sidebar .nav-link > .right { font-size: 10px; color: var(--cf-muted-2); }

/* ==========================================================================
   Topbar
   ========================================================================== */
.main-header.navbar {
  background: var(--cf-surface) !important;
  border-bottom: 1px solid var(--cf-border) !important;
  box-shadow: none !important;
  min-height: 52px;
  padding: 0 8px;
  /* Bootstrap navbar-nav tidak wrap secara default; tanpa flex-wrap eksplisit,
     account switcher + tanggal + aksi kanan bisa saling tumpang tindih pada
     lebar layar menengah (~768-1024px, umum saat sidebar sedang terbuka). */
  flex-wrap: nowrap;
  overflow: hidden;
}

.main-header .nav-link {
  color: var(--cf-muted) !important;
  font-size: 13.5px;
  border-radius: var(--cf-radius);
  padding: 6px 10px;
}
.main-header .nav-link:hover {
  background: var(--cf-hover);
  color: var(--cf-ink) !important;
}
.main-header .navbar-text {
  color: var(--cf-muted-2);
  font-size: 13px;
  padding-left: 4px;
  white-space: nowrap;
}

/* Di layar sempit teks tanggal membungkus dan mendorong menu kanan turun. */
@media (max-width: 575px) {
  .main-header .navbar-text { display: none; }
}

/* Pemilih akun di kiri topbar, meniru "Tigadananjayalogist... ⌄" */
.cf-account {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--cf-ink);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--cf-radius);
  padding: 5px 9px;
  cursor: pointer;
  font-family: inherit;
  max-width: 230px;
  min-width: 0;   /* wajib agar flex child boleh menyusut lebih kecil dari kontennya */
  flex-shrink: 1;
}
.cf-account:hover { background: var(--cf-hover); }
.cf-account .cf-account-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-account i { font-size: 10px; color: var(--cf-muted-2); }

/* Aksi kanan topbar: Ask AI / Support / profil */
.cf-top-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.cf-top-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--cf-muted) !important;
  background: none;
  border: none;
  border-radius: var(--cf-radius);
  padding: 6px 10px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.cf-top-action:hover { background: var(--cf-hover); color: var(--cf-ink) !important; }
.cf-top-action i { font-size: 13px; }
.cf-top-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: #e8f0fd;
  color: var(--cf-blue);
  font-size: 11.5px;
  font-weight: 600;
  margin-left: 5px;
}

@media (max-width: 575px) {
  .cf-top-action span { display: none; }
}

/* ==========================================================================
   Konten
   ========================================================================== */
.content-wrapper { background: var(--cf-bg) !important; }

.content-header {
  padding: 22px 1rem 6px;
}
.content-header h1 {
  font-size: 22px !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--cf-ink);
}

.breadcrumb {
  background: transparent;
  padding: 0;
  font-size: 12.5px;
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--cf-border-strong); }
.breadcrumb-item.active { color: var(--cf-muted-2); }

/* ---------- Card ---------- */
/* Garis tepi diganti bayangan halus: pada latar abu terang, kartu memisah
   lewat elevasi, bukan lewat garis. Ini yang memberi kesan lapang pada
   referensinya. */
.card {
  background: var(--cf-surface);
  border: none;
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-md);
  margin-bottom: 20px;
}
/* AdminLTE menaruh .card-tools dengan float:right. Begitu isinya tombol setinggi
   32px, float keluar dari alur dan menabrak garis bawah header. Flex menaruh
   judul dan tombol di baris yang sama dan membiarkannya turun rapi kalau sempit. */
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--cf-border);
  padding: 16px 22px;
  border-radius: var(--cf-radius-lg) var(--cf-radius-lg) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.card-header > .card-tools {
  float: none;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Tombolnya sendiri tidak menyusut (white-space:nowrap menahan teksnya), tapi
     kotak .card-tools harus boleh menyempit — kalau flex-shrink:0, kotaknya
     mempertahankan lebar penuh dan wrap di dalamnya tidak pernah terpicu. */
  flex-wrap: wrap;
  flex-shrink: 1;
  min-width: 0;
  justify-content: flex-end;
}

/* Tak satu pun view membungkus tabelnya dengan .table-responsive, jadi di layar
   sempit seluruh halaman yang menggeser horizontal, bukan tabelnya. Biarkan
   card-body yang memuat tabel jadi area gulir sendiri. */
.card-body:has(.table) { overflow-x: auto; }
.card-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cf-ink);
  margin: 0;
  min-width: 0;
}
.card-body { padding: 22px; }

/* AdminLTE menempel garis warna tebal di atas card; ganti jadi tipis */
.card.card-primary:not(.card-outline) > .card-header,
.card.card-info:not(.card-outline) > .card-header,
.card.card-success:not(.card-outline) > .card-header,
.card.card-danger:not(.card-outline) > .card-header,
.card.card-warning:not(.card-outline) > .card-header {
  background: transparent;
  color: var(--cf-ink);
}
.card-primary.card-outline { border-top: 1px solid var(--cf-border); }
.card-info.card-outline    { border-top: 1px solid var(--cf-border); }
.card-success.card-outline { border-top: 1px solid var(--cf-border); }
.card-danger.card-outline  { border-top: 1px solid var(--cf-border); }
.card-warning.card-outline { border-top: 1px solid var(--cf-border); }

/* ---------- Kotak statistik ---------- */
.small-box {
  border-radius: var(--cf-radius-lg);
  border: none;
  background: var(--cf-surface) !important;
  color: var(--cf-ink) !important;
  box-shadow: var(--cf-shadow-md);
}
.small-box > .inner { padding: 18px; }
.small-box h3 {
  color: var(--cf-ink) !important;
  font-size: 26px !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.small-box p { color: var(--cf-muted) !important; font-size: 13px; }
.small-box .icon { color: rgba(0,0,0,.06) !important; }
.small-box .small-box-footer {
  background: transparent !important;
  color: var(--cf-blue) !important;
  border-top: 1px solid var(--cf-border);
  font-size: 12.5px;
  padding: 9px;
}
.small-box .small-box-footer:hover { background: var(--cf-hover) !important; }

.info-box {
  border-radius: var(--cf-radius-lg);
  border: none;
  box-shadow: var(--cf-shadow-md);
  background: var(--cf-surface);
}

/* Ubin ikon oranye membulat, elemen paling khas dari referensinya. Dipakai
   dengan menambahkan .cf-tile pada wadah ikon di kartu statistik. */
.cf-tile {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--cf-orange);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.cf-tile-soft { background: var(--cf-orange-soft); color: var(--cf-orange-dark); }
.cf-tile-blue { background: var(--cf-blue-soft); color: var(--cf-blue); }

/* Panel penopang biru muda, seperti blok sambutan pada referensi. */
.cf-panel-soft {
  background: var(--cf-blue-soft);
  border-radius: var(--cf-radius-lg);
  padding: 22px 24px;
}

/* ==========================================================================
   Tombol
   ========================================================================== */
/* Skala ukuran ditulis lengkap dengan sengaja. AdminLTE mendefinisikan .btn-xs
   dan .btn-sm dengan specificity yang sama persis dengan .btn, dan file ini
   dimuat belakangan — jadi tanpa aturan ukuran sendiri di sini, padding .btn
   menang atas keduanya dan tombol aksi di baris tabel membengkak sampai jebol
   keluar barisnya. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--cf-radius-btn);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  padding: 8px 16px;
  white-space: nowrap;
  vertical-align: middle;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
}
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(222,95,23,.22); outline: none; }
.btn i, .btn svg { font-size: .95em; line-height: 1; }

/* inline-flex di atas mematikan .btn-block bawaan Bootstrap, jadi kembalikan */
.btn-block { display: flex; width: 100%; }

.btn-lg { padding: 11px 22px; font-size: 15px;   border-radius: 11px; }
.btn-sm { padding: 6px 12px;  font-size: 12.5px; border-radius: var(--cf-radius-btn-sm); gap: 5px; }
.btn-xs { padding: 4px 9px;   font-size: 11.5px; border-radius: 6px; gap: 4px; }

/* Tombol yang isinya cuma ikon: jaga lebar minimum supaya jadi persegi rapi,
   bukan kapsul gepeng selebar satu glyph. */
.btn-xs > i:only-child, .btn-xs > svg:only-child { min-width: 13px; }
.btn-sm > i:only-child, .btn-sm > svg:only-child { min-width: 14px; }
.btn > i:only-child, .btn > svg:only-child { min-width: 15px; }

/* ---------- Aksi utama ---------- */
/* Aksi utama memakai oranye pekat, bukan oranye brand: #f6821f di atas putih
   hanya mencapai rasio kontras ~2,6:1 sehingga teks tombol sulit dibaca. */
.btn-primary {
  background: var(--cf-orange-btn);
  border-color: var(--cf-orange-btn);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
  background: var(--cf-orange-btn-hi);
  border-color: var(--cf-orange-btn-hi);
  color: #fff;
}

/* Hanya dua isian pekat yang dipakai di seluruh aplikasi: oranye untuk aksi
   utama, merah untuk aksi merusak. Sisanya bertinta. Dua blok warna jenuh yang
   bersebelahan — misalnya Tambah oranye di samping Export hijau — saling
   berebut perhatian dan membuat oranye berhenti terbaca sebagai aksi utama. */
.btn-warning {
  background: var(--cf-orange-soft);
  border-color: var(--cf-orange-line);
  color: var(--cf-amber);
}
.btn-warning:hover, .btn-warning:not(:disabled):not(.disabled):active {
  background: #ffe6cc;
  border-color: #eebd85;
  color: var(--cf-amber);
}

.btn-success { background: #e2f2ea; border-color: #bfe0cf; color: var(--cf-green); }
.btn-success:hover { background: #d2ecdd; border-color: #a3d6bb; color: var(--cf-green); }

.btn-info { background: #e6eefc; border-color: #c6d8f7; color: var(--cf-blue); }
.btn-info:hover { background: #d8e5fb; border-color: #acc8f2; color: var(--cf-blue); }

/* Hapus tetap berisi penuh: satu-satunya aksi yang tidak bisa dibatalkan,
   jadi bobot visualnya memang harus berbeda dari yang lain. */
.btn-danger  { background: var(--cf-red); border-color: var(--cf-red); color: #fff; }
.btn-danger:hover { background: #b93737; border-color: #b93737; color: #fff; }

.btn-default, .btn-secondary {
  background: var(--cf-surface);
  border-color: var(--cf-border-strong);
  color: var(--cf-ink-2);
}
.btn-default:hover, .btn-secondary:hover {
  background: var(--cf-hover);
  border-color: var(--cf-muted-2);
  color: var(--cf-ink);
}

/* ---------- Aksi baris tabel ----------
   Ukuran xs dipakai khusus untuk Edit/Hapus/Print di dalam tabel. Deretan blok
   warna solid di setiap baris bikin tabel bising dan menarik perhatian lebih
   besar daripada datanya sendiri; versi tinted tetap membawa warna semantik
   yang sama tapi membiarkan isi tabel yang jadi fokus. Specificity dua kelas
   di sini memang disengaja supaya menang atas varian solid di atas. */
.btn-xs.btn-warning { background: var(--cf-orange-soft); border-color: #f5d5ae; color: var(--cf-amber); }
.btn-xs.btn-warning:hover { background: #ffe6cc; border-color: #eebd85; color: var(--cf-amber); }
.btn-xs.btn-danger  { background: #fdeceb; border-color: #f5cbc7; color: var(--cf-red); }
.btn-xs.btn-danger:hover  { background: #fbdcd9; border-color: #eeafa9; color: var(--cf-red); }
.btn-xs.btn-success { background: #e3f4ea; border-color: #bfe3d0; color: var(--cf-green); }
.btn-xs.btn-success:hover { background: #d2ecdd; border-color: #a3d6bb; color: var(--cf-green); }
.btn-xs.btn-info    { background: #e8f0fd; border-color: #c6daf7; color: var(--cf-blue); }
.btn-xs.btn-info:hover    { background: #d8e5fb; border-color: #acc8f2; color: var(--cf-blue); }
.btn-xs.btn-primary { background: #ededef; border-color: #dadadf; color: var(--cf-ink); }
.btn-xs.btn-primary:hover { background: #e2e2e5; border-color: #c8c8cf; color: var(--cf-ink); }

/* ---------- Aksi di dalam baris tabel ----------
   Di tabel lebar (Customer punya kolom Alamat yang panjang), kolom Action
   tersisa sempit sementara tombol berlabel selebar ~75px. Dua tombol tidak
   muat berdampingan sehingga turun baris dan tinggi baris membengkak hampir
   dua kali lipat. Di baris tabel, tombolnya dipadatkan jadi ikon persegi.

   Label teksnya tidak dihapus, hanya dikecilkan jadi nol — berbeda dengan
   display:none, teks itu tetap berada di pohon aksesibilitas sehingga pembaca
   layar masih mengumumkan "Edit" dan "Delete". Aturan :has(> i) memastikan
   pemadatan hanya kena tombol yang memang punya ikon; tombol berlabel teks
   saja tidak ikut menghilang. */
.table tbody td .btn-xs:has(> i, > svg) {
  font-size: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  gap: 0;
  justify-content: center;
}
.table tbody td .btn-xs:has(> i, > svg) > i,
.table tbody td .btn-xs:has(> i, > svg) > svg { font-size: 12.5px; min-width: 0; }

/* Sel yang memuat tombol tidak boleh pecah baris, dan aksinya dirapatkan ke
   kanan seperti lazimnya tabel data. */
.table tbody td:has(> .btn) {
  white-space: nowrap;
  text-align: right;
}
.table td .btn { margin: 0 0 0 5px; }
.table td .btn:first-child { margin-left: 0; }
.table td .btn-group .btn { margin: 0; }
.table tbody td { padding: 8px 12px; }

/* ---------- Grup tombol ----------
   Radius penuh di setiap anak grup bikin ujung membulat saling bertabrakan.
   Grup harus terbaca sebagai satu bentuk: hanya ujung terluar yang membulat. */
.btn-group { display: inline-flex; vertical-align: middle; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child {
  border-top-left-radius: var(--cf-radius-btn);
  border-bottom-left-radius: var(--cf-radius-btn);
}
.btn-group > .btn:last-child {
  border-top-right-radius: var(--cf-radius-btn);
  border-bottom-right-radius: var(--cf-radius-btn);
}
.btn-group > .btn + .btn { margin-left: -1px; }
.btn-group > .btn:hover, .btn-group > .btn:focus { z-index: 1; }
.btn-group { max-width: 100%; }

/* Grup tombol tidak boleh pecah baris (itu merusak bentuk segmennya), jadi di
   layar tersempit padding-nya yang dikurangi supaya tetap muat. */
@media (max-width: 400px) {
  .btn-group > .btn { padding-left: 10px; padding-right: 10px; }
}

/* Tombol yang menempel di input: sisi dalam harus siku, kalau tidak sudut
   membulatnya memotong garis tepi input di sebelahnya. */
.input-group > .input-group-append > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > .input-group-prepend > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* ==========================================================================
   Form
   ========================================================================== */
.form-control, .custom-select {
  border: 1px solid var(--cf-border-strong);
  border-radius: var(--cf-radius);
  font-size: 13.5px;
  color: var(--cf-ink);
  padding: 7px 11px;
  height: auto;
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control:focus, .custom-select:focus {
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 3px rgba(246,130,31,.20);
}
.form-control::placeholder { color: #a3a3a3; }

/* ---------- Input tanggal ----------
   Bootstrap memberi .form-control width:100%, tapi input[type=date] punya lebar
   intrinsik dari ikon kalender bawaan browser. Di dalam kolom sempit (.col-auto
   pada bar filter Finance) hasilnya menyusut sampai teks tanggalnya terpotong
   jadi "0'" dan "2!". min-width menjamin isinya selalu muat. */
input[type="date"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control,
input[type="time"].form-control {
  min-width: 168px;
  width: auto;
  max-width: 100%;
}
input[type="time"].form-control { min-width: 128px; }

/* Ikon kalender bawaan diberi warna tema dan area klik yang lebih besar. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .55;
  padding: 3px;
  border-radius: 5px;
  transition: opacity .12s ease, background .12s ease;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
  background: var(--cf-orange-soft);
}

/* Bar filter: label dan kontrol sejajar tanpa saling menghimpit. */
.card-body > .row.align-items-center > .col-auto { padding-left: 8px; padding-right: 8px; }
.card-body > .row.align-items-center label { margin-bottom: 0; white-space: nowrap; }

label {
  font-size: 13px;
  font-weight: 500;
  color: var(--cf-ink-2);
  margin-bottom: 5px;
}

.input-group-text {
  background: #fafafa;
  border-color: var(--cf-border-strong);
  border-radius: var(--cf-radius);
  font-size: 13px;
  color: var(--cf-muted);
}

/* ==========================================================================
   Tabel + DataTables
   ========================================================================== */
/* ---------- Tabel data ----------
   Tanpa garis pemisah antar baris. Pada tabel padat, kisi horizontal membuat
   mata menghitung garis alih-alih membaca isi; pemisahnya diserahkan pada
   ruang, belang tipis, dan sorotan saat kursor lewat. Hanya ada satu garis di
   seluruh tabel — di bawah header, karena label kolom memang harus terpisah
   tegas dari datanya. */
.table {
  font-size: 13.5px;
  color: var(--cf-ink-2);
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.table thead th {
  background: transparent;
  border-bottom: 1px solid var(--cf-border) !important;
  border-top: none !important;
  color: var(--cf-muted-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 12px 14px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.table tbody td {
  border: none !important;
  padding: 12px 14px;
  vertical-align: middle;
}

/* Belang setipis mungkin: cukup untuk menuntun mata menyusuri baris lebar,
   masih terbaca sebagai satu bidang putih, bukan tabel bergaris. */
.table tbody tr:nth-child(even) { background: #fbfcfd; }
.table tbody tr { transition: background .13s ease; }
.table-hover tbody tr:hover { background: var(--cf-orange-soft); }

/* Digit sejajar hanya di kolom yang memang berisi angka. */
.table td.text-right, .table td.text-end,
.table td.num, .table tfoot td, .table tfoot th { font-variant-numeric: tabular-nums; }

/* Kolom pertama membawa penanda baris — diberi bobot supaya mata punya titik
   jangkar saat menyusuri tabel panjang tanpa garis. */
.table tbody td:first-child { color: var(--cf-ink); font-weight: 500; }

.table tfoot td, .table tfoot th {
  background: transparent;
  border-top: 1px solid var(--cf-border) !important;
  font-weight: 600;
  color: var(--cf-ink);
  padding: 12px 14px;
}

/* Varian bergaris tetap dihormati kalau sebuah layar memang memintanya. */
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--cf-border) !important; }

/* Kontrol DataTables (jumlah baris, pencarian, paginasi) datang tanpa gaya
   dan terlihat menempel begitu saja di atas tabel. Diberi bentuk yang sama
   dengan kontrol lain supaya tabel terbaca sebagai satu panel utuh. */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--cf-border-strong);
  border-radius: var(--cf-radius);
  padding: 7px 11px;
  font-size: 13px;
  color: var(--cf-ink);
  background: var(--cf-surface);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  outline: none;
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 3px rgba(246,130,31,.20);
}
.dataTables_wrapper .dataTables_filter input { min-width: 220px; }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  font-size: 13px;
  color: var(--cf-muted);
  padding-bottom: 6px;
}

/* Ikon urutan bawaan DataTables menempel di tepi kanan header dan menabrak
   teksnya pada kolom sempit. */
.table thead th.sorting,
.table thead th.sorting_asc,
.table thead th.sorting_desc { padding-right: 26px !important; }

.page-link {
  color: var(--cf-ink-2);
  border: none;
  background: transparent;
  font-size: 13px;
  padding: 7px 12px;
  border-radius: var(--cf-radius-btn-sm);
  margin: 0 2px;
}
.page-link:hover { background: var(--cf-hover); color: var(--cf-ink); }
.page-item.active .page-link {
  background: var(--cf-orange-btn);
  border-color: var(--cf-orange-btn);
  color: #fff;
}
.page-item.disabled .page-link { color: var(--cf-muted-2); background: transparent; }

/* ==========================================================================
   Badge, alert, modal
   ========================================================================== */
.badge {
  font-weight: 500;
  font-size: 11.5px;
  padding: 4px 8px;
  border-radius: 100px;
  letter-spacing: .01em;
}
.badge-success { background: #e3f4ea; color: var(--cf-green); }
.badge-danger  { background: #fdeceb; color: var(--cf-red); }
.badge-warning { background: var(--cf-orange-soft); color: var(--cf-amber); }
.badge-info    { background: #e8f0fd; color: var(--cf-blue); }
.badge-primary { background: #e8f0fd; color: var(--cf-blue); }
.badge-secondary { background: #f0f0f0; color: var(--cf-muted); }

.alert {
  border-radius: var(--cf-radius);
  border: 1px solid transparent;
  font-size: 13.5px;
  padding: 12px 14px;
}
.alert-success { background: #e3f4ea; border-color: #b8e0c8; color: #05512a; }
.alert-danger  { background: #fdeceb; border-color: #f5c4c0; color: #8c1a13; }
.alert-warning { background: var(--cf-orange-soft); border-color: #f8d3a8; color: #7a3600; }
.alert-info    { background: #e8f0fd; border-color: #bcd3f7; color: var(--cf-blue-dark); }

.modal-content {
  border: none;
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-md);
}
.modal-header {
  border-bottom: 1px solid var(--cf-border);
  padding: 16px 20px;
}
.modal-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--cf-border); padding: 14px 20px; }

/* Select2 disamakan dengan form-control */
.select2-container--bootstrap4 .select2-selection {
  border-color: var(--cf-border-strong) !important;
  border-radius: var(--cf-radius) !important;
  font-size: 13.5px;
}

/* ---------- Tombol keluar di sidebar ----------
   Komponen khusus WMS; sebelumnya diatur blok <style> inline yang kini dihapus. */
.logout-button {
  background: var(--cf-surface) !important;
  color: var(--cf-red) !important;
  font-weight: 500 !important;
  border: 1px solid var(--cf-border-strong);
  margin: 14px 10px 18px;
  border-radius: var(--cf-radius);
  justify-content: flex-start;
}
.logout-button .nav-icon { color: var(--cf-red) !important; }
.logout-button:hover {
  background: #fdeceb !important;
  border-color: #f5c4c0;
  color: #a81f17 !important;
}

/* ---------- Footer ---------- */
.main-footer {
  background: var(--cf-surface);
  border-top: 1px solid var(--cf-border);
  color: var(--cf-muted-2);
  font-size: 12.5px;
  padding: 14px 1rem;
}

/* ---------- Aksesibilitas gerak ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Kalender (daterangepicker)
   --------------------------------------------------------------------------
   Input tanggal bawaan browser tampilannya ditentukan sistem operasi dan tidak
   bisa ditata. Input itu dinaikkan jadi daterangepicker lewat skrip di layout;
   nilai yang terkirim tetap YYYY-MM-DD persis seperti sebelumnya, sehingga
   filter di controller tidak perlu diubah sama sekali.
   ========================================================================== */
.daterangepicker {
  font-family: var(--cf-font);
  border: none;
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-lg);
  padding: 8px;
  margin-top: 8px;
  animation: cfDrpIn .16s cubic-bezier(.16,1,.3,1);
  transform-origin: top center;
}
@keyframes cfDrpIn {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .daterangepicker { animation: none; }
}

/* Segitiga penunjuk bawaan dihapus: dengan sudut membulat dan bayangan halus,
   panel melayang terbaca lebih bersih tanpa ekor. */
.daterangepicker:before, .daterangepicker:after { display: none; }

.daterangepicker .calendar-table { border: none; border-radius: var(--cf-radius); }
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td { border-radius: 9px; font-size: 13px; }

.daterangepicker .calendar-table th {
  color: var(--cf-muted-2);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.daterangepicker .calendar-table th.month { color: var(--cf-ink); font-size: 14px; letter-spacing: 0; text-transform: none; }

.daterangepicker td.available:hover,
.daterangepicker th.available:hover { background: var(--cf-orange-soft); color: var(--cf-orange-dark); }

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background: var(--cf-orange-btn);
  color: #fff;
  font-weight: 600;
}
.daterangepicker td.in-range { background: var(--cf-orange-soft); color: var(--cf-ink); }
.daterangepicker td.off, .daterangepicker td.off.in-range { color: var(--cf-muted-2); background: transparent; }
.daterangepicker td.today { box-shadow: inset 0 0 0 1px var(--cf-orange); }

.daterangepicker .drp-buttons { border-top: 1px solid var(--cf-border); padding: 10px 8px 4px; }
.daterangepicker .drp-buttons .btn { font-size: 13px; }
.daterangepicker .applyBtn { background: var(--cf-orange-btn); border-color: var(--cf-orange-btn); color: #fff; }
.daterangepicker .applyBtn:hover { background: var(--cf-orange-btn-hi); border-color: var(--cf-orange-btn-hi); }
.daterangepicker .cancelBtn { background: var(--cf-surface); border-color: var(--cf-border-strong); color: var(--cf-ink-2); }

.daterangepicker .prev span, .daterangepicker .next span { border-color: var(--cf-muted); }
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  border: 1px solid var(--cf-border-strong);
  border-radius: var(--cf-radius-btn-sm);
  padding: 4px 8px;
  font-size: 13px;
  color: var(--cf-ink);
  /* Lebar bawaan memotong tahun jadi "202(" karena select tidak memberi ruang
     untuk panah dropdown-nya sendiri. */
  min-width: 74px;
}
.daterangepicker select.monthselect { min-width: 96px; }
.daterangepicker th.month { padding: 4px 0; }


/* ==========================================================================
   Ikon garis (Lucide)
   --------------------------------------------------------------------------
   FontAwesome yang dibawa AdminLTE bergaya solid dan terasa berat di antarmuka
   yang lapang. Sprite Lucide ditempel di layout, lalu skrip menukar setiap
   <i class="fa-..."> dengan <svg><use>. Kelas non-FontAwesome pada elemen asli
   dipertahankan supaya aturan tata letak yang sudah ada tetap berlaku, dan
   ikon yang belum dipetakan dibiarkan apa adanya — jadi tidak ada yang hilang.
   ========================================================================== */
.lu {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: -0.145em;
  flex-shrink: 0;
}

/* Aturan lama memberi .nav-icon lebar 20px. Pada <svg> lebar tanpa tinggi
   yang sepadan membuat ikonnya gepeng, jadi keduanya disetel bersama. */
.nav-sidebar .nav-link .nav-icon.lu { width: 18px; height: 18px; margin-right: 10px; }
.nav-sidebar .nav-link > p > .right.lu { width: 13px; height: 13px; }
.main-header .lu { width: 16px; height: 16px; }
.card-statistic .card-icon-container .lu,
.kpi-tile .lu { width: 19px; height: 19px; stroke-width: 2; }
.btn .lu { width: 1.05em; height: 1.05em; }

/* ==========================================================================
   Gerak
   --------------------------------------------------------------------------
   Aplikasi ini dipakai berjam-jam untuk entri data, jadi gerakannya sengaja
   cepat dan sekali jalan. Animasi masuk dibuat pendek (240–360 ms) dan hanya
   pada muat halaman; tidak ada yang berulang, berdenyut, atau menunda
   interaksi. Semua memakai transform dan opacity supaya berjalan di kompositor
   dan tidak memicu tata letak ulang.
   ========================================================================== */
/* Animasi masuk bertahap dihapus 2026-09-01.
   Biayanya bukan di frame rate — semuanya transform dan opacity, jalan di
   kompositor. Biayanya di kesiapan: kelasnya memulai elemen pada opacity 0
   lalu menahannya bergiliran, dan sidebar berisi 56 item. Dua puluh item
   pertama dengan jeda 26 ms membuat menu baru selesai muncul sekitar 800 ms
   setelah halaman siap — tiap kali pindah tab, pada aplikasi yang dipakai
   berjam-jam untuk entri data. Kontennya sudah ada di browser; yang terjadi
   hanya penundaan yang disengaja.

   Yang tinggal adalah gerak yang menjawab perbuatan pengguna: sorot, tekan,
   fokus. Itu tidak menunda apa pun karena hanya berjalan setelah ada aksi. */

.cf-hitung { font-variant-numeric: tabular-nums; }

/* Sorotan interaksi */
.card { transition: box-shadow .18s ease; }
.btn  { transition: background .13s ease, border-color .13s ease, box-shadow .13s ease, color .13s ease, transform .1s ease; }
.btn:active { transform: translateY(1px); }
.nav-sidebar .nav-link { transition: background .13s ease, color .13s ease, box-shadow .13s ease; }

/* --------------------------------------------------------------------------
   Keadaan memuat
   --------------------------------------------------------------------------
   Tabel daftar sekarang mengambil datanya lewat AJAX, jadi ada jeda pendek
   antara halaman tampil dan baris terisi. Jeda itu ditandai secara jelas:
   kalau tidak, kotak kosong terbaca sebagai "tidak ada data" atau "hang".
   -------------------------------------------------------------------------- */

/* Garis tipis di atas kartu tabel, bukan kotak melayang di tengah layar.
   Posisinya tetap sehingga tidak ada yang bergeser saat muncul atau hilang. */
.dataTables_wrapper { position: relative; }

.dataTables_wrapper .dataTables_processing {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 2px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  /* Teks "Processing..." bawaan disembunyikan tanpa menghapus elemennya,
     supaya pembaca layar tetap menerima pemberitahuannya. */
  color: transparent;
  font-size: 0;
  overflow: hidden;
  z-index: 5;
}

.dataTables_wrapper .dataTables_processing::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(246,130,31,0) 0%,
    rgba(246,130,31,.85) 45%,
    rgba(217,84,12,1) 55%,
    rgba(246,130,31,0) 100%);
  animation: cfMuat 1s linear infinite;
}

@keyframes cfMuat {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Baris rangka: mengisi tabel sebelum data pertama datang, jadi tinggi
   kartunya sudah benar sejak awal dan tidak ada lompatan tata letak saat
   baris asli masuk. Dihapus DataTables pada penggambaran pertama. */
.cf-rangka td { padding: 12px 8px !important; }

.cf-rangka span {
  display: block;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, #EFEDE9 25%, #F7F5F2 50%, #EFEDE9 75%);
  background-size: 400% 100%;
  animation: cfRangka 1.4s ease-in-out infinite;
}

@keyframes cfRangka {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

/* Kotak pencarian tabel: sasaran utama begitu halaman terbuka, jadi diberi
   penanda fokus yang tegas. */
.dataTables_filter input {
  transition: border-color .13s ease, box-shadow .13s ease;
}

@media (prefers-reduced-motion: reduce) {
  .card, .btn, .nav-sidebar .nav-link, .dataTables_filter input { transition: none; }
  .btn:active { transform: none; }
  /* Penanda memuat tetap ada — tanpa gerak, tapi tetap terlihat. */
  .dataTables_wrapper .dataTables_processing::after { animation: none; opacity: .9; }
  .cf-rangka span { animation: none; }
}
}



/* --------------------------------------------------------------------------
   Tirai pemuatan halaman
   --------------------------------------------------------------------------
   Sebagian halaman — terutama formulir surat jalan — masih punya pekerjaan
   skrip yang harus selesai sebelum benar-benar bisa dipakai. Selama itu HTML
   sudah tergambar, jadi halaman terlihat siap padahal belum: menekan kotak
   pencarian pada saat itu terasa tidak menanggapi.

   Tirai ini menutup jarak tersebut. Ia menutupi isi sampai skrip halaman
   selesai, lalu memudar. Yang menutup hanya area isi, bukan seluruh layar,
   supaya sidebar dan judul tetap terbaca dan pengguna tahu ia sudah sampai
   di halaman yang benar.
   -------------------------------------------------------------------------- */
.cf-tirai {
  position: absolute;
  inset: 0;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--cf-bg, #F6F5F3);
  /* Tanpa transisi saat muncul: penundaan apa pun di sini justru menampakkan
     halaman setengah jadi yang mau ditutupi. */
  transition: opacity .18s ease;
}

.cf-tirai[hidden] { display: none; }
.cf-tirai.cf-tirai-pergi { opacity: 0; pointer-events: none; }

.cf-tirai-putar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(246,130,31,.25);
  border-top-color: #D9540C;
  animation: cfPutar .7s linear infinite;
}

.cf-tirai-teks {
  font-size: 13px;
  color: #6E6862;
  letter-spacing: .01em;
}

@keyframes cfPutar { to { transform: rotate(360deg); } }

/* Pembungkus isi jadi acuan posisi tirai. */
.content-wrapper { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .cf-tirai { transition: none; }
  /* Lingkarannya berhenti berputar, tapi tetap terlihat sebagai penanda. */
  .cf-tirai-putar { animation: none; border-top-color: #D9540C; }
}