/* ==========================================================================
   Andie Classroom — gaya tambahan di atas Bootstrap 5.3

   CARA KERJA TEMA
   1. Mode terang/gelap  : atribut data-bs-theme="light|dark" pada <html>.
   2. Tema warna         : atribut data-ac-color="<nama>" pada <html>.
   Setiap tema warna cukup mengisi 6 variabel dasar (lihat bagian TEMA WARNA).
   Semua warna lain (hover, latar lembut, teks, fokus, mode gelap) diturunkan
   otomatis dengan color-mix(). Untuk membuat tema baru, salin satu blok tema,
   ganti namanya, lalu tambahkan pilihannya di menu tema.
   ========================================================================== */

/* ---------- TEMA WARNA ----------
   --ac-primary        warna utama terang (dipakai di mode gelap & gradien)
   --ac-primary-rgb    nilai RGB dari --ac-primary
   --ac-primary-dark   warna utama gelap, kontras ≥ 4,5:1 di atas putih (mode terang)
   --ac-primary-dark-rgb
   --ac-accent         warna aksen terang (tombol aksen, ornamen)
   --ac-accent-dark    warna aksen untuk teks di mode terang                  */

:root,
[data-ac-color="andie"] {          /* Andie: teal + oranye (warna logo) */
  --ac-primary: #2ec4b6; --ac-primary-rgb: 46, 196, 182;
  --ac-primary-dark: #13877c; --ac-primary-dark-rgb: 19, 135, 124;
  --ac-accent: #ff9f1c; --ac-accent-dark: #c96f00;
}
[data-ac-color="biru"] {           /* Biru Kampus: biru + kuning */
  --ac-primary: #60a5fa; --ac-primary-rgb: 96, 165, 250;
  --ac-primary-dark: #1d4ed8; --ac-primary-dark-rgb: 29, 78, 216;
  --ac-accent: #fbbf24; --ac-accent-dark: #b45309;
}
[data-ac-color="hijau"] {          /* Hijau Daun: hijau + emas */
  --ac-primary: #4ade80; --ac-primary-rgb: 74, 222, 128;
  --ac-primary-dark: #15803d; --ac-primary-dark-rgb: 21, 128, 61;
  --ac-accent: #facc15; --ac-accent-dark: #a16207;
}
[data-ac-color="ungu"] {           /* Ungu Lavender: ungu + merah muda */
  --ac-primary: #a78bfa; --ac-primary-rgb: 167, 139, 250;
  --ac-primary-dark: #6d28d9; --ac-primary-dark-rgb: 109, 40, 217;
  --ac-accent: #f472b6; --ac-accent-dark: #be185d;
}
[data-ac-color="marun"] {          /* Merah Marun: marun + amber */
  --ac-primary: #fb7185; --ac-primary-rgb: 251, 113, 133;
  --ac-primary-dark: #9f1239; --ac-primary-dark-rgb: 159, 18, 57;
  --ac-accent: #fbbf24; --ac-accent-dark: #b45309;
}
[data-ac-color="grafit"] {         /* Grafit: abu-abu netral + biru langit */
  --ac-primary: #94a3b8; --ac-primary-rgb: 148, 163, 184;
  --ac-primary-dark: #334155; --ac-primary-dark-rgb: 51, 65, 85;
  --ac-accent: #38bdf8; --ac-accent-dark: #0369a1;
}

