/* ==========================================================================
   ABSENSI & CUTI — AYODHA FARM
   Design system: Slate + Indigo, mobile-first, light & dark mode.
   --------------------------------------------------------------------------
   Token dipakai lewat CSS variable, tidak ada warna mentah di komponen.
   Skala spasi 4/8px, radius 10/14/18px, transisi 160-240ms.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKEN — MODE TERANG (bawaan)
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --c-bg:            #F6F8FC;
  --c-surface:       #FFFFFF;
  --c-surface-2:     #F2F5FA;
  --c-surface-3:     #E8EDF7;
  --c-text:          #1F2937;
  --c-text-soft:     #4B5563;
  --c-text-muted:    #5C6675;
  --c-border:        #E6EAF2;
  --c-border-strong: #CFD6E4;

  --c-primary:       #4F46E5;
  --c-primary-hover: #4338CA;
  --c-primary-soft:  #EEF2FF;
  --c-on-primary:    #FFFFFF;

  --c-accent:        #F59E0B;
  --c-accent-hover:  #D97706;
  --c-on-accent:     #3D2A00;

  --c-success:       #047857;
  --c-warning:       #B45309;
  --c-danger:        #DC2626;
  --c-info:          #0284C7;

  --c-shadow-sm: 0 1px 2px rgba(31, 41, 55, .05);
  --c-shadow-md: 0 2px 6px -1px rgba(31, 41, 55, .06);
  --c-shadow-lg: 0 8px 20px -8px rgba(31, 41, 55, .12);
  --c-shadow-brand: 0 6px 16px -8px rgba(79, 70, 229, .3);

  /* Kartu absensi memakai latar indigo muda, bukan blok gradien pekat. */
  --c-hero:      #EEF2FF;
  --c-hero-line: #C7D2FE;
  --c-on-hero:   #1F2937;
  --c-glass:     rgba(255, 255, 255, .92);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. TOKEN — MODE GELAP
   Warna teks & aksen dinaikkan terangnya agar kontras tetap >= 4.5:1.
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
  --c-bg:            #151C2C;
  --c-surface:       #1E2739;
  --c-surface-2:     #263047;
  --c-surface-3:     #2E3A52;
  --c-text:          #E8EDF5;
  --c-text-soft:     #CBD5E1;
  --c-text-muted:    #94A3B8;
  --c-border:        #263349;
  --c-border-strong: #33425E;

  --c-primary:       #818CF8;
  --c-primary-hover: #A5B4FC;
  --c-primary-soft:  #1E1B4B;
  --c-on-primary:    #0B1120;

  --c-accent:        #FBBF24;
  --c-accent-hover:  #FCD34D;
  --c-on-accent:     #2B1D00;

  --c-success:       #34D399;
  --c-warning:       #FBBF24;
  --c-danger:        #F87171;
  --c-info:          #38BDF8;

  --c-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --c-shadow-md: 0 4px 10px -2px rgba(0, 0, 0, .5);
  --c-shadow-lg: 0 16px 32px -10px rgba(0, 0, 0, .6);
  --c-shadow-brand: 0 14px 32px -10px rgba(99, 102, 241, .55);

  --c-hero:      #2A3352;
  --c-hero-line: #3D4A73;
  --c-on-hero:   #E8EDF5;
  --c-glass:     rgba(30, 39, 57, .94);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   3. JEMBATAN KE BOOTSTRAP
   Supaya badge/alert/tabel bawaan Bootstrap ikut token di atas.
   -------------------------------------------------------------------------- */
:root {
  --bs-primary: #4F46E5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-success: #047857;
  --bs-success-rgb: 4, 120, 87;
  /* Badge kuning memakai teks hitam, jadi latarnya sengaja lebih terang. */
  --bs-warning: #D97706;
  --bs-warning-rgb: 217, 119, 6;
  --bs-danger: #DC2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-info: #0284C7;
  --bs-info-rgb: 2, 132, 199;
  --bs-secondary: #566175;
  --bs-secondary-rgb: 86, 97, 117;
  --bs-body-bg: var(--c-bg);
  --bs-body-color: var(--c-text);
  --bs-border-color: var(--c-border);
  --bs-link-color: var(--c-primary);
  --bs-link-hover-color: var(--c-primary-hover);
}

