/* =============================================================================
   glass.css — lapisan permukaan "glassmorphism" di atas bracket.css
   Sprint 4 tugas 4.1 (token) + 4.2 (kulit global) + 4.3 (halaman pilot).

   CARA PAKAI: dimuat lewat @section('page_css') pada halaman yang ikut pilot,
   BUKAN di layout. Selama file ini hanya dimuat satu halaman, selektor global
   di bawah (body, .br-header, .br-sideleft) efektif ter-scope ke halaman itu —
   halaman lain tidak tersentuh sama sekali dan tidak perlu diuji ulang.

   MEMBATALKANNYA: hapus satu blok @section('page_css') di blade halaman.
   Tidak ada markup bracket.css yang diubah, jadi tidak ada yang perlu dipulihkan.

   ATURAN YANG DIPEGANG FILE INI:
   kaca untuk KULIT (sidebar, header, kartu, toolbar, modal);
   SOLID untuk DATA (tabel, angka, teks kecil). Blur di belakang teks padat
   menurunkan kontras dan berubah mengikuti apa yang kebetulan lewat di
   belakangnya — itu kegagalan keterbacaan, bukan gaya.
   ========================================================================== */

:root {
  /* Brand — diambil dari custom.css, bukan warna baru */
  --gl-brand:        #0866C6;
  --gl-brand-ink:    #0A5AAC;
  --gl-accent:       #F49917;
  --gl-accent-ink:   #A5650B;
  --gl-nav:          #1D2939;

  /* Teks */
  --gl-ink:          #1B2534;
  --gl-ink-2:        #40495A;
  --gl-ink-3:        #6E7887;
  --gl-ink-4:        #8A94A3;

  /* G1 — navigasi (sidebar & header)
     --gl-g1-nav-bg tadinya rgba(29,41,57,0.82). Backdrop di baliknya adalah
     latar halaman yang TERANG (#EEF1F6 + mesh pucat), dan compositing 82%
     navy dengan 18% terang itu tidak netral — hasilnya rgb(~67,77,91), abu
     kebiruan pudar, bukan navy. Itu sebabnya sidebar terlihat "berasap".
     Dinaikkan ke 0.95 (nyaris pekat) supaya warnanya tetap navy; sisa 5%
     transparansi + saturate lebih tinggi cukup untuk kesan kaca tanpa
     mengorbankan kedalaman warnanya. */
  --gl-g1-nav-bg:    rgba(20, 28, 40, 0.95);
  --gl-g1-top-bg:    rgba(255, 255, 255, 0.66);
  --gl-g1-blur:      blur(18px) saturate(160%);
  --gl-g1-top-blur:  blur(20px) saturate(150%);

  /* G2 — kartu & toolbar */
  --gl-g2-bg:        rgba(255, 255, 255, 0.60);
  --gl-g2-blur:      blur(16px) saturate(145%);
  --gl-g2-border:    rgba(255, 255, 255, 0.72);
  --gl-g2-shadow:    0 8px 28px rgba(16, 32, 58, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.80);

  /* G3 — modal & dropdown mengambang (role switcher, kartu profil)
     Sempat dinaikkan opacity-nya lagi (0.86 -> 0.94) + blur & saturate
     diperkuat: pada 0.86 backdrop-filter tidak cukup menyamarkan warna
     solid pekat di baliknya (mis. banner biru header), jadi bocor
     tembus dan kartu terlihat kotor alih-alih premium. */
  --gl-g3-bg:        rgba(255, 255, 255, 0.94);
  --gl-g3-blur:      blur(34px) saturate(180%);
  --gl-g3-shadow:    0 28px 64px rgba(10, 20, 38, 0.30), 0 2px 8px rgba(10, 20, 38, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.95);

  /* S0 — permukaan data. TIDAK PERNAH berkaca. */
  --gl-s0-bg:        #FFFFFF;
  --gl-s0-bg-alt:    #FAFCFE;
  --gl-s0-head:      #F7F9FC;
  --gl-s0-border:    #DDE3EC;
  --gl-s0-rule:      #F0F3F8;

  --gl-radius:       14px;
  --gl-radius-sm:    9px;
  --gl-control-h:    36px;
}

