/* =============================================
   UNIFIED STYLESHEET — All Pages
   Dashboard, Status, Approval Meeting,
   Riwayat Kegiatan, Pilih Jadwal

   Palette: Institut Teknologi Kalimantan (ITK)
   Primary blue  : #1a56db
   Dark navy     : #003f8a
   Light bg      : #eff6ff
   Accent yellow : #f0a500
   ============================================= */

/* ─── CSS VARIABLES ─── */
/* MODE TERANG/GELAP: seluruh palet di bawah ini dipakai lewat var(...),
   bukan literal hex, di hampir semua rule di file ini — jadi menyalakan
   mode gelap cukup dengan MENDEFINISIKAN ULANG token yang sama (lihat
   blok ':root[data-theme="dark"]' beberapa baris di bawah), tanpa
   menulis ulang tiap komponen. Toggle-nya sendiri (tombol + localStorage
   + skrip anti-kedip) ada di resources/views/sipena/layout/app.blade.php.
   Default SELALU terang (data-theme diset eksplisit oleh skrip itu,
   TIDAK mengikuti preferensi OS pengguna) — sesuai permintaan. */
:root {
  --primary:       #1a56db;   /* ITK main blue */
  --primary-dark:  #003f8a;   /* ITK navy */
  --primary-mid:   #1251a3;   /* hover state */
  --primary-light: #dbeafe;   /* badge/chip bg */
  --primary-pale:  #eff6ff;   /* section bg */
  --accent:        #f0a500;   /* ITK yellow accent */
  --accent-light:  #fef3c7;   /* accent pale bg */
  --bg:            #f0f5ff;   /* page background - light blue tint */
  --card-bg:       #FFFFFF;
  --sidebar-bg:    #FFFFFF;
  --text-dark:     #0d1b3e;   /* near-black navy */
  --text-mid:      #4a6080;   /* muted blue-grey */
  /* FIX (audit kontras WCAG): nilai lama '#8aa0bf' cuma 2.2–2.7:1 di atas
     putih/card — gagal ambang AA (butuh 4.5:1 untuk teks normal) di
     puluhan label/caption yang memakainya. Digelapkan ke '#54698c'
     (4.8–5.6:1, lolos AA) tanpa mengubah keluarga warna birunya. */
  --text-light:    #54698c;
  --event-bg:      #1a56db;   /* event card = primary blue */
  --event-bg2:     #1251a3;   /* event card alt = darker blue */
  --radius:        18px;
  --radius-sm:     10px;

  /* Border/divider — sebelumnya literal '#dbeafe' / '#e0eaff' / '#c7d9f5'
     ditulis ulang di puluhan rule; ditokenkan supaya mode gelap bisa
     menggelapkannya sekali di sini. */
  --border:        #dbeafe;   /* border kartu/panel utama */
  --border-soft:   #e0eaff;   /* divider tipis (garis antar-item) */
  --border-mid:    #c7d9f5;   /* border input/tombol */

  /* Pasangan warna status (background pucat + teks/ikon jenuh + border) —
     dipakai di badge, pill, tab aktif, tombol konfirmasi, slot jadwal.
     Teks 'good'/'bad' digelapkan dari nilai asli (#2D9B58 / #D94040, cuma
     3.3:1 dan 4.0:1 di atas background pucatnya) supaya lolos AA 4.5:1. */
  --good-bg:       #EDFBF2;
  --good-text:     #1f6b3d;
  --good-border:   #AADFC0;

  --bad-bg:        #FFF0F0;
  --bad-text:      #a12e2e;   /* teks notice-box panjang (sudah 6.4:1) */
  --bad:           #c23434;   /* aksen badge/tombol/dot (5.0:1, tetap nyala) */
  --bad-border:    #F9CACA;

  --info-bg:       #F3EFFE;
  --info-text:     #7B52C8;   /* sudah 4.8:1, tidak perlu diubah */
  --info-border:   #C9B5F0;

  /* Sengaja TIDAK digelapkan — dipakai khusus untuk slot/aksi yang
     memang dinonaktifkan (mis. '.slot-terisi'), rendah kontras di sini
     adalah sinyal visual "tidak aktif" yang disengaja (WCAG tidak
     mewajibkan kontrol nonaktif memenuhi ambang kontras teks). */
  --muted-bg:      #F5F5F5;
  --muted-text:    #AAAAAA;
  --muted-border:  #E8E8E8;

  /* Pasangan kuning "menunggu/pending" — versi CSS ('--accent-light' +
     ini) dan versi yang tadinya ditulis literal di banyak inline style
     Blade ('#FFF4E5' + '#C07A10') sebenarnya dua sistem warna kuning
     yang nyaris sama tapi tidak identik (drift). Disatukan ke sini. */
  --warn-text:     #8f5f00;   /* was literal '#9a6700', 4.4:1 → 5.0:1 di atas --accent-light */
  --warn-border:   #f5dfa0;

  /* Versi "solid" — dipakai KHUSUS untuk latar penuh + teks putih di
     atasnya (tombol Konfirmasi, toast, slot terpilih), TERPISAH dari
     '--good-text'/'--bad'/'--info-text' di atas yang dipakai untuk teks
     di atas latar pucat. Sengaja SAMA persis di kedua mode — makna warna
     ini ("tombol hijau/merah/ungu solid") tidak perlu ikut menggelap/
     menyala mengikuti tema, beda dari teks label yang memang harus
     menyesuaikan supaya tetap kebaca. Sebelum dipisah, '--good-text' dkk
     ikut dicerahkan untuk mode gelap (supaya kebaca sebagai teks di atas
     kartu gelap) — giliran dipakai ulang sebagai latar tombol solid,
     teks putih di atasnya jadi nyaris tidak kelihatan (mis. '.toast-green'
     sempat cuma 1.7:1, ditemukan lewat audit kontras otomatis). */
  --good-solid:    #1f6b3d;
  --bad-solid:     #c23434;
  --info-solid:    #7B52C8;

  /* Varian hover yang lebih pekat dari '--good-bg' dkk di atas — dulu
     ditulis literal terpisah, jadi lolos dari penokenan pertama dan tetap
     berwarna nyaris-putih di mode gelap (lihat laporan bug: hover baris
     tabel Verifikasi jadi teks putih di atas latar putih). */
  --good-bg-hover: #D4F5E3;
  --warn-bg-hover: #fde9a0;
  --bad-bg-hover:  #ffe0e0;
  --info-bg-hover: #e8e0fc;

  /* Badge warna per-pimpinan (Wakil Rektor 1/2 — badge-kepala sudah
     pakai --accent-light/--warn-text jadi sudah aman duluan). */
  --role1-bg:      #E3F0FE;
  --role1-text:    #4A7CC9;
  --role2-bg:      #E8FEE3;
  --role2-text:    #3A9A52;

  /* ── alias ── */
  --salmon:        #1a56db;   /* remapped → ITK primary blue */
  --salmon-pale:   #eff6ff;   /* remapped → ITK pale blue */
}

/* ─── MODE GELAP ───
   Diaktifkan lewat atribut 'data-theme="dark"' di <html> (diset oleh
   toggle di layout, tersimpan di localStorage). Tidak memakai
   'prefers-color-scheme' — default sistem SELALU terang, terlepas dari
   preferensi OS, sampai pengguna menekan tombolnya sendiri. */
:root[data-theme="dark"] {
  --primary:       #5a8bf0;
  --primary-dark:  #1a3a72;
  --primary-mid:   #3a6fd6;
  --primary-light: #1c2b57;
  --primary-pale:  #16224a;
  --accent:        #ffbe3d;
  --accent-light:  #3a2b0e;
  --bg:            #0a1330;
  --card-bg:       #101c44;
  --sidebar-bg:    #0d1836;
  --text-dark:     #e8edfb;
  --text-mid:      #aab8db;
  --text-light:    #7c8db8;
  --event-bg:      #5a8bf0;
  --event-bg2:     #3a6fd6;

  --border:        #223163;
  --border-soft:   #1c2748;
  --border-mid:    #2a3c72;

  --good-bg:       #123522;
  --good-text:     #4ade80;
  --good-border:   #1f6b3d;

  --bad-bg:        #3a1616;
  --bad-text:      #f87171;
  --bad:           #f87171;
  --bad-border:    #6b2b2b;

  --info-bg:       #2c1f4a;
  --info-text:     #b794f4;
  --info-border:   #4a3a7a;

  --muted-bg:      #1c2748;
  --muted-text:    #7c88ab;
  --muted-border:  #2a3660;

  --warn-text:     #f0b429;
  --warn-border:   #5c4517;

  /* Sengaja SAMA persis dengan versi terang — lihat catatan panjang di
     ':root' di atas. */
  --good-solid:    #1f6b3d;
  --bad-solid:     #c23434;
  --info-solid:    #7B52C8;

  --good-bg-hover: #1c4a30;
  --warn-bg-hover: #6b5220;
  --bad-bg-hover:  #4a2020;
  --info-bg-hover: #3a2c66;

  --role1-bg:      #1a2c52;
  --role1-text:    #6fa3f0;
  --role2-bg:      #142c1e;
  --role2-text:    #52c77e;

  --salmon:        #5a8bf0;
  --salmon-pale:   #16224a;
}

/* ─── RESET ─── */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* FIX (audit aksesibilitas): jaring pengaman fokus keyboard — banyak
   elemen interaktif (link sidebar, tombol Logout, item side-tree, sel
   kalender mini, dll.) sebelumnya tidak pernah diberi gaya fokus sama
   sekali; "aman" cuma karena browser masih menampilkan outline
   bawaannya, bukan karena sengaja dirancang. Aturan generik ini jadi
   jaring pengaman terakhir — komponen yang SUDAH punya gaya fokus
   sendiri (mis. '.sched-card:focus-visible', '.mini-select:focus-visible')
   tetap menang karena selectornya lebih spesifik. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* FIX (audit aksesibilitas): skip link — tersembunyi visual sampai
   difokus (Tab pertama saat halaman dibuka), lompat langsung ke konten
   utama tanpa melewati seluruh sidebar. Lihat layout/app.blade.php. */
.skip-link {
  position: absolute; top: -48px; left: 12px; z-index: 2000;
  background: var(--primary); color: #fff; font-weight: 600; font-size: 13px;
  padding: 10px 18px; border-radius: 0 0 8px 8px; text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus-visible { top: 0; outline-offset: 0; }

/* ─── BODY ─── */
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text-dark);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
}
@media (prefers-reduced-motion: no-preference) {
  body, .app, .card, .panel, .form-section, .panduan-section {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  }
}

/* ─── ROOT APP GRID ─── */
.app {
  display: grid;
  grid-template-columns: 310px 1fr 310px;  /* sidebar & right panel disamakan (310px) */
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  height: auto;
  background: var(--bg);
  border-radius: 0;
  box-sizing: border-box;
  padding: 16px 16px 16px;  /* padding seragam, top tidak perlu terlalu besar */
}

/* BARU: halaman yang TIDAK punya kolom kanan (mis. Manajemen User,
   Manajemen Pertemuan, Dinas Luar, Riwayat Impersonate/Reset Kata Sandi —
   kebanyakan halaman khusus Admin Super, yang memang tidak butuh kalender
   mini di kanan) sebelumnya tetap mewarisi grid-template-columns 3 kolom
   di atas apa adanya — track ke-3 (310px) tetap dialokasikan grid walau
   tidak ada elemen '.right-panel' sama sekali untuk mengisinya, jadi
   selalu ada jalur kosong 310px+gap di kanan layar (lihat laporan bug).
   ':has()' di sini mendeteksi LANGSUNG dari struktur HTML-nya sendiri
   (bukan flag manual per halaman yang gampang lupa disetel) — begitu
   '.app' TIDAK punya child '.right-panel', grid-nya otomatis diciutkan
   jadi 2 kolom saja supaya '.main'/'.am-main' benar-benar mengisi sisa
   lebar itu, bukan cuma 1fr dari 3 kolom yang tetap dijatah sama seperti
   kalau ada kolom kanan. */
.app:not(:has(> .right-panel)) {
  grid-template-columns: 310px 1fr;
}

/* FIX: item grid (sidebar, main, right-panel) secara default punya
   min-width: auto (bukan 0) — artinya kalau ISI di dalamnya (mis. grid
   kalender 7 kolom, tab pimpinan, atau teks panjang) tidak muat
   menyusut sekecil track kolomnya, browser malah memaksa track itu
   melebar MELEBIHI ukuran yang diberikan grid-template-columns. Efeknya
   kolom tengah (main) bisa "mendorong" dan numpuk/tertutup ke kolom
   sidebar/right-panel di lebar layar tertentu (mis. ~1366px), padahal
   grid-template-columns sudah eksplisit set 310px untuk sidebar &
   right-panel. min-width:0 di sini memaksa ketiganya taat pada lebar
   track yang sudah ditentukan grid, dan overflow konten di dalamnya
   akan discroll secara lokal (mis. .pimpinan-tabs sudah overflow-x:auto)
   alih-alih mendorong keluar kolom. */
.app > aside.sidebar,
.app > main,
.app > .right-panel {
  min-width: 0;
}

/* Bilah impersonate (lihat #impersonateBanner di layout/app.blade.php) —
   ditaruh sebagai grid item TERPISAH yang cuma menempati kolom
   main+right-panel ('grid-column: 2 / -1' = dari kolom ke-2 sampai
   kolom terakhir, berlaku baik saat '.app' 3 kolom di layar lebar
   maupun 2 kolom di breakpoint tablet ≤1600px), BUKAN full-width di
   atas seluruh '.app'. Sidebar ('grid-row: 1 / -1') sengaja dibuat
   membentang dari baris pertama supaya tetap mulai persis di atas
   viewport seperti biasa, sama sekali tidak terdorong turun oleh bilah
   ini — beda dengan sebelumnya (bilah full-width DI ATAS '.app') yang
   mendorong seluruh sidebar (termasuk tombol Logout di paling
   bawahnya) turun tanpa tinggi sidebar ikut menyesuaikan, membuatnya
   kepotong di bawah layar pada halaman pendek yang tidak butuh scroll.
   Di breakpoint ≤900px '.app' berubah jadi flex-column (lihat media
   query terkait) — properti grid-row/grid-column di bawah otomatis
   tidak berlaku lagi di sana, jadi bilah ini kembali full-width
   mengikuti urutan DOM biasa (sidebar sendiri sudah jadi off-canvas
   fixed di breakpoint itu, tidak lagi bagian dari alur grid).

   Selector SENGAJA ditulis dobel '.app.app--impersonating' (bukan
   '.app--impersonating' saja) — elemennya memang selalu punya kedua
   class itu bersamaan, tapi dengan menuliskan keduanya, specificity
   aturan ini (0,2,0) otomatis MENANG di breakpoint ≤1600px atas aturan
   '.app { grid-template-rows: auto; }' punya specificity (0,1,0) di
   media query itu, TANPA bergantung urutan/posisi di file. Sebelumnya
   (cuma '.app--impersonating' saja, specificity sama-sama 0,1,0) kalah
   karena aturan breakpoint itu posisinya lebih akhir di file, sehingga
   'grid-template-rows: auto 1fr' di sini balik ke-reset jadi 'auto'
   satu track — begitu sidebar (membentang 2 baris) ikut menyumbang ke
   perhitungan tinggi baris "auto" itu, baris 1 (tempat bilah ini)
   malah ikut melar setinggi sidebar alih-alih sependek isinya sendiri. */
.app.app--impersonating {
  grid-template-rows: auto 1fr;
}
.app.app--impersonating > #impersonateBanner {
  grid-column: 2 / -1;
  grid-row: 1;
}
.app.app--impersonating > aside.sidebar {
  grid-row: 1 / -1;
}
.impersonate-banner {
  position: sticky; top: 0; z-index: 1000;
  background: var(--primary-dark); color: #fff;
  padding: 10px 16px; display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; font-size: 13px; border-radius: var(--radius);
}
.impersonate-banner-form { margin: 0; }
.impersonate-banner-btn {
  background: #fff; color: var(--primary-dark); border: none; border-radius: 6px;
  padding: 5px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
}
/* 'main'/'.right-panel' SENGAJA tidak diberi grid-row eksplisit — auto-
   placement grid bawaan browser sudah cukup: baris 1 penuh terisi
   (sidebar di kolom 1 + bilah di kolom 2/-1), jadi item berikutnya
   (main, lalu right-panel kalau masih jadi direct child '.app' — lihat
   kasus Dashboard di komentar atas) otomatis "meluber" ke baris 2+
   dengan sendirinya, termasuk saat keduanya perlu bersisian di kolom
   yang sama (breakpoint ≤1600px, lihat '.app > .right-panel { grid-
   column: 2 / -1 }' di bawah). Memaksa 'grid-row: 2' di sini untuk
   KEDUANYA sekaligus justru bikin main & right-panel numpuk di sel
   yang sama persis, karena keduanya jadi eksplisit menuju baris yang
   sama alih-alih auto-placement mendorong right-panel ke baris
   berikutnya seperti seharusnya. */

/* =============================================
   SIDEBAR
   ============================================= */
.sidebar {
  background: var(--sidebar-bg);
  border-radius: var(--radius);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 24px rgba(26,86,219,0.08);

  /* FIX: tanpa ini, sidebar ikut stretch mengikuti tinggi kolom konten
     (default CSS Grid: align-items: stretch), jadi kalau halamannya
     panjang (mis. daftar Riwayat/Status yang panjang, atau hari sibuk di
     menu Jadwal), tombol Logout di paling bawah ikut terdorong jauh ke
     bawah dan seolah "hilang" karena harus scroll sampai ujung halaman.
     Sticky + tinggi tetap (BUKAN max-height, supaya kotak putihnya tetap
     penuh mengisi ke bawah seperti sebelumnya, bukan cuma sependek
     isinya) bikin sidebar (dan Logout-nya) selalu terjangkau di layar,
     terlepas sepanjang apapun konten kolom sebelahnya.

     Catatan: sidebar SELALU dianggap mulai persis dari atas viewport,
     termasuk saat bilah impersonate tampil — bilah itu sekarang jadi
     grid item TERPISAH yang cuma menempati kolom main+right-panel (lihat
     '.app--impersonating' di bawah & #impersonateBanner di
     layout/app.blade.php), bukan lagi elemen full-width di ATAS sidebar
     seperti sebelumnya, jadi baris ini tidak perlu tahu-menahu soal
     bilah itu sama sekali. */
  position: sticky;
  top: 16px;
  align-self: start;
  height: calc(100vh - 32px);
  overflow-y: auto;
}

