/* =====================================================================
   PALAPA THEME — Fase 1: design tokens & pemolesan komponen global.

   Dimuat PALING AKHIR di layout.html sehingga menimpa default
   Bootstrap 4 dan style.css template lama. Halaman modul cukup memakai
   kelas standar Bootstrap agar otomatis tampil konsisten.

   Bahasa desain (sama dengan garansibank / halaman resolve):
   - Ink gelap  #1f2937 untuk header/nav
   - Border     #e5e7eb / #f1f5f9
   - Aksen indigo #4f46e5 (pill: #eef2ff / #3730a3 / #c7d2fe)
   - Font dasar 16px, angka pakai monospace
   ===================================================================== */

:root {
  --pal-ink: #1f2937;
  --pal-ink-hover: #111827;
  --pal-text: #374151;
  --pal-muted: #6b7280;
  --pal-faint: #9ca3af;
  --pal-border: #e5e7eb;
  --pal-border-soft: #f1f5f9;
  --pal-bg-soft: #f8fafc;
  --pal-indigo: #4f46e5;
  --pal-indigo-dark: #4338ca;
  --pal-indigo-soft: #eef2ff;
  --pal-indigo-border: #c7d2fe;
  --pal-indigo-ink: #3730a3;
  --pal-green: #15803d;
  --pal-green-soft: #f0fdf4;
  --pal-green-border: #bbf7d0;
  --pal-red: #b91c1c;
  --pal-red-soft: #fef2f2;
  --pal-red-border: #fecaca;
  --pal-amber: #92400e;
  --pal-amber-soft: #fef3c7;
  --pal-amber-border: #fde68a;
  --pal-radius: 6px;
  --pal-radius-lg: 10px;
  --pal-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --pal-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.14);
  --pal-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --pal-mono: Consolas, Menlo, "Courier New", monospace;
}

/* ── Tipografi dasar ──────────────────────────────────────────────── */
body {
  font-family: var(--pal-font);
  font-size: 16px;
  color: var(--pal-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  /* footer selalu menempel di dasar layar meski konten pendek */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
p {
  font-family: var(--pal-font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--pal-text);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--pal-font);
  color: var(--pal-ink);
  font-weight: 700;
}
a {
  color: var(--pal-indigo-dark);
}
a:hover {
  color: var(--pal-indigo-ink);
  text-decoration: none;
}
small, .small {
  font-size: 87.5%;
}
code, kbd, pre, samp, .text-monospace {
  font-family: var(--pal-mono);
}

/* ── Tombol ───────────────────────────────────────────────────────── */
.btn {
  font-family: var(--pal-font);
  border-radius: var(--pal-radius);
  font-weight: 600;
}
.btn:focus, .btn.focus {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25);
}
.btn-primary {
  background: var(--pal-indigo);
  border-color: var(--pal-indigo);
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background: var(--pal-indigo-dark);
  border-color: var(--pal-indigo-dark);
}
.btn-primary.disabled, .btn-primary:disabled {
  background: var(--pal-indigo);
  border-color: var(--pal-indigo);
}
.btn-outline-primary {
  color: var(--pal-indigo-dark);
  border-color: var(--pal-indigo-border);
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  background: var(--pal-indigo-soft);
  border-color: var(--pal-indigo-border);
  color: var(--pal-indigo-ink);
}
.btn-secondary {
  background: var(--pal-ink);
  border-color: var(--pal-ink);
}
.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled):active {
  background: var(--pal-ink-hover);
  border-color: var(--pal-ink-hover);
}

/* ── Form controls ────────────────────────────────────────────────── */
.form-control, .custom-select {
  font-family: var(--pal-font);
  font-size: 16px;
  color: var(--pal-text);
  border-color: var(--pal-border);
  border-radius: var(--pal-radius);
}
.form-control:focus, .custom-select:focus {
  border-color: var(--pal-indigo-border);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.form-control::placeholder {
  color: var(--pal-faint);
}
label {
  color: var(--pal-text);
  font-weight: 600;
}
.form-text, .help-block, .invalid-feedback {
  font-size: 14px;
}

/* ── Kartu ────────────────────────────────────────────────────────── */
.card {
  border-color: var(--pal-border);
  border-radius: var(--pal-radius-lg);
  box-shadow: var(--pal-shadow);
}
.card-header {
  background: var(--pal-bg-soft);
  border-bottom-color: var(--pal-border);
  font-weight: 700;
  color: var(--pal-ink);
}

/* ── Tabel ────────────────────────────────────────────────────────── */
.table {
  color: var(--pal-text);
}
.table thead th {
  background: var(--pal-bg-soft);
  border-bottom: 1px solid var(--pal-border);
  border-top: none;
  color: var(--pal-muted);
  font-weight: 700;
}
.table td, .table th {
  border-top-color: var(--pal-border-soft);
  vertical-align: middle;
}
.table-hover tbody tr:hover {
  background-color: var(--pal-bg-soft);
}
.thead-dark th, .table .thead-dark th {
  background-color: var(--pal-ink) !important;
  border-color: var(--pal-ink) !important;
  color: #fff;
}

/* ── Alert, badge ─────────────────────────────────────────────────── */
.alert {
  border-radius: var(--pal-radius-lg);
  font-size: 15px;
}
.alert-success {
  background: var(--pal-green-soft);
  border-color: var(--pal-green-border);
  color: var(--pal-green);
}
.alert-danger, .alert-error {
  background: var(--pal-red-soft);
  border-color: var(--pal-red-border);
  color: var(--pal-red);
}
.alert-warning {
  background: var(--pal-amber-soft);
  border-color: var(--pal-amber-border);
  color: var(--pal-amber);
}
.alert-info {
  background: var(--pal-indigo-soft);
  border-color: var(--pal-indigo-border);
  color: var(--pal-indigo-ink);
}
.badge {
  border-radius: 12px;
  font-weight: 700;
  padding: 4px 10px;
}

/* ── Modal ────────────────────────────────────────────────────────── */
.modal-content {
  border: 1px solid var(--pal-border);
  border-radius: var(--pal-radius-lg);
  box-shadow: var(--pal-shadow-lg);
}
.modal-header {
  background: var(--pal-ink);
  color: #fff;
  border-bottom: none;
  border-radius: calc(var(--pal-radius-lg) - 1px) calc(var(--pal-radius-lg) - 1px) 0 0;
  padding: 12px 18px;
}
.modal-header .modal-title {
  color: #fff;
  font-size: 17px;
}
.modal-header .close {
  color: #fff;
  text-shadow: none;
  opacity: 0.7;
}
.modal-header .close:hover {
  opacity: 1;
}
.modal-footer {
  border-top-color: var(--pal-border-soft);
}

/* ── Dropdown ─────────────────────────────────────────────────────── */
.dropdown-menu {
  border-color: var(--pal-border);
  border-radius: var(--pal-radius-lg);
  box-shadow: var(--pal-shadow-lg);
  font-size: 15px;
}
.dropdown-item {
  color: var(--pal-text);
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--pal-indigo-soft);
  color: var(--pal-indigo-ink);
}
.dropdown-header {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--pal-faint);
}

