/* ==========================================================================
   AbsenKu — sistem tampilan
   Menggantikan AdminLTE, Bootstrap, dan seluruh <style> inline per modul.
   Tanpa CDN. Tanpa jQuery. Satu file untuk admin, staff, dan karyawan.
   ========================================================================== */

/* --- 1. Token ------------------------------------------------------------ */

:root {
  /* ===== AbsenKu × AdminUIUX Mobile =====
     Primary ungu #5840ef · Aksen pink #e46dce · BG soft #e6ecf8 */

  --ground:       #e8ecf8;
  --surface:      #ffffff;
  --surface-sub:  #f3f5fb;
  --surface-elev: #ffffff;

  --ink:          #1a1d2e;
  --ink-2:        #5c6478;
  --ink-3:        #9098ab;
  --line:         #e2e6f0;
  --line-2:       #c8cedc;

  /* Theme 1 = primary purple */
  --brass:        #5840ef;
  --brass-soft:   rgba(88, 64, 239, .12);
  --brass-ink:    #ffffff;
  --neon:         #5840ef;
  --neon-2:       #e46dce;
  --neon-glow:    0 8px 24px rgba(88, 64, 239, .28);
  --neon-glow-sm: 0 4px 14px rgba(88, 64, 239, .22);

  /* Status */
  --hadir:        #198754;
  --hadir-soft:   #d1e7dd;
  --alpha:        #dc3545;
  --alpha-soft:   #f8d7da;
  --tunggu:       #e6a817;
  --tunggu-soft:  #fff3cd;
  --libur:        #6c757d;
  --libur-soft:   #e9ecef;

  --btn-utama:        #5840ef;
  --btn-utama-hover:  #462de6;
  --btn-brass-hover:  #462de6;
  --btn-hadir-hover:  #157347;

  --shadow-sm:  0 2px 6px rgba(26, 29, 46, .05);
  --shadow-md:  0 8px 24px rgba(26, 29, 46, .08);
  --shadow-lg:  0 16px 48px rgba(26, 29, 46, .12);
  --overlay:    rgba(26, 29, 46, .45);
  --desk-bg:    #d5dbea;
  --rail-bg:    #1a1d2e;
  --rail-ink:   #e8eaf2;
  --rail-muted: #8b92a8;
  --rail-active:rgba(88, 64, 239, .22);
  --jam-ink:    #ffffff;
  --jam-muted:  rgba(255,255,255,.72);
  --jam-ok:     #7dffa0;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --r-kecil: 10px;
  --r-sedang: 14px;
  --r-besar: 20px;
  --r-pill: 999px;

  --kolom: 430px;
  --tabbar: 66px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;
  --theme-transition: background-color .2s ease, color .15s ease, border-color .15s ease, box-shadow .2s ease;
}

/* --- 2. Dasar ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Angka jam dan rupiah selalu sejajar dalam kolom. */
time, .num, td, th, .clock, .stat-nilai, input[type=number] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4 { margin: 0; font-weight: 640; letter-spacing: -0.015em; line-height: 1.25; }
h1 { font-size: 27px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }
p  { margin: 0 0 var(--s3); max-width: 68ch; }

a { color: var(--brass); text-decoration: none; }
a:hover { text-decoration: underline; }

small, .kecil { font-size: 13px; }
.mini { font-size: 12px; }
.redup { color: var(--ink-2); }
.redup-2 { color: var(--ink-3); }
.tebal { font-weight: 640; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: var(--r-kecil);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- 3. Kerangka aplikasi (mobile-first) --------------------------------

   Aplikasi ini dipakai di ponsel, sambil berdiri di depan etalase. Semua
   ukuran dan jarak di bawah ditulis untuk layar 360–430 px lebih dulu.
   Di layar lebar, isi tidak melebar tanpa batas — ia tetap satu kolom
   selebar ponsel dan diletakkan di tengah, sehingga admin yang membuka
   dari laptop melihat susunan yang sama persis dengan karyawan.

   Menu samping berperilaku sebagai laci (drawer) di SEMUA ukuran layar,
   bukan hanya di bawah 900 px seperti versi sebelumnya.
   ----------------------------------------------------------------------- */

.app {
  min-height: 100dvh;
  max-width: var(--kolom);
  margin: 0 auto;
  background: var(--ground);
  position: relative;
}

/* Bingkai halus supaya jelas ini tampilan ponsel, bukan halaman yang gagal melebar. */
@media (min-width: 620px) {
  body { background: var(--desk-bg); }
  .app {
    min-height: 100dvh;
    box-shadow: 0 0 0 1px var(--line), var(--shadow-lg);
  }
}

/* --- Bilah atas: selalu ada, di setiap halaman, semua peran ------------- */

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s2);
  min-height: 54px;
  padding: 0 var(--s3);
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar h1 {
  flex: 1; min-width: 0;
  font-size: 16px; font-weight: 640;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .btn { padding: 7px; }
.topbar-spacer { width: 34px; height: 34px; flex: 0 0 34px; }
.topbar .btn .ikon { width: 20px; height: 20px; }

/* --- Laci menu ---------------------------------------------------------- */

.rail {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: min(280px, 82vw);
  z-index: 60;
  background: var(--rail-bg);
  color: var(--rail-ink);
  display: flex; flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .2s cubic-bezier(.32,.72,0,1), visibility .2s;
  padding-top: env(safe-area-inset-top);
}
.rail[data-buka] { transform: none; visibility: visible; }

@media (min-width: 620px) {
  /* Laci tetap laci, tapi menempel pada sisi kiri kolom aplikasi. */
  .rail { left: max(0px, calc(50vw - var(--kolom) / 2)); }
}

.tabir {
  position: fixed; inset: 0; z-index: 55;
  background: var(--overlay);
  animation: pudar .2s ease;
}
@keyframes pudar { from { opacity: 0 } to { opacity: 1 } }

.rail-merek {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s5) var(--s4) var(--s4);
  color: #fff;
}
.rail-merek b { font-size: 17px; font-weight: 640; letter-spacing: -0.02em; }
.rail-merek span {
  display: block; margin-top: 1px;
  font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--rail-muted);
}

.rail-nav { padding: 0 var(--s2) var(--s4); }
.rail-gugus {
  padding: var(--s4) var(--s3) var(--s1);
  font-size: 12px; color: var(--rail-muted);
}
.rail a.tautan {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 44px;                      /* sasaran sentuh */
  padding: 8px var(--s3);
  border-radius: var(--r-sedang);
  color: var(--rail-ink); font-size: 15px;
  text-decoration: none;
}
.rail a.tautan:active { background: rgba(255,255,255,.12); }
.rail a.tautan[aria-current] {
  background: rgba(255,255,255,.1);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--brass);
}
.rail .ikon { width: 19px; height: 19px; flex: none; opacity: .8; }
.rail a.tautan[aria-current] .ikon { opacity: 1; }

.rail-kaki {
  margin-top: auto;
  padding: var(--s3) var(--s2) calc(var(--s4) + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.09);
}

/* --- Isi halaman -------------------------------------------------------- */

.isi {
  padding: var(--s4) var(--s3);
  padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + var(--s6));
}

/* --- Tab bawah: navigasi utama untuk semua peran ------------------------ */

.tabbar {
  position: fixed; bottom: 0; z-index: 50;
  left: 0; right: 0;
  width: 100%; max-width: var(--kolom);
  margin: 0 auto;
  display: flex;
  height: calc(var(--tabbar) + env(safe-area-inset-bottom));
  padding: 6px 4px env(safe-area-inset-bottom);
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(26, 29, 46, .06);
  border-radius: 20px 20px 0 0;
}
.tabbar a {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  color: var(--ink-3); font-size: 10.5px; line-height: 1.2;
  text-decoration: none;
  padding: 0 2px;
}
.tabbar a span {
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabbar a .ikon { width: 22px; height: 22px; }
.tabbar a:active { background: var(--surface-sub); }
.tabbar a[aria-current] {
  color: var(--brass);
  font-weight: 700;
}
.tabbar a[aria-current] .ikon {
  stroke-width: 2.2;
}
.tabbar a[aria-current]::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 3px;
  border-radius: var(--r-pill);
  background: var(--brass);
}
.tabbar a { position: relative; }

/* --- 4. Panel ------------------------------------------------------------ */

/* Dua tingkat, bukan satu kartu untuk segalanya. */
.panel {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-besar);
  margin-bottom: var(--s4);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.panel-kepala h2, .panel-kepala h3 {
  letter-spacing: -0.02em;
}
.panel-kepala {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}
.panel-kepala h2, .panel-kepala h3 { flex: 1; font-size: 16px; }
.panel-isi { padding: var(--s4); }
.panel-isi--rapat { padding: 0; }
.panel-kaki {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  background: var(--surface-sub);
  border-radius: 0 0 var(--r-besar) var(--r-besar);
  font-size: 13px; color: var(--ink-2);
}

