/* =====================================================================
   assets/css/style.css  —  LAPISAN TAMPILAN (FRONTEND)
   Pelengkap Tailwind: scrollbar, animasi, komponen tabel/kartu,
   dan aturan khusus saat halaman dicetak (Print / Export PDF).
   Palet: hijau hutan (forest) + aksen emas (gold) di atas kertas krem.
   ===================================================================== */

:root {
  --forest-950: #0b1f1a;
  --forest-900: #16302a;
  --forest-700: #2d4e41;
  --gold-500:   #c9a227;
  --gold-400:   #e3b84a;
  --sand-50:    #faf8f3;
  --sand-200:   #e8e0cd;
}

/* ---------------------------------------------------------------- */
/* Dasar                                                             */
/* ---------------------------------------------------------------- */

html { scroll-behavior: smooth; }

body { -webkit-font-smoothing: antialiased; }

::selection {
  background: var(--gold-400);
  color: var(--forest-950);
}

/* ---------------------------------------------------------------- */
/* Scrollbar                                                         */
/* ---------------------------------------------------------------- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #cdbfa2;
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #b79b6f; background-clip: content-box; }

.sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .16);
  background-clip: content-box;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(227, 184, 74, .45);
  background-clip: content-box;
}

/* ---------------------------------------------------------------- */
/* Animasi                                                           */
/* ---------------------------------------------------------------- */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.animate-fade-up { animation: fadeUp .35s ease-out both; }
.animate-fade-in { animation: fadeIn .25s ease-out both; }

/* Kartu statistik muncul berurutan */
.stagger > * { animation: fadeUp .4s ease-out both; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .06s; }
.stagger > *:nth-child(3) { animation-delay: .10s; }
.stagger > *:nth-child(4) { animation-delay: .14s; }
.stagger > *:nth-child(5) { animation-delay: .18s; }
.stagger > *:nth-child(6) { animation-delay: .22s; }
.stagger > *:nth-child(7) { animation-delay: .26s; }
.stagger > *:nth-child(8) { animation-delay: .30s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---------------------------------------------------------------- */
/* Komponen                                                          */
/* ---------------------------------------------------------------- */

/* Kartu dengan garis emas tipis di sisi atas */
.card-luxe {
  position: relative;
  overflow: hidden;
}
.card-luxe::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
  opacity: .8;
}

/* Baris tabel */
.table-luxe tbody tr { transition: background-color .15s ease; }
.table-luxe tbody tr:hover { background-color: #faf8f3; }
.table-luxe thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, #efe9dc 25%, #f7f3e9 50%, #efe9dc 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}

/* Input dasar dipakai konsisten di seluruh form */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  border-radius: .75rem;
  border: 1px solid #d9ccae;
  background: #fff;
  padding: .625rem .875rem;
  font-size: .875rem;
  color: #0b1f1a;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
}
.form-input:disabled,
.form-select:disabled,
.form-input[readonly] {
  background: #f3efe4;
  color: #5f6b63;
  cursor: not-allowed;
}
.form-label {
  display: block;
  margin-bottom: .375rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #2d4e41;
}
.form-hint { margin-top: .25rem; font-size: .6875rem; color: #6b7a72; }

/* Varian input — didefinisikan SETELAH .form-input agar padding-nya
   selalu menang, apa pun urutan penyisipan style Tailwind CDN. */
.form-input.pl-icon  { padding-left: 2.75rem; }
.form-input.pr-icon  { padding-right: 2.75rem; }
.form-input.input-sm { padding: .375rem .75rem; font-size: .75rem; height: 2.25rem; }
.form-input.input-sm.pl-icon { padding-left: 2.25rem; }

/* Tombol */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: .75rem;
  padding: .625rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  transition: all .15s ease;
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary {
  background: linear-gradient(135deg, #16302a, #0b1f1a);
  color: #fff;
  box-shadow: 0 8px 20px -12px rgba(11, 31, 26, .8);
}
.btn-primary:hover { background: linear-gradient(135deg, #1e3d34, #16302a); }
/* Varian "luxe": latar hijau hutan dengan teks emas — pasangan khas
   identitas botanical aplikasi ini. Dipakai untuk aksi utama yang berdiri
   di atas latar terang berwarna (mis. widget pengingat perawatan). */
.btn-luxe {
  background: linear-gradient(135deg, var(--forest-900), var(--forest-950));
  color: var(--gold-400);
  box-shadow: 0 8px 20px -12px rgba(11, 31, 26, .8);
}
.btn-luxe:hover {
  background: linear-gradient(135deg, #1e3d34, var(--forest-900));
  color: #f0d68a;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: #0b1f1a;
  box-shadow: 0 8px 20px -12px rgba(201, 162, 39, .9);
}
.btn-gold:hover { filter: brightness(1.05); }
.btn-outline {
  background: #fff;
  border: 1px solid #d9ccae;
  color: #2d4e41;
}
.btn-outline:hover { background: #faf8f3; border-color: var(--gold-400); }
.btn-danger { background: #e11d48; color: #fff; }
.btn-danger:hover { background: #be123c; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.btn-lg { padding: .8125rem 1.25rem; font-size: .9375rem; }
/* Ukuran ringkas untuk tombol di dalam bilah kepala kartu (mis. widget
   pengingat perawatan di Dashboard), sepadan dengan .form-input.input-sm. */
.btn.btn-sm { padding: .4375rem .75rem; font-size: .75rem; border-radius: .625rem; gap: .375rem; }

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border-radius: 999px;
  padding: .1875rem .5rem;
  font-size: .6875rem;
  font-weight: 600;
  --tw-ring-inset: inset;
  box-shadow: inset 0 0 0 1px currentColor;
}

/* Modal */
.modal-open { display: flex !important; }
body.modal-active { overflow: hidden; }

/* ---------------------------------------------------------------- */
/* Aturan cetak (Print / Export PDF)                                 */
/* ---------------------------------------------------------------- */

@media print {
  @page { margin: 14mm 12mm; size: A4; }

  .no-print,
  #sidebar,
  #sidebarOverlay,
  header.sticky,
  footer { display: none !important; }

  body { background: #fff !important; font-size: 11px; }

  .lg\:pl-\[272px\] { padding-left: 0 !important; }

  main { padding: 0 !important; }

  .print-only { display: block !important; }

  table { width: 100%; border-collapse: collapse; page-break-inside: auto; }
  thead { display: table-header-group; }
  tr    { page-break-inside: avoid; }

  th, td {
    border: 1px solid #cfc8b8 !important;
    padding: 5px 7px !important;
    color: #000 !important;
  }
  th { background: #f0ece2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .shadow-luxe, .shadow-luxeLg, .shadow-sm, .shadow-lg { box-shadow: none !important; }
  .rounded-2xl, .rounded-xl { border-radius: 0 !important; }

  a[href]::after { content: ''; }
}

.print-only { display: none; }