/* ── Pagination (blok bawaan layout.html) ─────────────────────────── */
.pagination {
  margin: 24px 0;
  justify-content: center;
}
.pagination .page-links {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}
.pagination .page-links a {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--pal-border);
  border-radius: var(--pal-radius);
  color: var(--pal-text);
  font-weight: 600;
  background: #fff;
}
.pagination .page-links a:hover {
  background: var(--pal-indigo-soft);
  border-color: var(--pal-indigo-border);
  color: var(--pal-indigo-ink);
}
.pagination .page-current {
  color: var(--pal-muted);
  padding: 0 6px;
}
.page-link {
  color: var(--pal-indigo-dark);
}
.page-item.active .page-link {
  background: var(--pal-indigo);
  border-color: var(--pal-indigo);
}

/* ── Navbar (Fase 2 — Bootstrap navbar, bukan mega-menu template) ─── */
.pal-navbar {
  background: var(--pal-ink);
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  transition: box-shadow 0.2s ease;
}
.pal-navbar.pal-scrolled {
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.35);
}
.pal-brand-logo {
  height: 34px;
  width: auto;
  margin-right: 8px;
}
.pal-navbar .navbar-brand span {
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: 17px;
}
.pal-navbar .nav-link {
  font-family: var(--pal-font);
  font-weight: 600;
  font-size: 15px;
  color: #d1d5db !important;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}
.pal-navbar .nav-link:hover,
.pal-navbar .nav-item.show > .nav-link {
  color: #fff !important;
}
.pal-navbar .dropdown-menu {
  /* margin-top HARUS 0: celah antara toggle dan menu memutus :hover
     sehingga dropdown langsung menutup sebelum sempat diklik */
  margin-top: 0;
  min-width: 240px;
  padding: 6px 0;
}
/* jembatan hover tak terlihat di atas menu, jaga-jaga kalau ada jarak */
.pal-navbar .dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
/* item dropdown masih memakai markup <li><a> lama — styling di sini */
.pal-navbar .dropdown-menu li {
  list-style: none;
}
.pal-navbar .dropdown-menu li > a {
  display: block;
  padding: 7px 20px;
  font-size: 15px;
  color: var(--pal-text);
  white-space: nowrap;
}
.pal-navbar .dropdown-menu li > a:hover {
  background: var(--pal-indigo-soft);
  color: var(--pal-indigo-ink);
  text-decoration: none;
}
/* di desktop, dropdown terbuka cukup dengan hover */
@media (min-width: 992px) {
  .pal-navbar .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
  }
}
.pal-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.25);
}
/* fallback avatar: lingkaran inisial bila foto profil tidak ada/rusak */
.pal-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4f46e5, #312e81);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ── Loading state global tombol submit (anti double-submit) ──────── */
.pal-btn-loading {
  pointer-events: none;
  opacity: 0.75;
}
button.pal-btn-loading::after {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: -2px;
  animation: pal-spin 0.7s linear infinite;
}
@keyframes pal-spin {
  to { transform: rotate(360deg); }
}

/* ── Pencarian menu cepat (Ctrl+K) ────────────────────────────────── */
.pal-nav-search-item {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 8px;
}
.pal-nav-search-input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: var(--pal-radius);
  font-size: 14px;
  padding: 5px 12px;
  width: 190px;
  transition: width 0.15s ease, background 0.15s ease;
}
.pal-nav-search-input::placeholder {
  color: var(--pal-faint);
}
.pal-nav-search-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--pal-indigo-border);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
  width: 240px;
}
.pal-nav-search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 300px;
  max-height: 360px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--pal-border);
  border-radius: var(--pal-radius-lg);
  box-shadow: var(--pal-shadow-lg);
  display: none;
  z-index: 1050;
}
.pal-nav-search-results.show {
  display: block;
}
.pal-nav-search-results a {
  display: block;
  padding: 8px 16px;
  font-size: 14.5px;
  color: var(--pal-text);
}
.pal-nav-search-results a:hover,
.pal-nav-search-results a.active {
  background: var(--pal-indigo-soft);
  color: var(--pal-indigo-ink);
  text-decoration: none;
}
.pal-nav-search-results .psr-group {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--pal-faint);
  padding: 8px 16px 2px;
}
.pal-nav-search-results .psr-empty {
  padding: 10px 16px;
  color: var(--pal-muted);
  font-size: 14px;
}
@media (max-width: 991.98px) {
  .pal-nav-search-item {
    margin: 8px 0;
  }
  .pal-nav-search-input,
  .pal-nav-search-input:focus {
    width: 100%;
  }
  .pal-nav-search-results {
    left: 0;
    right: auto;
    width: 100%;
  }
}

