/* CoreNet Absensi, Shift & Cuti (CAA) — tema aplikasi.
   ============================================================
   Bagian dari SATU keluarga desain CoreNet: sidebar gelap, kerangka
   shell + top + content, kartu radius 14, kelas .caa-stat/.caa-row/.caa-card,
   dan navigasi dua tingkat ke samping (kepala grup di batang, isinya melayang).
   H01, H02, dan H03 memakai kerangka yang sama persis.

   YANG BERBEDA HANYA WARNA AKSEN, DAN ANGKANYA BUKAN SELERA:
   ia diambil dari kolom `warna` produk ini di katalog portal
   (CAF-LAB app/Modules/Catalog/.../apps.json).

       I02  #2563eb  biru      Manajemen Aset & Lisensi IT
       H01  #7c3aed  ungu      HRIS Karyawan
       H02  #0f766e  teal      Absensi, Shift & Cuti   <- berkas ini
       H03  #15803d  hijau     Payroll & Slip Gaji

   Sebabnya nyata: H01, H02, dan H03 dijual ke pembeli yang sama dan sering
   terpasang berdampingan di satu perusahaan. Tiga aplikasi dengan kerangka
   identik DAN warna identik membuat orang mengira ia salah membuka tab —
   dan pada aplikasi absensi, "salah tab" berarti data kehadiran diketik ke
   sistem penggajian.

   Netralnya (sidebar navy, kertas, garis) SENGAJA sama untuk ketiganya. Yang
   membedakan cukup satu hal, dan satu hal itu harus konsisten di setiap layar.
   ============================================================ */
:root{
  /* aksen produk — teal H02 dari katalog */
  --caa-primary:#0f766e; --caa-primary-d:#0b5b55; --caa-accent:#2dd4bf;
  /* `--caa-primary-rgb` ada supaya bayangan dan latar transparan ikut berubah
     saat aksennya diganti. Sebelumnya rgba(67,83,196,…) dipatri di sembilan
     tempat, dan mengganti warna produk berarti sembilan suntingan yang salah
     satunya pasti terlewat. */
  --caa-primary-rgb:15,118,110;

  /* netral keluarga — SAMA untuk H01/H02/H03 */
  --caa-sidebar:#182a41; --caa-sidebar-2:#0f1a26;
  --caa-sidebar-ink:#c6d4e2; --caa-sidebar-ink-mut:#8b9cb0;
  --caa-bg:#f4f7f5; --caa-card:#ffffff; --caa-line:rgba(18,25,30,.09);

  /* semantik — TERPISAH dari aksen dengan sengaja. Pada H03 aksennya hijau dan
     "berhasil" juga hijau, sehingga keduanya tertukar; di sini aksennya teal
     sehingga hijau tetap berarti satu hal saja. */
  --caa-ok:#15803d; --caa-warn:#b7791f; --caa-bad:#c2410c;

  --caa-radius:14px; --caa-side-w:252px;
  --caa-shadow:0 1px 2px rgba(18,25,30,.05), 0 10px 26px -18px rgba(18,25,30,.3);
}
[data-bs-theme="dark"]{
  --caa-primary:#2dd4bf; --caa-primary-d:#14b8a6; --caa-primary-rgb:45,212,191;
  --caa-bg:#0d1310; --caa-card:#141d1a; --caa-sidebar:#0f1a26; --caa-sidebar-2:#0a1119;
  --caa-line:rgba(255,255,255,.09);
  --caa-ok:#4abe72; --caa-warn:#d6a44f; --caa-bad:#e08055;
  --caa-shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 26px -18px rgba(0,0,0,.8);
  --bs-body-bg:#0d1310; --bs-body-color:#e2ebe5;
}
body{background:var(--caa-bg);font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;}
a{color:var(--caa-primary);text-decoration:none;} a:hover{color:var(--caa-primary-d);}
.btn-primary{--bs-btn-bg:var(--caa-primary);--bs-btn-border-color:var(--caa-primary);--bs-btn-hover-bg:var(--caa-primary-d);--bs-btn-hover-border-color:var(--caa-primary-d);--bs-btn-active-bg:var(--caa-primary-d);}
.btn-outline-primary{--bs-btn-color:var(--caa-primary);--bs-btn-border-color:var(--caa-primary);--bs-btn-hover-bg:var(--caa-primary);--bs-btn-hover-border-color:var(--caa-primary);}
.text-primary{color:var(--caa-primary)!important;}
.fw-600{font-weight:600;}