[data-bs-theme="dark"] {
  --bs-primary: #818CF8;
  --bs-primary-rgb: 129, 140, 248;
  --bs-success: #34D399;
  --bs-success-rgb: 52, 211, 153;
  --bs-warning: #FBBF24;
  --bs-warning-rgb: 251, 191, 36;
  --bs-danger: #F87171;
  --bs-danger-rgb: 248, 113, 113;
  --bs-info: #38BDF8;
  --bs-info-rgb: 56, 189, 248;
  --bs-body-bg: var(--c-bg);
  --bs-body-color: var(--c-text);
  --bs-border-color: var(--c-border);
}

/* --------------------------------------------------------------------------
   4. DASAR
   -------------------------------------------------------------------------- */
:root {
  /* Satu keluarga font untuk judul & isi: satu permintaan berkas, ringan di HP. */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --sidebar-w: 268px;
  --navbar-h: 62px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  background: var(--c-bg);
  color: var(--c-text);
  padding-bottom: calc(78px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}

h1, h2, h3, h4, h5, h6, .page-title {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -.011em;
  color: var(--c-text);
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-hover); }

/* Angka jam & statistik tidak boleh "lompat" saat berubah. */
.clock, .stat-card .value, .balance-box .num, .time-pair .value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Fokus keyboard selalu terlihat — jangan dihapus. */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: var(--c-primary); color: #fff; }

/* --------------------------------------------------------------------------
   5. NAVBAR ATAS (frosted, sticky)
   -------------------------------------------------------------------------- */
.app-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--navbar-h);
  background: var(--c-glass);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--c-border);
}

.app-navbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--c-text);
  min-width: 0;
}
.app-brand:hover { color: var(--c-text); }

.app-brand img {
  height: 28px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
}

.app-brand span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.app-brand strong {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.app-brand small {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* Tombol ikon: area sentuh tetap 44px walau ikonnya kecil. */
.app-navbar .btn-icon,
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--c-text-soft);
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.btn-icon:hover { background: var(--c-surface-2); color: var(--c-text); }

.app-navbar .btn-user,
.btn-user {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  min-height: 44px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  border-radius: var(--radius-pill);
  padding: 4px 12px 4px 4px;
  font-size: 14px;
  font-weight: 500;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.btn-user:hover { border-color: var(--c-border-strong); background: var(--c-surface-2); color: var(--c-text); }
.btn-user::after { color: var(--c-text-muted); }

.avatar {
  width: 32px; height: 32px;
  flex: 0 0 32px;
  border-radius: var(--radius-pill);
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dropdown-menu {
  border-radius: var(--radius-md);
  border-color: var(--c-border);
  box-shadow: var(--c-shadow-lg);
  padding: 6px;
}
.dropdown-item { border-radius: var(--radius-sm); padding: 9px 12px; }

/* --------------------------------------------------------------------------
   6. SIDEBAR / OFFCANVAS
   -------------------------------------------------------------------------- */
.app-sidebar {
  position: fixed;
  top: var(--navbar-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  overflow-y: auto;
  padding: var(--space-4) var(--space-3);
  z-index: 1020;
}

.app-offcanvas { width: 286px; background: var(--c-surface); }

.app-menu { list-style: none; margin: 0; padding: 0; }

.app-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--c-text-soft);
  font-size: 15px;
  font-weight: 500;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}

.app-menu a i { font-size: 18px; width: 20px; text-align: center; }
.app-menu a:hover { background: var(--c-surface-2); color: var(--c-text); }

.app-menu a.active {
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--c-primary);
}

/* --------------------------------------------------------------------------
   7. KERANGKA KONTEN
   -------------------------------------------------------------------------- */
.app-main { padding: var(--space-5) 0 var(--space-6); }

.app-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (min-width: 992px) {
  body { padding-bottom: 0; }
  .app-main { margin-left: var(--sidebar-w); }
  .app-container { padding: 0 var(--space-6); }
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.page-title {
  font-size: 22px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-title i { color: var(--c-primary); font-size: 20px; }
.page-head .ms-auto, .page-head form { margin-left: auto; }

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--c-shadow-sm);
  margin-bottom: var(--space-4);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--c-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 18px;
  color: var(--c-text);
}
.card-header i { color: var(--c-primary); }
.card-footer { background: transparent; border-top: 1px solid var(--c-border); }

.list-group-item {
  background: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text);
}
.list-group-item-action:hover { background: var(--c-surface-2); }

.alert { border-radius: var(--radius-md); border-width: 1px; }