/* -----------------------------------------------------------------------------
   Latar — sumber refraksi
   backdrop-filter tidak punya apa pun untuk dibiaskan di atas warna rata, jadi
   #E9ECEF diganti mesh dua warna brand beropasitas rendah. `fixed` supaya mesh
   tidak ikut menggulung; kalau ikut, blur di kulit berkedip saat scroll.
-------------------------------------------------------------------------------*/
body {
  background-color: #EEF1F6;
  background-image:
    radial-gradient(920px 620px at 10% -8%,  rgba(8, 102, 198, 0.22), transparent 62%),
    radial-gradient(720px 520px at 92% 4%,   rgba(244, 153, 23, 0.18), transparent 64%),
    radial-gradient(880px 720px at 62% 108%, rgba(8, 102, 198, 0.14), transparent 66%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* -----------------------------------------------------------------------------
   G1 — kulit navigasi
-------------------------------------------------------------------------------*/
.br-logo,
.br-header {
  background-color: var(--gl-g1-top-bg);
  -webkit-backdrop-filter: var(--gl-g1-top-blur);
  backdrop-filter: var(--gl-g1-top-blur);
  border-bottom: 1px solid rgba(255, 255, 255, 0.60);
  box-shadow: 0 1px 24px rgba(16, 32, 58, 0.07);
}
/* Strip putih 3px penambal celah logo/header milik bracket; jadi terlihat
   sebagai garis buram begitu keduanya tembus pandang. */
.br-header::before { display: none; }

.br-logo { border-right: 1px solid rgba(255, 255, 255, 0.55); }

/* -----------------------------------------------------------------------------
   Header kanan — switcher role & profil.
   .br-header sendiri sudah berkaca sejak G1 di atas; overlay dropdown-nya BELUM
   pernah disentuh dan masih dropdown Bootstrap bawaan tema (kotak, bayangan
   default, nempel rapat ke trigger, label "Daftar Role" masih teal #17A2B8 dari
   tema asal — tidak ada hubungannya dengan brand biru/oranye di sisa halaman).
   Disamakan ke bahasa panel mengambang G3 yang sudah dipakai select2 & modal.
-------------------------------------------------------------------------------*/
.br-header-left .navicon-left {
  border-right: none;
  width: 52px;
}
.br-header-left .navicon-left a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: background-color .15s ease, color .15s ease;
}
.br-header-left .navicon-left a:hover,
.br-header-left .navicon-left a:focus {
  background-color: rgba(8, 102, 198, 0.08);
  color: var(--gl-brand-ink);
}

.br-header-right .nav-link {
  border-radius: 999px;
  padding: 7px 12px;
  transition: background-color .15s ease;
}
.br-header-right .nav-link:hover,
.br-header-right .nav-link:focus {
  background-color: rgba(8, 102, 198, 0.08);
}

/* Selector disamakan persis dengan custom.css:42 (.br-header-right .dropdown
   .dropdown-menu) supaya menang lewat spesifisitas + urutan muat (glass.css
   sesudah custom.css), bukan !important — sama seperti trik prefix .thm-unud
   di file ini untuk select2. */
.br-header-right .dropdown .dropdown-menu {
  background-color: var(--gl-g3-bg);
  -webkit-backdrop-filter: var(--gl-g3-blur);
  backdrop-filter: var(--gl-g3-blur);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  box-shadow: var(--gl-g3-shadow);
  padding: 6px;
  margin-top: 12px;
  overflow: hidden;
}
.br-header-right .dropdown-menu-label {
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(16, 32, 58, 0.08);
}
.br-header-right .dropdown-menu-label label {
  color: var(--gl-ink-4);
  font-size: 10.5px;
  letter-spacing: .6px;
}
.br-header-right .dropdown-menu .nav.nav-style-1 { padding: 6px; }
.br-header-right .dropdown-menu .nav-style-1 .nav-link {
  border-radius: 10px;
  color: var(--gl-ink-2);
  font-size: 13px;
  padding: 9px 12px;
}
.br-header-right .dropdown-menu .nav-style-1 .nav-link:hover {
  background-color: rgba(8, 102, 198, 0.10);
  color: var(--gl-brand-ink);
}
.br-header-right .dropdown-menu-header-profile img {
  box-shadow: 0 8px 20px rgba(8, 102, 198, 0.28), 0 0 0 3px rgba(255, 255, 255, 0.95), 0 0 0 4px rgba(8, 102, 198, 0.12);
}
.br-header-right .dropdown-menu-header-profile .logged-fullname { color: var(--gl-ink); }
.br-header-right .dropdown-menu-header-profile hr {
  border-color: rgba(16, 32, 58, 0.08);
  margin: 14px 0;
}
.br-header-right .user-profile-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 9px 10px;
  color: var(--gl-ink-2);
  font-size: 13px;
  transition: background-color .15s ease, color .15s ease;
}
.br-header-right .user-profile-nav a:hover {
  background-color: rgba(8, 102, 198, 0.10);
  color: var(--gl-brand-ink);
}

.br-sideleft {
  background-color: var(--gl-g1-nav-bg);
  -webkit-backdrop-filter: var(--gl-g1-blur);
  backdrop-filter: var(--gl-g1-blur);
  border-right: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 1px 0 32px rgba(12, 22, 40, 0.18);
}

.br-menu-link { border-radius: 8px; }

/* Kelas aktif ditempel AppSession::genMenu() pada <a class="br-menu-link active">,
   bukan pada <li>. Prefix .thm-unud menyamai spesifisitas custom.css; glass.css
   dimuat sesudahnya sehingga menang tanpa perlu !important. */
