@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');
body { font-family: 'Plus Jakarta Sans', sans-serif; overflow: hidden; }
[v-cloak] { display: none; }

@media (min-width: 1024px) {
  .sticky-col-1 { position: sticky; left: 0; z-index: 20; }
  .sticky-col-2 { position: sticky; left: 80px; z-index: 20; box-shadow: 2px 0 5px rgba(0,0,0,0.05); }
}

.custom-scroll::-webkit-scrollbar { height: 6px; width: 6px; }
.custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.dark .custom-scroll::-webkit-scrollbar-thumb { background: #475569; }

.stat-card { border-radius: 1.25rem; border-width: 1px; transition: all 0.3s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05); }

.animate-fade { animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   SUBMENU SIDEBAR — buka/tutup halus (gaya Akademik/Perpus/Sarpras/Kuesioner)
   Teknik grid-rows: menganimasi tinggi tanpa JS dan tanpa max-height
   tebakan. Item di dalam cascade masuk satu per satu (stagger).
   ============================================================ */
.submenu-collapse {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.28s ease,
              visibility 0s linear 0.38s;
}
.submenu-collapse.open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.32s ease 0.06s,
              visibility 0s;
}
.submenu-collapse > .submenu-inner {
  overflow: hidden;
  min-height: 0;
}
.submenu-collapse .submenu-item {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.24s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease, background-color 0.15s ease;
}
.submenu-collapse.open .submenu-item {
  opacity: 1;
  transform: translateX(0);
}

/* Chevron induk submenu: berputar halus, bukan ganti ikon */
.submenu-chevron { transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); }
.submenu-chevron.closed { transform: rotate(-90deg); }

