/* ============================================================
   SILAM Polibatam — Style overrides
   Tempat tambahan styling custom yang konsisten lintas menu.
   ============================================================ */

/* Tombol aksi "Detail" / "Lihat" di tabel — biru solid Bootstrap
   primary tetap di semua state. Override Bootstrap default focus/
   active yang bikin warna nge-flash ke biru muda. */
.btn-action-detail {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-action-detail:hover {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  color: #fff !important;
}

.btn-action-detail:focus,
.btn-action-detail:focus-visible {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
}

.btn-action-detail:active,
.btn-action-detail.active,
.btn-action-detail:active:focus {
  background-color: #0a58ca !important;
  border-color: #0a53be !important;
  color: #fff !important;
  box-shadow: none !important;
}

.btn-action-detail:disabled,
.btn-action-detail.disabled {
  background-color: #9ca3af !important;
  border-color: #9ca3af !important;
  color: #fff !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* Dropzone upload (verifikasi data) — hover state */
.file-dropzone:hover,
.file-dropzone:focus-visible {
  border-color: var(--primary-600) !important;
  background-color: var(--primary-50) !important;
  outline: none;
}

/* Dark mode: render native control (select/option, scrollbar) versi gelap */
[data-theme="dark"] {
  color-scheme: dark;
}
[data-theme="dark"] select.form-select,
[data-theme="dark"] select.form-control {
  color: var(--text-primary-light);
  background-color: var(--input-bg);
}
[data-theme="dark"] select.form-select option,
[data-theme="dark"] select.form-control option {
  background-color: var(--input-bg);
  color: var(--text-primary-light);
}

/* Banner beta + navbar dashboard sticky bersama */
.beta-dash-header {
  position: sticky;
  top: 0;
  z-index: 5;
}
.beta-dash-header .navbar-header {
  position: static;
  top: auto;
}

/* Sidebar harus di atas beta-dash-header (z-index:5). Saat sidebar di-collapse
   lalu di-hover, ia mengembang sebagai overlay menutupi area header — tanpa ini
   banner beta oranye "menembus" menimpa header sidebar yang mengembang.
   Base .sidebar template z-index:3, jadi ditinggikan di sini (tetap di bawah
   modal/dropdown Bootstrap yang 1000+). */
.sidebar {
  z-index: 10;
}

/* Logo kecil (sidebar collapsed) versi PUTIH untuk dark mode.
   Light mode tetap pakai .logo-icon berwarna; dark mode + collapsed pakai
   .logo-icon-dark (putih). Saat di-hover/mengembang, logo penuh (dark-logo)
   yang tampil, jadi kedua ikon disembunyikan. */
.sidebar-logo img.logo-icon-dark {
  display: none;
}
[data-theme=dark] .sidebar.active .sidebar-logo img.logo-icon {
  display: none;
}
[data-theme=dark] .sidebar.active .sidebar-logo img.logo-icon-dark {
  display: inline-block;
}
[data-theme=dark] .sidebar.active:hover .sidebar-logo img.logo-icon-dark {
  display: none;
}

/* Dark mode: input/select disabled tetap terbaca */
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[disabled],
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-select:disabled {
  background-color: var(--neutral-100);
  color: var(--text-primary-light);
  -webkit-text-fill-color: var(--text-primary-light);
  border-color: var(--input-stroke);
  opacity: 1;
}

/* Dark mode: swap logo berwarna -> versi putih (dipasangkan lewat className
   theme-logo-light / theme-logo-dark di komponen) */
.theme-logo-dark { display: none; }
[data-theme="dark"] .theme-logo-light { display: none; }
[data-theme="dark"] .theme-logo-dark { display: inline-block; }

/* Dark mode: panel ilustrasi login (auth-left) — sedikit lebih terang dari
   bg utama (--dark-1) supaya tetap kelihatan beda dengan panel form di kanan */
[data-theme="dark"] .auth-left {
  background: linear-gradient(90deg, #273142 0%, #1B2431 100%);
}

/* Banner "Akses Belum Dibuka" (verifikasi data) — kontras cukup di light & dark */
.akses-locked-banner { border: 1px solid var(--danger-200); }
[data-theme="dark"] .akses-locked-banner {
  background-color: rgba(220, 38, 38, 0.12) !important; /* override bg-danger-50 yg terlalu transparan di dark */
  border-color: rgba(220, 38, 38, 0.45);
}
[data-theme="dark"] .akses-locked-banner .text-danger-600 { color: #f87171 !important; }
[data-theme="dark"] .akses-locked-banner .progress { background-color: rgba(220, 38, 38, 0.22) !important; }
[data-theme="dark"] .akses-locked-banner .progress-bar { background-color: #f87171 !important; }

/* Sidebar submenu bertingkat (2 level) — mis. Kemahasiswaan > PKM Dosen/Reviewer.
   Rule vendor pakai descendant selector (.dropdown.open .sidebar-submenu) sehingga
   submenu nested ikut tampil saat induk atas terbuka. Batasi: submenu hanya tampil
   kalau li.dropdown induk LANGSUNG-nya .open/.dropdown-open. Tanpa !important supaya
   inline display dari slideToggle (klik) tetap menang. */
.sidebar-menu li.dropdown:not(.open):not(.dropdown-open) > .sidebar-submenu {
  display: none;
}
/* Indentasi item level-3 agar hierarki terbaca */
.sidebar-menu .sidebar-submenu .sidebar-submenu {
  padding-left: 14px;
}

/* Akordeon halaman /panduan — <details>/<summary> native, tanpa JS sama sekali.
   Marker bawaan browser disembunyikan (bentuknya beda-beda per browser) dan
   diganti tanda +/− yang dirender lewat ::after, sehingga keadaan buka/tutup
   tetap terbaca tanpa state React. */
.panduan-akordeon > summary { list-style: none; cursor: pointer; }
.panduan-akordeon > summary::-webkit-details-marker { display: none; }
.panduan-akordeon > summary::marker { content: ""; }
.panduan-akordeon-tanda::after { content: "+"; }
.panduan-akordeon[open] .panduan-akordeon-tanda::after { content: "\2212"; }

/* Dropdown sidebar yang memuat halaman aktif dibuka lewat CSS, bukan JS.
   Blok "keep the current page active" di app.js hanya jalan sekali saat berkas
   itu dimuat, sedangkan sidebar bisa di-mount ulang saat berpindah antar layout
   bersaudara (mis. /dsn/* ke /panduan-dosen/*). Setelah remount, class .open
   yang dulu dipasang jQuery hilang dan submenu-nya ikut tertutup meski
   halamannya sedang dibuka. Kelas .active-page sendiri dirender React lewat
   usePathname, jadi selalu benar tanpa bantuan JS.

   Ditaruh SESUDAH aturan penyembunyi di atas supaya menang pada spesifisitas
   yang sama. Klik manual tetap menang karena slideUp/slideToggle menulis
   display inline. Di browser tanpa :has() aturan ini diabaikan dan perilakunya
   kembali seperti semula (submenu tertutup) — bukan malah terbuka semua. */
.sidebar-menu li.dropdown:has(> .sidebar-submenu .active-page) > .sidebar-submenu {
  display: block;
}

/* Banner halaman Ijazah & Transkrip.

   Warna teksnya mengikuti konvensi banner lain di aplikasi: hijau memakai
   #166534 (lih. DaftarWisudaClient) dan kuning #854d0e (lih. banner keringanan
   UKT) — bukan --success-600/--warning-600, yang terlalu muda sehingga tipis
   terbaca di atas latar -100. Bedanya, di sana warna itu ditulis inline;
   di sini lewat kelas supaya override tema gelap di bawah masih bisa menang.

   Token bawaan juga tidak aman dipakai apa adanya di tema gelap: --danger-100
   dan --success-100 turun jadi alpha 6-15% (nyaris tak terlihat), sedangkan
   --warning-100 tidak di-override sama sekali sehingga tetap kuning terang
   seperti di tema terang. Ditambal per banner, bukan di token global, supaya
   banner lain yang sudah pas tidak ikut berubah. */
.banner-ijazah-peruri,
.banner-ijazah-peruri a { color: #166534; }
.banner-ijazah-unduh { color: #854d0e; }

[data-theme="dark"] .banner-ijazah-syarat {
  background-color: rgba(220, 38, 38, 0.12) !important;
  border-color: rgba(220, 38, 38, 0.45) !important;
}
[data-theme="dark"] .banner-ijazah-syarat .text-danger-600,
[data-theme="dark"] .banner-ijazah-syarat .text-danger-700 { color: #f87171 !important; }

[data-theme="dark"] .banner-ijazah-peruri {
  background-color: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.45) !important;
}
[data-theme="dark"] .banner-ijazah-peruri,
[data-theme="dark"] .banner-ijazah-peruri a,
[data-theme="dark"] .banner-ijazah-peruri .text-success-700 { color: #4ade80 !important; }

[data-theme="dark"] .banner-ijazah-unduh {
  background-color: rgba(250, 204, 21, 0.12) !important;
  border-color: rgba(250, 204, 21, 0.45) !important;
}
[data-theme="dark"] .banner-ijazah-unduh,
[data-theme="dark"] .banner-ijazah-unduh .text-warning-700 { color: #fbbf24 !important; }

/* Pengganti <blink> lama: kedipan lewat opacity, bukan visibility, supaya
   teksnya tidak pernah benar-benar hilang saat sedang dibaca. Dimatikan bagi
   yang menyetel prefers-reduced-motion. */
@keyframes banner-ijazah-kedip {
  50% { opacity: 0.45; }
}
.banner-ijazah-kedip {
  animation: banner-ijazah-kedip 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .banner-ijazah-kedip { animation: none; }
}