/* ── Pola halaman standar (dipakai bertahap mulai Fase 3) ─────────── */
.pal-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 16px;
}
.pal-page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--pal-ink);
  margin: 0;
}
.pal-page-sub {
  font-size: 14px;
  color: var(--pal-muted);
  margin-top: 2px;
}
.pal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.pal-pill {
  display: inline-block;
  font-family: var(--pal-mono);
  font-weight: 700;
  font-size: 15px;
  background: var(--pal-indigo-soft);
  color: var(--pal-indigo-ink);
  padding: 3px 12px;
  border-radius: var(--pal-radius);
  border: 1px solid var(--pal-indigo-border);
  letter-spacing: 0.3px;
}
.pal-card {
  background: #fff;
  border: 1px solid var(--pal-border);
  border-radius: var(--pal-radius-lg);
  overflow: hidden;
  box-shadow: var(--pal-shadow);
  margin-bottom: 16px;
}
.pal-card-head {
  background: var(--pal-ink);
  color: #fff;
  padding: 9px 14px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pal-card-body {
  padding: 16px;
}
/* wadah halaman form: sempit & di tengah */
.pal-form-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 12px 40px;
}
.pal-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--pal-border-soft);
}

/* ── Polesan halaman form gaya lama (h1#judul + crispy) ───────────── */
/* Berlaku otomatis untuk ±47 halaman form/proses yang belum dikonversi
   ke pola .pal-* — heading template lama sangat besar (2.5rem Poppins) */
#judul,
.case_details_area h1,
.case_details_area h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--pal-ink);
}
.case_details_area .border-bottom {
  border-bottom-color: var(--pal-border) !important;
}
legend {
  font-size: 18px;
  font-weight: 700;
  color: var(--pal-ink);
  padding-bottom: 6px;
}
/* tombol aksi utama bergaya lama (btn-outline-info) diselaraskan indigo */
.btn-outline-info {
  color: var(--pal-indigo-dark);
  border-color: var(--pal-indigo-border);
}
.btn-outline-info:hover,
.btn-outline-info:not(:disabled):not(.disabled):active {
  background: var(--pal-indigo);
  border-color: var(--pal-indigo);
  color: #fff;
}

/* ── Area konten ──────────────────────────────────────────────────── */
/* style.css template lama memberi padding-top:100px + margin-top:138px
   untuk mengimbangi header overlay — dengan navbar sticky in-flow yang
   baru, offset itu hanya jadi ruang kosong di atas heading tiap halaman */
.case_details_area {
  padding-top: 12px !important;
  margin-top: 0 !important;
}
/* Container konten utama dibuat fluid di layar lebar supaya halaman
   list memakai seluruh layar: xl (≥1200px) sisakan 10% kiri-kanan,
   xxl (≥1400px) sisakan 15%. Halaman form tidak terpengaruh karena
   punya max-width sendiri (.pal-form-wrap / container nested). */
@media (min-width: 1200px) {
  body > .container {
    max-width: none;
    padding-left: 10vw;
    padding-right: 10vw;
  }
}
@media (min-width: 1400px) {
  body > .container {
    padding-left: 15vw;
    padding-right: 15vw;
  }
}

/* ── Top bar tipis (pengganti bar sales/sosmed) ───────────────────── */
.pal-topbar {
  background: var(--pal-ink-hover);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--pal-faint);
  font-size: 13px;
  padding: 6px 0;
}
.pal-topbar a {
  color: var(--pal-faint);
}
.pal-topbar a:hover {
  color: #fff;
}
.pal-topbar .pal-topbar-user {
  color: #d1d5db;
  font-weight: 600;
}
.pal-topbar .pal-topbar-branch {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0 8px;
  margin-left: 4px;
  font-family: var(--pal-mono);
  font-size: 11.5px;
  letter-spacing: 0.3px;
  color: #d1d5db;
}

/* ── Footer ramping ───────────────────────────────────────────────── */
.pal-footer {
  /* margin-top:auto (bukan nilai tetap) mendorong footer ke dasar
     flex column body saat konten halaman pendek */
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--pal-border);
  background: var(--pal-bg-soft);
  color: var(--pal-muted);
  font-size: 14px;
  padding: 18px 0;
}
.pal-footer a {
  color: var(--pal-muted);
}
.pal-footer a:hover {
  color: var(--pal-ink);
}
.pal-footer .pal-footer-logo {
  height: 26px;
  width: auto;
  margin-right: 6px;
  vertical-align: middle;
}

