/* ===== Admin Kantin – Polishing UI ===== */
:root{
  --brand: #10b981;        /* emerald-500 */
  --brand-600: #059669;
  --ink: #0f172a;          /* slate-900 */
  --muted: #64748b;        /* slate-500 */
  --ring: rgba(16,185,129,.35);
}

/* Scrollbar rapi */
.admin *::-webkit-scrollbar{ width:10px; height:10px; }
.admin *::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:8px; }
.admin.dark *::-webkit-scrollbar-thumb{ background:#475569; }

/* Card universal (tanpa ubah markup lama) */
.admin .bg-white{
  border-radius:14px;
  box-shadow: 0 4px 20px rgba(2,6,23,.06);
  border: 1px solid rgba(15,23,42,.05);
}
.admin.dark .bg-white{
  background:#0b1220 !important;
  border-color: rgba(148,163,184,.15);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}

/* Tombol util */
.btn{ display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.6rem .9rem; border-radius:10px; font-weight:600;
  transition: all .2s ease; border:1px solid transparent; }
.btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ background:var(--brand-600); }
.btn-secondary{ background:#0f172a; color:#fff; }
.btn-secondary:hover{ opacity:.9; }
.btn-light{ background:#f1f5f9; color:#0f172a; }
.admin.dark .btn-light{ background:#0f172a; color:#e2e8f0; }
.btn-danger{ background:#ef4444; color:#fff; }
.btn-danger:hover{ background:#dc2626; }

/* Input */
.input{ width:100%; border:1px solid #e2e8f0; border-radius:10px; padding:.6rem .8rem; }
.input:focus{ border-color:var(--brand); box-shadow: 0 0 0 4px var(--ring); outline: none; }
.admin.dark .input{ background:#0b1220; border-color:#1e293b; color:#e2e8f0; }

/* Table wrapper: sticky header + zebra */
.table-wrap{ overflow:auto; border-radius:12px; border:1px solid rgba(15,23,42,.06); }
.table{ width:100%; border-collapse:separate; border-spacing:0; font-size:.925rem; }
.table thead th{
  position:sticky; top:0; background:#f8fafc; z-index:1; text-align:left; padding:.75rem;
  border-bottom:1px solid #e2e8f0; font-weight:700; color:#0f172a;
}
.admin.dark .table thead th{ background:#0f172a; border-color:#1f2937; color:#e2e8f0; }
.table tbody td{ padding:.7rem; border-bottom:1px solid #eef2f7; }
.admin.dark .table tbody td{ border-color:#1f2937; }
.table tbody tr:nth-child(even){ background:#fafbff; }
.admin.dark .table tbody tr:nth-child(even){ background:#0c1424; }

/* Chips status */
.chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.2rem .55rem;
  border-radius:999px; font-size:.75rem; font-weight:600; border:1px solid transparent; }
.chip-green{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.chip-red{ background:#fef2f2; color:#7f1d1d; border-color:#fecaca; }
.chip-amber{ background:#fffbeb; color:#7c2d12; border-color:#fde68a; }
.chip-gray{ background:#f1f5f9; color:#0f172a; border-color:#e2e8f0; }
.admin.dark .chip-gray{ background:#0b1220; color:#e2e8f0; border-color:#1e293b; }

/* Toast */
.toast-wrap{ position:fixed; right:1rem; bottom:1rem; display:grid; gap:.5rem; z-index:60; }
.toast{ padding:.75rem 1rem; border-radius:12px; color:#0f172a; background:#ffffff;
  box-shadow:0 10px 30px rgba(2,6,23,.2); border:1px solid rgba(15,23,42,.06); }
.toast.ok{ border-color:#a7f3d0; }
.toast.err{ border-color:#fecaca; }

/* Header glass */
.admin .glass{
  background: rgba(255,255,255,.7);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.admin.dark .glass{
  background: rgba(2,6,23,.6);
  border-color: rgba(148,163,184,.15);
}
/* ===== Sidebar & Header polish ===== */
.sidebar{ width:18rem; }
.admin.sidebar-compact .sidebar{ width:4.5rem; }
.admin.sidebar-compact .sidebar .brand-title,
.admin.sidebar-compact .sidebar .brand-sub,
.admin.sidebar-compact .sidebar .nav-label,
.admin.sidebar-compact .sidebar .nav-section-title{ display:none; }
.admin.sidebar-compact .sidebar .icon{ margin-right:0; }

.nav-section-title{
  text-transform:uppercase; letter-spacing:.06em;
  font-size:.68rem; color:#94a3b8; margin:.25rem .25rem .25rem .5rem;
}

.nav-link{
  display:flex; align-items:center; gap:.65rem;
  padding:.6rem .75rem; border-radius:.75rem;
  color:#0f172a; border:1px solid transparent;
}
.admin.dark .nav-link{ color:#e2e8f0; }
.nav-link:hover{
  background: #ecfeff;
  border-color: rgba(14,165,233,.25);
}
.admin.dark .nav-link:hover{
  background: rgba(14,165,233,.08);
  border-color: rgba(14,165,233,.18);
}
.nav-link.active{
  background: linear-gradient(90deg, rgba(16,185,129,.15), rgba(16,185,129,.05));
  border-color: rgba(16,185,129,.35);
  box-shadow: 0 6px 18px rgba(16,185,129,.15);
}
.admin.dark .nav-link.active{
  background: rgba(16,185,129,.18);
  border-color: rgba(16,185,129,.35);
}
.nav-link .icon{
  width:1.4rem; height:1.4rem; display:inline-grid; place-items:center;
  background: rgba(2,6,23,.05); border-radius:.6rem; font-size:.95rem;
}
.admin.dark .nav-link .icon{ background: rgba(148,163,184,.15); }

/* Breadcrumb/title already handled by header glass styles */

/* ============================================= */
/* ===== STYLES KHUSUS UNTUK KIOS UI BARU ===== */
/* ============================================= */

.kiosk-ui {
  background-color: #f8fafc; /* slate-50 */
  color: #0f172a; /* slate-900 */
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

.kiosk-ui .kiosk-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0; /* slate-200 */
}

.kiosk-ui .kiosk-card {
  background-color: #ffffff;
  border-radius: 1.5rem; /* 24px */
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.kiosk-ui .kiosk-btn-primary {
  display: flex; align-items: center; justify-content: center; width: 100%;
  padding: 1.25rem; font-size: 1.25rem; font-weight: 700; border-radius: 1rem;
  background-color: #10b981; /* brand emerald-500 */
  color: #ffffff; transition: background-color 0.2s;
}
.kiosk-ui .kiosk-btn-primary:hover { background-color: #059669; }
.kiosk-ui .kiosk-btn-primary:disabled { background-color: #cbd5e1; color:#94a3b8; cursor: not-allowed; }

.kiosk-ui .kiosk-btn-secondary {
  display: flex; align-items: center; justify-content: center; width: 100%;
  padding: 1rem; font-size: 1rem; font-weight: 600; border-radius: 1rem;
  background-color: #f1f5f9; /* slate-100 */
  color: #0f172a; transition: background-color 0.2s;
}
.kiosk-ui .kiosk-btn-secondary:hover { background-color: #e2e8f0; }

.kiosk-ui video {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 1.25rem; background-color: #000;
}

#vidPalm {
    transition: box-shadow 0.3s ease-in-out;
}
.detection-ring-none {
    box-shadow: inset 0 0 0 8px rgba(239, 68, 68, 0.5); /* Merah */
}
.detection-ring-detected {
    box-shadow: inset 0 0 0 8px rgba(234, 179, 8, 0.6); /* Kuning */
}
.detection-ring-stable {
    box-shadow: inset 0 0 0 8px rgba(16, 185, 129, 1.0); /* Hijau */
}

/* ============================================= */
/* ===== STYLE UNTUK POPUP HASIL PEMBAYARAN ===== */
/* ============================================= */

.payment-result-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.6); /* slate-900 with opacity */
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
}

.payment-result-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.payment-result-box {
  background-color: #ffffff;
  border-radius: 1.5rem; /* 24px */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  padding: 2rem;
  width: 90%;
  max-width: 420px;
  text-align: center;
  transform: scale(0.95);
  transition: transform 0.2s ease-in-out;
}

.payment-result-overlay.visible .payment-result-box {
  transform: scale(1);
}

.payment-result-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 1.5rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-result-icon svg {
  width: 48px;
  height: 48px;
  color: #ffffff;
}

.payment-result-title {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 800; /* extrabold */
  color: #1e293b; /* slate-800 */
}

.payment-result-message {
  color: #64748b; /* slate-500 */
  margin-top: 0.5rem;
  margin-bottom: 2rem;
  white-space: pre-wrap; /* Agar baris baru \n berfungsi */
}

.payment-result-button {
  width: 100%;
  padding: 1rem;
  font-size: 1.125rem; /* text-lg */
  font-weight: 700;
  border-radius: 0.75rem; /* 12px */
  color: #ffffff;
  transition: background-color 0.2s;
}

/* Varian Sukses */
.payment-result-box.success .payment-result-icon { background-color: #10b981; }
.payment-result-box.success .payment-result-button { background-color: #10b981; }
.payment-result-box.success .payment-result-button:hover { background-color: #059669; }

/* Varian Gagal */
.payment-result-box.failure .payment-result-title { color: #dc2626; }
.payment-result-box.failure .payment-result-icon { background-color: #ef4444; }
.payment-result-box.failure .payment-result-button { background-color: #ef4444; }
.payment-result-box.failure .payment-result-button:hover { background-color: #dc2626; }

/* Overlay untuk menampilkan ID Card secara fullscreen */
#idCardOverlay {
  position: fixed;
  inset: 0;
  background-color: #f8fafc; /* Latar belakang cerah */
  z-index: 100;
  display: none; /* Awalnya tersembunyi */
  place-items: center;
  padding: 1rem;
}

.dark #idCardOverlay {
  background-color: #0f172a; /* Latar belakang gelap */
}

/* Tombol Tutup di overlay */
#idCardOverlay .close-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 9999px;
  color: #000;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.dark #idCardOverlay .close-btn {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Card itu sendiri, dibuat agar bisa digunakan di overlay maupun di halaman */
.virtual-id-card {
  background-color: #ffffff;
  border-radius: 1.5rem;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  width: 100%;
  max-width: 380px;
  margin: auto;
  border: 1px solid #e2e8f0;
}

.dark .virtual-id-card {
  background-color: #1e293b;
  border-color: #334155;
}

/* Styling konten di dalam card */
.virtual-id-card .avatar {
  width: 80px;
  height: 80px;
  border-radius: 9999px;
  background-color: #f1f5f9;
  margin: 0 auto 0.75rem auto;
  display: grid;
  place-items: center;
}
.dark .virtual-id-card .avatar { background-color: #334155; }
.virtual-id-card .avatar span { font-size: 2.5rem; }

.virtual-id-card .user-name {
  font-weight: 700;
  font-size: 1.25rem;
  color: #1e293b;
}
.dark .virtual-id-card .user-name { color: #f1f5f9; }

.virtual-id-card .user-email {
  font-size: 0.875rem;
  color: #64748b;
  margin-bottom: 1.5rem;
}
.dark .virtual-id-card .user-email { color: #94a3b8; }

.virtual-id-card .qr-container {
  background-color: #ffffff;
  padding: 0.75rem;
  border-radius: 0.75rem;
}
.virtual-id-card .qr-container img {
  width: 100%;
  aspect-ratio: 1 / 1;
}

/* Tombol Print (khusus di halaman profil, bukan di overlay) */
#btnPrintCard {
  margin-top: 1rem;
}