/* BARU: profil & bel Notifikasi disatukan jadi satu baris — sebelumnya
   Notifikasi satu baris menu penuh sendiri di antara menu lain, kini
   cuma ikon bulat di samping kotak nama (lihat layout/app.blade.php). */
.profile-row {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 20px; border-bottom: 1px solid var(--border-soft); margin-bottom: 12px;
}
.profile {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  transition: opacity 0.15s;
}
.profile:hover { opacity: 0.75; }

.notif-bell {
  position: relative; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; text-decoration: none; color: var(--text-mid);
  background: var(--bg); transition: all 0.2s;
}
.notif-bell:hover, .notif-bell.active { background: var(--primary-pale); color: var(--primary); }
.notif-bell-count { position: absolute; top: -3px; right: -3px; margin-left: 0; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }

.avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; letter-spacing: 0.5px;
  flex-shrink: 0;
}
/* BARU: foto profil sungguhan (lihat User::avatarUrl()) menggantikan
   avatar inisial begitu ada — object-fit:cover supaya foto apa pun
   rasionya tetap terpotong rapi jadi lingkaran, bukan gepeng. */
.avatar-photo, .account-avatar-photo {
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}

.profile-info .name { font-weight: 600; font-size: 14px; color: var(--text-dark); }
.profile-info .role { font-size: 12px; color: var(--text-light); margin-top: 2px; }

/* Pencarian global di sidebar — lihat PencarianController & catatan di
   layout/app.blade.php. */
.sidebar-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1.5px solid var(--border-mid); border-radius: 10px;
  padding: 9px 12px; margin: 4px 0 8px;
}
.sidebar-search-icon { font-size: 13px; color: var(--text-light); flex-shrink: 0; }
.sidebar-search-input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-size: 13px; font-family: 'DM Sans', sans-serif; color: var(--text-dark);
}
.sidebar-search-input::placeholder { color: var(--text-light); }
.sidebar-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,86,219,.15); }

.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-mid);
  font-size: 14px; font-weight: 500;
  transition: all 0.2s;
}
.nav-item:hover          { background: var(--primary-pale); color: var(--primary); }
.nav-item.active         { color: var(--primary); font-weight: 600; background: var(--primary-pale); }

/* Blok paling bawah sidebar — toggle mode gelap/terang + Logout, rata
   tengah (lihat layout/app.blade.php). */
.sidebar-bottom {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding-top: 12px;
}

/* ── Theme switch — "Switch by Galahhad", dipakai apa adanya dari
   https://uiverse.io/Galahhad/strong-squid-82. Cuma '--toggle-size'
   yang disesuaikan (30px asli → 15px, satu-satunya variabel ukuran yang
   memang disediakan pembuatnya) supaya muat di sidebar; warna/animasi
   lainnya TIDAK diubah dari sumber aslinya. ── */
.theme-switch {
  --toggle-size: 15px;
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  --container-light-bg: #3D7EAE;
  --container-night-bg: #1D1F2C;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ECCA2F;
  --moon-bg: #C4C9D1;
  --spot-color: #959DB1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff;
  --clouds-color: #F3FDFF;
  --back-clouds-color: #AACADF;
  --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
}
.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}
.theme-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-light-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  transition: var(--transition);
  position: relative;
}
.theme-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  border-radius: var(--container-radius);
}
/* FIX (audit aksesibilitas, sama alasannya dengan '.side-tree-toggle'
   di bawah): sumber aslinya pakai 'display:none' — visual sama, tapi
   ikut mengeluarkan checkbox dari urutan Tab, jadi switch ini tidak
   bisa dioperasikan lewat keyboard sama sekali. Pola sembunyi-visual-
   tetap-fokusabel di bawah mengembalikannya ke urutan Tab (Space bawaan
   checkbox tetap toggle seperti biasa), garis fokusnya ditandai pada
   '.theme-switch__container' (lihat ':focus-visible' di bawah). */
.theme-switch__checkbox {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.theme-switch__circle-container {
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: var(--circle-container-offset);
  top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: flex;
  transition: var(--circle-transition);
  pointer-events: none;
}
.theme-switch__sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  overflow: hidden;
  transition: var(--transition);
}
.theme-switch__moon {
  transform: translateX(100%);
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  transition: var(--transition);
  position: relative;
}
.theme-switch__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}
.theme-switch__spot:nth-of-type(2) { width: 0.375em; height: 0.375em; top: 0.937em; left: 1.375em; }
.theme-switch__spot:nth-last-of-type(3) { width: 0.25em; height: 0.25em; top: 0.312em; left: 0.812em; }
.theme-switch__clouds {
  width: 1.25em;
  height: 1.25em;
  background-color: var(--clouds-color);
  border-radius: var(--container-radius);
  position: absolute;
  bottom: -0.625em;
  left: 0.312em;
  box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}
.theme-switch__stars-container {
  position: absolute;
  color: var(--stars-color);
  top: -100%;
  left: 0.312em;
  width: 2.75em;
  height: auto;
  transition: var(--transition);
}
.theme-switch__checkbox:checked + .theme-switch__container { background-color: var(--container-night-bg); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em);
}
.theme-switch__circle-container:hover { left: calc(var(--circle-container-offset) + 0.187em); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon { transform: translate(0); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds { bottom: -4.062em; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
  top: 50%;
  transform: translateY(-50%);
}
.theme-switch__checkbox:focus-visible + .theme-switch__container { outline: 2px solid var(--primary); outline-offset: 2px; }

.nav-icon  { font-size: 18px; width: 22px; text-align: center; }
.nav-notif-count {
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 700;
  min-width: 20px; height: 20px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; padding: 0 5px; margin-left: auto;
}
.nav-arrow { margin-left: auto; font-size: 12px; color: var(--text-light); }

.sub-menu { background: var(--primary-pale); border-radius: var(--radius-sm); padding: 8px 0; margin: 0 -4px; }

.sub-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px; font-size: 13px; color: var(--text-mid);
  cursor: pointer; border-radius: 8px; transition: all 0.15s;
}
.sub-item:hover       { color: var(--primary); }
.sub-item.active      { color: var(--primary); font-weight: 600; }

.sub-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary-light); flex-shrink: 0; transition: background 0.15s;
}
.sub-item.active .sub-dot { background: var(--primary); }

/* =============================================
   SIDEBAR TREE MENU
   Adaptasi dari komponen Uiverse.io by ashif_6672 — dipakai untuk
   menggantikan .sub-menu/.sub-item lama pada item sidebar yang punya
   submenu (mis. "Penjadwalan"). Palette warna disesuaikan dengan
   variabel ITK (--primary, --primary-pale, --text-mid, dst), BUKAN
   warna asli zinc/gray dari Uiverse. Animasi expand/collapse murni
   CSS (checkbox trick + grid-template-rows), tanpa perlu Alpine.js.
   Struktur pakai <div>, bukan <ul>/<li>, supaya menyatu dengan sidebar
   sipena yang sudah berbasis flex-column (bukan daftar).
   ============================================= */
.side-tree-item { position: relative; }

.side-tree-children {
  margin-left: 17px; padding-left: 17px;
  border-left: 1.5px solid var(--primary-light);
}
.side-tree-children > .side-tree-item { margin-top: 2px; }
.side-tree-children > .side-tree-item::before {
  content: ''; position: absolute; left: -17px; top: 19px;
  width: 13px; height: 1.5px; background: var(--primary-light);
}

/* FIX (audit aksesibilitas): sebelumnya 'display:none' — menyembunyikan
   checkbox SEKALIGUS mengeluarkannya dari urutan Tab, jadi submenu ini
   tidak bisa dibuka lewat keyboard sama sekali. Pola "sembunyi visual,
   tetap fokusabel" di bawah mengembalikannya ke urutan Tab (Space
   bawaan checkbox membuka/menutup), fokusnya ditandai lewat garis pada
   label di sebelahnya (lihat ':focus-visible' + '.side-tree-label' di
   bawah) karena checkbox-nya sendiri terlalu kecil untuk jadi indikator
   fokus yang berguna. */
.side-tree-toggle {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.side-tree-toggle:focus-visible + .side-tree-label {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

.side-tree-label,
.side-tree-file {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-mid);
  font-size: 14px; font-weight: 500;
  transition: background-color 0.2s, color 0.2s;
  text-decoration: none; user-select: none;
}
.side-tree-label:hover,
.side-tree-file:hover { background: var(--primary-pale); color: var(--primary); }

.side-tree-file.active {
  background: var(--primary-pale); color: var(--primary); font-weight: 600;
}

.side-tree-arrow {
  margin-left: auto; font-size: 11px; color: var(--text-light);
  transition: transform 0.2s;
}
.side-tree-toggle:checked ~ .side-tree-label { color: var(--primary); font-weight: 600; }
.side-tree-toggle:checked ~ .side-tree-label .side-tree-arrow { transform: rotate(180deg); color: var(--primary); }

.side-tree-children-wrapper {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-in-out;
}
.side-tree-toggle:checked ~ .side-tree-children-wrapper { grid-template-rows: 1fr; }
.side-tree-children-wrapper > .side-tree-children { overflow: hidden; }

/* Titik penanda file/submenu (pengganti visual .sub-dot lama) */
.side-tree-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary-light); flex-shrink: 0; transition: background 0.15s;
}
.side-tree-file.active .side-tree-dot { background: var(--primary); }

.nav-spacer { flex: 1; }

.logout {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-light);
  font-size: 14px; font-weight: 500; transition: all 0.2s;
  border-top: 1px solid var(--border-soft); padding-top: 18px; margin-top: 8px;
}
.logout:hover { color: var(--primary); }

/* =============================================
   RIGHT PANEL (calendar sidebar)
   ============================================= */
.right-panel { display: flex; flex-direction: column; gap: 14px; height: auto; }
.right-card  {
  background: var(--card-bg); border-radius: var(--radius);
  padding: 16px; box-shadow: 0 4px 24px rgba(26,86,219,0.08);
  height: auto;
}
.right-card--flush { margin: 0; }

/* Ringkasan (mis. Manajemen Pertemuan) — grid kartu angka & grid 2-kolom
   statistik, dulu ditulis inline di beberapa halaman. */
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stats-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.detail-grid-alt { display: grid; grid-template-columns: 2.4fr 1fr; gap: 16px; align-items: start; }
.header-actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }

.stat-row { margin-bottom: 10px; }
.stat-row-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
.stat-track { background: var(--primary-pale); border-radius: 6px; height: 8px; overflow: hidden; }
.stat-fill { background: var(--primary); height: 100%; }
.stat-fill.i-good { background: var(--good-text); }

/* Log aktivitas ringkas (mis. panel kanan Manajemen Pertemuan) — dulu
   markup+style-nya disalin-tempel identik 3 kali dalam satu file. */
