/* assets/css/app.css — gaya kustom di atas Tailwind */

:root {
  --primary: #083D2B;
  --secondary: #0B5D3B;
  --accent: #D5A84B;
}

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Card hover */
.card-hover { transition: transform .25s ease, box-shadow .25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 16px 40px -18px rgb(8 61 43 / .35); }

/* Modal */
.modal-backdrop { animation: fadeIn .18s ease; }
.modal-panel { animation: popIn .2s ease; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes popIn { from { opacity: 0; transform: translateY(12px) scale(.98) } to { opacity: 1; transform: none } }

/* Skeleton loading */
.skeleton { position: relative; overflow: hidden; background: #e8efeb; }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .6), transparent);
  animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%) } }

/* Lightbox */
#lightbox { animation: fadeIn .18s ease; }
#lightbox img { max-height: 85vh; }

/* Rating stars */
.star { color: #D5A84B; }

/* Scrollbar halus */
::-webkit-scrollbar { width: 10px; height: 10px }
::-webkit-scrollbar-thumb { background: #0B5D3B66; border-radius: 8px }
::-webkit-scrollbar-track { background: transparent }

/* Print invoice */
@media print {
  body * { visibility: hidden; }
  #invoice-area, #invoice-area * { visibility: visible; }
  #invoice-area { position: absolute; inset: 0; }
  .no-print { display: none !important; }
}

/* === Admin table facelift === */
main thead tr { background: rgb(236 253 245 / .7); }
main thead th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #0B5D3B; }
main tbody tr { transition: background .15s ease; }
#table-pagination button { border: 1px solid #e2e8f0; }
#table-pagination button.bg-primary { border-color: #083D2B; }

/* === Action icon buttons (seperti referensi) === */
#tbody button { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 8px; vertical-align: middle; }
#tbody button:has(> svg.lucide-pencil) { background: #eef2ff; color: #6366f1; }
#tbody button:has(> svg.lucide-pencil):hover { background: #e0e7ff; }
#tbody button:has(> svg.lucide-trash-2) { background: #fff1f2; color: #f43f5e; }
#tbody button:has(> svg.lucide-trash-2):hover { background: #ffe4e6; }
#tbody button:has(> svg.lucide-eye) { background: #ecfeff; color: #0891b2; }
#tbody button:has(> svg.lucide-eye):hover { background: #cffafe; }
#tbody button:has(> svg.lucide-check) { background: #ecfdf5; color: #059669; }
#tbody button:has(> svg.lucide-x) { background: #fff1f2; color: #f43f5e; }
#tbody td { padding: 12px 16px; }

/* Footer tabel */
#table-pagination button { min-width: 30px; height: 30px; border-radius: 8px; }

/* Filter & search toolbar compact */
main select[data-filter] { background: #fff; border-radius: .75rem; font-size: 13px; }
main input#search::placeholder { color: #94a3b8; }

/* Pagination pill tunggal */
#table-pagination { border: 1px solid #e2e8f0; border-radius: .6rem; background: #fff; padding: 2px; gap: 2px; }
#table-pagination button { border: none; }
#per-page { border-radius: .6rem; background: #fff; }

/* === Compact pass: tabel admin === */
/* Scroll reveal — section & grid */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-grid > * { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1); }
.reveal-grid.in > * { opacity: 1; transform: none; }
.reveal-grid.in > *:nth-child(2) { transition-delay: .08s }
.reveal-grid.in > *:nth-child(3) { transition-delay: .16s }
.reveal-grid.in > *:nth-child(4) { transition-delay: .24s }
.reveal-grid.in > *:nth-child(5) { transition-delay: .32s }
.reveal-grid.in > *:nth-child(6) { transition-delay: .40s }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal-grid > * { opacity: 1 !important; transform: none !important; transition: none !important } }
/* Hero ken-burns zoom lembut pada slide aktif */
.hero-slide.opacity-100 .kb-img { animation: kbZoom 7s ease-out forwards; }
@keyframes kbZoom { from { transform: scale(1.09) } to { transform: scale(1) } }
@media (max-width: 640px) { .hero-slide.opacity-100 .kb-img { animation: none } }

/* Quill editor selaras tema */
.ql-toolbar.ql-snow { border: 0; border-bottom: 1px solid #e2e8f0; background: #f8fafc; border-radius: 12px 12px 0 0; padding: 6px 10px; }
.ql-container.ql-snow { border: 0; font-size: 14px; font-family: inherit; color: #26352D; }
.ql-editor { min-height: 110px; max-height: 24vh; overflow-y: auto; line-height: 1.6; }
.ql-toolbar.ql-snow .ql-formats { margin-right: 10px; }
.ql-snow .ql-picker { font-size: 12px; }
.ql-editor.ql-blank::before { color: #94a3b8; font-style: normal; }
#tbody td { padding: 6px 14px; }
#tbody td p, #tbody td span { line-height: 1.35; }
#tbody td { font-size: 13px; }
main select[data-filter], main #search { font-size: 13px; }
main select[data-filter] { padding-top: 8px; padding-bottom: 8px; background: #fff; }
#btn-add, #btn-cari, main button[id^="btn-add"] { height: 38px; padding-top: 0; padding-bottom: 0; }
main .bg-white.rounded-2xl { box-shadow: 0 1px 2px rgb(15 23 42 / .04); }