/* ---------- Turunan untuk mode terang ---------- */
:root,
[data-bs-theme="light"] {
  --ac-sidebar-width: 260px;

  --bs-primary: var(--ac-primary-dark);
  --bs-primary-rgb: var(--ac-primary-dark-rgb);
  --bs-primary-text-emphasis: color-mix(in srgb, var(--ac-primary-dark) 65%, #000);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--ac-primary) 18%, #fff);
  --bs-primary-border-subtle: color-mix(in srgb, var(--ac-primary) 45%, #fff);
  --bs-link-color: var(--ac-primary-dark);
  --bs-link-color-rgb: var(--ac-primary-dark-rgb);
  --bs-link-hover-color: var(--bs-primary-text-emphasis);
  --bs-link-hover-color-rgb: var(--ac-primary-dark-rgb);
  --bs-body-bg: #f5f7fa;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-border-radius: .5rem;
  --bs-border-radius-lg: .75rem;
  --bs-focus-ring-color: color-mix(in srgb, var(--ac-primary) 35%, transparent);

  --ac-on-primary: #fff;
  --ac-primary-hover: color-mix(in srgb, var(--ac-primary-dark) 82%, #000);
  --ac-primary-active: color-mix(in srgb, var(--ac-primary-dark) 65%, #000);
  --ac-accent-text: var(--ac-accent-dark);
  --ac-accent-subtle: color-mix(in srgb, var(--ac-accent) 20%, #fff);
  --ac-surface: #ffffff;
  --ac-muted-surface: #f0f3f6;
}

/* ---------- Turunan untuk mode gelap (night mode) ---------- */
[data-bs-theme="dark"] {
  --bs-primary: var(--ac-primary);
  --bs-primary-rgb: var(--ac-primary-rgb);
  --bs-primary-text-emphasis: color-mix(in srgb, var(--ac-primary) 55%, #fff);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--ac-primary) 20%, #12161c);
  --bs-primary-border-subtle: color-mix(in srgb, var(--ac-primary) 40%, #12161c);
  --bs-link-color: var(--ac-primary);
  --bs-link-color-rgb: var(--ac-primary-rgb);
  --bs-link-hover-color: var(--bs-primary-text-emphasis);
  --bs-link-hover-color-rgb: var(--ac-primary-rgb);
  --bs-body-bg: #12161c;
  --bs-focus-ring-color: color-mix(in srgb, var(--ac-primary) 40%, transparent);

  --ac-on-primary: #0b1215;
  --ac-primary-hover: color-mix(in srgb, var(--ac-primary) 80%, #fff);
  --ac-primary-active: color-mix(in srgb, var(--ac-primary) 65%, #fff);
  --ac-accent-text: var(--ac-accent);
  --ac-accent-subtle: color-mix(in srgb, var(--ac-accent) 20%, #1a2028);
  --ac-surface: #1a2028;
  --ac-muted-surface: #212833;
}

/* ---------- Tombol & komponen bermerek ---------- */
.btn-primary {
  --bs-btn-color: var(--ac-on-primary);
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--ac-on-primary);
  --bs-btn-hover-bg: var(--ac-primary-hover);
  --bs-btn-hover-border-color: var(--ac-primary-hover);
  --bs-btn-active-color: var(--ac-on-primary);
  --bs-btn-active-bg: var(--ac-primary-active);
  --bs-btn-active-border-color: var(--ac-primary-active);
  --bs-btn-disabled-color: var(--ac-on-primary);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--ac-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--ac-on-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: var(--ac-on-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--ac-primary-rgb);
}
.btn-accent {
  --bs-btn-color: #1d1300;
  --bs-btn-bg: var(--ac-accent);
  --bs-btn-border-color: var(--ac-accent);
  --bs-btn-hover-color: #1d1300;
  --bs-btn-hover-bg: color-mix(in srgb, var(--ac-accent) 80%, #fff);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--ac-accent) 80%, #fff);
  --bs-btn-active-color: #1d1300;
  --bs-btn-active-bg: color-mix(in srgb, var(--ac-accent) 85%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--ac-accent) 85%, #000);
  --bs-btn-focus-shadow-rgb: var(--ac-primary-rgb);
}
.text-accent { color: var(--ac-accent-text) !important; }
.bg-accent-subtle { background-color: var(--ac-accent-subtle) !important; }

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--ac-primary);
  box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); --bs-nav-pills-link-active-color: var(--ac-on-primary); }
.nav-link { color: var(--bs-body-color); }
.nav-tabs .nav-link.active { color: var(--bs-primary); font-weight: 600; }
.page-link { color: var(--bs-primary); }
.active > .page-link, .page-link.active { background-color: var(--bs-primary); border-color: var(--bs-primary); color: var(--ac-on-primary); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--bs-primary); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary); --bs-dropdown-link-active-color: var(--ac-on-primary); }

.card {
  --bs-card-bg: var(--ac-surface);
  --bs-card-border-color: var(--bs-border-color-translucent);
  --bs-card-cap-bg: transparent;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* ---------- Pemilih tema ---------- */
.swatch {
  display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--ac-primary-dark) 0 50%, var(--ac-accent) 50% 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}
.theme-menu { min-width: 230px; }
.theme-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.theme-menu .dropdown-item .bi-check2 { margin-left: auto; visibility: hidden; }
.theme-menu .dropdown-item.active .bi-check2 { visibility: visible; }
.theme-sample { background: var(--bs-body-bg); color: var(--bs-body-color); }

/* ---------- Kerangka aplikasi ---------- */
.app-sidebar {
  --bs-offcanvas-width: var(--ac-sidebar-width);
  background: var(--ac-surface);
  border-right: 1px solid var(--bs-border-color-translucent);
}
@media (min-width: 992px) {
  .app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--ac-sidebar-width);
    z-index: 1030;
  }
  .app-main { margin-left: var(--ac-sidebar-width); }
}
.app-sidebar .offcanvas-body { display: flex; flex-direction: column; padding: 0; }
.app-brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.25rem; text-decoration: none; color: var(--bs-body-color); }
.app-brand img { width: 36px; height: 36px; }
.app-brand-name { font-weight: 700; font-size: 1.1rem; line-height: 1.1; }
.app-brand-name .a { color: var(--bs-primary); }
.app-brand-name .c { color: var(--ac-accent-text); }

.app-nav { padding: .5rem .75rem 1rem; overflow-y: auto; flex: 1; }
.app-nav .nav-heading {
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--bs-secondary-color); padding: 1rem .75rem .35rem;
}
.app-nav .nav-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .75rem; border-radius: var(--bs-border-radius);
  color: var(--bs-body-color); font-weight: 500;
}
.app-nav .nav-link .bi { font-size: 1.1rem; color: var(--bs-secondary-color); }
.app-nav .nav-link:hover { background: var(--ac-muted-surface); }
.app-nav .nav-link.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.app-nav .nav-link.active .bi { color: var(--bs-primary); }
.app-nav .badge { margin-left: auto; }