/* ── Halaman auth: login / logout ─────────────────────────────────── */
.pal-auth {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 62px);
  margin-top: -1px;
}
/* panel kiri: brand */
.pal-auth-side {
  flex: 1 1 52%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 7%;
  color: #e5e7eb;
  background:
    radial-gradient(1100px 560px at 15% -10%, #2c3a52 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 110%, #312e81 0%, transparent 55%),
    linear-gradient(160deg, #1f2937 0%, #111827 100%);
}
.pal-auth-side::before,
.pal-auth-side::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
.pal-auth-side::before { width: 460px; height: 460px; right: -140px; bottom: -160px; }
.pal-auth-side::after  { width: 300px; height: 300px; right: 40px;  bottom: -60px;  }
.pal-auth-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pal-faint);
  margin-bottom: 18px;
}
.pal-auth-side h1 {
  font-size: 42px;
  line-height: 1.15;
  font-weight: 800;
  color: #fff;
  margin-bottom: 18px;
}
.pal-auth-accent {
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6366f1, #a5b4fc);
  margin-bottom: 22px;
}
.pal-auth-side p {
  color: #cbd5e1;
  font-size: 17px;
  max-width: 460px;
}
.pal-auth-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.pal-auth-chips span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #c7d2fe;
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(165, 180, 252, 0.25);
  border-radius: 20px;
  padding: 5px 14px;
}
/* panel kanan: kartu form */
.pal-auth-main {
  flex: 1 1 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--pal-bg-soft);
}
.pal-auth-card {
  width: 100%;
  max-width: 430px;
  background: #fff;
  border: 1px solid var(--pal-border);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
  padding: 42px 38px 34px;
}
.pal-auth-card .pal-auth-logo {
  height: 46px;
  width: auto;
  margin-bottom: 18px;
}
.pal-auth-card h2 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 4px;
}
.pal-auth-card .pal-auth-sub {
  color: var(--pal-muted);
  font-size: 15px;
  margin-bottom: 26px;
}
.pal-auth-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pal-muted);
  margin-bottom: 6px;
}
.pal-auth-field {
  position: relative;
  margin-bottom: 18px;
}
.pal-auth-field > .fa {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pal-faint);
  font-size: 15px;
  pointer-events: none;
}
.pal-auth-field input {
  width: 100%;
  padding: 12px 44px 12px 42px;
  border: 1px solid var(--pal-border);
  border-radius: 8px;
  font-size: 16px;
  color: var(--pal-text);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pal-auth-field input:focus {
  outline: none;
  border-color: var(--pal-indigo-border);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.13);
}
.pal-auth-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: var(--pal-faint);
  padding: 8px 10px;
  cursor: pointer;
}
.pal-auth-eye:hover { color: var(--pal-text); }
.pal-auth-btn {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(180deg, #4f46e5, #4338ca);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.pal-auth-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.42);
  color: #fff;
}
.pal-auth-links {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--pal-border-soft);
  font-size: 14px;
  color: var(--pal-muted);
}
.pal-auth-links a { font-weight: 600; }
.pal-auth-error {
  background: var(--pal-red-soft);
  border: 1px solid var(--pal-red-border);
  color: var(--pal-red);
  border-radius: 8px;
  font-size: 14.5px;
  padding: 10px 14px;
  margin-bottom: 18px;
}
/* kartu logout di tengah */
.pal-auth-center {
  min-height: calc(100vh - 62px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background:
    radial-gradient(900px 480px at 85% -10%, #eef2ff 0%, transparent 60%),
    var(--pal-bg-soft);
}
.pal-auth-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  background: var(--pal-indigo-soft);
  border: 1px solid var(--pal-indigo-border);
  color: var(--pal-indigo);
  font-size: 28px;
}
@media (max-width: 991.98px) {
  .pal-auth { flex-direction: column; min-height: 0; }
  .pal-auth-side { padding: 42px 24px; }
  .pal-auth-side h1 { font-size: 30px; }
  .pal-auth-side::before, .pal-auth-side::after { display: none; }
  .pal-auth-main { padding: 32px 16px 48px; }
  .pal-auth-card { padding: 32px 24px 28px; }
}

/* ── Scrollbar halus (WebKit) ─────────────────────────────────────── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--pal-bg-soft);
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 6px;
  border: 2px solid var(--pal-bg-soft);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--pal-faint);
}

/* ── Print: sembunyikan shell aplikasi ────────────────────────────── */
@media print {
  header, footer, .pal-topbar, .pal-footer, .pagination {
    display: none !important;
  }
}

/* =====================================================================
   FASE 4 — TAMPILAN SEGAR + RAMAH MATA (accessibility-first)

   Tujuan:
   1. Teks lebih besar & kontras tinggi (WCAG AA/AAA) — nyaman utk mata
      yang lelah/minus, tanpa mengubah struktur halaman.
   2. Target klik lebih besar (tombol/field min 44px) & focus ring jelas.
   3. Tampilan modern: sudut lebih membulat, bayangan halus berlapis,
      warna aksen lebih hidup, spasi lebih lega.

   Dimuat paling akhir sehingga menimpa Fase 1–3 di atas.
   ===================================================================== */

:root {
  /* Kontras dinaikkan: teks utama lebih gelap, "muted" tidak seterang dulu.
     Rasio kontras thd putih: text 10.9:1, muted 7.6:1, faint 4.8:1. */
  --pal-text: #1f2937;
  --pal-muted: #4b5563;
  --pal-faint: #6b7280;
  --pal-border: #d8dee9;
  --pal-border-soft: #e8edf4;
  --pal-bg-soft: #f6f8fb;
  /* aksen sedikit lebih hidup + varian gelap utk teks di atas putih */
  --pal-indigo: #4f46e5;
  --pal-indigo-dark: #4338ca;
  --pal-indigo-ink: #312e81;
  --pal-radius: 8px;
  --pal-radius-lg: 14px;
  --pal-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .05);
  --pal-shadow-lg: 0 12px 32px rgba(15, 23, 42, .16);
  --pal-focus: 0 0 0 3px rgba(79, 70, 229, .35);
  --pal-page-bg: #f4f6fb;
}


