/* =========================================================================
   KampusQ - Design tokens
   Palet "navy akademik" + aksen oranye lembut, mengikuti referensi mockup
   yang diberikan (login page + dashboard tablet) - navy sebagai warna utama
   (logo, sidebar aktif, tombol), oranye sebagai aksen (huruf "Q", CTA, badge).
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  --kq-ink: #1C2733;
  --kq-surface: #EEF2F7;
  --kq-brand: #1E3A5F;
  --kq-brand-dark: #16293F;
  --kq-brand-soft: #E6ECF3;
  --kq-gold: #F5821F;
  --kq-gold-soft: #FCE9D6;
  --kq-border: #E2E6EC;
  --kq-danger: #E5484D;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background-color: var(--kq-surface);
}

.font-display { font-family: 'Sora', 'Inter', ui-sans-serif, sans-serif; }
.font-mono-data { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* Indikator aktif sidebar/bottom-nav: garis emas tipis, bukan blok solid penuh -
   detail signature yang lebih halus daripada "pill" warna solid generik. */
.nav-active {
  color: var(--kq-brand);
  background-color: var(--kq-brand-soft);
  box-shadow: inset 3px 0 0 0 var(--kq-gold);
}

/* =========================================================================
   Sentuhan warna brand di atas build resmi dataTables.tailwindcss (CDN).
   PENTING: DataTables v2.x MENGGANTI TOTAL nama class internalnya dari
   konvensi lama (dataTables_wrapper, paginate_button, dst - v1.x) menjadi
   prefix dt- yang baru (dt-container, dt-search, dt-paging, dt-paging-button,
   dst). Override versi sebelumnya masih pakai nama v1.x sehingga TIDAK PERNAH
   benar-benar berlaku di v2.x yang dipakai proyek ini - inilah salah satu
   akar masalah tampilan DataTables yang tidak rapi. Nama class di bawah
   sudah dikonfirmasi dari dokumentasi resmi & source DataTables v2.
   ========================================================================= */
table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0;
  width: 100% !important;
  font-size: 0.875rem;
}
table.dataTable thead th {
  background: #F8FAFC;
  color: #5B6472;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--kq-border);
  padding: 0.75rem 1rem !important;
  white-space: nowrap;
}
table.dataTable tbody td {
  padding: 0.7rem 1rem !important;
  border-bottom: 1px solid var(--kq-border);
  vertical-align: middle;
}
table.dataTable tbody tr:hover {
  background-color: var(--kq-brand-soft);
}

/* Search & length controls (dt-search / dt-length adalah wrapper; input/select di dalamnya dapat class generik dt-input) */
.dt-container .dt-search label,
.dt-container .dt-length label {
  font-size: 0.8rem;
  color: #5B6472;
}
.dt-container .dt-search input,
.dt-container .dt-length select {
  border: 1px solid var(--kq-border) !important;
  border-radius: 0.5rem !important;
  padding: 0.35rem 0.6rem !important;
  font-size: 0.85rem;
  outline: none;
}
.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
  border-color: var(--kq-brand) !important;
}

/* Info & paging */
.dt-container .dt-info {
  font-size: 0.8rem;
  color: #5B6472;
}
.dt-container .dt-paging .dt-paging-button {
  padding: 0.35rem 0.65rem;
  margin-left: 0.15rem;
  border-radius: 0.5rem;
  border: none !important;
  background: transparent;
  color: #5B6472;
  cursor: pointer;
}
.dt-container .dt-paging .dt-paging-button.current {
  background: var(--kq-brand) !important;
  color: #fff !important;
}
.dt-container .dt-paging .dt-paging-button:hover:not(.current):not(.disabled) {
  background: var(--kq-brand-soft) !important;
}
.dt-container .dt-paging .dt-paging-button.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.dt-container .dt-processing {
  color: var(--kq-brand);
  font-weight: 500;
}

/* ============ PERBAIKAN MOBILE: dt-layout-row stack rapi di layar sempit ============
   Bawaan DataTables 2.x menyusun search/length/info/paging berdampingan
   (flexbox) yang gampang mepet/overflow di layar HP. Di bawah viewport 640px,
   tumpuk vertikal & buat penuh lebar supaya tetap rapi & mudah disentuh. */
