/* ==========================================================================
   TEHDIR - Auxiliary Styles: RPS Guru (Rencana Pembelajaran Semester)
   Direktori: assets/auxillary/rps.css
   Penggunaan: src/Web/RpsGuru/View/view.php (https://tehdir.gontor.ac.id/rps-guru/view/59)
   
   ATURAN PENGEMBANGAN (AGENTS.md):
   - Berisi style khusus modul RPS Guru yang TIDAK ada di Bootstrap 5.3:
     Interaktivitas HTML5 Drag-and-Drop Plotting Sesi, Dropzone Visual State
     (Valid = Biru dashed, Forbidden = Merah dashed), Layout Split 65%:35%
     dengan Sticky Floating Bank Sesi, serta Standar Kolom Matriks Mengajar.
   ========================================================================== */


/* ==========================================================================
   Bagian 7 — RPS Guru: Interaktivitas Matriks & Drag-and-Drop Plotting
   Digunakan di: src/Web/RpsGuru/View/view.php
   Alasan Non-Bootstrap:
   - State interaktif HTML5 Drag-and-Drop (kartu sesi yang di-drag, efek melayang,
     garis outline dashed biru saat valid, merah saat forbidden/bentrok).
   - Memperluas area klik seleksi multi-baris (select-cell) untuk operasional guru/staf.
   ========================================================================== */