/* ── Dasar: teks lebih besar & lega ────────────────────────────────── */
body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--pal-text);
  background: var(--pal-page-bg);
  letter-spacing: .002em;
}
main, .container { color: var(--pal-text); }
p { font-size: 1rem; line-height: 1.7; }
h1 { font-size: 1.9rem; letter-spacing: -.01em; }
h2 { font-size: 1.6rem; letter-spacing: -.01em; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.18rem; }
h5 { font-size: 1.05rem; }
small, .small { font-size: .9rem; }
.text-muted { color: var(--pal-muted) !important; }

/* Jangan biarkan teks super kecil di halaman lama menjadi tak terbaca:
   naikkan lantai ukuran font pada elemen umum. */
body, td, th, li, label, span, div, a, button, input, select, textarea {
  font-size: inherit;
}
[style*="font-size:11"], [style*="font-size: 11"],
[style*="font-size:12"], [style*="font-size: 12"] { font-size: 13.5px !important; }
[style*="font-size:13px"], [style*="font-size: 13px"] { font-size: 14.5px !important; }

/* ── Focus ring jelas di SEMUA elemen interaktif ───────────────────── */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, summary:focus-visible {
  outline: 3px solid #4f46e5;
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus, .btn.focus { box-shadow: var(--pal-focus); }

/* ── Tombol: lebih besar & tegas ───────────────────────────────────── */
.btn {
  border-radius: var(--pal-radius);
  font-weight: 600;
  padding: .5rem 1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm {
  min-height: 38px;
  padding: .35rem .8rem;
  font-size: .95rem;
}
.btn-lg { min-height: 52px; font-size: 1.1rem; }
.btn-primary { box-shadow: 0 1px 2px rgba(79, 70, 229, .35); }
.btn-outline-primary, .btn-outline-secondary,
.btn-outline-success, .btn-outline-danger, .btn-outline-info,
.btn-outline-warning {
  border-width: 2px;
  font-weight: 600;
}
.btn-outline-secondary { color: #374151; border-color: #cbd5e1; }
.btn-outline-secondary:hover { background: #eef2f7; color: #111827; }

/* ── Field: tinggi nyaman, border tegas ────────────────────────────── */
.form-control, .custom-select, .select2-container--default .select2-selection--single {
  min-height: 44px;
  font-size: 1rem;
  border-radius: var(--pal-radius);
  border: 1.5px solid var(--pal-border);
  color: var(--pal-text);
}
.form-control:focus, .custom-select:focus {
  border-color: var(--pal-indigo);
  box-shadow: var(--pal-focus);
}
.form-control::placeholder { color: #94a3b8; }
label, .col-form-label { font-weight: 600; color: var(--pal-muted); }
.form-control-file { min-height: auto; }

/* ── Kartu & panel: modern, berlapis lembut ────────────────────────── */
.card, .pal-card {
  border-radius: var(--pal-radius-lg);
  border: 1px solid var(--pal-border);
  box-shadow: var(--pal-shadow);
  background: #fff;
}
.card-header, .pal-card-head {
  border-top-left-radius: var(--pal-radius-lg);
  border-top-right-radius: var(--pal-radius-lg);
  font-size: .95rem;
  letter-spacing: .01em;
}
.pal-card-head { padding: .85rem 1.15rem; }
.pal-card-body { padding: 1.15rem; }

/* ── Tabel data: baris lebih tinggi, garis lebih terbaca ───────────── */
.table { font-size: .97rem; color: var(--pal-text); }
.table thead th {
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #334155;
  background: var(--pal-bg-soft);
  border-bottom: 2px solid var(--pal-border);
  padding: .7rem .85rem;
  white-space: nowrap;
}
.table td, .table th { padding: .7rem .85rem; vertical-align: middle; }
.table tbody tr { border-bottom: 1px solid var(--pal-border-soft); }
.table-hover tbody tr:hover { background: #eef2ff; }
.table-sm td, .table-sm th { padding: .5rem .7rem; }
/* zebra ringan biar mata tidak "loncat baris" */
.table-hover tbody tr:nth-child(even):not(:hover):not([class*="table-"]) {
  background: #fbfcfe;
}
.money, .text-monospace, code, kbd, pre, samp {
  font-family: var(--pal-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* ── Alert & badge: kontras naik, ikon lebih besar ─────────────────── */
.alert {
  border-radius: var(--pal-radius-lg);
  border-width: 1.5px;
  font-size: 1rem;
  padding: 1rem 1.15rem;
  box-shadow: var(--pal-shadow);
}
.alert-success { background: #f0fdf4; border-color: #86efac; color: #14532d; }
.alert-danger  { background: #fef2f2; border-color: #fca5a5; color: #7f1d1d; }
.alert-warning { background: #fffbeb; border-color: #fcd34d; color: #78350f; }
.alert-info    { background: #eef2ff; border-color: #a5b4fc; color: #312e81; }
.badge { font-size: .82rem; font-weight: 700; padding: .38em .7em; border-radius: 999px; }

/* ── Navigasi: lebih tebal & jelas ─────────────────────────────────── */
.pal-navbar { box-shadow: 0 2px 10px rgba(15, 23, 42, .12); }
.pal-navbar .nav-link {
  font-size: 1rem;
  font-weight: 600;
  padding: .6rem .9rem !important;
}
.pal-navbar .dropdown-menu { font-size: 1rem; border-radius: var(--pal-radius-lg); }
.dropdown-item { padding: .55rem 1.1rem; }
.dropdown-header {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #475569;
  font-weight: 800;
}
.pal-topbar { font-size: .9rem; }



/* ── Halaman: latar lembut + kartu putih supaya konten "mengapung" ─── */
main > .container, main > .container-fluid { padding-top: .5rem; }
.pal-page-title { font-size: 1.75rem; letter-spacing: -.01em; }
.pal-page-sub { font-size: 1rem; color: var(--pal-muted); }
.pal-pill { font-size: .85rem; padding: .25em .8em; }

/* ── Modal & tooltip lebih terbaca ─────────────────────────────────── */
.modal-content { border-radius: var(--pal-radius-lg); box-shadow: var(--pal-shadow-lg); }
.modal-title { font-size: 1.15rem; }
.tooltip-inner { font-size: .9rem; padding: .5rem .7rem; max-width: 320px; }

/* ── Hormati preferensi sistem: kurangi animasi ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =====================================================================
   FASE 5 — POLA HALAMAN SERAGAM + KURANGI "KOTAK DALAM KOTAK"

   (2) Setiap halaman punya bentuk yang sama:
       breadcrumb → judul + subjudul → aksi utama di kanan → konten.
   (3) Hierarki dibentuk oleh JARAK & UKURAN, bukan tumpukan garis:
       kartu di dalam kartu kehilangan border/bayangan, tabel di dalam
       kartu tidak ber-border ganda, pemisah memakai garis lembut.
   ===================================================================== */

/* ── (2) Kepala halaman ────────────────────────────────────────────── */
.pal-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: .88rem;
  color: var(--pal-faint);
  margin-bottom: 4px;
}
.pal-breadcrumb a { color: var(--pal-muted); text-decoration: none; }
.pal-breadcrumb a:hover { color: var(--pal-indigo-dark); text-decoration: underline; }
.pal-breadcrumb .sep { opacity: .55; }
.pal-breadcrumb .current { color: var(--pal-text); font-weight: 600; }

.pal-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin: 22px 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pal-border-soft);
}
.pal-page-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--pal-ink);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -.015em;
}
.pal-page-sub {
  font-size: 1rem;
  color: var(--pal-muted);
  margin-top: 4px;
}
.pal-actions { gap: 8px; }

/* Halaman lama (belum dikonversi) ikut mendapat bentuk yang sama */
main > .container > h1:first-child,
main > .container > .row:first-child > .col-12 > h1:first-child {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--pal-ink);
  margin: 22px 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pal-border-soft);
  letter-spacing: -.015em;
}

/* ── (3) Kartu: satu lapis garis saja ──────────────────────────────── */
/* kepala kartu: dari blok gelap tebal -> ringan & modern */
.pal-card-head {
  background: linear-gradient(180deg, #fff 0%, var(--pal-bg-soft) 100%);
  color: var(--pal-ink);
  border-bottom: 1px solid var(--pal-border-soft);
  padding: .9rem 1.15rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.005em;
}
.pal-card-head .fa { color: var(--pal-indigo); }
.pal-card { margin-bottom: 22px; }
.pal-card-body { padding: 1.25rem; }

/* kartu / panel BERSARANG kehilangan bingkainya sendiri */
.pal-card .card,
.pal-card .pal-card,
.card .card,
.card .pal-card,
.pal-card-body > .card,
.pal-card-body > .border,
.modal-body .card {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: 0;
}
/* tabel di dalam kartu: tanpa border luar & sudut ikut kartu */
.pal-card > .table-responsive,
.card > .table-responsive { border: 0; }
.pal-card > .table-responsive > .table,
.card > .table-responsive > .table,
.pal-card > .table,
.card > .table {
  margin-bottom: 0;
  border: 0;
}
.pal-card > .table-responsive > .table td,
.card > .table-responsive > .table td { border-left: 0; border-right: 0; }
/* baris terakhir tidak perlu garis bawah — sudah ada tepi kartu */
.pal-card .table tbody tr:last-child td,
.card .table tbody tr:last-child td { border-bottom: 0; }

/* ── Ruang bernapas ────────────────────────────────────────────────── */
main > .container,
main > .container-fluid { padding-bottom: 48px; }
.pal-card + .pal-card,
.card + .card { margin-top: 0; }
.stat-row, .pm-stat-row, .dash-grid { gap: 14px !important; margin-bottom: 22px !important; }

/* panel filter: lebih ringan, tanpa kotak tebal */
#searchForm .card,
#searchForm .card-body,
.pm-filter {
  background: var(--pal-bg-soft) !important;
  border: 1px solid var(--pal-border-soft) !important;
  border-radius: var(--pal-radius-lg);
  box-shadow: none !important;
}

/* pemisah dalam kartu memakai garis lembut, bukan garis tegas */
.pal-card hr, .card hr { border-top-color: var(--pal-border-soft); }
.border-bottom { border-bottom-color: var(--pal-border-soft) !important; }
.border-top { border-top-color: var(--pal-border-soft) !important; }

/* ── Kartu statistik: rata & konsisten antar modul ─────────────────── */
.stat-card, .pm-stat, .dash-card {
  border-radius: var(--pal-radius-lg) !important;
  border: 1px solid var(--pal-border) !important;
  box-shadow: var(--pal-shadow) !important;
  padding: 16px 18px !important;
  transition: transform .12s ease, box-shadow .12s ease;
}
.stat-card:hover, .pm-stat:hover, .dash-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .10) !important;
}

/* =====================================================================
   FASE 6 — SKALA TIPOGRAFI · TABEL · UMPAN BALIK · IKON

   1. Tipografi: HANYA 5 tingkat ukuran. Ukuran inline lama (puluhan
      variasi) dipetakan otomatis ke tingkat terdekat, jadi seluruh
      halaman ikut patuh tanpa harus disunting satu per satu.
   2. Tabel: header menempel saat scroll, angka rata kanan monospace,
      kolom identitas menonjol, kerapatan Nyaman / Padat.
   3. Umpan balik halus: toast di pojok, skeleton saat memuat,
      transisi 150ms.
   4. Ikon garis Lucide (SVG sprite) menggantikan Font Awesome 4.
   ===================================================================== */

:root {
  /* ── 5 tingkat ukuran — tidak boleh ada ukuran lain ── */
  --fs-xs: 0.8125rem;   /* ±14px — label kecil, badge, keterangan */
  --fs-sm: 0.9125rem;   /* ±16px — teks sekunder, isi tabel       */
  --fs-md: 1rem;        /* 17px  — teks utama                     */
  --fs-lg: 1.25rem;     /* ±21px — judul kartu / sub-judul         */
  --fs-xl: 1.75rem;     /* ±30px — judul halaman                  */
  --pal-t: 150ms;       /* durasi transisi standar                */
}

/* ── 1. Skala tipografi ────────────────────────────────────────────── */
h1, .pal-page-title { font-size: var(--fs-xl); }
h2 { font-size: 1.5rem; }
h3, .pal-card-head, .card-header { font-size: var(--fs-lg); }
h4 { font-size: 1.1rem; }
h5, h6 { font-size: var(--fs-md); }
p, .pal-page-sub { font-size: var(--fs-md); }
small, .small, .pal-breadcrumb, .form-text { font-size: var(--fs-sm); }
.table, .table td, .table th { font-size: var(--fs-sm); }
.badge, .pal-pill, .pm-pill, .sfa-pill, .st-badge, .j-pill, .bp-pill,
.gb-pill, .cl-pill { font-size: var(--fs-xs); }
.btn { font-size: var(--fs-sm); }
.btn-sm, .btn-group-sm > .btn { font-size: var(--fs-xs); }

/* Petakan ukuran inline lama (10–24px / 0.6–1.4rem) ke tingkat terdekat.
   Template lama tidak perlu diubah tapi tampilannya jadi konsisten. */
[style*="font-size:10"], [style*="font-size: 10"],
[style*="font-size:11"], [style*="font-size: 11"],
[style*="font-size:12"], [style*="font-size: 12"],
[style*="font-size:0.6"], [style*="font-size: 0.6"],
[style*="font-size:0.7"], [style*="font-size: 0.7"],
[style*="font-size:.7"], [style*="font-size: .7"] { font-size: var(--fs-xs) !important; }

[style*="font-size:13"], [style*="font-size: 13"],
[style*="font-size:14"], [style*="font-size: 14"],
[style*="font-size:15"], [style*="font-size: 15"],
[style*="font-size:0.8"], [style*="font-size: 0.8"],
[style*="font-size:0.9"], [style*="font-size: 0.9"],
[style*="font-size:.8"], [style*="font-size: .8"],
[style*="font-size:.9"], [style*="font-size: .9"] { font-size: var(--fs-sm) !important; }

[style*="font-size:16"], [style*="font-size: 16"],
[style*="font-size:17"], [style*="font-size: 17"],
[style*="font-size:18"], [style*="font-size: 18"],
[style*="font-size:1.0"], [style*="font-size: 1.0"],
[style*="font-size:1.1"], [style*="font-size: 1.1"] { font-size: var(--fs-md) !important; }

[style*="font-size:20"], [style*="font-size: 20"],
[style*="font-size:21"], [style*="font-size: 21"],
[style*="font-size:22"], [style*="font-size: 22"],
[style*="font-size:24"], [style*="font-size: 24"],
[style*="font-size:1.2"], [style*="font-size: 1.2"],
[style*="font-size:1.3"], [style*="font-size: 1.3"],
[style*="font-size:1.4"], [style*="font-size: 1.4"] { font-size: var(--fs-lg) !important; }

/* angka besar di kartu statistik memang harus menonjol */
.s-value, .dc-value, .stat-card .value, .pm-stat .value,
.dash-card .value { font-size: var(--fs-xl) !important; }

/* ── 2. Tabel data ─────────────────────────────────────────────────── */
/* Wadah tabel jadi area gulir sendiri supaya header bisa menempel.
   Batas tinggi hanya berlaku untuk tabel panjang; tabel pendek utuh. */
.table-responsive {
  max-height: calc(100vh - 190px);
  overflow-y: auto;
}
.table-responsive.pal-no-stick { max-height: none; overflow-y: visible; }
.modal .table-responsive { max-height: 60vh; }

/* header menempel saat scroll */
.table thead th,
.pm-table thead th, .sfa-table thead th, .bp-table thead th,
.jobs-table thead th, .line-table thead th, .gb-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--pal-bg-soft);
  box-shadow: inset 0 -1px 0 var(--pal-border);
}
/* tabel dua baris header (colspan) — baris kedua ikut menempel */
.table thead tr:nth-child(2) th { top: 34px; }

/* kolom identitas di kiri: jangan terpotong, sedikit lebih tegas */
.table tbody td:first-child,
.pm-table tbody td:first-child,
.sfa-table tbody td:first-child { white-space: nowrap; }
.table tbody td:first-child > a,
.pm-table tbody td:first-child > a { font-weight: 600; }

/* angka rata kanan + monospace tabular (lebar digit seragam) */
.table td.text-right, .table th.text-right,
.pm-table td.text-right, .sfa-table td.text-right,
.line-table td.text-right, .jobs-table td.text-right,
td.money, .money, .num {
  font-family: var(--pal-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.table th.text-right { font-family: var(--pal-font); }

/* kerapatan: Nyaman (bawaan) vs Padat */
html.pal-dense .table td, html.pal-dense .table th,
html.pal-dense .pm-table tbody td, html.pal-dense .pm-table thead th,
html.pal-dense .sfa-table tbody td, html.pal-dense .sfa-table thead th,
html.pal-dense .line-table tbody td, html.pal-dense .line-table thead th,
html.pal-dense .bp-table td, html.pal-dense .bp-table th {
  padding-top: .3rem !important;
  padding-bottom: .3rem !important;
  line-height: 1.35;
}
html.pal-dense .table, html.pal-dense .table td, html.pal-dense .table th,
html.pal-dense .pm-table, html.pal-dense .sfa-table { font-size: var(--fs-xs); }

.pal-density { display: inline-flex; align-items: center; gap: 5px; }
.pal-density > span { font-size: var(--fs-xs); color: var(--pal-faint); }
.pal-density button {
  border: 1px solid var(--pal-border);
  background: #fff;
  color: var(--pal-muted);
  border-radius: 6px;
  padding: 3px 11px;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  min-height: 30px;
}
.pal-density button:hover { border-color: var(--pal-indigo-border); color: var(--pal-indigo-dark); }
.pal-density button.active {
  background: var(--pal-indigo-soft);
  border-color: var(--pal-indigo-border);
  color: var(--pal-indigo-ink);
}

@media print {
  .table-responsive { max-height: none !important; overflow: visible !important; }
  .table thead th { position: static !important; }
  .pal-density, .pal-toast-wrap { display: none !important; }
}

/* ── 3. Toast di pojok (menggantikan tumpukan alert) ───────────────── */
.pal-toast-wrap {
  position: fixed;
  top: 74px;
  right: 16px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.pal-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--pal-border);
  border-left: 4px solid var(--pal-indigo);
  border-radius: var(--pal-radius-lg);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
  padding: 12px 14px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--pal-text);
  animation: palToastIn 220ms cubic-bezier(.2, .8, .3, 1);
}
.pal-toast.is-out { animation: palToastOut 180ms ease forwards; }
.pal-toast-icon { flex-shrink: 0; margin-top: 2px; font-size: 1.05rem; }
/* pesan berbaris banyak (mis. ringkasan impor) tetap terbaca */
.pal-toast-body { flex: 1; min-width: 0; overflow-wrap: break-word; white-space: pre-line; }
.pal-toast-close {
  background: none; border: 0; color: var(--pal-faint);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px;
  min-height: auto;
}
.pal-toast-close:hover { color: var(--pal-text); }
.pal-toast.success { border-left-color: #16a34a; }
.pal-toast.success .pal-toast-icon { color: #16a34a; }
.pal-toast.danger, .pal-toast.error { border-left-color: #dc2626; }
.pal-toast.danger .pal-toast-icon, .pal-toast.error .pal-toast-icon { color: #dc2626; }
.pal-toast.warning { border-left-color: #d97706; }
.pal-toast.warning .pal-toast-icon { color: #d97706; }
.pal-toast.info { border-left-color: var(--pal-indigo); }
.pal-toast.info .pal-toast-icon { color: var(--pal-indigo); }
@keyframes palToastIn {
  from { opacity: 0; transform: translateX(26px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes palToastOut {
  to { opacity: 0; transform: translateX(26px) scale(.98); }
}

/* ── Skeleton saat memuat ──────────────────────────────────────────── */
.pal-skeleton {
  background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: palShimmer 1.2s ease-in-out infinite;
  border-radius: 6px;
  color: transparent !important;
  min-height: 1em;
}
.pal-skeleton-row { height: 14px; margin: 12px 0; }
.pal-skeleton-row.w-75 { width: 75%; }
.pal-skeleton-row.w-50 { width: 50%; }
.pal-skeleton-row.w-25 { width: 25%; }
@keyframes palShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ── Transisi 150ms ────────────────────────────────────────────────── */
a, .btn, .card, .pal-card, .stat-card, .pm-stat, .dash-card,
.dropdown-item, .nav-link, .table tbody tr, .badge, .form-control,
.custom-select, .pal-density button, .close, .list-group-item {
  transition: background-color var(--pal-t) ease, color var(--pal-t) ease,
    border-color var(--pal-t) ease, box-shadow var(--pal-t) ease,
    transform var(--pal-t) ease;
}
.btn:active { transform: translateY(1px); }

/* ── 4. Ikon garis (Lucide, self-host) ─────────────────────────────── */
.pal-icon {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.17em;
  flex-shrink: 0;
}
.pal-icon-lg { width: 1.3em; height: 1.3em; }
.pal-icon-2x { width: 1.9em; height: 1.9em; }
.pal-icon-3x { width: 2.6em; height: 2.6em; }
.pal-icon-spin { animation: palSpin 1s linear infinite; transform-origin: 50% 50%; }
@keyframes palSpin { to { transform: rotate(360deg); } }
/* ikon di dalam tombol/heading mewarisi warna teks */
.btn .pal-icon, .pal-card-head .pal-icon, .nav-link .pal-icon,
.dropdown-item .pal-icon { color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .pal-skeleton, .pal-icon-spin, .pal-toast { animation: none !important; }
}