.thm-unud .br-menu-link.active {
  background-image: linear-gradient(90deg, rgba(8, 102, 198, 0.92) 0%, rgba(8, 102, 198, 0.62) 100%);
  box-shadow: 0 4px 14px rgba(8, 102, 198, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

/* -----------------------------------------------------------------------------
   G1b — merek "Satu Data Unud" + kartu navigasi
   Teks merek di strip atas, dan sidebar menjadi SATU kartu: judul kecil, menu yang
   scroll sendiri; identitas Direktorat Transformasi Digital di kepala kartu (flex
   column, area menu min-height:0 supaya bisa menyusut dan scroll sendiri).

   Sengaja memakai <strong>, bukan <span>/<i>: custom.css menata `.br-logo > a span`
   dan `.br-logo > a i` (warna, bobot 300, geser saat hover) untuk merek lama
   "[NAMA]". Elemen lain menghindari tabrakan kaskade itu tanpa !important.
-------------------------------------------------------------------------------*/
.br-logo .sd-brand {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.28em;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -0.35px;
  white-space: nowrap;
}
.br-logo .sd-brand:hover,
.br-logo .sd-brand:focus { text-decoration: none; }
.br-logo .sd-brand:focus-visible {
  outline: 2px solid var(--gl-brand);
  outline-offset: 5px;
  border-radius: 6px;
}
.br-logo .sd-a,
.br-logo .sd-b { font-weight: 800; }
.br-logo .sd-a { color: var(--gl-ink); }
.br-logo .sd-b { color: var(--gl-brand); }
.dark-mode .br-logo .sd-a { color: #FFFFFF; }

.br-sideleft .sl-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

/* Kartu menu: label + daftar menu. Bingkai garis tipis + bayangan membuatnya terbaca
   sebagai kartu sendiri, terpisah dari kartu logo di atasnya. */
.sl-card .sl-menu {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.026) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px rgba(6, 12, 24, 0.28);
}

.sl-card .sl-label {
  flex: none;
  margin: 0;
  padding: 15px 18px 8px;
  color: rgba(255, 255, 255, 0.42);
  letter-spacing: 1.4px;
}

/* Area menu: satu-satunya bagian yang scroll. `position: relative` dibutuhkan
   PerfectScrollbar untuk menempatkan rail-nya. Pudar 22px di tepi bawah memberi
   petunjuk masih ada menu di bawah tanpa garis potong keras. */
.sl-card .sl-nav {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 2px 8px 14px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}
.sl-card .sl-nav .ps__rail-y { margin: 4px 0 18px; }

/* Kartu logo: berkas asli Direktorat Transformasi Digital (tanpa crop atau olah warna)
   selebar kartu. Berdiri sendiri sebagai kartu membulat dengan garis tepi terang, jadi
   jelas terpisah dari kartu menu di bawahnya. */
.sl-card .sl-head {
  flex: none;
  overflow: hidden;
  line-height: 0;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: #FFFFFF;
  box-shadow: 0 10px 26px rgba(3, 8, 18, 0.38);
}
.sl-logo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  background: #FFFFFF;
}

/* Sidebar ciut (rail 60px, hanya ikon) — bracket.js melebarkannya lagi saat kursor
   masuk (body.expand-menu), jadi aturan ini hanya berlaku selama benar-benar ciut.
   Kartu dilepas dan logo mengecil ke 40px (utuh, tidak dipotong) di atas ikon menu. */
@media (min-width: 992px) {
  .collapsed-menu:not(.expand-menu) .br-sideleft .sl-card { gap: 8px; }
  .collapsed-menu:not(.expand-menu) .sl-card .sl-menu {
    border-color: transparent;
    background: none;
    box-shadow: none;
  }
  .collapsed-menu:not(.expand-menu) .sl-card .sl-nav { padding-left: 0; padding-right: 0; }
  .collapsed-menu:not(.expand-menu) .sl-card .sl-head {
    width: 40px;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(3, 8, 18, 0.32);
  }
}

@media (prefers-reduced-motion: reduce) {
  .br-sideleft .sl-card { transition: none; }
}

/* -----------------------------------------------------------------------------
   Kanvas halaman — wadah putih besar dibubarkan supaya mesh terlihat
-------------------------------------------------------------------------------*/
.glass-page {
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.glass-page .br-section-label { color: var(--gl-ink); font-weight: 600; }
.glass-page .br-section-text  { color: var(--gl-ink-3); }

/* -----------------------------------------------------------------------------
   G2 — toolbar & kartu
-------------------------------------------------------------------------------*/
.glass-toolbar,
.glass-card {
  background-color: var(--gl-g2-bg);
  -webkit-backdrop-filter: var(--gl-g2-blur);
  backdrop-filter: var(--gl-g2-blur);
  border: 1px solid var(--gl-g2-border);
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-g2-shadow);
}

.glass-toolbar { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
.glass-card    { padding: 18px 20px; }

/* Aksen warna di pinggir kiri kartu ringkasan (summary card) — dipasangkan
   dengan warna teks angka yang sudah dipakai di tiap kartu lewat custom
   property --gl-card-accent (di-set inline per kartu), supaya tidak perlu
   satu class per warna. Fallback ke warna brand kalau accent belum di-set. */
.glass-card.gl-card-accent {
  border-left: 4px solid var(--gl-card-accent, var(--gl-brand));
  padding-left: 16px;
}

.glass-toolbar .toolbar-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #7A8493;
  padding-left: 4px;
}

/* Kontrol di dalam toolbar naik ke buram penuh — teksnya kecil dan dibaca,
   bukan sekadar kulit. */
.glass-toolbar .form-control,
.glass-toolbar .select2-container--default .select2-selection--single {
  height: var(--gl-control-h);
  border-radius: var(--gl-radius-sm);
  border: 1px solid #D8DFE9;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--gl-ink);
  font-size: 13px;
}
.glass-toolbar .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px;
  color: var(--gl-ink);
  padding-left: 12px;
}
.glass-toolbar .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 34px;
}