/* Blok datar tanpa bingkai, untuk kelompok isian di dalam panel. */
.blok { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.blok:last-child { border-bottom: 0; padding-bottom: 0; }

/* --- 5. Jam & ringkasan hari (elemen utama halaman karyawan) ------------- */

.jam-panel {
  background:
    radial-gradient(ellipse 90% 80% at 0% 0%, rgba(228, 109, 206, .35), transparent 55%),
    radial-gradient(ellipse 80% 70% at 100% 100%, rgba(88, 64, 239, .45), transparent 50%),
    linear-gradient(145deg, #5840ef 0%, #6b4ff0 40%, #8b5cf6 100%);
  color: var(--jam-ink);
  border-radius: var(--r-besar);
  padding: var(--s5) var(--s4);
  margin-bottom: var(--s4);
  box-shadow: var(--neon-glow);
  border: 0;
  position: relative;
  overflow: hidden;
}
.jam-panel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
  pointer-events: none;
}

.jam-panel .tanggal { font-size: 13px; color: var(--jam-muted); }
.clock {
  font-size: 42px; font-weight: 300; letter-spacing: -0.03em; line-height: 1.05;
  margin: var(--s1) 0 var(--s3);
  color: var(--jam-ink);
}
.jam-panel .lokasi {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--jam-muted);
}
.jam-panel .lokasi[data-siap] { color: var(--jam-ok); }
.jam-panel .lokasi .titik {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}

.aksi-absen { display: flex; gap: var(--s3); margin-bottom: var(--s5); }
.aksi-absen > * { flex: 1; }

/* --- 6. Tombol ----------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px;
  padding: 11px var(--s4);
  border: 1px solid transparent;
  border-radius: var(--r-sedang);
  background: var(--surface-sub);
  color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 650;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; background: var(--line); }
.btn:disabled, .btn[aria-disabled=true] { opacity: .45; cursor: not-allowed; }

.btn--utama {
  background: var(--btn-utama);
  color: var(--brass-ink);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--btn-utama) 35%, transparent);
}
.btn--utama:hover {
  background: var(--btn-utama-hover);
  box-shadow: var(--neon-glow-sm);
}
.btn--kuningan {
  background: var(--brass);
  color: var(--brass-ink);
  box-shadow: 0 2px 14px color-mix(in srgb, var(--brass) 40%, transparent);
}
.btn--kuningan:hover {
  background: var(--btn-brass-hover);
  box-shadow: var(--neon-glow-sm);
}
.btn--garis { background: transparent; border-color: var(--line-2); }
.btn--garis:hover { background: var(--surface-sub); }
.btn--bahaya { background: transparent; border-color: var(--alpha); color: var(--alpha); }
.btn--bahaya:hover { background: var(--alpha-soft); }
.btn--kecil { min-height: 38px; padding: 6px 12px; font-size: 13px; }
.btn--lebar { width: 100%; }
.btn--tinggi { flex-direction: column; gap: var(--s1); padding: var(--s4); font-size: 13px; }
.btn--tinggi .ikon { width: 22px; height: 22px; }

.btn--masuk {
  background: var(--hadir);
  color: #fff;
  box-shadow: 0 2px 14px color-mix(in srgb, var(--hadir) 35%, transparent);
}
.btn--masuk:hover { background: var(--btn-hadir-hover); }
.btn--pulang {
  background: var(--btn-utama);
  color: var(--brass-ink);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--btn-utama) 35%, transparent);
}
.btn--pulang:hover { background: var(--btn-utama-hover); }

.aksi-baris { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* --- 7. Isian formulir --------------------------------------------------- */

.isian { margin-bottom: var(--s4); }
.isian > label {
  display: block; margin-bottom: 5px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.isian .petunjuk { display: block; margin-top: 5px; font-size: 12px; color: var(--ink-3); }

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=month], input[type=time], input[type=tel], input[type=email],
input[type=file], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px var(--s3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-kecil);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;          /* di bawah 16px, Safari iOS memperbesar halaman saat fokus */
}
textarea { min-height: 96px; resize: vertical; }
select {
  appearance: none;
  padding-right: var(--s6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235a6377' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s3) center;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px var(--brass-soft);
}
input:disabled, select:disabled { background: var(--surface-sub); color: var(--ink-3); }

.isian-baris { display: flex; gap: var(--s3); flex-wrap: wrap; }
.isian-baris > .isian { flex: 1 1 200px; }

/* --- 8. Tabel ------------------------------------------------------------ */

.tabel-gulir { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tabel th {
  padding: var(--s3) var(--s4);
  text-align: left;
  font-size: 12px; font-weight: 640; color: var(--ink-2);
  background: var(--surface-sub);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.tabel td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.tabel tbody tr:last-child td { border-bottom: 0; }
table.tabel tbody tr:hover td { background: var(--surface-sub); }
table.tabel .angka { text-align: right; white-space: nowrap; }
table.tabel .rapat { width: 1%; white-space: nowrap; }

/* --- 9. Buku harian absensi (pengganti daftar kartu) --------------------- */

/* Satu bulan dibaca sebagai satu kolom bertanggal, bukan 31 kartu terpisah. */
.buku { list-style: none; margin: 0; padding: 0 0 0 var(--s5); position: relative; }
.buku::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px;
  border-left: 1px solid var(--line);
}
.buku > li {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: var(--s2);
  align-items: center;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.buku > li:last-child { border-bottom: 0; }
.buku > li::before {
  content: ""; position: absolute; left: calc(-1 * var(--s5) + 4px); top: 50%;
  width: 7px; height: 7px; margin-top: -3px;
  background: var(--line-2);
  border-radius: 2px;
}
.buku > li[data-status=hadir]::before  { background: var(--hadir); }
.buku > li[data-status=alpha]::before  { background: var(--alpha); }
.buku > li[data-status=tunggu]::before { background: var(--tunggu); }
.buku > li[data-status=libur]::before  { background: var(--libur); }

.buku .tgl { font-size: 13px; color: var(--ink-2); }
.buku .tgl b { display: block; font-size: 15px; color: var(--ink); font-weight: 640; }
.buku .waktu { display: flex; gap: var(--s3); font-size: 13px; }
.buku .waktu span { color: var(--ink-3); }
.buku .waktu b { font-weight: 600; }

/* --- 10. Lencana status -------------------------------------------------- */

.status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-kecil);
  font-size: 12px; font-weight: 640;
  background: var(--libur-soft); color: var(--libur);
  white-space: nowrap;
}
.status--hadir  { background: var(--hadir-soft);  color: var(--hadir); }
.status--alpha  { background: var(--alpha-soft);  color: var(--alpha); }
.status--tunggu { background: var(--tunggu-soft); color: var(--tunggu); }
.status--libur  { background: var(--libur-soft);  color: var(--libur); }
.status--onday  { background: var(--brass-soft);  color: var(--brass); }

/* --- 11. Angka ringkas --------------------------------------------------- */

.deret-stat {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-besar);
  overflow: hidden;
  margin-bottom: var(--s4);
}
/* Default 2 kolom; di layar lebar 4 hanya jika TANPA modifier */
@media (min-width: 420px) {
  .deret-stat:not(.deret-stat--dua):not(.deret-stat--tiga) {
    grid-template-columns: repeat(4, 1fr);
  }
}
.deret-stat.deret-stat--dua  { grid-template-columns: repeat(2, 1fr) !important; }
.deret-stat.deret-stat--tiga { grid-template-columns: repeat(3, 1fr) !important; }

.stat { background: var(--surface); padding: var(--s3); text-decoration: none; color: inherit; }
a.stat:hover { background: var(--surface-sub); text-decoration: none; }
.stat-label { font-size: 12px; color: var(--ink-2); }
.stat-nilai { font-size: 22px; font-weight: 640; letter-spacing: -0.02em; margin-top: 1px; }
.stat-nilai.uang { font-size: 19px; }
.stat--sorot .stat-nilai { color: var(--brass); }
.stat--kurang .stat-nilai { color: var(--alpha); }

/* --- 12. Rincian gaji ---------------------------------------------------- */

.rincian { width: 100%; border-collapse: collapse; font-size: 14px; }
.rincian td { padding: 7px 0; border-bottom: 1px solid var(--line); }
.rincian td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rincian tr.jumlah td {
  border-top: 2px solid var(--ink); border-bottom: 0;
  padding-top: var(--s3); font-weight: 640; font-size: 16px;
}
.rincian tr.potongan td:last-child { color: var(--alpha); }
.rincian caption {
  text-align: left; padding-bottom: var(--s2);
  font-size: 13px; font-weight: 640; color: var(--ink-2);
}

