* { box-sizing: border-box; } :root { --primary: #B54A3A; --primary-hover: #9A3E30; --primary-light: #D46A55; --accent: #F07E64; --bg: #F7F1EC; --surface: #FFFFFF; --text-primary: #2D1F17; --text-secondary: #6E625B; --icon-bg: #FFEDE8; --border-soft: #F0E2D6; --sidebar-hover: #C85C48; --sidebar-active: #D46A55; --badge-draft-bg: #FFE7C2; --badge-draft-text: #B46A00; --badge-published-bg: #DCEFE0; --badge-published-text: #29714A; --badge-closed-bg: #EFE4DA; --badge-closed-text: #7A6A5C; --badge-danger-bg: #FBE1DE; --badge-danger-text: #B3261E; /* Skala compact: radius & bayangan lebih kecil/flat dibanding versi sebelumnya untuk kesan lebih rapi dan profesional (bukan lagi "claymorphism" tebal). --radius-pill khusus dipakai untuk badge/status chip kecil saja - tombol besar sekarang pakai --radius (kotak membulat), bukan pill penuh, supaya terasa lebih modern/SaaS ketimbang "bubbly". */ --radius: 10px; --radius-sm: 8px; --radius-pill: 999px; --shadow-soft: 0 1px 2px rgba(45, 31, 23, 0.06), 0 1px 3px rgba(45, 31, 23, 0.04); --shadow-soft-strong: 0 4px 12px rgba(181, 74, 58, 0.12); --shadow-inset: inset 0 1px 2px rgba(255, 255, 255, 0.7); --gap: 14px; } /* overflow-x guard sengaja ditaruh di , BUKAN - kalau ditaruh di body, body jadi "scroll container" ambigu (overflow-x:hidden otomatis bikin overflow-y jadi auto juga per spec CSS), dan itu bikin position:sticky di beberapa browser salah hitung titik acuannya jadi TIDAK benar-benar menempel saat halaman di-scroll. Taruh di html menghindari itu sama sekali karena html sudah jadi elemen scroll utama viewport secara default. */ html { -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { font-family: "Poppins", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg); color: var(--text-primary); margin: 0; font-size: 14px; } img { max-width: 100%; } /* ---------- Sidebar ---------- */ .sidebar { position: fixed; top: 0; left: 0; width: 216px; height: 100vh; background: linear-gradient(160deg, #FDF4E8 0%, #FBD9C8 55%, #F7B9A6 100%); color: var(--text-primary); display: flex; flex-direction: column; padding: 20px 14px; border-right: 1px solid rgba(181, 74, 58, 0.12); box-shadow: 2px 0 10px rgba(181, 74, 58, 0.06); } .sidebar-brand { margin-bottom: 20px; } .sidebar-brand a { display: block; text-decoration: none; } .sidebar-brand .logo-card { display: block; } .sidebar-brand .logo-card img { display: block; width: 100%; } .sidebar-brand .logo-compact { display: none; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .sidebar-nav a { color: var(--text-secondary); text-decoration: none; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; transition: background 0.15s ease, color 0.15s ease; } .sidebar-nav a svg { flex-shrink: 0; width: 16px; height: 16px; } .sidebar-nav a:hover { background: rgba(181, 74, 58, 0.12); color: var(--primary-hover); } .sidebar-nav a.active { background: var(--primary); color: #fff; font-weight: 600; } .sidebar-profile { display: flex; align-items: center; gap: 9px; width: 100%; margin: 0; padding: 8px; border: none; border-radius: var(--radius-sm); background: rgba(181, 74, 58, 0.10); color: var(--text-primary); cursor: pointer; text-align: left; box-shadow: none; font-family: inherit; } .sidebar-profile:hover { background: rgba(181, 74, 58, 0.18); transform: none; box-shadow: none; } .sidebar-profile .profile-avatar { width: 30px; height: 30px; border-radius: 50%; background: rgba(181, 74, 58, 0.16); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar-profile .profile-text { display: flex; flex-direction: column; line-height: 1.3; flex: 1; } .sidebar-profile .profile-text strong { font-size: 12px; font-weight: 600; color: var(--text-primary); } .sidebar-profile .profile-text small { font-size: 10px; color: var(--text-secondary); } .sidebar ~ .container { margin-left: calc(216px + var(--gap) + 10px); } /* ---------- Responsive: tablet (menu jadi bar horizontal di atas) ---------- */ @media (max-width: 900px) { .sidebar { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: auto; flex-direction: row; align-items: center; gap: 10px; padding: 8px 16px; z-index: 50; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); } .sidebar-brand { margin-bottom: 0; flex-shrink: 0; } .sidebar-brand .logo-full { display: none; } .sidebar-brand .logo-compact { display: block; width: 36px; padding: 4px; } .sidebar-nav { flex-direction: row; flex: 1; gap: 2px; overflow-x: auto; scrollbar-width: none; } .sidebar-nav::-webkit-scrollbar { display: none; } .sidebar-nav a { flex-shrink: 0; padding: 9px 11px; } .nav-label { display: none; } .sidebar-profile { width: auto; padding: 7px; flex-shrink: 0; } .sidebar-profile .profile-text { display: none; } .sidebar ~ .container { margin-left: 0; margin-top: calc(50px + var(--gap)); } } /* ---------- Responsive: HP kecil ---------- */ @media (max-width: 480px) { .container { padding: 0 12px; } .card, .stat-card, .summary-item { padding: 14px; } .topbar h1 { font-size: 19px; } .code-box { font-size: 18px; letter-spacing: 2px; padding: 7px 12px; } } /* ---------- Layout ---------- */ .container { max-width: 1200px; margin: 20px auto; padding: 0 20px; } .topbar { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: var(--gap); } .topbar h1 { font-size: 22px; font-weight: 600; margin: 0; } .topbar-subtitle { color: var(--text-secondary); margin: 3px 0 0; font-size: 13px; } h1, h2, h3 { margin-top: 0; color: var(--text-primary); font-weight: 600; letter-spacing: -0.01em; } h2 { font-size: 19px; } h3 { font-size: 15px; } .card { background: var(--surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-soft); /* margin-top ditambahkan supaya tombol aksi (mis. "+ Buat Ujian Baru") yang taruh langsung sebelum .card - tanpa paragraf/teks di antaranya - tidak nempel mepet ke tabel di bawahnya. Aman dipakai bareng margin-bottom di sini karena margin vertikal antar .card yang bersebelahan otomatis collapse (jadi tetap satu var(--gap), bukan dobel). */ margin-top: var(--gap); margin-bottom: var(--gap); border: 1px solid var(--border-soft); transition: box-shadow 0.15s ease; } .card-auth { max-width: 380px; margin: 0 auto; text-align: left; } /* table-layout:fixed KHUSUS di dalam card sempit ini (bukan tabel data admin yang lebih lebar) - tanpa ini, baris th yang teksnya panjang (mis. "Skor Pilihan Ganda / Benar-Salah") + badge predikat nilai di kolom sebelahnya bikin tabel jadi lebih lebar dari kartu, lalu kepotong di tepi kartu/layar HP karena overflow-x:hidden di . table-layout:fixed memaksa tabel patuh ke lebar 100% kartu, isi selnya jadi wrap normal ke bawah kalau kepanjangan. */ .card-auth table { table-layout: fixed; } .card-auth th { width: 46%; white-space: normal; } .auth-wrap { max-width: 380px; margin: 48px auto 32px; text-align: center; } .auth-logo { width: 180px; max-width: 65%; margin-bottom: 6px; } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; } .card-header h3 { margin: 0; } .card-header .btn, .card-header button { margin-top: 0; } label { display: block; margin: 10px 0 4px; font-weight: 500; font-size: 13px; color: var(--text-primary); } input, select, textarea { width: 100%; padding: 8px 11px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); font-size: 13px; background: var(--surface); color: var(--text-primary); font-family: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(240, 126, 100, 0.15); } textarea { min-height: 80px; } button, .btn { display: inline-block; margin-top: 12px; padding: 8px 16px; border: none; border-radius: var(--radius); background: var(--primary); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; box-shadow: none; transition: background 0.12s ease, box-shadow 0.12s ease; font-family: inherit; } button:hover, .btn:hover { background: var(--primary-hover); } .btn-secondary { background: var(--icon-bg); color: var(--primary); box-shadow: none; border: 1px solid var(--border-soft); } .btn-secondary:hover { background: #FFE0D8; } .btn-danger { background: #C74A3D; } .btn-danger:hover { background: #A83B30; } .btn-link, a.link { color: var(--primary); text-decoration: underline; font-weight: 500; font-size: 13px; } .table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Wrapper scroll internal untuk tabel yang datanya bisa banyak (Peserta, Roster per Ujian, Hasil Ujian) - dulu yang scroll adalah SELURUH halaman (sidebar/filter ikut discroll keluar layar), sekarang cuma area tabel ini yang scroll, sidebar/judul/filter tetap diam di tempat. overflow-y:auto di sini otomatis jadi acuan baru buat th { position: sticky }, jadi header tabel tetap nempel di atas AREA TABEL saat isinya digulir, bukan lagi acuan ke halaman penuh. */ .table-scroll-wrap { max-height: 62vh; overflow-y: auto; } @media (max-width: 700px) { /* Di HP tabel sudah beralih ke pola kartu/scroll horizontal sendiri (lihat @media di bawah), jadi batas tinggi + scroll vertikal terpisah ini dimatikan supaya tidak dobel-scroll. */ .table-scroll-wrap { max-height: none; overflow-y: visible; } } /* border-collapse: separate (bukan collapse) SENGAJA dipakai - position:sticky di tidak didukung dengan andal oleh banyak browser ketika border-collapse:collapse aktif (ini penyebab paling umum "sticky header" gagal jalan padahal CSS-nya sudah benar). Karena tabel di sini cuma pakai border-bottom (tidak ada border kiri/kanan antar sel), border-spacing:0 membuat hasilnya tetap identik secara visual dengan collapse, tanpa risiko itu. */ table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 8px; font-size: 13px; } @media (max-width: 700px) { /* Tabel jadi bisa digeser horizontal sendiri di layar sempit, tanpa bikin seluruh halaman melebar - lebih aman daripada memaksa kolom menyempit sampai tidak terbaca. */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } thead, tbody, tr { display: table; width: 100%; table-layout: auto; } } th { text-align: left; padding: 8px 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary); border-bottom: 1px solid var(--border-soft); font-weight: 600; /* Header tabel tetap terlihat saat body di-scroll ke bawah (bukan filter - filter di atas tabel sengaja TIDAK dibuat sticky). Nonaktif di breakpoint mobile karena tabel di sana sudah beralih ke pola scroll horizontal (lihat @media di atas). */ position: sticky; top: 0; background: var(--surface); z-index: 2; } @media (max-width: 700px) { th { position: static; } } th[data-sort-type] { cursor: pointer; user-select: none; } th[data-sort-type]:hover { color: var(--primary); } th[data-sort-type]::after { content: '\2195'; display: inline-block; margin-left: 4px; opacity: 0.35; font-size: 9px; } th[data-sort-type].sorted-asc::after { content: '\2191'; opacity: 1; color: var(--primary); } th[data-sort-type].sorted-desc::after { content: '\2193'; opacity: 1; color: var(--primary); } td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border-soft); font-size: 13px; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--bg); } .row-actions { display: flex; gap: 12px; flex-wrap: wrap; white-space: nowrap; } .row-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: var(--icon-bg); color: var(--accent); margin-right: 8px; vertical-align: middle; } .error { background: #FCE7E4; color: #B3261E; padding: 9px 12px; border-radius: var(--radius-sm); margin-bottom: 12px; font-size: 13px; } /* ---------- Segmented toggle (mis. Jenis Kelamin: Pria / Wanita) ---------- */ .toggle-group { display: flex; gap: 6px; margin-top: 4px; } .toggle-option { flex: 1; } .toggle-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .toggle-option label { display: block; margin: 0; padding: 8px 12px; text-align: center; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .toggle-option input[type="radio"]:checked + label { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; } .toggle-option input[type="radio"]:focus-visible + label { box-shadow: 0 0 0 3px rgba(240, 126, 100, 0.25); } /* ---------- Kode peserta (badge monospace kecil) ---------- */ .code-chip { display: inline-block; padding: 3px 9px; border-radius: 6px; background: var(--icon-bg); color: var(--primary); font-family: "Courier New", monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; } /* ---------- Filter bar (search + dropdown filters di atas tabel) ---------- */ .filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--gap); } .filter-bar .filter-field { flex: 1; min-width: 160px; } .filter-bar label { margin: 0 0 4px; } .filter-bar input, .filter-bar select { margin: 0; } .filter-bar .btn, .filter-bar button { margin-top: 0; } /* ---------- Filter bar ringkas (dipakai langsung di atas tabel, TANPA card besar) ---------- */ .filter-bar-compact { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; } .filter-bar-compact .filter-field { display: flex; align-items: center; gap: 6px; } .filter-bar-compact label { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; } .filter-bar-compact input, .filter-bar-compact select { width: auto; margin: 0; padding: 6px 10px; font-size: 12.5px; border-radius: var(--radius-sm); } .filter-bar-compact input[type="text"] { min-width: 170px; } .filter-bar-compact .btn, .filter-bar-compact button { margin: 0; padding: 6px 14px; font-size: 12.5px; box-shadow: none; } /* ---------- Picker peserta master (halaman roster ujian) ---------- */ .participant-picker { max-height: 300px; overflow-y: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 4px; } .participant-picker-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; } .participant-picker-row:hover { background: var(--bg); } .participant-picker-row input[type="checkbox"] { width: auto; margin: 0; } .participant-picker-row .pp-name { flex: 1; font-size: 13px; } .participant-picker-row .pp-meta { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; } .badge { display: inline-block; padding: 4px 11px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; } .badge-draft { background: var(--badge-draft-bg); color: var(--badge-draft-text); } .badge-published { background: var(--badge-published-bg); color: var(--badge-published-text); } .badge-closed { background: var(--badge-closed-bg); color: var(--badge-closed-text); } /* ---------- Badge predikat nilai (skala 100 Sempurna / 90 Sangat Baik / dst.) ---------- */ .badge-grade-success { background: var(--badge-published-bg); color: var(--badge-published-text); } .badge-grade-warning { background: var(--badge-draft-bg); color: var(--badge-draft-text); } .badge-grade-danger { background: var(--badge-danger-bg); color: var(--badge-danger-text); } .grade-scale-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 10px 0; font-size: 12.5px; color: var(--text-secondary); } .grade-scale-item { display: inline-flex; align-items: center; gap: 6px; } .grade-scale-item .badge { min-width: 40px; text-align: center; } /* ---------- Stat cards (dashboard) ---------- */ /* margin-top ditambahkan juga di sini (sama seperti .card) - sebelumnya cuma margin-bottom, jadi tombol aksi (mis. "Kembali ke Ujian") yang taruh langsung sebelum grid ini nempel mepet, tidak simetris dengan jarak di bawah grid. */ .stat-grid { display: flex; gap: var(--gap); margin-top: var(--gap); margin-bottom: var(--gap); flex-wrap: wrap; } .stat-card { flex: 1; min-width: 170px; background: var(--surface); border-radius: var(--radius); padding: 15px; box-shadow: var(--shadow-soft); border: 1px solid var(--border-soft); transition: box-shadow 0.15s ease; } .stat-card:hover { box-shadow: var(--shadow-soft-strong); } .stat-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .stat-card-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--icon-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .stat-card-label { font-size: 13px; color: var(--text-secondary); font-weight: 500; } .stat-card-value { font-size: 24px; font-weight: 700; color: var(--text-primary); } .stat-card-value.small { font-size: 19px; } .stat-card-note { font-size: 11px; color: var(--text-secondary); margin-top: 2px; } .stat-card-trend { float: right; opacity: 0.85; } /* legacy summary cards used on other admin pages, aligned to same palette */ .summary-grid { display: flex; gap: var(--gap); margin-top: var(--gap); margin-bottom: var(--gap); flex-wrap: wrap; } .summary-item { flex: 1; min-width: 140px; position: relative; background: var(--surface); border-radius: var(--radius); padding: 14px 14px 13px 14px; text-align: left; box-shadow: var(--shadow-soft); border: 1px solid var(--border-soft); transition: box-shadow 0.15s ease; } .summary-item:hover { box-shadow: var(--shadow-soft-strong); } /* Ikon senada dengan .stat-card-icon di dashboard (kotak peach + garis satu warna var(--accent)), BUKAN lagi emoji berwarna-warni (folder kuning, centang hijau, dst.) yang sebelumnya dipakai lewat ::before nth-child - emoji ikut warna native platform, jadi tidak nyambung dengan skema warna aplikasi. Sekarang ikonnya inline