/* Web Absensi Custom Core Styles */
:root {
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --bg-main: #f8fafc;
  --card-bg: #ffffff;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
}

* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: var(--bg-main);
  color: var(--text-main);
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Glassmorphism & Card Shadows */
.card-shadow {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -8px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: white;
  border-radius: 1rem;
}

.card-hover {
  transition: all 0.2s ease-in-out;
}

.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06), 0 16px 32px -12px rgba(37, 99, 235, 0.18);
  border-color: rgba(37, 99, 235, 0.25);
}

/* ===== UI REFRESH: FONT & BACKGROUND ===== */
body {
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(99, 102, 241, 0.10), transparent 60%),
    radial-gradient(900px 450px at -10% 0%, rgba(37, 99, 235, 0.08), transparent 55%),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  background-attachment: fixed;
  font-feature-settings: 'ss01' on;
}

h1, h2, h3, h4 {
  letter-spacing: -0.015em;
}

/* Header kaca (glass) */
#main-header {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

/* ===== TABS: PILLS ===== */
.tab-btn-emp,
.tab-btn-adm {
  border-radius: 9999px !important;
  border-bottom-width: 0 !important;
  padding: 0.55rem 1.1rem !important;
  transition: all 0.2s ease;
  border: 1px solid transparent !important;
  background: transparent;
}

.tab-btn-emp:hover,
.tab-btn-adm:hover {
  background: rgba(37, 99, 235, 0.07);
  color: #1d4ed8;
}

.tab-btn-emp.active,
.tab-btn-adm.active {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px -4px rgba(37, 99, 235, 0.45);
}

.tab-btn-emp.active:hover,
.tab-btn-adm.active:hover {
  color: #ffffff;
}

/* Tab strip container: kapsul putih */
.tabstrip-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 9999px;
  padding: 0.45rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px -10px rgba(15, 23, 42, 0.12);
}

/* KPI & kartu ringkasan */
.kpi-glow-emerald { box-shadow: 0 8px 20px -8px rgba(16, 185, 129, 0.45); }
.kpi-glow-amber { box-shadow: 0 8px 20px -8px rgba(245, 158, 11, 0.45); }
.kpi-glow-blue { box-shadow: 0 8px 20px -8px rgba(37, 99, 235, 0.45); }

/* Tabel rapi */
.data-table thead th {
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  position: sticky;
  top: 0;
}

.data-table tbody tr {
  transition: background 0.15s ease;
}

.data-table tbody tr:hover {
  background: #f8fafc;
}

/* Badge QR pribadi & kartu QR: bingkai indah */
.qr-frame {
  background: linear-gradient(135deg, #eef2ff, #ecfdf5);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 1rem;
}

/* Tombol utama dengan efek halus */
.btn-primary-glow {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  box-shadow: 0 8px 20px -6px rgba(37, 99, 235, 0.5);
  transition: all 0.2s ease;
}

.btn-primary-glow:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -8px rgba(37, 99, 235, 0.55);
}

.btn-primary-glow:active {
  transform: translateY(0);
}

/* Footer */
.app-footer {
  text-align: center;
  padding: 1.5rem 1rem 2rem;
  color: #94a3b8;
  font-size: 0.75rem;
}

/* Animasi panel saat ganti tab */
.panel-enter {
  animation: panel-fade-up 0.35s ease;
}

@keyframes panel-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Login card: hiasan atas bergradasi */
.login-decor {
  height: 6px;
  border-radius: 9999px 9999px 0 0;
  background: linear-gradient(90deg, #2563eb, #4f46e5, #7c3aed, #2563eb);
  background-size: 200% 100%;
  animation: decor-shift 6s linear infinite;
}

@keyframes decor-shift {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* Banner Sukses Login */
.login-success-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: linear-gradient(90deg, #059669, #10b981, #059669);
  color: #ffffff;
  text-align: center;
  padding: 1rem 1.25rem;
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.5);
  animation: banner-slide-down 0.5s ease;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

@keyframes banner-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Toast Container */
#toast-container {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 280px;
  max-width: 400px;
  padding: 0.875rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  animation: slideIn 0.3s ease-out forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast-success {
  background-color: #ecfdf5;
  color: #065f46;
  border-left: 4px solid #10b981;
}

.toast-error {
  background-color: #fef2f2;
  color: #991b1b;
  border-left: 4px solid #ef4444;
}

.toast-info {
  background-color: #eff6ff;
  color: #1e40af;
  border-left: 4px solid #3b82f6;
}

/* Camera viewfinder */
.camera-container {
  position: relative;
  background: #000;
  border-radius: 0.75rem;
  overflow: hidden;
  aspect-ratio: 4/3;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.camera-container video,
.camera-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-guide-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65%;
  height: 75%;
  border: 2px dashed rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  pointer-events: none;
}

/* Map Containers */
.leaflet-container {
  border-radius: 0.5rem;
  z-index: 1;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Print Specific Styles */
@media print {
  body * {
    visibility: hidden;
  }
  #print-area, #print-area * {
    visibility: visible;
  }
  #print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 20px;
  }
  /* Cetak semua QR murid */
  #print-all-qr-area, #print-all-qr-area * {
    visibility: visible;
  }
  #print-all-qr-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: block !important;
    padding: 10px;
  }
  .print-qr-card {
    display: inline-block;
    width: 30%;
    margin: 8px;
    text-align: center;
    border: 1px dashed #94a3b8;
    border-radius: 8px;
    padding: 10px 6px;
    page-break-inside: avoid;
    vertical-align: top;
  }
  .print-qr-card .print-qr-name {
    font-weight: 800;
    font-size: 12px;
    margin-top: 6px;
  }
  .print-qr-card .print-qr-sub {
    font-size: 10px;
    color: #475569;
  }
  .print-qr-card .print-qr-nip {
    font-size: 9px;
    color: #94a3b8;
    font-family: monospace;
  }
  .no-print {
    display: none !important;
  }
}