@media (max-width: 640px) {
  .dt-layout-row {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.5rem;
  }
  .dt-layout-cell {
    width: 100% !important;
    text-align: left !important;
  }
  .dt-container .dt-search,
  .dt-container .dt-length {
    width: 100%;
  }
  .dt-container .dt-search input,
  .dt-container .dt-length select {
    width: 100%;
  }
  .dt-container .dt-paging {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Safe-area untuk perangkat dengan home-indicator (iPhone dsb) */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* =========================================================================
   SELECT2 - override penuh (SEBELUMNYA TIDAK ADA SAMA SEKALI)
   Ini akar utama keluhan "select tidak konsisten": Select2 dipakai di
   puluhan form (biodata, dosen, kelas, dst) tapi selama ini tampil dgn CSS
   BAWAAN Select2 (abu-abu, tinggi beda, panah beda, warna highlight biru
   default) yang bentrok telak dgn input Tailwind di sekitarnya. Di bawah
   ini menyamakan Select2 SEPENUHNYA ke tampilan input .rounded-lg standar
   proyek: tinggi sama, border sama, radius sama, warna fokus sama.
   ========================================================================= */
.select2-container--default .select2-selection--single {
  height: 2.5rem !important;
  border: 1px solid var(--kq-border) !important;
  border-radius: 0.5rem !important;
  background: #fff;
  display: flex;
  align-items: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal;
  padding-left: 0.75rem;
  padding-right: 1.75rem;
  font-size: 0.875rem;
  color: var(--kq-ink);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #9CA3AF;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 0.5rem;
  width: 1.25rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border: none !important;
  width: 0.6rem;
  height: 0.6rem;
  margin: 0;
  left: auto;
  top: 50%;
  transform: translateY(-65%) rotate(45deg);
  border-right: 1.6px solid #6B7280 !important;
  border-bottom: 1.6px solid #6B7280 !important;
}
.select2-container--default.select2-container--open .select2-selection__arrow b {
  transform: translateY(-35%) rotate(-135deg);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--kq-brand) !important;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.15);
}
.select2-container--default .select2-selection--single .select2-selection__clear {
  margin-right: 0.5rem;
  color: #9CA3AF;
}

/* Dropdown panel hasil pencarian */
.select2-container--default .select2-dropdown {
  border: 1px solid var(--kq-border) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 8px 24px -4px rgba(28, 39, 51, 0.14);
  overflow: hidden;
}
.select2-container--default .select2-search--dropdown {
  padding: 0.5rem;
  border-bottom: 1px solid var(--kq-border);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--kq-border) !important;
  border-radius: 0.4rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--kq-brand) !important;
}
.select2-container--default .select2-results__option {
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  color: var(--kq-ink);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--kq-brand) !important;
  color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--kq-brand-soft);
  color: var(--kq-brand);
  font-weight: 500;
}
.select2-container--default .select2-results__message {
  color: #9CA3AF;
  font-size: 0.85rem;
}
/* Placeholder Select2 v4 kadang bikin baris pilihan lebih tinggi dari kontainer - kunci tinggi konsisten */
.select2-container { width: 100% !important; }
.select2-container .select2-selection--single { outline: none; }

/* =========================================================================
   NATIVE <select> - unifikasi tampilan lintas browser
   Tanpa reset ini, panah dropdown bawaan browser berbeda-beda (Chrome/
   Safari/Firefox/Android) dan tidak match dgn ikon di seluruh aplikasi.
   Dikecualikan utk select yang sudah diambil-alih Select2 (disembunyikan
   otomatis oleh Select2 sendiri, jadi aman ditumpuk).
   ========================================================================= */
select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.25rem !important;
  cursor: pointer;
}