/* Popover/dropdown kecil: muncul dengan scale + fade lembut */
.popover-in { animation: popoverIn 0.18s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: top center; }
@keyframes popoverIn { from { opacity: 0; transform: scale(0.97) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* Hormati preferensi gerak minimal */
@media (prefers-reduced-motion: reduce) {
  .submenu-collapse, .submenu-collapse .submenu-item, .submenu-chevron, .popover-in,
  .page-trans-enter-active, .page-trans-leave-active, .animate-fade {
    transition: none !important;
    animation: none !important;
  }
  .submenu-collapse { visibility: visible; }
  .submenu-collapse:not(.open) { display: none; }
  .submenu-collapse .submenu-item { opacity: 1; transform: none; }
}

.sidebar-transition { transition: all 0.3s ease-in-out; }
@media (max-width: 1024px) { .sidebar-hidden { transform: translateX(-100%); } }

.drag-over { border: 2px dashed #6366f1 !important; opacity: 0.8; }

/* Vue Page Transitions — lembut: fade + geser kecil */
.page-trans-enter-active,
.page-trans-leave-active {
  transition: opacity 0.26s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-trans-enter-from {
  opacity: 0;
  transform: translateY(10px);
}
.page-trans-leave-to {
  opacity: 0;
  transform: translateY(-6px);
}



/* Table Row Micro-Animations */
tbody tr {
  animation: slideUpFade 0.3s ease-out forwards;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
tbody tr:hover {
  background-color: rgba(99, 102, 241, 0.05);
  transform: translateX(4px);
}
.dark tbody tr:hover {
  background-color: rgba(99, 102, 241, 0.15);
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Modal Premium Glow (REMOVED FOR FLAT DESIGN) */
.fixed.inset-0 > div.bg-white, .dark .fixed.inset-0 > div.bg-slate-800 {
  box-shadow: none !important;
  border: 1px solid #cbd5e1 !important;
}
.dark .fixed.inset-0 > div.bg-slate-800 {
  border-color: #334155 !important;
}

/* Kurangi Sudut Melengkung (Border Radius) */
.rounded-\[2\.5rem\],
.rounded-\[2rem\],
.rounded-3xl,
.rounded-2xl {
  border-radius: 0.75rem !important; /* setara dengan rounded-xl */
}
.rounded-xl {
  border-radius: 0.5rem !important; /* setara dengan rounded-lg */
}

/* ==============================================================
   MODERN SAAS STYLING OVERRIDES
   ============================================================== */

/* 1. Typography & Hierarchy (Table Headers) */
th {
  text-transform: uppercase !important;
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
  font-weight: 800 !important;
  color: #64748b !important; /* slate-500 */
}
.dark th {
  color: #94a3b8 !important; /* slate-400 */
}
td {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155; /* slate-700 */
}
.dark td {
  color: #cbd5e1; /* slate-300 */
}

/* 2. Inputs & Forms */
input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea {
  transition: all 0.2s ease-in-out !important;
  box-shadow: none !important;
  border-width: 1px !important;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid #6366f1 !important; /* solid outline instead of blurry shadow */
  outline-offset: -1px !important;
  border-color: transparent !important; 
  box-shadow: none !important;
}

/* 3. Cards & Borders (FLAT DESIGN) */
* {
  box-shadow: none !important; /* Override ALL shadows globally */
}
.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
  box-shadow: none !important;
}
.border, .border-b, .border-t, .border-l, .border-r {
  border-color: #e2e8f0; /* slate-200 */
}
.dark .border, .dark .border-b, .dark .border-t, .dark .border-l, .dark .border-r {
  border-color: #334155; /* slate-700 */
}

/* 4. Buttons */
button {
  transition: all 0.15s ease-in-out !important;
}
button:active {
  transform: scale(0.97) !important;
}
/* Ensure dark text has better contrast */
/* Removed !important overrides to allow Tailwind's dark mode classes to work */
/* Custom Select Arrow Matching Tailwind Datepicker */
select {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 9-7 7-7-7'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 1rem !important;
  padding-right: 2.5rem !important;
}

/* ============================================================
   LAYOUT ROLE MANAGER — eksplisit, tidak bergantung pada JIT
   Tailwind CDN (lg:grid-cols-3 / lg:col-span-2 bisa gagal
   ter-generate sehingga grid jatuh ke implicit auto column:
   daftar role gepeng ~200px dan form meluber keluar layar).
   ============================================================ */
.role-tab-panel {
  container-type: inline-size;
}
.role-manager-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
/* 2 kolom hanya jika KONTAINERNYA cukup lebar (bukan lebar viewport),
   sehingga di jendela sempit form tidak tergencet kolom daftar. */
@container (min-width: 660px) {
  .role-manager-grid {
    grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  }
}
/* Kartu daftar role: lebar terkontrol + scroll vertikal */
.role-list-panel {
  min-width: 0;
}
.role-list-scroll {
  max-height: 560px;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Nama role panjang (mis. "Dosen Pembimbing Skripsi") tidak merusak kartu */
.role-item-name {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Pengaman global: kartu di dalam main tidak boleh memaksa horizontal scroll */
main .bg-white,
main .dark\:bg-slate-900 {
  min-width: 0;
}

/* ── PMB: toggle tahap (Wajib/Boleh) pada modal konfigurasi ───────────── */
.pc-switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.pc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pc-switch__track { width: 26px; height: 14px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background-color .15s ease; flex-shrink: 0; }
.pc-switch__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .25); transition: transform .15s ease; }
.pc-switch input:checked + .pc-switch__track { background: #0f172a; }
.pc-switch input:checked + .pc-switch__track::after { transform: translateX(12px); }
.pc-switch__txt { font-size: 10px; font-weight: 800; color: #475569; }
.pc-switch.is-locked { opacity: .55; cursor: not-allowed; }
.dark .pc-switch__track { background: #3f3f46; }
.dark .pc-switch input:checked + .pc-switch__track { background: #fff; }
.dark .pc-switch input:checked + .pc-switch__track::after { background: #0f172a; }
.dark .pc-switch__txt { color: #d4d4d8; }