body {
  font-family: "Inter", sans-serif;
}
/* --- ANIMASI MODERN (Soft Pop & Slide) --- */
.fade-in {
  animation: softPop 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes softPop {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.98); /* Mulai dari sedikit bawah & kecil */
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1); /* Posisi normal */
  }
}

/* Efek Hover untuk Kartu/Kotak agar interaktif */
.hover-scale {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease;
}
.hover-scale:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.sidebar-link-active {
  background-color: #4a5568;
  color: white;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(
    7,
    minmax(0, 1fr)
  ); /* Pakai minmax(0, 1fr) agar tidak meluber */
  gap: 0.5rem; /* Jarak antar kotak */
  width: 100%;
}

.calendar-day {
  min-height: 100px;
  /* Hapus height: fixed jika ada */
  display: flex;
  flex-direction: column;
}
.profile-dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: white;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
  border-radius: 8px;
  padding: 8px;
  margin-top: 8px;
}
.dropdown-content.show {
  display: block;
}
input[type="color"] {
  appearance: none;
  border: none;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: 1px solid #ccc;
  border-radius: 50%;
}
.sidebar-collapsed > #sidebar-admin,
.sidebar-collapsed > #sidebar-user {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}
.schedule-dropdown {
  display: none;
  position: absolute;
  left: 0;
  margin-top: 8px;
  background-color: white;
  min-width: 250px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
  border-radius: 8px;
  overflow: hidden;
}
.schedule-dropdown.show {
  display: block;
}
.schedule-option.active {
  background-color: #ebf8ff;
  color: #2b6cb0;
  font-weight: 600;
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 50;
}
.modal-container {
  background-color: white;
  padding: 2rem;
  border-radius: 0.5rem;
  width: 90%;
  max-width: 500px;
}
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -70px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.post-tab-active {
  border-bottom: 2px solid #3b82f6;
  color: #3b82f6;
}

/* --- STYLE SIDEBAR BARU (Fixed Transition) --- */

/* 1. Logika Utama Sidebar: Tambahkan #sidebar-penilai & #sidebar-supervisor */
#sidebar-admin,
#sidebar-user,
#sidebar-penilai,
#sidebar-supervisor {
  width: 16rem !important; /* Lebar Normal */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  z-index: 50;
}

/* Sidebar Mini: Tambahkan #sidebar-penilai */
.sidebar-mini #sidebar-admin,
.sidebar-mini #sidebar-user,
.sidebar-mini #sidebar-penilai,
.sidebar-mini #sidebar-supervisor {
  width: 5rem !important; /* Lebar Mini */
}

