/*
 * E-ABSENSI DESA GELGEL — Modern Green Theme v1.2.0
 * Tema mandiri dengan palet hijau modern. Tidak memuat atau menyalin aset merek pihak lain.
 * File ini sengaja diletakkan sebagai stylesheet terakhir agar bersifat aditif dan mudah di-rollback.
 */

:root {
  /* Design tokens: warna utama */
  --green-primary: #03AC0E;
  --green-secondary: #42B549;
  --green-dark: #028A0B;
  --green-soft: #E8F7E9;
  --green-softest: #F0FAF1;
  --app-background: #F6F7F8;
  --white: #FFFFFF;
  --text-primary: #212121;
  --text-secondary: #6D7588;
  --text-muted: #9AA0AD;
  --border-neutral: #E5E7EB;
  --danger-semantic: #DC2626;
  --warning-semantic: #F59E0B;
  --info-semantic: #2563EB;

  /* Kompatibilitas dengan token aplikasi lama */
  --primary: var(--green-primary);
  --primary-700: var(--green-dark);
  --navy: var(--text-primary);
  --teal: var(--green-secondary);
  --accent: var(--warning-semantic);
  --success: var(--green-secondary);
  --danger: var(--danger-semantic);
  --warning: var(--warning-semantic);
  --info: var(--info-semantic);
  --surface: var(--white);
  --surface-alt: var(--app-background);
  --surface-blue: var(--green-soft);
  --surface-green: var(--green-soft);
  --surface-yellow: #FFF7E6;
  --surface-red: #FEF2F2;
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --border: var(--border-neutral);

  /* Token bentuk, bayangan, dan tipografi */
  --font: "Poppins", "Inter", Arial, sans-serif;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-xs: 0 1px 2px rgba(33, 33, 33, .04);
  --shadow-sm: 0 4px 14px rgba(33, 33, 33, .06);
  --shadow-md: 0 10px 28px rgba(33, 33, 33, .08);
  --shadow: var(--shadow-sm);
  --focus-ring: 0 0 0 3px rgba(3, 172, 14, .18);
  --hero-gradient: linear-gradient(135deg, #03AC0E 0%, #20B92E 55%, #42B549 100%);
}

/* Dasar global */
html,
body,
.app-root,
.app-shell,
.app-main {
  background: var(--app-background);
}

html { color-scheme: light; }
body {
  color: var(--text-primary);
  font-family: var(--font);
  letter-spacing: -.005em;
}

::selection { background: rgba(3, 172, 14, .18); color: var(--text-primary); }

a { color: var(--green-dark); }
a:hover { color: var(--green-primary); }

button,
a,
input,
select,
textarea,
[tabindex]:not([tabindex="-1"]) {
  -webkit-tap-highlight-color: transparent;
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(3, 172, 14, .28);
  outline-offset: 2px;
}

/* Header / topbar */
.topbar {
  color: var(--text-primary);
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--border-neutral);
  box-shadow: 0 3px 16px rgba(33, 33, 33, .06);
  backdrop-filter: blur(14px);
}
.topbar-title h1 { color: var(--text-primary); }
.topbar-title p { color: var(--text-secondary); }
.icon-btn,
.mobile-admin-menu-trigger,
.topbar-account {
  color: var(--green-dark);
  background: var(--green-soft);
  border: 1px solid rgba(3, 172, 14, .12);
}
.icon-btn:hover,
.mobile-admin-menu-trigger:hover,
.mobile-admin-menu-trigger:active,
.topbar-account:hover {
  color: var(--green-dark);
  background: #DDF3DF;
}
.topbar-account-avatar {
  color: var(--green-dark);
  background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(3, 172, 14, .18);
}
.topbar-account-copy strong { color: var(--text-primary); }
.topbar-account-copy small { color: var(--text-secondary); }