/* =========================================================================
   INPUT & TEXTAREA - penajaman kontras (border sedikit lebih tegas drpd
   nilai default Tailwind gray-200 supaya tepi form terasa lebih "jelas")
   ========================================================================= */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="tel"], textarea {
  color: var(--kq-ink);
}
input::placeholder, textarea::placeholder { color: #9CA3AF; }

/* Kartu & tombol - bayangan sedikit lebih tegas drpd shadow-sm bawaan Tailwind
   supaya kartu terasa "mengambang" jelas di atas latar, bukan menyatu datar. */
.shadow-sm { box-shadow: 0 1px 3px 0 rgba(28, 39, 51, 0.07), 0 1px 2px -1px rgba(28, 39, 51, 0.07) !important; }

/* =========================================================================
   AKSEN WARNA DI SETIAP CARD - garis navy tebal di tepi atas
   Sebelumnya SEMUA card (71 kemunculan pola yang sama di seluruh aplikasi)
   polos putih tanpa sentuhan warna sama sekali, bikin tampilan terasa datar/
   "terlalu cerah" dan kurang ada fokus visual. Satu aturan global ini
   otomatis berlaku ke SEMUA card tanpa perlu menyunting setiap file view.
   Class .card-gold dipakai manual di tempat yang ingin aksen oranye (mis.
   kartu ringkasan/highlight) sbg variasi supaya kombinasi warna terasa hidup,
   bukan cuma navy berulang-ulang di semua tempat. */
.bg-white.rounded-xl.border.border-gray-100.shadow-sm {
  border-top: 3px solid var(--kq-brand) !important;
}
.bg-white.rounded-xl.border.border-gray-100.shadow-sm.card-gold {
  border-top-color: var(--kq-gold) !important;
}

/* =========================================================================
   SWEETALERT2 - disesuaikan ke tema navy+oranye proyek (default SweetAlert2
   pakai sudut kotak & font sistem generik, di sini diselaraskan dgn radius,
   shadow, dan font-display yang sama dipakai di seluruh aplikasi).
   ========================================================================= */
.swal2-popup {
  border-radius: 1rem !important;
  font-family: inherit !important;
  box-shadow: 0 20px 40px -8px rgba(28, 39, 51, 0.25) !important;
}
.swal2-title {
  font-family: 'Poppins', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.15rem !important;
  color: var(--kq-ink) !important;
}
.swal2-html-container { color: #6B7280 !important; font-size: 0.9rem !important; }
.swal2-confirm, .swal2-cancel {
  border-radius: 0.5rem !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  padding: 0.55rem 1.25rem !important;
  box-shadow: none !important;
}
.swal2-confirm:focus, .swal2-cancel:focus { box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.2) !important; }
.swal2-icon.swal2-warning { border-color: var(--kq-gold) !important; color: var(--kq-gold) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--kq-brand) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(30, 58, 95, 0.3) !important; }
/* Toast (notifikasi) - dibuat lebih ramping & konsisten dgn radius kartu proyek */
.swal2-toast {
  border-radius: 0.65rem !important;
  box-shadow: 0 8px 24px -4px rgba(28, 39, 51, 0.18) !important;
  padding: 0.65rem 1rem !important;
}
.swal2-toast .swal2-title { font-size: 0.85rem !important; font-weight: 500 !important; font-family: inherit !important; }
.swal2-timer-progress-bar { background: rgba(30, 58, 95, 0.35) !important; }

/* =========================================================================
   POLISH VISUAL UMUM - transisi lebih halus, tombol/kartu terasa "hidup"
   ========================================================================= */
button, a { transition: all 0.15s ease; }

/* Tombol utama (brand navy) - sedikit gradasi & efek angkat halus saat hover,
   supaya tidak terasa datar/flat sebagai warna solid saja. */
.bg-brand:not(.card-gold) {
  background-image: linear-gradient(155deg, var(--kq-brand) 0%, var(--kq-brand-dark) 100%);
}
button.bg-brand:hover, a.bg-brand:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(30, 58, 95, 0.4);
}
button.bg-brand:active, a.bg-brand:active { transform: translateY(0); }

/* Kartu yang bisa diklik (link kartu, mis. grid kelas/menu) - efek angkat halus */
a.hover\:shadow-md:hover {
  transform: translateY(-2px);
}

/* Scrollbar custom (webkit) - tipis & senada tema, drpd scrollbar abu-abu bawaan OS */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C7D0DC; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--kq-brand); }

/* Badge/pill status - sedikit bayangan tipis supaya tidak menyatu flat dgn background kartu */
.rounded-full.text-xs.font-medium { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03); }

/* Fokus checkbox/radio lebih tegas (dulu warisan default browser tipis) */
input[type="checkbox"]:focus, input[type="radio"]:focus {
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.2) !important;
}