:root { --primary: #2c3e50; --secondary: #18bc9c; --bg: #f4f7f6; --text: #333; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg); color: var(--text); margin: 0; padding: 0; }
        .container {
            width: calc(100% - 30px);
            max-width: 1200px;
            margin: 20px auto;
            background: #fff;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            box-sizing: border-box;
            min-width: 0;
            overflow: hidden;
        }
        .navbar { background: var(--primary); color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap:10px; }
        .navbar h2 { margin: 0; font-size: 20px; }
        .user-info { display: flex; align-items: center; gap: 15px; flex-wrap: wrap;}
        .badge-role { background: var(--secondary); padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; text-transform: uppercase;}
        .btn-logout { background: #e74c3c; color: white; text-decoration: none; padding: 6px 12px; border-radius: 4px; font-size: 14px; }
        
        .login-box { max-width: 420px; margin: 80px auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); text-align: center; }
        .login-box input, .login-box select { margin-bottom: 15px; padding: 10px; width: 100%; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
        .login-box button { width: 100%; padding: 10px; background: var(--primary); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; margin-bottom: 10px; }
        .login-link { color: #2980b9; text-decoration: none; font-size: 14px; display: inline-block; margin-top:5px;}
        .login-link:hover { text-decoration: underline; }

        .tab-controls { display: flex; gap: 10px; border-bottom: 2px solid var(--primary); margin-bottom: 20px; flex-wrap: nowrap; overflow-x: auto; padding-bottom:5px; -webkit-overflow-scrolling: touch; }
        .tab-btn { background: #ecf0f1; border: none; padding: 10px 15px; font-weight: bold; font-size: 13px; cursor: pointer; border-radius: 5px 5px 0 0; color: #7f8c8d; white-space: nowrap;  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
        .tab-btn.active { background: var(--primary); color: white; }
        .tab-content { display: none; }
        .tab-content.active { display: block; }
        
        h2, h3 { color: var(--primary); text-align: center; margin-bottom: 20px; }
        .jadwal-title { color: var(--secondary); border-bottom: 2px solid #ecf0f1; padding-bottom: 10px; margin-bottom: 20px; text-align: left; font-size: 18px; display: flex; justify-content: space-between; align-items: center; flex-wrap:wrap; gap:10px;}
        .grid-forms {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 20px;
            margin-bottom: 30px;
            width: 100%;
            max-width: 100%;
        }
        .grid-forms > * {
            min-width: 0;
            max-width: 100%;
        }
        .form-box {
            background: #ecf0f1;
            padding: 20px;
            border-radius: 8px;
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }
        .form-box.edit-mode { background: #fdf2e9; border: 1px solid #e67e22; }
        .form-box h4 { margin-top: 0; border-bottom: 2px solid #bdc3c7; padding-bottom: 10px; color: var(--primary); font-size:16px;}
        form.manual-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
        input, select, textarea, button { padding: 10px; border: 1px solid #bdc3c7; border-radius: 5px; font-size: 14px; width: 100%; box-sizing: border-box; font-family: inherit; }
        button { background-color: var(--secondary); color: white; border: none; font-weight: bold; cursor: pointer; transition: 0.3s; }
        .btn-full { grid-column: 1 / -1; }
        .btn-update { background-color: #e67e22; }
        .btn-copy { background-color: #34495e; padding: 6px 10px; font-size: 12px; margin-bottom: 10px; width: auto !important;}
        .alert { padding: 12px; border-radius: 5px; margin-bottom: 20px; text-align: center; font-weight: bold; }
        .success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        
        .table-responsive {
            display: block;
            overflow: auto;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            max-height: 520px;
            -webkit-overflow-scrolling: touch;
            scrollbar-gutter: stable;
            margin-bottom: 15px;
            box-sizing: border-box;
            border-radius: 6px;
        }
        .table-responsive table {
            width: max-content;
            min-width: 100%;
            max-width: none;
        }
        .table-responsive table thead th {
            position: sticky;
            top: 0;
            z-index: 5;
        }

        /* Khusus tab Jadwal: biarkan konten memanjang normal ke bawah.
           Scroll horizontal tetap tersedia bila tabel lebih lebar dari layar. */
        #tab-jadwal .table-responsive {
            max-height: none !important;
            overflow-x: auto !important;
            overflow-y: visible !important;
            scrollbar-gutter: auto;
        }
        #tab-jadwal .table-responsive table thead th {
            position: static;
        }

        /* Jadwal Keseluruhan: Hari dan Jam jangan terlalu lebar. */
        #tab-jadwal .table-matrix .jadwal-col-hari {
            width:72px !important;
            min-width:72px !important;
            max-width:72px !important;
            white-space:nowrap;
            padding:6px 7px !important;
        }

        #tab-jadwal .table-matrix .jadwal-col-jam {
            width:94px !important;
            min-width:94px !important;
            max-width:94px !important;
            white-space:nowrap;
            padding:6px 7px !important;
        }

        #tab-jadwal .jadwal-filter-grid {
            display:grid;
            grid-template-columns:minmax(210px,1.5fr) repeat(3,minmax(145px,1fr)) auto;
            gap:8px;
            width:100%;
            align-items:center;
        }

        #tab-jadwal .jadwal-filter-grid input,
        #tab-jadwal .jadwal-filter-grid select {
            width:100%;
            min-width:0;
            margin:0;
            padding:8px 9px;
        }

        #tab-jadwal .jadwal-filter-select-wrap {
            position:relative;
            min-width:0;
        }

        #tab-jadwal .jadwal-filter-select-wrap select {
            padding-right:34px;
        }

        #tab-jadwal .btn-clear-filter-select {
            display:none;
            position:absolute;
            right:5px;
            top:50%;
            transform:translateY(-50%);
            width:24px;
            height:24px;
            min-width:24px;
            padding:0;
            margin:0;
            border:0;
            border-radius:999px;
            background:#e2e8f0;
            color:#475569;
            font-size:16px;
            line-height:24px;
            text-align:center;
            cursor:pointer;
            z-index:2;
        }

        #tab-jadwal .btn-clear-filter-select:hover {
            background:#cbd5e1;
            color:#0f172a;
        }

        #tab-jadwal .btn-clear-filter-select.show {
            display:block;
        }

        #tab-jadwal .jadwal-filter-info {
            margin-top:7px;
            font-size:11px;
            color:#64748b;
        }

        @media(max-width:900px) {
            #tab-jadwal .jadwal-filter-grid {
                grid-template-columns:1fr 1fr;
            }
        }

        @media(max-width:600px) {
            #tab-jadwal .jadwal-filter-grid {
                grid-template-columns:1fr;
            }
        }


        /* Jadwal: Hari/Jam sticky kiri, Prodi/Semester sticky atas */
        #tab-jadwal #area-cetak-matriks.table-responsive {
            max-height:72vh !important;
            overflow:auto !important;
            overflow-x:auto !important;
            overflow-y:auto !important;
            position:relative;
            border:1px solid #e2e8f0;
            border-radius:8px;
        }
        #area-cetak-matriks .table-matrix { border-collapse:separate; border-spacing:0; }
        #area-cetak-matriks .table-matrix thead tr:first-child th {
            position:sticky !important; top:0; z-index:30; background:#2c3e50;
        }
        #area-cetak-matriks .table-matrix thead tr:nth-child(2) th {
            position:sticky !important; top:36px; z-index:29; background:#34495e !important;
        }
        #area-cetak-matriks .table-matrix thead .jadwal-col-hari {
            position:sticky !important; left:0; top:0; z-index:45 !important; background:#2c3e50 !important;
        }
        #area-cetak-matriks .table-matrix thead .jadwal-col-jam {
            position:sticky !important; left:72px; top:0; z-index:44 !important; background:#2c3e50 !important; box-shadow:2px 0 0 #cbd5e1;
        }
        #area-cetak-matriks .table-matrix tbody .jadwal-col-hari {
            position:sticky !important; left:0; z-index:20; background:#fff !important;
        }
        #area-cetak-matriks .table-matrix tbody .jadwal-col-jam {
            position:sticky !important; left:72px; z-index:19; background:#f9f9f9 !important; box-shadow:2px 0 0 #e2e8f0;
        }
        .jadwal-edit-modal-backdrop {
            display:none; position:fixed; inset:0; z-index:120000; background:rgba(15,23,42,.58); padding:18px; overflow:auto; align-items:center; justify-content:center;
        }
        .jadwal-edit-modal-backdrop.open { display:flex; }
        .jadwal-edit-modal-dialog {
            width:min(760px,100%); max-height:92vh; overflow:auto; background:#fff; border-radius:14px; box-shadow:0 24px 70px rgba(15,23,42,.30);
        }
        .jadwal-edit-modal-header {
            position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px; background:#fff; border-bottom:1px solid #e2e8f0;
        }
        .jadwal-edit-modal-body { padding:16px; }
        .jadwal-edit-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
        .jadwal-edit-grid .full { grid-column:1/-1; }
        .jadwal-edit-grid label { display:block; margin-bottom:4px; font-size:11px; font-weight:700; color:#475569; }
        .jadwal-edit-grid input,.jadwal-edit-grid select { width:100%; margin:0; }

        #tab-jadwal .select2-container { width:100% !important; min-width:0 !important; }
        #tab-jadwal .select2-container .select2-selection--single {
            min-height:39px; display:flex; align-items:center;
        }
        #modalEditJadwal .select2-container { width:100% !important; }
        .select2-container--open { z-index:130500 !important; }

        @media(max-width:650px){ .jadwal-edit-grid{grid-template-columns:1fr}.jadwal-edit-grid .full{grid-column:auto} }

        /* =========================================================
           KHUSUS TAB ABSENSI HARIAN
           Layout dikunci ke lebar parent. Tabel lebar hanya boleh scroll
           di wrapper masing-masing, tidak boleh memperlebar halaman utama.
           ========================================================= */
        #tab-absensi-harian {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            overflow-x: hidden !important;
            box-sizing: border-box;
        }

        /* Pastikan Absensi Harian mengikuti sistem tab utama.
           Selector ID dibuat eksplisit agar tidak pernah menimpa
           .tab-content { display:none; } pada tab yang tidak aktif. */
        #tab-absensi-harian.tab-content {
            display: none;
        }
        #tab-absensi-harian.tab-content.active {
            display: block;
        }

        #tab-absensi-harian > *,
        #tab-absensi-harian .form-box,
        #tab-absensi-harian form {
            width: auto;
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box;
        }

        #tab-absensi-harian .matriks-cell-foto img {
            width:34px !important;
            height:34px !important;
            min-width:34px !important;
            max-width:34px !important;
            min-height:34px !important;
            max-height:34px !important;
            object-fit:cover !important;
        }

        #tab-absensi-harian .matriks-cell-foto a {
            width:34px !important;
            height:34px !important;
            min-width:34px !important;
            max-width:34px !important;
        }

        #tab-absensi-harian .table-responsive {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            max-height: none !important;
            overflow-x: auto !important;
            overflow-y: visible !important;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
        }

        /* Tabel ringkasan mengikuti lebar container. */
        #tab-absensi-harian .table-responsive:not(.absensi-riwayat-responsive) table {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            table-layout: auto !important;
        }

        /* Riwayat tetap lengkap dan responsif: scroll hanya di wrapper. */
        #tab-absensi-harian .absensi-riwayat-responsive {
            overflow-x: auto !important;
            overflow-y: visible !important;
        }

        #tab-absensi-harian .absensi-riwayat-responsive table {
            width: max-content !important;
            max-width: none !important;
            table-layout: auto !important;
        }

        #tab-absensi-harian .absensi-riwayat-pribadi:not(.absensi-table-kosong) table {
            min-width: 760px !important;
        }

        #tab-absensi-harian .absensi-riwayat-admin:not(.absensi-table-kosong) table {
            min-width: 1080px !important;
        }

        #tab-absensi-harian .absensi-table-kosong {
            overflow-x: hidden !important;
        }

        #tab-absensi-harian .absensi-table-kosong table {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
        }

        #tab-absensi-harian .absensi-table-kosong thead {
            display: none;
        }

        #tab-absensi-harian .absensi-table-kosong td {
            white-space: normal !important;
            text-align: center !important;
        }

        #tab-absensi-harian .absensi-riwayat-responsive td form {
            display: flex !important;
            flex-wrap: wrap;
            gap: 5px;
            min-width: 0 !important;
        }

        .absensi-pagination {
            display:flex;
            gap:6px;
            flex-wrap:wrap;
            align-items:center;
            margin:10px 0 16px;
        }
        .absensi-pagination a,
        .absensi-pagination span {
            display:inline-block;
            padding:6px 9px;
            border-radius:5px;
            border:1px solid #d5d8dc;
            text-decoration:none;
            font-size:12px;
            background:#fff;
            color:#2c3e50;
        }
        .absensi-pagination .aktif {
            background:#2980b9;
            color:#fff;
            border-color:#2980b9;
            font-weight:bold;
        }

        table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; min-width: 600px;}
        th, td { border: 1px solid #ddd; padding: 10px; text-align: left; vertical-align: middle;}
        th { background-color: var(--primary); color: white; white-space: nowrap; }
        th a { color: white; text-decoration: none; display:inline-block; }
        th a:hover { text-decoration: underline; }
        tr:nth-child(even) { background-color: #f9f9f9; }
        
        .btn-action { color: white; padding: 6px 10px; text-decoration: none; border-radius: 4px; font-size: 12px; display: inline-block; margin: 2px; cursor: pointer; border: none;}
        .btn-jurnal { background: #27ae60; } .btn-edit { background: #f39c12; } .btn-delete { background: #e74c3c; } .btn-monitor { background: #8e44ad; }
        .btn-download { background: #3498db; color: white; padding: 5px 10px; border-radius: 4px; text-decoration: none; font-size: 11px; display: inline-block; margin-top: 5px;}
        .btn-download:hover { background: #2980b9; }
        
        .table-absen th, .table-absen td { text-align: center; padding: 8px; }
        .table-absen td:first-child { text-align: left; font-weight: bold; }
        
        .camera-box { text-align: center; margin-bottom: 15px; background: #fff; padding: 15px; border-radius: 8px; border: 2px dashed #bdc3c7; }
        .camera-box video, .camera-box img { max-width: 100%; border-radius: 5px; border: 1px solid #ccc; }
        .media-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
        .media-item { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; border: 1px solid #bdc3c7; }
        .media-video { width: 120px; height: 80px; background: #000; border-radius: 4px; }
        .materi-box { background: #e8f6f3; padding: 10px; border-left: 4px solid #1abc9c; margin-top: 10px; }
        .materi-ringkas { color:#34495e; line-height:1.45; margin-top:6px; }
        .btn-lihat-materi { background:#2980b9; color:white; border:none; padding:6px 10px; border-radius:4px; font-size:12px; width:auto !important; display:inline-block; margin-top:8px; cursor:pointer; }
        .btn-lihat-rekap { border:none; border-radius:4px; padding:4px 7px; margin:2px 0; font-size:12px; width:auto !important; display:inline-block; cursor:pointer; background:#ecf0f1; color:#2c3e50; text-align:left; }
        .btn-lihat-rekap:hover { background:#d6eaf8; color:#1f618d; }
        .rekap-status-hadir { color:#1e8449; font-weight:bold; }
        .rekap-status-izin { color:#21618c; font-weight:bold; }
        .rekap-status-sakit { color:#b9770e; font-weight:bold; }
        .rekap-status-alpa { color:#c0392b; font-weight:bold; }
        .rekap-status-belum { color:#7f8c8d; font-weight:bold; }
        .rekap-detail-list { margin:8px 0 0 0; padding-left:22px; }
        .rekap-detail-list li { margin:4px 0; }
        .materi-popup-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:99999; padding:20px; overflow:auto; }
        .materi-popup-box { background:white; max-width:900px; margin:35px auto; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.25); overflow:hidden; }
        .materi-popup-header { display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--primary); color:white; padding:14px 18px; }
        .materi-popup-header h3 { color:white; margin:0; text-align:left; font-size:18px; }
        .materi-popup-close { background:#e74c3c; color:white; border:none; width:auto !important; padding:6px 10px; border-radius:5px; font-size:18px; line-height:1; cursor:pointer; }
        .materi-popup-content { padding:18px; max-height:72vh; overflow:auto; line-height:1.6; }
        .materi-popup-content table { min-width:0; width:100%; }
        @media (max-width: 600px) { .materi-popup-overlay { padding:8px; } .materi-popup-box { margin:20px auto; } .materi-popup-content { max-height:75vh; padding:12px; } }
        
        .badge-status-belum { background: #7f8c8d; color: white; padding: 4px 8px; border-radius: 3px; font-size: 11px; font-weight:bold; }
        .badge-status-selesai { background: #27ae60; color: white; padding: 4px 8px; border-radius: 3px; font-size: 11px; font-weight:bold; }
        .badge-dosen-sakit { background: #e67e22; color: white; padding: 4px 8px; border-radius: 3px; font-size: 11px; font-weight:bold; }
        .badge-dosen-izin { background: #3498db; color: white; padding: 4px 8px; border-radius: 3px; font-size: 11px; font-weight:bold; }
        .badge-dosen-libur { background: #34495e; color: white; padding: 4px 8px; border-radius: 3px; font-size: 11px; font-weight:bold; }
        
        .pagination { margin-top: 15px; display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
        .pagination a { padding: 8px 12px; background: #ecf0f1; border-radius: 4px; text-decoration: none; color: #333; font-size: 14px; border:1px solid #bdc3c7;}
        .pagination a.active { background: var(--primary); color: white; font-weight: bold; border-color:var(--primary); }
        .pagination a:hover:not(.active) { background: #bdc3c7; }

        .table-export-toolbar {
            display:flex;
            gap:6px;
            flex-wrap:wrap;
            justify-content:flex-end;
            align-items:center;
            margin:6px 0 8px;
        }
        .table-export-toolbar button {
            width:auto;
            padding:6px 10px;
            border:none;
            border-radius:5px;
            cursor:pointer;
            font-size:11px;
            font-weight:bold;
            color:#fff;
        }
        .table-export-excel { background:#1e8449; }
        .table-export-pdf { background:#c0392b; }


        .table-matrix th { background-color: var(--primary); color: white; padding: 10px; border: 1px solid #34495e; }
        .kelas-card { background: #fdfefe; border: 1px solid #d5f5e3; border-left: 4px solid #1abc9c; padding: 8px; margin-bottom: 5px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); position:relative;}
        /* Badge jadwal dibuat mengikuti panjang teks dan tidak saling menimpa. */
        .badge-kelas-card {
            display:inline-flex;
            align-items:center;
            justify-content:center;
            flex:0 0 auto;
            width:max-content;
            max-width:none;
            min-width:68px;
            white-space:nowrap;
            overflow:visible;
            text-overflow:clip;
            background:#e67e22;
            color:white;
            font-size:9px;
            line-height:1.15;
            padding:4px 9px;
            border-radius:999px;
            font-weight:800;
        }
        .badge-cakupan-card {
            display:inline-flex;
            align-items:center;
            justify-content:center;
            flex:0 0 auto;
            width:max-content;
            max-width:none;
            white-space:nowrap;
            overflow:visible;
            text-overflow:clip;
            background:#fff7ed;
            color:#9a3412;
            border:1px solid #fdba74;
            font-size:9px;
            line-height:1.15;
            padding:4px 9px;
            border-radius:999px;
            font-weight:800;
        }
        .badge-gabungan-card { display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;width:max-content;max-width:none;white-space:nowrap;background:#6d28d9;color:#fff;font-size:9px;line-height:1;padding:4px 7px;border-radius:999px;font-weight:800;letter-spacing:.15px; }
        .badge-mahasiswa-card { display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;width:max-content;max-width:none;white-space:nowrap;background:#ecfeff;color:#155e75;border:1px solid #a5f3fc;font-size:9px;line-height:1;padding:4px 8px;border-radius:999px;font-weight:700; }

        .chat-container { height: 350px; overflow-y: auto; background: #e8ecef; border: 1px solid #bdc3c7; border-radius: 8px; padding: 15px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
        .chat-msg { max-width: 80%; padding: 10px 15px; border-radius: 12px; font-size: 14px; line-height: 1.4; position:relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
        .chat-msg.me { align-self: flex-end; background: #dcf8c6; border-bottom-right-radius: 0; }
        .chat-msg.others { align-self: flex-start; background: #ffffff; border-bottom-left-radius: 0; }
        .chat-header { font-size: 11px; font-weight: bold; margin-bottom: 5px; color: #2c3e50; display:flex; justify-content:space-between;}
        .chat-time { font-size: 10px; color: #7f8c8d; text-align: right; margin-top: 5px; display:block; }
        .chat-delete { position:absolute; top:-8px; right:-8px; background:#e74c3c; color:white; border-radius:50%; width:20px; height:20px; text-align:center; font-size:12px; text-decoration:none; line-height:20px; display:none; box-shadow:0 2px 4px rgba(0,0,0,0.2);}
        .chat-msg:hover .chat-delete { display:block; }

        /* Super-Responsive Select2 Fix */
.select2-container {
    width: 100% !important;
    max-width: 100% !important;
}
.select2-container .select2-selection--single {
    height: 40px !important;
    border: 1px solid #bdc3c7 !important;
    border-radius: 5px !important;
    /* Ubah display ke flex agar teks dan panah sejajar sempurna */
    display: flex !important; 
    align-items: center !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    /* Paksa teks panjang terpotong menjadi titik-titik */
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding-left: 10px !important;
    padding-right: 30px !important; /* Ruang untuk ikon panah dropdown */
    line-height: normal !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
    right: 5px !important;
}


        /* Generator Jadwal - responsive */
        #tab-generator_jadwal {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            overflow-x: hidden;
        }
        #tab-generator_jadwal .form-box,
        #tab-generator_jadwal form,
        #tab-generator_jadwal .grid-forms,
        #tab-generator_jadwal .table-responsive {
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
        }
        #tab-generator_jadwal input,
        #tab-generator_jadwal select,
        #tab-generator_jadwal textarea,
        #tab-generator_jadwal button {
            min-width: 0;
            max-width: 100%;
        }
        #tab-generator_jadwal .generator-field {
            display: flex;
            flex-direction: column;
            gap: 5px;
            min-width: 0;
        }
        #tab-generator_jadwal .generator-field label {
            font-size: 12px;
            font-weight: 700;
            color: #475569;
        }
        #tab-generator_jadwal .generator-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            align-items: center;
        }
        #tab-generator_jadwal .generator-actions button,
        #tab-generator_jadwal .generator-actions a {
            width: auto;
            max-width: 100%;
        }


        @media (max-width: 900px) {
            #tab-generator_jadwal .master-mk-filter-grid {
                grid-template-columns: minmax(0, 1fr) !important;
            }
        }
        @media (max-width: 768px) {
            .table-responsive {
                max-height: 420px;
            }
            .container {
                width: calc(100% - 16px);
                margin: 8px auto;
                padding: 12px;
            }
            .grid-forms { grid-template-columns: minmax(0, 1fr); gap: 15px; }
            .form-box { padding: 14px; }
            #tab-generator_jadwal .table-responsive {
                margin-left: 0;
                margin-right: 0;
            }
            #tab-generator_jadwal .generator-actions {
                flex-direction: column;
                align-items: stretch;
            }
            #tab-generator_jadwal .generator-actions button,
            #tab-generator_jadwal .generator-actions a {
                width: 100%;
                text-align: center;
                box-sizing: border-box;
            }
            .action-bar { flex-direction: column; align-items: stretch; gap: 10px; }
            .action-bar form { display: flex; flex-direction: column; width: 100%; }
            .action-bar .btn-action { display: block; text-align: center; width: 100%; box-sizing: border-box; }
            .jadwal-title { flex-direction: column; align-items: flex-start; }
            form.manual-form { grid-template-columns: 1fr; }
        }

        @media print {
            .table-responsive {
                max-height: none !important;
                overflow: visible !important;
            }
            .table-responsive table thead th {
                position: static !important;
            }
            body * { visibility: hidden; }
            #area-cetak-matriks, #area-cetak-matriks * { visibility: visible; }
            #area-cetak-matriks { position: absolute; left: 0; top: 0; width: 100%; }
            .summary-container, .summary-container * { visibility: visible; }
            .action-bar, .tab-controls, .navbar, .btn-action, form, .jadwal-title a, .jadwal-title button { display: none !important; }
            .kelas-card { border: 1px solid #000; box-shadow: none; }
            th { color: #000 !important; background-color: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
            @page { size: landscape; margin: 1cm; }
        }
/* --- STATISTIK KEHADIRAN (ENTITY CODE) --- */
.attendance-stats { margin-bottom: 25px; }
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    width: 100%;
}
.stat-card {
    background: #fff;
    border-radius: 8px;
    padding: 15px 10px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-top: 4px solid #ccc;
    transition: transform 0.2s;
}
.stat-card:hover { transform: translateY(-3px); }
.stat-hadir { border-top-color: #27ae60; background: #f9fdfa; }
.stat-izin { border-top-color: #3498db; background: #f4faff; }
.stat-sakit { border-top-color: #e67e22; background: #fffbf4; }
.stat-alpa { border-top-color: #e74c3c; background: #fff5f5; }
.stat-total { border-top-color: #8e44ad; background: #fbf9fd; }
.stat-icon { font-size: 28px; margin-bottom: 5px; line-height: 1; }
.stat-value { font-size: 24px; font-weight: bold; color: #2c3e50; line-height: 1.2; }
.stat-label { font-size: 12px; color: #7f8c8d; margin-top: 5px; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-percent { font-size: 11px; color: #27ae60; font-weight: bold; margin-top: 3px; }
.stat-period { font-size: 10px; color: #8e44ad; margin-top: 2px; }

/* --- REKAP SKS RESPONSIF --- */
.summary-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}
.summary-container .form-box {
    padding: 15px;
    overflow-x: auto;
}
.summary-container table {
    font-size: 13px;
    min-width: 100%;
}
.summary-container th,
.summary-container td {
    padding: 8px 6px;
    white-space: nowrap;
}

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 Kolom di Tablet */
        gap: 10px;
    }
    .stat-card { padding: 12px 5px; }
    .stat-value { font-size: 20px; }
    .stat-icon { font-size: 24px; }
    .stat-card.stat-total {
        grid-column: 1 / -1; /* Total lebar penuh di bawah */
    }
    .summary-container {
        grid-template-columns: 1fr; /* 1 Kolom di Mobile */
        gap: 15px;
    }
    .table-matrix {
        font-size: 11px;
    }
    .table-matrix th,
    .table-matrix td {
        padding: 6px 4px;
    }
    .kelas-card {
        font-size: 10px;
        padding: 6px;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr; /* 1 Kolom di HP Kecil */
    }
    .stat-card.stat-total {
        grid-column: 1;
    }
    .stat-value {
        font-size: 18px;
    }
}
/* --- FIX SUMMERNOTE TOOLBAR --- */
.note-editor .note-btn {
    width: auto !important;        /* Kembalikan ukuran lebar tombol ke normal */
    padding: 5px 10px !important;  /* Kembalikan padding ke normal */
    background-color: #fff !important; /* Warna dasar tombol putih/abu */
    color: #333 !important;        /* Warna ikon hitam/gelap */
    border: 1px solid #dae0e5 !important; /* Border tipis bawaan */
    font-weight: normal !important;
    display: inline-block !important; /* Pastikan tombol sejajar ke samping */
    box-sizing: content-box !important;
}

.note-editor .note-btn:hover {
    background-color: #e2e6ea !important; /* Efek hover standar */
}

.note-editor .note-toolbar {
    padding: 10px 5px !important;
    background: #f8f9fa !important;
    border-bottom: 1px solid #ddd;
    display: flex !important;      /* Paksa toolbar menggunakan flexbox */
    flex-wrap: wrap !important;    /* Agar jika layar sempit, tombol turun rapi */
    gap: 5px !important;           /* Jarak antar grup tombol */
}

.note-editor .note-btn-group {
    margin-right: 0 !important;
    display: flex !important;
}




/* Pisahkan Alat Tambahan dari accordion Ruang Diskusi */
#alat-tambahan-perkuliahan{
    margin-top:0;
    scroll-margin-top:90px;
}
#journalSecondaryToolsMount{
    position:relative;
    z-index:1;
}

/* Popup absensi pertemuan dari tabel rencana */
.meeting-attendance-btn{
    width:auto!important;margin-top:7px!important;padding:6px 9px!important;
    border:0!important;border-radius:9px!important;background:#059669!important;
    color:#fff!important;font-size:10px!important;font-weight:800!important;
    cursor:pointer;white-space:nowrap
}
.meeting-attendance-btn.is-done{background:#0e7490!important}
.meeting-attendance-overlay{
    position:fixed;inset:0;z-index:100500;display:none;align-items:center;
    justify-content:center;padding:14px;background:rgba(15,23,42,.62);
    backdrop-filter:blur(4px)
}
.meeting-attendance-overlay.open{display:flex}
.meeting-attendance-modal{
    width:min(760px,100%);
    height:min(820px,calc(100vh - 28px));
    height:min(820px,calc(100dvh - 28px));
    max-height:calc(100vh - 28px);
    max-height:calc(100dvh - 28px);
    min-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border-radius:20px;
    background:#fff;
    box-shadow:0 28px 70px rgba(15,23,42,.3)
}
.meeting-attendance-header{
    flex:0 0 auto;
    padding:16px 18px;display:flex;align-items:flex-start;justify-content:space-between;
    gap:12px;border-bottom:1px solid #e2e8f0;
    background:linear-gradient(135deg,#ecfdf5,#eff6ff)
}
.meeting-attendance-header h3{margin:0;color:#1f2937;font-size:17px}
.meeting-attendance-header p{margin:5px 0 0;color:#64748b;font-size:10.5px}
.meeting-attendance-close{
    width:36px!important;min-width:36px;height:36px;margin:0!important;padding:0!important;
    border:0!important;border-radius:50%!important;background:#fff!important;
    color:#334155!important;font-size:22px!important
}
#meetingAttendanceForm{
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    margin:0;
}
.meeting-attendance-body{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:15px 18px;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
    scrollbar-gutter:stable;
}
.meeting-attendance-body::-webkit-scrollbar{width:9px}
.meeting-attendance-body::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:999px;
    border:2px solid #fff
}
.meeting-attendance-body::-webkit-scrollbar-track{background:#f8fafc}
.meeting-attendance-lecturer{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,260px);
    gap:12px;align-items:end;padding:12px;margin-bottom:12px;
    border:1px solid #bae6fd;border-radius:14px;background:#f0f9ff
}
.meeting-attendance-lecturer select,.meeting-attendance-search{
    width:100%;padding:9px 10px;border:1px solid #cbd5e1;border-radius:10px;
    background:#fff;font-size:11px
}
.meeting-attendance-tools{
    display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:10px 0
}
.meeting-attendance-tools-left{display:flex;gap:6px;flex-wrap:wrap}
.meeting-attendance-tools button{
    width:auto!important;margin:0!important;padding:7px 10px!important;
    border-radius:9px!important;font-size:10px!important
}
.meeting-attendance-list{display:grid;gap:7px}
.meeting-attendance-row{
    display:grid;grid-template-columns:34px minmax(0,1fr) 145px;
    gap:9px;align-items:center;padding:9px 10px;border:1px solid #e5e7eb;
    border-radius:12px;background:#fff
}
.meeting-attendance-no{
    width:30px;height:30px;display:grid;place-items:center;border-radius:9px;
    background:#f1f5f9;color:#475569;font-size:10px;font-weight:800
}
.meeting-attendance-name strong{display:block;color:#26364a;font-size:11px}
.meeting-attendance-name small{color:#94a3b8;font-size:9px}
.meeting-attendance-status{
    width:100%;padding:8px;border:1px solid #cbd5e1;border-radius:9px;
    background:#fff;font-size:10.5px;font-weight:700
}
.meeting-attendance-row.status-hadir{
    border-color:#86efac;background:#f0fdf4
}
.meeting-attendance-row.status-izin{
    border-color:#93c5fd;background:#eff6ff
}
.meeting-attendance-row.status-sakit{
    border-color:#fca5a5;background:#fef2f2
}
.meeting-attendance-row.status-alpa{
    border-color:#fdba74;background:#fff7ed
}
.meeting-attendance-row.status-belum{
    border-color:#e2e8f0;background:#f8fafc
}
.meeting-attendance-summary{
    display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 10px
}
.meeting-attendance-summary span{
    display:inline-flex;align-items:center;
    padding:4px 7px;border-radius:999px;
    background:#f1f5f9;color:#475569;
    font-size:9.5px;font-weight:800
}

.meeting-attendance-footer{
    flex:0 0 auto;
    padding:12px 18px;display:flex;justify-content:flex-end;gap:8px;
    border-top:1px solid #e2e8f0;background:#f8fafc
}
.meeting-attendance-footer button{
    width:auto!important;min-width:110px;margin:0!important;padding:10px 14px!important;
    border-radius:10px!important;font-size:11px!important
}
.meeting-attendance-loading{padding:30px 15px;text-align:center;color:#64748b}
@media(max-width:620px){
    .meeting-attendance-overlay{padding:7px}
    .meeting-attendance-modal{
        height:calc(100vh - 14px);
        height:calc(100dvh - 14px);
        max-height:calc(100vh - 14px);
        max-height:calc(100dvh - 14px);
        border-radius:16px
    }
    .meeting-attendance-lecturer{grid-template-columns:1fr}
    .meeting-attendance-row{grid-template-columns:30px minmax(0,1fr)}
    .meeting-attendance-status{grid-column:2}
}

/* ==========================================================
   DOSEN - APP DASHBOARD THEME
   Memakai engine grid/popup yang sama dengan mahasiswa,
   tetapi visualnya dibuat lebih profesional untuk kerja dosen.
   ========================================================== */
.lecturer-app-mode {
    background:
        radial-gradient(circle at top left, rgba(14,116,144,.12), transparent 34%),
        radial-gradient(circle at top right, rgba(30,64,175,.10), transparent 30%),
        #f4f7fb;
}

.lecturer-app-mode .student-app-hero {
    background:
        linear-gradient(
            135deg,
            #0f3d4c 0%,
            #0e7490 52%,
            #1d4ed8 100%
        );
}

.lecturer-app-mode .student-app-icon-symbol {
    background:
        linear-gradient(
            145deg,
            #ecfeff,
            #eff6ff
        );
}

.lecturer-app-mode .student-app-icon {
    border-color:#dbe7ee;
}

.lecturer-app-mode .student-app-icon:hover {
    border-color:#7dd3fc;
    box-shadow:0 15px 32px rgba(14,116,144,.14);
}

.lecturer-app-mode .student-module-title-icon {
    background:#ecfeff;
}

.lecturer-app-mode .student-module-topbar {
    border-color:#cbdde8;
}

.lecturer-app-mode .lecturer-home-caption {
    margin-top:7px;
    color:rgba(255,255,255,.85);
    font-size:11px;
    line-height:1.5;
}

/* ==========================================================
   KALENDER AKADEMIK MAHASISWA - READER MODERN
   ========================================================== */
.student-kaldik-reader{display:grid;gap:16px}
.kaldik-summary{display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:12px}
.kaldik-next,.kaldik-stat,.kaldik-reader-panel,.student-kaldik-calendar{
    background:#fff;border:1px solid #e2e8f0;border-radius:20px;
    box-shadow:0 9px 25px rgba(15,23,42,.06)
}
.kaldik-next{
    position:relative;overflow:hidden;min-height:130px;padding:20px 22px;
    background:linear-gradient(135deg,#44337a,#6b46c1 58%,#805ad5);color:#fff
}
.kaldik-next:after{
    content:"";position:absolute;width:150px;height:150px;border-radius:50%;
    right:-45px;top:-58px;background:rgba(255,255,255,.10)
}
.kaldik-next small{display:block;margin-bottom:8px;color:rgba(255,255,255,.8);
    font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.8px}
.kaldik-next strong{position:relative;z-index:1;display:block;font-size:19px;line-height:1.3}
.kaldik-next p{position:relative;z-index:1;margin:8px 0 0;color:rgba(255,255,255,.9);
    font-size:11.5px;line-height:1.5}
.kaldik-stat{min-height:130px;padding:15px;display:flex;flex-direction:column;justify-content:center}
.kaldik-stat i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
    margin-bottom:10px;background:#f5f3ff;font-style:normal;font-size:18px}
.kaldik-stat strong{font-size:22px;line-height:1;color:#2d3748}
.kaldik-stat span{margin-top:5px;color:#718096;font-size:10px;line-height:1.3}
.kaldik-reader-panel,.student-kaldik-calendar{padding:17px}
.kaldik-reader-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}
.kaldik-reader-head h3{margin:0;color:#2d3748;font-size:16px}
.kaldik-reader-head p{margin:3px 0 0;color:#718096;font-size:10px}
.kaldik-filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:15px}
.kaldik-filter{
    width:auto!important;margin:0!important;padding:7px 11px!important;border:1px solid #e2e8f0!important;
    border-radius:999px!important;background:#fff!important;color:#4a5568!important;
    font-size:10px!important;font-weight:800!important;cursor:pointer
}
.kaldik-filter.active{background:#553c9a!important;color:#fff!important;border-color:#553c9a!important}
.kaldik-month{margin-top:18px}
.kaldik-month:first-of-type{margin-top:0}
.kaldik-month-title{display:flex;align-items:center;gap:9px;margin:0 0 10px;color:#4a5568;
    font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.45px}
.kaldik-month-title:after{content:"";height:1px;flex:1;background:#edf2f7}
.kaldik-card{
    display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:12px;align-items:center;
    padding:12px;margin-bottom:9px;border:1px solid #e8edf3;border-radius:16px;background:#fff
}
.kaldik-date{
    width:55px;min-height:56px;border-radius:14px;background:#f8fafc;border:1px solid #edf2f7;
    display:grid;place-items:center;text-align:center;padding:6px 3px
}
.kaldik-date strong{display:block;font-size:20px;line-height:1;color:#2d3748}
.kaldik-date span{display:block;margin-top:3px;font-size:8.5px;font-weight:800;text-transform:uppercase;color:#805ad5}
.kaldik-card-title{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kaldik-card-title strong{font-size:12.5px;line-height:1.35;color:#26364a}
.kaldik-type,.kaldik-status{display:inline-flex;border-radius:999px;padding:4px 7px;font-size:8.8px;font-weight:800;white-space:nowrap}
.kaldik-type-libur{background:#fff1f2;color:#be123c}.kaldik-type-ujian{background:#fff7ed;color:#c2410c}
.kaldik-type-kegiatan{background:#eff6ff;color:#1d4ed8}.kaldik-type-pengganti{background:#ecfdf5;color:#047857}
.kaldik-type-lainnya{background:#f1f5f9;color:#475569}
.kaldik-status-upcoming{background:#f5f3ff;color:#6d28d9}.kaldik-status-active{background:#ecfdf5;color:#047857}
.kaldik-status-past{background:#f1f5f9;color:#64748b}
.kaldik-meta{display:flex;gap:7px 13px;flex-wrap:wrap;margin-top:6px;color:#718096;font-size:9.3px;line-height:1.45}
.kaldik-empty{padding:28px 16px;text-align:center;color:#718096;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:15px}
.student-kaldik-calendar .fc-toolbar-title{font-size:16px!important;color:#3c366b}
.student-kaldik-calendar .fc-button-primary{background:#553c9a!important;border-color:#553c9a!important;box-shadow:none!important}
.student-kaldik-calendar .fc-daygrid-day-number{font-size:10px;font-weight:700;color:#4a5568}
.kaldik-detail-overlay{position:fixed;inset:0;z-index:100450;display:none;align-items:center;justify-content:center;
    padding:16px;background:rgba(15,23,42,.58);backdrop-filter:blur(3px)}
.kaldik-detail-overlay.open{display:flex}
.kaldik-detail-card{width:min(470px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:20px;
    border-radius:20px;background:#fff;box-shadow:0 22px 58px rgba(15,23,42,.25)}
.kaldik-detail-card h3{margin:0 0 10px;color:#2d3748;font-size:18px}
.kaldik-detail-card p{margin:6px 0;color:#64748b;font-size:11px;line-height:1.55}
.kaldik-detail-close{float:right;width:34px!important;height:34px;padding:0!important;margin:-5px -5px 8px 10px!important;
    border:0!important;border-radius:50%!important;background:#f1f5f9!important;color:#334155!important;font-size:20px!important}
@media(max-width:900px){.kaldik-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.kaldik-next{grid-column:1/-1}}
@media(max-width:620px){
    .kaldik-summary{gap:8px}.kaldik-next{min-height:112px;padding:17px}.kaldik-next strong{font-size:17px}
    .kaldik-stat{min-height:93px;padding:10px 7px;text-align:center;align-items:center}
    .kaldik-stat i{width:31px;height:31px;margin-bottom:6px;font-size:14px}.kaldik-stat strong{font-size:18px}.kaldik-stat span{font-size:8.5px}
    .kaldik-reader-panel,.student-kaldik-calendar{padding:12px;border-radius:17px}
    .kaldik-card{grid-template-columns:48px minmax(0,1fr);gap:9px;padding:10px}
    .kaldik-date{width:46px;min-height:50px;border-radius:12px}.kaldik-date strong{font-size:17px}
    .kaldik-card>.kaldik-status{grid-column:2;justify-self:start}
    .student-kaldik-calendar .fc-toolbar{flex-direction:column;gap:7px}
    .student-kaldik-calendar .fc-toolbar-chunk{display:flex;justify-content:center}
}

/* Perbaikan visual FullCalendar */
.fc .fc-button {
    width: auto !important;
    padding: 4px 8px !important;
}
.fc-event {
    cursor: pointer;
    border: none !important;
    padding: 2px 4px;
    font-size: 11px;
}
.fc-toolbar-title {
    font-size: 1.2em !important;
    font-weight: bold;
    color: #2c3e50;
}
/* Absensi Harian Dosen */
@media (max-width: 768px) {
    #tab-absensi-harian form[method="GET"] { grid-template-columns: 1fr !important; }
    #tab-absensi-harian form[method="POST"] { width: 100%; }
}

/* ==========================================================
   MAHASISWA - APP ICON DASHBOARD + MODULE POPUP
   ========================================================== */
.student-app-mode {
    background:
        radial-gradient(circle at top left, rgba(24,188,156,.12), transparent 34%),
        radial-gradient(circle at top right, rgba(52,152,219,.11), transparent 30%),
        #f4f7fb;
}

.student-app-mode .container {
    background: transparent;
    box-shadow: none;
    padding-top: 8px;
    overflow: visible;
}

.student-app-mode .tab-controls {
    display: none !important;
}

.student-app-home {
    max-width: 980px;
    margin: 10px auto 28px;
}

.student-app-hero {
    position: relative;
    overflow: hidden;
    padding: 25px 26px;
    margin-bottom: 20px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, #1f3a5f 0%, #24577a 58%, #168f82 100%);
    color: #fff;
    box-shadow: 0 16px 34px rgba(31,58,95,.18);
}

.student-app-hero::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -60px;
    top: -70px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
}

.student-app-hero h2 {
    color: #fff;
    text-align: left;
    margin: 0 0 7px;
    font-size: 25px;
    line-height: 1.2;
}

.student-app-hero p {
    margin: 0;
    max-width: 680px;
    color: rgba(255,255,255,.88);
    font-size: 13px;
    line-height: 1.6;
}

.student-app-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 14px;
}

.student-app-icon {
    min-height: 156px;
    padding: 18px 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: rgba(255,255,255,.96);
    color: #172033;
    text-decoration: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-shadow: 0 8px 24px rgba(15,23,42,.07);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.student-app-icon:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(15,23,42,.12);
    border-color: #b8d6dc;
}

.student-app-icon:active {
    transform: scale(.98);
}

.student-app-icon-symbol {
    width: 66px;
    height: 66px;
    margin-bottom: 10px;
    border-radius: 19px;
    display: grid;
    place-items: center;
    font-size: 32px;
    line-height: 1;
    background: linear-gradient(145deg,#eef6ff,#e7faf6);
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.04);
}

.student-app-icon strong {
    display: block;
    color: #20314a;
    font-size: 13px;
    line-height: 1.25;
}

.student-app-icon small {
    display: block;
    margin-top: 5px;
    color: #718096;
    font-size: 10.5px;
    line-height: 1.35;
}

.student-module-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100130;
    background: rgba(15,23,42,.52);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.student-module-topbar {
    position: fixed;
    z-index: 100160;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1120px, calc(100% - 34px));
    height: 54px;
    padding: 7px 10px 7px 15px;
    border-radius: 17px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(148,163,184,.45);
    box-shadow: 0 14px 34px rgba(15,23,42,.20);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.student-module-title-wrap {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-module-title-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #eef7f7;
    font-size: 20px;
}

.student-module-title {
    min-width: 0;
}

.student-module-title strong {
    display: block;
    color: #1f2d3d;
    font-size: 14px;
    line-height: 1.2;
}

.student-module-title small {
    display: block;
    margin-top: 2px;
    color: #7b8794;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-module-close {
    width: auto !important;
    min-width: 112px;
    padding: 9px 12px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #edf2f7 !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.student-app-mode.student-module-open .container > .tab-content.active {
    position: fixed;
    z-index: 100145;
    left: 50%;
    top: 86px;
    bottom: 18px;
    transform: translateX(-50%);
    width: min(1180px, calc(100% - 26px));
    max-width: 1180px;
    margin: 0;
    padding: 22px;
    overflow: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 22px;
    box-shadow: 0 22px 58px rgba(15,23,42,.24);
}

.student-app-mode.student-module-open {
    overflow: hidden;
}

/* Pada Beranda Mahasiswa, modul lama tetap boleh diproses server
   tetapi tidak ditampilkan. Routing lama tidak diubah. */
.student-app-mode.student-home-mode .tab-content.active {
    display: none !important;
}

.student-app-mode.student-home-mode .student-module-backdrop,
.student-app-mode.student-home-mode .student-module-topbar {
    display: none !important;
}

.student-app-mode .container > .tab-content.active > .jadwal-title:first-child,
.student-app-mode .container > .tab-content.active > h3.jadwal-title:first-child {
    margin-top: 0;
}

.student-app-mode .navbar {
    box-shadow: 0 4px 18px rgba(15,23,42,.12);
}

@media (max-width: 900px) {
    .student-app-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 620px) {
    .student-app-mode .container {
        width: calc(100% - 16px);
        padding-left: 0;
        padding-right: 0;
        margin-top: 12px;
    }

    .student-app-hero {
        border-radius: 20px;
        padding: 20px 18px;
    }

    .student-app-hero h2 {
        font-size: 21px;
    }

    .student-app-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 10px;
    }

    .student-app-icon {
        min-height: 128px;
        padding: 13px 6px 10px;
        border-radius: 18px;
    }

    .student-app-icon-symbol {
        width: 54px;
        height: 54px;
        border-radius: 16px;
        font-size: 27px;
        margin-bottom: 8px;
    }

    .student-app-icon strong {
        font-size: 11.5px;
    }

    .student-app-icon small {
        display: none;
    }

    .student-module-topbar {
        top: 8px;
        width: calc(100% - 16px);
        height: 52px;
        border-radius: 15px;
    }

    .student-module-title small {
        display: none;
    }

    .student-module-close {
        min-width: 45px;
        width: 45px !important;
        height: 38px;
        padding: 0 !important;
        font-size: 0 !important;
    }

    .student-module-close::after {
        content: "×";
        font-size: 24px;
        line-height: 1;
    }

    .student-app-mode.student-module-open .container > .tab-content.active {
        top: 68px;
        left: 8px;
        right: 8px;
        bottom: 8px;
        transform: none;
        width: auto;
        padding: 15px 12px 20px;
        border-radius: 18px;
    }
}

@media print {
    .student-app-home,
    .student-module-backdrop,
    .student-module-topbar {
        display: none !important;
    }

    .student-app-mode.student-module-open .container > .tab-content.active {
        position: static !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        overflow: visible !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

/* ------------------------------ */