/* Baris jadwal pertemuan non-aktif (libur atau jam kosong) */
tr[data-is-aktif="0"] {
    background-color: var(--bs-secondary-bg-subtle, #e2e8f0) !important;
    color: var(--text-muted) !important;
}

tr[data-is-aktif="0"]:hover,
.table-hover tbody tr[data-is-aktif="0"]:hover {
    background-color: var(--bg-hover, #cbd5e1) !important;
    color: var(--text-main) !important;
}

body[data-theme="dark"] tr[data-is-aktif="0"],
[data-bs-theme="dark"] tr[data-is-aktif="0"] {
    background-color: rgba(30, 41, 59, 0.5) !important;
    color: var(--text-muted) !important;
}

body[data-theme="dark"] tr[data-is-aktif="0"]:hover,
body[data-theme="dark"] .table-hover tbody tr[data-is-aktif="0"]:hover,
[data-bs-theme="dark"] tr[data-is-aktif="0"]:hover,
[data-bs-theme="dark"] .table-hover tbody tr[data-is-aktif="0"]:hover {
    background-color: rgba(51, 65, 85, 0.7) !important;
    color: var(--text-main) !important;
}

tr[data-is-aktif="0"] td {
    background-color: transparent !important;
}

/* Area klik untuk memilih checkbox baris tanpa harus tepat mengklik kotak kecil */
.select-cell,
.select-all-cell {
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.select-cell:hover {
    background-color: var(--primary-light, rgba(13, 148, 136, 0.12)) !important;
}

.select-cell input[type="checkbox"],
.select-all-cell input[type="checkbox"] {
    pointer-events: none;
    transform: scale(1.15);
}

/* Kartu sesi materi silabus yang dapat digeser (draggable) */
.session-drag-card,
.plotted-session-drag {
    background: var(--bg-card);
    border-color: var(--border);
    transition: all 0.2s ease;
}

/* Efek kartu melayang saat di-hover sebelum digeser */
.session-drag-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.18) !important;
    border-color: #3b82f6 !important;
}

body[data-theme="dark"] .session-drag-card,
body[data-theme="dark"] .plotted-session-drag,
[data-bs-theme="dark"] .session-drag-card,
[data-bs-theme="dark"] .plotted-session-drag {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}

body[data-theme="dark"] .session-drag-card:hover,
[data-bs-theme="dark"] .session-drag-card:hover {
    background: var(--bg-hover) !important;
    border-color: var(--primary) !important;
}

/* Bentuk kursor saat siap digeser */
.cursor-grab {
    cursor: grab;
}

.cursor-grab:active {
    cursor: grabbing;
}


/* ==========================================================================
   Bagian 8 — RPS Guru: Layout Split Dua Kolom & Bank Sesi Sticky
   Digunakan di: src/Web/RpsGuru/View/view.php
   Alasan Non-Bootstrap:
   - Mengatur rasio lebar fleksibel 65% (tabel jadwal) : 35% (bank sesi).
   - Sidebar Bank Sesi melayang (sticky) mengikuti viewport pengguna saat
     tabel jadwal digulir ke bawah, serta auto-stack pada layar tablet/ponsel.
   ========================================================================== */

.rps-split-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.rps-table-col {
    flex: 1 1 65%;
    min-width: 0;
}

.rps-sidebar-col {
    flex: 0 0 35%;
    min-width: 320px;
    max-width: 420px;
    position: sticky;
    top: calc(70px + 1rem);
    z-index: 20;
}

.rps-sidebar-body {
    max-height: calc(100vh - 70px - 140px);
    overflow-y: auto;
}

@media (max-width: 991.98px) {
    .rps-split-layout {
        flex-direction: column !important;
    }

    .rps-table-col,
    .rps-sidebar-col {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .rps-sidebar-col {
        position: static !important;
    }
}


/* ==========================================================================
   Bagian 10 — RPS Guru: Standar Lebar Kolom & State Drop
   Digunakan di: src/Web/RpsGuru/View/view.php
   Alasan Non-Bootstrap:
   - Indikator dropzone interaktif (valid = biru, invalid = merah).
   - Pengatur lebar kolom tetap untuk mencegah pergeseran layout saat kartu digeser.
   - Pengganti inline styling agar sesuai aturan AGENTS.md.
   ========================================================================== */

/* Ukuran progress bar keterisian mengajar (110x8px) */
.rps-progress-bar {
    width: 110px;
    height: 8px;
}

/* Batas lebar minimum tabel matriks RPS guru */
.rps-matrix-table {
    min-width: 650px;
}

.rps-matrix-table .select-all-cell,
.rps-matrix-table .select-cell {
    width: 44px;
    user-select: none;
}

/* Kolom tetap untuk tabel matriks RPS Guru */
.rps-col-check  { width: 44px; }
.rps-col-no     { width: 44px; }
.rps-col-pt     { width: 65px; }
.rps-col-date   { width: 170px; }
.rps-col-jam    { width: 75px; }
.rps-col-materi { min-width: 200px; }
.rps-col-tujuan { min-width: 180px; }
.rps-col-status { width: 95px; }
.rps-col-aksi   { width: 75px; }

/* Baris RPS guru yang tidak aktif */
.rps-row-inactive {
    background-color: var(--bs-secondary-bg-subtle, #e2e8f0) !important;
    color: var(--text-muted);
}

body[data-theme="dark"] .rps-row-inactive,
[data-bs-theme="dark"] .rps-row-inactive {
    background-color: rgba(30, 41, 59, 0.5) !important;
    color: var(--text-muted);
}

/* Baris pertemuan yang telah selesai terlaksana (Hijau) */
.rps-row-completed {
    background-color: var(--success-light, rgba(16, 185, 129, 0.08)) !important;
}

body[data-theme="dark"] .rps-row-completed,
[data-bs-theme="dark"] .rps-row-completed {
    background-color: rgba(16, 185, 129, 0.14) !important;
}

/* Visual state saat kartu sesi melayang di atas baris target yang VALID (Biru dashed) */
.rps-drag-over-active {
    background: rgba(59, 130, 246, 0.1) !important;
    outline: 2px dashed #3b82f6 !important;
    outline-offset: -2px;
}

body[data-theme="dark"] .rps-drag-over-active,
[data-bs-theme="dark"] .rps-drag-over-active {
    background: rgba(59, 130, 246, 0.25) !important;
    outline: 2px dashed #60a5fa !important;
}

/* Visual state saat kartu sesi melayang di atas baris yang DILARANG / NON-AKTIF (Merah dashed) */
.rps-drag-over-forbidden {
    background: rgba(239, 68, 68, 0.12) !important;
    outline: 2px dashed #dc2626 !important;
    outline-offset: -2px;
}

body[data-theme="dark"] .rps-drag-over-forbidden,
[data-bs-theme="dark"] .rps-drag-over-forbidden {
    background: rgba(239, 68, 68, 0.25) !important;
    outline: 2px dashed #f87171 !important;
}

/* Area dropzone untuk membatalkan / mengosongkan plotting sesi */
.session-reset-card {
    border-style: dashed !important;
    border-color: var(--border, #cbd5e1) !important;
    transition: all 0.2s ease;
}

/* Layering z-index toast RPS agar selalu di atas navbar sticky dan modal */
.toast-container-rps {
    z-index: 1100;
}

#rpsToast {
    background-color: var(--bg-card, #ffffff);
    color: var(--text-main, #0f172a);
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
}