/* Sidebar desktop */
.sidebar {
  color: var(--text-primary);
  background: var(--white);
  border-right: 1px solid var(--border-neutral);
  box-shadow: 8px 0 24px rgba(33, 33, 33, .04);
  transition: width .22s ease, padding .22s ease;
}
.brand { padding: 2px 4px 14px; border-bottom: 1px solid var(--border-neutral); }
.brand strong { color: var(--text-primary); }
.brand small { color: var(--text-secondary); }
.brand-mark { border: 1px solid var(--border-neutral); box-shadow: var(--shadow-xs); }
.sidebar-nav { margin-top: 14px; }
.nav-link,
.v11-sidebar-link {
  color: var(--text-primary);
  border: 0;
  border-radius: 10px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.nav-link:hover,
.v11-sidebar-link:hover {
  color: var(--green-dark);
  background: var(--green-softest);
}
.nav-link.is-active,
.v11-sidebar-link.is-active {
  color: var(--green-dark);
  background: var(--green-soft);
  box-shadow: inset 3px 0 0 var(--green-primary);
}
.nav-link.is-active .nav-icon,
.v11-sidebar-link.is-active .nav-icon { color: var(--green-primary); }
.v11-sidebar-heading {
  color: var(--text-muted);
  padding-left: 12px;
  padding-right: 12px;
}
.sidebar-user {
  border-top-color: var(--border-neutral);
  background: var(--green-softest);
  border-radius: var(--radius-md);
  padding: 14px 10px 10px;
}
.sidebar-user-head { color: var(--text-primary); }
.sidebar-user-head:hover { background: var(--green-soft); }
.sidebar-user-avatar {
  color: var(--green-dark);
  background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(3, 172, 14, .18);
}
.sidebar-user strong { color: var(--text-primary); }
.sidebar-user small { color: var(--text-secondary); }
.sidebar-user em { color: var(--text-muted); }
.sidebar-account-actions a,
.sidebar-account-actions button {
  color: var(--green-dark);
  background: var(--white);
  border-color: var(--border-neutral);
}
.sidebar-account-actions a:hover,
.sidebar-account-actions button:hover {
  color: var(--green-dark);
  background: var(--green-soft);
  border-color: rgba(3, 172, 14, .22);
}
.sidebar-collapse-wrap { margin: -8px 0 8px; }
.sidebar-collapse-toggle {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border-neutral);
  border-radius: 10px;
  color: var(--text-secondary);
  background: var(--white);
  font: 700 12px/1 var(--font);
}
.sidebar-collapse-toggle:hover { color: var(--green-dark); background: var(--green-softest); }
.sidebar-collapse-icon { font-size: 20px; line-height: 1; color: var(--green-primary); }