/* --------------------------------------------------------------------------
   8. TOMBOL
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-border-radius: var(--radius-sm);
  font-weight: 600;
  /* Tombol utama mengikuti anjuran area sentuh minimum 44px. */
  min-height: 44px;
  transition: transform .12s var(--ease), background-color .16s var(--ease), box-shadow .16s var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Tombol kecil di dalam tabel: tetap di atas batas minimum WCAG 2.2 (24px). */
.btn-sm { min-height: 36px; }

/* Tombol tutup bawaan Bootstrap hanya 32px; area sentuhnya dilebarkan. */
.btn-close {
  width: 44px;
  height: 44px;
  background-size: 1em;
  background-position: center;
}

.btn-primary {
  --bs-btn-bg: var(--c-primary);
  --bs-btn-border-color: var(--c-primary);
  --bs-btn-color: var(--c-on-primary);
  --bs-btn-hover-bg: var(--c-primary-hover);
  --bs-btn-hover-border-color: var(--c-primary-hover);
  --bs-btn-hover-color: var(--c-on-primary);
  --bs-btn-active-bg: var(--c-primary-hover);
  --bs-btn-active-border-color: var(--c-primary-hover);
  --bs-btn-disabled-bg: var(--c-primary);
  --bs-btn-disabled-border-color: var(--c-primary);
  --bs-btn-disabled-color: var(--c-on-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--c-primary);
  --bs-btn-border-color: var(--c-border-strong);
  --bs-btn-hover-bg: var(--c-primary);
  --bs-btn-hover-border-color: var(--c-primary);
  --bs-btn-hover-color: var(--c-on-primary);
  --bs-btn-active-bg: var(--c-primary-hover);
  --bs-btn-active-border-color: var(--c-primary-hover);
}

.btn-outline-secondary {
  --bs-btn-color: var(--c-text-soft);
  --bs-btn-border-color: var(--c-border-strong);
  --bs-btn-hover-bg: var(--c-surface-2);
  --bs-btn-hover-border-color: var(--c-border-strong);
  --bs-btn-hover-color: var(--c-text);
}

.btn-accent {
  background: var(--c-accent);
  border: 0;
  color: var(--c-on-accent);
  font-weight: 600;
}
.btn-accent:hover, .btn-accent:focus { background: var(--c-accent-hover); color: var(--c-on-accent); }

/* --------------------------------------------------------------------------
   9. KARTU ABSENSI (elemen utama aplikasi)
   -------------------------------------------------------------------------- */
.clock-card {
  border-radius: var(--radius-lg);
  background: var(--c-hero);
  border: 1px solid var(--c-hero-line);
  color: var(--c-on-hero);
  padding: var(--space-5) var(--space-4);
  box-shadow: var(--c-shadow-brand);
  margin-bottom: var(--space-5);
  text-align: center;
}

.clock-card .today { font-size: 14px; color: var(--c-text-soft); }

.clock-card .clock {
  font-family: var(--font-heading);
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--c-primary-hover);
  margin: 6px 0 4px;
}