.log-entry { display: block; text-decoration: none; color: inherit; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.log-entry.is-muted { opacity: .6; }
.log-entry-title { font-size: 12.5px; font-weight: 600; color: var(--text-dark); }
.log-entry-subtitle { font-size: 12px; color: var(--text-mid); margin-top: 1px; }
.log-entry-meta { font-size: 11px; color: var(--text-light); margin-top: 2px; }
.log-entry-more { display: block; text-align: center; font-size: 12px; color: var(--primary); text-decoration: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }

.bulk-bar {
  display: none; align-items: center; gap: 10px;
  background: var(--primary-pale); border: 1px solid var(--primary-light); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 10px; font-size: 13px; color: var(--text-dark);
}

/* Popup detail agenda (Jadwal Saya) — dulu ~30 style attr inline dalam
   satu komponen; sekarang lewat 'x-show' Alpine (bukan lagi ':style'
   ternary manual) + class di bawah. */
.event-popup-overlay {
  display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 9999; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
}
.event-popup-box {
  background: var(--card-bg); border-radius: 20px; width: 100%; max-width: 480px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18); overflow: hidden; margin: 16px;
}
.event-popup-header { background: var(--primary); padding: 20px 24px 16px; position: relative; }
.event-popup-close {
  position: absolute; top: 14px; right: 16px; background: rgba(255,255,255,0.2);
  border: none; color: #fff; border-radius: 50%; width: 28px; height: 28px;
  cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.event-popup-kind { font-size: 11px; color: rgba(255,255,255,0.75); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.event-popup-title { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.3; padding-right: 32px; }
.event-popup-meta-row { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.event-popup-meta-item { font-size: 12px; color: rgba(255,255,255,0.85); }
.event-popup-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; max-height: 60vh; overflow-y: auto; }
.event-popup-field { display: flex; align-items: flex-start; gap: 10px; }
.event-popup-field-icon { font-size: 20px; flex-shrink: 0; }
.event-popup-field-label { font-size: 11px; color: var(--text-light); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.event-popup-field-value { font-size: 13px; color: var(--text-dark); font-weight: 500; }
.event-popup-pemohon { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.event-popup-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.event-popup-field-value--strong { font-weight: 600; }
.event-popup-field-value--desc { font-weight: 400; line-height: 1.55; }
.event-popup-field-sub { font-size: 11px; color: var(--text-light); }
.event-popup-note { background: var(--primary-pale); border-radius: 10px; padding: 10px 14px; border-left: 3px solid var(--primary); }
.event-popup-note-label { font-size: 11px; color: var(--primary); font-weight: 700; margin-bottom: 4px; }
.event-popup-note-body { font-size: 12px; color: var(--text-dark); line-height: 1.5; }
.event-popup-footer { padding: 12px 24px 20px; display: flex; justify-content: flex-end; gap: 8px; }
.event-popup-cancel-btn {
  padding: 8px 20px; border-radius: 9px; border: 1.5px solid var(--border);
  background: var(--card-bg); color: var(--text-mid); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.event-popup-cancel-btn:hover { background: var(--primary-pale); }

/* Toggle BULAN / TAHUN */
.toggle-row {
  display: flex; background: var(--primary-pale); border-radius: 30px; padding: 4px; gap: 2px;
}
.toggle-btn {
  flex: 1; padding: 8px 0; border: none; border-radius: 26px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.2s; font-family: 'DM Sans', sans-serif;
}
.toggle-btn.active        { background: var(--primary); color: #fff; }
.toggle-btn:not(.active)  { background: transparent; color: var(--text-light); }

/* Mini calendar */
.cal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin: 16px 0 12px;
}
.cal-title { font-size: 18px; font-weight: 700; color: var(--text-dark); font-family: 'Playfair Display', serif; }
.cal-title span { color: var(--text-mid); font-weight: 400; font-size: 16px; font-family: 'DM Sans', sans-serif; margin-left: 4px; }

.cal-nav { display: flex; gap: 6px; }
.cal-nav-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--border-mid); background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--text-mid); transition: all 0.15s;
}
.cal-nav-btn:hover { border-color: var(--primary); color: var(--primary); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.cal-day-label {
  text-align: center; font-size: 11px; font-weight: 600;
  color: var(--text-light); padding: 4px 0 8px;
}
.cal-day {
  text-align: center; font-size: 13px; padding: 7px 4px;
  border-radius: 50%; cursor: pointer; color: var(--text-mid);
  transition: all 0.15s; line-height: 1; font-weight: 400; position: relative;
}
.cal-day:hover:not(.today):not(.other-month) { background: var(--primary-light); color: var(--primary); }
.cal-day.today       { background: var(--primary); color: #fff; font-weight: 700; border-radius: 50%; }
.cal-day.other-month { color: #c5d4ec; }

/* Calendar dot indicator */
.cal-dot {
  position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
}

/* CTA button */
.cta-btn {
  width: 100%; padding: 16px;
  border: 2px solid var(--primary); background: transparent;
  border-radius: 14px; color: var(--primary);
  font-size: 15px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'DM Sans', sans-serif; transition: all 0.2s; text-decoration: none;
}
.cta-btn:hover { background: var(--primary); color: #fff; }

/* Varian kecil untuk cta-btn, dipakai inline di header (bukan full-width) */
.cta-btn-sm {
  width: auto; padding: 10px 22px; font-size: 13px;
  flex-shrink: 0; white-space: nowrap;
}

/* Dipakai saat halaman tidak menampilkan right-panel, agar main melebar
   mengisi ruang kolom kanan (grid .app: sidebar / main / right-panel) */
.main-full { grid-column: 2 / -1; }

/* See all link */
.see-all { display: flex; justify-content: flex-end; margin-top: 12px; }
.see-all a {
  font-size: 13px; color: var(--primary); font-weight: 600;
  text-decoration: none; cursor: pointer;
  display: flex; align-items: center; gap: 4px; transition: gap 0.2s;
}
.see-all a:hover { gap: 8px; }

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   BADGES / PILLS
   ============================================= */
.badge {
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}
.badge--lg { font-size: 13px; padding: 5px 14px; }
.event-tag {
  font-size: 10px; font-weight: 600; padding: 2px 8px; white-space: nowrap;
  border-radius: 20px; background: rgba(255,255,255,0.25); color: #fff;
}
.badge-rektor  { background: var(--primary-pale); color: var(--primary); }
.badge-wakil1  { background: var(--role1-bg); color: var(--role1-text); }
.badge-wakil2  { background: var(--role2-bg); color: var(--role2-text); }
.badge-kepala  { background: var(--accent-light); color: var(--warn-text); }

/* Status pills */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill-menunggu   { background: var(--accent-light); color: var(--warn-text); }
.pill-disetujui  { background: var(--good-bg); color: var(--good-text); }
.pill-ditolak    { background: var(--bad-bg); color: var(--bad); }
.pill-reschedule { background: var(--info-bg); color: var(--info-text); }
.pill-mendatang   { background: var(--accent-light); color: var(--warn-text); }
.pill-berlangsung { background: var(--good-bg); color: var(--good-text); }
.pill-lampau      { background: var(--muted-bg); color: var(--text-light); }

/* Status badge */
.status-badge {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px;
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.status-badge.reschedule { background: var(--primary-pale); color: var(--primary); border: 1px solid var(--primary-light); }
.status-badge.ditolak    { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-border); }
.status-badge.pending    { background: var(--accent-light); color: var(--warn-text); border: 1px solid var(--warn-border); }

/* =============================================
   MINI SELECT
   ============================================= */
.mini-select {
  border: 1.5px solid var(--border-mid); border-radius: 8px; padding: 5px 28px 5px 10px;
  font-size: 12px; font-family: 'DM Sans', sans-serif; color: var(--text-mid);
  background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238aa0bf' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center;
  appearance: none; outline: none; cursor: pointer;
}
/* FIX (audit aksesibilitas): sebelumnya TIDAK PUNYA gaya fokus sama
   sekali (outline dihapus, tidak ada pengganti) — pengguna keyboard
   tidak bisa melihat kapan elemen ini sedang fokus. */
.mini-select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* =============================================
   PAGINATION
   ============================================= */
.pagination {
  display: flex; align-items: center; justify-content: space-between; margin-top: 8px;
}
/* Varian rata-tengah, dipakai di halaman yang paginationnya cuma berisi
   tombol saja (tanpa teks info di kiri seperti "Menampilkan 1-3 dari 12") */
.pagination.center { justify-content: center; gap: 6px; }
/* Varian dengan garis pemisah di atas — dulu ditulis ulang inline persis
   sama di 9 file berbeda (bawah daftar Riwayat/Notifikasi/Status/Log). */
.pagination.pagination-divider { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border-soft); padding-bottom: 8px; }
.pagination.pagination-divider--tight { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.pag-info { font-size: 12px; color: var(--text-light); }
.pag-btns { display: flex; gap: 4px; }
.pag-btn {
  width: 30px; height: 30px; border-radius: 7px;
  border: 1.5px solid var(--border-mid); background: var(--card-bg);
  font-size: 12px; font-weight: 500; color: var(--text-mid);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-family: 'DM Sans', sans-serif; transition: all 0.15s;
}
.pag-btn:hover  { border-color: var(--primary); color: var(--primary); }
.pag-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pag-btn.nav    { width: auto; padding: 0 8px; }
.pag-btn.nav.is-disabled { pointer-events: none; opacity: .4; }
.pag-btn--ellipsis { cursor: default; }
.table-empty-note { padding: 40px 0; text-align: center; color: var(--text-light); font-size: 13px; }
.icon-inline-gap { margin-right: 4px; }
.aksi-detail-btn--gap { margin-left: 4px; }

.page-btn {
  min-width: 36px; height: 36px; border-radius: 8px;
  border: 1.5px solid var(--border-mid); background: var(--card-bg);
  font-size: 13px; font-weight: 500; color: var(--text-mid);
  cursor: pointer; font-family: 'DM Sans', sans-serif;
  display: flex; align-items: center; justify-content: center;
  padding: 0 12px; gap: 4px; transition: all 0.15s;
}
.page-btn:hover  { border-color: var(--primary); color: var(--primary); }
.page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.page-btn.nav    { color: var(--text-light); }
.page-btn:disabled { opacity: .5; cursor: not-allowed; }
.page-btn:disabled:hover { border-color: var(--border-mid); }
/* Pemisah "···" untuk rentang halaman yang dilompati — bukan tombol asli */
.page-btn.page-dots { border: none; background: none; cursor: default; letter-spacing: 2px; opacity: 1; }

/* =============================================
   DASHBOARD
   ============================================= */
.main {
  background: var(--card-bg); border-radius: var(--radius);
  padding: 28px 28px 0 28px;
  display: flex; flex-direction: column;
  overflow: hidden; box-shadow: 0 4px 24px rgba(26,86,219,0.08);
}
.main-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; }
.main-header--split { justify-content: space-between; }
.main-header-title-group { display: flex; align-items: baseline; gap: 12px; }
.main-header-subdate { font-size: 13px; color: var(--text-light); }
.main-header .label {
  font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700;
  color: var(--text-dark); letter-spacing: -0.5px;
}
.main-header .date { font-size: 20px; font-weight: 600; color: var(--primary); font-family: 'Playfair Display', serif; }

/* Timeline */
.timeline { flex: 1; overflow-y: auto; padding-right: 4px; position: relative; }
.timeline--empty { display: flex; align-items: center; justify-content: center; }
.timeline::-webkit-scrollbar { width: 4px; }
.timeline::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 4px; }

.time-slot { display: flex; align-items: flex-start; gap: 16px; min-height: 70px; position: relative; }
.time-label { width: 56px; font-size: 12px; color: var(--text-light); padding-top: 2px; flex-shrink: 0; text-align: right; font-weight: 500; }
.time-line  { flex: 1; position: relative; }
.time-divider { height: 1px; background: var(--border-soft); margin-top: 8px; }
.events-row { display: flex; gap: 10px; padding: 6px 0; }

/* Event cards */
.event {
  background: var(--event-bg); border-radius: 14px; padding: 14px 16px;
  color: #fff; flex: 1; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s; position: relative;
  min-height: 70px; display: flex; flex-direction: column; justify-content: space-between;
  animation: fadeUp 0.4s ease both;
}
.event:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,86,219,0.3); }
.event:nth-child(2) { flex: 0.7; background: var(--event-bg2); }
.event-top    { display: flex; align-items: flex-start; justify-content: space-between; }
.event-title  { font-size: 14px; font-weight: 600; line-height: 1.3; }
.event-dots   { display: flex; gap: 3px; align-items: center; margin-top: 2px; }
.event-dot    { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.7); }
.event-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.event-time   { font-size: 12px; opacity: 0.85; font-weight: 400; }
.event-guests { font-size: 12px; opacity: 0.85; display: flex; align-items: center; gap: 4px; }

/* Current time indicator */
.current-time { display: flex; align-items: center; gap: 0; padding: 4px 0; position: relative; }
.current-time-pill { background: var(--primary); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; white-space: nowrap; z-index: 2; }
.current-time-line { flex: 1; height: 1.5px; background: var(--primary); opacity: 0.4; position: relative; }
.current-time-dot  { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

.main-content {
  background: var(--card-bg); border-radius: var(--radius);
  padding: 24px 22px 20px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 4px 24px rgba(26,86,219,0.08); overflow-y: visible;
}
.top-bar  { display: flex; align-items: flex-start; justify-content: space-between; }
.greeting h1 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--text-dark); }
.greeting p  { font-size: 12px; color: var(--text-light); margin-top: 3px; }
.top-right   { display: flex; align-items: center; gap: 16px; }

.notif-btn {
  position: relative; width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--border-mid); background: var(--card-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; transition: all 0.2s;
}
.notif-btn:hover { border-color: var(--primary); }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--primary); color: #fff; font-size: 9px; font-weight: 700;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid #fff;
}
.date-time .dt-date { font-size: 13px; font-weight: 600; color: var(--text-dark); text-align: right; }
.date-time .dt-time { font-size: 12px; color: var(--text-light); text-align: right; margin-top: 1px; }

/* Stat cards */
.stat-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.stat-card {
  background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; gap: 6px;
  animation: fadeUp 0.4s ease both; transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s;
  /* Kartu ini sekarang <a> (bisa diklik ke halaman terkait), bukan lagi <div> polos --
     reset gaya bawaan tautan supaya tampilannya tetap sama seperti kartu biasa. */
  text-decoration: none; color: inherit; cursor: pointer;
}
.stat-card:hover  { box-shadow: 0 4px 16px rgba(26,86,219,0.1); border-color: var(--primary-light); }
.stat-card:active { transform: scale(0.98); }
.stat-icon-wrap { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 4px; }
.si-red    { background: var(--primary-pale); }
.si-orange { background: var(--accent-light); }
.si-green  { background: var(--good-bg); }
.si-pink   { background: var(--primary-light); }
.stat-num   { font-size: 26px; font-weight: 700; color: var(--text-dark); font-family: 'Playfair Display', serif; line-height: 1; }
.stat-label { font-size: 11px; color: var(--text-light); }
.stat-link  { font-size: 11px; color: var(--primary); font-weight: 600; cursor: pointer; margin-top: 4px; }
.stat-link:hover { text-decoration: underline; }

/* 2 kolom di desktop (Agenda Hari Ini | Grafik Aktivitas, dan Ringkasan
   Approval | Agenda per Pimpinan) — balik ke 1 kolom di breakpoint mobile
   ≤900px (lihat bagian RESPONSIVE di bawah). minmax(0,1fr) (bukan cuma 1fr)
   supaya isi panel yang lebar (mis. bar chart) boleh menyusut, tidak
   mendorong grid melebar sampai overflow. */
.section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.panel { background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 14px; padding: 18px 20px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel-title  { font-size: 14px; font-weight: 700; color: var(--text-dark); }
.panel-link   { font-size: 12px; color: var(--primary); font-weight: 600; cursor: pointer; }
.panel-link:hover { text-decoration: underline; }

.agenda-item   { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.agenda-item:last-child { border-bottom: none; }
.agenda-time   { font-size: 12px; font-weight: 700; color: var(--primary); min-width: 56px; line-height: 1.4; flex-shrink: 0; }
.agenda-info   { flex: 1; min-width: 0; }
.agenda-title  { font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 2px; }
.agenda-loc    { font-size: 11px; color: var(--text-light); margin-bottom: 2px; }
.agenda-guests { font-size: 11px; color: var(--text-light); }

/* Grup per-pimpinan di dalam panel "Agenda Hari Ini" — tetap satu .panel
   yang sama, cuma isinya dipecah jadi beberapa "card" kecil per pimpinan.
   Selalu 4 sel dalam urutan hierarki tetap (Rektor, WR I, WR II, Kepala
   Biro — lihat DashboardController), disusun grid 2 kolom: Rektor
   bersebelahan WR I, WR II bersebelahan Kepala Biro. Kalau salah satu
   pimpinan tidak ada agenda, sel-nya tetap ada (lihat .agenda-pimpinan-empty)
   supaya susunan 2 kolomnya tidak berubah tergantung ada/tidaknya data. */
.agenda-pimpinan-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.agenda-pimpinan-group {
  background: var(--primary-pale);
  border-radius: 12px;
  padding: 12px 14px 2px;
}
.agenda-pimpinan-empty { font-size: 12px; color: var(--text-light); text-align: center; padding: 10px 0 14px; }
.agenda-pimpinan-group-title {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 4px; flex-wrap: wrap;
}
/* FIX: '.badge' dasarnya white-space:nowrap (cocok untuk label pendek
   seperti "Disetujui"/"Menunggu"), tapi di sini label-nya nama pimpinan
   yang bisa panjang ("Wakil Rektor Bidang Akademik dan Kemahasiswaan").
   Di kartu sempit (mis. mobile 1 kolom), badge nowrap itu tidak muat di
   baris judul kartu dan meluber keluar — sebelumnya nyaris bikin seluruh
   grid ikut melebar (lihat FIX 'minmax(0, 1fr)' di atas), sekarang
   overflow-nya sudah terisolasi ke badge itu sendiri, tapi tetap perlu
   izin membungkus ke baris ke-2 supaya tidak lagi meluber sama sekali.
   HANYA badge di konteks ini yang diubah (bukan '.badge' global) supaya
   pemakaian '.badge' lain di halaman lain (status pendek) tidak ikut
   berubah. */
.agenda-pimpinan-group-title .badge {
  white-space: normal;
  text-align: center;
}
.agenda-pimpinan-group-count { font-size: 11px; color: var(--text-light); font-weight: 600; flex-shrink: 0; }
.agenda-pimpinan-group .agenda-item { border-bottom-color: #d7e3fb; }

.donut-wrap  { display: flex; align-items: center; gap: 20px; max-width: 460px; flex-wrap: wrap; justify-content: center; }
/* Panel donut bisa jadi cukup sempit (kolom 2-kolom .section-grid di
   tablet, atau panel apa pun di HP kecil) — arc & legenda perlu transisi
   halus saat kartunya "digambar" pertama kali & saat <select> periode
   diganti (lihat playEntrance() & activitySelect di dashboard/main.blade.php). */
.donut-arc { transition: stroke-dasharray 0.8s cubic-bezier(0.22,1,0.36,1), stroke-dashoffset 0.5s ease; }
.legend-list { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 160px; }
.legend-row  { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-mid); }
.legend-left { display: flex; align-items: center; gap: 6px; }
.legend-dot2 { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.legend-val  { font-weight: 600; color: var(--text-dark); font-size: 12px; }
.legend-pct  { color: var(--text-light); font-size: 11px; }

.avg-box   { background: var(--primary-pale); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.avg-icon  { font-size: 20px; }
.avg-label { font-size: 11px; color: var(--text-light); }
.avg-num   { font-size: 20px; font-weight: 700; color: var(--text-dark); font-family: 'Playfair Display', serif; line-height: 1; }
.avg-trend { font-size: 11px; color: var(--good-text); font-weight: 600; margin-top: 2px; }

.approval-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.approval-item {
  background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 12px; padding: 14px 12px; text-align: center;
  display: block; text-decoration: none; color: inherit; cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s;
}
.approval-item:hover  { box-shadow: 0 4px 16px rgba(26,86,219,0.1); border-color: var(--primary-light); }
.approval-item:active { transform: scale(0.98); }
.appr-icon  { font-size: 22px; margin-bottom: 6px; }
.appr-num   { font-size: 22px; font-weight: 700; color: var(--text-dark); font-family: 'Playfair Display', serif; line-height: 1; }
.appr-label { font-size: 11px; color: var(--text-light); margin: 2px 0 6px; }
.appr-link  { font-size: 11px; color: var(--primary); font-weight: 600; cursor: pointer; }
.appr-link:hover { text-decoration: underline; }

.bar-item  { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bar-item:last-child { margin-bottom: 0; }
.bar-name  { font-size: 12px; color: var(--text-mid); min-width: 90px; }
.bar-track { flex: 1; background: var(--border-soft); border-radius: 20px; height: 8px; overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 20px; transition: width 0.8s cubic-bezier(0.22,1,0.36,1); }
.bar-num   { font-size: 12px; font-weight: 700; color: var(--text-dark); min-width: 20px; text-align: right; }

.upcoming-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.upcoming-day   {
  background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 12px; padding: 14px;
  display: block; text-decoration: none; color: inherit; cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s;
}
.upcoming-day:hover  { box-shadow: 0 4px 16px rgba(26,86,219,0.1); border-color: var(--primary-light); }
.upcoming-day:active { transform: scale(0.98); }
/* Tanggal yang sama dengan yang sedang ditampilkan di panel "Agenda" &
   kalender kanan (user baru saja klik kartu ini, atau sedang menavigasi
   lewat kalender ke salah satu dari 3 hari ini) */
.upcoming-day.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(26,86,219,0.15); }
.upcoming-day.is-empty  { opacity: 0.65; }
.upcoming-date  { font-size: 12px; font-weight: 600; color: var(--text-mid); margin-bottom: 10px; }
.upcoming-body  { display: flex; align-items: center; gap: 10px; }
.upcoming-count { font-size: 20px; font-weight: 700; color: var(--text-dark); font-family: 'Playfair Display', serif; line-height: 1; }
.upcoming-icon { font-size: 20px; }
.upcoming-count-unit { font-size: 11px; font-weight: 400; color: var(--text-light); font-family: 'DM Sans', sans-serif; }
.panel-title-sub { font-size: 12px; color: var(--text-light); font-weight: 400; margin-left: 6px; }
.dashboard-alert-banner {
  background: var(--accent-light); border: 1px solid var(--warn-border); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 14px; font-size: 12.5px; color: var(--warn-text);
}

/* Panel "Pengingat" di right-panel dashboard */
.right-card-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.right-card-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.right-card-section-title { font-size: 13px; font-weight: 700; color: var(--text-dark); }
.reminder-card { display: flex; gap: 10px; padding: 10px; border-radius: 10px; align-items: flex-start; background: var(--muted-bg); }
.reminder-card--first { background: var(--primary-pale); margin-bottom: 8px; }
.reminder-icon { font-size: 18px; flex-shrink: 0; }
.reminder-body { flex: 1; min-width: 0; }
.reminder-title { font-size: 12px; font-weight: 600; color: var(--text-dark); }
.reminder-time { font-size: 11px; color: var(--text-light); margin-top: 1px; }
.reminder-relative { font-size: 10px; font-weight: 700; color: var(--primary); white-space: nowrap; margin-top: 2px; flex-shrink: 0; }
.reminder-empty { font-size: 12px; color: var(--text-light); padding: 6px 0; }

/* =============================================
   STATUS PAGES
   ============================================= */
.status-main {
  background: var(--card-bg); border-radius: var(--radius);
  padding: 28px; display: flex; flex-direction: column;
  overflow: hidden; box-shadow: 0 4px 24px rgba(26,86,219,0.08);
}
.status-header { margin-bottom: 20px; }
.status-header h1 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--text-dark); }
.status-header p  { font-size: 13px; color: var(--text-light); margin-top: 2px; }

.status-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab-btn {
  padding: 8px 18px; font-size: 13px; font-weight: 500; color: var(--text-light);
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.2s; white-space: nowrap;
  text-decoration: none; display: inline-flex; align-items: center;
}
.tab-btn:hover  { color: var(--primary); }
.tab-btn.active { color: var(--primary); font-weight: 700; border-bottom: 2px solid var(--primary); }

.schedule-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0; }
.schedule-list::-webkit-scrollbar { width: 4px; }
.schedule-list::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 4px; }

