/* =====================================================================
   Tema Glassmorphism — elegan & mewah, tombol gradien berwarna-warni.
   Dimuat SETELAH Bootstrap 5 lokal (static/vendor/bootstrap) dan app.css.
   100% offline: tanpa CDN, tanpa @import, tanpa font eksternal.
   ===================================================================== */

:root,
[data-bs-theme="dark"] {
  --g-bg-1: #0b1026;
  --g-bg-2: #1a1145;
  --g-bg-3: #0d2a4a;
  --g-glass: rgba(255, 255, 255, 0.07);
  --g-glass-strong: rgba(255, 255, 255, 0.12);
  --g-glass-hover: rgba(255, 255, 255, 0.16);
  --g-border: rgba(255, 255, 255, 0.16);
  --g-border-strong: rgba(255, 255, 255, 0.28);
  --g-shadow: 0 8px 32px rgba(3, 6, 25, 0.45);
  --g-blur: blur(18px) saturate(160%);
  --g-radius: 1.1rem;
  --g-text: #eef1ff;
  --g-muted: rgba(230, 235, 255, 0.66);
  --g-gold: #f5d27a;

  /* Gradien tombol */
  --grad-primary: linear-gradient(135deg, #6366f1 0%, #3b82f6 50%, #06b6d4 100%);
  --grad-success: linear-gradient(135deg, #10b981 0%, #22c55e 55%, #a3e635 100%);
  --grad-danger: linear-gradient(135deg, #f43f5e 0%, #ef4444 50%, #f97316 100%);
  --grad-warning: linear-gradient(135deg, #f59e0b 0%, #fbbf24 55%, #fde047 100%);
  --grad-info: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
  --grad-secondary: linear-gradient(135deg, rgba(148, 163, 184, .55), rgba(100, 116, 139, .55));
  --grad-gold: linear-gradient(135deg, #f5d27a 0%, #e8b04b 50%, #f9e5a8 100%);
  --grad-violet: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);

  --bs-body-color: var(--g-text);
  --bs-secondary-color: var(--g-muted);
  --bs-border-color: var(--g-border);
  --bs-body-bg: transparent;
  --bs-secondary-bg: var(--g-glass);
  --bs-tertiary-bg: var(--g-glass);
  --bs-link-color: #8ecbff;
  --bs-link-hover-color: #c4e3ff;
  --bs-font-sans-serif: "Inter", "Segoe UI", "Ubuntu", "Cantarell", "Noto Sans", system-ui, -apple-system, Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Latar & orb ---------- */
html, body.glass-body { min-height: 100%; }
body.glass-body {
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(99, 102, 241, .35), transparent 60%),
    radial-gradient(900px 700px at 110% 10%, rgba(236, 72, 153, .22), transparent 60%),
    radial-gradient(900px 900px at 50% 120%, rgba(6, 182, 212, .25), transparent 60%),
    linear-gradient(160deg, var(--g-bg-1), var(--g-bg-2) 55%, var(--g-bg-3));
  background-attachment: fixed;
  color: var(--g-text);
  letter-spacing: .1px;
}
.glass-orbs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.glass-orbs span {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45;
  animation: orb-float 26s ease-in-out infinite alternate;
}
.glass-orbs span:nth-child(1) { width: 420px; height: 420px; left: -80px; top: 18%; background: #6366f1; }
.glass-orbs span:nth-child(2) { width: 360px; height: 360px; right: -60px; top: -40px; background: #ec4899; animation-delay: -6s; }
.glass-orbs span:nth-child(3) { width: 460px; height: 460px; right: 18%; bottom: -160px; background: #06b6d4; animation-delay: -12s; }
.glass-orbs span:nth-child(4) { width: 260px; height: 260px; left: 38%; top: 40%; background: #f5d27a; opacity: .18; animation-delay: -18s; }
@keyframes orb-float {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.08); }
  100% { transform: translate(-30px, 35px) scale(.95); }
}
@media (prefers-reduced-motion: reduce) { .glass-orbs span { animation: none; } }

/* ---------- Permukaan kaca (dipakai ulang) ---------- */
.card, .modal-content, .glass-nav, .list-group-item, .dropdown-menu, .toast, .offcanvas,
.poli-card, .doc-card, .reg-ticket, .reg-empty, .status-pill, .user-chip {
  background: var(--g-glass) !important;
  border: 1px solid var(--g-border) !important;
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  color: var(--g-text);
}
.card, .modal-content, .reg-ticket { border-radius: var(--g-radius) !important; box-shadow: var(--g-shadow); }
.card { position: relative; overflow: hidden; }
.card::before { /* kilau tepi atas */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
}
.card-header, .card-footer, .modal-header, .modal-footer {
  background: rgba(255, 255, 255, .04) !important;
  border-color: var(--g-border) !important;
  color: var(--g-text);
}
.card-header { font-weight: 600; letter-spacing: .3px; }
.modal-backdrop.show { opacity: .55; backdrop-filter: blur(4px); }
.bg-body-tertiary, .bg-body, .bg-light, .bg-white { background: transparent !important; }
.text-secondary, .text-muted, .form-text { color: var(--g-muted) !important; }

/* ---------- Navbar ---------- */
.glass-nav { border-width: 0 0 1px 0 !important; border-radius: 0 !important; background: rgba(10, 14, 40, .55) !important; }
.glass-nav .navbar-brand { color: #fff; }
.brand-mark {
  display: inline-flex; width: 34px; height: 34px; border-radius: 10px; align-items: center; justify-content: center;
  background: var(--grad-gold); color: #3a2a05; font-size: 1rem; box-shadow: 0 4px 14px rgba(245, 210, 122, .45);
}
.brand-sub { color: var(--g-gold); font-weight: 500; }
.glass-nav .nav-link { color: rgba(255, 255, 255, .78); border-radius: .7rem; padding: .45rem .9rem !important; margin: 0 .1rem; }
.glass-nav .nav-link:hover, .glass-nav .nav-link:focus { color: #fff; background: var(--g-glass-hover); }
.user-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem; border-radius: 999px; font-size: .85rem; }
.user-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 10px #22c55e; }
.demo-ribbon {
  padding: .35rem 1rem; color: #3a2a05; font-weight: 500;
  background: linear-gradient(90deg, rgba(245, 210, 122, .92), rgba(251, 191, 36, .92), rgba(245, 210, 122, .92));
}

/* ---------- Tombol gradien berwarna-warni ---------- */
.btn {
  --g-btn-shadow: rgba(0, 0, 0, .25);
  border-radius: .8rem; font-weight: 600; letter-spacing: .2px; border: 1px solid rgba(255, 255, 255, .18);
  position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn::after { /* kilau kaca di setengah atas */
  content: ""; position: absolute; inset: 0 0 50% 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0));
}
.btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08) saturate(1.1); }
.btn:active:not(:disabled) { transform: translateY(0); filter: brightness(.96); }
.btn:disabled, .btn.disabled { opacity: .45; filter: grayscale(.4); }
.btn-lg { border-radius: 1rem; }

.btn-primary { background: var(--grad-primary) !important; color: #fff !important; box-shadow: 0 6px 20px rgba(59, 130, 246, .45); }
.btn-success { background: var(--grad-success) !important; color: #052e16 !important; box-shadow: 0 6px 20px rgba(34, 197, 94, .40); }
.btn-danger { background: var(--grad-danger) !important; color: #fff !important; box-shadow: 0 6px 20px rgba(244, 63, 94, .42); }
.btn-warning { background: var(--grad-warning) !important; color: #3b2600 !important; box-shadow: 0 6px 20px rgba(245, 158, 11, .40); }
.btn-info { background: var(--grad-info) !important; color: #fff !important; box-shadow: 0 6px 20px rgba(139, 92, 246, .42); }
.btn-secondary, .btn-light, .btn-dark { background: var(--grad-secondary) !important; color: #fff !important; }
.btn-gold { background: var(--grad-gold) !important; color: #3a2a05 !important; box-shadow: 0 6px 20px rgba(245, 210, 122, .45); }
.btn-violet { background: var(--grad-violet) !important; color: #fff !important; box-shadow: 0 6px 20px rgba(236, 72, 153, .40); }

/* Outline = kaca dengan tepi berwarna */
[class*="btn-outline-"] { background: var(--g-glass) !important; backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); }
.btn-outline-primary { color: #93c5fd !important; border-color: rgba(96, 165, 250, .65) !important; }
.btn-outline-success { color: #86efac !important; border-color: rgba(74, 222, 128, .6) !important; }
.btn-outline-danger { color: #fda4af !important; border-color: rgba(251, 113, 133, .6) !important; }
.btn-outline-warning { color: #fde68a !important; border-color: rgba(251, 191, 36, .6) !important; }
.btn-outline-info { color: #c4b5fd !important; border-color: rgba(167, 139, 250, .6) !important; }
.btn-outline-secondary, .btn-outline-light, .btn-outline-dark { color: #e2e8f0 !important; border-color: var(--g-border-strong) !important; }
[class*="btn-outline-"]:hover:not(:disabled) { background: var(--g-glass-hover) !important; }
.btn-outline-primary.active, .btn-check:checked + .btn-outline-primary { background: var(--grad-primary) !important; color: #fff !important; }
.btn-check:checked + .btn-outline-secondary { background: var(--grad-info) !important; color: #fff !important; border-color: transparent !important; }
.btn-outline-secondary.active { background: var(--grad-info) !important; color: #fff !important; }
.btn-link { color: #8ecbff !important; border-color: transparent !important; background: transparent !important; }
.btn-link::after { display: none; }
.btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ---------- Badge & status ---------- */
.badge { border-radius: 999px; font-weight: 600; padding: .4em .75em; letter-spacing: .2px; }
.text-bg-primary { background: var(--grad-primary) !important; color: #fff !important; }
.text-bg-success { background: var(--grad-success) !important; color: #052e16 !important; }
.text-bg-danger { background: var(--grad-danger) !important; color: #fff !important; }
.text-bg-warning { background: var(--grad-warning) !important; color: #3b2600 !important; }
.text-bg-info { background: var(--grad-info) !important; color: #fff !important; }
.text-bg-secondary { background: var(--grad-secondary) !important; color: #fff !important; }
.text-bg-light { background: rgba(255, 255, 255, .14) !important; color: var(--g-text) !important; border: 1px solid var(--g-border); }

.status-pill { padding: .38rem .9rem; border-radius: 999px; font-size: .84rem; font-weight: 500; }
.status-ok { background: linear-gradient(135deg, rgba(16, 185, 129, .35), rgba(132, 204, 22, .25)) !important; border-color: rgba(74, 222, 128, .5) !important; color: #dcfce7 !important; }
.status-danger { background: linear-gradient(135deg, rgba(244, 63, 94, .35), rgba(249, 115, 22, .25)) !important; border-color: rgba(251, 113, 133, .5) !important; color: #ffe4e6 !important; }
.status-info { background: linear-gradient(135deg, rgba(14, 165, 233, .35), rgba(139, 92, 246, .3)) !important; border-color: rgba(125, 211, 252, .5) !important; color: #e0f2fe !important; }
.status-muted { color: var(--g-muted) !important; }

/* ---------- Alert kaca berwarna ---------- */
.alert { border-radius: .9rem; backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); color: var(--g-text); }
.alert-success { background: rgba(16, 185, 129, .16); border-color: rgba(74, 222, 128, .4); }
.alert-danger { background: rgba(244, 63, 94, .16); border-color: rgba(251, 113, 133, .45); }
.alert-warning { background: rgba(245, 158, 11, .16); border-color: rgba(251, 191, 36, .45); }
.alert-info { background: rgba(14, 165, 233, .15); border-color: rgba(125, 211, 252, .4); }
.alert-secondary, .alert-light { background: var(--g-glass); border-color: var(--g-border); }

/* ---------- Form ---------- */
.form-control, .form-select {
  background-color: rgba(255, 255, 255, .06) !important; color: var(--g-text) !important;
  border: 1px solid var(--g-border) !important; border-radius: .75rem;
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
}
.form-control::placeholder { color: rgba(230, 235, 255, .45); }
.form-control:focus, .form-select:focus {
  border-color: rgba(129, 140, 248, .8) !important; box-shadow: 0 0 0 .22rem rgba(99, 102, 241, .28) !important;
}
.form-control[readonly] { background-color: rgba(255, 255, 255, .03) !important; }
.form-select option { background: #1a1145; color: #fff; }
.form-check-input { background-color: rgba(255, 255, 255, .1); border-color: var(--g-border-strong); }
.form-check-input:checked { background-color: #6366f1; border-color: #6366f1; }
.input-group-text { background: var(--g-glass); border-color: var(--g-border); color: var(--g-text); }

/* ---------- Tabel ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--g-text); --bs-table-border-color: var(--g-border);
  --bs-table-hover-bg: rgba(255, 255, 255, .06); --bs-table-hover-color: #fff; margin-bottom: 0; }
.table thead th { color: var(--g-gold); font-weight: 600; text-transform: uppercase; font-size: .74rem; letter-spacing: .6px;
  background: rgba(255, 255, 255, .04) !important; }
.pagination .page-link { background: var(--g-glass); border-color: var(--g-border); color: var(--g-text); }
.pagination .page-item.disabled .page-link { background: var(--g-glass-strong); color: var(--g-text); }
.list-group-item-action:hover { background: var(--g-glass-hover) !important; color: #fff; }
.progress { background: rgba(255, 255, 255, .1); border-radius: 999px; }
.progress-bar.bg-success { background: var(--grad-success) !important; }
.progress-bar.bg-danger { background: var(--grad-danger) !important; }

/* ---------- Dashboard ---------- */
.video-box { background: rgba(0, 0, 0, .55) !important; }
.video-box img { border-radius: 0 0 .2rem .2rem; }
.event-card { border-left-width: 4px !important; transition: transform .15s; }
.event-card:hover { transform: translateY(-1px); }
.event-card.border-success { border-left-color: #22c55e !important; }
.event-card.border-warning { border-left-color: #fbbf24 !important; }
.event-card.border-danger { border-left-color: #f43f5e !important; }
.event-card.border-secondary { border-left-color: #94a3b8 !important; }
.ref-thumb { border: 1px solid var(--g-border); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.capture-box { background: rgba(0, 0, 0, .55) !important; }

/* ---------- Modal registrasi kunjungan ---------- */
.reg-header { background: linear-gradient(135deg, rgba(99, 102, 241, .85), rgba(168, 85, 247, .75), rgba(6, 182, 212, .7)) !important; }
.reg-avatar { background: var(--grad-gold); color: #3a2a05; box-shadow: 0 4px 16px rgba(245, 210, 122, .5); }
.reg-step-no { background: var(--grad-primary); box-shadow: 0 2px 10px rgba(59, 130, 246, .5); }
.poli-card:hover:not(:disabled) { border-color: rgba(129, 140, 248, .8) !important; background: var(--g-glass-hover) !important; }
.poli-card.active { background: linear-gradient(135deg, rgba(99, 102, 241, .35), rgba(6, 182, 212, .25)) !important;
  border-color: rgba(129, 140, 248, .9) !important; box-shadow: inset 4px 0 0 #818cf8, 0 6px 20px rgba(99, 102, 241, .3); }
.doc-card:hover:not(:disabled) { border-color: rgba(74, 222, 128, .8) !important; background: var(--g-glass-hover) !important; }
.doc-card.active { background: linear-gradient(135deg, rgba(16, 185, 129, .32), rgba(163, 230, 53, .18)) !important;
  border-color: rgba(74, 222, 128, .9) !important; box-shadow: 0 6px 20px rgba(34, 197, 94, .3); }
.doc-hours { color: #86efac; }
.day-chip { border-color: var(--g-border); color: var(--g-muted); }
.day-chip.on { background: linear-gradient(135deg, rgba(16, 185, 129, .45), rgba(132, 204, 22, .35)); border-color: rgba(74, 222, 128, .6); color: #f0fdf4; }
.day-chip.today { outline-color: var(--g-gold); }
.reg-ticket-no { background: var(--grad-success) !important; color: #052e16; }
.reg-ticket-no.bg-primary { background: var(--grad-primary) !important; color: #fff; }
.reg-ticket dt { color: var(--g-muted); }
.reg-empty { border-style: dashed !important; border-width: 2px !important; color: var(--g-muted); }

/* ---------- Halaman login ---------- */
.glass-body main > .row .card { border-radius: 1.4rem !important; }

/* ---------- Scrollbar ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 999px; }

/* Peramban tanpa backdrop-filter: tetap terbaca */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .modal-content, .glass-nav, .list-group-item { background: rgba(20, 24, 60, .92) !important; }
}