/* -----------------------------------------------------------------------------
   Tombol
-------------------------------------------------------------------------------*/
.glass-page .btn {
  height: var(--gl-control-h);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--gl-radius-sm);
  font-size: 13px;
  font-weight: 500;
  border: none;
}
.glass-page .btn-success {
  background-image: linear-gradient(180deg, #17A673 0%, #128A5F 100%);
  box-shadow: 0 4px 14px rgba(18, 138, 95, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* "Refresh Data" (btn-warning) — oranye PEJAL, diperlakukan sama seperti tombol
   Export hijau: gradien isi penuh, tanpa garis tepi, bayangan bernada sewarna.
   Versi bertint pucat sebelumnya gagal karena bracket.css:6850 memaksa
   `.btn-warning { color:#fff !important }` — teks putih itu tidak bisa dilawan
   tanpa !important tandingan, sehingga latar apa pun yang terang membuat
   tombolnya lenyap.
   Nada oranyenya lebih gelap dari --gl-accent (#F49917) justru karena teks
   putih itu: #F49917 hanya 2,23:1 terhadap putih. Gradien di bawah 3,36:1 ->
   4,70:1, yaitu sama atau lebih baik daripada tombol Export hijau yang
   3,12:1 -> 4,35:1. #F49917 tetap dipakai untuk penanda kecil (titik submenu,
   garis tren) yang tidak menanggung teks putih di atasnya. */
.glass-page .btn-warning {
  background-color: #C87A0A;
  background-image: linear-gradient(180deg, #C87A0A 0%, #A5650B 100%);
  border: none;
  box-shadow: 0 4px 14px rgba(168, 103, 11, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.glass-page .btn-warning:hover,
.glass-page .btn-warning:focus {
  background-image: linear-gradient(180deg, #D4830D 0%, #B06D0C 100%);
  box-shadow: 0 6px 18px rgba(168, 103, 11, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.glass-page .btn-outline-info {
  background-color: rgba(255, 255, 255, 0.70);
  border: 1px solid #D8DFE9;
  color: var(--gl-brand-ink);
  height: auto;
}

/* -----------------------------------------------------------------------------
   Dashboard — satu-satunya halaman yang menaruh .glass-page langsung di
   .br-pagebody (semua halaman modul lain membungkusnya di
   .br-section-wrapper.pd-30, yang sudah punya padding sendiri). bracket.css
   memberi .br-pagebody padding kiri/kanan 30px (15px di layar sempit); aturan
   .glass-page di atas menolnya supaya mesh latar polos ikut terlihat sampai ke
   tepi. Tanpa padding itu, .row Bootstrap di dalamnya (margin kiri/kanan -15px)
   menonjol keluar dari .br-mainpanel dan memicu scrollbar horizontal di
   seluruh halaman. Dikembalikan di sini, khusus untuk kombinasi ini saja.
-------------------------------------------------------------------------------*/
.br-pagebody.glass-page {
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 576px) {
  .br-pagebody.glass-page {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* -----------------------------------------------------------------------------
   Select2
   Panelnya dipasang Select2 langsung ke <body> — DI LUAR .glass-page — jadi tidak
   bisa dijangkau selektor berawalan .glass-page dan harus ditulis global. Aman
   karena berkas ini cuma dimuat satu halaman.

   Alpha panel sengaja tinggi (0.95): isinya daftar nama prodi 13px yang dibaca,
   bukan sekadar kulit. Ini sisi "data" dari aturan, cuma dengan blur tipis agar
   tetap satu bahasa dengan toolbar di belakangnya.
-------------------------------------------------------------------------------*/
.select2-container--default .select2-dropdown {
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(16, 32, 58, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.90);
  padding: 6px;
  overflow: hidden;
}
/* Select2 mematikan sudut atas/bawah supaya panel menempel ke kontrol. Di sini
   panelnya justru dibuat mengambang, jadi sudutnya dikembalikan penuh. */
.select2-container--default .select2-dropdown--below { margin-top: 6px; border-top-width: 1px; }
.select2-container--default .select2-dropdown--above { margin-top: -6px; border-bottom-width: 1px; }

.select2-container--default .select2-search--dropdown { padding: 0 0 6px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  height: 34px;
  padding: 0 11px;
  border: 1px solid #D8DFE9;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  color: var(--gl-ink);
  outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--gl-brand);
  box-shadow: 0 0 0 3px rgba(8, 102, 198, 0.14);
}

.select2-container--default .select2-results > .select2-results__options {
  max-height: 268px;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 32, 58, 0.22) transparent;
}
.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar { width: 7px; }
.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-track { background: transparent; }
.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
  background-color: rgba(16, 32, 58, 0.20);
  border-radius: 999px;
}

.select2-container--default .select2-results__option {
  padding: 8px 11px;
  margin-bottom: 2px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--gl-ink-2);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: rgba(8, 102, 198, 0.12);
  color: var(--gl-brand-ink);
}
/* Prefix .thm-unud untuk menyamai spesifisitas custom.css:832, yang mematok
   background-color #0866c6 untuk opsi terpilih. Tanpa prefix, aturan itu menang
   pada spesifisitas berapa pun urutan berkasnya. */
.select2-container--default .select2-results__option[aria-selected="true"],
.thm-unud .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(8, 102, 198, 0.92) 0%, rgba(8, 102, 198, 0.66) 100%);
  color: #FFFFFF;
  font-weight: 500;
}

/* Kontrol saat panel terbuka */
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--gl-brand);
  box-shadow: 0 0 0 3px rgba(8, 102, 198, 0.14);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--gl-ink-4); }

/* Item toolbar tidak boleh menciut: lebarnya dipatok di div pembungkus (lihat
   blade), lalu select2 mengisinya 100%. Tanpa flex:0 0 auto, flexbox menyusutkan
   pembungkusnya dan panel dropdown ikut sempit — nama prodi lalu membungkus
   jadi tiga baris. */
.glass-toolbar > div { flex: 0 0 auto; }
.glass-toolbar > div.mr-auto { flex: 1 1 auto; }

/* -----------------------------------------------------------------------------
   Tab — kulit berkaca, isinya solid
-------------------------------------------------------------------------------*/
.glass-page .nav-tabs {
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background-color: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: 5px;
  gap: 4px;
  width: fit-content;
}
.glass-page .nav-tabs .nav-link {
  border: none;
  border-radius: 8px;
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  font-size: 13px;
  color: #5A6675;
}
.glass-page .nav-tabs .nav-link.active {
  background-color: #FFFFFF;
  color: var(--gl-brand);
  font-weight: 500;
  box-shadow: 0 2px 10px rgba(16, 32, 58, 0.10);
}

/* -----------------------------------------------------------------------------
   S0 — PERMUKAAN DATA. Tanpa kaca, tanpa blur. Jangan diubah jadi transparan.
-------------------------------------------------------------------------------*/
.data-surface {
  background-color: var(--gl-s0-bg);
  border: 1px solid var(--gl-s0-border);
  border-radius: var(--gl-radius);
  box-shadow: 0 6px 22px rgba(16, 32, 58, 0.07);
}
/* Pojok kiri-atas cuma dipetak kalau permukaannya memang menempel LANGSUNG di
   bawah .nav-tabs (RBAC, Master, ETL Admin, Prestasi, Metric tidak punya tab,
   jadi tetap membulat penuh — sebelumnya keempatnya ikut kena aturan lama
   yang menganggap selalu ada tab di atasnya). Selector sibling, bukan kelas
   tambahan, supaya blade Penelitian/Pengabdian/Luaran tidak perlu disentuh. */
.nav-tabs + .data-surface {
  border-radius: 0 var(--gl-radius) var(--gl-radius) var(--gl-radius);
}

.data-surface table.table { margin-bottom: 0; }

.data-surface table.table thead th {
  background-color: var(--gl-s0-head);
  border-top: none;
  border-bottom: 1px solid #E4E9F1;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--gl-ink-4);
  padding: 9px 14px;
}
.data-surface table.table tbody td {
  border-top: none;
  border-bottom: 1px solid var(--gl-s0-rule);
  padding: 11px 14px;
  font-size: 12.5px;
  color: var(--gl-ink-2);
  vertical-align: top;
}
.data-surface table.table tbody tr:nth-child(even) { background-color: var(--gl-s0-bg-alt); }
.data-surface table.table tbody tr:hover           { background-color: #F3F7FC; }

/* Kontrol DataTables ikut permukaan solid, bukan kaca */
.data-surface .dataTables_wrapper .dataTables_length,
.data-surface .dataTables_wrapper .dataTables_filter,
.data-surface .dataTables_wrapper .dataTables_info {
  font-size: 11.5px;
  color: var(--gl-ink-4);
}
.data-surface .dataTables_wrapper .dataTables_filter input,
.data-surface .dataTables_wrapper .dataTables_length select {
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--gl-s0-border);
  background-color: #F5F7FA;
  font-size: 12.5px;
  color: var(--gl-ink-2);
}
.data-surface .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 7px;
  border: 1px solid var(--gl-s0-border);
  font-size: 12.5px;
  margin-left: 4px;
}
.thm-unud .data-surface .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.thm-unud .data-surface .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.thm-unud .data-surface .dataTables_wrapper .dataTables_paginate .paginate_button.current:focus {
  background-color: var(--gl-brand);
  border-color: var(--gl-brand);
  color: #FFFFFF;
  box-shadow: 0 3px 10px rgba(8, 102, 198, 0.30);
}

/* -----------------------------------------------------------------------------
   Skeleton loading — shimmer bersama untuk kartu ringkasan & container chart
   selagi menunggu AJAX (dipicu dari glSkeletonCards()/glSkeletonChart() di
   glass-charts.js). Sebelumnya tiap halaman menampilkan '-'/'—' polos sampai
   data datang (atau, di satu halaman, shimmer abu-abu lokal yang tidak dipakai
   halaman lain) — dipindah ke sini sekali supaya semua halaman DWH yang memuat
   kartu/chart lewat AJAX terasa satu bahasa. Nada biru brand pudar, bukan abu-abu
   polos, supaya terasa bagian dari skin kaca, bukan sisipan generik.
-------------------------------------------------------------------------------*/
@keyframes gl-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.gl-skel {
  display: inline-block;
  background-image: linear-gradient(90deg,
      rgba(8, 102, 198, 0.10) 25%, rgba(8, 102, 198, 0.22) 50%, rgba(8, 102, 198, 0.10) 75%);
  background-size: 200% 100%;
  animation: gl-shimmer 1.5s infinite linear;
  border-radius: 6px;
  vertical-align: middle;
}
/* Kartu angka ringkasan ("Total Mahasiswa", dst) — lebar 64% cukup untuk
   terlihat sebagai placeholder angka tanpa menyentuh tepi kartu. */
.gl-skel-num { width: 64%; height: 26px; }
/* Overlay chart — SIBLING absolut di dalam container chart, bukan pengganti isi
   container. ECharts di halaman ini dipakai ulang lewat setOption() saat filter
   berubah (bukan re-init tiap kali), jadi overlay ini sengaja tidak pernah
   menimpa innerHTML container-nya — itu akan menghapus canvas ECharts yang
   sudah ada. glSkeletonChart()/glSkeletonChartOff() di glass-charts.js yang
   menambah & melepas elemen ini sebagai anak, bukan mengganti seluruh isi. */
.gl-skel-chart { position: absolute; inset: 0; border-radius: 10px; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .gl-skel { animation: none; background-image: none; background-color: rgba(8, 102, 198, 0.14); }
}

/* -----------------------------------------------------------------------------
   G3 — modal
-------------------------------------------------------------------------------*/
.glass-modal .modal-content {
  background-color: var(--gl-g3-bg);
  -webkit-backdrop-filter: var(--gl-g3-blur);
  backdrop-filter: var(--gl-g3-blur);
  border: 1px solid rgba(255, 255, 255, 0.90);
  border-radius: 18px;
  box-shadow: var(--gl-g3-shadow);
}
.glass-modal .modal-header,
.glass-modal .modal-body { border-color: rgba(16, 32, 58, 0.10); }

/* Daftar kegiatan di dalam modal tetap data: solid. */
.glass-modal .modal-body table.table {
  background-color: var(--gl-s0-bg);
  border-radius: 10px;
  overflow: hidden;
}
.glass-modal .modal-body table.table thead th {
  background-color: var(--gl-s0-head);
  border-bottom: 1px solid #E4E9F1;
  border-top: none;
  font-size: 10px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--gl-ink-4);
}
.glass-modal .modal-body table.table tbody td {
  border-top: none;
  border-bottom: 1px solid var(--gl-s0-rule);
}