.schedule-item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--border-soft);
  animation: fadeUp 0.35s ease both;
}
.schedule-item:last-child { border-bottom: none; }

.sched-date     { text-align: center; min-width: 52px; flex-shrink: 0; }
.sched-day-name { font-size: 11px; color: var(--text-light); font-weight: 500; text-transform: capitalize; }
.sched-day-num  { font-size: 28px; font-weight: 700; color: var(--text-dark); font-family: 'Playfair Display', serif; line-height: 1.1; }
.sched-month    { font-size: 11px; color: var(--text-light); }

.sched-content  { flex: 1; min-width: 0; }
.sched-time     { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-light); margin-bottom: 4px; }
.sched-title    { font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-location { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-light); margin-bottom: 6px; }
.sched-location--mt { margin-top: 6px; }
.notif-card-btn {
  width: 100%; text-align: left; border: none; cursor: pointer;
  padding: 16px 12px; border-radius: 12px; background: none;
}
.notif-card-btn--unread { background: var(--primary-pale); }
.field-sub-note { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.notice-box--mb20 { margin-bottom: 20px; }
.availability-hint { font-size: 12px; margin-bottom: 12px; }
.text-light-inline { color: var(--text-light); }
.notice-box--mb16 { margin-bottom: 16px; }
.summary-box--mt16 { margin-top: 16px; }
.libur-hint { font-size: 12px; color: var(--bad-text); margin-top: 6px; }
.header-row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sched-guests   { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-light); }

.sched-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }

.reschedule-info  { margin-top: 6px; font-size: 12px; color: var(--text-mid); background: var(--primary-pale); border-radius: 8px; padding: 6px 10px; line-height: 1.5; }
.reschedule-info strong { color: var(--text-dark); }
.reject-reason    { margin-top: 6px; font-size: 12px; color: var(--text-mid); background: var(--bad-bg); border-radius: 8px; padding: 6px 10px; }
.pending-note     { margin-top: 6px; font-size: 12px; color: var(--warn-text); background: var(--accent-light); border-radius: 8px; padding: 6px 10px; }

/* ---------------------------------------------
   Status — header + toolbar (pencarian & urutkan)
   Dipakai di status/pending.blade.php. Semua elemen di sini boleh melipat
   (flex-wrap) supaya tetap rapi dari layar HP kecil sampai monitor lebar.
   --------------------------------------------- */
.status-header-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.export-btn-row { display: flex; gap: 8px; flex-shrink: 0; }
.notulensi-panel { margin-top: 12px; }
.notulensi-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.btn-simpan--sm { padding: 8px 20px; font-size: 13px; }
.form-textarea--readonly {
  min-height: 60px; background: var(--primary-pale, #f5f7fb); color: var(--text-mid);
  cursor: default; white-space: pre-wrap;
}
.riwayat-empty {
  display: flex; flex: 1; align-items: center; justify-content: center;
  flex-direction: column; color: var(--text-light); text-align: center; padding: 60px 0;
}
.riwayat-empty-state {
  flex: 1; align-items: center; justify-content: center;
  flex-direction: column; color: var(--text-light); text-align: center;
}
.status-count-chip {
  flex-shrink: 0; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--warn-text); background: var(--accent-light); border: 1px solid var(--warn-border);
  padding: 5px 12px; border-radius: 20px;
}

.status-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.status-search {
  flex: 1 1 240px; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--border-mid); border-radius: 10px; background: var(--card-bg);
  padding: 0 10px; transition: border-color .15s, box-shadow .15s;
}
.status-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,86,219,.12); }
.status-search-icon { font-size: 13px; color: var(--text-light); line-height: 1; }
.status-search-input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text-dark);
  padding: 10px 0;
}
/* Tombol "x" bawaan browser disembunyikan — diganti tombol sendiri supaya
   tampil sama di semua browser dan cukup besar untuk disentuh di HP. */
.status-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.status-search-clear {
  border: none; background: none; cursor: pointer; color: var(--text-light);
  font-size: 18px; line-height: 1; padding: 4px 6px; border-radius: 6px;
  transition: color .15s, background .15s;
}
.status-search-clear:hover { color: var(--bad); background: var(--bad-bg); }
.status-sort { flex: 0 0 auto; padding-top: 9px; padding-bottom: 9px; }

/* ---------------------------------------------
   Status — kartu jadwal yang bisa dibuka/tutup
   --------------------------------------------- */
.sched-card {
  cursor: pointer; border-radius: 12px;
  padding-left: 12px; padding-right: 12px;
  transition: background .15s, box-shadow .15s, transform .12s;
}
.sched-card:hover { background: var(--primary-pale); }
.sched-card:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.sched-card:active { transform: scale(.995); }
.sched-card.is-open { background: var(--primary-pale); box-shadow: inset 3px 0 0 var(--primary); }
/* Judul dipotong elipsis saat kartu tertutup; ditampilkan utuh saat dibuka. */
.sched-card.is-open .sched-title { white-space: normal; }

.sched-chevron {
  margin-top: auto; font-size: 20px; line-height: 1; color: var(--text-light);
  transition: transform .2s, color .15s;
}
.sched-card.is-open .sched-chevron { transform: rotate(90deg); color: var(--primary); }

.sched-detail {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed #cfe0fb;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px;
  animation: fadeUp .25s ease both;
}
.sched-detail[hidden] { display: none; }
.sched-detail .sd-item.full { grid-column: 1 / -1; }
.sd-label { font-size: 10.5px; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.sd-value { font-size: 12.5px; color: var(--text-dark); line-height: 1.5; overflow-wrap: anywhere; }

/* ---------------------------------------------
   Status — pemberitahuan "tidak ada data"
   display diatur JS (none/flex), styling-nya di sini.
   --------------------------------------------- */
.status-empty {
  display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--text-light); padding: 32px 12px;
}
.status-empty-icon  { font-size: 48px; margin-bottom: 16px; }
.status-empty-title { font-size: 15px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; }
.status-empty-text  { font-size: 13px; overflow-wrap: anywhere; }
.status-empty-reset {
  margin-top: 14px; cursor: pointer;
  border: 1.5px solid var(--border-mid); background: var(--card-bg); border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text-mid);
  padding: 9px 16px; transition: border-color .15s, color .15s;
}
.status-empty-reset:hover { border-color: var(--primary); color: var(--primary); }

/* =============================================
   APPROVAL MEETING
   ============================================= */
.am-main {
  background: var(--card-bg); border-radius: var(--radius);
  padding: 28px; display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 4px 24px rgba(26,86,219,0.08); overflow-y: auto;
}
/* Baris header (judul + tombol aksi) — dulu ditulis ulang inline persis
   sama (cuma beda gap kecil 12–16px) di 8 halaman manajemen berbeda. */
.am-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 14px; }
.am-header h1 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--text-dark); }
.am-header p  { font-size: 12px; color: var(--text-light); margin-top: 3px; }

.am-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.am-tab {
  padding: 7px 16px; border-radius: 20px; font-size: 13px; font-weight: 500;
  border: 1.5px solid transparent; cursor: pointer; font-family: 'DM Sans', sans-serif;
  color: var(--text-mid); background: transparent; transition: all 0.15s;
  text-decoration: none; display: inline-flex; align-items: center;
}
.am-tab:hover { color: var(--primary); }
.am-tab.active         { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.am-tab.active-green   { background: var(--good-bg); color: var(--good-text); border-color: var(--good-border); font-weight: 600; }
.am-tab.active-red     { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-border); font-weight: 600; }
.am-tab.active-purple  { background: var(--info-bg); color: var(--info-text); border-color: var(--info-border); font-weight: 600; }
.am-tab.active-orange  { background: var(--accent-light); color: var(--warn-text); border-color: var(--warn-border); font-weight: 600; }

/* =============================================
   TAB SWITCHER "CONNECTED TAB" — dipakai di Penjadwalan,
   Status, dan Verifikasi (Approval)
   Adaptasi visual dari komponen Uiverse.io by german_7619 — "connected
   tab" dengan sudut melengkung yang menyatu ke konten di bawahnya.
   Warna asli hijau (#70c489) & abu-abu (var(--muted-border)) diganti var(--primary)
   & var(--card-bg) supaya tetap memakai palette ITK.
   Karena tab ini untuk BERPINDAH HALAMAN (bukan toggle konten di
   client seperti versi asli Uiverse yang pakai radio input), dipakai
   <a> biasa — status aktif tetap dikontrol lewat class 'active' dari
   Blade (server-rendered), jadi tidak perlu animasi @keyframes seperti
   aslinya. Nama class tetap 'pimpinan-tabs/.pimpinan-tab' (nama awal
   saat baru dipakai di halaman Penjadwalan), dipakai ulang apa adanya
   di status/*.blade.php (pengganti .status-tabs/.tab-btn) dan
   approval/_tabs.blade.php (pengganti .am-tabs/.am-tab) supaya
   tampilan tab switcher konsisten di ketiga area tsb.
   ============================================= */
.pimpinan-tabs {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 60px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: var(--primary);
  padding: 8px 20px 0 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity; /* swipe/scroll berhenti rapi pas di tiap tab */
  scrollbar-width: none; /* Firefox: sembunyikan scrollbar, tetap bisa discroll */

  /* FIX: elemen ber-overflow (selain 'visible') di dalam flex container
     kolom (mis. .buat-main) otomatis punya "minimum height" = 0 menurut
     spesifikasi flexbox — jadi kalau konten di bawahnya (form + pesan
     error validasi) melebihi tinggi container, browser akan menyusutkan
     tab bar ini sampai gepeng dulu, alih-alih men-scroll form-nya.
     flex-shrink:0 mengunci tinggi aslinya supaya yang di-scroll adalah
     konten form, bukan tab bar-nya. */
  flex-shrink: 0;
}
.pimpinan-tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari: sembunyikan scrollbar */
/* Modifier: rata kiri, dipakai khusus di halaman Status & Verifikasi
   (Penjadwalan tetap rata tengah / default, gap 60px). Gap dikecilkan
   jadi 6px di sini karena rata kiri butuh jarak lebih rapat. */
.pimpinan-tabs.align-left { justify-content: flex-start; gap: 6px; }

.pimpinan-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  scroll-snap-align: center;
}

/* Potongan sudut melengkung kiri/kanan tab aktif (efek "menyatu" ke konten) */
.pimpinan-tab .pt-pre,
.pimpinan-tab .pt-pos {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  background: var(--primary);
  bottom: 0;
  opacity: 0;
  z-index: 0;
}
.pimpinan-tab .pt-pre {
  right: -10px;
  border-bottom-left-radius: 300px;
  box-shadow: -3px 3px 0 3px var(--card-bg);
}
.pimpinan-tab .pt-pos {
  left: -10px;
  border-bottom-right-radius: 300px;
  box-shadow: 3px 3px 0 3px var(--card-bg);
}
.pimpinan-tab.active .pt-pre,
.pimpinan-tab.active .pt-pos { opacity: 1; }

.pimpinan-tab .pt-label {
  position: relative; z-index: 1;
  padding: 10px 18px;
  font-size: 13px; font-weight: 500;
  color: var(--primary-light);
  white-space: nowrap;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.pimpinan-tab:hover:not(.active) .pt-label { color: #fff; }

/* Dua versi teks label — TOGGLE lewat CSS, bukan lewat markup ganda yang
   ribet dikelola. Default (desktop/tablet): label lengkap tampil, versi
   singkat disembunyikan. Dibalik di media query ≤900px (breakpoint
   mobile yang sudah ada, lihat bagian RESPONSIVE di bawah). Kalau
   sebuah halaman tidak menyediakan .pt-label-short, elemen itu otomatis
   kosong/tidak ada dan label lengkap tetap dipakai sebagai fallback
   (tidak pernah kosong total). */
.pt-label-full  { display: inline; }
.pt-label-short { display: none; }

.pimpinan-tab.active {
  cursor: default;
}
.pimpinan-tab.active .pt-label {
  background: var(--card-bg);
  color: var(--text-dark);
  font-weight: 700;
}

/* Fokus keyboard (Tab key) — outline putih supaya tetap terlihat jelas
   di atas bar biru, ditempel ke dalam (offset negatif) supaya tidak
   kepotong oleh border-radius/overflow di sekitarnya */
.pimpinan-tab:focus-visible .pt-label {
  outline: 2px solid #fff;
  outline-offset: -3px;
  border-radius: 6px;
}

/* Versi padat, dipakai otomatis di halaman Buat Jadwal (.buat-main)
   supaya tetap konsisten dengan penyesuaian layout 1-layar di sana */
.buat-main .pimpinan-tabs { margin-top: 8px; }

.tab-spacer { flex: 1; }

.filter-btn {
  display: flex; align-items: center; gap: 6px; padding: 7px 14px;
  border: 1.5px solid var(--border-mid); border-radius: 8px; background: var(--card-bg);
  font-size: 13px; color: var(--text-mid); cursor: pointer;
  font-family: 'DM Sans', sans-serif; transition: all 0.15s;
}
.filter-btn:hover { border-color: var(--primary); color: var(--primary); }

.search-row   { display: flex; gap: 10px; align-items: center; }
.search-input {
  flex: 1; border: 1.5px solid var(--border-mid); border-radius: 10px;
  padding: 9px 14px 9px 36px; font-size: 13px; font-family: 'DM Sans', sans-serif;
  color: var(--text-dark); outline: none; transition: border-color 0.2s;
  background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238aa0bf' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 12px center;
}
.search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,86,219,.15); }

.am-table { width: 100%; border-collapse: collapse; }
.am-table--gap { margin-bottom: 28px; }
.am-table th {
  font-size: 11px; font-weight: 600; color: var(--text-light);
  text-align: left; padding: 8px 12px; border-bottom: 1.5px solid var(--border);
  background: var(--primary-pale); text-transform: uppercase; letter-spacing: 0.5px;
}
.am-table th:first-child { border-radius: 8px 0 0 0; }
.am-table th:last-child  { border-radius: 0 8px 0 0; }
.am-table td { padding: 13px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: top; font-size: 13px; color: var(--text-dark); }
.am-table tr:last-child td { border-bottom: none; }
.am-table tr:hover td     { background: var(--primary-pale); }
.am-table tr.row-clickable { cursor: pointer; }
.am-table tr.row-clickable:hover td { background: var(--primary-pale); }

.td-date .day-name { font-size: 11px; color: var(--text-light); }
.td-date .day-num  { font-size: 20px; font-weight: 700; color: var(--text-dark); font-family: 'Playfair Display', serif; line-height: 1.1; }
.td-date .month    { font-size: 11px; color: var(--text-light); }

.td-kegiatan { max-width: 100%; }
.td-kegiatan .keg-title { font-weight: 600; font-size: 13px; color: var(--text-dark); margin-bottom: 3px; }
.td-kegiatan .keg-org   { font-size: 11px; color: var(--text-light); margin-bottom: 2px; }
.td-kegiatan .keg-loc   { font-size: 11px; color: var(--text-light); }
.td-kegiatan .keg-time  { font-size: 11px; color: var(--text-light); margin-top: 2px; }

.action-dots { cursor: pointer; color: var(--text-light); font-size: 16px; letter-spacing: 2px; padding: 4px 6px; border-radius: 6px; transition: all 0.15s; }
.action-dots:hover { background: var(--border-soft); color: var(--text-dark); }

.reject-detail { background: var(--bad-bg); border-radius: 0 0 10px 10px; padding: 10px 14px; margin-top: 8px; font-size: 12px; }
.reject-detail .rd-label { color: var(--text-light); margin-bottom: 2px; }
.reject-detail .rd-value { color: var(--text-dark); font-weight: 500; }
.reject-detail .rd-meta  { color: var(--text-light); margin-top: 4px; font-size: 11px; display: flex; align-items: center; gap: 4px; }