.clock-card .zone {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.btn-absen {
  width: 100%;
  min-height: 62px;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em;
  border: 0;
  margin-top: var(--space-5);
  transition: transform .12s var(--ease), background-color .16s var(--ease);
}
.btn-absen:active { transform: scale(.985); }

.btn-absen-in { background: var(--c-primary); color: var(--c-on-primary); }
.btn-absen-in:hover { background: var(--c-primary-hover); color: var(--c-on-primary); }

.btn-absen-out { background: var(--c-accent); color: var(--c-on-accent); }
.btn-absen-out:hover { background: var(--c-accent-hover); color: var(--c-on-accent); }

.btn-absen-done {
  background: var(--c-surface);
  color: var(--c-text-muted);
  border: 1px dashed var(--c-border-strong);
}
.btn-absen:disabled { opacity: 1; cursor: default; }

.time-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.time-pair > div {
  background: var(--c-surface);
  border: 1px solid var(--c-hero-line);
  border-radius: var(--radius-md);
  padding: 10px 8px;
}

.time-pair .label {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.time-pair .value {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--c-text);
}
/* --------------------------------------------------------------------------
   10. STATISTIK & SALDO
   -------------------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--c-shadow-sm);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.stat-card:hover { border-color: var(--c-border-strong); box-shadow: var(--c-shadow-md); }

.stat-card .label {
  font-size: 11.5px;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.stat-card .value {
  font-family: var(--font-heading);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin-top: 2px;
}
.stat-card .value.sm { font-size: 21px; }
.stat-card i { font-size: 15px; }

.balance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (min-width: 768px) { .balance-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.balance-box {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  text-align: center;
  background: var(--c-surface-2);
}
.balance-box .num {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--c-text);
}
.balance-box .cap { font-size: 12px; color: var(--c-text-muted); }

.balance-box.highlight {
  background: var(--c-primary-soft);
  border-color: #C7D2FE;
  border-color: color-mix(in srgb, var(--c-primary) 30%, transparent);
}
.balance-box.highlight .num { color: var(--c-primary); }

/* --------------------------------------------------------------------------
   11. TABEL & FORM
   -------------------------------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--c-text);
  --bs-table-hover-bg: var(--c-surface-2);
  --bs-table-hover-color: var(--c-text);
  --bs-table-border-color: var(--c-border);
  margin-bottom: 0;
}
.table > thead th {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-text-muted);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
  padding: 10px 12px;
}
.table td, .table th { vertical-align: middle; }
.table-wrap { overflow-x: auto; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

.badge { font-weight: 600; letter-spacing: .01em; border-radius: var(--radius-pill); padding: .38em .7em; }

.empty-state { text-align: center; padding: var(--space-7) var(--space-4); color: var(--c-text-muted); }
.empty-state i { font-size: 38px; opacity: .4; display: block; margin-bottom: 10px; }

.form-label { font-weight: 600; font-size: 14px; margin-bottom: 5px; color: var(--c-text-soft); }
.form-control, .form-select {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-height: 44px;
  background: var(--c-surface);
  border-color: var(--c-border-strong);
  color: var(--c-text);
}
.form-control:focus, .form-select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .22);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 22%, transparent);
  background: var(--c-surface);
  color: var(--c-text);
}
.form-control::placeholder { color: var(--c-text-muted); opacity: .8; }
.form-text { font-size: 12.5px; color: var(--c-text-muted); }
.input-group-text { background: var(--c-surface-2); border-color: var(--c-border-strong); color: var(--c-text-muted); }

.required::after { content: ' *'; color: var(--c-danger); }

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--c-primary);
  --bs-nav-link-color: var(--c-text-soft);
  --bs-nav-link-hover-color: var(--c-primary);
  gap: 6px;
}
.nav-pills .nav-link { border-radius: var(--radius-pill); font-weight: 600; font-size: 14px; padding: 7px 16px; }

.modal-content { border-radius: var(--radius-lg); border-color: var(--c-border); background: var(--c-surface); }
.modal-backdrop.show { opacity: .5; }

/* --------------------------------------------------------------------------
   12. TAB BAWAH (HP)
   -------------------------------------------------------------------------- */
.app-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1035;
  background: var(--c-glass);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--c-border);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.app-tabbar a {
  flex: 1;
  min-height: 56px;
  padding: 9px 4px 8px;
  text-align: center;
  color: var(--c-text-muted);
  font-size: 11px;
  font-weight: 600;
  transition: color .16s var(--ease);
}
.app-tabbar a i { display: block; font-size: 21px; margin-bottom: 2px; }
.app-tabbar a.active { color: var(--c-primary); }

.app-footer {
  text-align: center;
  font-size: 12px;
  color: var(--c-text-muted);
  padding: var(--space-5) var(--space-3) var(--space-6);
}
@media (min-width: 992px) { .app-footer { margin-left: var(--sidebar-w); } }

/* --------------------------------------------------------------------------
   13. HALAMAN LOGIN
   -------------------------------------------------------------------------- */