@media (min-width: 1024px) {
  body.sidebar-is-collapsed { --sidebar-width: 82px; }
  body.sidebar-is-collapsed .sidebar { padding-left: 12px; padding-right: 12px; }
  body.sidebar-is-collapsed .brand { justify-content: center; padding-left: 0; padding-right: 0; }
  body.sidebar-is-collapsed .brand > div:last-child,
  body.sidebar-is-collapsed .nav-link > span:last-child,
  body.sidebar-is-collapsed .v11-sidebar-link > span:last-child,
  body.sidebar-is-collapsed .v11-sidebar-heading,
  body.sidebar-is-collapsed .sidebar-user-copy,
  body.sidebar-is-collapsed .sidebar-account-actions,
  body.sidebar-is-collapsed .sidebar-collapse-label { display: none !important; }
  body.sidebar-is-collapsed .nav-link,
  body.sidebar-is-collapsed .v11-sidebar-link { justify-content: center; padding-left: 8px; padding-right: 8px; }
  body.sidebar-is-collapsed .sidebar-user { padding: 12px 8px; }
  body.sidebar-is-collapsed .sidebar-user-head { justify-content: center; }
  body.sidebar-is-collapsed .sidebar-collapse-toggle { width: 44px; margin: 0 auto; padding: 0; }
  body.sidebar-is-collapsed .brand-mark { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
}

/* Drawer admin mobile */
@media (max-width: 1023px) {
  .mobile-admin-drawer-backdrop { background: rgba(33, 33, 33, .48); }
  .mobile-admin-drawer-panel {
    color: var(--text-primary);
    background: var(--white);
    border-right: 1px solid var(--border-neutral);
    box-shadow: 18px 0 48px rgba(33, 33, 33, .18);
  }
  .mobile-admin-drawer-head { border-bottom-color: var(--border-neutral); }
  .mobile-admin-drawer-brand strong { color: var(--text-primary); }
  .mobile-admin-drawer-brand small { color: var(--text-secondary); }
  .mobile-admin-drawer-close {
    color: var(--green-dark);
    background: var(--green-soft);
  }
  .mobile-admin-drawer-user {
    background: var(--green-softest);
    border-bottom-color: var(--border-neutral);
  }
  .mobile-admin-drawer-avatar { color: var(--green-dark); background: var(--white); box-shadow: inset 0 0 0 1px rgba(3,172,14,.18); }
  .mobile-admin-drawer-user-copy strong { color: var(--text-primary); }
  .mobile-admin-drawer-user-copy span { color: var(--text-secondary); }
  .mobile-admin-drawer-user-copy small { color: var(--text-muted); }
  .mobile-admin-drawer-label { color: var(--text-muted); }
  .mobile-admin-drawer-link,
  .mobile-admin-drawer-logout { color: var(--text-primary); }
  .mobile-admin-drawer-link:hover,
  .mobile-admin-drawer-link:active { color: var(--green-dark); background: var(--green-softest); }
  .mobile-admin-drawer-link.is-active {
    color: var(--green-dark);
    background: var(--green-soft);
    box-shadow: inset 3px 0 0 var(--green-primary);
  }
  .mobile-admin-drawer-link.is-active .mobile-admin-drawer-icon { color: var(--green-primary); }
  .mobile-admin-drawer-divider { background: var(--border-neutral); }
  .mobile-admin-drawer-logout { color: var(--danger-semantic); }
  .mobile-admin-drawer-logout:hover,
  .mobile-admin-drawer-logout:active { color: #B91C1C; background: #FEF2F2; }
}

/* Bottom navigation */
.bottom-nav {
  background: rgba(255, 255, 255, .97);
  border-top-color: var(--border-neutral);
  box-shadow: 0 -6px 20px rgba(33, 33, 33, .05);
}
.bottom-link { color: var(--text-secondary); }
.bottom-link:hover { color: var(--green-dark); background: var(--green-softest); }
.bottom-link.is-active {
  color: var(--green-dark);
  background: var(--green-soft);
}
.bottom-link.is-active .nav-icon { color: var(--green-primary); }

/* Kartu, dashboard, hero, dan daftar */
.card,
.list-item,
.action-card,
.v11-public-card,
.v11-qr-box,
.eabs-guest-report-sheet {
  background: var(--white);
  border-color: var(--border-neutral);
  box-shadow: var(--shadow-sm);
}
.card { border-radius: var(--radius-md); }
.card.is-flat { box-shadow: var(--shadow-xs); }
.card.is-blue,
.card.is-green,
.card.is-info { background: var(--green-softest); border-color: #D7F0DA; }
.card.is-yellow { background: #FFF8E8; border-color: #FDE7B2; }
.card.is-red { background: #FEF2F2; border-color: #FECACA; }
.hero-card,
.card.main-card,
.card.is-primary,
.dashboard-hero {
  color: var(--white);
  background: var(--hero-gradient);
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(3, 172, 14, .18);
}
.hero-card .date,
.hero-card .status,
.hero-card .card-title,
.hero-card .card-subtitle,
.hero-card h1,
.hero-card h2,
.hero-card h3,
.hero-card p { color: var(--white); }
.stat-card { border-color: var(--border-neutral); }
.stat-card:hover { transform: translateY(-1px); border-color: rgba(3, 172, 14, .24); box-shadow: var(--shadow-md); }
.stat-value,
.v11-kpi strong { color: var(--green-primary); }
.card-subtitle,
.section-head p,
.stat-label,
.greeting p,
.list-meta { color: var(--text-secondary); }
.action-card:hover,
.list-item.is-clickable:hover,
.v11-module-card:hover,
.v11-agenda-card:hover {
  border-color: rgba(3, 172, 14, .26);
  background: var(--green-softest);
}
.action-number,
.v11-module-card .v11-module-icon {
  color: var(--green-dark);
  background: var(--green-soft);
}

/* Tombol */
.btn {
  min-height: 44px;
  border-radius: 10px;
  box-shadow: none;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary {
  color: var(--white);
  background: var(--hero-gradient);
  border-color: transparent;
  box-shadow: 0 5px 14px rgba(3, 172, 14, .16);
}
.btn-primary:hover {
  color: var(--white);
  background: linear-gradient(135deg, #028A0B 0%, #03AC0E 100%);
  box-shadow: 0 7px 18px rgba(3, 172, 14, .22);
}
.btn-secondary {
  color: var(--green-dark);
  background: var(--white);
  border-color: var(--green-primary);
}
.btn-secondary:hover { color: var(--green-dark); background: var(--green-softest); }
.btn-teal,
.btn-success { color: var(--white); background: var(--green-secondary); }
.btn-teal:hover,
.btn-success:hover { background: #329B3A; }
.btn-warning { color: var(--white); background: var(--warning-semantic); }
.btn-danger { color: var(--white); background: var(--danger-semantic); }
.btn-danger-outline { color: var(--danger-semantic); background: var(--white); border-color: var(--danger-semantic); }
.btn-danger-outline:hover { background: #FEF2F2; }
.btn-ghost { color: var(--text-primary); background: var(--white); border-color: var(--border-neutral); }
.btn-ghost:hover { color: var(--green-dark); background: var(--green-softest); border-color: rgba(3,172,14,.28); }
.btn:disabled { filter: grayscale(.15); }

/* Form, input, checkbox, radio */
.field label { color: var(--text-primary); }
.field .hint,
.field-help { color: var(--text-secondary); }
.input,
.select,
.textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  color: var(--text-primary);
  background: var(--white);
  border-color: var(--border-neutral);
  border-radius: 10px;
}
.input:hover,
.select:hover,
.textarea:hover { border-color: #C9CDD5; }
.input:focus,
.select:focus,
.textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  border-color: var(--green-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}
.input::placeholder,
.textarea::placeholder,
input::placeholder,
textarea::placeholder { color: var(--text-muted); }
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--green-primary);
}
.segmented span { color: var(--green-dark); border-color: var(--green-primary); background: var(--white); }
.segmented input:checked + span { color: var(--green-dark); background: var(--green-soft); box-shadow: inset 0 0 0 1px var(--green-primary); }
.password-toggle { color: var(--text-secondary); }
.password-toggle:hover,
.password-toggle:focus-visible { color: var(--green-dark); background: var(--green-soft); }

/* Cegah grid/table memperlebar viewport pada layar kecil */
.content-wrap,
.page-grid,
.page-grid > *,
.grid-2,
.grid-3,
.grid-4,
.card,
.table-wrap,
.eabs-guest-report-scroll { min-width: 0; max-width: 100%; }

/* Tabel, filter, pagination */
.table-wrap,
.eabs-guest-report-scroll {
  background: var(--white);
  border-color: var(--border-neutral);
  box-shadow: var(--shadow-xs);
}
table { background: var(--white); }
th,
.eabs-guest-report-table th {
  color: #374151;
  background: #F9FAFB;
  border-color: var(--border-neutral);
  font-weight: 800;
}
td,
.eabs-guest-report-table td { color: var(--text-primary); border-color: var(--border-neutral); }
tbody tr:nth-child(even) td { background: #FCFCFD; }
tbody tr:hover td { background: var(--green-softest); }
td.numeric,
td.text-right,
th.numeric,
th.text-right,
[data-align="right"] { text-align: right !important; font-variant-numeric: tabular-nums; }
.pagination .btn { background: var(--white); }
.pagination .btn.is-active,
.pagination .btn[aria-current="page"] { color: var(--white); background: var(--green-primary); border-color: var(--green-primary); }
.v11-toolbar,
.filter-bar,
.filters,
.search-filter { background: transparent; }

/* Tab, breadcrumb, chip, status */
.tabs { gap: 6px; }
.tab {
  color: var(--text-secondary);
  background: var(--white);
  border-color: var(--border-neutral);
}
.tab:hover { color: var(--green-dark); background: var(--green-softest); }
.tab.is-active {
  color: var(--green-dark);
  background: var(--green-soft);
  border-color: rgba(3, 172, 14, .24);
  box-shadow: inset 0 -2px 0 var(--green-primary);
}
.breadcrumb,
.breadcrumbs { color: var(--text-secondary); }
.breadcrumb a,
.breadcrumbs a { color: var(--green-dark); }
.chip { background: #F3F4F6; color: var(--text-secondary); }
.chip-success { color: var(--green-dark); background: var(--green-soft); }
.chip-warning { color: #B45309; background: #FFF7E6; }
.chip-danger { color: #B91C1C; background: #FEF2F2; }
.chip-info { color: #1D4ED8; background: #EFF6FF; }
.chip-navy { color: #374151; background: #F3F4F6; }

/* Modal, drawer, toast, alert */
.modal-backdrop { background: rgba(33, 33, 33, .44); backdrop-filter: blur(2px); }
.modal {
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 70px rgba(33, 33, 33, .22);
}
.modal-head,
.modal-foot { background: var(--white); border-color: var(--border-neutral); }
.toast {
  color: var(--text-primary);
  background: var(--white);
  border: 1px solid var(--border-neutral);
  box-shadow: var(--shadow-md);
}
.toast.is-success { color: var(--green-dark); background: var(--green-soft); border-color: #BFE9C4; }
.toast.is-danger { color: #B91C1C; background: #FEF2F2; border-color: #FECACA; }
.toast.is-warning { color: #B45309; background: #FFF7E6; border-color: #FDE7B2; }
.notice { border-radius: 12px; }
.notice-info { color: #1D4ED8; background: #EFF6FF; border-color: #BFDBFE; }
.notice-success { color: var(--green-dark); background: var(--green-soft); border-color: #BFE9C4; }
.notice-warning { color: #B45309; background: #FFF7E6; border-color: #FDE7B2; }
.notice-danger { color: #B91C1C; background: #FEF2F2; border-color: #FECACA; }

/* Progress, timeline, notifikasi, loading */
.spinner { border-color: #DDF3DF; border-top-color: var(--green-primary); }
.global-loading { color: var(--text-primary); background: rgba(246, 247, 248, .92); }
.progress-step span { color: var(--text-secondary); background: #EEF0F2; }
.progress-step.is-active span { color: var(--white); background: var(--green-primary); }
.progress-step.is-done span { color: var(--white); background: var(--green-secondary); }
.v11-public-step { background: var(--border-neutral); }
.v11-public-step.is-done,
.v11-public-step.is-active { background: var(--green-primary); }
.v11-summary-bar { background: #EEF0F2; }
.v11-summary-bar > span { background: var(--hero-gradient); }
.timeline-dot { color: var(--green-dark); background: var(--green-soft); }
.notification.is-unread,
.list-item.is-unread { background: var(--green-softest); border-left: 3px solid var(--green-primary); }

/* Login dan splash */
.auth-page { background: var(--white); }
.auth-brand {
  color: var(--white);
  background: var(--hero-gradient);
}
.auth-brand p { color: rgba(255, 255, 255, .86); }
.auth-panel { background: var(--white); }
.auth-logo {
  background: var(--white) !important;
  border: 1px solid var(--border-neutral);
  box-shadow: 0 10px 26px rgba(3, 172, 14, .12) !important;
}
.login-help { color: var(--text-secondary); }

/* Profil dan avatar */
.profile-head {
  background: linear-gradient(180deg, var(--green-softest), var(--white));
  border-radius: var(--radius-lg);
}
.profile-head .avatar,
.avatar-male,
.avatar-female,
.avatar-neutral {
  color: var(--green-dark);
  background: linear-gradient(135deg, var(--green-soft), var(--white));
  box-shadow: inset 0 0 0 1px rgba(3, 172, 14, .18);
}

/* Empty state dan halaman error */
.empty-state {
  background: var(--white);
  border: 1px dashed #D7DBE1;
  border-radius: var(--radius-lg);
}
.empty-icon {
  color: var(--green-dark);
  background: var(--green-soft);
}
.error-state .empty-icon,
.http-error .empty-icon,
[data-error-page] .empty-icon {
  color: var(--danger-semantic);
  background: #FEF2F2;
}
.skeleton {
  background: linear-gradient(90deg, #EEF0F2 25%, #FAFBFB 38%, #EEF0F2 63%);
  background-size: 400% 100%;
}

/* Kamera, peta, media, tanda tangan */
.camera-box,
.map-box,
.eabs-detail-media-card {
  background-color: #F3F4F6;
  border-color: var(--border-neutral);
}
.file-preview,
.temporary-pin,
.v11-public-meta { background: var(--green-softest); }
.eabs-detail-media-card.is-signature img,
.eabs-detail-media-card.is-signature canvas,
.signature-preview img,
.signature-preview canvas {
  object-fit: contain !important;
  background: var(--white);
}

/* Halaman publik QR */
.v11-public-page { color: var(--text-primary); background: var(--app-background); }
.v11-public-head {
  color: var(--text-primary);
  background: var(--white);
  border-bottom: 1px solid var(--border-neutral);
  box-shadow: var(--shadow-sm);
}
.v11-public-head h1 { color: var(--text-primary); }
.v11-public-head p { color: var(--text-secondary); opacity: 1; }
.v11-public-head img { border: 1px solid var(--border-neutral); }
.v11-public-meta { border: 1px solid #D7F0DA; }
.v11-privacy { color: var(--text-secondary); background: #F9FAFB; border: 1px solid var(--border-neutral); }

/* Grafik generik */
.chart-primary,
.chart-bar-primary,
.progress-bar,
[role="progressbar"] > span { background: var(--hero-gradient); }
svg .chart-primary,
svg [data-series="primary"] { fill: var(--green-primary); stroke: var(--green-primary); }

/* Responsif */
@media (max-width: 699px) {
  .content-wrap { padding: 14px; }
  .card { border-radius: 14px; }
  .btn-row { gap: 8px; }
  .btn-row .btn { min-width: 0; }
  .table-wrap,
  .eabs-guest-report-scroll { border-radius: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 680px; }
  .modal { border-radius: 20px 20px 12px 12px; }
}

@media (min-width: 700px) and (max-width: 1023px) {
  .content-wrap { padding: 20px; }
  .card { border-radius: 16px; }
}

/* Cetak: pertahankan tampilan rapi, netral, dan hemat tinta */
@media print {
  :root {
    --app-background: #FFFFFF;
    --shadow: none;
    --shadow-sm: none;
    --shadow-md: none;
  }
  html,
  body,
  .app-root,
  .app-shell,
  .app-main,
  .content-wrap,
  .card,
  .eabs-guest-report-sheet { background: #FFFFFF !important; box-shadow: none !important; }
  th,
  .eabs-guest-report-table th { color: #111827 !important; background: #F3F4F6 !important; }
  tbody tr:nth-child(even) td { background: #FAFAFA !important; }
  tbody tr:hover td { background: inherit !important; }
  .hero-card { color: #111827 !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .stat-card,
  .btn { transition: none !important; }
}