/* --- 13. Pesan ----------------------------------------------------------- */

.pesan {
  display: flex; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sedang);
  border-left: 3px solid var(--ink-3);
  background: var(--surface-sub);
  font-size: 14px;
  margin-bottom: var(--s4);
}
.pesan--gagal  { background: var(--alpha-soft);  border-color: var(--alpha);  color: #7d211a; }
.pesan--sukses { background: var(--hadir-soft);  border-color: var(--hadir);  color: #14513a; }
.pesan--awas   { background: var(--tunggu-soft); border-color: var(--tunggu); color: #74500a; }

/* Layar kosong adalah ajakan bertindak, bukan jalan buntu. */
.kosong { padding: var(--s7) var(--s4); text-align: center; color: var(--ink-2); }
.kosong h3 { margin-bottom: var(--s2); }
.kosong p { margin: 0 auto var(--s4); max-width: 42ch; }

/* --- 14. Halaman masuk --------------------------------------------------- */

.masuk-layar {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--s5);
  background: var(--ink);
}
.masuk-kotak {
  width: 100%; max-width: 360px;
  background: var(--surface);
  border-radius: var(--r-besar);
  padding: var(--s6) var(--s5);
}
.masuk-kotak h1 { font-size: 24px; margin-bottom: var(--s1); }
.masuk-kotak .sub { color: var(--ink-2); font-size: 14px; margin-bottom: var(--s5); }
.masuk-cap {
  display: inline-block; margin-bottom: var(--s4);
  padding: 3px 10px;
  border: 1px solid var(--brass);
  border-radius: var(--r-kecil);
  color: var(--brass);
  font-size: 11px; font-weight: 640; letter-spacing: .04em;
}
.masuk-kaki { margin-top: var(--s5); font-size: 12px; color: var(--ink-3); text-align: center; }

.sandi-bungkus { position: relative; }
.sandi-bungkus input { padding-right: 44px; }
.sandi-lihat {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer;
  padding: var(--s2); color: var(--ink-2); line-height: 0;
}

/* --- 15. Cetak ----------------------------------------------------------- */

@media print {
  .rail, .topbar, .tabbar, .tabir, .aksi-baris, .btn { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .isi { margin: 0; padding: 0; max-width: none; }
  .panel { border: 0; margin: 0 0 12px; }
  .panel-kepala, .panel-isi { padding: 0 0 8px; }
  table.tabel th { background: none; border-bottom: 1px solid #000; }
}

/* --- 16. Utilitas (sedikit saja, sisanya pakai komponen) ----------------- */

.baris { display: flex; align-items: center; gap: var(--s3); }
.baris--sela { justify-content: space-between; }
.tumpuk { display: flex; flex-direction: column; gap: var(--s3); }
.dorong { margin-left: auto; }
.sembunyi { display: none !important; }
.hanya-layar {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.ikon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8;
        stroke-linecap: round; stroke-linejoin: round; flex: none; }


/* --- 17. Layar sangat sempit (≤ 360 px) --------------------------------- */

@media (max-width: 360px) {
  body { font-size: 14px; }
  .isi { padding: var(--s3) var(--s2); }
  .clock { font-size: 36px; }
  .stat-nilai { font-size: 19px; }
  .tabbar a { font-size: 10px; }
  .buku > li { grid-template-columns: 46px 1fr; row-gap: var(--s1); }
  .buku > li .status { grid-column: 2; justify-self: start; }
}

/* --- 18. Tabel di layar ponsel ------------------------------------------
   Tabel lebar digulir mendatar, dengan bayangan tipis di tepi sebagai
   petunjuk bahwa masih ada kolom di sebelah kanan.                       */

.tabel-gulir {
  background:
    linear-gradient(90deg, var(--surface) 30%, rgba(255,255,255,0)),
    linear-gradient(90deg, rgba(255,255,255,0), var(--surface) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(20,25,42,.12), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(20,25,42,.12), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Daftar dua kolom — dipakai di halaman detail sebagai pengganti tabel,
   karena tabel hampir selalu terlalu lebar untuk ponsel. */
.data { margin: 0; }
.data > div {
  display: flex; justify-content: space-between; gap: var(--s3);
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.data > div:last-child { border-bottom: 0; }
.data dt, .data .kunci { color: var(--ink-2); }
.data dd, .data .nilai { margin: 0; text-align: right; font-weight: 600; }

/* --- 19. Lembar geser bawah ---------------------------------------------
   Pengganti modal Bootstrap. Muncul dari bawah, dekat ibu jari.          */

.lembar {
  position: fixed; z-index: 70;
  left: 0; right: 0; bottom: 0;
  width: 100%; max-width: var(--kolom);
  margin: 0 auto;
  background: var(--surface);
  border-radius: var(--r-besar) var(--r-besar) 0 0;
  padding: var(--s4) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
  max-height: 88dvh; overflow-y: auto;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .22s cubic-bezier(.32,.72,0,1), visibility .22s;
}
.lembar[data-buka] { transform: none; visibility: visible; }
.lembar::before {
  content: ""; display: block;
  width: 36px; height: 4px; margin: 0 auto var(--s4);
  background: var(--line-2); border-radius: 2px;
}
.lembar h3 { margin-bottom: var(--s3); }


/* --- Pilih bulan / tahun seragam ----------------------------------------- */
.pilih-bulan,
select.pilih-tahun {
  width: auto !important;
  min-width: 9.5rem;
  max-width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 560;
  border-radius: var(--r-sedang);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  line-height: 1.2;
}
.pilih-bulan:focus,
select.pilih-tahun:focus {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
}
.panel-kepala .pilih-bulan,
.baris--sela .pilih-bulan {
  flex-shrink: 0;
}


/* --- Slider gaji & lonceng ------------------------------------------------ */
.topbar-lonceng { position: relative; }
.badge-lonceng {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--alpha, #c0392b);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.section-label {
  font-size: 15px;
  font-weight: 640;
  margin: var(--s2) 0 var(--s3);
  padding: 0 2px;
}
.slider-gaji {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 12px;
  margin: 0 0 4px;
  touch-action: pan-x;
}
.slider-gaji::-webkit-scrollbar { height: 0; }
.kartu-gaji {
  flex: 0 0 min(280px, 82vw);
  max-width: 82vw;
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-besar);
  padding: var(--s4);
  box-sizing: border-box;
}
.kartu-gaji--aktif {
  border-color: var(--brass, #b08d57);
  background: linear-gradient(145deg, var(--surface) 60%, rgba(176,141,87,.08));
}
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: var(--s4);
}
.slider-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--line);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.slider-dot.is-on { background: var(--brass, #b08d57); width: 16px; border-radius: 4px; }


/* --- Topbar aksi + popup notifikasi --------------------------------------- */
.topbar { position: relative; }
.topbar-merek { font-size: 16px !important; font-weight: 640; letter-spacing: -0.01em; }
.topbar-aksi { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.topbar-aksi .btn { margin-left: 0; }
.popup-notif {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  top: 0; right: 0; left: 0; bottom: 0;
  background: var(--surface);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.popup-notif[hidden] { display: none !important; }
.popup-notif-kepala {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-sub, #f7f7f8);
}
.popup-notif-isi { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.popup-notif-item {
  display: block;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.popup-notif-item:last-child { border-bottom: 0; }
.popup-notif-item:active { background: var(--surface-sub); }

/* Grafik batang perolehan */
.grafik-bars { padding: var(--s3) var(--s4) var(--s4); display: grid; gap: 12px; }
.grafik-bar-row { display: grid; grid-template-columns: 110px 1fr 72px; gap: 8px; align-items: center; }
.grafik-bar-row .label { font-size: 12px; color: var(--ink-2); line-height: 1.2; }
.grafik-bar-track {
  height: 10px; border-radius: 999px; background: var(--line);
  overflow: hidden;
}
.grafik-bar-fill {
  height: 100%; border-radius: 999px;
  background: var(--brass, #b08d57);
  min-width: 0;
  transition: width .4s ease;
}
.grafik-bar-fill--2 { background: #5b8def; }
.grafik-bar-fill--3 { background: #3ca37a; }
.grafik-bar-fill--4 { background: #c49a3c; }
.grafik-bar-fill--5 { background: #9b6b9e; }
.grafik-bar-row .nilai { font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }


/* --- Grid ikon perolehan (mobile) ---------------------------------------- */
.grid-ikon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 8px;
}
.tile-ikon {
  text-align: center;
  padding: 4px 2px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.tile-ikon-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0;
  line-height: 1.1;
}
.tile-ikon-simbol {
  width: 52px; height: 52px;
  margin: 0 auto 6px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brass-soft);
  box-shadow: none;
}
.tile-ikon-simbol .ikon { width: 30px; height: 30px; }
.tile-ikon-nilai {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink-2);
  margin-top: 0;
}
.tile-ikon-sub {
  font-size: 10px;
  color: var(--ink-3, #98a1b5);
  margin-top: 0;
}
.grid-ikon { gap: 10px 6px; }
.tile--biru .tile-ikon-simbol { color: #5840ef; background: rgba(88,64,239,.12); }
.tile--emas .tile-ikon-simbol { color: #e46dce; background: rgba(228,109,206,.12); }
.tile--hijau .tile-ikon-simbol { color: #198754; background: rgba(25,135,84,.12); }
.tile--oranye .tile-ikon-simbol { color: #fd7e14; background: rgba(253,126,20,.12); }
.tile--ungu .tile-ikon-simbol { color: #6f42c1; background: rgba(111,66,193,.12); }
.tile--abu .tile-ikon-simbol { color: #64748b; background: rgba(100,116,139,.12); }
.tile--merah .tile-ikon-simbol { color: #dc3545; background: rgba(220,53,69,.12); }


.popup-notif-kepala { min-height: 54px; }
.popup-notif-tutup {
  border: 0; background: none; padding: 8px;
  font-size: 14px; color: var(--ink-2); cursor: pointer;
}


/* Sembunyikan tab footer di submenu / notifikasi (pola app mobile) */
body.app--tanpa-tab .tabbar { display: none !important; }
body.app--tanpa-tab .app--karyawan,
body.app--tanpa-tab .app {
  /* ruang bawah tidak perlu untuk tab */
  padding-bottom: env(safe-area-inset-bottom);
}
body.app--tanpa-tab .isi {
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.popup-notif-item.is-read { opacity: 0.55; }

body.app--notif-buka .tabbar { display: none !important; }

.popup-notif-item.is-unread {
  background: var(--brass-soft);
  border-left: 3px solid var(--brass);
}
.popup-notif-item.is-read {
  opacity: 0.55;
  background: transparent;
}

.topbar-merek {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.topbar-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.topbar-merek span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* --- Dialog konfirmasi app ----------------------------------------------- */
.dialog-app-latar {
  position: fixed; inset: 0; z-index: 200;
  background: var(--overlay);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.dialog-app-latar[hidden] { display: none !important; }
.dialog-app {
  width: min(360px, 100%);
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 20px;
}
.dialog-app h3 { margin: 0 0 8px; font-size: 17px; }
.dialog-app p { margin: 0 0 18px; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.dialog-app-aksi { display: flex; gap: 10px; }
.dialog-app-aksi .btn { flex: 1; }

/* Running text peraturan */
.marquee-peraturan {
  overflow: hidden;
  white-space: nowrap;
  background: var(--surface-sub);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 0;
  margin-bottom: var(--s4);
}
.marquee-peraturan span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee-jalan 22s linear infinite;
  font-size: 13px;
  font-weight: 560;
}
@keyframes marquee-jalan {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* --- Tema: terang / gelap / sistem -------------------------------------- */

html[data-tema="dark"] {
  --ground:       #0f111a;
  --surface:      #171a26;
  --surface-sub:  #1e2233;
  --surface-elev: #22263a;

  --ink:          #eef0f8;
  --ink-2:        #9aa3b8;
  --ink-3:        #6d7690;
  --line:         #2a3045;
  --line-2:       #363d55;

  --brass:        #7b6af5;
  --brass-soft:   rgba(123, 106, 245, .18);
  --brass-ink:    #ffffff;
  --neon:         #7b6af5;
  --neon-2:       #e46dce;
  --neon-glow:    0 8px 28px rgba(123, 106, 245, .35);
  --neon-glow-sm: 0 4px 16px rgba(123, 106, 245, .28);

  --hadir:        #3dd68c;
  --hadir-soft:   rgba(61, 214, 140, .15);
  --alpha:        #ff6b7a;
  --alpha-soft:   rgba(255, 107, 122, .15);
  --tunggu:       #ffc107;
  --tunggu-soft:  rgba(255, 193, 7, .14);
  --libur:        #90a0b5;
  --libur-soft:   rgba(144, 160, 181, .12);

  --btn-utama:        #7b6af5;
  --btn-utama-hover:  #9080ff;
  --btn-brass-hover:  #9080ff;
  --btn-hadir-hover:  #4ae09a;

  --shadow-sm:  0 2px 8px rgba(0,0,0,.35);
  --shadow-md:  0 10px 28px rgba(0,0,0,.45);
  --shadow-lg:  0 20px 56px rgba(0,0,0,.55);
  --overlay:    rgba(0,0,0,.65);
  --desk-bg:    #080a10;
  --rail-bg:    #12141f;
  --rail-ink:   #e8eaf2;
  --rail-muted: #7a849c;
  --rail-active:rgba(123, 106, 245, .25);
  --jam-ink:    #ffffff;
  --jam-muted:  rgba(255,255,255,.70);
  --jam-ok:     #7dffa0;

  color-scheme: dark;
}

/* Tombol utama di dark: ink terang di atas surface gelap */
html[data-tema="dark"] .btn--utama,
html[data-tema="dark"] .btn--pulang {
  color: #ffffff;
}
html[data-tema="dark"] .btn--kuningan {
  color: var(--brass-ink);
}

/* Komponen yang tadinya hardcode */
html[data-tema="dark"] .popup-notif-item.is-unread {
  background: var(--brass-soft);
  border-left-color: var(--brass);
}
html[data-tema="dark"] .dialog-app-latar {
  background: var(--overlay);
}
html[data-tema="dark"] .marquee-peraturan {
  background: var(--surface-sub);
}
html[data-tema="dark"] .jam-panel .tanggal,
html[data-tema="dark"] .jam-panel .lokasi {
  color: var(--jam-muted);
}
html[data-tema="dark"] .jam-panel .lokasi[data-siap] {
  color: var(--jam-ok);
}

/* Transisi halus saat ganti tema (hindari flash pada load awal) */
html.tema-anim body,
html.tema-anim body *,
html.tema-anim body *::before,
html.tema-anim body *::after {
  transition: var(--theme-transition) !important;
}

/* Segmented control tema */
.tema-segmen {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--surface-sub);
  border-radius: var(--r-sedang);
  border: 1px solid var(--line);
}
.tema-segmen button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  min-height: 40px;
  border-radius: calc(var(--r-sedang) - 2px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.tema-segmen button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.tema-segmen button:active {
  transform: scale(.98);
}

/* Prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html.tema-anim body,
  html.tema-anim body *,
  html.tema-anim body *::before,
  html.tema-anim body *::after {
    transition: none !important;
  }
}

/* --- Theming full: mobile polish ----------------------------------------- */

/* Press feedback (mobile) */
.btn:active:not(:disabled),
.baris:active,
.tabbar a:active,
.tile:active {
  transform: scale(.98);
}
@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled),
  .baris:active,
  .tabbar a:active,
  .tile:active { transform: none; }
}

/* Baris list (profil, menu) */
.baris {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 52px;
  transition: background .12s ease;
}
.baris:active { background: var(--surface-sub); }
.baris .ikon { flex: none; opacity: .85; color: var(--ink-2); }

/* Input focus ring modern */
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus,
input[type=date]:focus, input[type=month]:focus, input[type=time]:focus,
input[type=tel]:focus, input[type=email]:focus, input[type=file]:focus,
select:focus, textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px var(--brass-soft);
}

/* Topbar blur modern */
.topbar {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
}

/* Status chips pakai token */
.lencana, .chip, .status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
.lencana--hadir, .chip--hadir { background: var(--hadir-soft); color: var(--hadir); }
.lencana--alpha, .chip--alpha, .lencana--alpha, .chip--tolak { background: var(--alpha-soft); color: var(--alpha); }
.lencana--tunggu, .chip--tunggu { background: var(--tunggu-soft); color: var(--tunggu); }
.lencana--libur, .chip--libur { background: var(--libur-soft); color: var(--libur); }

/* Tile grid home — dark-safe accent soft */
.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-besar);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.tile:active { box-shadow: none; }

html[data-tema="dark"] .tile--biru .tile-ikon,
html[data-tema="dark"] .tile--hijau .tile-ikon,
html[data-tema="dark"] .tile--kuning .tile-ikon,
html[data-tema="dark"] .tile--oranye .tile-ikon,
html[data-tema="dark"] .tile--ungu .tile-ikon,
html[data-tema="dark"] .tile--abu .tile-ikon,
html[data-tema="dark"] .tile--merah .tile-ikon {
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* Tabel selang-seling dark-safe */
.tabel tbody tr:nth-child(even) { background: var(--surface-sub); }
.tabel th {
  background: var(--surface-sub);
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.tabel td { border-bottom: 1px solid var(--line); }

/* Safe area topbar notch */
.topbar {
  padding-top: max(10px, env(safe-area-inset-top));
  min-height: calc(52px + env(safe-area-inset-top));
}

/* Selection */
::selection {
  background: var(--brass-soft);
  color: var(--ink);
}

/* Scrollbar tipis modern (WebKit) */
.app::-webkit-scrollbar { width: 0; height: 0; }

/* Skeleton / empty state */
.kosong {
  text-align: center;
  padding: var(--s6) var(--s4);
  color: var(--ink-3);
}
.kosong .ikon { width: 40px; height: 40px; opacity: .4; margin-bottom: var(--s3); }

/* Dark: tabbar & topbar glass */
html[data-tema="dark"] .tabbar {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: 0 -4px 28px rgba(0,0,0,.35);
}
html[data-tema="dark"] .topbar {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border-bottom-color: var(--line);
}

/* Dark: form controls */
html[data-tema="dark"] input,
html[data-tema="dark"] select,
html[data-tema="dark"] textarea {
  background: var(--surface-sub);
  color: var(--ink);
  border-color: var(--line-2);
}
html[data-tema="dark"] input:focus,
html[data-tema="dark"] select:focus,
html[data-tema="dark"] textarea:focus {
  background: var(--surface);
}

/* Dark: sandi-bungkus / file input */
html[data-tema="dark"] .sandi-bungkus {
  background: var(--surface-sub);
}

/* Pastikan brass-ink di light tetap putih untuk tombol gelap */
html[data-tema="dark"] .btn--kuningan {
  color: #ffffff;
}
html[data-tema="dark"] .btn--masuk {
  color: #ffffff;
}

/* Segment tema: ikon ukuran konsisten */
.tema-segmen button span[aria-hidden] {
  font-size: 15px;
  line-height: 1;
}


/* ===== Neon Pro final polish ============================================ */

html[data-tema="dark"] .btn--utama,
html[data-tema="dark"] .btn--pulang {
  color: #041018;
  text-shadow: none;
}
html[data-tema="dark"] .btn--utama:hover,
html[data-tema="dark"] .btn--pulang:hover {
  box-shadow: var(--neon-glow);
}

/* Clock larger, neon-ish */
.clock {
  font-size: 48px;
  font-weight: 200;
  letter-spacing: -0.04em;
  text-shadow: 0 2px 12px rgba(0,0,0,.15);
}

/* Link accent uses neon */
a { color: var(--brass); }
a:hover { color: var(--neon-2); }

/* Focus ring neon */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  box-shadow: var(--neon-glow-sm);
}

/* Segment tema — neon selected */
.tema-segmen button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--brass);
  box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--brass) 35%, transparent);
  font-weight: 700;
}

/* Baris list hover neon edge */
.baris:hover {
  background: color-mix(in srgb, var(--brass) 6%, var(--surface-sub));
}

/* Status chips glow soft on dark */
html[data-tema="dark"] .lencana--hadir,
html[data-tema="dark"] .chip--hadir {
  box-shadow: 0 0 12px color-mix(in srgb, var(--hadir) 25%, transparent);
}
html[data-tema="dark"] .lencana--alpha,
html[data-tema="dark"] .chip--alpha {
  box-shadow: 0 0 12px color-mix(in srgb, var(--alpha) 25%, transparent);
}

/* Desktop phone frame neon edge */
@media (min-width: 620px) {
  .app {
    box-shadow: var(--shadow-lg);
    border-radius: 24px;
    overflow: hidden;
  }
  body { background: var(--desk-bg); }
}

/* Topbar brand subtle neon */
.topbar-merek span {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Input focus neon */
input:focus, select:focus, textarea:focus {
  border-color: var(--brass) !important;
  box-shadow: 0 0 0 3px var(--brass-soft) !important;
}

/* Smooth body */
body {
  transition: background-color .22s ease, color .18s ease;
}


/* ===== AdminUIUX Mobile components (mapped to AbsenKu) ================== */

/* Avatar circle */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--brass-soft);
  color: var(--brass);
  font-weight: 700;
  flex: none;
}
.avatar-40 { width: 40px; height: 40px; font-size: 14px; }
.avatar-48 { width: 48px; height: 48px; font-size: 16px; }
.avatar-64 { width: 64px; height: 64px; font-size: 22px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Soft gradient header strip (optional) */
.bg-theme-1 {
  background: linear-gradient(145deg, #5840ef, #8b5cf6) !important;
  color: #fff !important;
}
.bg-theme-accent {
  background: linear-gradient(145deg, #e46dce, #5840ef) !important;
  color: #fff !important;
}

/* List rows like AdminUIUX list-group */
.baris {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  padding: var(--s3) var(--s4);
  transition: background .12s ease;
}
.baris:active { background: var(--surface-sub); }
.baris + .baris,
.panel-isi--rapat > .baris + .baris,
.panel-isi--rapat > a.baris + a.baris {
  border-top: 1px solid var(--line);
}

/* Badge / chip AdminUIUX */
.badge-theme {
  display: inline-flex; align-items: center;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700;
  background: var(--brass-soft);
  color: var(--brass);
}

/* Card footer soft */
.panel-kaki {
  background: var(--surface-sub);
}

/* Dark: soft tabbar */
html[data-tema="dark"] .tabbar {
  background: var(--surface);
  box-shadow: 0 -6px 28px rgba(0,0,0,.4);
  border-top-color: var(--line);
}

/* Dark: topbar solid-ish */
html[data-tema="dark"] .topbar {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

/* Tema segment selected = purple soft */
.tema-segmen button[aria-pressed="true"] {
  background: var(--brass-soft);
  color: var(--brass);
  box-shadow: none;
}

/* ===== Banner, kartu gaji, notifikasi (AdminUIUX style) ================= */

.banner-hero {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  margin-bottom: var(--s4);
  border-radius: var(--r-besar);
  background:
    radial-gradient(ellipse 80% 120% at 100% 0%, rgba(228,109,206,.35), transparent 55%),
    linear-gradient(135deg, #5840ef 0%, #6d4ef5 50%, #8b5cf6 100%);
  color: #fff;
  box-shadow: var(--neon-glow);
}
.banner-hero-isi { flex: 1; min-width: 0; }
.banner-hero-btn {
  flex: none;
  background: rgba(255,255,255,.2) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  backdrop-filter: blur(6px);
}
.banner-hero-btn:hover {
  background: rgba(255,255,255,.3) !important;
}

/* Slider gaji — kartu premium */
.slider-gaji {
  gap: 14px;
  padding: 6px 2px 16px;
}
.kartu-gaji {
  flex: 0 0 min(300px, 85vw);
  max-width: 85vw;
  border: 0;
  border-radius: var(--r-besar);
  padding: var(--s4);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.kartu-gaji::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #5840ef, #e46dce);
  opacity: .35;
}
.kartu-gaji--aktif {
  border-color: transparent;
  background:
    radial-gradient(ellipse 100% 80% at 100% 0%, rgba(88,64,239,.10), transparent 55%),
    var(--surface);
  box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--brass) 28%, transparent);
}
.kartu-gaji--aktif::before { opacity: 1; }
.kartu-gaji-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: 8px;
}
.kartu-gaji-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.kartu-gaji-nilai {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 4px 0 8px;
}
.kartu-gaji-nilai--empty {
  font-size: 18px;
  font-weight: 600;
  opacity: .65;
}
.kartu-gaji-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 12px;
  color: var(--ink-2);
}
.kartu-gaji-meta b { color: var(--ink); font-weight: 650; }

.slider-dot.is-on {
  background: var(--brass);
  width: 18px;
}

/* Popup notifikasi full-page lebih rapi */
.popup-notif-kepala {
  background: var(--surface);
  min-height: 56px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.popup-notif-kepala strong {
  font-size: 17px;
  letter-spacing: -0.02em;
}
.popup-notif-item {
  padding: 14px 16px;
  transition: background .12s ease;
}
.popup-notif-item:active { background: var(--surface-sub); }
.popup-notif-item.is-unread {
  background: var(--brass-soft);
  border-left: 3px solid var(--brass);
}
.popup-notif-item.is-unread .tebal::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--brass);
  vertical-align: middle;
}

/* Section title di beranda */
.section-judul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--s2) 2px var(--s3);
}
.section-judul h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.section-judul a {
  font-size: 13px;
  font-weight: 600;
  color: var(--brass);
}

/* Marquee lebih lembut */
.marquee-peraturan {
  background: var(--surface);
  border: 0;
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-sedang);
}

/* Dark banner */
html[data-tema="dark"] .banner-hero {
  box-shadow: 0 10px 32px rgba(88, 64, 239, .35);
}
html[data-tema="dark"] .kartu-gaji--aktif {
  background:
    radial-gradient(ellipse 100% 80% at 100% 0%, rgba(123,106,245,.18), transparent 55%),
    var(--surface);
}

/* ===== Wallpaper jam-panel ============================================== */
.jam-panel {
  position: relative;
  isolation: isolate;
}
.jam-panel-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.jam-panel-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(15,17,26,.55), rgba(15,17,26,.35));
}
.jam-panel-isi { position: relative; z-index: 1; }
.jam-panel[data-tone="light"] {
  color: #1a1d2e;
}
.jam-panel[data-tone="light"] .tanggal,
.jam-panel[data-tone="light"] .lokasi,
.jam-panel[data-tone="light"] .clock {
  color: #1a1d2e;
  text-shadow: none;
}
.jam-panel[data-tone="light"] .lokasi { color: #334155; }
.jam-panel[data-tone="light"] .lokasi[data-siap] { color: #15803d; }
.jam-panel[data-tone="light"] .jam-panel-bg::after {
  background: linear-gradient(160deg, rgba(255,255,255,.45), rgba(255,255,255,.25));
}
.jam-panel--foto {
  background: transparent !important;
  box-shadow: var(--shadow-md);
  border: 0;
}
.jam-panel--foto .jam-panel-bg { opacity: 1; }
/* apply custom css gradient via inline on bg from JS if needed */
.jam-panel[data-tone="dark"] .jam-panel-isi { color: #fff; }

/* ===== Kartu kredit slip gaji (Credit Card UI) ======================== */
/* bg.png diganti pure CSS — logo & chip di dist/img/card_gaji/ */

.kartu-cc {
  flex: 0 0 min(340px, 88vw) !important;
  max-width: 88vw;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 22px 20px !important;
  border: 0 !important;
  border-radius: 28px !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14) !important;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  box-sizing: border-box;
  isolation: isolate;
}
.kartu-cc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  /* default abstract mesh — menggantikan bg.png */
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(255,255,255,.22), transparent 50%),
    radial-gradient(ellipse 70% 50% at 90% 80%, rgba(0,0,0,.18), transparent 55%),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,.12), transparent 40%);
  pointer-events: none;
}
.kartu-cc::after {
  content: "";
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  right: -40px; top: -50px;
  background: rgba(255,255,255,.08);
  z-index: 0;
  pointer-events: none;
}
.kartu-cc > * { position: relative; z-index: 1; }

.kartu-cc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kartu-cc-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.kartu-cc-logo img {
  width: 40px; height: 40px;
  object-fit: contain;
  flex: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
}
.kartu-cc-logo span {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  letter-spacing: .01em;
}
.kartu-cc-chip-img {
  width: 52px;
  height: auto;
  flex: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}

.kartu-cc-details {
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.kartu-cc-label {
  display: block;
  color: rgba(255,255,255,.85);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.kartu-cc-amount {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .5px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.kartu-cc-bulan {
  display: block;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}
.kartu-cc-valid {
  text-align: right;
  flex: none;
}
.kartu-cc-mm {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  letter-spacing: .04em;
}

.kartu-cc.is-aktif {
  box-shadow: 0 12px 32px rgba(0,0,0,.22), 0 0 0 2px rgba(255,255,255,.35) !important;
}

/* Motif wallpaper BERBEDA tiap bulan (dark) */
.kartu-cc.cc-ungu {
  /* gelombang diagonal */
  background:
    repeating-linear-gradient(-25deg, transparent 0 14px, rgba(255,255,255,.05) 14px 15px),
    radial-gradient(ellipse 100% 80% at 0% 100%, rgba(124,92,255,.25), transparent 50%),
    linear-gradient(145deg, #140c38 0%, #24165a 50%, #2e1c72 100%);
}
.kartu-cc.cc-ungu::before {
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.14), transparent 28%),
    radial-gradient(circle at 10% 90%, rgba(167,139,250,.2), transparent 35%);
}

.kartu-cc.cc-pink {
  /* titik-titik / dots */
  background:
    radial-gradient(circle, rgba(255,255,255,.07) 1.2px, transparent 1.4px) 0 0 / 14px 14px,
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(244,114,182,.2), transparent 45%),
    linear-gradient(150deg, #2a0818 0%, #4a1030 50%, #6b1845 100%);
}
.kartu-cc.cc-pink::before {
  background:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,.12), transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(244,114,182,.18), transparent 35%);
}

.kartu-cc.cc-biru {
  /* garis horisontal tipis */
  background:
    repeating-linear-gradient(0deg, transparent 0 11px, rgba(255,255,255,.045) 11px 12px),
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(96,165,250,.22), transparent 50%),
    linear-gradient(155deg, #071018 0%, #0c2238 50%, #12304e 100%);
}
.kartu-cc.cc-biru::before {
  background:
    radial-gradient(circle at 75% 20%, rgba(147,197,253,.15), transparent 32%),
    radial-gradient(circle at 15% 85%, rgba(255,255,255,.08), transparent 30%);
}

.kartu-cc.cc-teal {
  /* chevron / zigzag */
  background:
    repeating-linear-gradient(60deg, transparent 0 10px, rgba(255,255,255,.04) 10px 11px),
    repeating-linear-gradient(-60deg, transparent 0 10px, rgba(255,255,255,.03) 10px 11px),
    radial-gradient(ellipse 90% 70% at 100% 100%, rgba(45,212,191,.18), transparent 50%),
    linear-gradient(140deg, #041814 0%, #0a2e28 50%, #0e4038 100%);
}
.kartu-cc.cc-teal::before {
  background:
    radial-gradient(circle at 10% 20%, rgba(94,234,212,.12), transparent 28%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.07), transparent 32%);
}

.kartu-cc.cc-oranye {
  /* grid kotak */
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 18px 18px,
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(251,146,60,.2), transparent 50%),
    linear-gradient(148deg, #1c0c04 0%, #3a1c0c 50%, #542814 100%);
}
.kartu-cc.cc-oranye::before {
  background:
    radial-gradient(circle at 90% 30%, rgba(253,186,116,.15), transparent 30%),
    radial-gradient(circle at 20% 80%, rgba(255,255,255,.08), transparent 30%);
}

.kartu-cc.cc-hitam {
  /* hitam + motif diamond / silang */
  background:
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,.035) 8px 9px),
    repeating-linear-gradient(-45deg, transparent 0 8px, rgba(255,255,255,.035) 8px 9px),
    radial-gradient(ellipse 90% 70% at 15% 25%, rgba(88,64,239,.2), transparent 50%),
    radial-gradient(ellipse 70% 55% at 90% 80%, rgba(228,109,206,.14), transparent 48%),
    linear-gradient(160deg, #050506 0%, #0e0e12 45%, #16161c 100%);
}
.kartu-cc.cc-hitam::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.1), transparent 26%),
    radial-gradient(circle at 82% 75%, rgba(255,255,255,.06), transparent 28%);
}


/* Override warna teks lama di dalam kartu kredit */
.kartu-cc .kartu-gaji-label,
.kartu-cc .kartu-gaji-nilai,
.kartu-cc .kartu-gaji-meta,
.kartu-cc .kartu-gaji-meta b,
.kartu-cc .kartu-cc-periode,
.kartu-cc .kartu-cc-link {
  color: #fff !important;
}

.slider-gaji {
  gap: 14px;
  padding: 8px 2px 18px;
}

/* ===== Ikon animasi hover / touch ======================================= */
@keyframes ikon-goyang {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-10deg) scale(1.08); }
  50% { transform: rotate(10deg) scale(1.08); }
  75% { transform: rotate(-6deg) scale(1.05); }
}
@keyframes ikon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.tile-ikon-simbol,
.tabbar a .ikon,
.baris .ikon,
.btn .ikon {
  transition: transform .2s ease;
}
.tile-ikon:hover .tile-ikon-simbol,
.tile-ikon:active .tile-ikon-simbol {
  animation: ikon-goyang .7s ease infinite;
}
.tabbar a:hover .ikon,
.tabbar a:active .ikon {
  animation: ikon-pulse .6s ease infinite;
}
.baris:hover .ikon,
.baris:active .ikon {
  animation: ikon-pulse .55s ease infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tile-ikon:hover .tile-ikon-simbol,
  .tabbar a:hover .ikon,
  .baris:hover .ikon { animation: none; }
}

/* Tile warna-warni sesuai judul */

/* ===== Wallpaper picker ================================================= */
.wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.wallpaper-item {
  aspect-ratio: 1.4;
  border-radius: 12px;
  border: 2px solid transparent;
  background: linear-gradient(145deg, #5840ef, #8b5cf6);
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: flex-end;
  text-align: left;
  overflow: hidden;
}
.wallpaper-item.is-on {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px var(--brass-soft);
}

/* ===== Submenu pages — clean list ======================================= */
body.app--tanpa-tab .panel {
  border: 0;
  box-shadow: var(--shadow-sm);
}
body.app--tanpa-tab .panel-kepala {
  background: transparent;
  border-bottom: 1px solid var(--line);
}
body.app--tanpa-tab .baris {
  min-height: 54px;
}
body.app--tanpa-tab .isi {
  padding-top: var(--s3);
}

/* Marquee di bawah absen */
.marquee-peraturan {
  margin-top: var(--s3);
  margin-bottom: var(--s4);
}

/* Tile ikon warna-warni sesuai konteks */
.tile-ikon-simbol {
  background: var(--surface-sub);
  color: var(--brass);
}
.tile--biru .tile-ikon-simbol   { color: #3b82f6 !important; background: rgba(59,130,246,.14) !important; }
.tile--hijau .tile-ikon-simbol  { color: #16a34a !important; background: rgba(22,163,74,.14) !important; }
.tile--ungu .tile-ikon-simbol   { color: #7c3aed !important; background: rgba(124,58,237,.14) !important; }
.tile--oranye .tile-ikon-simbol { color: #ea580c !important; background: rgba(234,88,12,.14) !important; }
.tile--emas .tile-ikon-simbol,
.tile--kuning .tile-ikon-simbol { color: #ca8a04 !important; background: rgba(202,138,4,.14) !important; }
.tile--pink .tile-ikon-simbol   { color: #db2777 !important; background: rgba(219,39,119,.14) !important; }
.tile--merah .tile-ikon-simbol  { color: #dc2626 !important; background: rgba(220,38,38,.14) !important; }
.tile--abu .tile-ikon-simbol    { color: #64748b !important; background: rgba(100,116,139,.14) !important; }
.tile--teal .tile-ikon-simbol   { color: #0d9488 !important; background: rgba(13,148,136,.14) !important; }

/* ===== Ionicons ========================================================= */
ion-icon.ikon,
ion-icon.ionicon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.15em;
  color: currentColor;
  flex: none;
}
.tabbar a ion-icon { width: 22px; height: 22px; }
.tile-ikon-simbol ion-icon { width: 28px; height: 28px; }
.btn ion-icon { width: 18px; height: 18px; }
.baris ion-icon { width: 20px; height: 20px; color: var(--brass); }
.topbar ion-icon { width: 22px; height: 22px; }

/* ===== Topbar modern — tanpa border, menyatu wallpaper neon ============= */
.topbar {
  border-bottom: 0 !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #5840ef 22%, transparent) 0%,
      color-mix(in srgb, var(--ground) 88%, transparent) 100%) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: none !important;
  min-height: 56px;
  padding-left: 12px;
  padding-right: 12px;
}
html[data-tema="dark"] .topbar {
  background:
    linear-gradient(180deg,
      rgba(88, 64, 239, .28) 0%,
      rgba(15, 17, 26, .85) 100%) !important;
}
.topbar h1,
.topbar-merek {
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 0 20px rgba(88, 64, 239, .25);
}
.topbar .btn,
.topbar-lonceng {
  background: rgba(255,255,255,.12) !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
html[data-tema="dark"] .topbar .btn,
html[data-tema="dark"] .topbar-lonceng {
  background: rgba(255,255,255,.08) !important;
  color: #eef0f8 !important;
}
.topbar-avatar {
  display: flex;
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  box-shadow: 0 0 0 2px rgba(88, 64, 239, .45), 0 0 12px rgba(88, 64, 239, .35);
  background: var(--surface-sub);
}
.topbar-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.topbar-logo {
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(88, 64, 239, .3);
}

/* ===== Profil banner (wallpaper + motif) ================================ */
.profil-banner {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-besar);
  overflow: hidden;
  margin-bottom: var(--s4);
  min-height: 180px;
  background:
    radial-gradient(ellipse 90% 80% at 10% 0%, rgba(228,109,206,.35), transparent 55%),
    radial-gradient(ellipse 80% 70% at 100% 100%, rgba(88,64,239,.5), transparent 50%),
    linear-gradient(145deg, #1a0f4a 0%, #2d1b69 40%, #5840ef 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(88, 64, 239, .28);
}
.profil-banner-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.profil-banner-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(255,255,255,.04) 12px 13px),
    linear-gradient(160deg, rgba(15,17,26,.45), rgba(15,17,26,.25));
}
.profil-banner-isi {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--s5) var(--s4);
}
.profil-avatar {
  width: 76px; height: 76px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 0 20px rgba(88,64,239,.45);
  background: rgba(255,255,255,.15);
}
.profil-nama {
  margin-top: 12px;
  font-size: 18px;
  color: #fff;
}
.profil-meta {
  color: rgba(255,255,255,.8);
  margin-top: 2px;
}
.profil-banner[data-tone="light"] .profil-nama { color: #1a1d2e; }
.profil-banner[data-tone="light"] .profil-meta { color: #334155; }
.profil-banner[data-tone="light"] .profil-banner-bg::after {
  background: linear-gradient(160deg, rgba(255,255,255,.4), rgba(255,255,255,.2));
}

/* Motif default pada jam-panel (selain foto kustom) */
.jam-panel:not(.jam-panel--foto) {
  background:
    repeating-linear-gradient(-25deg, transparent 0 14px, rgba(255,255,255,.05) 14px 15px),
    radial-gradient(ellipse 100% 80% at 0% 100%, rgba(228,109,206,.28), transparent 50%),
    radial-gradient(ellipse 80% 70% at 100% 0%, rgba(88,64,239,.35), transparent 50%),
    linear-gradient(145deg, #1a0f4a 0%, #2d1b69 40%, #5840ef 100%) !important;
}
.jam-panel--foto .jam-panel-bg::after {
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(255,255,255,.04) 12px 13px),
    linear-gradient(160deg, rgba(15,17,26,.5), rgba(15,17,26,.28));
}

/* ===== Scroll responsif, tanpa zoom ===================================== */
html {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  height: 100%;
}
body {
  touch-action: manipulation;
  overscroll-behavior-y: contain;
  min-height: 100%;
  overflow-x: hidden;
}
.app {
  min-height: 100dvh;
  overflow-x: hidden;
}
.isi {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overflow-y: auto;
}
/* Jangan kunci body kecuali popup notif */
body.app--notif-buka {
  overflow: hidden;
  touch-action: none;
}
/* Slider horizontal tidak ganggu scroll vertikal */
.slider-gaji {
  touch-action: pan-x;
}

/* Tombol Semua → tampilkan perolehan */
.panel-kepala--aksi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.btn-semua-perolehan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: var(--brass-soft, rgba(88,64,239,.12));
  color: var(--brass, #5840ef);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.btn-semua-perolehan ion-icon { width: 16px; height: 16px; }
.btn-semua-perolehan.is-on {
  background: var(--brass, #5840ef);
  color: #fff;
}
/* panel-perolehan animasi via .panel-slide */

/* Notifikasi: titik belum/sudah dibaca */
.popup-notif-item {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
}
.notif-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 6px;
  flex: none;
  background: var(--line);
}
.popup-notif-item.is-unread .notif-dot {
  background: #5840ef;
  box-shadow: 0 0 0 3px rgba(88,64,239,.25);
}
.popup-notif-item.is-read .notif-dot {
  background: var(--line);
  box-shadow: none;
}
.notif-body { flex: 1; min-width: 0; }
.notif-status {
  display: block;
  margin-top: 2px;
  font-weight: 600;
}
.popup-notif-item.is-unread .notif-status { color: #5840ef; }
.popup-notif-item.is-read .notif-status { color: var(--muted); opacity: .8; }

/* Tab footer: outline ungu, filled saat aktif, garis hover di atas */
.tabbar a {
  position: relative;
}
.tabbar a ion-icon {
  display: block;
  width: 24px !important;
  height: 24px !important;
  color: #5840ef;
  transition: transform .2s ease, color .2s ease;
}
.tabbar a span {
  color: var(--muted, #64748b);
  transition: color .2s ease;
}
/* Hover: naik sedikit + garis efek di atas ikon */
.tabbar a::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #5840ef, #e46dce);
  transform: translateX(-50%);
  opacity: 0;
  transition: width .22s ease, opacity .22s ease;
  pointer-events: none;
}
.tabbar a:hover::before,
.tabbar a:focus-visible::before {
  width: 22px;
  opacity: 1;
}
.tabbar a:hover ion-icon,
.tabbar a:focus-visible ion-icon {
  transform: translateY(-3px);
  color: #5840ef;
}
.tabbar a:hover span {
  color: #5840ef;
}
/* Aktif: filled (nama solid) + warna ungu penuh */
.tabbar a[aria-current] ion-icon {
  color: #5840ef !important;
  transform: none;
  filter: drop-shadow(0 2px 6px rgba(88, 64, 239, .35));
}
.tabbar a[aria-current] span {
  color: #5840ef;
  font-weight: 700;
}
.tabbar a[aria-current]::before {
  width: 22px;
  opacity: 1;
  top: 6px;
}
html[data-tema="dark"] .tabbar a ion-icon {
  color: #a78bfa;
}
html[data-tema="dark"] .tabbar a span {
  color: #94a3b8;
}
html[data-tema="dark"] .tabbar a:hover ion-icon,
html[data-tema="dark"] .tabbar a[aria-current] ion-icon {
  color: #c4b5fd !important;
}
html[data-tema="dark"] .tabbar a:hover span,
html[data-tema="dark"] .tabbar a[aria-current] span {
  color: #c4b5fd;
}
html[data-tema="dark"] .tabbar a::before {
  background: linear-gradient(90deg, #7c5cff, #e46dce);
}

/* Page spinner transition */
.page-spinner {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  pointer-events: none;
}
.page-spinner[hidden] { display: none !important; }
.page-spinner-box {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
html[data-tema="dark"] .page-spinner-box {
  background: transparent !important;
}
.page-spinner-box img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: transparent;
  animation: spin-logo .9s linear infinite;
}
@keyframes spin-logo {
  to { transform: rotate(360deg); }
}
body.is-page-loading .app {
  filter: blur(5px);
  transition: filter .18s ease;
  pointer-events: none;
}
body.is-page-loading .page-spinner {
  pointer-events: none;
  filter: none;
}

/* Tab aktif: FILLED ungu (bukan putih) — override kuat */
.tabbar a ion-icon {
  color: #5840ef !important;
  fill: currentColor;
}
.tabbar a[aria-current="page"] ion-icon,
.tabbar a[aria-current] ion-icon {
  color: #5840ef !important;
  fill: #5840ef !important;
  background: transparent !important;
  filter: drop-shadow(0 2px 6px rgba(88, 64, 239, .35));
}
.tabbar a[aria-current="page"],
.tabbar a[aria-current] {
  color: #5840ef !important;
}
.tabbar a[aria-current="page"] span,
.tabbar a[aria-current] span {
  color: #5840ef !important;
}
html[data-tema="dark"] .tabbar a ion-icon {
  color: #a78bfa !important;
}
html[data-tema="dark"] .tabbar a[aria-current] ion-icon {
  color: #c4b5fd !important;
  fill: #c4b5fd !important;
  background: transparent !important;
}

/* Semua tile — sama persis dengan tile-ikon lain */
button.tile-semua.tile-ikon {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  /* jangan override layout: pakai .tile-ikon */
}
button.tile-semua .tile-ikon-nilai {
  color: var(--ink-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
button.tile-semua.is-on .tile-ikon-simbol {
  background: rgba(88, 64, 239, .18) !important;
  color: #5840ef !important;
}
button.tile-semua.is-on .tile-ikon-nilai {
  color: #5840ef !important;
}


/* Panel perolehan slide */
#panel-perolehan.panel-slide {
  display: block !important;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  transition:
    max-height .32s ease,
    opacity .28s ease,
    transform .28s ease,
    margin .28s ease;
}
#panel-perolehan.panel-slide.is-buka {
  max-height: 640px;
  opacity: 1;
  transform: translateY(0);
  margin-bottom: var(--s4) !important;
  border-width: 1px;
}
#panel-perolehan[hidden]:not(.is-buka) {
  display: none !important;
}

/* Notifikasi dibaca / belum */
.notif-row {
  display: flex !important;
}
.notif-row .notif-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 7px;
  flex: none;
  background: #5840ef;
  box-shadow: 0 0 0 3px rgba(88,64,239,.22);
}
.notif-row.is-read .notif-dot {
  background: var(--line);
  box-shadow: none;
}
.notif-row.is-read {
  opacity: .62;
}
.notif-row.is-unread .tebal {
  font-weight: 700;
}
.notif-row .notif-status {
  display: block;
  margin-top: 2px;
  font-weight: 600;
  font-size: 11px;
}
.notif-row.is-unread .notif-status { color: #5840ef; }
.notif-row.is-read .notif-status { color: var(--muted); }

/* Riwayat absen gaya kalender */
.daftar-absen { padding: 0 !important; }
.absen-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.absen-row:last-child { border-bottom: 0; }
.absen-tgl {
  width: 48px;
  height: 52px;
  border-radius: 14px;
  background: #eef2ff;
  color: #4338ca;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  line-height: 1.1;
}
.absen-tgl--minggu {
  background: #fce7f3;
  color: #be185d;
}
.absen-hari {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .85;
}
.absen-angka {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.absen-isi { flex: 1; min-width: 0; }
.absen-jam {
  font-size: 13px;
  color: var(--ink-2);
}
.absen-jam b { color: var(--ink); font-weight: 700; }
.absen-denda {
  font-size: 11px;
  color: #dc2626;
  margin-top: 2px;
  font-weight: 600;
}
.absen-kanan {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: none;
}
.absen-foto {
  color: var(--ink-3);
  display: flex;
}
.absen-foto ion-icon { width: 18px; height: 18px; }
html[data-tema="dark"] .absen-tgl {
  background: rgba(88,64,239,.2);
  color: #c4b5fd;
}
html[data-tema="dark"] .absen-tgl--minggu {
  background: rgba(219,39,119,.22);
  color: #f9a8d4;
}

/* Timeline garis penghubung antar tanggal */
.daftar-absen--timeline {
  position: relative;
  padding-left: 0 !important;
}
.daftar-absen--timeline .absen-row {
  position: relative;
  padding-left: 16px;
}
.daftar-absen--timeline .absen-row::before {
  content: "";
  position: absolute;
  left: 39px; /* tengah kotak tanggal ~48/2 + padding */
  top: 52px;
  bottom: -12px;
  width: 2px;
  background: linear-gradient(180deg, rgba(88,64,239,.35), rgba(88,64,239,.08));
  border-radius: 2px;
  z-index: 0;
}
.daftar-absen--timeline .absen-row:last-child::before {
  display: none;
}
.daftar-absen--timeline .absen-tgl {
  position: relative;
  z-index: 1;
}

/* Slide perolehan lebih smooth (grid 0fr → 1fr) */
#panel-perolehan.panel-slide {
  display: grid !important;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-6px);
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  transition:
    grid-template-rows .38s cubic-bezier(.22,.61,.36,1),
    opacity .3s ease,
    transform .3s ease,
    margin .3s ease;
}
#panel-perolehan.panel-slide > * {
  overflow: hidden;
  min-height: 0;
}
#panel-perolehan.panel-slide.is-buka {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
  margin-top: var(--s4) !important;
  margin-bottom: var(--s4) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
}
#panel-perolehan[hidden]:not(.is-buka) {
  display: none !important;
}

/* panah list seragam (>) */
.baris ion-icon.ikon.maju,
.baris ion-icon[name="chevron-forward-outline"],
.baris ion-icon[name="chevron-forward"] {
  width: 18px;
  height: 18px;
  color: var(--ink-3);
  flex: none;
  margin-left: 4px;
}

/* Admin mobile: tanpa sidebar rail */
.app--admin .rail,
.app--staff .rail,
.app--admin .tabir,
.app--staff .tabir {
  display: none !important;
}
.app--admin,
.app--staff {
  /* full mobile column seperti karyawan */
  max-width: var(--kolom, 480px);
  margin: 0 auto;
}
.admin-hero {
  margin: 0 0 var(--s4);
  padding: var(--s4);
  border-radius: 20px;
  background: linear-gradient(145deg, #5840ef 0%, #8b5cf6 55%, #e46dce 100%);
  color: #fff;
  box-shadow: 0 12px 32px rgba(88, 64, 239, .28);
}
.admin-hero-judul {
  margin: 4px 0 12px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.admin-hero .kecil.redup { color: rgba(255,255,255,.78); }
.admin-hero .tebal { color: #fff; }
.admin-hero .redup { color: rgba(255,255,255,.8); }
.admin-progress {
  height: 8px;
  background: rgba(255,255,255,.25);
  border-radius: 99px;
  overflow: hidden;
}
.admin-progress-bar {
  height: 100%;
  background: #fff;
  border-radius: 99px;
  transition: width .35s ease;
}
.panel--alert {
  border: 1px solid rgba(88, 64, 239, .25);
  box-shadow: 0 8px 24px rgba(88, 64, 239, .08);
}
/* tile link di admin home */
a.tile-ikon {
  text-decoration: none;
  color: inherit;
}
.app--admin .grid-ikon {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 8px;
}