.sched-suggest       { background: var(--info-bg); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.sched-suggest-label { font-size: 11px; color: var(--info-text); font-weight: 600; margin-bottom: 6px; }
.sched-slots { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sched-slot {
  padding: 5px 10px; border-radius: 8px; font-size: 11px; font-weight: 600;
  border: 1.5px solid var(--info-border); color: var(--info-text); background: var(--card-bg);
  cursor: pointer; transition: all 0.15s;
}
.sched-slot:hover,
.sched-slot.selected { background: var(--info-solid); color: #fff; border-color: var(--info-solid); }
.sched-slot.na { background: var(--muted-bg); color: #AAA; border-color: #E0E0E0; cursor: default; }
.btn-other {
  padding: 5px 12px; border-radius: 8px; font-size: 11px; font-weight: 600;
  border: 1.5px solid var(--primary); color: var(--primary); background: transparent;
  cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.15s;
}
.btn-other:hover { background: var(--primary); color: #fff; }

.summary-box       { background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 14px; padding: 18px; margin-top: 14px; }
.summary-box-title { font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 14px; }
.summary-box-title--tight { margin-bottom: 12px; }
.stat-row-label { color: var(--text-mid); }
.stat-row-count { font-weight: 700; color: var(--text-dark); }
.stat-row-detail { font-weight: 400; color: var(--text-light); }
.col-checkbox { width: 32px; }
.aksi-btn-row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.log-trashed-tag { color: var(--bad); }
.log-empty-text { font-size: 12px; color: var(--text-light); }
.log-time-cell { white-space: nowrap; font-size: 12.5px; color: var(--text-mid); }
.log-deleted-text { opacity: 0.6; }
.log-note-cell {
  font-size: 12.5px; color: var(--text-mid); max-width: 280px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jabatan-sub-text { font-size: 11.5px; color: var(--text-light); margin-top: 2px; }
.aksi-detail-btn--mr { margin-right: 6px; }
.text-muted-note { font-size: 12px; color: var(--text-light); }
.gap-top-sm { margin-top: 10px; }
.filter-bar--mb16 { margin-bottom: 16px; }
.sched-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.deleted-by-cell { font-size: 12.5px; }
.deleted-at-cell { font-size: 11px; color: var(--text-light); }
.reschedule-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.btn--sm { padding: 7px 16px; font-size: 12px; }
.btn--sm-link { padding: 7px 16px; font-size: 12px; display: inline-flex; align-items: center; text-decoration: none; }
.sum-row  { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sum-row:last-child { margin-bottom: 0; }
.sum-icon { font-size: 22px; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sum-num  { font-size: 20px; font-weight: 700; color: var(--text-dark); font-family: 'Playfair Display', serif; line-height: 1; }
.sum-num--lg { font-size: 22px; }
.sum-num--lg.i-warn { color: var(--warn-text); }
.sum-num--lg.i-good { color: var(--good-text); }
.sum-num--lg.i-bad  { color: var(--bad); }
.sum-num--lg.i-info { color: var(--info-text); }
.sum-label { font-size: 11px; color: var(--text-light); margin-top: 1px; }

.report-link { display: block; text-align: right; font-size: 12px; color: var(--primary); font-weight: 600; cursor: pointer; margin-top: 14px; }
.report-link:hover { text-decoration: underline; }

.reason-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 12px; color: var(--text-mid); }
.reason-bar     { flex: 1; background: var(--border-soft); border-radius: 20px; height: 6px; overflow: hidden; }
.reason-fill    { height: 100%; border-radius: 20px; background: #E84040; }
.reason-num     { font-size: 12px; font-weight: 700; color: var(--text-dark); min-width: 16px; text-align: right; }

/* =============================================
   RIWAYAT KEGIATAN
   ============================================= */
.filter-bar { display: flex; gap: 12px; margin-bottom: 24px; align-items: center; flex-wrap: wrap; }
.filter-bar--tight { gap: 10px; }
.filter-select,
.filter-date,
.filter-search {
  border: 1.5px solid var(--border-mid); border-radius: 10px; padding: 9px 14px;
  font-size: 13px; font-family: 'DM Sans', sans-serif; color: var(--text-mid);
  background: var(--card-bg); outline: none; transition: border-color 0.2s;
}
.filter-select {
  appearance: none; padding-right: 32px; min-width: 160px;
  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' stroke='%238aa0bf' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.filter-date   { min-width: 200px; }
.filter-date-range { display: flex; align-items: center; gap: 6px; }
.filter-date-range .filter-date { min-width: 132px; }
.filter-date-sep { color: var(--text-light); font-size: 13px; }
.filter-search {
  flex: 1; min-width: 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238aa0bf' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.filter-select:focus,
.filter-date:focus,
.filter-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,86,219,.15); }
.filter-search--wide { min-width: 200px; }

.history-card {
  background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 14px;
  padding: 20px 24px; margin-bottom: 16px;
  display: flex; gap: 20px; align-items: flex-start;
  animation: fadeUp 0.35s ease both; transition: box-shadow 0.2s;
}
.history-card:hover { box-shadow: 0 4px 20px rgba(26,86,219,0.1); }

.hist-date     { text-align: center; min-width: 58px; flex-shrink: 0; padding-top: 2px; }
.hist-day-name { font-size: 12px; color: var(--text-light); font-weight: 500; }
.hist-day-num  { font-size: 32px; font-weight: 700; color: var(--text-dark); font-family: 'Playfair Display', serif; line-height: 1; }
.hist-month    { font-size: 11px; color: var(--text-light); margin-top: 2px; }

.hist-divider  { width: 1px; background: var(--border); align-self: stretch; flex-shrink: 0; }

.hist-content  { flex: 1; min-width: 0; }
/* FIX: tanpa flex-wrap, '.badge' (nowrap, lihat komentar di bawah) tidak
   punya tempat mundur kalau tidak muat sebaris dengan '.hist-time' —
   dia meluber keluar kartu (mis. nama pimpinan panjang "Wakil Rektor
   Bidang Akademik dan Kemahasiswaan" di kartu Riwayat pada layar
   mobile), teksnya kelihatan terpotong padahal tidak ada horizontal
   scrollbar di halaman (overflow-nya "hilang" ditelan overflow:hidden
   milik elemen pembungkus). Sama seperti FIX di
   '.agenda-pimpinan-group-title' (Dashboard). */
.hist-top      { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.hist-time     { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-light); }
/* HANYA badge di konteks ini yang diubah (bukan '.badge' global) supaya
   pemakaian '.badge' lain (status pendek, mis. "Disetujui") tidak ikut
   berubah. */
.hist-top .badge { white-space: normal; text-align: center; }
.hist-title    { font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
.hist-location { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-light); margin-bottom: 14px; }

.hist-actions  { display: flex; gap: 10px; flex-wrap: wrap; }
.action-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.2s; background: transparent;
}
.action-btn.notulensi   { border: 1.5px solid var(--primary); color: var(--primary); }
.action-btn.dokumentasi { border: 1.5px solid #E8A83A; color: #E8A83A; }
.action-btn.ai          { border: 1.5px solid #8B6FD4; color: #8B6FD4; }
.action-btn.notulensi:hover   { background: var(--primary); color: #fff; }
.action-btn.dokumentasi:hover { background: #b8791a; color: #fff; }
.action-btn.ai:hover          { background: #8B6FD4; color: #fff; }

.info-box {
  background: var(--primary-pale); border: 1.5px solid var(--primary-light); border-radius: 12px;
  padding: 14px; display: flex; gap: 10px; align-items: flex-start;
  margin-top: 16px; margin-bottom: 20px; font-size: 12px; color: var(--text-mid); line-height: 1.5;
}
.info-box-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }

.summary-title { font-size: 14px; font-weight: 700; color: var(--text-dark); margin-bottom: 14px; }
.stat-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.stat-item:last-child { border-bottom: none; }
.stat-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.stat-icon.green  { background: var(--good-bg); }
.stat-icon.orange { background: var(--accent-light); }
.stat-icon.purple { background: var(--info-bg); }

/* =============================================
   PILIH JADWAL
   ============================================= */
.page-header { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.back-btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--border-mid); background: var(--card-bg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px; color: var(--text-mid);
  transition: all 0.15s; flex-shrink: 0;
}
.back-btn:hover { border-color: var(--primary); color: var(--primary); }

.form-section { background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 16px; padding: 24px; margin-bottom: 20px; }
.form-section-title { font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: 18px; }
.form-section-title--gap-top { margin-top: 4px; }
.form-section-title--mt8 { margin-top: 8px; }
.schedule-sublist { display: flex; flex-direction: column; }
.schedule-sublist--gap { margin-bottom: 8px; }
.schedule-empty-note { padding: 0 0 20px; text-align: center; color: var(--text-light); font-size: 13px; }
.schedule-empty-state {
  align-items: center; justify-content: center; flex-direction: column;
  padding: 32px 0; color: var(--text-light); text-align: center;
}
.form-group--grow2-w260 { flex: 2; min-width: 260px; }
.form-input--w420 { max-width: 420px; }

/* BARU: accordion untuk halaman Panduan Sistem (lihat panduan/index.blade.php)
   — pakai <details>/<summary> native (bukan JS custom) supaya bisa
   dilipat/dibuka, aksesibel lewat keyboard/screen reader tanpa kode
   tambahan. Class TERPISAH dari '.form-section'/'.form-section-title'
   (dipakai di banyak form lain di seluruh app) supaya perubahan di sini
   tidak menyentuh tampilan halaman lain sama sekali. */
.panduan-section { background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 16px; margin-bottom: 14px; overflow: hidden; }
.panduan-section-title {
  font-size: 15px; font-weight: 700; color: var(--text-dark);
  padding: 18px 24px; cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.panduan-section-title::-webkit-details-marker { display: none; }
.panduan-section-title::after {
  content: '▾'; font-size: 12px; color: var(--text-light); flex-shrink: 0; transition: transform 0.2s;
}
.panduan-section[open] > .panduan-section-title::after { transform: rotate(180deg); }
.panduan-section-title:hover { background: var(--primary-pale); }
.panduan-section-body { padding: 0 24px 22px; }
/* Tiga pola yang ditulis ulang inline puluhan kali di panduan/index.blade.php
   (paragraf isi, daftar langkah, sub-judul "Cara ..." — total 74 style attr
   di SATU file, dulu bahkan lewat trik variabel PHP '$howToStyle' karena
   penulisnya sendiri sadar isinya berulang, lihat komentar lama di sana). */
.panduan-body-text { font-size: 13.5px; color: var(--text-mid); line-height: 1.7; }
.panduan-list { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--text-mid); line-height: 1.9; }
.panduan-howto { font-weight: 600; font-size: 13px; color: var(--text-dark); margin: 14px 0 6px; }

/* Judul halaman serif + subjudul kecil di bawahnya — dipakai identik di
   panduan/index, profile/edit, dan super/user_form. */
.page-title-serif { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--text-dark); }
.page-title-serif--lg { font-size: 24px; }
.lokasi-lainnya-wrap { margin-top: 8px; }
.legend-dot--tersedia   { background: #3DBD70; }
.legend-dot--sebagian   { background: #E8A83A; }
.legend-dot--terisi     { background: #E84040; }
.legend-dot--pengajuan  { background: var(--accent); }
.legend-dot--reschedule { background: #8B6FD4; }
.legend-dot--kosong     { background: #CCCCCC; }
.page-subtitle { font-size: 13px; color: var(--text-light); margin-top: 4px; }
.page-subtitle.page-subtitle--tight { margin-top: 2px; }

/* Empty-state (ikon besar + judul + keterangan), dipakai identik di 7
   halaman (Jadwal Saya, Penjadwalan, Riwayat, Status Ditolak/Reschedule). */
.empty-state { text-align: center; color: var(--text-light); }
.empty-state-icon { font-size: 48px; margin-bottom: 16px; }
.empty-state-title { font-size: 15px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; }
.empty-state-text { font-size: 13px; }

.form-row   { display: flex; gap: 16px; margin-bottom: 16px; }
.form-group { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.form-group.full { flex: 1 1 100%; }
.form-group--w220 { min-width: 220px; }
.form-group--w160 { min-width: 160px; }
.form-group--w150 { min-width: 150px; }
.form-group--w140 { min-width: 140px; }
.form-group--w130 { min-width: 130px; }
.form-group--grow2 { flex: 2; min-width: 220px; }
.form-input--w260 { max-width: 260px; }
.form-input--w120 { max-width: 120px; }
.form-hidden { display: none; }
.checkbox-label-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }

/* Form baris Dinas Luar (create/edit) & kartu konflik jadwal terkait */
.form-row--inline { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.btn-simpan--row { height: 42px; }
.notice-box--gap { margin-top: 14px; }
.dl-conflict-hint { font-size: 12.5px; color: var(--text-light); margin: -4px 0 14px; }
.dl-conflict-card {
  border: 1px solid var(--border-soft); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 12px;
}
.dl-conflict-card-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.dl-conflict-title { font-weight: 600; font-size: 13.5px; color: var(--text-dark); }
.dl-conflict-meta { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.dl-availability-hint { margin-top: 8px; font-size: 11.5px; }
.dl-conflict-pagination { margin-top: 8px; }
.page-btn--ellipsis { letter-spacing: 2px; border: none; background: none; cursor: default; }

.form-label     { font-size: 12px; font-weight: 600; color: var(--text-mid); }
.form-label .req { color: var(--primary); margin-left: 2px; }

.form-input,
.form-select,
.form-textarea {
  border: 1.5px solid var(--border-mid); border-radius: 10px; padding: 10px 14px;
  font-size: 13px; font-family: 'DM Sans', sans-serif; color: var(--text-dark);
  background: var(--card-bg); outline: none; transition: border-color 0.2s; width: 100%;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-light); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--primary);
  /* FIX (audit aksesibilitas): sebelumnya cuma border-color berubah —
     terlalu halus untuk jadi indikator fokus keyboard yang jelas
     (outline bawaan browser sudah dihapus lewat 'outline:none' di
     rule dasarnya). Cincin fokus ini menyamakan pola yang sudah dipakai
     '.status-search:focus-within'/'.auth-input-wrap:focus-within'. */
  box-shadow: 0 0 0 3px rgba(26,86,219,.15);
}

.form-error-text {
  color: #f80202;
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.4;
}

.form-select {
  appearance: none;
  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' stroke='%238aa0bf' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
}

.form-input-icon { position: relative; }
.form-input-icon .form-input { padding-right: 36px; }
.form-input-icon .icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-light); font-size: 15px; pointer-events: none; }

.form-textarea { resize: none; height: 90px; line-height: 1.5; }
.char-count    { text-align: right; font-size: 11px; color: var(--text-light); margin-top: 4px; }

/* Tipe Pertemuan (Umum/Rahasia) di form Buat Jadwal — 2 kartu radio yang
   bisa diklik di mana saja (label membungkus input), highlight kartu yang
   sedang terpilih lewat ':has(input:checked)' murni CSS, tanpa JS.
   flex-wrap supaya otomatis tumpuk 1 kolom di layar sempit (konsisten
   dengan pola responsif form lain — lihat '.form-row' di breakpoint
   ≤900px). */
.meeting-type-options {
  display: flex; flex-wrap: wrap; gap: 12px;
}
.meeting-type-option {
  flex: 1 1 220px;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px;
  border: 1.5px solid var(--border-mid); border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.meeting-type-option:hover { border-color: var(--primary); }
.meeting-type-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-pale);
}
.meeting-type-option input[type="radio"] {
  margin-top: 3px; accent-color: var(--primary); flex-shrink: 0; cursor: pointer;
}
.mto-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.mto-text { display: flex; flex-direction: column; gap: 2px; }
.mto-title { font-size: 13.5px; font-weight: 600; color: var(--text-dark); }

/* Varian ringkas — dipakai di modal Verifikasi (dulu ditulis ulang
   inline identik di 2 file: approval/index.blade.php & detail.blade.php,
   markup blok ini sendiri juga disalin-tempel PERSIS sama di keduanya). */
.meeting-type-options.mto-compact { margin-top: 4px; }
.meeting-type-options.mto-compact .meeting-type-option { padding: 10px 12px; }
.meeting-type-options.mto-compact .mto-icon { font-size: 16px; }
.meeting-type-options.mto-compact .mto-title { font-size: 12.5px; }
.mto-desc  { font-size: 11.5px; color: var(--text-light); line-height: 1.4; }

/* Calendar picker */
.cal-picker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-picker-title  { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.cal-picker-nav    { display: flex; gap: 6px; }
.cal-picker-nav-btn {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--border-mid); background: transparent;
  cursor: pointer; font-size: 12px; color: var(--text-mid); transition: all 0.15s;
}
.cal-picker-nav-btn:hover { border-color: var(--primary); color: var(--primary); }

/* Lebar kalender dibatasi & di-center DI SINI (bukan di .right-card),
   supaya .right-card tetap boleh melebar penuh di breakpoint tablet/mobile
   (dipakai juga oleh panel Legend & Pengingat yang memang dirancang
   selebar itu), sementara widget kalendernya sendiri tetap kompak —
   lihat catatan di partials/_calendar_picker.blade.php. Di desktop
   (kolom kanan tetap 310px) angka ini tidak berpengaruh sama sekali
   karena kontainernya sudah lebih sempit dari max-width ini. */
.cal-picker-widget { max-width: 340px; margin: 0 auto; }

.cal-picker-grid  { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 6px; }
.cal-picker-label { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-light); padding: 4px 0 6px; }
.cal-picker-day   {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; aspect-ratio: 1 / 1; margin: 0 auto;
  font-size: 12px; border-radius: 50%;
  cursor: pointer; color: var(--text-mid); transition: all 0.15s; font-weight: 400; position: relative;
}
.cal-picker-day:hover:not(.other):not(.selected):not(.libur-weekend) { background: var(--primary-light); color: var(--primary); }
.cal-picker-day.selected      { background: var(--primary); color: #fff; font-weight: 700; }
.cal-picker-day.today-outline { border: 1.5px solid var(--primary); color: var(--primary); font-weight: 600; }
.cal-picker-day.other         { color: #c5d4ec; }

/* Dinas Luar — tanggal yang ditandai admin lewat DinasLuarController,
   dipakai di kalender mini form Buat Jadwal (lihat _form.blade.php).
   Tetap bisa DIKLIK (supaya banner keterangannya bisa dibaca), tapi tidak
   bisa dipilih sebagai tanggal pengajuan — grid jam & durasi diganti
   banner peringatan begitu tanggal ini yang aktif (lihat renderTimeGrid()). */
.cal-picker-day.dinas-luar:not(.selected) { background: var(--bad-bg); color: var(--bad); text-decoration: line-through; }
.cal-picker-day.dinas-luar:hover:not(.selected) { background: var(--bad-bg-hover); }
.cal-picker-day.dinas-luar.selected { background: var(--bad-solid); }

/* Sabtu/Minggu — otomatis hari libur (lihat App\Rules\HariKerja & catatan
   liburBanner di _form.blade.php). SENGAJA tidak dipasangi event klik sama
   sekali (beda dari .dinas-luar yang tetap bisa diklik), jadi cursor-nya
   'not-allowed' dan warnanya cukup pudar, bukan merah seperti dinas-luar
   (alasannya beda: ini bukan "lagi tidak tersedia", tapi memang bukan hari
   kerja sama sekali). */
.cal-picker-day.libur-weekend { background: var(--muted-bg); color: var(--muted-text); cursor: not-allowed; }

.cal-picker-day .dot { position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; }

.dinas-luar-banner {
  background: var(--bad-bg); border: 1.5px solid var(--bad-border); border-radius: 12px;
  padding: 16px; text-align: center; color: var(--bad-text); margin-bottom: 16px;
}
.dinas-luar-banner .dlb-icon  { font-size: 28px; margin-bottom: 8px; }
.dinas-luar-banner .dlb-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.dinas-luar-banner .dlb-desc  { font-size: 12px; line-height: 1.5; }

/* Info filter tanggal terpilih & empty state (dipakai di kalender interaktif Status & Riwayat) */
.cal-filter-info {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--primary-pale, #eff6ff); border-radius: 8px;
  padding: 8px 10px; margin-top: 10px; font-size: 11.5px; color: var(--primary); font-weight: 600;
}
.cal-filter-reset {
  border: none; background: none; cursor: pointer; font-size: 11px; font-weight: 600;
  color: var(--text-light); white-space: nowrap;
}
.cal-filter-reset:hover { color: var(--bad); }
.cal-empty-state {
  text-align: center; padding: 22px 12px; margin-top: 8px;
  background: var(--primary-pale); border-radius: 12px;
}
.cal-empty-icon  { font-size: 34px; margin-bottom: 10px; line-height: 1; }
.cal-empty-title { font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; }
.cal-empty-sub   { font-size: 12px; color: var(--text-light); line-height: 1.4; }
.dot-green  { background: #3DBD70; }
.dot-orange { background: #E8A83A; }
.dot-red    { background: #E84040; }
.dot-purple { background: #8B6FD4; }

/* Time slots */
.time-section-header { font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; }
.time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.time-slot-btn {
  border-radius: 10px; padding: 10px 8px; text-align: center;
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: 'DM Sans', sans-serif; border: 1.5px solid transparent; transition: all 0.15s;
}
.slot-tersedia         { background: var(--good-bg); color: var(--good-text); border-color: var(--good-border); }
.slot-tersedia:hover   { background: var(--good-bg-hover); }
.slot-terisi           { background: var(--muted-bg); color: var(--muted-text); border-color: var(--muted-border); cursor: default; }
/* BARU: jam yang ada PENGAJUAN LAIN tapi belum diputuskan admin (status
   'menunggu' — tidak mengunci slot, tetap bisa diklik/dipilih), beda dari
   '.slot-terisi' (sudah 'disetujui', benar-benar mengunci & tidak bisa
   diklik). Warna sama dengan status 'menunggu' di tempat lain (badge/pill),
   lihat App\Http\Controllers\Sipena\PenjadwalanController::buildTickAvailability(). */
.slot-menunggu          { background: var(--accent-light); color: var(--warn-text); border-color: var(--warn-border); }
.slot-menunggu:hover    { background: var(--warn-bg-hover); }
.slot-selected         { background: var(--primary); color: #fff; border-color: var(--primary); }
.slot-label            { font-size: 11px; font-weight: 400; margin-top: 2px; opacity: 0.8; }

/* Durasi pertemuan — pilihan preset (30 menit/1 jam/1 jam 30 menit/2 jam)
   di form Buat Jadwal, dipasangkan dengan grid "jam mulai" (.time-slot-btn)
   di atasnya. Dinonaktifkan otomatis (.duration-disabled) kalau kombinasi
   jam mulai + durasi itu akan melewati jam kerja/istirahat atau menabrak
   slot yang sudah terisi — lihat isRangeAvailable() di _form.blade.php. */
.duration-label { font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; }
.duration-grid  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.duration-btn {
  border-radius: 10px; padding: 10px 8px; text-align: center;
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: 'DM Sans', sans-serif; border: 1.5px solid var(--good-border);
  background: var(--good-bg); color: var(--good-text); transition: all 0.15s;
}
.duration-btn:hover:not(:disabled)  { background: var(--good-bg-hover); }
.duration-selected                  { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.duration-disabled, .duration-btn:disabled {
  background: var(--muted-bg); color: var(--muted-text); border-color: var(--muted-border); cursor: not-allowed;
}
.selected-range-preview {
  font-size: 12.5px; font-weight: 600; color: var(--primary);
  background: var(--primary-pale); border-radius: 10px; padding: 10px 12px;
}
.buat-main .duration-label { margin-bottom: 6px; }
.buat-main .duration-grid  { gap: 6px; }
.buat-main .duration-btn   { padding: 7px 6px; font-size: 11px; }
.buat-main .selected-range-preview { padding: 8px 10px; font-size: 11.5px; margin-top: 8px; }

.notice-box {
  background: var(--primary-pale); border: 1.5px solid var(--primary-light); border-radius: 12px;
  padding: 14px 16px; display: flex; align-items: flex-start; gap: 10px;
  margin-top: 20px; font-size: 12px; color: var(--text-mid); line-height: 1.6;
}
.notice-icon { font-size: 20px; flex-shrink: 0; }
/* Modifier "bahaya" — dulu ditulis ulang inline di 43 tempat/13 file
   (pesan error validasi form) dengan warna literal, jadi tidak pernah
   ikut berganti di mode gelap. */
/* 'margin-bottom:12px' dulu ditulis ulang inline di 35 tempat/10 file
   (varian dominan — sisanya pakai 'margin-top:6px' inline, tetap
   menang di baris itu karena properti beda). */
.notice-box.notice-danger { background: var(--bad-bg); border-color: var(--bad-border); color: var(--bad-text); margin-bottom: 12px; }
.col-center { text-align: center; }
.td-aksi { text-align: center; white-space: nowrap; }
.form-inline { display: inline; }
.form-inline--ml { display: inline; margin-left: 4px; }
.table-empty-row { text-align: center; padding: 40px 0; color: var(--text-light); font-size: 13px; }
.page-btn-ellipsis { letter-spacing: 2px; border: none; background: none; cursor: default; }
.page-btn.nav.is-disabled { pointer-events: none; opacity: .5; }
.mf-error.mf-error--field-form { margin-top: 6px; }
.notice-box.notice-danger.notice-danger--tight { margin-top: 6px; margin-bottom: 0; }
.form-label--light { font-weight: 400; font-size: 11px; color: var(--text-light); }
.form-help-text { font-size: 12px; color: var(--text-light); margin-top: 6px; }
.summary-box--flush { margin: 0; }
.pimpinan-tabs.align-left.tabs--mb-sm { margin-bottom: 16px; }
.pimpinan-tabs.align-left.tabs--mb-lg { margin-bottom: 20px; }

.form-footer { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.btn-batal {
  padding: 12px 32px; border-radius: 12px; border: 1.5px solid var(--primary);
  background: transparent; color: var(--primary); font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.2s;
}
.btn-batal:hover  { background: var(--primary-pale); }
.btn-simpan {
  padding: 12px 32px; border-radius: 12px; border: none;
  background: var(--primary); color: #fff; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.2s;
}
.btn-simpan:hover { background: var(--primary-mid); }
.btn-simpan:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-simpan--nowrap { white-space: nowrap; }

/* Legend */
.legend-title { font-size: 14px; font-weight: 700; color: var(--text-dark); margin: 16px 0 12px; }
.legend-item  { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.legend-dot   { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.legend-text .leg-label { font-size: 13px; font-weight: 600; color: var(--text-dark); }
.legend-text .leg-desc  { font-size: 11px; color: var(--text-light); margin-top: 1px; }

.tips-box {
  background: var(--primary-pale); border-radius: 10px; padding: 12px 14px; margin-top: 16px;
  display: flex; gap: 8px; font-size: 12px; color: var(--text-mid); line-height: 1.5;
}

.picker-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.picker-layout > * { min-width: 0; } /* sama seperti fix di .app — cegah kartu kalender/jam mendorong keluar kolomnya sendiri */

/* =============================================
   BUAT JADWAL — dipadatkan agar muat 1 layar tanpa scroll,
   panel kanan (Keterangan) dilebarkan mengikuti tinggi form.
   Class ini HANYA dipakai di halaman buat jadwal, tidak
   mengubah tampilan Dashboard/Status/Riwayat/dll.
   ============================================= */
.buat-main {
  height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 20px 22px 16px;
}
.buat-main::-webkit-scrollbar { width: 4px; }
.buat-main::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 4px; }

.buat-main .page-header        { margin-bottom: 2px; }
.buat-main .am-tabs            { margin-top: 8px; }
.buat-main .form-section       { padding: 14px 16px; margin-bottom: 10px; margin-top: 10px !important; }
.buat-main .form-section-title { margin-bottom: 10px; }
.buat-main .form-row           { margin-bottom: 10px; gap: 12px; }
.buat-main .form-textarea      { height: 52px; }
.buat-main .char-count         { margin-top: 2px; }

.buat-main .picker-layout      { gap: 16px; }
.buat-main .cal-picker-header  { margin-bottom: 8px; }
.buat-main .cal-picker-grid    { margin-bottom: 2px; }
.buat-main .cal-picker-day     { width: 24px; height: 24px; font-size: 11px; }
.buat-main .time-section-header{ margin-bottom: 8px; }
.buat-main .time-grid          { gap: 6px; }
.buat-main .time-slot-btn      { padding: 7px 6px; font-size: 11px; }
.buat-main .slot-label         { font-size: 10px; margin-top: 1px; }

.buat-main .notice-box         { margin-top: 10px; padding: 10px 12px; }
.buat-main .form-footer        { margin-top: 12px; padding-top: 10px; }

/* Panel kanan mengikuti tinggi penuh form */
.buat-right {
  height: calc(100vh - 32px);
}
.buat-right-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.buat-right-card .legend-title { margin: 14px 0 12px; }
.buat-right-card .legend-item  { margin-bottom: 18px; }
.buat-right-card .tips-box     { margin-top: auto; }

/* =============================================
   APPROVAL DETAIL PAGE
   ============================================= */

/* Topbar */
.detail-topbar {
  display: flex; align-items: flex-start; gap: 16px; margin-bottom: 4px;
}
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--primary); background: var(--primary-pale);
  text-decoration: none; white-space: nowrap;
  transition: background 0.15s;
}
.back-btn:hover { background: var(--primary-light); }
.detail-header-info h1 {
  font-family: 'Playfair Display', serif; font-size: 20px;
  font-weight: 700; color: var(--text-dark); margin: 0;
}
.detail-header-info p { font-size: 12px; color: var(--text-light); margin: 2px 0 0; }

/* Status Banner */
.status-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px; border-radius: 12px; margin-bottom: 4px;
}
.status-banner.pending { background: var(--accent-light); border: 1px solid var(--warn-border); }
.status-banner.disetujui { background: var(--good-bg); border: 1px solid var(--good-border); }
.status-banner.ditolak { background: var(--bad-bg); border: 1px solid var(--bad-border); }
.status-banner.reschedule { background: var(--info-bg); border: 1px solid var(--info-border); }
.banner-icon { font-size: 24px; }
.banner-label { font-size: 11px; color: var(--text-mid); font-weight: 500; }
.banner-value { font-size: 14px; font-weight: 700; color: var(--text-dark); }
.banner-meta {
  margin-left: auto; display: flex; flex-direction: column;
  gap: 2px; text-align: right; font-size: 11px; color: var(--text-mid);
}

/* Two-column detail grid */
.detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  align-items: start; /* cegah kartu pendek di kanan ikut melar saat kartu kiri lebih tinggi */
}
.detail-card {
  background: var(--card-bg); border: 1px solid var(--border-soft); border-radius: 14px;
  padding: 20px 22px;
}
.detail-card-title {
  font-size: 13px; font-weight: 700; color: var(--primary);
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft);
}
.detail-field { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.detail-field:last-child { margin-bottom: 0; }
.detail-field--tight { margin-bottom: 6px; }
.df-label { font-size: 11px; color: var(--text-light); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.df-value { font-size: 13px; color: var(--text-dark); font-weight: 500; }
.df-value--sm { font-size: 12px; }
.df-desc  { font-size: 12px; color: var(--text-mid); line-height: 1.6; font-weight: 400; }
.detail-side-col { display: flex; flex-direction: column; gap: 16px; }
.badge-rahasia { background: var(--accent-light); color: var(--warn-text); }
.badge-umum { background: var(--good-bg); color: var(--good-text); }
.tl-actor { font-weight: 400; color: var(--text-light); }
.tl-note { margin-top: 2px; font-style: italic; }
.action-btn--edit { background: var(--primary-pale); color: var(--primary); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.action-btn--delete { background: var(--bad-bg); color: var(--bad-text); }
.modal-field-row { display: flex; gap: 12px; }
.modal-field-col { flex: 1; }
.summary-box--tight { margin-top: 12px; }

/* Attachment */
.attachment-list { display: flex; flex-direction: column; gap: 10px; }
.attachment-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; background: var(--primary-pale);
  border: 1px solid var(--primary-light);
}
.att-icon { font-size: 20px; }
.att-info { flex: 1; }
.att-name { font-size: 12px; font-weight: 600; color: var(--text-dark); }
.att-size { font-size: 11px; color: var(--text-light); }
.att-download {
  font-size: 12px; font-weight: 600; color: var(--primary);
  text-decoration: none; white-space: nowrap;
}
.att-download:hover { text-decoration: underline; }

/* Timeline */
.timeline { display: flex; flex-direction: column; gap: 0; }
.tl-item { display: flex; gap: 12px; position: relative; padding-bottom: 16px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item:not(:last-child)::before {
  content: ''; position: absolute; left: 7px; top: 16px;
  width: 2px; height: calc(100% - 8px); background: var(--border-soft);
}
.tl-dot {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
}
.dot-blue   { background: var(--primary); }
.dot-yellow { background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--accent); }
.dot-green  { background: var(--good-solid); }
.dot-red    { background: var(--bad-solid); }
.tl-title { font-size: 13px; font-weight: 600; color: var(--text-dark); }
.tl-time  { font-size: 11px; color: var(--text-light); margin-top: 2px; }

/* Action Buttons */
.detail-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; padding-top: 4px;
}
.action-btn {
  padding: 10px 22px; border-radius: 10px; font-size: 13px; font-weight: 600;
  border: none; cursor: pointer; transition: all 0.15s;
}
.btn-setujui   { background: var(--primary); color: #fff; }
.btn-setujui:hover { background: var(--primary-mid); }
.btn-tolak     { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-border); }
.btn-tolak:hover { background: var(--bad-bg-hover); }
.btn-reschedule{ background: var(--info-bg); color: var(--info-text); border: 1px solid var(--info-border); }
.btn-reschedule:hover { background: var(--info-bg-hover); }
.action-btn:disabled {
  opacity: 0.45; cursor: not-allowed; filter: grayscale(0.3);
}
.action-btn:disabled:hover { background: inherit; }

.readonly-note {
  display: flex; align-items: center; gap: 8px;
  background: var(--muted-bg); border: 1px solid var(--muted-border); color: var(--text-mid);
  font-size: 12.5px; padding: 10px 14px; border-radius: 10px;
  margin-bottom: 10px;
}

/* Slot items */
.slot-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: 8px; font-size: 12px;
  font-weight: 500; color: var(--text-dark); margin-bottom: 6px;
}
.slot-pill {
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px;
}
.slot-terisi    { background: var(--bad-bg); }
.slot-tersedia  { background: var(--good-bg); }
.slot-diminta   { background: var(--primary-pale); padding: 8px 10px; }
.tersedia { background: var(--good-border); color: var(--good-text); }
.terisi   { background: var(--bad-border); color: var(--bad-text); }
.diminta  { background: var(--primary); color: #fff; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 200; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.modal-box {
  background: var(--card-bg); border-radius: 18px; padding: 32px 28px;
  width: 100%; max-width: 440px; box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.modal-icon {
  width: 52px; height: 52px; border-radius: 14px; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
/* Dulu ditulis ulang inline (mis. style="background:#EDFBF2") di 12
   tempat/8 file — warna literalnya tetap sama di mode gelap, tidak ikut
   token. Dipakai juga oleh '.sum-icon' (varian lebih kecil, sama makna
   warnanya) lewat class yang sama. */
.modal-icon.i-good, .sum-icon.i-good { background: var(--good-bg); }
.modal-icon.i-bad, .sum-icon.i-bad   { background: var(--bad-bg); }
.modal-icon.i-info, .sum-icon.i-info { background: var(--info-bg); }
.modal-icon.i-warn, .sum-icon.i-warn { background: var(--accent-light); }

.modal-title { font-size: 18px; font-weight: 700; color: var(--text-dark); text-align: center; margin-bottom: 6px; }
.modal-desc  { font-size: 13px; color: var(--text-mid); text-align: center; line-height: 1.5; margin-bottom: 20px; }
.modal-field { margin-bottom: 14px; }
.mf-label { font-size: 12px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; display: block; }
.mf-input {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1.5px solid var(--border); font-size: 13px; color: var(--text-dark);
  font-family: inherit; resize: vertical; transition: border 0.15s;
  box-sizing: border-box;
}
.mf-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,86,219,.15); }
.mf-error {
  margin-top: -4px; margin-bottom: 12px; padding: 8px 12px;
  background: var(--bad-bg); border: 1px solid var(--bad-border); border-radius: 8px;
  color: var(--bad); font-size: 12px; font-weight: 600;
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.mbtn {
  padding: 9px 20px; border-radius: 9px; font-size: 13px;
  font-weight: 600; border: none; cursor: pointer; transition: all 0.15s;
}
.mbtn-cancel  { background: var(--muted-bg); color: var(--text-mid); }
.mbtn-cancel:hover { background: var(--muted-border); }
.mbtn-confirm { color: #fff; }
.mbtn:disabled { opacity: 0.6; cursor: not-allowed; }
.confirm-green  { background: var(--good-solid); }
.confirm-green:hover  { background: #24804a; }
.confirm-red    { background: var(--bad-solid); }
.confirm-red:hover    { background: #b83030; }
.confirm-purple { background: var(--info-solid); }
.confirm-purple:hover { background: #6240aa; }

/* Toast */
.toast-notif {
  position: fixed; bottom: 28px; right: 28px; z-index: 300;
  padding: 13px 20px; border-radius: 12px; font-size: 13px;
  font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.toast-green  { background: var(--good-solid); color: #fff; }
.toast-red    { background: var(--bad-solid); color: #fff; }
.toast-purple { background: var(--info-solid); color: #fff; }

/* Sembunyikan elemen ber-atribut x-cloak sebelum Alpine.js selesai inisialisasi
   (mencegah modal/dropdown "berkedip" tampil sesaat saat halaman dimuat) */
[x-cloak] { display: none !important; }
/* ── Pemohon cell di tabel approval ── */
.td-pemohon {
  display: flex; align-items: center; gap: 10px; max-width: 100%;
}
/* '.account-*' — alias semantik dari '.pemohon-*' di bawah, dipakai khusus
   di halaman Profil (kartu ringkasan AKUN SENDIRI, bukan data pemohon
   lain seperti di tabel Approval) supaya nama class-nya tidak menyesatkan
   kalau dibaca ulang nanti. Stylingnya sama persis (selector digabung),
   dan '.pemohon-*' tetap dipakai apa adanya di approval/index.blade.php
   & approval/riwayat.blade.php — tidak diubah, tidak ada risiko regresi
   di halaman itu. */
.pemohon-avatar, .account-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Sans', sans-serif;
}
.pemohon-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pemohon-name, .account-name { font-size: 13px; font-weight: 600; color: var(--text-dark); }
.pemohon-unit, .account-unit { font-size: 11px; color: var(--text-light); }

/* FIX: tanpa flex-wrap, '.account-date' (isinya badge role/pimpinan,
   nowrap, lihat komentar di bawah) tidak punya tempat mundur kalau
   avatar+nama+email di sampingnya sudah memenuhi lebar kartu — dia
   meluber keluar kartu (mis. nama pimpinan panjang "Wakil Rektor Bidang
   Akademik dan Kemahasiswaan" di halaman Profil pada layar mobile),
   badge-nya kelihatan terpotong padahal tidak ada horizontal scrollbar
   di halaman. Sama seperti FIX di '.agenda-pimpinan-group-title'
   (Dashboard) & '.hist-top' (Riwayat). */
.pemohon-card, .account-card {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--primary-pale); border: 1.5px solid var(--primary-light);
  border-radius: 14px; padding: 14px 18px;
}
.section-gap-top { margin-top: 16px; }
.account-name--lg { font-size: 16px; }
/* Ukuran avatar non-default dipakai di halaman Profil: 52px di kartu
   ringkasan, 72px di pratinjau unggah foto. */
.avatar--52 { width: 52px; height: 52px; font-size: 18px; }
.avatar--72 { width: 72px; height: 72px; font-size: 24px; }
.avatar-upload-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.avatar-upload-col { flex: 1; min-width: 220px; }
.avatar-upload-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.avatar-file-input { max-width: 260px; }
.avatar-delete-form { margin-top: 10px; }
.form-input--readonly { background: var(--primary-pale); color: var(--text-mid); cursor: default; }
.form-input--readonly-inline { display: flex; align-items: center; gap: 8px; }
.pemohon-card .pemohon-date,
.account-card .account-date { margin-left: auto; }
/* HANYA badge di konteks ini yang diubah (bukan '.badge' global) supaya
   pemakaian '.badge' lain (status pendek) tidak ikut berubah. */
.account-card .account-date .badge { white-space: normal; text-align: center; }

/* Tombol aksi detail di tabel approval */
.aksi-detail-btn {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 7px;
  font-size: 12px; font-weight: 600;
  color: var(--primary); background: var(--primary-pale);
  border: 1px solid var(--primary-light);
  text-decoration: none; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.aksi-detail-btn:hover {
  background: var(--primary); color: #fff;
}

/* Tombol aksi cepat "Setuju" langsung dari baris tabel Menunggu Verifikasi
   — supaya admin tidak perlu masuk ke halaman Detail untuk kasus yang
   sudah jelas disetujui. Cuma untuk approve (bukan tolak/reschedule),
   karena dua aksi itu WAJIB mengisi alasan/usulan jadwal (form multi-
   baris) yang tidak pas dipaksakan jadi aksi sebaris di tabel. */
.aksi-approve-btn {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 7px;
  font-size: 12px; font-weight: 600;
  text-decoration: none;
  color: var(--good-text); background: var(--good-bg);
  border: 1px solid var(--good-border);
  cursor: pointer; white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.15s, color 0.15s;
  margin-right: 6px;
}
.aksi-approve-btn:hover  { background: var(--good-solid); color: #fff; }
.aksi-approve-btn:disabled { opacity: .6; cursor: wait; }

/* Tombol aksi "Hapus" & "Ubah" di tabel Manajemen User (Admin Super) —
   varian merah/netral dari .aksi-approve-btn, dipakai bareng untuk ukuran
   & bentuk yang konsisten dengan tombol aksi tabel lain di app ini. */
.aksi-delete-btn {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 7px;
  font-size: 12px; font-weight: 600;
  color: var(--bad); background: var(--bad-bg);
  border: 1px solid var(--bad-border);
  cursor: pointer; white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.15s, color 0.15s;
  margin-right: 6px;
}
.aksi-delete-btn:hover { background: var(--bad-solid); color: #fff; }

/* =============================================
   AUTH — LOGIN & REGISTER
   Layout dua kolom: panel brand (kiri) + form (kanan),
   memakai variabel warna & font yang sama dengan halaman lain.
   ============================================= */
.auth-shell {
  width:100%; min-height: 100vh; display: grid; grid-template-columns: 48% 52%; overflow: hidden;
  background: var(--card-bg);
}
.auth-brand {
  position: relative; overflow: hidden;
  background: var(--primary-pale);
  padding: 72px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.auth-brand-top   { position: relative; z-index: 2; }

.auth-brand-logo{ width:100%; max-width:520px; margin-bottom:36px; }
.auth-brand-logo img{ width:100%; height:auto; display:block; object-fit:contain; }

.auth-logo {
  width: 60px; height: 60px; border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: #fff; margin-bottom: 22px;
  box-shadow: 0 10px 24px rgba(26,86,219,0.25);
}
.auth-brand-name    { font-family: 'Playfair Display', serif; font-size: 34px; font-weight: 700; color: var(--text-dark); margin: 0 0 10px; }
.auth-brand-tagline { font-size: 15px; color: var(--text-mid); max-width: 360px; line-height: 1.8; }
.auth-brand-footer  { position: relative; z-index: 2; font-size: 12.5px; color: var(--text-light); }

.auth-circle { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffffff, var(--primary-light) 70%); opacity: .6; }
.auth-circle.c1 { width: 480px; height: 480px; top: -180px;  left: -160px; }
.auth-circle.c2 { width: 300px; height: 300px; bottom: 40px; left: 70px; }
.auth-circle.c3 { width: 220px; height: 220px; bottom: -90px; right: -50px; }

.auth-form-side { display: flex; align-items: center; justify-content: center; padding: 48px 72px; }
.auth-form-card { width: 100%; max-width: 430px; }

.auth-form-card { background: var(--card-bg); padding:42px; border-radius:22px; border:1px solid rgba(26,86,219,.08); box-shadow: 0 16px 40px rgba(26,86,219,.08); }
.auth-form { display:flex; flex-direction:column; gap:18px; }

.auth-alert {
  display: flex; align-items: center; gap: 10px;
  background: var(--good-bg); border: 1px solid var(--good-border); color: var(--good-text);
  padding: 12px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 22px;
}
.auth-alert.error { background: var(--bad-bg); border-color: var(--bad-border); color: var(--bad-text); }

.auth-title     { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; color: var(--text-dark); margin: 0 0 6px; }
.auth-sub       { font-size: 13.5px; color: var(--text-mid); margin: 0 0 4px; line-height: 1.5; }
.auth-home-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--primary); text-decoration: none; font-weight: 600; margin-bottom: 26px; }
.auth-home-link:hover { text-decoration: underline; }

.auth-field      { margin-bottom: 18px; }
.auth-field-row  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.auth-label      { font-size: 13px; font-weight: 600; color: var(--text-dark); }
.auth-link-sm    { font-size: 12.5px; color: var(--primary); text-decoration: none; font-weight: 600; }
.auth-link-sm:hover { text-decoration: underline; }

.auth-input-wrap {
  position: relative; display: flex; align-items: center;
  background: var(--primary-pale); border: 1px solid transparent;
  border-radius: 12px; padding: 0 14px; transition: border-color .15s, background .15s;
}
.auth-input-wrap:focus-within { background: var(--card-bg); border-color: var(--primary); }
.auth-input-icon { color: var(--text-light); font-size: 14px; margin-right: 10px; display: flex; }
.auth-input-wrap input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text-dark);
  padding: 13px 0;
}
.auth-input-toggle { border: none; background: none; cursor: pointer; color: var(--text-light); font-size: 14px; display: flex; align-items: center; padding: 4px; }
.auth-field-error  { font-size: 12px; color: var(--bad-text); margin-top: 6px; }

/* Checkbox "Ingat Saya" — FIX: sebelumnya controller sudah baca
   $request->boolean('remember') tapi form login tidak punya checkbox
   ini sama sekali, jadi nilainya selalu false (fitur mati total). */
.auth-remember {
  display: flex; align-items: center; gap: 8px;
  margin: -6px 0 18px; cursor: pointer;
}
.auth-remember input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer;
}
.auth-remember span { font-size: 13px; color: var(--text-mid); user-select: none; }

.auth-submit-btn {
  width: 100%; border: none; cursor: pointer;
  background: var(--primary); color: #fff; font-family: 'DM Sans', sans-serif;
  font-size: 14.5px; font-weight: 600; padding: 14px 18px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s;
}
.auth-submit-btn:hover { background: var(--primary-mid); }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--text-light); font-size: 12.5px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #e5ebf5; }

.auth-outline-btn {
  width: 100%; display: block; box-sizing: border-box; text-align: center; text-decoration: none;
  border: 1.5px solid #dbe4f3; color: var(--text-dark); font-weight: 600; font-size: 14.5px;
  padding: 13px 18px; border-radius: 12px; transition: border-color .15s, background .15s;
}
.auth-outline-btn:hover { border-color: var(--primary); background: var(--primary-pale); }

@media (max-width: 1024px) {
  .auth-shell     { grid-template-columns: 1fr; }
  .auth-brand     { display: none; }
  .auth-form-side { padding: 40px 24px; }
  .auth-form-card { max-width:440px; padding:36px; }
}

.type-label {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.type-upcoming   { background: var(--good-bg); color: var(--good-text); }
.type-reschedule { background: var(--info-bg); color: var(--info-text); }
.type-rejected   { background: var(--bad-bg); color: var(--bad-text); }
.type-pending    { background: var(--accent-light); color: var(--warn-text); }

/* ===========================
   Logout Button
=========================== */

.logout-form{
    display:flex;
    justify-content:center;
    align-items:center;
}

.Btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all .3s ease;
    box-shadow: 2px 2px 10px rgba(0,0,0,.15);
    background: var(--card-bg);
}

.Btn .sign {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
}

.Btn .sign svg {
    width: 17px;
    height: 17px;
}

.Btn .sign svg path {
    /* FIX: literal hitam ('#000') — di mode gelap latar tombol ini ikut
       menggelap (var(--card-bg)), jadi ikon hitam nyaris tidak kelihatan
       sama sekali. var(--text-dark) otomatis kebalikannya di tiap mode
       (nyaris-hitam di terang, nyaris-putih di gelap), selalu kontras
       dengan var(--card-bg) di baliknya. */
    fill: var(--text-dark);
    transition: .3s;
}

.Btn .text{
    position:absolute;
    right:0;
    width:0;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    opacity:0;

    color:#fff;
    font-size:14px;
    font-weight:600;

    white-space:nowrap;

    transition:.3s;
}

/* Hover */
.Btn:hover{
    width:125px;
    border-radius:40px;
    background:#2982DC;
}

.Btn:hover .sign{
    width:30%;
    padding-left:20px;
}

.Btn:hover .sign svg path{
    fill:#fff;
}

.Btn:hover .text{
    opacity:1;
    width:70%;
    padding-right:12px;
}

/* Active */
.Btn:active {
    transform: translate(2px, 2px);
}

.Btn{
    flex-shrink:0;
}

.logout-form{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
}

/* Sidebar Tree */

.sidebar-tree {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tree-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text);
    transition: .25s;
}

.tree-parent:hover{
    background: rgba(26,86,219,.08);
    color: var(--primary);
}

.tree-parent.active{
    background: var(--primary);
    color:white;
}

.tree-children{

    margin-left:22px;
    padding-left:18px;

    border-left:2px solid rgba(26,86,219,.18);
}

.tree-child{

    display:flex;
    align-items:center;

    gap:10px;

    padding:9px 12px;

    margin:4px 0;

    border-radius:8px;

    color:var(--text-mid);

    transition:.25s;
}

.tree-child:hover{

    background:var(--primary-pale);

    color:var(--primary);
}

.tree-child.active{

    color:var(--primary);

    font-weight:600;

    background:var(--primary-pale);
}

.tree-child::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--primary-light);

    margin-left:-23px;
}
/* =============================================================
   RESPONSIVE / MOBILE
   Supaya layout menyesuaikan lebar & tinggi tiap device:
   - ≥1181px  : desktop, 3 kolom penuh (sidebar | main | right-panel)
   - 901–1180 : tablet, sidebar tetap terlihat tapi menyempit,
                right-panel turun ke bawah main (2 kolom)
   - ≤900px   : sidebar jadi menu off-canvas (drawer), semua konten
                1 kolom penuh, tabel bisa discroll ke samping
   - ≤480px   : penyesuaian ukuran teks/padding utk layar HP kecil
   ============================================= */

/* Bottom navigation bar — default disembunyikan, baru dimunculkan lewat
   media query ≤900px di bawah. SENGAJA di BAWAH layar (bukan di atas
   seperti hamburger sebelumnya) — dua percobaan sebelumnya (tombol
   mengambang, lalu bar solid) sama-sama berujung menutupi judul halaman
   begitu di-scroll, karena dua-duanya ditaruh di ATAS, area yang sama
   dengan judul halaman. Bottom nav TETAP boleh position:fixed (beda
   dengan kasus sebelumnya) karena judul halaman selalu di ATAS dan bar
   ini selalu di BAWAH — dua area yang secara struktural tidak akan
   pernah bertabrakan, berapa pun jauhnya halaman di-scroll. Pola ini
   juga yang dipakai hampir semua aplikasi mobile (Instagram, WhatsApp,
   dst) untuk navigasi utama. */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 64px;
  padding-bottom: env(safe-area-inset-bottom, 0px); /* HP dengan gesture bar/notch bawah (mis. iPhone) */
  background: var(--card-bg);
  border-top: 1px solid var(--border-soft);
  box-shadow: 0 -4px 20px rgba(13,27,62,0.08);
  /* 100: di atas konten halaman biasa (z-index:auto), TAPI di bawah modal
     (.modal-overlay, 200) & toast (.toast-notif, 300) — supaya kalau ada
     modal/toast tampil di mobile, dua-duanya tetap menang di atas bar
     ini, bukan malah ketiban bar navigasi. Juga otomatis di bawah sidebar
     drawer (1000) & overlay-nya (999), meski dalam praktiknya bar ini
     sudah disembunyikan total lewat JS begitu drawer terbuka. */
  z-index: 100;
}
.mobile-bottom-nav.is-hidden { display: none !important; }

.mbn-item {
  flex: 1;
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  border: none; background: none; cursor: pointer;
  text-decoration: none; font-family: 'DM Sans', sans-serif;
  color: var(--text-light);
  transition: color 0.15s;
}
.mbn-item.active { color: var(--primary); }
.mbn-icon  { font-size: 19px; line-height: 1; }
.mbn-label { font-size: 10px; font-weight: 600; line-height: 1; white-space: nowrap; }

/* Tombol "Buat Jadwal" — ditonjolkan sebagai FAB (floating action button)
   bulat besar yang menyembul di atas garis bar, mengikuti pola umum
   aplikasi mobile untuk aksi utama/tercepat. */
.mbn-fab { justify-content: flex-start; padding-top: 2px; }
.mbn-fab-circle {
  width: 46px; height: 46px;
  margin-top: -22px; /* menyembul di atas garis atas bar */
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(26,86,219,0.35);
  border: 3px solid #fff; /* pemisah halus dari latar bar di belakangnya */
}
.mbn-fab .mbn-label { color: var(--primary); margin-top: 1px; }
.sidebar-close-btn {
  display: none;
  align-self: flex-end;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--primary-pale);
  color: var(--text-mid);
  font-size: 15px;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(13,27,62,0.45);
  z-index: 999;
  opacity: 0;
  transition: opacity .25s ease;
}
.sidebar-overlay.is-visible { display: block; opacity: 1; }

/* ---------- ≤1600px : label pimpinan disingkat ----------
   Breakpoint TERPISAH dari ≤1366px/≤1180px/≤900px di bawah. Perhitungan:
   bar tab pimpinan versi nama lengkap (4 nama, salah satunya sepanjang
   "Wakil Rektor Bidang Akademik dan Kemahasiswaan", gap 60px antar tab)
   butuh sekitar 1260px lebar KOLOM TENGAH saja untuk muat tanpa
   terpotong — sementara sidebar+right-panel+gap+padding sudah memakan
   ±580-680px dari lebar viewport duluan. Jadi breakpoint berbasis lebar
   VIEWPORT (bukan lebar kolom tengah) perlu jauh lebih besar dari yang
   terlihat intuitif; 1279px ternyata masih terlalu mepet (baru pas di
   ~1280px kolom tengah cuma dapat ±700px, masih kurang dari 1260px
   kebutuhan tab). Dinaikkan ke 1600px supaya aman. */
/* ---------- Label pimpinan disingkat — DIUKUR, bukan ditebak ----------
   Sebelumnya pakai breakpoint pixel tetap (1279px, lalu 1600px, lalu
   2000px) — ternyata tetap gagal di beberapa lebar layar karena
   kebutuhan lebar bar tab (nama pimpinan + gap) sedikit beda-beda
   tergantung font rendering / zoom browser, jadi breakpoint tetap tidak
   pernah pas untuk semua kasus. Diganti pendekatan yang lebih akurat:
   JS (lihat layout/app.blade.php, fungsi adjustPimpinanTabLabels) benar-
   benar MENGUKUR apakah bar tab overflow (scrollWidth > clientWidth)
   pada lebar layar saat itu, baru menambahkan class 'force-short-label'
   kalau memang overflow — bukan lagi berdasarkan tebakan lebar viewport. */
.pimpinan-tabs.force-short-label .pt-label-full  { display: none; }
.pimpinan-tabs.force-short-label .pt-label-short { display: inline; }

/* ---------- ≤1600px : tablet & "desktop sempit" — sidebar menyempit,
   kalender pindah ke bawah tab pimpinan (bukan kolom ke-3 lagi) ----------
   Sebelumnya batas ini 1180px (murni tablet) dengan tier terpisah 1366px
   yang cuma menyempitkan sidebar tanpa memindah kalender. Digabung jadi
   satu di 1600px supaya konsisten dengan breakpoint label tab pimpinan
   yang disingkat (lihat blok ≤1600px di atas) — begitu labelnya sudah
   versi singkat, kalender juga ikut pindah ke posisi setelah tab
   pimpinan (bukan lagi kolom terpisah di kanan), supaya kolom tengah
   dapat ruang penuh dan tidak sempit. */
@media (max-width: 1600px) {
  .app {
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto;
  }

  /* Samakan dengan aturan ':has()' di atas (dasar, sebelum breakpoint
     ini) — TANPA baris ini, selector ':not(:has(...))' di luar media
     query (lebih spesifik karena punya ':not()'/':has()') akan menang
     atas 'grid-template-columns: 240px 1fr' polos di atas dan diam-diam
     mengembalikan sidebar ke 310px lagi di lebar ini, padahal seharusnya
     ikut menyempit ke 240px sama seperti halaman berkolom-kanan. */
  .app:not(:has(> .right-panel)) {
    grid-template-columns: 240px 1fr;
  }

  /* Ditumpuk di bawah main (baris baru), SELEBAR kolom main saja — bukan
     seluruh grid .app (yang juga mencakup kolom sidebar 240px di
     sampingnya). '.app' cuma punya 2 kolom di breakpoint ini
     (grid-template-columns: 240px 1fr di atas), jadi 'grid-column: 2 / -1'
     = persis kolom main, hasilnya kartu kalender+Pengingat selebar
     kartu "Agenda"/"Agenda Mendatang" di atasnya, bukan lebih lebar.
     Dulu 'grid-column: 1 / -1' (seluruh grid) — itu yang bikin kartunya
     kelihatan jauh lebih lebar daripada panel lain di halaman yang sama
     (mis. Dashboard, lihat laporan bug).
     Berlaku juga untuk halaman yang JS reparenting-nya (lihat
     relocateRightPanel() di layout/app.blade.php) SENGAJA tidak
     memindahkan .right-panel ke dalam <main> (mis. Dashboard — lihat
     komentar di fungsi itu); untuk halaman lain yang JS-nya memang
     memindahkan .right-panel ke dalam <main>, selector ini otomatis
     tidak match lagi begitu reparenting selesai (tidak masalah, dua-duanya
     aman jalan berbarengan). */
  .app > .right-panel {
    grid-column: 2 / -1;
  }

  /* Lebar penuh + jarak atas untuk kalender & <main> setelah dipindah JS
     ke dalam <main> (posisi: setelah tab pimpinan, sebelum
     timeline/tabel jadwal). */
  .right-panel { width: 100%; margin-top: 14px; }
  .app > main  { width: 100%; }

  /* .buat-right (Legend/Keterangan di halaman Buat Jadwal) aslinya
     dibuat setinggi penuh layar (height: calc(100vh - 32px)) supaya pas
     jadi kolom kanan sejajar form. Begitu dipindah JS ke bawah form
     (lihat relocateRightPanel di layout/app.blade.php), tinggi tetap
     itu jadi tidak relevan lagi — dimatikan di sini supaya kartunya
     menyesuaikan tinggi isinya sendiri, bukan maksa setinggi layar. */
  .buat-right {
    height: auto;
  }
  .buat-right-card {
    height: auto;
  }

  .stat-cards    { grid-template-columns: repeat(2, 1fr); }
  .approval-grid { grid-template-columns: repeat(2, 1fr); }
  .upcoming-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ≤900px : mobile — sidebar jadi drawer, 1 kolom ---------- */
@media (max-width: 900px) {
  /* '.mobile-bottom-nav' position:fixed di BAWAH layar — perlu jarak
     bawah buatan di body supaya konten paling bawah halaman (mis. kartu
     "Pengingat" di Dashboard, tombol "Simpan Jadwal") tidak ketiban bar
     ini. FIX: sebelumnya cuma 84px — kurang, karena bukan cuma tinggi
     bar (64px) yang perlu diperhitungkan, tapi juga FAB "Buat Jadwal"
     yang menyembul ke ATAS garis bar (lingkaran 46px + margin-top:-22px
     = puncaknya ±20px di atas tepi atas bar). 64 (bar) + 20 (sembulan
     FAB) + 16 (celah napas asli) = 100px, baru benar-benar aman —
     sebelumnya cuma 84px, pas-pasan/kepotong (lihat laporan bug).
     Ditambah env(safe-area-inset-bottom) juga — tinggi bar sendiri
     sudah nambah padding-bottom mengikuti itu (lihat '.mobile-bottom-nav'),
     jadi di HP dengan gesture bar/notch bawah (mis. iPhone) baris ini
     perlu diikutkan juga supaya jaraknya tetap presisi, tidak kurang. */
  body { padding: 12px; padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }

  .mobile-bottom-nav { display: flex; }
  .sidebar-close-btn { display: flex; }

  /* Toast notifikasi sebelumnya nempel di bottom:28px — di lebar ini
     posisi itu tumpang tindih SECARA VISUAL dengan '.mobile-bottom-nav'
     (tinggi 64px, fixed di bagian bawah layar juga). z-index toast (300)
     memang tetap lebih tinggi jadi tidak sampai ketutup, tapi kotaknya
     akan menutupi sebagian ikon nav di bawahnya kalau tidak digeser.
     Sekalian dilebarkan penuh (kiri+kanan) — pola umum untuk toast di
     layar sempit, dari sebelumnya cuma nempel di pojok kanan. */
  .toast-notif { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); right: 16px; left: 16px; }

  .app {
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  /* FIX: begitu .app pindah dari grid ke flex-column, kartu putih
     `.main`/`.buat-main` tidak lagi otomatis ikut memenuhi tinggi
     minimal .app (min-height:100vh dari rule dasar) — flexbox cuma
     nyusun anak-anaknya setinggi konten masing-masing, beda dari grid
     yang defaultnya stretch. Kalau isi halaman pendek (mis. kalender +
     "Belum ada jadwal"), kartu putihnya jadi cuma setinggi itu, dan
     sisa ruang di bawahnya nongol warna background polos punya
     halaman — kelihatan seperti ada "gap"/bolong padahal itu di luar
     kartu. flex:1 di sini bikin .main ikut melar mengisi sisa ruang
     kosong .app, jadi kartu putihnya selalu penuh sampai bawah. */
  .app > main {
    flex: 1 0 auto;
  }

  /* FIX: '.mobile-bottom-nav' fixed di bawah LAYAR (viewport), sedangkan
     beberapa panel (.timeline di Penjadwalan, .am-main di Verifikasi,
     .schedule-list di Status, .buat-main di Buat Jadwal) punya SCROLL
     SENDIRI secara internal (overflow-y:auto di dalam kotaknya sendiri,
     beberapa malah dengan tinggi tetap "height: calc(100vh - ...)") —
     padding-bottom di body (lihat di atas) TIDAK BERPENGARUH ke konten
     yang di-scroll di dalam kotak-kotak itu, karena itu scroll container
     yang terpisah dari body. Akibatnya baris/tombol paling bawah di
     panel-panel itu tetap ketutup bar (lihat laporan bug: timeline
     Penjadwalan & tombol "Simpan Jadwal" di Buat Jadwal terpotong).
     Perbaikannya: satukan semua scroll itu ke scroll HALAMAN (body) di
     layar sempit — selain otomatis kebagian jarak aman dari padding-
     bottom body, scroll bersarang (nested scroll) juga memang lebih
     susah dipakai di layar sentuh dibanding satu scroll halaman biasa. */
  .timeline,
  .am-main,
  .schedule-list {
    overflow-y: visible;
  }
  .buat-main {
    height: auto;
    overflow-y: visible;
  }

  /* Sidebar lepas dari grid, jadi panel geser dari kiri (off-canvas) */
  .sidebar {
    position: fixed;
    top: 0; left: -300px;
    width: 280px; max-width: 82vw;
    height: 100vh;
    z-index: 1000;
    border-radius: 0;
    overflow-y: auto;
    transition: left .3s ease;
  }
  .sidebar.sidebar-open { left: 0; box-shadow: 8px 0 30px rgba(13,27,62,0.25); }

  /* Kalender (.right-panel) dipindah lewat JS (lihat layout/app.blade.php)
     ke dalam <main>, tepat setelah header (judul + tombol "Pilih Jadwal")
     dan sebelum tab pimpinan / tabel jadwal — BUKAN lewat CSS order lagi,
     karena order cuma bisa menaikkan .right-panel ke paling atas .app
     (di atas judul), bukan menyisipkannya di tengah-tengah konten .main
     seperti yang diinginkan. Selector di sini tidak dibatasi '.app >'
     lagi karena setelah dipindah, .right-panel sudah jadi child dari
     <main> (bukan child langsung .app). */
  .right-panel { width: 100%; }
  .app > main  { width: 100%; margin-top: 14px; }

  /* Tabel jadi bisa discroll ke samping, tidak memepetkan kolomnya */
  .main, .status-main, .am-main, .main-content {
    overflow-x: auto;
  }
  .am-table { min-width: 640px; }

  /* BARU: bayangan tipis di tepi kiri/kanan .am-main selama masih ada
     kolom tabel (mis. kolom Aksi — Ubah/Reset Kata Sandi/Hapus) yang
     belum kelihatan — memberi tahu tabel ini bisa digeser ke samping,
     tanpa perlu JS. Otomatis memudar begitu sudah digeser sampai ujung
     (background-attachment 'local' vs 'scroll' membuat lapisan penutup
     solid ikut bergerak bareng konten, sedangkan bayangannya sendiri
     tetap menempel di tepi viewport .am-main) — teknik "CSS scroll
     shadows" yang sudah umum dipakai, bukan dekorasi statis yang selalu
     tampil walau sudah tidak relevan.
     SENGAJA cuma di .am-main (bukan ikut .main/.status-main/.main-content
     di atas) — cuma halaman berbasis tabel (Manajemen User/Pertemuan,
     Dinas Luar, Riwayat Impersonate/Reset Kata Sandi, dll) yang benar-
     benar butuh isyarat ini; halaman lain isinya kartu/daftar yang sudah
     menumpuk rapi tanpa perlu geser sama sekali. */
  .am-main {
    background-color: var(--card-bg);
    background-image:
      linear-gradient(to right, var(--card-bg) 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), var(--card-bg) 70%),
      radial-gradient(farthest-side at 0 50%, rgba(13,27,62,.2), rgba(13,27,62,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(13,27,62,.2), rgba(13,27,62,0));
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 10px 100%, 10px 100%;
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-attachment: local, local, scroll, scroll;
  }

  /* Grid kalender+jam / detail 2-kolom -> ditumpuk 1 kolom
     (tetap display:grid, cuma jumlah kolomnya yang diubah).
     FIX: 'minmax(0, 1fr)' (BUKAN cuma '1fr' polos) — track '1fr' polos
     minimum lebarnya defaultnya 'auto', bukan '0', jadi kalau SALAH SATU
     item di kolom itu punya konten yang tidak bisa menyusut (mis. badge
     nama pimpinan panjang "Wakil Rektor Bidang Akademik dan
     Kemahasiswaan" dengan white-space:nowrap di .agenda-pimpinan-group),
     track-nya ikut melebar mengikuti kebutuhan minimum konten itu — dan
     karena SEMUA item berbagi 1 track yang sama di layout 1 kolom, item
     LAIN yang kontennya pendek (mis. kartu "Rektor") ikut kepaksa
     selebar item terpanjang, meluber keluar panel/viewport sampai
     teksnya terpotong (mis. "0 agenda" jadi "0 agend"), padahal tidak
     ada horizontal scrollbar sama sekali di halaman (overflow-nya
     "hilang" ditelan overflow:hidden di elemen pembungkus, bukan
     kelihatan sebagai scroll). 'minmax(0, 1fr)' memaksa minimum track
     jadi 0, jadi track-nya benar-benar menyesuaikan lebar kolom yang
     tersedia, bukan lebar konten terpanjang di dalamnya. */
  .picker-layout,
  .detail-grid,
  .section-grid,
  .agenda-pimpinan-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* .form-row aslinya flex (bukan grid) -> tinggal ganti arah jadi kolom */
  .form-row { flex-direction: column; gap: 12px; }

  .stat-cards    { grid-template-columns: repeat(2, 1fr); }
  .approval-grid { grid-template-columns: repeat(2, 1fr); }
  .upcoming-grid { grid-template-columns: 1fr; }
  .time-grid     { grid-template-columns: 1fr; }

  /* Baris header/aksi yang tadinya flex row rapat -> boleh melipat ke bawah */
  .main-header, .page-header, .top-bar, .search-row, .am-tabs {
    flex-wrap: wrap;
  }

  /* FIX: di layar sempit, tab pimpinan (nama lengkap bisa sepanjang
     "Wakil Rektor Bidang Akademik dan Kemahasiswaan") tidak muat dan
     jadi terpotong tanpa petunjuk bisa discroll. Rata-kiri + gap rapat
     supaya tab pertama selalu mulai dari tepi kiri (bukan "melayang"
     di tengah dengan ujung terpotong di kedua sisi). Toggle ke label
     singkat sendiri ada di breakpoint ≤1279px (lihat di atas — dipisah
     karena ambang lebarnya beda dari breakpoint mobile ini). */
  .pimpinan-tabs {
    justify-content: flex-start;
    gap: 4px;
    padding: 6px 10px 0 10px;
  }
  .pimpinan-tab .pt-label { padding: 9px 14px; font-size: 12.5px; }
}

/* ---------- ≤600px : kartu daftar status ditumpuk + kontrol ramah sentuh ----------
   Breakpoint sendiri (bukan menumpang ≤900px) karena yang jadi patokan di
   sini adalah lebar KARTU: sampai ~600px, susunan 3 kolom
   (tanggal | isi | badge) masih muat; di bawah itu kolom isi tersisa terlalu
   sempit sehingga judul kegiatan hampir selalu terpotong elipsis. */
@media (max-width: 600px) {
  /* Baris atas: tanggal (mendatar) + badge; detail kegiatan turun ke baris
     berikutnya dengan lebar penuh. */
  .schedule-item { flex-wrap: wrap; gap: 10px 12px; padding: 14px 10px; }

  .sched-date {
    order: 1; display: flex; align-items: baseline; gap: 6px;
    min-width: 0; text-align: left;
  }
  .sched-day-num { font-size: 20px; }

  .sched-meta {
    order: 2; margin-left: auto;
    flex-direction: row; align-items: center; justify-content: flex-end;
    flex-wrap: wrap; gap: 6px;
  }
  .sched-content { order: 3; flex: 1 0 100%; }

  /* Judul boleh turun baris — elipsis di layar sempit memotong terlalu banyak */
  .sched-title   { white-space: normal; }
  .sched-chevron { margin-top: 0; }
  .sched-detail  { grid-template-columns: 1fr; }

  /* '.schedule-list { overflow-y: visible }' sudah di-set di breakpoint
     ≤900px (satu blok dengan '.timeline'/'.am-main'/'.buat-main', lihat
     komentar di sana) — tidak perlu diulang di sini karena ≤600px selalu
     berarti ≤900px juga aktif. */

  /* Toolbar pencarian & urutkan: masing-masing satu baris penuh */
  .status-search, .status-sort { flex: 1 1 100%; }

  /* Pagination ringkas: teks "Sebelumnya/Selanjutnya" disembunyikan,
     tombol dibesarkan supaya nyaman disentuh. */
  .pagination.center { flex-wrap: wrap; gap: 6px; }
  .page-btn { min-width: 38px; height: 38px; padding: 0 10px; }
  .page-btn .pg-text { display: none; }
}

/* ---------- ≤480px : HP kecil — rapatkan padding & ukuran teks ---------- */
@media (max-width: 480px) {
  /* FIX: `body { padding: 8px; }` di sini me-reset SEMUA sisi (termasuk
     padding-bottom yang di-set di breakpoint ≤900px untuk jarak aman dari
     '.mobile-bottom-nav') karena kebanyakan HP asli lebarnya <480px, jadi
     kedua media query ini aktif bersamaan — aturan yang ditulis
     belakangan di file ini yang menang. padding-bottom tetap dipertahankan
     sama seperti breakpoint ≤900px (lihat perhitungannya di sana), cuma
     sisi kiri/kanan/atas yang dirapatkan. */
  body { padding: 8px; padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }

  .main, .status-main, .am-main, .main-content, .right-card {
    padding: 18px 16px;
  }

  .stat-cards { grid-template-columns: 1fr; }

  .am-table th, .am-table td { padding: 10px 8px; font-size: 12.5px; }

  .main-header .date,
  .status-header h1,
  .am-header h1 { font-size: 19px; }
}