/* ===========================================================
   🌙 LEVEL 4 — MIDNIGHT SOFT DARK THEME
   Dark Mode elegan, cerah, nyaman dilihat, modern
   Cocok untuk seluruh halaman website Labkom
=========================================================== */

/* ===========================================================
   GLOBAL
=========================================================== */

body.soft-mode {
  background: #1c1f26 !important;
  color: #f0f0f2 !important;
}

body.soft-mode *,
body.soft-mode *:not(.btn):not(i) {
  color: inherit;
}

/* TEXT */
body.soft-mode h1,
body.soft-mode h2,
body.soft-mode h3,
body.soft-mode h4,
body.soft-mode .fw-semibold,
body.soft-mode .text-dark,
body.soft-mode p,
body.soft-mode a,
body.soft-mode label,
body.soft-mode span {
  color: #f0f0f2 !important;
}

/* ICON */
body.soft-mode i {
  filter: brightness(0.90);
}

/* LINK */
body.soft-mode a:hover {
  color: #8cbaff !important;
}

/* ===========================================================
   HERO / HEADER UTAMA
=========================================================== */

body.soft-mode .hero {
  background: linear-gradient(135deg, #262c36, #2f3641) !important;
  color: #ffffff !important;
  border: 1px solid #3a414c !important;
}

/* ===========================================================
   CARD / MENU CARD
=========================================================== */

body.soft-mode .menu-card,
body.soft-mode .card {
  background: #262c36 !important;
  border: 1px solid #3a414c !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.40) !important;
}

body.soft-mode .menu-card:hover,
body.soft-mode .card:hover {
  background: #2f3641 !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.55) !important;
}

/* ===========================================================
   TABLE (default)
=========================================================== */

body.soft-mode .table {
  background: #262c36 !important;
  color: #f0f0f2 !important;
}

body.soft-mode table td:not([style*="background"]),
body.soft-mode table th {
  background: #2e353f !important;
  border-color: #3a414c !important;
}

/* Header Tabel Default */
body.soft-mode .table thead th {
  background: #29303a !important;
  color: #ffffff !important;
  border-color: #3a414c !important;
}

/* Cell kosong */
body.soft-mode .cell-empty {
  color: #b4b4b4 !important;
}

/* ===========================================================
   FORM ELEMENTS
=========================================================== */

body.soft-mode input,
body.soft-mode select,
body.soft-mode textarea {
  background: #2b3038 !important;
  border: 1px solid #3c4550 !important;
  color: #f0f0f2 !important;
}

body.soft-mode input:focus,
body.soft-mode select:focus,
body.soft-mode textarea:focus {
  background: #323842 !important;
  border-color: #379aff !important;
  color: #ffffff !important;
}

/* ===========================================================
   BUTTONS
=========================================================== */

body.soft-mode .btn {
  border-radius: 6px !important;
}

body.soft-mode .btn-primary {
  background: #2d8cff !important;
  border-color: #379aff !important;
  color: #ffffff !important;
}

body.soft-mode .btn-primary:hover {
  background: #379aff !important;
}

body.soft-mode .btn-outline-secondary {
  color: #dee2e6 !important;
  border-color: #505962 !important;
}

body.soft-mode .btn-outline-secondary:hover {
  background: #3a434d !important;
}

/* ===========================================================
   MODAL
=========================================================== */

body.soft-mode .modal-content {
  background: #262c36 !important;
  color: #f0f0f2 !important;
}

body.soft-mode .modal-header,
body.soft-mode .modal-footer {
  border-color: #3a414c !important;
}

body.soft-mode .btn-close {
  filter: invert(0.85);
}

/* ===========================================================
   FOOTER
=========================================================== */

body.soft-mode footer {
  color: #c6c6c6 !important;
}

/* ===========================================================
   BADGE / LABEL / SMALL TIPS
=========================================================== */

body.soft-mode .badge,
body.soft-mode small,
body.soft-mode .text-muted {
  color: #c6c6c6 !important;
}

/* ===========================================================
   ELEMENT TAMBAHAN UNTUK JADWAL PRAKTIKUM
=========================================================== */

/* matkul button */
body.soft-mode .matkul-btn {
  background: #2a3038 !important;
  color: #f0f0f2 !important;
  border: 1px solid #3a414c !important;
}

body.soft-mode .matkul-btn:hover {
  background: #333a45 !important;
}

/* legend box */
body.soft-mode .legend-box {
  border-color: #505962 !important;
}

body.soft-mode .legend span {
  color: #f0f0f2 !important;
}



/* ===========================================================
   DARK MODE FIX — HEADER JADWAL + KOLOM SHIFT I–V (FINAL)
=========================================================== */
body.soft-mode table.table.table-bordered.table-hover thead.table-dark > tr > th {
    background-color: #3c4451 !important;
    color: #ffffff !important;
    border-color: #4a515e !important;
}

body.soft-mode table.table.table-bordered.table-hover tbody > tr > th {
    background-color: #3c4451 !important;
    color: #ffffff !important;
    border-color: #4a515e !important;
}


/* ============================================================
   FIX FINAL — TOGGLE (form-switch) AGAR KNOB SELALU TERLIHAT
   Berlaku untuk Bootstrap 5.3+ (knob pakai SVG mask)
   ============================================================ */

/* TRACK OFF (posisi mati) */
body.soft-mode .form-check-input[type="checkbox"] {
    background-color: #3c4451 !important;   /* abu gelap kontras */
    border-color: #59606b !important;
}

/* TRACK ON (posisi hidup) — biru gelap modern */
body.soft-mode .form-check-input[type="checkbox"]:checked {
    background-color: #1f6feb !important;   /* biru GitHub */
    border-color: #1f6feb !important;
}

/* ============================================================
   FIX KNOB PUTIH (Bootstrap pakai SVG mask → override)
   ============================================================ */

/* knob OFF / ON → selalu putih solid */
body.soft-mode .form-check-input[type="checkbox"] {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 18 18'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}
body.soft-mode .form-check-input[type="checkbox"]:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 18 18'%3e%3ccircle r='3' fill='red'/%3e%3c/svg%3e") !important;
}

/* ============================================================
   FIX POSISI KNOB SAAT ON (agar tidak tenggelam ke track)
   ============================================================ */

body.soft-mode .form-check-input[type="checkbox"]:checked {
    background-position: calc(100% - 6px) center !important;
}

/* BONUS: sedikit perbesar knob biar makin kelihatan */
body.soft-mode .form-check-input[type="checkbox"] {
    background-size: 18px 18px !important;
}


/* ============================================================
   DARK MODE FIX — HALAMAN MODUL PRAKTIKUM
   ============================================================ */

/* Judul Halaman (📚 Daftar Modul Praktikum) */
body.soft-mode .page-header h2 {
    color: #ffffff !important;
}

/* Tombol Beranda */
body.soft-mode .page-header .btn-outline-secondary {
    color: #dee2e6 !important;
    border-color: #505962 !important;
}
body.soft-mode .page-header .btn-outline-secondary:hover {
    background: #3a434d !important;
}

/* Card modul */
body.soft-mode .modul-card {
    background: #262c36 !important;
    border: 1px solid #3a414c !important;
}

/* Judul Modul */
body.soft-mode .modul-title {
    color: #ffffff !important;
}

/* Deskripsi modul */
body.soft-mode .modul-desc {
    color: #cfd3d6 !important;
}

/* Badge Mata Kuliah */
body.soft-mode .modul-badge {
    background: #374152 !important;
    color: #8ecbff !important;
}

/* Label Filter */
body.soft-mode label,
body.soft-mode .dropdown-info {
    color: #eaeaea !important;
}

/* Dropdown Select */
body.soft-mode select.form-select {
    background: #2b3038 !important;
    border-color: #505962 !important;
    color: #ffffff !important;
}

/* Options dalam select */
body.soft-mode select.form-select option {
    background: #2b3038 !important;
    color: #ffffff !important;
}

/* Icon “image placeholder” */
body.soft-mode .modul-img i {
    color: #e1e1e1 !important;
}
/* ============================================================
   DARK MODE FIX — HALAMAN DETAIL MODUL PRAKTIKUM
   ============================================================ */

/* HEADER MODUL */
body.soft-mode .modul-header {
    background: #262c36 !important;
    border: 1px solid #3a414c !important;
    box-shadow: 0 3px 6px rgba(0,0,0,.4) !important;
    color: #ffffff !important;
}

/* Judul modul */
body.soft-mode .modul-header h2 {
    color: #ffffff !important;
}

/* Nama mata kuliah */
body.soft-mode .modul-header .text-muted {
    color: #c9d1d9 !important;
}

/* Section BOX */
body.soft-mode .section-box {
    background: #262c36 !important;
    border-color: #3a414c !important;
    color: #e6e6e6 !important;
}

/* Judul section */
body.soft-mode .section-title {
    color: #8ecbff !important;         /* biru terang terlihat */
}

/* Nomor section */
body.soft-mode .section-number {
    color: #b7bbc1 !important;
}

/* Konten section (markdown) */
body.soft-mode .section-box p,
body.soft-mode .section-box li,
body.soft-mode .section-box strong,
body.soft-mode .section-box em {
    color: #e6e6e6 !important;
}

/* Code block */
body.soft-mode .section-box pre,
body.soft-mode .section-box code {
    background: #1e232b !important;
    color: #ffb4e6 !important;
    border: 1px solid #3a414c !important;
}

/* Tombol lihat gambar */
body.soft-mode .btn-outline-primary {
    color: #90c2ff !important;
    border-color: #90c2ff !important;
}
body.soft-mode .btn-outline-primary:hover {
    background: #90c2ff !important;
    color: #000 !important;
}

/* Gambar section */
body.soft-mode .section-img {
    border-color: #3a414c !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.5) !important;
}
/* ============================================================
   CUSTOM DARK MODE TOGGLE — SUN & MOON
   ============================================================ */

.softmode-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    user-select: none;
}

/* Hide default switch */
#softModeToggle {
    appearance: none;
    -webkit-appearance: none;
    width: 46px;
    height: 24px;
    background: #cfd4da;
    border-radius: 25px;
    position: relative;
    cursor: pointer;
    transition: .25s ease-out;
}

/* The circle knob */
#softModeToggle::before {
    content: "";
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: .25s;
    box-shadow: 0 2px 4px rgba(0,0,0,.35);
}

/* When ON (Dark Mode) */
#softModeToggle:checked {
    background: #4a90e2;
}

#softModeToggle:checked::before {
    left: 24px;
    background: #fff;
}

/* Icons */
.softmode-toggle .icon-sun {
    opacity: 1;
    transition: .25s;
}

.softmode-toggle .icon-moon {
    opacity: .4;
    transition: .25s;
}

/* Swap when Dark Mode */
#softModeToggle:checked ~ .icon-moon {
    opacity: 1;
}

#softModeToggle:checked ~ .icon-sun {
    opacity: .3;
}

/* DARK MODE FIX: toggle in dark background */
body.soft-mode #softModeToggle {
    background: #556170;
}

body.soft-mode #softModeToggle:checked {
    background: #3ea6ff;
}