/* ======================================================================
   Tema di atas Bootstrap 5 default — sentuhan lebih modern:
   font custom, warna aksen, radius lebih besar, shadow lembut, transisi halus.
   Ganti nilai --brand-* di bawah untuk sesuaikan warna instansi.
   ====================================================================== */

:root{
  --brand: #0d6efd;        /* warna aksen utama — ganti sesuai warna instansi kalau perlu */
  --brand-rgb: 13,110,253;
  --brand-dark: #0b5ed7;
  --brand-darker: #0a1f44;

  /* Override variabel tema Bootstrap 5.3 (dipakai badge/alert/text-primary/border-primary) */
  --bs-primary: var(--brand);
  --bs-primary-rgb: var(--brand-rgb);
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: var(--brand-rgb);
  --bs-link-hover-color: var(--brand-dark);
  --bs-body-font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  --bs-border-radius: .65rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: .85rem;
}

body{
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: linear-gradient(180deg, #f4f6fb 0%, #eef1f7 100%);
  color: #1f2430;
}

h1, h2, h3, h4, h5, h6, .navbar-brand{
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---- Navbar: gradasi gelap yang lebih premium daripada bg-dark polos ---- */
.navbar.bg-dark{
  background: linear-gradient(135deg, var(--brand-darker) 0%, #123a6b 60%, var(--brand-dark) 130%) !important;
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
}
.navbar-brand{ font-weight: 800; letter-spacing: -.02em; }
.navbar-dark .nav-link{ font-weight: 500; opacity: .85; transition: opacity .15s, color .15s; }
.navbar-dark .nav-link:hover, .navbar-dark .nav-link.active{ opacity: 1; color: #fff; }
.navbar-dark .nav-link.active{ position: relative; }
.navbar-dark .nav-link.active::after{
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: -2px; height: 2px;
  background: #fff; border-radius: 2px;
}

/* ---- Kartu: shadow lembut + radius lebih besar + transisi hover halus ---- */
.card{
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.10);
}
.stat-box.clickable{ transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.stat-box.clickable:hover{ transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(15,23,42,.18); }
.stat-box.clickable.active{ border-color: var(--brand) !important; background: rgba(var(--brand-rgb), .06); }

/* ---- Tombol: radius lebih besar, transisi halus, sedikit angkat saat hover ---- */
.btn{
  border-radius: .65rem;
  font-weight: 600;
  transition: transform .1s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{ filter: brightness(1.04); }
.btn:active{ transform: scale(.98); }
.btn-primary{
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-color: var(--brand-dark);
  box-shadow: 0 4px 12px -4px rgba(var(--brand-rgb), .5);
}
.btn-primary:hover, .btn-primary:focus{
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
  border-color: var(--brand-dark);
}
.btn-outline-primary{ border-width: 1.5px; }

/* ---- Badge: bentuk pill supaya lebih modern dibanding kotak default ---- */
.badge{ border-radius: 50rem; font-weight: 600; padding: .4em .75em; letter-spacing: .01em; }

/* ---- Form: fokus mengikuti warna aksen, radius seragam dengan kartu ---- */
.form-control, .form-select{
  border-radius: .6rem;
  border-color: rgba(15,23,42,.12);
}
.form-control:focus, .form-select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .15);
}

/* ---- Alert: radius seragam ---- */
.alert{ border-radius: .75rem; border: 1px solid transparent; }

/* ---- List group: hilangkan border default antar-baris, ganti garis tipis custom ---- */
.list-group-item{ border-color: rgba(15,23,42,.06); }

/* Bingkai sudut di area kamera saat absen — tidak ada padanan komponen
   Bootstrap untuk ini, jadi tetap dipertahankan sebagai CSS custom. */
.cam-wrap {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background: #000;
  aspect-ratio: 3 / 4;
}
.cam-wrap video, .cam-wrap canvas, .cam-wrap img.snapshot{ width:100%; height:100%; object-fit:cover; display:block; }
.cam-frame-corner{ position:absolute; width:26px; height:26px; border-color:#fff; border-style:solid; opacity:.85; }
.c-tl{ top:14px; left:14px; border-width:2.5px 0 0 2.5px; border-radius:6px 0 0 0; }
.c-tr{ top:14px; right:14px; border-width:2.5px 2.5px 0 0; border-radius:0 6px 0 0; }
.c-bl{ bottom:14px; left:14px; border-width:0 0 2.5px 2.5px; border-radius:0 0 0 6px; }
.c-br{ bottom:14px; right:14px; border-width:0 2.5px 2.5px 0; border-radius:0 0 6px 0; }

@media print{
  .no-print{ display:none !important; }
}

/* ============================================================
   Daftar & tabel yang bisa digulir
   ============================================================
   Dipakai di daftar yang terus bertambah seiring waktu (riwayat, izin, hari libur,
   kategori, dsb.) supaya halaman tidak memanjang ke bawah saat datanya sudah banyak.
   Tinggi maksimal diatur langsung di masing-masing halaman lewat style max-height. */
.daftar-gulir { overflow-y: auto; padding-right: 4px; }

/* Judul kolom tabel tetap terlihat saat isi tabel digulir */
.tabel-gulir { overflow-y: auto; }
.tabel-gulir thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bs-body-bg, #fff);
  box-shadow: inset 0 -1px 0 #dee2e6;
}