/* ========================================================
   DARK MODE — aktif via class "dark" pada <html>
   ======================================================== */

/* Latar halaman & kartu dasar */
html.dark body {
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(99, 102, 241, 0.16), transparent 60%),
    radial-gradient(900px 450px at -10% 0%, rgba(37, 99, 235, 0.13), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #0f172a 45%, #111a2e 100%);
  background-attachment: fixed;
  color: #e2e8f0;
}
html.dark .card-shadow {
  background: #111a2e;
  border-color: rgba(51, 65, 85, 0.9);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
}
html.dark .card-hover:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 16px 32px -12px rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.35);
}

/* Remap utility Tailwind yang dipakai aplikasi */
html.dark .bg-white { background-color: #111a2e !important; }
html.dark .bg-white\/90 { background-color: rgba(17, 26, 46, 0.92) !important; }
html.dark .bg-white\/80 { background-color: rgba(17, 26, 46, 0.85) !important; }
html.dark .bg-slate-50 { background-color: #0e1626 !important; }
html.dark .bg-slate-100 { background-color: #1a2338 !important; }
html.dark .bg-slate-200 { background-color: #24304a !important; }
html.dark .bg-slate-300 { background-color: #2f3d5c !important; }
html.dark .bg-slate-400 { background-color: #475a80 !important; }
html.dark .bg-blue-50 { background-color: rgba(37, 99, 235, 0.14) !important; }
html.dark .bg-blue-100 { background-color: rgba(37, 99, 235, 0.22) !important; }
html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.12) !important; }
html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.2) !important; }
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.12) !important; }
html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.22) !important; }
html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.12) !important; }
html.dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.12) !important; }
html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.12) !important; }
html.dark .bg-gradient-to-r.from-purple-50 { background-image: linear-gradient(to right, rgba(168,85,247,0.14), rgba(99,102,241,0.14)) !important; }
html.dark .bg-gradient-to-b.from-blue-50 { background-image: linear-gradient(to bottom, rgba(37,99,235,0.14), rgba(16,185,129,0.10)) !important; }