.app-sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--bs-border-color-translucent); font-size: .8rem; color: var(--bs-secondary-color); }

.app-topbar {
  position: sticky; top: 0; z-index: 1020;
  background: color-mix(in srgb, var(--bs-body-bg) 85%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bs-border-color-translucent);
}
.app-topbar .search { max-width: 360px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-sm { width: 28px; height: 28px; }
.avatar-lg { width: 64px; height: 64px; }
.avatar-xl { width: 112px; height: 112px; }
.avatar-initial.avatar-xl { font-size: 2rem; }
.avatar-initial {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .8rem;
  background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis);
}

.app-content { padding: 1.5rem; }
@media (max-width: 575.98px) { .app-content { padding: 1rem; } }
.app-footer { padding: 1rem 1.5rem; font-size: .8rem; color: var(--bs-secondary-color); }

.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.page-header .breadcrumb { margin-bottom: .25rem; font-size: .85rem; }

/* ---------- Kartu statistik ---------- */
.stat-card .stat-icon {
  width: 44px; height: 44px; border-radius: .6rem;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label { color: var(--bs-secondary-color); font-size: .85rem; }

/* ---------- Kartu perkuliahan ---------- */
.course-card { transition: transform .15s ease, box-shadow .15s ease; }
.course-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16, 24, 40, .08); }
.course-cover {
  height: 88px; border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
  background: linear-gradient(135deg, var(--ac-primary) 0%, var(--ac-primary-dark) 100%);
  position: relative; overflow: hidden;
}
.course-cover::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px;
  border: 18px solid color-mix(in srgb, var(--ac-accent) 85%, transparent); border-radius: 50%;
}
.course-cover.alt { background: linear-gradient(135deg, color-mix(in srgb, var(--ac-accent) 75%, #fff) 0%, var(--ac-accent-dark) 100%); }
.course-cover.alt::after { border-color: color-mix(in srgb, var(--ac-primary) 85%, transparent); }
.course-cover.dark { background: linear-gradient(135deg, #3a4a5c 0%, #1f2a36 100%); }
.course-code { position: absolute; left: 1rem; bottom: .75rem; color: #fff; font-weight: 600; font-size: .8rem; letter-spacing: .04em; z-index: 1; }
.course-baru { position: absolute; left: 1rem; top: .75rem; z-index: 1; }
/* Kotak kartu: kolom sebanyak yang muat (min. 16rem), kartu melebar memenuhi baris; 1-2 kartu ikut penuh. */
.kartu-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.kartu-grid > .kartu-item { min-width: 0; }

/* ---------- Detail perkuliahan ---------- */
.course-hero {
  border-radius: var(--bs-border-radius-lg);
  background: linear-gradient(120deg, var(--ac-primary-dark) 0%, var(--ac-primary) 100%);
  color: #fff; padding: 1.5rem; position: relative; overflow: hidden;
}
.course-hero::after {
  content: ""; position: absolute; right: -60px; bottom: -80px; width: 240px; height: 240px;
  border: 34px solid color-mix(in srgb, var(--ac-accent) 90%, transparent); border-radius: 50%;
}
.course-hero > * { position: relative; z-index: 1; }
.course-hero .meta { opacity: .9; font-size: .9rem; }

.meeting-item .accordion-button { gap: .75rem; }
.meeting-no {
  width: 36px; height: 36px; border-radius: .5rem; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis);
}
.meeting-no.upcoming { background: var(--ac-muted-surface); color: var(--bs-secondary-color); }
.accordion { --bs-accordion-bg: var(--ac-surface); --bs-accordion-active-bg: var(--ac-surface); --bs-accordion-active-color: var(--bs-body-color); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }

.file-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .75rem; border-radius: var(--bs-border-radius);
  border: 1px solid var(--bs-border-color); background: var(--ac-muted-surface);
  font-size: .875rem; text-decoration: none; color: var(--bs-body-color);
}
.file-chip:hover { border-color: var(--bs-primary); }

.comment { display: flex; gap: .75rem; }
.comment + .comment { margin-top: 1rem; }
.comment-body { background: var(--ac-muted-surface); border-radius: var(--bs-border-radius-lg); padding: .65rem .9rem; flex: 1; }

.attendance-grid th, .attendance-grid td { text-align: center; white-space: nowrap; }
.attendance-grid th:first-child, .attendance-grid td:first-child { text-align: left; position: sticky; left: 0; background: var(--ac-surface); }
.att { display: inline-block; width: 22px; height: 22px; line-height: 22px; border-radius: 4px; font-size: .7rem; font-weight: 700; }
.att-h { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.att-i { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.att-s { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.att-a { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }

.table > :not(caption) > * > * { background-color: transparent; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); font-weight: 600; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding-left: 1.5rem; padding-bottom: 1rem; }
.timeline li::before { content: ""; position: absolute; left: 5px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--ac-primary); }
.timeline li::after { content: ""; position: absolute; left: 9px; top: 18px; bottom: 0; width: 2px; background: var(--bs-border-color); }
.timeline li:last-child::after { display: none; }

/* ---------- Halaman masuk (login, daftar, lupa password) ---------- */
.auth-wrap { min-height: 100vh; display: flex; }
.auth-aside {
  flex: 1 1 50%; position: relative; color: #fff;
  background: url("../img/bg-login.jpg") center / cover no-repeat;
  display: none;
}
.auth-aside::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--ac-primary-dark) 92%, transparent) 0%, color-mix(in srgb, var(--ac-primary-dark) 88%, #000) 100%); }
.auth-aside > div { position: relative; z-index: 1; }
@media (min-width: 992px) { .auth-aside { display: flex; align-items: flex-end; padding: 3rem; } }
.auth-panel { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.auth-card { width: 100%; max-width: 420px; }
.auth-logo { width: 72px; height: 72px; }
.auth-feature { display: flex; gap: .75rem; align-items: flex-start; }
.auth-feature .bi { font-size: 1.25rem; color: var(--ac-accent); }

/* ---------- Utilitas kecil ---------- */
.fw-semibold { font-weight: 600 !important; }
.min-w-0 { min-width: 0; }
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--bs-secondary-color); }
.empty-state .bi { font-size: 2.5rem; color: var(--bs-border-color); }
.progress-thin { height: 6px; }
.progress-md { height: 8px; }
.dropdown-notif { width: 320px; max-width: calc(100vw - 2rem); }
.input-nilai { width: 80px; }
/* Tabel berisi checkbox (pembagian mahasiswa ke kelas): bisa digulir, judul kolom tetap terlihat */
.tabel-pilih { max-height: 60vh; overflow-y: auto; }
.tabel-pilih thead th { position: sticky; top: 0; z-index: 1; background: var(--ac-surface); }
.tabel-pilih label { cursor: pointer; }
.w-1 { width: 1%; }
/* Halaman dosen & mahasiswa */
/* Lebar progress bar tanpa style inline: kelas_lebar($persen) di fungsi.php */
.lebar-0 { width: 0%; }
.lebar-5 { width: 5%; }
.lebar-10 { width: 10%; }
.lebar-15 { width: 15%; }
.lebar-20 { width: 20%; }
.lebar-25 { width: 25%; }
.lebar-30 { width: 30%; }
.lebar-35 { width: 35%; }
.lebar-40 { width: 40%; }
.lebar-45 { width: 45%; }
.lebar-50 { width: 50%; }
.lebar-55 { width: 55%; }
.lebar-60 { width: 60%; }
.lebar-65 { width: 65%; }
.lebar-70 { width: 70%; }
.lebar-75 { width: 75%; }
.lebar-80 { width: 80%; }
.lebar-85 { width: 85%; }
.lebar-90 { width: 90%; }
.lebar-95 { width: 95%; }
.lebar-100 { width: 100%; }
/* Label .visually-hidden (position absolute) di tabel yang digulir tidak boleh melebarkan halaman di ponsel */
.table-responsive { position: relative; }
.isi-teks { overflow-wrap: anywhere; }

/* Isi materi berformat (editor TinyMCE). Kelas ac-* berasal dari tombol perataan editor; style inline dibuang server. */
.isi-materi { line-height: 1.65; }
.isi-materi::after { content: ""; display: table; clear: both; }
.isi-materi > :last-child { margin-bottom: 0; }
.isi-materi h1, .isi-materi h2, .isi-materi h3, .isi-materi h4 { font-size: 1.15rem; font-weight: 700; margin: 1.1rem 0 .5rem; }
.isi-materi h3, .isi-materi h4 { font-size: 1.05rem; }
.isi-materi img { max-width: 100%; height: auto; border-radius: var(--bs-border-radius); }
.isi-materi iframe { display: block; width: 100%; max-width: 720px; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--bs-border-radius-lg); margin: .5rem 0 1rem; }
.isi-materi .ac-kiri { text-align: left; }
.isi-materi .ac-tengah { text-align: center; }
.isi-materi .ac-kanan { text-align: right; }
.isi-materi .ac-rata { text-align: justify; }
.isi-materi img.ac-kiri { float: left; margin: .25rem 1rem .5rem 0; max-width: 50%; }
.isi-materi img.ac-kanan { float: right; margin: .25rem 0 .5rem 1rem; max-width: 50%; }
.isi-materi img.ac-tengah { display: block; margin-left: auto; margin-right: auto; }
.isi-materi table.ac-tengah { margin-left: auto; margin-right: auto; }
.isi-materi figure.image { display: table; margin: 1rem auto; max-width: 100%; }
.isi-materi figure.image figcaption { text-align: center; font-size: .875rem; color: var(--bs-secondary-color); margin-top: .35rem; }
.isi-materi table { display: block; overflow-x: auto; max-width: 100%; }
.isi-materi table:not(.table) td, .isi-materi table:not(.table) th { padding: .35rem .6rem; border: 1px solid var(--bs-border-color); }
.isi-materi blockquote { padding: .35rem 0 .35rem 1rem; border-left: 4px solid var(--bs-border-color); color: var(--bs-secondary-color); }
.isi-materi pre { background: var(--ac-muted-surface, var(--bs-tertiary-bg)); padding: .75rem 1rem; border-radius: var(--bs-border-radius); overflow-x: auto; overflow-wrap: normal; }
.isi-materi a.ac-berkas {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; margin: .1rem 0;
  border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); text-decoration: none; font-size: .875rem;
}
.isi-materi a.ac-berkas::before { content: "\F4B3"; font-family: "bootstrap-icons"; line-height: 1; }
.isi-materi a.ac-berkas:hover { border-color: var(--bs-primary); }
.input-komentar-dosen { min-width: 180px; }
.pesan-item.belum-dibaca { box-shadow: inset 4px 0 0 var(--ac-accent); }
.pesan-item.belum-dibaca .nama { font-weight: 700; }
.kode-gabung { letter-spacing: .12em; }
@media (max-width: 575.98px) {
  .course-hero::after { width: 140px; height: 140px; border-width: 22px; right: -50px; bottom: -60px; opacity: .6; }
}

/* ==========================================================================
   VERSI BERWARNA & TEKS LEBIH BESAR
   Semua warna di bawah ini mengikuti tema aktif (--ac-primary / --ac-accent),
   jadi tetap berlaku untuk tema Andie, Biru, Hijau, Ungu, Marun, dan Grafit.
   ========================================================================== */

/* ---------- Ukuran teks ---------- */
html { font-size: 17px; }                    /* semua ukuran rem ikut membesar ±6% */
:root { --bs-body-line-height: 1.6; }
.small, small { font-size: .9em; }
.form-text { font-size: .9em; }
.table thead th { font-size: .8rem; }
.page-header h1 { font-size: 1.75rem; }
.app-nav .nav-link { font-size: 1rem; padding: .62rem .85rem; }
.app-nav .nav-heading { font-size: .74rem; }

/* ---------- Latar halaman ---------- */
[data-bs-theme="light"] { --bs-body-bg: color-mix(in srgb, var(--ac-primary) 7%, #f6f8fb); }
[data-bs-theme="dark"]  { --bs-body-bg: color-mix(in srgb, var(--ac-primary) 6%, #10141a); }

/* ---------- Menu samping berwarna ---------- */
.app-sidebar {
  background: linear-gradient(180deg, var(--ac-primary-dark) 0%, color-mix(in srgb, var(--ac-primary-dark) 70%, #000) 100%);
  border-right: 0;
  color: #fff;
}
[data-bs-theme="dark"] .app-sidebar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ac-primary) 28%, #141a22) 0%, #0e1218 100%);
}
.app-sidebar .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.app-brand, .app-brand:hover { color: #fff; }
.app-brand img { background: #fff; border-radius: 10px; padding: 3px; width: 40px; height: 40px; }
.app-sidebar .app-brand-name .a { color: #fff; }
.app-sidebar .app-brand-name .c { color: var(--ac-accent); }
.app-nav .nav-heading { color: rgba(255, 255, 255, .6); }
.app-nav .nav-link { color: rgba(255, 255, 255, .88); }
.app-nav .nav-link .bi { color: var(--ac-accent); }
.app-nav .nav-link:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.app-nav .nav-link.active {
  background: #fff; color: var(--ac-primary-dark); font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.app-nav .nav-link.active .bi { color: var(--ac-primary-dark); }
[data-bs-theme="dark"] .app-nav .nav-link.active { background: var(--ac-primary); color: #0b1215; }
[data-bs-theme="dark"] .app-nav .nav-link.active .bi { color: #0b1215; }
.app-sidebar-footer { border-top-color: rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .65); }

/* ---------- Bilah atas ---------- */
.app-topbar {
  background: color-mix(in srgb, var(--ac-surface) 88%, transparent);
  border-bottom: 0;
  box-shadow: 0 1px 0 var(--bs-border-color-translucent);
}
.app-topbar::before {
  content: ""; display: block; height: 4px;
  background: linear-gradient(90deg, var(--ac-primary-dark), var(--ac-primary) 55%, var(--ac-accent));
}
.app-topbar .input-group-text { color: var(--bs-primary); }

/* ---------- Widget statistik berwarna ---------- */
.stat-card { border: 0; color: #fff; overflow: hidden; position: relative; }
.stat-card::after {
  content: ""; position: absolute; right: -28px; bottom: -36px; width: 110px; height: 110px;
  border-radius: 50%; background: rgba(255, 255, 255, .14);
}
.stat-card .stat-icon { background: rgba(255, 255, 255, .22) !important; color: #fff !important; }
.stat-card .stat-label { color: rgba(255, 255, 255, .9); font-weight: 500; }
.stat-card .stat-value { font-size: 1.85rem; }
.stat-card .small { color: rgba(255, 255, 255, .92) !important; }
.stat-primary { background: linear-gradient(135deg, var(--ac-primary-dark), var(--ac-primary)); }
.stat-accent  { background: linear-gradient(135deg, color-mix(in srgb, var(--ac-accent-dark) 85%, #000), color-mix(in srgb, var(--ac-accent) 55%, var(--ac-accent-dark))); }
.stat-sky     { background: linear-gradient(135deg, #0369a1, #38bdf8); }
.stat-violet  { background: linear-gradient(135deg, #6d28d9, #a78bfa); }
.stat-emerald { background: linear-gradient(135deg, #047857, #34d399); }
.stat-rose    { background: linear-gradient(135deg, #be123c, #fb7185); }
[data-bs-theme="dark"] .stat-card { filter: saturate(.9) brightness(.92); }

/* ---------- Kartu ---------- */
.card { border-color: color-mix(in srgb, var(--ac-primary) 18%, var(--bs-border-color)); box-shadow: 0 2px 10px color-mix(in srgb, var(--ac-primary) 10%, transparent); }
.card:has(> .card-header) { border-top: 4px solid var(--ac-primary); }
.card > .card-header {
  background: color-mix(in srgb, var(--ac-primary) 10%, var(--ac-surface));
  border-bottom-color: color-mix(in srgb, var(--ac-primary) 22%, transparent);
}
.card > .card-header h2, .card > .card-header .h6 { color: var(--bs-primary-text-emphasis); }
.card > .card-header .bi { color: var(--bs-primary); }
.row > [class*="col"]:nth-child(3n+2) > .card:has(> .card-header),
.d-flex.flex-column > .card:nth-child(3n+2):has(> .card-header) { border-top-color: var(--ac-accent); }
.card-footer { background: color-mix(in srgb, var(--ac-primary) 5%, var(--ac-surface)); }
.list-group { --bs-list-group-action-hover-bg: color-mix(in srgb, var(--ac-primary) 10%, transparent); --bs-list-group-bg: transparent; }
.course-card { border-top: 0 !important; }
.course-card .card-body h2 a { color: var(--bs-primary-text-emphasis) !important; }

/* ---------- Tabel ---------- */
.table { --bs-table-hover-bg: color-mix(in srgb, var(--ac-primary) 12%, transparent); }
.table > thead > tr > th {
  background: color-mix(in srgb, var(--ac-primary) 16%, var(--ac-surface)) !important;
  color: var(--bs-primary-text-emphasis); border-bottom: 2px solid var(--ac-primary);
  padding-top: .8rem; padding-bottom: .8rem;
}
.table > tbody > tr:nth-child(even) > * { background-color: color-mix(in srgb, var(--ac-primary) 4%, transparent); }
.table > tbody > tr:hover > * { background-color: color-mix(in srgb, var(--ac-primary) 11%, transparent); }
.attendance-grid tbody td:first-child { background: var(--ac-surface) !important; }

/* ---------- Form ---------- */
.form-label { font-weight: 600; color: var(--bs-emphasis-color); }
.form-control, .form-select {
  border-color: color-mix(in srgb, var(--ac-primary) 30%, var(--bs-border-color));
  padding-top: .55rem; padding-bottom: .55rem;
}
.form-control-sm, .form-select-sm { padding-top: .3rem; padding-bottom: .3rem; }
.input-group-text {
  background: color-mix(in srgb, var(--ac-primary) 14%, var(--ac-surface));
  border-color: color-mix(in srgb, var(--ac-primary) 30%, var(--bs-border-color));
  color: var(--bs-primary);
}
.form-control:focus, .form-select:focus { border-color: var(--ac-primary); box-shadow: 0 0 0 .3rem var(--bs-focus-ring-color); }
.form-switch .form-check-input:checked { background-color: var(--ac-accent); border-color: var(--ac-accent); }
.form-control::file-selector-button { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.modal-header { background: linear-gradient(90deg, var(--ac-primary-dark), var(--ac-primary)); color: #fff; }
.modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ---------- Tab, pil, breadcrumb ---------- */
.nav-tabs { border-bottom: 2px solid color-mix(in srgb, var(--ac-primary) 25%, transparent); }
.nav-tabs .nav-link { border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; font-weight: 500; }
.nav-tabs .nav-link:hover { color: var(--bs-primary); background: color-mix(in srgb, var(--ac-primary) 8%, transparent); }
.nav-tabs .nav-link.active {
  background: color-mix(in srgb, var(--ac-primary) 14%, var(--ac-surface));
  border-bottom-color: var(--ac-accent); color: var(--bs-primary-text-emphasis);
}
.card-header-tabs .nav-link.active { background: var(--ac-surface); }
.nav-pills .nav-link { font-weight: 500; }
.breadcrumb-item.active { color: var(--ac-accent-text); font-weight: 500; }

/* ---------- Daftar pertemuan ---------- */
.meeting-no { background: linear-gradient(135deg, var(--ac-primary-dark), var(--ac-primary)); color: #fff; box-shadow: 0 3px 8px color-mix(in srgb, var(--ac-primary) 35%, transparent); }
.meeting-item .accordion-button:not(.collapsed) { background: color-mix(in srgb, var(--ac-primary) 12%, var(--ac-surface)); box-shadow: inset 4px 0 0 var(--ac-accent); }
.meeting-item:nth-child(even) .meeting-no { background: linear-gradient(135deg, var(--ac-accent-dark), var(--ac-accent)); }
.file-chip { background: color-mix(in srgb, var(--ac-primary) 8%, var(--ac-surface)); border-color: color-mix(in srgb, var(--ac-primary) 30%, transparent); }
.comment-body { background: color-mix(in srgb, var(--ac-primary) 9%, var(--ac-surface)); }

/* ---------- Avatar inisial berwarna-warni ---------- */
.avatar-initial { color: #fff; background: linear-gradient(135deg, var(--ac-primary-dark), var(--ac-primary)); }
.list-group-item:nth-child(4n+2) .avatar-initial, tr:nth-child(4n+2) .avatar-initial, .comment:nth-child(4n+2) .avatar-initial { background: linear-gradient(135deg, #b45309, #f59e0b); }
.list-group-item:nth-child(4n+3) .avatar-initial, tr:nth-child(4n+3) .avatar-initial, .comment:nth-child(4n+3) .avatar-initial { background: linear-gradient(135deg, #6d28d9, #a78bfa); }
.list-group-item:nth-child(4n+4) .avatar-initial, tr:nth-child(4n+4) .avatar-initial, .comment:nth-child(4n+4) .avatar-initial { background: linear-gradient(135deg, #0369a1, #38bdf8); }

/* ---------- Dropdown ---------- */
.dropdown-header { color: var(--ac-accent-text); font-weight: 600; text-transform: uppercase; font-size: .72rem; letter-spacing: .05em; }
.dropdown-item:hover { background: color-mix(in srgb, var(--ac-primary) 12%, transparent); }

/* ---------- Kartu login berwarna ---------- */
.auth-card {
  background: linear-gradient(90deg, var(--ac-primary-dark), var(--ac-primary) 60%, var(--ac-accent)) top / 100% 6px no-repeat, var(--ac-surface);
  padding: 2.25rem 2rem 1.25rem; border-radius: 1rem;
  box-shadow: 0 12px 40px color-mix(in srgb, var(--ac-primary) 18%, transparent);
}
@media (max-width: 575.98px) { .auth-card { padding: 1.75rem 1.25rem 1rem; } }

/* ---------- Pendaftaran & pesan admin ---------- */
.auth-card.auth-card-lebar { max-width: 600px; }
.isian-jebakan { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* isian jebakan robot di form daftar */
.chat { display: flex; flex-direction: column; gap: 1rem; }
.chat .comment + .comment { margin-top: 0; }
.chat .comment-body { flex: 0 1 auto; max-width: min(42rem, 85%); }
.chat .comment.dari-saya { flex-direction: row-reverse; }
.chat .comment.dari-saya .comment-body { background: color-mix(in srgb, var(--ac-primary) 20%, var(--ac-surface)); }
.chat-isi { max-height: 60vh; overflow-y: auto; }