/* ---------- kerangka ---------- */
.caa-shell{display:flex;min-height:100vh;}
.caa-side{width:var(--caa-side-w);background:var(--caa-sidebar);color:var(--caa-sidebar-ink);position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:1040;transition:transform .2s;}
.caa-side__brand{display:flex;align-items:center;gap:.6rem;padding:1.1rem 1.25rem;color:#fff;font-weight:700;font-size:1.05rem;}
.caa-side__brand .bi{color:var(--caa-accent);font-size:1.35rem;}
.caa-side__brand small{display:block;font-weight:400;opacity:.55;font-size:.62rem;letter-spacing:.14em;}
.caa-side__nav{overflow-y:auto;padding:.25rem .75rem 1.5rem;flex:1;}
.caa-side__label{font-size:.64rem;text-transform:uppercase;letter-spacing:.13em;color:var(--caa-sidebar-ink-mut);padding:.95rem .75rem .35rem;}
.caa-side__link{display:flex;align-items:center;gap:.65rem;padding:.5rem .75rem;border-radius:10px;color:var(--caa-sidebar-ink);font-size:.9rem;font-weight:500;}
.caa-side__link .bi{font-size:1.05rem;width:1.25rem;text-align:center;opacity:.85;}
.caa-side__link:hover{background:var(--caa-sidebar-2);color:#fff;}
.caa-side__link.active{background:var(--caa-primary);color:#fff;box-shadow:0 4px 14px rgba(var(--caa-primary-rgb), .38);}
.caa-side__n{margin-left:auto;font-size:.72rem;opacity:.6;font-variant-numeric:tabular-nums;}
.caa-side__link.active .caa-side__n{opacity:.9;}
/* Lencana tugas menunggu. Diberi warna, bukan sekadar angka pudar:
   yang ini menuntut tindakan, sedangkan cacah biasa hanya keterangan. */
.caa-side__n--tugas{opacity:1;background:var(--caa-primary);color:#fff;
  border-radius:999px;min-width:1.35rem;text-align:center;padding:0 .35rem;
  font-weight:600;line-height:1.35rem;}
.caa-side__link.active .caa-side__n--tugas{background:#fff;color:var(--caa-primary);}
.caa-side__foot{padding:.75rem 1.25rem;border-top:1px solid rgba(255,255,255,.07);font-size:.7rem;color:var(--caa-sidebar-ink-mut);}
.caa-main{flex:1;margin-left:var(--caa-side-w);display:flex;flex-direction:column;min-width:0;}
.caa-top{height:62px;background:var(--caa-card);border-bottom:1px solid var(--caa-line);display:flex;align-items:center;gap:.4rem;padding:0 1.1rem;position:sticky;top:0;z-index:1030;}
.caa-top__btn{border:0;background:transparent;color:inherit;width:38px;height:38px;border-radius:10px;font-size:1.1rem;position:relative;}
.caa-top__btn:hover{background:rgba(0,0,0,.05);}
[data-bs-theme="dark"] .caa-top__btn:hover{background:rgba(255,255,255,.07);}
.caa-search{flex:1;max-width:560px;position:relative;}
.caa-search input{border-radius:10px;padding-left:2.2rem;background:var(--caa-bg);border-color:transparent;}
.caa-search input:focus{background:var(--caa-card);}
.caa-search .bi{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);opacity:.5;pointer-events:none;}
.caa-search kbd{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);font-size:.65rem;opacity:.45;}
.caa-content{padding:1.4rem;flex:1;}
.caa-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:1.15rem;}
.caa-head h1{font-size:1.4rem;font-weight:700;margin:0;display:flex;align-items:center;gap:.55rem;}
.caa-head p{margin:.2rem 0 0;font-size:.85rem;}

/* ---------- kartu ---------- */
.caa-card{background:var(--caa-card);border:1px solid var(--caa-line);border-radius:var(--caa-radius);}
.caa-stat{display:block;padding:1rem 1.1rem;border-radius:var(--caa-radius);background:var(--caa-card);border:1px solid var(--caa-line);position:relative;overflow:hidden;transition:transform .12s,box-shadow .12s;color:inherit;}
.caa-stat:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,26,60,.1);color:inherit;}
.caa-stat__i{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:1.15rem;color:#fff;margin-bottom:.6rem;}
.caa-stat__n{font-size:1.75rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;}
.caa-stat__l{font-size:.82rem;opacity:.7;margin-top:.2rem;}

/* ---------- daftar catatan ---------- */
.caa-row{display:flex;align-items:center;gap:.85rem;padding:.7rem .95rem;border-bottom:1px solid var(--caa-line);color:inherit;}
.caa-row:last-child{border-bottom:0;}
.caa-row:hover{background:rgba(var(--caa-primary-rgb), .05);color:inherit;}
.caa-row__i{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;font-size:1rem;flex:0 0 auto;}
.caa-row__t{font-weight:600;font-size:.93rem;}
.caa-row__s{font-size:.79rem;opacity:.65;}
.caa-row__meta{margin-left:auto;display:flex;align-items:center;gap:.5rem;font-size:.75rem;opacity:.7;flex:0 0 auto;}
.caa-tag{display:inline-block;font-size:.68rem;padding:.1rem .45rem;border-radius:6px;background:rgba(var(--caa-primary-rgb), .12);color:var(--caa-primary);margin-right:.25rem;}
[data-bs-theme="dark"] .caa-tag{background:rgba(91,110,224,.2);color:#a9b5f5;}

/* ---------- bidang detail ---------- */
.caa-field{display:flex;align-items:flex-start;gap:.75rem;padding:.62rem .9rem;border-bottom:1px solid var(--caa-line);}
.caa-field:last-child{border-bottom:0;}
.caa-field__l{width:190px;flex:0 0 auto;font-size:.78rem;opacity:.62;padding-top:.15rem;text-transform:uppercase;letter-spacing:.03em;}
.caa-field__v{flex:1;min-width:0;font-size:.92rem;word-break:break-word;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;}
.caa-field__v.is-secret{letter-spacing:.12em;}
.caa-field__a{display:flex;gap:.2rem;flex:0 0 auto;}
.caa-field__a .btn{--bs-btn-padding-y:.15rem;--bs-btn-padding-x:.45rem;--bs-btn-font-size:.78rem;}
@media (max-width:640px){ .caa-field{flex-wrap:wrap} .caa-field__l{width:100%} }

/* ---------- formulir ---------- */
.caa-form-sec{padding:1rem 1.15rem;border-bottom:1px solid var(--caa-line);}
.caa-form-sec:last-child{border-bottom:0;}
.caa-form-sec h6{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;opacity:.55;margin-bottom:.85rem;}
.form-label{font-size:.82rem;font-weight:500;margin-bottom:.25rem;}
.form-text{font-size:.75rem;}
.caa-custom-row{display:grid;grid-template-columns:minmax(140px,1fr) minmax(180px,2fr) auto auto;gap:.5rem;align-items:center;margin-bottom:.5rem;}
@media (max-width:720px){ .caa-custom-row{grid-template-columns:1fr 1fr;} }

/* ---------- daftar isi Panduan ----------
   Kelas tersendiri, BUKAN memakai ulang .caa-side__link. Kelas sidebar
   dirancang untuk latar navy gelap: warna hover-nya putih di atas navy.
   Dipakai di dalam kartu putih, hasilnya latar gelap dengan tulisan gelap —
   tidak terbaca. Di sini latar dan tulisan hover ditetapkan berpasangan. */
.caa-toc__link{
  display:flex;align-items:center;gap:.65rem;
  padding:.5rem .7rem;border-radius:9px;
  color:var(--bs-body-color);font-size:.85rem;font-weight:500;
  transition:background .12s,color .12s;
}
.caa-toc__link .bi{font-size:1rem;width:1.2rem;text-align:center;opacity:.65;}
.caa-toc__link:hover,
.caa-toc__link:focus-visible{
  background:var(--caa-primary);
  color:#fff;                       /* dipasangkan dengan latarnya, selalu terbaca */
}
.caa-toc__link:hover .bi,
.caa-toc__link:focus-visible .bi{opacity:1;color:#fff;}
.caa-toc__link:target,
.caa-toc__link.active{background:rgba(var(--caa-primary-rgb), .12);color:var(--caa-primary);}
[data-bs-theme="dark"] .caa-toc__link:target,
[data-bs-theme="dark"] .caa-toc__link.active{background:rgba(91,110,224,.22);color:#a9b5f5;}

/* Judul bab yang dituju ToC diberi jarak dari topbar lengket. */
.caa-artikel [id]{scroll-margin-top:80px;}

/* ---------- lain-lain ---------- */
.caa-empty{text-align:center;padding:3rem 1rem;opacity:.6;}
.caa-empty .bi{font-size:2.6rem;display:block;margin-bottom:.65rem;opacity:.4;}
.caa-pw{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:1.35rem;letter-spacing:.04em;word-break:break-all;}
.caa-meter{height:6px;border-radius:3px;background:rgba(0,0,0,.09);overflow:hidden;}
.caa-meter span{display:block;height:100%;transition:width .2s,background .2s;}
.caa-toast{position:fixed;bottom:1.25rem;left:50%;transform:translateX(-50%) translateY(1rem);background:#1d2340;color:#fff;padding:.6rem 1.1rem;border-radius:10px;font-size:.85rem;opacity:0;transition:.2s;z-index:2000;pointer-events:none;box-shadow:0 8px 26px rgba(0,0,0,.3);}
.caa-toast.show{opacity:1;transform:translateX(-50%);}
/* Halaman masuk & pemasangan: gradien dari sidebar keluarga ke aksen produk,
   supaya layar pertama sudah memberi tahu aplikasi mana yang sedang dibuka. */
.caa-lockwrap{min-height:100vh;display:grid;place-items:center;padding:1.5rem;background:linear-gradient(150deg,#0f1a26,#134e4a 55%,var(--caa-primary));}
.caa-lock{width:100%;max-width:430px;background:var(--caa-card);border-radius:18px;padding:2rem 1.85rem;box-shadow:0 22px 60px rgba(10,15,40,.4);}
.caa-lock__logo{width:54px;height:54px;border-radius:15px;background:var(--caa-primary);color:#fff;display:grid;place-items:center;font-size:1.5rem;margin:0 auto 1rem;}

@media (max-width:991px){
  .caa-side{transform:translateX(-100%);} .caa-side.show{transform:none;}
  .caa-main{margin-left:0;}
}
.caa-side__backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1035;}
.caa-side__backdrop.show{display:block;}

/* ---------- modul aset & lisensi (dibangun di atas skema) ---------- */
/* Kartu angka laporan. Kelas __label/__value dipakai halaman laporan dan
   dasbor aset; .caa-stat__l/__n yang lama tetap dipakai kartu brankas. */
.caa-stat__label{font-size:.78rem;opacity:.7;letter-spacing:.01em;}
.caa-stat__value{font-size:1.5rem;font-weight:700;line-height:1.15;margin-top:.15rem;font-variant-numeric:tabular-nums;}
.caa-stat--warn{border-left:3px solid var(--caa-warn);}
.caa-stat--bad{border-left:3px solid var(--caa-bad);}
.caa-stat--ok{border-left:3px solid var(--caa-ok);}

/* Tabel daftar modul. Kepala tabel dibuat tipis dan tenang: yang perlu
   menonjol adalah datanya, bukan judul kolomnya. */
.caa-table thead th{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;opacity:.6;font-weight:600;border-bottom-width:1px;}
.caa-table td{font-size:.9rem;}
.caa-table tbody tr:hover{background:rgba(var(--caa-primary-rgb), .045);}

/* Batang peringkat laporan — digambar dengan CSS, tanpa pustaka grafik.
   grid 3 kolom: label, batang, angka. Di layar sempit batangnya yang
   mengalah, bukan angkanya, karena angka itu isi laporannya. */
.caa-rank__row{display:grid;grid-template-columns:minmax(6rem,11rem) 1fr minmax(7rem,auto);gap:.75rem;align-items:center;padding:.4rem 0;}
.caa-rank__label{font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.caa-rank__bar{height:.55rem;border-radius:999px;background:rgba(var(--caa-primary-rgb), .12);overflow:hidden;}
.caa-rank__bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--caa-primary),var(--caa-accent));}
.caa-rank__val{text-align:right;font-size:.86rem;font-weight:600;font-variant-numeric:tabular-nums;}
.caa-rank__val small{display:block;font-weight:400;font-size:.72rem;}
[data-bs-theme="dark"] .caa-rank__bar{background:rgba(255,255,255,.08);}
@media (max-width:560px){
  .caa-rank__row{grid-template-columns:1fr auto;}
  .caa-rank__bar{grid-column:1/-1;order:3;}
}

/* Lembar label cetak: yang tampil di kertas hanya labelnya. */
.caa-label-sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.5rem;}
.caa-label{border:1px dashed var(--caa-line);border-radius:8px;padding:.6rem .7rem;background:var(--caa-card);}
.caa-label__tag{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:1rem;letter-spacing:.04em;}
.caa-label__sub{font-size:.72rem;opacity:.7;}
.caa-label svg{display:block;width:100%;height:42px;margin:.35rem 0 .2rem;}

/* ---------- kelompok menu: panel melayang ke kanan ---------- */
/* Aplikasi ini punya 34 modul. Menu vertikal yang memuat semuanya sepanjang
   48 baris — pengguna harus menggulung untuk mencapai Pengaturan, dan pada
   layar 768px tinggi separuhnya tidak pernah terlihat.

   Yang tampil di batang kiri sekarang hanya SEMBILAN baris: Dashboard dan
   delapan kepala kelompok. Isinya muncul sebagai panel melayang di sebelah
   kanan saat kelompoknya disentuh atau diklik. */

.caa-side__grupbtn{
  display:flex;align-items:center;gap:.65rem;width:100%;padding:.5rem .75rem;
  border:0;background:none;text-align:left;cursor:pointer;border-radius:10px;
  color:var(--caa-sidebar-ink);font-size:.9rem;font-weight:500;
}
.caa-side__grupbtn:hover{background:var(--caa-sidebar-2);color:#fff;}
.caa-side__grupbtn .caa-side__chev{margin-left:auto;font-size:.7rem;opacity:.45;transition:transform .15s;}
/* Kelompok yang memuat halaman terbuka ditandai — tanpa ini pengguna
   kehilangan tempatnya begitu panelnya menutup. */
.caa-side__grup.ada-aktif > .caa-side__grupbtn{background:var(--caa-sidebar-2);color:#fff;}
.caa-side__grup.ada-aktif > .caa-side__grupbtn::before{
  content:"";position:absolute;left:0;top:.55rem;bottom:.55rem;width:3px;
  border-radius:0 3px 3px 0;background:var(--caa-accent);
}
.caa-side__grup{position:relative;}
.caa-side__panel__judul{
  padding:.4rem .75rem .5rem;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--caa-sidebar-ink-mut);border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:.25rem;
}

@media (min-width:992px){
  /* overflow WAJIB visible: panel melayang adalah anak yang diposisikan
     absolut, dan `overflow-y:auto` pada induknya akan memotongnya. Aman
     karena daftar utamanya kini hanya sembilan baris. */
  .caa-side__nav{overflow:visible;}
  .caa-side__isi{
    position:absolute;left:calc(100% - .4rem);top:-.4rem;min-width:15.5rem;
    max-height:min(80vh,32rem);overflow-y:auto;display:none;
    padding:.4rem;border-radius:12px;background:var(--caa-sidebar);
    border:1px solid rgba(255,255,255,.09);box-shadow:0 16px 44px rgba(0,0,0,.4);
    z-index:1060;
  }
  /* Dibuka oleh sentuhan tetikus MAUPUN klik: yang pertama cepat untuk
     penjelajahan, yang kedua perlu bagi papan sentuh dan papan ketik. */
  .caa-side__grup:hover > .caa-side__isi,
  .caa-side__grup.buka > .caa-side__isi{display:block;}
  .caa-side__grup:hover > .caa-side__grupbtn{background:var(--caa-sidebar-2);color:#fff;}
  .caa-side__grupbtn .caa-side__chev{transform:rotate(-90deg);}
}

@media (max-width:991.98px){
  /* Di layar sempit tidak ada ruang di sebelah kanan, jadi panelnya turun
     sebagai akordeon biasa. */
  .caa-side__isi{display:none;padding-left:.35rem;}
  .caa-side__grup.buka > .caa-side__isi{display:block;}
  .caa-side__grup.buka > .caa-side__grupbtn .caa-side__chev{transform:rotate(0);}
  .caa-side__grupbtn .caa-side__chev{transform:rotate(-90deg);}
  .caa-side__panel__judul{display:none;}
}

/* ---------- merek: logo unggahan pemilik ---------- */
/* Logo dibatasi tinggi, bukan lebar: logo perusahaan datang dalam bentuk
   kotak maupun memanjang, dan membatasi tingginya membuat keduanya duduk
   rapi di baris yang sama tanpa memaksa pemilik memotong gambarnya lebih
   dulu. `object-fit:contain` menjaga proporsinya. */
.caa-side__brand{text-decoration:none;}
.caa-side__brand:hover{color:#fff;}
.caa-side__logo{height:30px;max-width:112px;object-fit:contain;border-radius:6px;flex:0 0 auto;}
.caa-side__brand span{min-width:0;overflow:hidden;}
.caa-side__brand span small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Pratinjau di halaman Pengaturan diberi latar kotak-kotak supaya logo
   berlatar transparan tetap terlihat batasnya. */
.caa-logo-pratinjau{
  display:inline-flex;align-items:center;justify-content:center;padding:.6rem .9rem;border-radius:10px;
  border:1px solid var(--caa-line);
  background-image:linear-gradient(45deg,rgba(128,128,128,.12) 25%,transparent 25%,transparent 75%,rgba(128,128,128,.12) 75%),
                   linear-gradient(45deg,rgba(128,128,128,.12) 25%,transparent 25%,transparent 75%,rgba(128,128,128,.12) 75%);
  background-size:14px 14px;background-position:0 0,7px 7px;
}
.caa-logo-pratinjau img{height:44px;max-width:220px;object-fit:contain;display:block;}

/* ---------- asisten lokal ---------- */
/* Tombol melayang di kanan bawah — jauh dari tombol Simpan di kanan bawah
   formulir? Tidak: formulir menaruh tombolnya di dalam kartu, sementara ini
   menempel pada jendela. Keduanya tidak pernah bertumpuk. */
.caa-ai__btn{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:1050;
  width:3rem;height:3rem;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--caa-primary),var(--caa-accent));color:#fff;
  box-shadow:0 8px 24px rgba(var(--caa-primary-rgb), .4);font-size:1.25rem;
  display:grid;place-items:center;transition:transform .15s,box-shadow .15s;
}
.caa-ai__btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(var(--caa-primary-rgb), .5);}

.caa-ai{
  position:fixed;right:1.1rem;bottom:5rem;z-index:1051;
  width:min(23rem,calc(100vw - 2rem));max-height:min(32rem,calc(100vh - 7rem));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--caa-card);border:1px solid var(--caa-line);border-radius:14px;
  box-shadow:0 18px 50px rgba(16,24,40,.28);
}
.caa-ai__kepala{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.6rem .85rem;font-weight:600;font-size:.9rem;
  background:var(--caa-primary);color:#fff;
}
.caa-ai__isi{flex:1;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column;gap:.5rem;}
.caa-ai__pesan{padding:.5rem .7rem;border-radius:10px;font-size:.85rem;line-height:1.5;white-space:pre-wrap;}
.caa-ai__pesan--ai{background:rgba(var(--caa-primary-rgb), .08);}
.caa-ai__pesan--saya{background:var(--caa-primary);color:#fff;align-self:flex-end;max-width:85%;}
.caa-ai__pesan--galat{background:rgba(220,91,87,.12);color:var(--caa-bad);}
.caa-ai__kaki{display:flex;gap:.4rem;padding:.6rem;border-top:1px solid var(--caa-line);}
[data-bs-theme="dark"] .caa-ai__pesan--ai{background:rgba(255,255,255,.07);}


/* ================= CETAK =================================================
   Aturan cetak DIKUMPULKAN DI SINI, tidak lagi tersebar. Sebelumnya ada tiga
   blok @media print terpisah yang saling menimpa, dan dua di antaranya masih
   menyebut kelas milik pilot I02 (`.caa-topbar`, `.caa-ai`) yang tidak pernah
   ada di H02 — sehingga bilah atas ikut tercetak sementara aturannya terlihat
   seolah sudah mengurusnya.
   ======================================================================== */
@media print {
  /* Ukuran kertas dan tepi. `portrait` disebut eksplisit: tabel lebar akan
     dipaksa `landscape` oleh sebagian browser bila dibiarkan, dan halaman yang
     berganti arah di tengah berkas membuat arsip fisiknya sulit ditumpuk. */
  @page { size: A4 portrait; margin: 14mm 12mm 16mm; }

  html, body { background: #fff !important; }

  /* Yang tidak pernah ikut tercetak: navigasi, tombol, formulir saringan,
     dan apa pun yang ditandai `.caa-print-hide`. Saringan sengaja dibuang —
     hasilnya sudah tercermin di kop, dan kotak pilihan yang tercetak terbaca
     sebagai bagian dari laporan. */
  .caa-side, .caa-side__backdrop, .caa-top, .caa-topbar,
  .caa-print-hide, .btn, form, .caa-side__foot, .caa-flash {
    display: none !important;
  }

  .caa-main    { margin-left: 0 !important; }
  .caa-content { padding: 0 !important; }
  .caa-shell   { display: block !important; }

  /* Kartu kehilangan bingkai dan bayangannya: keduanya menghabiskan tinta dan
     tidak menambah satu pun keterangan di atas kertas. */
  .caa-card {
    border: 0 !important; box-shadow: none !important;
    background: #fff !important; padding: 0 !important;
  }

  .caa-page-head { display: none !important; }

  /* ---- kop, hanya muncul saat dicetak ---- */
  .caa-kop { display: block !important; margin-bottom: 10mm; }
  .caa-kop__perusahaan {
    font-size: 13pt; font-weight: 700; letter-spacing: .01em;
  }
  .caa-kop__judul {
    font-size: 11pt; font-weight: 600; margin-top: 1mm;
  }
  .caa-kop__meta {
    font-size: 8.5pt; color: #444; margin-top: 2mm;
    border-top: 1px solid #999; padding-top: 2mm;
    display: flex; justify-content: space-between; gap: 6mm;
  }

  /* ---- tabel ---- */
  table { width: 100% !important; border-collapse: collapse !important; font-size: 9pt; }

  /* Judul kolom diulang di tiap lembar. Rekap dua ratus karyawan memakan lima
     lembar, dan empat di antaranya akan berisi angka tanpa nama kolom. */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr    { break-inside: avoid; page-break-inside: avoid; }

  th, td {
    border: 1px solid #bbb !important; padding: 1.5mm 2mm !important;
    color: #000 !important; background: #fff !important;
  }
  th { background: #eee !important; font-weight: 700; }
  td.text-end, th.text-end { text-align: right; }

  /* Lencana dicetak sebagai teks biasa: latar berwarna menjadi kotak abu-abu
     pada pencetak hitam-putih, dan tulisan putih di atasnya menghilang. */
  .badge {
    background: transparent !important; color: #000 !important;
    border: 0 !important; padding: 0 !important; font-weight: 600;
  }

  /* Tautan tidak diikuti alamatnya. Cetakan ini dibaca di atas kertas; URL
     panjang di tengah kalimat hanya memecah barisnya. */
  a[href]:after { content: "" !important; }

  .table-responsive, .caa-card[style*="overflow"] { overflow: visible !important; }
}

/* Kop hanya untuk kertas. Di layar ia tidak pernah terlihat, sehingga tidak
   ada yang perlu disembunyikan atau ditata dua kali. */
.caa-kop { display: none; }