html.dark .text-slate-900 { color: #f1f5f9 !important; }
html.dark .text-slate-800 { color: #e8edf5 !important; }
html.dark .text-slate-700 { color: #cbd5e1 !important; }
html.dark .text-slate-600 { color: #aab8cc !important; }
html.dark .text-slate-500 { color: #94a3b8 !important; }
html.dark .text-slate-400 { color: #7d8aa3 !important; }
html.dark .text-slate-950, html.dark .text-blue-950 { color: #e2e8f0 !important; }
html.dark .text-blue-600 { color: #6ea8ff !important; }
html.dark .text-blue-700 { color: #8ab4ff !important; }
html.dark .text-blue-800 { color: #9cc0ff !important; }
html.dark .text-blue-900 { color: #b3d0ff !important; }
html.dark .text-blue-500 { color: #60a5fa !important; }
html.dark .text-emerald-600 { color: #34d399 !important; }
html.dark .text-emerald-700 { color: #4ade80 !important; }
html.dark .text-emerald-800 { color: #6ee7b7 !important; }
html.dark .text-emerald-900 { color: #86efac !important; }
html.dark .text-amber-600 { color: #fbbf24 !important; }
html.dark .text-amber-700 { color: #fcd34d !important; }
html.dark .text-amber-800 { color: #fde68a !important; }
html.dark .text-red-600 { color: #f87171 !important; }
html.dark .text-red-500 { color: #f87171 !important; }
html.dark .text-indigo-600 { color: #818cf8 !important; }
html.dark .text-indigo-700 { color: #9aa1fd !important; }
html.dark .text-indigo-800 { color: #b3b6fd !important; }
html.dark .text-purple-600 { color: #c084fc !important; }

html.dark .border-slate-100 { border-color: rgba(51, 65, 85, 0.6) !important; }
html.dark .border-slate-200 { border-color: #263350 !important; }
html.dark .border-slate-300 { border-color: #32436a !important; }
html.dark .border-blue-100 { border-color: rgba(59, 130, 246, 0.3) !important; }
html.dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.4) !important; }
html.dark .border-blue-600 { border-color: #3b82f6 !important; }
html.dark .border-emerald-100 { border-color: rgba(16, 185, 129, 0.3) !important; }
html.dark .border-emerald-200 { border-color: rgba(16, 185, 129, 0.4) !important; }
html.dark .border-emerald-400 { border-color: rgba(16, 185, 129, 0.5) !important; }
html.dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.4) !important; }
html.dark .border-indigo-100 { border-color: rgba(99, 102, 241, 0.3) !important; }
html.dark .border-purple-200 { border-color: rgba(168, 85, 247, 0.35) !important; }
html.dark .border-purple-200\/70 { border-color: rgba(168, 85, 247, 0.35) !important; }
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(51, 65, 85, 0.6) !important; }
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #263350 !important; }

/* Header kaca gelap */
html.dark #main-header {
  background: rgba(13, 20, 36, 0.85);
  border-color: #1d2942;
  backdrop-filter: blur(10px);
}

/* Strip tab kaca gelap */
html.dark .tabstrip-card {
  background: rgba(17, 26, 46, 0.88);
  border-color: #263350;
}

/* Tabel */
html.dark .data-table thead th {
  background: linear-gradient(180deg, #172036, #131c30);
  color: #aab8cc;
}
html.dark .data-table tbody tr:hover { background: #18233c; }

/* Input & select */
html.dark input, html.dark select, html.dark textarea {
  background-color: #0e1626;
  border-color: #2b3a5c;
  color: #e2e8f0;
}
html.dark input::placeholder { color: #5b6b8c; }
html.dark input:focus, html.dark select:focus, html.dark textarea:focus {
  border-color: #3b82f6;
}

/* QR frame & footer */
html.dark .qr-frame {
  background: linear-gradient(135deg, #1b2440, #10281f);
  border-color: rgba(129, 140, 248, 0.35);
}
html.dark .app-footer { color: #64748b; }

/* Toast gelap */
html.dark .toast-success { background-color: #0c2a22; color: #6ee7b7; border-left-color: #10b981; }
html.dark .toast-error { background-color: #2c1214; color: #fca5a5; border-left-color: #ef4444; }
html.dark .toast-info { background-color: #0d1c33; color: #93c5fd; border-left-color: #3b82f6; }

/* Login decor & banner sukses tetap kontras di dark */
html.dark .login-success-banner {
  background: linear-gradient(135deg, #065f46, #047857);
  box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.5);
}

/* Dropdown select option (browser asli) */
html.dark select option { background-color: #111a2e; color: #e2e8f0; }

/* Scrollbar gelap */
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: #0b1220; }
html.dark ::-webkit-scrollbar-thumb { background: #2b3a5c; border-radius: 8px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #3b4f7d; }

/* Saat mencetak selalu pakai tampilan terang (hemat tinta & QR tetap terbaca) */
@media print {
  html.dark body { background: white !important; color: #0f172a !important; }
  html.dark .bg-white, html.dark .bg-white\/90, html.dark .bg-white\/80,
  html.dark .bg-slate-50, html.dark .bg-slate-100 { background-color: white !important; }
  html.dark .text-slate-900, html.dark .text-slate-800, html.dark .text-slate-700,
  html.dark .text-slate-600, html.dark .text-slate-500 { color: #0f172a !important; }
  html.dark .card-shadow { background: white !important; border-color: #e2e8f0 !important; box-shadow: none !important; }
  html.dark #main-header, html.dark .tabstrip-card { background: white !important; }
}

/* ========================================================
   BANNER HASIL ABSEN (BERHASIL / GAGAL)
   ======================================================== */
.attendance-banner {
  position: fixed;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 320px;
  max-width: min(92vw, 560px);
  padding: 1rem 1.5rem;
  border-radius: 1.25rem;
  color: #fff;
  box-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: top 0.35s cubic-bezier(0.22, 1.2, 0.36, 1), opacity 0.3s ease;
  pointer-events: none;
}
.attendance-banner-show {
  top: 84px;
  opacity: 1;
}
.attendance-banner-success {
  background: linear-gradient(135deg, #059669, #10b981);
}
.attendance-banner-fail {
  background: linear-gradient(135deg, #dc2626, #ef4444);
}
.attendance-banner-icon {
  font-size: 2.2rem;
  display: flex;
  align-items: center;
}
.attendance-banner-title {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.attendance-banner-sub {
  font-size: 0.8rem;
  opacity: 0.95;
  margin-top: 2px;
}