.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-4);
  background:
    radial-gradient(900px 460px at 10% -5%, #E0E7FF, transparent 62%),
    radial-gradient(820px 440px at 108% 106%, #DBEAFE, transparent 64%),
    var(--c-bg);
}

.login-card {
  width: 100%;
  max-width: 412px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 22px;
  padding: var(--space-6) var(--space-5) var(--space-5);
  box-shadow: 0 10px 34px -14px rgba(31, 41, 55, .22);
}

.login-logo {
  display: block;
  width: 172px;
  max-width: 62%;
  height: auto;
  margin: 0 auto var(--space-4);
}
.login-card h1 { font-size: 21px; text-align: center; margin-bottom: 2px; }
.login-card .sub { text-align: center; color: var(--c-text-muted); font-size: 13.5px; margin-bottom: var(--space-5); }

/* --------------------------------------------------------------------------
   14. MOTION
   Halus dan singkat (160-260ms). Dimatikan bila pengguna meminta.
   -------------------------------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.app-main > .app-container > .card,
.app-main > .app-container > .clock-card,
.app-main > .app-container > .stat-grid,
.app-main > .app-container > .row {
  animation: rise .26s var(--ease) both;
}
.app-main > .app-container > *:nth-child(3) { animation-delay: .03s; }
.app-main > .app-container > *:nth-child(4) { animation-delay: .06s; }
.app-main > .app-container > *:nth-child(5) { animation-delay: .09s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   15. CETAK — laporan yang dicetak tidak perlu warna latar & navigasi
   -------------------------------------------------------------------------- */
@media print {
  .app-navbar, .app-sidebar, .app-tabbar, .app-footer, .page-head form, .btn { display: none !important; }
  .app-main { margin-left: 0; }
  .card { box-shadow: none; border-color: #999; }
  body { background: #fff; color: #000; padding: 0; }
}

/* --------------------------------------------------------------------------
   16. UTILITAS TEMA
   Pengganti kelas Bootstrap yang mengunci warna terang (bg-white, text-bg-light)
   supaya komponen tetap terbaca di mode gelap.
   -------------------------------------------------------------------------- */
.badge-soft {
  background: var(--c-surface-2);
  color: var(--c-text-soft);
  border: 1px solid var(--c-border);
  font-weight: 600;
}

.alert-soft {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  color: var(--c-text);
}

/* Chip di atas kartu absensi berlatar gradien. */
.chip-on-hero {
  background: var(--c-surface);
  border: 1px solid var(--c-hero-line);
  color: var(--c-text-soft);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   17. KOREKSI BADGE DI MODE GELAP
   Bootstrap mengunci teks putih pada .text-bg-primary/success/danger, padahal
   di mode gelap latarnya sengaja dibuat terang. Teksnya dibalik jadi gelap
   supaya kontras tetap >= 4.5:1.
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .text-bg-primary,
[data-bs-theme="dark"] .text-bg-success,
[data-bs-theme="dark"] .text-bg-danger {
  /* !important diperlukan karena aturan bawaan Bootstrap juga memakai !important. */
  color: #0B1120 !important;
}

/* --------------------------------------------------------------------------
   18. VERSI SIMPEL UNTUK LAYAR HP
   Di layar kecil hiasan dilepas: tanpa blur (mahal di HP kelas bawah),
   bayangan tipis, jarak lebih rapat, dan animasi masuk dimatikan.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .app-navbar,
  .app-tabbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--c-surface);
  }

  .card,
  .stat-card,
  .clock-card { box-shadow: none; }

  .app-main > .app-container > * { animation: none; }

  .app-main { padding: var(--space-4) 0 var(--space-5); }
  .app-container { padding: 0 var(--space-3); }

  .page-head { margin-bottom: var(--space-4); }
  .page-title { font-size: 19px; }

  .card { border-radius: var(--radius-md); margin-bottom: var(--space-3); }
  .card-header { padding: 12px 14px; font-size: 14px; }
  .card-body { padding: 14px; }
  .table-wrap { border-radius: 0 0 var(--radius-md) var(--radius-md); }

  .clock-card { padding: var(--space-4) var(--space-3) var(--space-5); }
  .clock-card .clock { font-size: 42px; }

  .stat-card { padding: 12px 14px; }
  .stat-card .value { font-size: 24px; }

  /* Tombol aksi di form melebar penuh supaya mudah dijangkau ibu jari. */
  .card-footer .btn,
  .card-footer form { width: 100%; }
  .card-footer { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   19. TABEL JADI DAFTAR KARTU DI LAYAR SEMPIT
   Tabel lebar tidak enak digeser di HP, jadi tiap baris ditumpuk menjadi
   satu kartu dengan label di kiri dan nilainya di kanan. Nama label
   diambil dari atribut data-label pada tiap <td>.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .table-cards thead { display: none; }

  .table-cards,
  .table-cards tbody,
  .table-cards tr,
  .table-cards td { display: block; width: auto; }

  .table-cards tbody tr {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    margin: 12px;
    padding: 4px 0;
    background: var(--c-surface);
  }

  .table-cards tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border: 0;
    padding: 8px 14px;
    text-align: right;
  }

  .table-cards tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    text-align: left;
    color: var(--c-text-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  /* Baris pertama dipakai sebagai judul kartu. */
  .table-cards tbody td:first-child {
    display: block;
    text-align: left;
    border-bottom: 1px solid var(--c-border);
    padding-top: 12px;
    padding-bottom: 10px;
    margin-bottom: 4px;
  }
  .table-cards tbody td:first-child::before { display: none; }

  /* Kolom tombol aksi: tanpa label, tombol melebar. */
  .table-cards tbody td.aksi { justify-content: stretch; }
  .table-cards tbody td.aksi::before { display: none; }
  .table-cards tbody td.aksi { flex-direction: column; gap: var(--space-2); padding-bottom: 12px; }
  .table-cards tbody td.aksi .btn { width: 100%; min-height: 44px; }

  .table-wrap { overflow-x: visible; }
}

/* Latar halaman login di mode gelap ikut menyesuaikan. */
[data-bs-theme="dark"] .login-page {
  background:
    radial-gradient(900px 460px at 10% -5%, #263056, transparent 62%),
    radial-gradient(820px 440px at 108% 106%, #1F3350, transparent 64%),
    var(--c-bg);
}

/* Logo pada kepala menu samping di HP. */
.offcanvas-title img {
  height: 24px;
  width: auto;
  max-width: 84px;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   20. SAAT DIBUKA SEBAGAI APLIKASI (dipasang di layar utama HP)
   Tidak ada bilah alamat peramban, jadi bilah atas aplikasi harus memberi
   ruang untuk status bar / poni layar.
   -------------------------------------------------------------------------- */
html[data-standalone] .app-navbar {
  height: auto;
  padding-top: env(safe-area-inset-top);
}

html[data-standalone] .app-navbar-inner {
  height: var(--navbar-h);
}

html[data-standalone] .login-page {
  padding-top: calc(var(--space-5) + env(safe-area-inset-top));
  padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
}

/* Teks tidak ikut terseleksi saat tombol besar ditekan agak lama di HP. */
html[data-standalone] .btn-absen,
html[data-standalone] .app-tabbar a {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   21. SALDO CUTI MINUS
   Saldo minus berarti karyawan memakai lebih banyak cuti dari jatahnya.
   Angkanya ditampilkan apa adanya (bukan disembunyikan jadi 0) dan diberi
   warna merah supaya langsung terlihat HR.
   -------------------------------------------------------------------------- */
.balance-box.minus {
  background: color-mix(in srgb, var(--c-danger) 10%, var(--c-surface));
  border-color: color-mix(in srgb, var(--c-danger) 35%, transparent);
}
.balance-box.minus .num { color: var(--c-danger); }
.balance-box.minus .cap { color: var(--c-danger); }

/* Nilai cadangan untuk peramban lama yang belum mendukung color-mix(). */
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .balance-box.minus { background: #FEF2F2; border-color: #FCA5A5; }
}

.saldo-minus {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-danger);
}

/* --------------------------------------------------------------------------
   22. STATUS PENGAMBILAN LOKASI & GEO TAG
   -------------------------------------------------------------------------- */
.geo-status {
  display: block;
  margin-top: var(--space-3);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--c-text-muted);
}
.geo-status:empty { display: none; }
.geo-baik        { color: var(--c-success); }
.geo-peringatan  { color: var(--c-warning); }
.geo-gagal       { color: var(--c-danger); }

/* Penanda lokasi pada riwayat & laporan. */
.geo-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.geo-tag i { font-size: 13px; }
.geo-tag.dalam { color: var(--c-success); }
.geo-tag.luar  { color: var(--c-danger); }
.geo-tag.kosong { color: var(--c-text-muted); font-weight: 500; }

/* --------------------------------------------------------------------------
   23. FOTO SELFIE ABSENSI
   -------------------------------------------------------------------------- */
.selfie-box {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px dashed var(--c-hero-line);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  text-align: center;
}

.selfie-box .btn-foto {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  color: var(--c-text);
  font-weight: 600;
  font-size: 14.5px;
}
.selfie-box .btn-foto:hover { background: var(--c-surface-3); }

.selfie-petunjuk {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--c-text-muted);
}

.selfie-pratinjau img {
  width: 100%;
  max-width: 220px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  margin: 0 auto;
  display: block;
}

.selfie-pratinjau .btn-ganti {
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: var(--c-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
}

/* Tampilan foto pada riwayat & laporan. */
.foto-absen {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
}
.foto-absen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-absen.curiga { border-color: var(--c-danger); border-width: 2px; }

.foto-kosong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 8px;
  border: 1px dashed var(--c-border-strong);
  color: var(--c-text-muted);
}