.modal-backdrop.show {
  background-color: rgba(16, 26, 42, 0.34);
  -webkit-backdrop-filter: blur(9px) saturate(115%);
  backdrop-filter: blur(9px) saturate(115%);
  opacity: 1;
}

/* -----------------------------------------------------------------------------
   FALLBACK WAJIB
   Uji terimanya: dengan blur dimatikan total, halaman harus tetap terbaca penuh.
   Karena itu semua alpha dinaikkan ke nyaris buram, bukan sekadar dibiarkan.
-------------------------------------------------------------------------------*/
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .br-logo,
  .br-header       { background-color: rgba(255, 255, 255, 0.97); }
  .br-sideleft     { background-color: #1D2939; }
  .glass-toolbar,
  .glass-card      { background-color: rgba(255, 255, 255, 0.94); }
  .glass-page .nav-tabs { background-color: rgba(255, 255, 255, 0.88); }
  .glass-modal .modal-content { background-color: #FFFFFF; }
  .modal-backdrop.show { background-color: rgba(16, 26, 42, 0.52); }
}

/* Hormati preferensi sistem: efek dekoratif dimatikan, keterbacaan tidak
   bergantung padanya. */
@media (prefers-reduced-transparency: reduce) {
  .br-logo,
  .br-header,
  .glass-toolbar,
  .glass-card,
  .glass-page .nav-tabs,
  .glass-modal .modal-content {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(255, 255, 255, 0.97);
  }
  .br-sideleft { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: #1D2939; }
}

/* -----------------------------------------------------------------------------
   G4 — Widget chat (Asisten AI SIMASTER)

   Panel mengambang, jadi memakai token G3 yang sama dengan modal & dropdown
   header — bukan nilai blur/bayangan baru, supaya seluruh permukaan mengambang
   di aplikasi ini tetap satu bahasa. Isi percakapannya sendiri tetap dibaca
   sebagai teks, jadi bubble-nya solid, tidak ikut berkaca.

   Header & tombol mengambang sengaja diberi identitas "AI" (gradien brand,
   avatar berkilau, label "Chat with AI") supaya orang langsung paham ini
   lawan bicaranya mesin, bukan operator manusia.
-------------------------------------------------------------------------------*/

/* ---- Tombol mengambang + label "Chat with AI" ---------------------------- */
.chatbot-fab-wrap {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1035; /* di bawah modal Bootstrap (1050), di atas konten halaman */
  display: flex;
  align-items: center;
  gap: 10px;
}

.chatbot-fab-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background-color: var(--gl-g3-bg);
  -webkit-backdrop-filter: var(--gl-g3-blur);
  backdrop-filter: var(--gl-g3-blur);
  box-shadow: 0 10px 26px rgba(10, 20, 38, 0.16);
  color: var(--gl-ink);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  /* Default tersembunyi; dimunculkan sebentar saat halaman dibuka lalu saat
     kursor mendekat — supaya tidak permanen menghalangi sudut layar. */
  opacity: 0;
  transform: translateX(8px) scale(.96);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.chatbot-fab-label .chatbot-fab-label-ai {
  color: var(--gl-brand);
  font-weight: 700;
  letter-spacing: .02em;
}
.chatbot-fab-wrap:hover .chatbot-fab-label,
.chatbot-fab-wrap.chatbot-label-tampil .chatbot-fab-label {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.chatbot-fab-wrap.chatbot-wrap-terbuka .chatbot-fab-label {
  opacity: 0 !important;
  transform: translateX(8px) scale(.96) !important;
}

.chatbot-fab {
  position: relative;
  width: 58px;
  height: 58px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-image: linear-gradient(135deg, #1E8BE8 0%, var(--gl-brand) 52%, var(--gl-brand-ink) 100%);
  color: #FFFFFF;
  box-shadow: 0 10px 26px rgba(8, 102, 198, 0.40), 0 2px 6px rgba(10, 20, 38, 0.16);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.chatbot-fab:hover,
.chatbot-fab:focus {
  transform: translateY(-2px) scale(1.03);
  filter: saturate(115%);
  box-shadow: 0 16px 32px rgba(8, 102, 198, 0.46), 0 2px 6px rgba(10, 20, 38, 0.18);
  outline: none;
}
.chatbot-fab .chatbot-fab-ikon { display: block; width: 27px; height: 27px; margin: 0 auto; }
.chatbot-fab .chatbot-fab-tutup { display: none; font-size: 26px; line-height: 1; }
.chatbot-fab-aktif .chatbot-fab-ikon  { display: none; }
.chatbot-fab-aktif .chatbot-fab-tutup { display: block; }

/* Titik "AI" kecil di sudut tombol — penanda bahwa yang menjawab mesin. */
.chatbot-fab-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 22px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  border: 2px solid #FFFFFF;
  background-image: linear-gradient(135deg, var(--gl-accent) 0%, #E07C0A 100%);
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: .04em;
}
.chatbot-fab-aktif .chatbot-fab-badge { display: none; }

/* Riak halus di belakang tombol; berhenti begitu panel dibuka. */
.chatbot-fab::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(8, 102, 198, 0.45);
  animation: chatbot-riak 2.6s ease-out infinite;
  pointer-events: none;
}
.chatbot-fab-aktif::before { display: none; }
@keyframes chatbot-riak {
  0%        { transform: scale(.9);  opacity: .55; }
  70%, 100% { transform: scale(1.35); opacity: 0;  }
}

/* ---- Panel -------------------------------------------------------------- */
.chatbot-panel {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 1035;
  width: 388px;
  max-width: calc(100vw - 32px);
  height: 574px; /* +14px, mengimbangi header yang sekarang lebih tinggi supaya area pesan tidak menyusut */
  max-height: calc(100vh - 140px);
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  background-color: var(--gl-g3-bg);
  -webkit-backdrop-filter: var(--gl-g3-blur);
  backdrop-filter: var(--gl-g3-blur);
  box-shadow: var(--gl-g3-shadow);
  transform-origin: bottom right;
}
.chatbot-panel.chatbot-panel-open {
  display: flex;
  animation: chatbot-panel-masuk .22s cubic-bezier(.22, 1, .36, 1);
}
@keyframes chatbot-panel-masuk {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* Header: gradien brand + avatar AI. Ini "kulit", jadi boleh berwarna penuh. */
.chatbot-panel-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  /* Dinaikkan dari 15px/14px/15px/16px — sebelumnya kontennya terasa
     "dipaksa masuk" karena tinggi header cuma mengikuti konten pas-pasan,
     tanpa ruang napas ekstra di atas/bawahnya. */
  padding: 20px 16px 20px 18px;
  background-image: linear-gradient(135deg, var(--gl-brand-ink) 0%, var(--gl-brand) 48%, #1E8BE8 100%);
  color: #FFFFFF;
  overflow: hidden;
  /* Garis bawah tipis + bayangan halus supaya header "lepas" dari area pesan
     di bawahnya sebagai satu permukaan, bukan menyatu rata. */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 6px 16px rgba(6, 40, 78, 0.22);
}
/* Kilau tipis di sudut kanan atas supaya header tidak terlihat rata. */
.chatbot-panel-header::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -30px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 65%);
  pointer-events: none;
}
.chatbot-avatar {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  /* Pelat putih untuk logo AI Satu Data Unud: logonya biru + kuning dengan latar
     transparan, jadi di atas gradien biru header ia hilang kalau tidak ada dasar terang. */
  background-color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 12px rgba(6, 40, 78, 0.32), inset 0 0 0 1px rgba(8, 102, 198, 0.10);
}
/* Logo dipasang utuh (contain), tanpa crop; padding kecil supaya kilau bintangnya
   tidak menempel ke tepi pelat. */
.chatbot-avatar-logo {
  display: block;
  width: 100%;
  height: 100%;
  padding: 2px;
  object-fit: contain;
  border-radius: inherit;
}
/* Titik hijau "siap" — isyarat cepat bahwa asisten aktif. Border PUTIH
   (bukan biru) supaya kontrasnya konsisten di mana pun titik gradien
   header sedang berada di baliknya, bukan cuma di satu posisi. */
.chatbot-avatar-status {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #2ECC71;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 3px rgba(6, 40, 78, 0.35);
}
/* Bungkus judul+subjudul: WAJIB min-width:0 di flex child supaya teksnya
   bisa dipotong (text-overflow: ellipsis) alih-alih memaksa header melebar
   atau subjudulnya wrap ke baris kedua dan "nabrak" batas bawah header. */
.chatbot-header-text {
  flex: 1 1 auto;
  min-width: 0;
}
.chatbot-panel-header .chatbot-judul {
  display: block;
  margin: 0;
  /* Judul "Chat With AI Satu Data Unud" muat satu baris di lebar header (~248px);
     dipotong "..." bila layar sempit, bukan wrap ke baris kedua. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.2;
  color: #FFFFFF;
}
.chatbot-badge-ai {
  padding: 2px 7px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 1px 2px rgba(6, 40, 78, 0.2);
  color: #FFFFFF;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.chatbot-panel-header .chatbot-subjudul {
  margin: 3px 0 0;
  font-size: 10.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.86);
  /* Satu baris, dipotong "..." kalau kepanjangan — daripada wrap ke baris
     kedua dan mepet/nabrak batas bawah header. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chatbot-panel-header .chatbot-close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: #FFFFFF;
  opacity: .75;
  text-shadow: none;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity .15s ease, background-color .15s ease;
}
.chatbot-panel-header .chatbot-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.24); }

.chatbot-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 14px 6px;
}
/* Scrollbar tipis — bar tebal bawaan mengganggu di panel sesempit ini. */
.chatbot-messages::-webkit-scrollbar { width: 6px; }
.chatbot-messages::-webkit-scrollbar-thumb {
  background-color: rgba(16, 32, 58, 0.18);
  border-radius: 999px;
}

/* Satu baris percakapan = avatar (khusus AI) + bubble. */
.chatbot-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 12px;
  animation: chatbot-bubble-masuk .26s cubic-bezier(.22, 1, .36, 1);
}
.chatbot-row-user { justify-content: flex-end; }
@keyframes chatbot-bubble-masuk {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.chatbot-row-avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-bottom: 2px;
  border-radius: 9px;
  background-image: linear-gradient(135deg, #1E8BE8 0%, var(--gl-brand) 100%);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(8, 102, 198, 0.30);
}
.chatbot-row-avatar svg { width: 15px; height: 15px; display: block; }

/* Bubble percakapan: permukaan DATA, sengaja solid — teks kecil di atas kaca
   berubah keterbacaannya mengikuti apa yang lewat di belakang panel. */
.chatbot-message {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 15px;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;   /* balasan model sering multi-baris */
  word-wrap: break-word;
}
.chatbot-message-user {
  background-image: linear-gradient(135deg, #1E8BE8 0%, var(--gl-brand) 100%);
  color: #FFFFFF;
  border-bottom-right-radius: 5px;
  box-shadow: 0 4px 12px rgba(8, 102, 198, 0.24);
}
.chatbot-message-assistant {
  background-color: #FFFFFF;
  color: var(--gl-ink);
  border: 1px solid var(--gl-s0-border);
  border-left: 3px solid var(--gl-brand);
  border-bottom-left-radius: 5px;
  /* Bayangan sedikit lebih tegas dari sebelumnya supaya bubble "lepas" dari
     panel kaca di belakangnya, bukan menyatu jadi satu permukaan datar. */
  box-shadow: 0 4px 14px rgba(16, 32, 58, 0.10);
}
.chatbot-message-assistant strong { color: var(--gl-brand-ink); font-weight: 700; }

/* Isi balasan sekarang bisa berupa <p>/<ul>/<ol> beneran (lihat
   formatBalasan() di JS), bukan cuma teks + <br> — supaya daftar bernomor
   atau berpoin dari model terbaca sebagai list, bukan baris "- teks" mentah. */
.chatbot-message-assistant p { margin: 0 0 8px; }
.chatbot-message-assistant p:last-child { margin-bottom: 0; }
.chatbot-message-assistant ul,
.chatbot-message-assistant ol {
  margin: 2px 0 10px;
  padding-left: 18px;
}
.chatbot-message-assistant ul:last-child,
.chatbot-message-assistant ol:last-child { margin-bottom: 0; }
.chatbot-message-assistant li { margin-bottom: 4px; line-height: 1.5; }
.chatbot-message-assistant li:last-child { margin-bottom: 0; }
.chatbot-message-assistant ul { list-style: none; padding-left: 14px; }
.chatbot-message-assistant ul li { position: relative; }
.chatbot-message-assistant ul li::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--gl-brand);
}
.chatbot-message-assistant ol { list-style: decimal; }
.chatbot-message-assistant ol li::marker { color: var(--gl-brand-ink); font-weight: 700; }
.chatbot-loading { color: var(--gl-ink-3); font-style: italic; }

/* Pertanyaan siap-pakai; hilang setelah salah satunya dipakai. */
.chatbot-saran {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 12px 34px;  /* sejajar dengan bubble AI, bukan avatarnya */
  animation: chatbot-bubble-masuk .3s ease-out;
}
.chatbot-saran-item {
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(8, 102, 198, 0.30);
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--gl-brand-ink);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.chatbot-saran-item:hover {
  background-color: var(--gl-brand);
  border-color: var(--gl-brand);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.chatbot-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 14px 6px;
  border-top: 1px solid rgba(16, 32, 58, 0.10);
}
.chatbot-input-row .form-control {
  flex: 1 1 auto;
  min-height: 40px;
  max-height: 110px;
  resize: none;
  border-radius: 999px;
  padding: 9px 15px;
  border-color: var(--gl-s0-border);
  background-color: #FFFFFF;
  font-size: 13px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.chatbot-input-row .form-control:focus {
  border-color: var(--gl-brand);
  box-shadow: 0 0 0 3px rgba(8, 102, 198, 0.14);
}
.chatbot-send {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background-image: linear-gradient(135deg, #1E8BE8 0%, var(--gl-brand) 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(8, 102, 198, 0.30);
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}
.chatbot-send:hover { transform: translateY(-1px); filter: saturate(120%); }
.chatbot-send:disabled { opacity: .5; cursor: default; transform: none; }
.chatbot-send .icon { font-size: 18px; line-height: 1; }

/* Catatan kaki: pengingat permanen bahwa jawaban berasal dari AI. */
.chatbot-foot {
  padding: 0 16px 10px;
  color: var(--gl-ink-4);
  font-size: 9.5px;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 480px) {
  .chatbot-panel    { right: 16px; bottom: 88px; height: calc(100vh - 120px); }
  .chatbot-fab-wrap { right: 16px; bottom: 16px; }
  .chatbot-fab-label { display: none; }
}

/* Indikator "sedang mengetik" — tiga titik memantul bergantian. */
.chatbot-typing { display: flex; align-items: center; gap: 4px; padding: 13px 14px; }
.chatbot-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background-color: var(--gl-brand);
  opacity: .45;
  animation: chatbot-bounce 1.3s infinite ease-in-out;
}
.chatbot-dot:nth-child(2) { animation-delay: .18s; }
.chatbot-dot:nth-child(3) { animation-delay: .36s; }
@keyframes chatbot-bounce {
  0%, 60%, 100% { transform: translateY(0);     opacity: .45; }
  30%           { transform: translateY(-5px);  opacity: 1;   }
}

/* Kursor berkedip selama teks jawaban sedang "diketik". */
.chatbot-mengetik-kursor::after {
  content: "\258C";
  margin-left: 1px;
  color: var(--gl-brand);
  animation: chatbot-kedip 1s steps(1) infinite;
}
@keyframes chatbot-kedip { 50% { opacity: 0; } }

/* Hormati preferensi sistem: kalau animasi dikurangi, semua gerak dimatikan. */
@media (prefers-reduced-motion: reduce) {
  .chatbot-dot { animation: none; opacity: .6; }
  .chatbot-mengetik-kursor::after { animation: none; }
  .chatbot-fab::before { display: none; }
  .chatbot-panel.chatbot-panel-open { animation: none; }
  .chatbot-row, .chatbot-saran { animation: none; }
}

/* -----------------------------------------------------------------------------
   G5 — Pop-up pengumuman (SCRUM-44)

   Dipakai untuk pengumuman global sekali-tampil setelah login (mis. info
   migrasi server). Memakai .glass-modal (G3) untuk permukaan kaca yang sama
   dengan modal lain, ditambah header ilustrasi + badge ikon supaya terasa
   seperti pengumuman resmi, bukan dialog konfirmasi biasa.
-------------------------------------------------------------------------------*/
.pengumuman-modal .modal-dialog { max-width: 460px; }

.pengumuman-hero {
  background: linear-gradient(135deg, var(--gl-brand) 0%, var(--gl-brand-ink) 100%);
  border-radius: 18px 18px 0 0;
  padding: 28px 24px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Lingkaran dekoratif samar — hanya tekstur, tidak boleh mengganggu kontras ikon/teks di atasnya. */
.pengumuman-hero::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
}
.pengumuman-hero::after {
  content: "";
  position: absolute;
  inset: auto auto -50% -10%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.pengumuman-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.pengumuman-icon svg { width: 34px; height: 34px; }

.pengumuman-hero .pengumuman-judul {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

.pengumuman-modal .modal-header {
  border: none;
  padding: 0;
  display: block;
}
.pengumuman-modal .modal-header .close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  color: #FFFFFF;
  opacity: 0.85;
  text-shadow: none;
  font-size: 22px;
}
.pengumuman-modal .modal-header .close:hover { opacity: 1; }

.pengumuman-modal .modal-body {
  padding: 22px 26px 8px;
  text-align: center;
}
.pengumuman-modal .modal-body p {
  color: var(--gl-ink-2);
  font-size: 14px;
  line-height: 1.65;
}

.pengumuman-waktu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(244, 153, 23, 0.12);
  color: var(--gl-accent-ink);
  border: 1px solid rgba(244, 153, 23, 0.30);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 14px;
}
.pengumuman-waktu svg { width: 14px; height: 14px; }

.pengumuman-modal .modal-footer {
  border: none;
  padding: 14px 26px 26px;
  justify-content: center;
}
.pengumuman-modal .modal-footer .btn {
  background: var(--gl-brand);
  border-color: var(--gl-brand);
  border-radius: var(--gl-radius-sm);
  font-weight: 600;
  padding: 8px 28px;
}
.pengumuman-modal .modal-footer .btn:hover {
  background: var(--gl-brand-ink);
  border-color: var(--gl-brand-ink);
}