/* 2. Geser Konten Utama */
.main-content-wrapper {
  margin-left: 16rem !important;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-mini .main-content-wrapper {
  margin-left: 5rem !important;
}

/* 3. Sembunyikan Teks saat Mini */
.sidebar-mini .sidebar-text {
  display: none !important;
}

/* 4. Pusatkan Ikon Menu saat Mini */
.sidebar-mini .nav-link {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.sidebar-mini .nav-link svg {
  margin-right: 0 !important;
}

/* 5. Header Sidebar */
.sidebar-mini .sidebar-header {
  justify-content: center !important;
  flex-direction: column !important;
  padding: 10px 0 !important;
  height: auto !important;
}

.sidebar-mini .sidebar-toggle-btn {
  margin: 0 auto !important;
  position: static !important;
}

/* 6. Profil Avatar (CSS Profil Bulat Kecil yang tadi) */
.profile-avatar {
  width: 5rem;
  height: 5rem;
  font-size: 1.875rem;
  transition: all 0.3s ease;
}

/* Sembunyikan Nama dan Role saat mini */
.sidebar-mini .profile-card h3,
.sidebar-mini .profile-card #role-container {
  display: none !important;
}

.sidebar-mini .profile-card {
  padding: 12px 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar-mini .profile-card > div:first-child {
  width: 2.25rem !important;
  height: 2.25rem !important;
  font-size: 0.8rem !important;
  margin-bottom: 0 !important;
}
/* --- PERBAIKAN TAMPILAN PROFIL SAAT SIDEBAR DITUTUP (MINI) --- */

/* 1. Sembunyikan Nama dan Role/Dropdown saat mini */
.sidebar-mini .profile-card h3,
.sidebar-mini .profile-card #role-container {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}

/* 2. Atur ulang container agar pas di tengah */
.sidebar-mini .profile-card {
  padding: 12px 0 !important; /* Kurangi padding atas-bawah */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 3. Kecilkan Avatar Lingkaran */
/* Kita target div pertama di dalam profile-card karena di JS tidak ada ID khusus */
.sidebar-mini .profile-card > div:first-child {
  width: 2.25rem !important; /* Setara w-9 (36px), mirip dengan icon menu */
  height: 2.25rem !important;
  font-size: 0.8rem !important; /* Kecilkan teks inisial nama */
  margin-bottom: 0 !important; /* Hapus jarak bawah */
  border-width: 1px !important; /* Tipiskan border jika ada */
  box-shadow: none !important; /* Hilangkan bayangan agar lebih bersih */
}

/* --- MODERN INPUT & DROPDOWN STYLE (FINAL SUPER FIX) --- */

/* 1. Reset & Styling Dasar (Untuk Semua Input & Select) */
select,
input[type="text"],
input[type="password"],
input[type="date"],
input[type="month"],
input[type="number"],
textarea {
  appearance: none !important; /* Hapus style bawaan browser */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  background-color: #ffffff;
  border: 1px solid #e2e8f0; /* Border abu-abu halus */
  border-radius: 12px !important; /* Sudut membulat (Rounded) */
  font-size: 0.875rem; /* Ukuran font pas */
  line-height: 1.25;
  color: #1e293b; /* Warna teks gelap */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02); /* Bayangan tipis */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Padding Default yang Aman */
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* 2. KHUSUS DROPDOWN (SELECT) - Agar Teks Filter Tidak Nabrak Panah */
select {
  /* Paksa jarak kanan lebar untuk tempat ikon panah */
  padding-right: 2.5rem !important;

  /* Gambar Panah Custom (Chevron Modern) */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.5rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.5em 1.5em !important;
  cursor: pointer;
}

/* 3. KHUSUS INPUT LOGIN (Yang ada ikon di kiri) */
/* Selector ini menjaga input login agar teks tidak menimpa ikon user/gembok */
input.pl-10 {
  padding-left: 2.5rem !important; /* Ruang untuk ikon di kiri */
  padding-right: 1rem !important; /* Kanan standar */
}

/* 4. Efek Fokus (Saat diklik menyala biru) */
select:focus,
input:focus,
textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); /* Glow biru */
  transform: translateY(-1px); /* Efek naik sedikit */
}

/* 5. Efek Hover (Saat mouse di atasnya) */
select:hover,
input:hover {
  border-color: #cbd5e1;
  background-color: #f8fafc;
}

/* 6. Styling Opsi di dalam Dropdown */
option {
  padding: 10px;
  background: white;
  color: #333;
}

/* Style Tambahan untuk Library TomSelect (Jika dipakai) */
.ts-control {
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  padding: 10px 12px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
}
.ts-dropdown {
  border-radius: 12px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
  border: none !important;
  overflow: hidden !important;
  margin-top: 8px !important;
}

/* --- CUSTOM STYLE UNTUK TOM SELECT (Dropdown Cantik) --- */

/* 1. Kotak Utama (Input) */
.ts-control {
  border-radius: 12px !important; /* Sudut Bulat */
  border: 1px solid #e2e8f0 !important; /* Border Halus */
  padding: 10px 16px !important; /* Spasi Lega */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
  background-image: none !important; /* Hapus panah default */
  font-size: 0.875rem !important;
  color: #334155 !important;
}

/* 2. Saat Diklik (Fokus) */
.ts-wrapper.focus .ts-control {
  border-color: #3b82f6 !important; /* Biru */
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important; /* Glow */
}

/* 3. Kotak Daftar Pilihan (Yang muncul ke bawah) */
.ts-dropdown {
  border-radius: 12px !important; /* Sudut Bulat List */
  border: none !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  margin-top: 8px !important; /* Jarak dari kotak atas */
  overflow: hidden !important; /* Agar isi tidak keluar sudut */
  z-index: 50 !important;
  padding: 6px !important; /* Padding dalam container */
}

/* 4. Isi Pilihan (Option Item) */
.ts-dropdown .option {
  border-radius: 8px !important; /* Sudut Item Bulat */
  padding: 10px 12px !important;
  margin-bottom: 2px !important;
  color: #475569 !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
}

/* 5. Saat Pilihan Disorot/Hover (Warna Biru Muda) */
.ts-dropdown .option.active,
.ts-dropdown .option:hover {
  background-color: #eff6ff !important; /* Biru sangat muda */
  color: #2563eb !important; /* Teks Biru */
}

/* 6. Saat Pilihan Dipilih (Selected) */
.ts-dropdown .option.selected {
  background-color: #3b82f6 !important; /* Biru Solid */
  color: white !important; /* Teks Putih */
}

/* --- RESPONSIVE MOBILE SIDEBAR --- */

@media (max-width: 768px) {
  /* 1. Sidebar: Force Full Width & Reset Mini State */
  #sidebar-admin,
  #sidebar-user,
  #sidebar-penilai,
  #sidebar-supervisor {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh !important;
    width: 16rem !important; /* FORCE FULL WIDTH */
    min-width: 16rem !important; /* Prevent shrinking */
    transform: translateX(-100%);
    z-index: 9999 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
  }

  /* 2. OVERRIDE MINI SIDEBAR STYLES FOR MOBILE */
  /* This ensures that even if 'sidebar-mini' class is on body, mobile sidebar stays full */
  .sidebar-mini #sidebar-admin,
  .sidebar-mini #sidebar-user,
  .sidebar-mini #sidebar-penilai,
  .sidebar-mini #sidebar-supervisor {
    width: 16rem !important;
  }

  /* Force display text and elements that are usually hidden in mini mode */
  .sidebar-mini .sidebar-text,
  .sidebar-mini .profile-card h3,
  .sidebar-mini .profile-card #role-container {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Reset profile avatar size for mobile */
  .sidebar-mini .profile-card > div:first-child {
    width: 4rem !important; /* Standard size */
    height: 4rem !important;
    font-size: 1.5rem !important;
    margin-bottom: 0.75rem !important;
  }

  .sidebar-mini .nav-link {
    justify-content: flex-start !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .sidebar-mini .nav-link svg {
    margin-right: 0.75rem !important;
  }

  /* 3. Content stays put */
  .main-content-wrapper,
  .sidebar-mini .main-content-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    transform: none !important;
  }

  /* 4. ACTIVE STATE: Show Sidebar */
  body.mobile-active #sidebar-admin,
  body.mobile-active #sidebar-user,
  body.mobile-active #sidebar-penilai,
  body.mobile-active #sidebar-supervisor {
    transform: translateX(0) !important;
    box-shadow: 10px 0 25px -5px rgba(0, 0, 0, 0.5) !important;
  }

  /* 5. Backdrop Overlay */
  body.mobile-active::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9990;
    backdrop-filter: blur(2px);
  }

  /* Hide default sidebar toggle arrows */
  .sidebar-toggle-btn {
    display: none !important;
  }
}