/* =========================================================
TYPECODE - MODULAR DESIGN SYSTEM ENTRY POINT
========================================================= */
/* Core Tokens & Base */
@import url("core/variables.css?v=1793963000");
@import url("core/base.css?v=1794208000");
/* Shared UI Components */
@import url("components/buttons.css?v=1793963000");
@import url("components/forms.css?v=1793963000");
@import url("components/modals.css?v=1793963000");
@import url("components/tables.css?v=1793963000");
/* User & Practice Views */
@import url("views/auth.css?v=1793963000");
@import url("views/practice.css?v=1793963000");
@import url("views/practice-exam.css?v=1793963000");
@import url("views/history.css?v=1793963000");
@import url("views/modules.css?v=1793963000");
@import url("views/project-team.css?v=1794098000");
/* Admin Management Modules */
@import url("views/admin/admin-layout.css?v=1794095000");
@import url("views/admin/settings.css?v=1793963000");
@import url("views/admin/results.css?v=1793963000");
@import url("views/admin/exam-management.css?v=1793963000");
@import url("views/admin/rekap.css?v=1793963000");
@import url("views/admin/praktikum.css?v=1793963000");
@import url("views/admin/project-team.css?v=1793963000");
@import url("views/admin/teori_project.css?v=1794208000");
@import url("views/admin/context.css?v=1793963000");
@import url("views/admin/users.css?v=1793963000");
/* =========================================================
CARD (Drafting Sheet Panel)
========================================================= */
.card {
background: var(--bg-surface);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
transition:
background var(--transition-normal),
border-color var(--transition-normal),
box-shadow var(--transition-normal);
}
.card:hover {
background: var(--bg-hover);
}
/* =========================================================
CALLOUTS (Architectural Draft Notes)
========================================================= */
.info-callout {
padding: var(--space-4) var(--space-5);
background: var(--bg-elevated);
border: 1.5px solid var(--border-subtle);
border-radius: var(--radius-sm);
color: var(--text-secondary);
}
.accent-callout {
padding: var(--space-4) var(--space-5);
background: var(--bg-elevated);
border: 1.5px solid var(--border-subtle);
border-radius: var(--radius-sm);
color: var(--text-secondary);
}
/* =========================================================
VERTICAL STEPPER
========================================================= */
.stepper {
position: relative;
}
.step {
position: relative;
display: flex;
gap: var(--space-4);
padding-bottom: var(--space-6);
}
.step-indicator {
position: relative;
z-index: 2;
width: 30px;
height: 30px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-surface);
color: var(--text-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-family: var(--font-code);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
}
.step.active .step-indicator {
background: var(--color-accent);
color: #1A1916;
border-color: var(--color-accent);
}
.step.completed .step-indicator {
background: var(--brand-indigo);
color: #FFFFFF;
border-color: var(--brand-indigo);
}
.step:not(:last-child)::after {
content: "";
position: absolute;
left: 14px;
top: 30px;
width: 1px;
height: calc(100% - 10px);
background: var(--color-divider);
}
/* =========================================================
PROGRESS
========================================================= */
.progress {
width: 100%;
height: 6px;
overflow: hidden;
background: var(--bg-hover);
border-radius: var(--radius-full);
}
.progress-bar {
height: 100%;
background: var(--color-accent);
border-radius: inherit;
transition: width 300ms ease;
}
/* =========================================================
BADGE (Technical Draft Stamp)
========================================================= */
.badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
}
.badge-primary {
background: var(--bg-elevated);
color: var(--brand-indigo);
border-color: var(--brand-indigo);
}
.badge-accent {
background: var(--bg-elevated);
color: var(--color-accent);
border-color: var(--color-accent);
}
/* =========================================================
TABLE (Drafting Grid)
========================================================= */
table {
width: 100%;
border-collapse: collapse;
background: var(--bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
th {
padding: 11px 14px;
background: var(--bg-elevated);
color: var(--text-primary);
text-align: left;
font-weight: var(--font-weight-semibold);
border-bottom: 1px solid var(--color-border);
}
td {
padding: 11px 14px;
color: var(--text-secondary);
border-bottom: 1px solid var(--color-divider);
}
tbody tr:hover {
background: var(--bg-hover);
}
/* =========================================================
DIVIDER
========================================================= */
.divider {
width: 100%;
height: 1px;
background: var(--color-divider);
}
/* =========================================================
SCROLLBAR
========================================================= */
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--border-strong);
/* Dua sudut atas siku, lengkung hanya di dua sudut bawah: ujung thumb yang
menempel di awal track tidak lagi tampak terpotong. */
border-radius: 0 0 var(--radius-full) var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-tertiary);
}
/* =========================================================
SELECTION & FOCUS ACCESSIBILITY
========================================================= */
::selection {
background: var(--color-accent);
color: #1A1916;
}
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
Progressive Enhancement & Semantic HTML Architecture
-------------------------------------------------------------------------- */
[hidden] {
display: none !important;
}
dd, dt {
margin: 0;
padding: 0;
}
.skip-link {
position: absolute;
top: -120px;
left: 24px;
z-index: 99999;
padding: 10px 18px;
background: var(--brand-indigo, #4F46E5);
color: #FFFFFF !important;
font-weight: 600;
font-size: 13.5px;
border-radius: var(--radius-md, 8px);
text-decoration: none;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
transition: top 0.2s ease;
}
.skip-link:focus {
top: 16px;
}
.noscript-banner {
margin: 16px 0;
padding: 16px 20px;
background: rgba(201, 138, 61, 0.12);
border: 1px solid var(--accent-warn, #C98A3D);
border-radius: var(--radius-md, 8px);
color: var(--text-primary);
}
/* ==========================================================================
GLOBAL SVG BACKDROP (Stretch Seluruh Layar Monitor untuk Semua Menu)
========================================================================== */
.app-global-backdrop,
.app-global-bg-svg,
.app-global-bg-overlay {
display: none !important;
}
.app-layout {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
box-sizing: border-box !important;
}
/* --------------------------------------------------------------------------
3. Top Navigation Header
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
3. Top Navigation Header - solid surface, blur hanya untuk scrim overlay
-------------------------------------------------------------------------- */
.top-nav,
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
height: 64px;
margin: 0 !important;
margin-inline: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding-inline: clamp(16px, 2.5vw, 24px) !important;
/* LIQUID GLASS (override pemilik produk 2026-10-14, tercatat di log.md):
parameter sama dengan kaca beranda (blur 24px, saturasi 180%, kulit
bg-surface 24%). Bedanya dari beranda: backdrop di sini NYATA, konten
aplikasi menggulung di bawah bar sticky, jadi blur punya struktur untuk
disapu. Kilau hanya di tepi atas (satu baris), tidak di area teks, dan
kontras teks di atas kaca sudah diverifikasi analitis di 8 tema:
584 kondisi, 0 gagal (verifikasi-topbar-glass.php). */
background: color-mix(in srgb, var(--bg-surface) 24%, transparent);
-webkit-backdrop-filter: blur(24px) saturate(180%);
backdrop-filter: blur(24px) saturate(180%);
border: none;
border-bottom: 1px solid var(--border-subtle);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04),
inset 0 1px 0 color-mix(in srgb, #ffffff 30%, transparent);
border-radius: 0;
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 60;
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Aksen topbar: satu sumber, sama dengan --bd-accent-text beranda (satu
keputusan warna untuk seluruh aplikasi). Dipakai untuk garis/isi dan teks
aksen ("Informatika"), ditimpa di tema yang aksen merenya terlalu tipis
untuk teks di atas kaca. Nilai hasil pengukuran, bukan selera. */
.top-nav,
.topbar {
--topbar-accent: #ffffff;
/* Material kaca untuk permukaan DI DALAM bar (kapsul menu, kapsul ikon,
tombol akun). Bar sendiri tetap kaca 24% + blur (terverifikasi Ronde 3);
permukaan dalam TIDAK memakai backdrop-filter ulang karena leluhur
ber-backdrop-filter (bar) sudah menjadi backdrop root yang mematikan
blur anak (temuan Ronde 13). Cukup isian tembus pandang di atas blur
bar - dua lapis kaca yang menumpuk, bahasa yang sama dengan beranda,
modal login, dan halaman About.
Alpha 68% dipilih dari perhitungan kontras (harness ronde ini): di atas
uji abu-abu tengah 50% DAN ekstrem latar kedua tema, teks tab tetap
>= 4.5:1, ikon >= 3:1. */
--topbar-glass-fill: color-mix(in srgb, var(--bg-elevated) 68%, transparent);
/* Isian tab aktif: tint aksen 14% di atas isian kaca - satu tingkat lebih
pekat dari kapsul supaya chip aktif terbaca sebagai "kontrol terpilih". */
--topbar-glass-fill-chip: color-mix(
in srgb,
var(--topbar-accent) 14%,
color-mix(in srgb, var(--bg-elevated) 70%, transparent)
);
--topbar-glass-edge: color-mix(in srgb, var(--topbar-accent) 20%, transparent);
--topbar-glass-hi-top: color-mix(in srgb, #ffffff 30%, transparent);
--topbar-glass-ring: color-mix(in srgb, #ffffff 7%, transparent);
}
/* Kaca di topbar murni kosmetik: tanpa dukungan blur, atau saat pengguna
meminta transparansi rendah, bar dan seluruh permukaan di dalamnya kembali
solid (tidak ada teks yang bergantung pada kaca untuk terbaca). */
@supports not (backdrop-filter: blur(1px)) {
.top-nav,
.topbar {
background: var(--bg-surface);
--topbar-glass-fill: var(--bg-elevated);
--topbar-glass-fill-chip: color-mix(in srgb, var(--topbar-accent) 14%, var(--bg-elevated));
}
}
@media (prefers-reduced-transparency: reduce) {
.top-nav,
.topbar {
background: var(--bg-surface);
-webkit-backdrop-filter: none;
backdrop-filter: none;
--topbar-glass-fill: var(--bg-elevated);
--topbar-glass-fill-chip: color-mix(in srgb, var(--topbar-accent) 14%, var(--bg-elevated));
}
}
[data-theme="dark"] .top-nav,
[data-theme="dark"] .topbar,
[data-theme="dark"] .top-nav:not(.is-scrolled),
[data-theme="dark"] .topbar:not(.is-scrolled),
[data-theme="dark"] .top-nav.is-scrolled,
[data-theme="dark"] .topbar.is-scrolled,
[data-theme="dark"] body.landing-mode .top-nav,
[data-theme="dark"] body.student-nav .top-nav {
background: #000000 !important;
background-color: #000000 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.nav-brand,
.brand {
display: flex;
align-items: center;
gap: 14px;
justify-self: start;
min-width: 0;
}
.brand-identity {
display: inline-flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.brand-icon {
width: 42px;
height: 42px;
background: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-indigo, #D97706);
font-size: 15px;
position: relative;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
/* Logo RPL (assets/logos/logo.png) menutupi ikon saat berhasil dimuat.
Jika file belum ada, onerror menyembunyikan ![]()
sehingga ikon tampil. */
.brand-icon .brand-logo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
padding: 0px;
z-index: 1;
}
.brand-separator {
width: 1px;
height: 28px;
background: rgba(0, 0, 0, 0.12);
flex-shrink: 0;
}
.brand-info {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
line-height: 1.25;
}
.brand-name {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text-primary);
font-family: var(--font-ui, var(--font-mono));
line-height: 1.25;
white-space: nowrap;
display: inline-flex;
align-items: center;
}
.nav-brand-logo-img {
height: 48px;
width: auto;
max-height: 52px;
object-fit: contain;
display: block;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
transition: transform var(--transition-fast);
}
.nav-brand-logo-img:hover {
transform: scale(1.02);
}
.brand-accent {
/* Merek monokrom elegan: putih/inherit dengan ketebalan tegas, tanpa oranye */
color: inherit;
font-weight: 700;
}
.brand-tag {
font-size: 13px;
font-weight: 600;
font-family: var(--font-ui, var(--font-mono));
color: rgba(255, 255, 255, 0.92);
margin-left: 0;
margin-top: 0;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 360px;
letter-spacing: -0.01em;
}
/* Tabs - Kapsul tersegmentasi (rekomendasi pemilik 2026-10-14): satu wadah
bertepi tipis, semua tab di dalamnya. Ronde 14: wadah ikut memakai material
kaca `--topbar-glass-fill` (isian 68% + tepi aksen + kilau tepi atas) supaya
bar, kapsul, dan tombol akun terbaca sebagai satu bahan; kontras tab di
dalamnya diverifikasi lewat harness dengan skenario latar terburuk. */
.nav-tabs,
.nav {
display: flex;
align-items: center;
gap: 0;
margin-left: auto;
justify-self: unset;
background: transparent !important;
border: none !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.nav-tab {
background: transparent !important;
border: none !important;
color: var(--text-secondary, #888888) !important;
padding: 4px 6px !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
border-radius: 0 !important;
font-size: 13.5px !important;
font-weight: 500 !important;
cursor: pointer;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none;
transition: color 0.15s ease !important;
white-space: nowrap;
position: relative;
box-shadow: none !important;
}
.nav-tab:hover {
color: var(--text-primary) !important;
background: transparent !important;
box-shadow: none !important;
}
.nav-tab.active {
background: transparent !important;
color: #ffffff !important;
font-weight: 700 !important;
box-shadow: none !important;
}
.nav-tab.active::before {
display: none !important;
}
/* ==========================================================================
TOP NAV CLEAN & FRAMELESS (Ronde 74 - Monokrom Hitam-Putih Elegan)
Hanya teks murni tanpa garis / pembatas dan tanpa tombol kapsul/kotak.
========================================================================== */
.top-nav,
.topbar,
body.landing-mode .top-nav {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0 !important;
margin-inline: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding-inline: clamp(16px, 2.5vw, 24px) !important;
background: #ffffff !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
transition: background 0.25s ease, -webkit-backdrop-filter 0.25s ease, backdrop-filter 0.25s ease, box-shadow 0.25s ease !important;
}
/* State blur otomatis saat halaman di-scroll */
.top-nav.is-scrolled,
.topbar.is-scrolled,
body.landing-mode .top-nav.is-scrolled {
background: rgba(255, 255, 255, 0.92) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .top-nav.is-scrolled,
[data-theme="light"] .topbar.is-scrolled,
[data-theme="light"] body.landing-mode .top-nav.is-scrolled {
background: rgba(255, 255, 255, 0.92) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}
.top-nav .nav-brand {
margin-right: auto !important;
}
.top-nav .nav-tabs,
.top-nav .nav-actions,
.top-nav .nav-icon-cluster,
.top-nav .nav-dropdown:not(.hidden):not([hidden]),
.top-nav .nav-noti-wrap:not(.hidden):not([hidden]),
.top-nav .nav-user-wrap:not(.hidden):not([hidden]),
.top-nav .nav-btn-wrap:not(.hidden):not([hidden]) {
display: flex;
align-items: center;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.top-nav .nav-tabs {
margin-left: auto !important;
}
/* Sembunyikan elemen apapun di top-nav yang memiliki kelas .hidden atau atribut hidden */
.top-nav .hidden,
.top-nav [hidden],
.top-nav *.hidden,
.top-nav *[hidden],
.top-nav .nav-tab.hidden,
.top-nav .nav-tab[hidden],
.top-nav .nav-btn.hidden,
.top-nav .nav-btn[hidden],
.top-nav .nav-dropdown.hidden,
.top-nav .nav-dropdown[hidden],
.top-nav .nav-noti-wrap.hidden,
.top-nav .nav-noti-wrap[hidden],
.top-nav .nav-noti-badge.hidden,
.top-nav .nav-noti-badge[hidden],
#nav-noti-badge.hidden,
#nav-noti-badge[hidden],
.top-nav .nav-btn-wrap.hidden,
.top-nav .nav-btn-wrap[hidden],
.top-nav .landing-nav-explore.hidden {
display: none !important;
}
.top-nav .nav-tab:not(.nav-dropdown-item):not(.hidden):not([hidden]),
.top-nav .nav-btn:not(.hidden):not([hidden]),
.top-nav button.nav-btn:not(.hidden):not([hidden]),
.top-nav .nav-noti-btn:not(.hidden):not([hidden]),
.top-nav button.nav-noti-btn:not(.hidden):not([hidden]),
.top-nav #nav-auth-btn:not(.hidden):not([hidden]),
.top-nav button.nav-btn.btn-auth:not(.hidden):not([hidden]) {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 6px 14px !important;
height: 36px !important;
width: auto !important;
min-width: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
color: #1e293b !important;
font-family: var(--font-ui), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: normal !important;
text-decoration: none !important;
white-space: nowrap !important;
transition: color 0.15s ease, background 0.15s ease !important;
cursor: pointer;
}
.top-nav .nav-tab::before,
.top-nav .nav-tab::after,
.top-nav .nav-btn::before,
.top-nav .nav-btn::after,
.top-nav button.nav-btn::before,
.top-nav button.nav-btn::after,
.top-nav #nav-auth-btn::before,
.top-nav #nav-auth-btn::after {
display: none !important;
content: none !important;
}
.top-nav .nav-tab:hover:not(.hidden):not([hidden]),
.top-nav .nav-btn:hover:not(.hidden):not([hidden]),
.top-nav button.nav-btn:hover:not(.hidden):not([hidden]),
.top-nav #nav-auth-btn:hover:not(.hidden):not([hidden]) {
color: #0f172a !important;
background: rgba(0, 0, 0, 0.04) !important;
border-radius: 6px !important;
}
.top-nav .nav-tab.active:not(.hidden):not([hidden]) {
color: #0f172a !important;
font-weight: 700 !important;
}
[data-theme="light"] .top-nav:not(.is-scrolled),
[data-theme="light"] .topbar:not(.is-scrolled),
[data-theme="light"] body.landing-mode .top-nav:not(.is-scrolled) {
background: #ffffff !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}
[data-theme="light"] .top-nav.is-scrolled,
[data-theme="light"] .topbar.is-scrolled,
[data-theme="light"] body.landing-mode .top-nav.is-scrolled {
background: rgba(255, 255, 255, 0.92) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="dark"] .top-nav.is-scrolled,
[data-theme="dark"] .topbar.is-scrolled,
[data-theme="dark"] body.landing-mode .top-nav.is-scrolled {
background: rgba(0, 0, 0, 0.88) !important;
-webkit-backdrop-filter: blur(16px) saturate(160%) !important;
backdrop-filter: blur(16px) saturate(160%) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
/* Typography Topbar Solid & Crisp (Tidak Buram / Tanpa Blur) */
.top-nav .nav-brand,
.top-nav .nav-tabs,
.top-nav .nav-actions {
position: relative;
z-index: 2;
transform: translateZ(0);
-webkit-transform: translateZ(0);
isolation: isolate;
}
.top-nav .nav-brand *,
.top-nav .nav-tabs *,
.top-nav .nav-actions *,
.top-nav .nav-tab,
.top-nav .nav-btn,
.top-nav #nav-auth-btn {
filter: none !important;
-webkit-filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
text-shadow: none !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
text-rendering: optimizeLegibility !important;
opacity: 1 !important;
}
/* --- TOPBAR TYPOGRAPHY: TEMA TERANG (Light Mode) --- */
[data-theme="light"] .top-nav .nav-brand .brand-name,
[data-theme="light"] .top-nav .nav-brand #top-nav-brand-name {
color: #0f172a !important;
opacity: 1 !important;
font-weight: 700 !important;
}
[data-theme="light"] .top-nav .nav-brand .brand-accent {
color: #0f766e !important;
opacity: 1 !important;
font-weight: 700 !important;
}
[data-theme="light"] .top-nav .nav-brand .brand-tag,
[data-theme="light"] .top-nav .nav-brand #top-nav-brand-tag {
color: #475569 !important;
opacity: 1 !important;
font-weight: 500 !important;
}
[data-theme="light"] .top-nav .nav-tab:not(.hidden):not([hidden]),
[data-theme="light"] .top-nav .nav-btn:not(.hidden):not([hidden]),
[data-theme="light"] .top-nav button.nav-btn:not(.hidden):not([hidden]),
[data-theme="light"] .top-nav #nav-auth-btn:not(.hidden):not([hidden]),
[data-theme="light"] .top-nav #nav-auth-btn .badge-role,
[data-theme="light"] .nav-actions > .nav-btn,
[data-theme="light"] .nav-actions > .nav-btn-wrap > .nav-btn,
[data-theme="light"] .nav-actions > .nav-noti-wrap > .nav-btn,
[data-theme="light"] .nav-actions > .nav-user-wrap > .nav-btn,
[data-theme="light"] .nav-actions .nav-icon-cluster .nav-btn,
[data-theme="light"] .top-nav .nav-tab > span,
[data-theme="light"] .top-nav a.nav-tab > span,
[data-theme="light"] .top-nav button.nav-tab > span,
[data-theme="light"] .top-nav .nav-btn > span,
[data-theme="light"] .top-nav #nav-auth-btn > span {
color: #1e293b !important;
opacity: 1 !important;
font-weight: 600 !important;
text-shadow: none !important;
}
[data-theme="light"] .top-nav .nav-tab:hover:not(.hidden):not([hidden]),
[data-theme="light"] .top-nav .nav-btn:hover:not(.hidden):not([hidden]),
[data-theme="light"] .top-nav button.nav-btn:hover:not(.hidden):not([hidden]),
[data-theme="light"] .top-nav #nav-auth-btn:hover:not(.hidden):not([hidden]),
[data-theme="light"] .top-nav #nav-auth-btn:hover .badge-role,
[data-theme="light"] .nav-actions > .nav-btn:hover,
[data-theme="light"] .nav-actions > .nav-btn-wrap > .nav-btn:hover,
[data-theme="light"] .nav-actions > .nav-noti-wrap > .nav-btn:hover,
[data-theme="light"] .nav-actions > .nav-user-wrap > .nav-btn:hover,
[data-theme="light"] .nav-actions .nav-icon-cluster .nav-btn:hover {
color: #0f172a !important;
background: rgba(0, 0, 0, 0.05) !important;
border-radius: 6px !important;
}
[data-theme="light"] .top-nav .nav-tab.active:not(.hidden):not([hidden]) {
color: #0f172a !important;
font-weight: 700 !important;
}
/* --- TOPBAR TYPOGRAPHY: TEMA GELAP (Dark Mode & Default) --- */
:root:not([data-theme="light"]) .top-nav .nav-brand .brand-name,
:root:not([data-theme="light"]) .top-nav .nav-brand #top-nav-brand-name,
[data-theme="dark"] .top-nav .nav-brand .brand-name,
[data-theme="dark"] .top-nav .nav-brand #top-nav-brand-name {
color: #ffffff !important;
opacity: 1 !important;
font-weight: 700 !important;
}
:root:not([data-theme="light"]) .top-nav .nav-brand .brand-accent,
[data-theme="dark"] .top-nav .nav-brand .brand-accent {
color: #2dd4bf !important;
opacity: 1 !important;
font-weight: 700 !important;
}
:root:not([data-theme="light"]) .top-nav .nav-brand .brand-tag,
:root:not([data-theme="light"]) .top-nav .nav-brand #top-nav-brand-tag,
[data-theme="dark"] .top-nav .nav-brand .brand-tag,
[data-theme="dark"] .top-nav .nav-brand #top-nav-brand-tag {
color: #94a3b8 !important;
opacity: 1 !important;
font-weight: 500 !important;
}
:root:not([data-theme="light"]) .top-nav .nav-tab:not(.hidden):not([hidden]),
:root:not([data-theme="light"]) .top-nav .nav-btn:not(.hidden):not([hidden]),
:root:not([data-theme="light"]) .top-nav button.nav-btn:not(.hidden):not([hidden]),
:root:not([data-theme="light"]) .top-nav #nav-auth-btn:not(.hidden):not([hidden]),
:root:not([data-theme="light"]) .top-nav #nav-auth-btn .badge-role,
:root:not([data-theme="light"]) .nav-actions > .nav-btn,
:root:not([data-theme="light"]) .nav-actions > .nav-btn-wrap > .nav-btn,
:root:not([data-theme="light"]) .nav-actions > .nav-noti-wrap > .nav-btn,
:root:not([data-theme="light"]) .nav-actions > .nav-user-wrap > .nav-btn,
:root:not([data-theme="light"]) .nav-actions .nav-icon-cluster .nav-btn,
:root:not([data-theme="light"]) .top-nav .nav-tab > span,
:root:not([data-theme="light"]) .top-nav a.nav-tab > span,
:root:not([data-theme="light"]) .top-nav button.nav-tab > span,
:root:not([data-theme="light"]) .top-nav .nav-btn > span,
:root:not([data-theme="light"]) .top-nav #nav-auth-btn > span,
[data-theme="dark"] .top-nav .nav-tab:not(.hidden):not([hidden]),
[data-theme="dark"] .top-nav .nav-btn:not(.hidden):not([hidden]),
[data-theme="dark"] .top-nav button.nav-btn:not(.hidden):not([hidden]),
[data-theme="dark"] .top-nav #nav-auth-btn:not(.hidden):not([hidden]),
[data-theme="dark"] .top-nav #nav-auth-btn .badge-role,
[data-theme="dark"] .nav-actions > .nav-btn,
[data-theme="dark"] .nav-actions > .nav-btn-wrap > .nav-btn,
[data-theme="dark"] .nav-actions > .nav-noti-wrap > .nav-btn,
[data-theme="dark"] .nav-actions > .nav-user-wrap > .nav-btn,
[data-theme="dark"] .nav-actions .nav-icon-cluster .nav-btn,
[data-theme="dark"] .top-nav .nav-tab > span,
[data-theme="dark"] .top-nav a.nav-tab > span,
[data-theme="dark"] .top-nav button.nav-tab > span,
[data-theme="dark"] .top-nav .nav-btn > span,
[data-theme="dark"] .top-nav #nav-auth-btn > span {
color: #f1f5f9 !important;
opacity: 1 !important;
font-weight: 600 !important;
text-shadow: none !important;
}
:root:not([data-theme="light"]) .top-nav .nav-tab:hover:not(.hidden):not([hidden]),
:root:not([data-theme="light"]) .top-nav .nav-btn:hover:not(.hidden):not([hidden]),
:root:not([data-theme="light"]) .top-nav button.nav-btn:hover:not(.hidden):not([hidden]),
:root:not([data-theme="light"]) .top-nav #nav-auth-btn:hover:not(.hidden):not([hidden]),
:root:not([data-theme="light"]) .top-nav #nav-auth-btn:hover .badge-role,
:root:not([data-theme="light"]) .nav-actions > .nav-btn:hover,
:root:not([data-theme="light"]) .nav-actions > .nav-btn-wrap > .nav-btn:hover,
:root:not([data-theme="light"]) .nav-actions > .nav-noti-wrap > .nav-btn:hover,
:root:not([data-theme="light"]) .nav-actions > .nav-user-wrap > .nav-btn:hover,
:root:not([data-theme="light"]) .nav-actions .nav-icon-cluster .nav-btn:hover,
[data-theme="dark"] .top-nav .nav-tab:hover:not(.hidden):not([hidden]),
[data-theme="dark"] .top-nav .nav-btn:hover:not(.hidden):not([hidden]),
[data-theme="dark"] .top-nav button.nav-btn:hover:not(.hidden):not([hidden]),
[data-theme="dark"] .top-nav #nav-auth-btn:hover:not(.hidden):not([hidden]),
[data-theme="dark"] .top-nav #nav-auth-btn:hover .badge-role,
[data-theme="dark"] .nav-actions > .nav-btn:hover,
[data-theme="dark"] .nav-actions > .nav-btn-wrap > .nav-btn:hover,
[data-theme="dark"] .nav-actions > .nav-noti-wrap > .nav-btn:hover,
[data-theme="dark"] .nav-actions > .nav-user-wrap > .nav-btn:hover,
[data-theme="dark"] .nav-actions .nav-icon-cluster .nav-btn:hover {
color: #ffffff !important;
background: rgba(255, 255, 255, 0.08) !important;
border-radius: 6px !important;
}
:root:not([data-theme="light"]) .top-nav .nav-tab.active:not(.hidden):not([hidden]),
[data-theme="dark"] .top-nav .nav-tab.active:not(.hidden):not([hidden]) {
color: #ffffff !important;
font-weight: 700 !important;
}
/* Garis estetik pembatas di setiap button teks navbar */
.top-nav .nav-cluster-divider,
.top-nav #nav-tabs-divider,
.nav-cluster-divider {
display: inline-block !important;
width: 1px !important;
height: 15px !important;
min-height: 15px !important;
margin: 0 6px !important;
vertical-align: middle !important;
background: rgba(255, 255, 255, 0.18) !important;
border: none !important;
border-radius: 1px !important;
flex: 0 0 1px !important;
align-self: center !important;
}
.nav-cluster-divider + .nav-cluster-divider {
display: none !important;
}
/* Pembatas antar item navigasi tab berturut-turut */
.top-nav .nav-tabs > *:not(.hidden):not([hidden]) + *:not(.hidden):not([hidden])::before {
content: "" !important;
display: inline-block !important;
width: 1px !important;
height: 15px !important;
margin-right: 6px !important;
margin-left: 0 !important;
background: rgba(255, 255, 255, 0.18) !important;
vertical-align: middle !important;
align-self: center !important;
pointer-events: none !important;
}
/* Garis pembatas estetik pada tema terang (Light Mode) */
[data-theme="light"] .top-nav .nav-cluster-divider,
[data-theme="light"] .top-nav #nav-tabs-divider,
[data-theme="light"] .nav-cluster-divider,
[data-theme="light"] .top-nav .nav-tabs > *:not(.hidden):not([hidden]) + *:not(.hidden):not([hidden])::before {
background: rgba(0, 0, 0, 0.12) !important;
}
/* Sembunyikan divider bila elemen pembungkus tersembunyi atau bersebelahan */
.top-nav .nav-cluster-divider.hidden,
.top-nav .nav-cluster-divider[hidden],
#nav-noti-wrap.hidden + #nav-noti-divider,
#nav-noti-wrap[hidden] + #nav-noti-divider,
.nav-cluster-divider + .nav-cluster-divider {
display: none !important;
}
/* Sembunyikan SEMUA icon di top-nav (nav-tabs & nav-actions) */
.top-nav .nav-tabs i,
.top-nav .nav-actions i,
.top-nav .nav-tab i,
.top-nav .nav-btn i {
display: none !important;
}
/* Sembunyikan caret chevron pada trigger navigasi & tombol dropdown ganda */
.top-nav .nav-tabs .nav-tab .nav-caret,
.top-nav #theme-menu-btn,
.top-nav #sound-menu-btn {
display: none !important;
}
/* Tampilkan teks label navigasi topbar & tombol login sejajar secara vertikal (kecuali badge/hidden) */
.top-nav .nav-tabs .nav-tab > span:not(.tab-badge):not(.subtab-live-badge):not(.hidden):not([hidden]),
.top-nav a.nav-tab > span:not(.tab-badge):not(.subtab-live-badge):not(.hidden):not([hidden]),
.top-nav button.nav-tab > span:not(.tab-badge):not(.subtab-live-badge):not(.hidden):not([hidden]),
.top-nav .nav-btn > span:not(.nav-noti-badge):not(.badge-role):not(.hidden):not([hidden]),
.top-nav #nav-auth-btn > span:not(.badge-role):not(.hidden):not([hidden]) {
display: inline-block;
line-height: 1;
vertical-align: middle;
}
/* Spasi antar item navigasi diseragamkan lewat padding tombol (tanpa margin ekstra yang timpang) */
.top-nav .nav-tabs > *:not(.hidden) + *:not(.hidden) {
position: relative;
margin-left: 0 !important;
padding-left: 0 !important;
}
.top-nav .nav-tabs > *:not(.hidden) + *:not(.hidden)::before {
display: none !important;
content: none !important;
}
/* Pembatas antara blok navigasi dan tombol aksi dinonaktifkan */
#nav-tabs-divider {
display: none !important;
}
#nav-tabs-divider.hidden {
display: none !important;
}
.tab-badge {
color: inherit;
/* opacity 0.8 dulu mengencerkan kontras di atas kaca; angka hitungan
harus terbaca penuh. */
opacity: 1;
font-size: 11px;
font-weight: 600;
font-family: var(--font-mono);
margin-left: 2px;
}
/* Dropdown Teori (UTS & UAS) - satu induk di navbar */
.nav-dropdown {
position: relative;
display: flex;
align-items: center;
}
.nav-dropdown-trigger .nav-caret {
font-size: 10px;
/* 0.7 terlalu tipis untuk indikator non-teks: di atas uji abu-abu tengah
hanya 2.75:1 (butuh 3:1). 0.8 = 3.29:1 di skenario sama, lolos dengan
margin di seluruh latar nyata. */
opacity: 0.8;
margin-left: 2px;
transition: transform 0.18s ease;
}
.nav-dropdown-trigger[aria-expanded="true"] .nav-caret {
transform: rotate(180deg);
}
.nav-dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 170px;
display: flex;
flex-direction: column;
gap: 4px;
padding: 6px;
background: var(--bg-surface, #ffffff);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
z-index: 200;
}
.nav-dropdown-menu.hidden {
display: none !important;
}
.nav-dropdown-item {
width: 100%;
justify-content: flex-start;
border-radius: var(--radius-md) !important;
}
.nav-dropdown-item.active {
/* Sama bahasa dengan tab aktif: tint aksen + teks primary. Putih di atas
amber (versi lama) hanya 2-3:1. Tint di atas panel solid. */
background: color-mix(in srgb, var(--topbar-accent) 14%, var(--bg-surface)) !important;
color: var(--text-primary) !important;
}
/* Actions / User - Apple Style Circular & Pill Buttons */
.nav-actions,
.user {
display: flex;
align-items: center;
margin-left: 0;
flex: 0 0 auto;
justify-self: unset;
gap: 0;
}
/* Actions / User - Clean text links, tanpa button box, tanpa kapsul */
.nav-actions > .nav-btn,
.nav-actions > .nav-btn-wrap > .nav-btn,
.nav-actions > .nav-noti-wrap > .nav-btn,
.nav-actions > .nav-user-wrap > .nav-btn,
.nav-actions .nav-icon-cluster .nav-btn {
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: rgba(255, 255, 255, 0.82) !important;
width: auto !important;
height: 36px !important;
min-width: 0 !important;
flex: none;
border-radius: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer;
margin: 0 !important;
padding: 6px 14px !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1 !important;
transition: color 0.15s ease !important;
}
.nav-actions > .nav-btn:hover,
.nav-actions > .nav-btn-wrap > .nav-btn:hover,
.nav-actions > .nav-noti-wrap > .nav-btn:hover,
.nav-actions > .nav-user-wrap > .nav-btn:hover,
.nav-actions .nav-icon-cluster .nav-btn:hover {
background: transparent !important;
color: var(--text-primary) !important;
border: none !important;
box-shadow: none !important;
}
.nav-btn.muted {
color: var(--text-muted);
}
.nav-btn.btn-auth,
#nav-auth-btn {
width: auto !important;
min-width: 0 !important;
height: 36px !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 6px 14px !important;
gap: 6px !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: rgba(255, 255, 255, 0.82) !important;
}
.nav-btn.btn-auth:hover,
#nav-auth-btn:hover {
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--text-primary) !important;
}
/* Hilangkan kapsul border dari nav-icon-cluster */
.nav-icon-cluster {
display: flex;
align-items: center;
gap: 0;
padding: 0;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Chevron pembuka menu tema/suara */
.nav-icon-cluster .theme-menu-btn,
.nav-icon-cluster .sound-menu-btn {
display: none !important;
}
.nav-actions .nav-btn::before {
display: none !important;
}
.nav-cluster-divider {
width: 1px;
height: 16px;
flex: none;
margin-inline: 8px;
background: var(--border-subtle);
}
#nav-noti-wrap.hidden + #nav-noti-divider {
display: none !important;
}
/* Chip peran tanpa chevron */
#nav-auth-btn:has(.badge-role)::after {
display: none !important;
}
/* Ikon peran ikut --topbar-accent: --accent-amber (warna peringatan) sebagai
warna ikon hanya 2.55-2.91:1 di atas kaca pada tiga tema terang, gagal 3:1
non-teks. Aksen topbar lolos di kedelapan tema. */
#nav-auth-btn .color-amber,
#nav-user-menu .color-amber {
color: var(--topbar-accent);
}
/* Label peran di chip: --text-tertiary tidak lolos 4.5:1 di atas kaca
(terukur 4.02-4.30:1 di 8 tema), jadi secondary. Ukuran dan ketebalan
disamakan dengan label topbar lain agar chip tidak terlihat kecil dan
turun dari garis teks. */
#nav-auth-btn .badge-role {
display: inline-flex;
align-items: center;
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: 1 !important;
letter-spacing: normal !important;
}
@media (max-width: 560px) {
.nav-cluster-divider {
display: none;
}
.nav-icon-cluster {
padding: 2px;
}
}
/* Hide redundant split chevrons for clean 1-icon-per-feature Apple style */
#theme-menu-btn,
#sound-menu-btn {
display: none !important;
}
/* Pilihan tema dipindahkan ke Pengaturan / Settings */
#theme-btn-wrap,
#theme-toggle-btn {
display: none !important;
}
/* Pengaturan Suara Keyboard: hanya muncul saat praktik model Pemrograman */
#sound-btn-wrap {
display: none !important;
}
body.practice-active:not(.landing-mode) #sound-btn-wrap {
display: inline-flex !important;
}
body.practice-active:not(.landing-mode) #sound-btn-wrap.hidden {
display: none !important;
}
/* Theme Toggle Button Highlight.
Ronde 14: warna sorot pindah dari --accent-amber (warna peringatan; hanya
2.9:1 sebagai ikon di atas kapsul tema terang) ke --topbar-accent, alasan
yang sama dengan ikon peran di atas: aksen merek lolos 3:1 di kedua tema. */
#theme-toggle-btn {
color: var(--topbar-accent);
}
/* --------------------------------------------------------------------------
4. View Container & Panels
-------------------------------------------------------------------------- */
.content-area {
flex: 1;
width: 100%;
box-sizing: border-box;
padding: clamp(14px, 2vw, 24px) clamp(16px, 2.5vw, 24px);
}
body:has(#admin-view.active) .content-area,
body.admin-active .content-area {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body:has(#admin-view.active) .app-layout,
body.admin-active .app-layout {
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body:has(#admin-view.active) .top-nav,
body.admin-active .top-nav {
padding-left: 20px !important;
padding-right: 20px !important;
}
.view-panel {
display: none;
flex-direction: column;
gap: 24px;
}
.view-panel:not(.active) {
display: none !important;
}
.view-panel.active {
display: flex;
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* --------------------------------------------------------------------------
5. Practice View Elements
-------------------------------------------------------------------------- */
.toolbar-section {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 12px 20px;
flex-wrap: wrap;
}
.toolbar-section .toolbar-group + .toolbar-group {
padding-left: 20px;
border-left: 1px solid var(--border-subtle);
}
.toolbar-group {
display: flex;
align-items: center;
gap: 12px;
}
.toolbar-title {
font-size: 12px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 6px;
}
.segment-control {
display: flex;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: 3px;
gap: 6px;
}
.segment-btn {
background: transparent;
border: 1px solid transparent;
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
padding: 6px 12px;
border-radius: var(--radius-xs);
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.18s ease, transform 0.15s ease;
}
.segment-btn:hover:not(.disabled):not(.active) {
color: var(--text-primary);
background: var(--bg-hover);
border-color: var(--border-strong);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
}
.segment-btn.active {
background: var(--bg-elevated);
color: var(--text-primary);
border-color: var(--border-strong);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
font-weight: 600;
}
.segment-btn.disabled {
opacity: 0.4;
cursor: not-allowed;
}
.color-js { color: #F7DF1E; }
.color-py { color: #4B8BBE; }
.color-php { color: #8993BE; }
.color-cpp { color: #659AD2; }
.color-ts { color: #3178C6; }
.color-html { color: #E34F26; }
.dot-status {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-tertiary);
}
.level-1 { background: var(--text-tertiary); }
.level-2 { background: var(--text-secondary); }
.level-3 { background: var(--text-primary); }
/* Stats Grid Bar */
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr) 1.5fr;
gap: 20px;
align-items: stretch;
margin: 4px 0;
}
.stat-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 20px 22px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 10px;
min-height: 122px;
transition: all 0.2s ease, transform 0.15s ease;
}
.stat-card:hover {
border-color: #475569;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
transform: translateY(-1px);
}
.stat-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.stat-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-tertiary);
}
.stat-unit {
font-size: 10px;
font-family: var(--font-mono);
color: var(--text-muted);
background: var(--bg-base);
padding: 1px 6px;
border-radius: 4px;
border: 1px solid var(--border-subtle);
}
.stat-value {
font-size: 32px;
font-weight: 700;
font-family: var(--font-mono);
color: var(--text-primary);
line-height: 1.1;
margin: 6px 0 4px;
}
.stat-symbol {
font-size: 20px;
color: var(--text-tertiary);
}
.stat-footer {
font-size: 12px;
color: var(--text-secondary);
font-family: var(--font-mono);
}
/* Kartu ke-4: Kemajuan Sintaks - layout vertikal simetris dengan kartu lain */
.stat-card-progress {
justify-content: center;
gap: 14px;
}
.stat-card-progress .stat-header {
margin-bottom: 8px;
}
/* Progress Bar Container (Kemajuan Sintaks) */
.progress-bar-container {
width: 100%;
height: 10px;
background: var(--bg-base);
border-radius: 999px;
overflow: hidden;
margin: 6px 0 10px;
border: 1px solid var(--border-subtle);
}
.progress-bar-fill {
height: 100%;
background: var(--color-secondary);
border-radius: 999px;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.text-danger { color: var(--accent-rose) !important; }
.text-success { color: var(--accent-emerald) !important; }
/* --------------------------------------------------------------------------
5b. Floating Metrics Pop-up / HUD (Realtime Telemetry Pinned on Scroll)
-------------------------------------------------------------------------- */
.floating-metrics-hud {
position: fixed;
top: 92px;
left: 50%;
transform: translate(-50%, -24px);
opacity: 0;
pointer-events: none;
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
z-index: 58;
max-width: calc(100vw - 32px);
}
.floating-metrics-hud.visible {
transform: translate(-50%, 0);
opacity: 1;
pointer-events: auto;
}
.floating-metrics-content {
display: flex;
align-items: center;
gap: 14px;
background: var(--bg-surface);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid var(--border-strong);
border-radius: 999px;
padding: 7px 18px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--border-subtle);
user-select: none;
}
.floating-stat-item {
display: flex;
align-items: center;
gap: 8px;
}
.floating-stat-icon {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
background: var(--bg-hover);
color: var(--text-primary);
flex-shrink: 0;
}
.floating-stat-icon.icon-speed {
color: var(--brand-indigo);
background: rgba(230, 172, 75, 0.15);
}
.floating-stat-icon.icon-accuracy {
color: var(--accent-emerald);
background: rgba(94, 184, 134, 0.15);
}
.floating-stat-icon.icon-time {
color: var(--brand-cyan);
background: rgba(126, 175, 186, 0.15);
}
.floating-stat-text {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.floating-stat-val-group {
display: flex;
align-items: baseline;
gap: 3px;
}
.floating-stat-val {
font-size: 14px;
font-weight: 700;
font-family: var(--font-mono, monospace);
color: var(--text-primary);
letter-spacing: -0.01em;
}
.floating-stat-unit {
font-size: 10px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
}
.floating-stat-sub {
font-size: 10px;
color: var(--text-muted);
font-weight: 500;
font-family: var(--font-mono, monospace);
}
.floating-stat-divider {
width: 1px;
height: 22px;
background: var(--border-strong);
opacity: 0.8;
}
.floating-stat-progress {
min-width: 90px;
display: flex;
flex-direction: column;
gap: 3px;
}
.floating-progress-header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 10px;
color: var(--text-secondary);
font-weight: 600;
line-height: 1;
}
.floating-progress-bar {
width: 100%;
height: 5px;
background: var(--bg-hover);
border-radius: 999px;
overflow: hidden;
position: relative;
border: 1px solid var(--border-subtle);
}
.floating-progress-fill {
height: 100%;
/* Satu warna aksen: bar progres mengukur kemajuan, bukan status sukses. */
background: var(--brand-indigo);
border-radius: 999px;
transition: width 0.25s ease;
}
@media (max-width: 768px) {
.floating-metrics-hud {
top: auto;
bottom: 16px;
transform: translate(-50%, 20px);
}
.floating-metrics-hud.visible {
transform: translate(-50%, 0);
}
.floating-metrics-content {
gap: 10px;
padding: 6px 14px;
}
.floating-stat-item.floating-stat-progress {
display: none;
}
}
/* --------------------------------------------------------------------------
6. Editor Frame & Code Viewport
-------------------------------------------------------------------------- */
/* Canvas Viewport */
.hidden-input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
top: 0;
left: 0;
}
.canvas-overlay.hidden {
opacity: 0;
pointer-events: none;
}
.overlay-content {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: var(--brand-cyan);
}
.overlay-icon {
font-size: 32px;
}
/* Baris perintah terminal (skema pembuatan file/direktori level 2-3) */
.char.shell-prompt {
color: var(--accent-emerald);
font-weight: 700;
}
.char.shell-cmd {
color: #9BE1FF;
}
[data-theme="light"] .char.shell-cmd {
color: #2A7B54;
font-weight: 500;
}
/* --------------------------------------------------------------------------
7. History & Analytics View
-------------------------------------------------------------------------- */
.history-section {
display: flex;
flex-direction: column;
gap: 20px;
}
.history-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 16px;
margin-bottom: 32px;
}
.summary-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md, 12px);
padding: 18px 20px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
min-height: 88px;
box-sizing: border-box;
transition: var(--transition);
}
.summary-card:hover {
border-color: var(--brand-indigo);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.summary-value {
font-size: 24px;
font-weight: 700;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
color: var(--text-primary);
line-height: 1.2;
}
.level-recap-section {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 16px;
}
.level-recap-section .card-header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-subtle);
}
.level-recap-section .card-header h3 {
font-size: 17px;
font-weight: 700;
color: var(--text-primary);
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.level-recap-section .card-subtitle {
font-size: 13px;
color: var(--text-secondary);
margin: 0;
}
/* Chart Visualizer */
.chart-container-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 20px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.card-header.border-bottom {
padding-bottom: 14px;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 0;
}
.card-header h3 {
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.card-subtitle {
font-size: 12px;
color: var(--text-tertiary);
}
.chart-viewport {
min-height: 160px;
display: flex;
align-items: flex-end;
justify-content: center;
padding-top: 20px;
}
.empty-chart {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: var(--text-tertiary);
font-size: 13px;
margin: auto;
}
.empty-chart i { font-size: 28px; opacity: 0.4; }
.bar-chart {
width: 100%;
height: 160px;
display: flex;
align-items: flex-end;
justify-content: space-around;
gap: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-subtle);
}
.chart-bar-item {
flex: 1;
max-width: 48px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
height: 100%;
justify-content: flex-end;
}
.chart-bar-fill {
width: 100%;
background: var(--brand-cyan);
border-radius: var(--radius-xs) var(--radius-xs) 0 0;
transition: height 0.3s ease;
}
.chart-bar-value {
font-size: 10px;
font-family: var(--font-mono);
color: var(--brand-cyan);
font-weight: 600;
}
.chart-bar-label {
font-size: 10px;
color: var(--text-tertiary);
font-family: var(--font-mono);
}
/* History Table */
.table-responsive {
overflow-x: auto;
}
.history-table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.history-table th {
background: var(--bg-elevated);
padding: 12px 10px;
font-size: 11px;
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border-bottom: 2px solid var(--border-strong, #3D3A35);
}
.history-table td {
padding: 14px 10px;
border-bottom: 1.5px solid var(--border-strong, rgba(245, 242, 235, 0.18));
color: var(--text-secondary);
vertical-align: middle;
}
.history-table tbody tr {
transition: background 0.12s ease;
}
.history-table tbody tr:hover td {
background: var(--bg-hover);
color: var(--text-primary);
}
.wpm-badge {
font-family: var(--font-mono);
font-weight: 700;
font-size: 14px;
color: var(--text-primary);
}
.badge {
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-secondary);
}
.badge-success {
color: var(--text-secondary);
}
.btn-delete-row {
background: transparent;
border: none;
color: var(--text-tertiary);
cursor: pointer;
padding: 4px;
}
.btn-delete-row:hover {
color: var(--accent-rose);
}
.empty-table-state {
padding: 40px;
text-align: center;
color: var(--text-tertiary);
}
.empty-table-state i { font-size: 32px; margin-bottom: 8px; }
/* --------------------------------------------------------------------------
8. Modals
-------------------------------------------------------------------------- */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(6px);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
[data-theme="light"] .modal-backdrop {
background: rgba(15, 23, 42, 0.4);
}
.modal-dialog {
background: var(--bg-surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
max-width: 480px;
width: 100%;
max-height: calc(100vh - 40px);
overflow-y: auto;
padding: 28px;
box-shadow: var(--box-shadow-modal);
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
}
.res-box {
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: 12px;
text-align: center;
}
.res-value {
font-size: 24px;
font-weight: 700;
font-family: var(--font-mono);
color: var(--brand-cyan);
display: block;
}
.res-label {
font-size: 11px;
color: var(--text-tertiary);
}
.pillar-level-tabs-wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 12px;
padding: 10px 16px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.pillar-level-label {
font-size: 0.88rem;
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
.pillar-level-selector {
margin: 0;
}
.res-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 2px 0;
color: var(--text-secondary);
}
.modal-footer-btns {
display: flex;
align-items: center;
gap: 12px;
margin-top: 20px;
}
.modal-footer-btns .btn,
.modal-footer-btns .btn-primary,
.modal-footer-btns .btn-secondary,
.modal-footer-btns .btn-accent {
flex: 1;
}
.page-btn {
min-width: 32px;
height: 32px;
padding: 0 10px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: var(--bg-surface);
color: var(--text-primary);
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.page-btn:hover:not(:disabled) {
background: var(--bg-hover);
border-color: var(--brand-indigo);
color: var(--text-primary);
}
.page-btn.active,
.page-btn.btn-primary {
background: var(--brand-indigo);
color: #FFFFFF;
border-color: var(--brand-indigo);
}
.page-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
background: transparent;
border-color: var(--border-subtle);
}
.modal-close {
position: absolute;
top: 14px;
right: 14px;
background: transparent;
border: none;
color: var(--text-tertiary);
font-size: 22px;
cursor: pointer;
}
.brand-accent-icon {
font-size: 28px;
color: var(--brand-cyan);
margin-bottom: 8px;
}
.shortcut-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
margin: 10px 0;
}
.shortcut-list li {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--text-secondary);
}
/* --------------------------------------------------------------------------
9. Footer
-------------------------------------------------------------------------- */
.app-footer {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
border-top: 1px solid var(--border-subtle);
font-size: 12px;
color: var(--text-tertiary);
}
.separator { margin: 0 6px; }
/* --------------------------------------------------------------------------
10. Level Admin & Authentication Styles
-------------------------------------------------------------------------- */
.badge-role {
font-size: 10px;
color: var(--text-tertiary);
font-weight: 600;
letter-spacing: 0.05em;
}
.badge-role-admin {
color: var(--text-secondary);
}
.btn-auth {
display: flex;
align-items: center;
gap: 8px;
width: auto;
height: 36px;
max-width: 300px;
padding: 0 14px;
background: var(--bg-elevated);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
color: var(--text-primary);
font-size: 13px;
cursor: pointer;
transition: var(--transition);
}
.btn-auth .user-identity {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.25;
min-width: 0;
}
.btn-auth .user-name-label {
max-width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
}
.btn-auth .user-meta {
font-size: 10px;
font-family: var(--font-mono);
color: var(--text-tertiary);
white-space: nowrap;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-auth .badge-role {
flex: none;
white-space: nowrap;
}
.btn-auth:hover {
background: var(--bg-hover);
border-color: var(--brand-indigo);
}
/* Notifikasi Permintaan Akun (Navbar Admin/Asisten) */
.nav-noti-wrap {
position: relative;
display: flex;
align-items: center;
}
.nav-noti-btn,
button.nav-noti-btn {
position: relative;
width: auto !important;
height: 36px !important;
margin: 0 !important;
padding: 6px 14px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
border-radius: 0 !important;
background: transparent !important;
border: none !important;
color: rgba(255, 255, 255, 0.82) !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1 !important;
cursor: pointer !important;
transition: color 0.15s ease !important;
min-width: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
.nav-noti-btn::before,
.nav-noti-btn::after,
button.nav-noti-btn::before,
button.nav-noti-btn::after {
display: none !important;
}
.nav-noti-btn:hover,
button.nav-noti-btn:hover {
background: transparent !important;
color: var(--text-primary) !important;
border-color: transparent !important;
}
.nav-noti-btn,
button.nav-noti-btn {
position: relative;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
cursor: pointer !important;
transition: color 0.15s ease !important;
box-shadow: none !important;
overflow: visible !important;
}
.top-nav .nav-noti-badge:not(.hidden):not([hidden]),
.nav-noti-badge:not(.hidden):not([hidden]) {
position: static !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
min-width: 18px !important;
height: 18px !important;
padding: 0 5px !important;
margin-left: 4px !important;
background: #DC2626 !important;
color: #ffffff !important;
font-size: 11px !important;
font-weight: 700 !important;
font-family: var(--font-mono, monospace) !important;
line-height: 1 !important;
text-align: center !important;
border-radius: 999px !important;
border: none !important;
box-shadow: none !important;
vertical-align: middle !important;
z-index: 2 !important;
pointer-events: none;
animation: notiBadgeMinimal 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}
@keyframes notiBadgeMinimal {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.85;
transform: scale(1.05);
}
}
.notification-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 360px;
max-width: calc(100vw - 24px);
max-height: 480px;
background: var(--bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--border-subtle);
padding: 14px;
z-index: 140;
display: flex;
flex-direction: column;
animation: navMenuIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.notification-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 12px;
margin-bottom: 10px;
border-bottom: 1px dashed var(--color-divider);
}
.notification-header-left {
display: flex;
align-items: center;
gap: 8px;
}
.notification-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--text-main);
display: flex;
align-items: center;
gap: 6px;
}
.notification-title i {
color: var(--accent);
}
.notification-count-badge {
font-size: 11px;
font-weight: 600;
padding: 2px 7px;
border-radius: 10px;
background: rgba(59, 130, 246, 0.15);
color: var(--primary);
border: 1px solid rgba(59, 130, 246, 0.3);
}
.notification-close {
cursor: pointer;
width: 26px !important;
height: 26px !important;
min-width: 0 !important;
min-height: 0 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--bg-hover) !important;
color: var(--text-muted) !important;
border: 1px solid var(--color-border) !important;
font-size: 16px !important;
line-height: 1 !important;
transition: all 0.15s ease !important;
padding: 0 !important;
box-shadow: none !important;
}
.notification-close::before,
.notification-close::after {
display: none !important;
}
.notification-close:hover {
background: var(--bg-active) !important;
color: var(--text-main) !important;
}
.notification-list {
overflow-y: auto;
max-height: 380px;
display: flex;
flex-direction: column;
gap: 10px;
padding-right: 2px;
}
.notification-container {
display: flex;
align-items: flex-start;
padding: 12px;
background: transparent;
border: 1px solid var(--color-border);
border-radius: 12px;
position: relative;
transition: all 0.2s ease;
gap: 12px;
}
.notification-container:hover {
border-color: var(--border-focus);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.notification-media {
position: relative;
flex-shrink: 0;
}
.notification-user-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--bg-hover);
color: var(--text-main);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border: 1px solid var(--color-border);
}
.notification-reaction {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: white;
background: var(--accent-blue, #3b82f6);
font-size: 10px;
position: absolute;
bottom: -2px;
right: -2px;
border: 2px solid var(--bg-main);
}
.notification-content {
flex: 1;
min-width: 0;
line-height: 1.35;
}
.notification-text {
margin: 0 0 4px 0;
font-size: 12.5px;
color: var(--text-main);
word-break: break-word;
}
.notification-text strong {
font-weight: 600;
color: var(--text-main);
}
.notification-meta-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 4px 0 6px 0;
}
.notification-timer {
color: var(--primary);
font-weight: 500;
font-size: 11px;
display: flex;
align-items: center;
gap: 4px;
}
.notification-actions {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
}
.notification-btn-approve,
.notification-btn-reject {
padding: 4px 10px !important;
font-size: 11px !important;
font-weight: 600 !important;
border-radius: 6px !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
box-shadow: none !important;
}
.notification-btn-approve::before,
.notification-btn-approve::after,
.notification-btn-reject::before,
.notification-btn-reject::after {
display: none !important;
}
.notification-btn-approve {
background: #10b981 !important;
color: #ffffff !important;
border: 1px solid #059669 !important;
}
.notification-btn-approve:hover {
background: #059669 !important;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4) !important;
}
.notification-btn-reject {
background: transparent !important;
color: #ef4444 !important;
border: 1px solid #ef4444 !important;
}
.notification-btn-reject:hover {
background: rgba(239, 68, 68, 0.1) !important;
}
.notification-empty {
text-align: center;
padding: 24px 12px;
color: var(--text-muted);
font-size: 13px;
}
.notification-empty i {
font-size: 28px;
margin-bottom: 8px;
opacity: 0.5;
display: block;
}
/* Menu Akun (Profil / About / Logout) - sejajar dengan tombol akun/logout */
.nav-user-wrap {
position: relative;
display: flex;
align-items: center;
}
.nav-user-menu {
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 280px;
min-width: 280px;
max-width: 320px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16), 0 0 0 1px var(--border-subtle);
padding: 8px;
z-index: 130;
display: flex;
flex-direction: column;
gap: 3px;
animation: navMenuIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
box-sizing: border-box;
}
@keyframes navMenuIn {
from { opacity: 0; transform: translateY(-5px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.nav-user-menu-head {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px 10px;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 4px;
}
.nav-user-menu-avatar {
width: 36px;
height: 36px;
flex: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
color: var(--brand-indigo, #D97706);
font-size: 14px;
}
.nav-user-menu-id {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.3;
}
.nav-user-menu-id strong {
font-size: 13px;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nav-user-menu-id small {
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-tertiary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 1px;
}
/* User Menu Items - Full Width Row (Never Circular) */
.nav-user-menu-item,
button.nav-user-menu-item {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 38px !important;
padding: 8px 12px !important;
background: transparent !important;
border: 1px solid transparent !important;
border-radius: 8px !important;
color: var(--text-secondary) !important;
font-size: 13px !important;
font-weight: 500 !important;
text-align: left !important;
cursor: pointer !important;
box-shadow: none !important;
box-sizing: border-box !important;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
white-space: nowrap !important;
}
.nav-user-menu-item:hover,
button.nav-user-menu-item:hover {
background: var(--bg-hover) !important;
color: var(--text-primary) !important;
border-color: var(--border-subtle) !important;
transform: none !important;
}
.nav-user-menu-item i,
button.nav-user-menu-item i {
width: 18px;
text-align: center;
color: var(--brand-indigo, #D97706);
font-size: 13px;
flex-shrink: 0;
}
.nav-user-menu-item:hover i,
button.nav-user-menu-item:hover i {
color: var(--text-primary);
}
.nav-user-menu-item.nav-user-menu-logout,
button.nav-user-menu-item.nav-user-menu-logout {
color: var(--color-danger, #ef4444) !important;
}
.nav-user-menu-item.nav-user-menu-logout:hover,
button.nav-user-menu-item.nav-user-menu-logout:hover {
background: rgba(239, 68, 68, 0.1) !important;
color: var(--color-danger, #ef4444) !important;
border-color: rgba(239, 68, 68, 0.2) !important;
}
.nav-user-menu-item.nav-user-menu-logout i,
button.nav-user-menu-item.nav-user-menu-logout i {
color: inherit;
}
.nav-user-menu-divider {
height: 1px;
background: var(--border-subtle);
margin: 4px 0;
}
.admin-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.search-box {
position: relative;
display: flex;
align-items: center;
flex: 1;
min-width: 240px;
}
.search-box i {
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
color: var(--text-tertiary);
font-size: 13px;
pointer-events: none;
transition: color var(--transition-fast);
}
.search-box input {
height: 38px;
padding: 0 12px 0 38px;
background: var(--bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 13px;
outline: none;
width: 100%;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.search-box input:focus {
border-color: var(--brand-indigo);
box-shadow: 0 0 0 3px var(--brand-indigo-glow);
background: var(--bg-surface);
}
.search-box input:focus ~ i {
color: var(--brand-indigo);
}
.admin-select {
height: 38px;
padding: 0 30px 0 12px;
background-color: var(--bg-elevated);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23ABA396' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 13.5px;
outline: none;
cursor: pointer;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.admin-select:focus {
border-color: var(--brand-indigo);
box-shadow: 0 0 0 3px var(--brand-indigo-glow);
background-color: var(--bg-surface);
}
.toolbar-actions {
display: flex;
align-items: center;
gap: 10px;
}
/* Toolbox: seluruh kontrol toolbar dalam SATU box tersambung
(search + select + tombol), seperti panel jumlah AI.
Segmen rapat memenuhi box (contoh: split-button Send|^):
tanpa margin dalam, garis pemisah penuh, radius hanya di
sudut luar box. */
.toolbox {
display: flex;
align-items: stretch;
flex: 1 1 auto;
flex-wrap: wrap;
background: var(--bg-surface);
border: 1px dashed var(--border-subtle);
border-radius: 10px;
padding: 0;
min-height: 44px;
}
.toolbox .search-box {
flex: 1 1 220px;
min-width: 180px;
align-self: stretch;
}
.toolbox .search-box input,
.toolbox select.admin-select {
border: none !important;
box-shadow: none !important;
background: transparent !important;
border-radius: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.toolbox .search-box input {
height: 100%;
}
.toolbox select.admin-select {
height: auto !important;
align-self: stretch;
min-width: 0;
}
/* Garis pemisah antar segmen, penuh dari atas ke bawah. */
.toolbox > * + * {
border-left: 1px solid var(--border-subtle) !important;
}
.toolbox .btn {
border: none;
box-shadow: none !important;
height: auto !important;
min-height: 100%;
align-self: stretch !important;
margin: 0;
border-radius: 0;
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.toolbox .btn-secondary {
background: transparent !important;
}
.toolbox .btn-danger {
background: transparent !important;
color: var(--accent-rose, #E64833) !important;
}
.toolbox .btn-danger:hover:not(:disabled) {
background: rgba(220, 38, 38, 0.12) !important;
}
/* CTA menempel di ujung kanan box, radius mengikuti sudut box. */
.toolbox .btn-primary:last-child {
margin: 0;
border-radius: 0 9px 9px 0;
}
.toolbox .btn-cta-divider,
.toolbox .bulk-kelas-divider {
display: none;
}
/* =========================================================
ENTERPRISE DATA TABLE SYSTEM (.table & .admin-table)
========================================================= */
.table-container,
.table-responsive {
overflow-x: auto;
border-radius: var(--radius-lg, 12px);
border: 1.5px solid var(--border-strong, #3D3A35);
background: var(--bg-surface);
scrollbar-width: thin;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
max-height: calc(100vh - 240px);
}
.table,
.admin-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 14px;
line-height: 20px;
font-family: var(--font-ui);
}
/* Radius sudut mengikuti wadah (.table-responsive radius 12px, border 1.5px).
border-collapse: collapse mengabaikan radius sel sehingga sudut header
tampil patah; separate + spacing 0 membuat radius sel berfungsi.
Hanya ada garis horizontal sehingga tampilan garis tidak berubah. */
.table thead tr:first-child th:first-child,
.admin-table thead tr:first-child th:first-child {
border-top-left-radius: calc(var(--radius-lg, 12px) - 1.5px);
}
.table thead tr:first-child th:last-child,
.admin-table thead tr:first-child th:last-child {
border-top-right-radius: calc(var(--radius-lg, 12px) - 1.5px);
}
.table > tbody:first-child > tr:first-child > td:first-child,
.admin-table > tbody:first-child > tr:first-child > td:first-child {
border-top-left-radius: calc(var(--radius-lg, 12px) - 1.5px);
}
.table > tbody:first-child > tr:first-child > td:last-child,
.admin-table > tbody:first-child > tr:first-child > td:last-child {
border-top-right-radius: calc(var(--radius-lg, 12px) - 1.5px);
}
.table tbody tr:last-child td,
.admin-table tbody tr:last-child td {
border-bottom: none;
}
.table tbody tr:last-child td:first-child,
.admin-table tbody tr:last-child td:first-child {
border-bottom-left-radius: calc(var(--radius-lg, 12px) - 1.5px);
}
.table tbody tr:last-child td:last-child,
.admin-table tbody tr:last-child td:last-child {
border-bottom-right-radius: calc(var(--radius-lg, 12px) - 1.5px);
}
.table th,
.admin-table th {
position: sticky;
top: 0;
z-index: 2;
background: var(--bg-elevated);
color: var(--text-secondary);
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.35;
height: 44px;
padding: 10px 16px;
border-bottom: 2px solid var(--border-strong, #3D3A35);
white-space: nowrap;
box-sizing: border-box;
}
.table td,
.admin-table td {
padding: 12px 16px;
min-height: 48px;
border-bottom: 1.5px solid var(--border-strong, rgba(245, 242, 235, 0.18));
vertical-align: middle;
color: var(--text-primary);
box-sizing: border-box;
}
.table tbody tr,
.admin-table tbody tr {
transition: background 150ms ease;
}
.table tbody tr:hover td,
.admin-table tbody tr:hover td {
background: var(--bg-hover);
}
/* Alignment Rules */
.table th.text-center,
.table td.text-center,
.admin-table th.text-center,
.admin-table td.text-center {
text-align: center !important;
}
.table th.text-right,
.table td.text-right,
.admin-table th.text-right,
.admin-table td.text-right,
.table td.numeric,
.admin-table td.numeric {
text-align: right !important;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* Baris terpilih pada tabel penilaian penjelasan - sorot netral sesuai tema
(tanpa aksen warna/garis mencolok; cukup permukaan + penanda tipis) */
.table tbody tr.explain-active td,
.admin-table tbody tr.explain-active td {
background: var(--bg-hover);
color: var(--text-primary);
box-shadow: inset 2px 0 0 var(--border-strong);
}
/* Structured Empty State Component */
.table-empty,
.empty-cell {
text-align: center !important;
padding: 48px 24px !important;
color: var(--text-secondary);
}
.empty-cell-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 auto;
max-width: 440px;
}
.empty-cell-icon {
font-size: 32px;
color: var(--text-tertiary);
margin-bottom: 4px;
}
.empty-cell-title {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.empty-cell-desc {
font-size: 13px;
color: var(--text-tertiary);
line-height: 1.5;
margin: 0;
}
/* Skeleton Loading Rows */
.table-skeleton-row td {
padding: 16px;
}
.skeleton-bar {
height: 14px;
background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-hover) 50%, var(--bg-elevated) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
border-radius: 4px;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Table Toolbar Standard */
.table-toolbar,
.admin-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
}
.role-badge {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
}
.role-admin { color: var(--text-primary); }
.role-user { color: var(--text-secondary); }
/* Status persetujuan akun mahasiswa (Panel Admin → Manajemen User) */
.status-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.status-pending { color: var(--text-secondary); }
.status-approved { color: var(--text-primary); }
.status-rejected { color: var(--text-tertiary); }
.status-unknown { color: var(--text-tertiary); }
/* Indikator kehadiran pengguna (Panel Admin → Manajemen User)
Dot hijau = online (last_seen ≤ 5 menit) dengan animasi pulsing blink, merah = offline. */
.user-presence-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
margin-top: -1px;
flex-shrink: 0;
position: relative;
}
.dot-online {
background-color: #0fcc45;
}
.dot-online::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #0fcc45;
opacity: 0.7;
border-radius: 50%;
animation: blink 1.2s linear infinite;
pointer-events: none;
}
.dot-offline {
background-color: #ef4444;
}
/* Utilitas indikator online/offline bila dipakai di luar tabel */
.online-indicator {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 6px;
background-color: #0fcc45;
border-radius: 50%;
position: relative;
vertical-align: middle;
}
.online-indicator.offline {
background-color: #ef4444;
}
.online-indicator .blink {
display: block;
width: 100%;
height: 100%;
background-color: inherit;
opacity: 0.7;
border-radius: 50%;
animation: blink 1.2s linear infinite;
}
@keyframes blink {
100% {
transform: scale(2, 2);
opacity: 0;
}
}
/* Kolom Status di Monitoring Progress (Clean Typography - Murni Teks & Ikon, Tanpa Pill / Badge) */
.progress-status-block {
display: flex;
flex-direction: column;
gap: 3px;
align-items: flex-start;
justify-content: center;
background: transparent !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
}
.prog-status-title {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.83rem;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
background: transparent !important;
border: none !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.prog-status-title i,
.prog-status-title .material-symbols-outlined {
font-size: 15px !important;
width: 15px;
height: 15px;
line-height: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Warna Semantik Teks & Ikon */
.prog-status-title.status-approved,
.prog-status-title.status-completed {
color: #22c55e !important;
}
[data-theme="light"] .prog-status-title.status-approved,
[data-theme="light"] .prog-status-title.status-completed {
color: #15803d !important;
}
.prog-status-title.status-pending,
.prog-status-title.status-in-progress {
color: #60a5fa !important;
}
[data-theme="light"] .prog-status-title.status-pending,
[data-theme="light"] .prog-status-title.status-in-progress {
color: #1d4ed8 !important;
}
.prog-status-title.status-unknown,
.prog-status-title.status-stopped {
color: #fbbf24 !important;
}
[data-theme="light"] .prog-status-title.status-unknown,
[data-theme="light"] .prog-status-title.status-stopped {
color: #b45309 !important;
}
.prog-status-title.status-rejected,
.prog-status-title.status-disqualified {
color: #f87171 !important;
}
[data-theme="light"] .prog-status-title.status-rejected,
[data-theme="light"] .prog-status-title.status-disqualified {
color: #b91c1c !important;
}
/* Baris kedua: status jaringan mahasiswa (subtle metadata tanpa badge/pill) */
.prog-status-meta {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.73rem;
font-weight: 500;
line-height: 1.2;
color: var(--text-tertiary);
white-space: nowrap;
background: transparent !important;
border: none !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.prog-status-meta i,
.prog-status-meta .material-symbols-outlined {
font-size: 13px !important;
width: 13px;
height: 13px;
line-height: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.prog-status-meta.meta-online {
color: #22c55e;
}
[data-theme="light"] .prog-status-meta.meta-online {
color: #15803d;
}
.prog-status-meta.meta-offline {
color: var(--text-tertiary);
}
.prog-net-pill.net-offline,
.net-badge.net-offline {
color: var(--text-tertiary);
background: rgba(255, 255, 255, 0.03);
border-color: var(--border-subtle);
}
[data-theme="light"] .prog-net-pill.net-offline,
[data-theme="light"] .net-badge.net-offline {
color: #6b7280;
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.1);
}
/* --- Progress Pengerjaan Mahasiswa (tab Progress) --- */
.progress-head-panel {
align-items: center;
padding: 10px 12px;
gap: 12px;
}
.progress-head-panel > div:first-child {
padding: 0;
}
.progress-head-actions {
align-self: center;
flex: 0 0 auto;
}
.progress-cell {
display: flex;
align-items: center;
gap: 8px;
min-width: 150px;
}
.progress-cell-bar {
flex: 1;
height: 8px;
min-width: 70px;
border-radius: 999px;
background: var(--border-subtle, rgba(255, 255, 255, 0.08));
overflow: hidden;
}
.progress-cell-fill {
height: 100%;
border-radius: 999px;
background: var(--color-secondary);
transition: width 0.4s ease;
}
.progress-cell-fill.status-approved { background: var(--color-secondary); }
.progress-cell-fill.status-rejected { background: var(--color-error); }
.progress-cell-fill.status-unknown { background: var(--text-tertiary); }
.progress-cell-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-tertiary);
white-space: nowrap;
}
.progress-cell-stage {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.72rem;
font-weight: 500;
color: var(--text-tertiary);
white-space: nowrap;
margin-top: 1px;
}
.progress-cell-stage i,
.progress-cell-stage .material-symbols-outlined {
font-size: 13px !important;
width: 13px;
height: 13px;
line-height: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Body pesan modal konfirmasi persetujuan akun */
.approval-confirm-body {
padding: 0 1.5rem 1.25rem;
color: var(--text-secondary, #8b949e);
font-size: 0.92rem;
line-height: 1.6;
}
/* Peringatan: akun mahasiswa tanpa data status (backend versi lama) */
.approval-warning {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 1rem;
padding: 12px 14px;
border-radius: 10px;
background: rgba(210, 153, 34, 0.1);
border: 1px solid rgba(210, 153, 34, 0.35);
color: var(--text-primary, #F0F4F3);
font-size: 0.85rem;
line-height: 1.5;
}
.approval-warning i { color: var(--text-secondary); margin-top: 2px; }
.approval-warning code {
background: rgba(139, 148, 158, 0.15);
padding: 1px 5px;
border-radius: 4px;
font-size: 0.8em;
}
/* Segmen tabel Manajemen User - mahasiswa dipisah dari asisten & admin agar
validasi data lebih mudah (tiap segmen punya kolom yang relevan) */
.user-segment {
margin-bottom: 1.5rem;
border: 1px solid var(--border-card);
border-radius: var(--radius-md, 12px);
background: var(--bg-card);
padding: 1rem 1.25rem;
animation: fadeIn 0.25s ease;
}
.user-segment:last-child {
margin-bottom: 0;
}
.user-segment-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 1rem;
}
.user-segment-title {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.user-segment-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
border-radius: 10px;
}
.user-segment-title h4 {
margin: 0;
font-size: 0.98rem;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.user-segment-title p {
margin: 2px 0 0;
font-size: 0.8rem;
color: var(--text-secondary);
}
.user-segment-count {
display: inline !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
font-size: 0.9em !important;
font-weight: 500 !important;
color: var(--text-tertiary, #888888) !important;
margin-left: 6px !important;
}
.user-segment-count::before {
content: "(";
}
.user-segment-count::after {
content: ")";
}
@media (max-width: 560px) {
.user-segment { padding: 0.85rem 0.9rem; }
.user-segment-head { align-items: flex-start; }
}
/* Tombol setujui akun (ikon centang hijau) */
.btn-approve-user { color: #4F8A72; border-color: rgba(79, 138, 114, 0.4); }
.btn-approve-user:hover { background: rgba(79, 138, 114, 0.12); color: #4F8A72; }
.btn-reject-user { color: var(--danger, #E64833); }
/* Kartu "Akun Menunggu Persetujuan" - aksi validasi di atas tabel Manajemen User */
.approval-card {
margin-bottom: 1.25rem;
border: 1px solid rgba(201, 138, 61, 0.35);
background: rgba(201, 138, 61, 0.05);
border-radius: var(--radius-md, 12px);
padding: 1rem 1.25rem;
animation: fadeIn 0.25s ease;
}
.approval-card-head { margin-bottom: 0.75rem; }
.approval-card-title {
display: flex;
align-items: center;
gap: 12px;
}
.approval-card-icon {
width: 42px;
height: 42px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
color: var(--text-secondary);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 50%;
}
.approval-card-title h4 { margin: 0; font-size: 0.98rem; color: var(--text-primary); }
.approval-card-title h4 strong { color: var(--text-primary); }
.approval-card-title p { margin: 2px 0 0; font-size: 0.8rem; color: var(--text-secondary); }
.approval-list { display: flex; flex-direction: column; gap: 8px; }
.approval-item {
display: flex;
align-items: center;
gap: 12px;
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--radius-sm, 10px);
padding: 10px 14px;
}
.approval-avatar {
width: 38px;
height: 38px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: var(--brand-indigo);
background: rgba(36, 72, 85, 0.12);
border-radius: 50%;
}
.approval-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.approval-info strong { font-size: 0.9rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approval-meta { font-size: 0.76rem; color: var(--text-tertiary); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.approval-actions { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 560px) {
.approval-item { flex-wrap: wrap; }
.approval-actions { width: 100%; justify-content: flex-end; }
}
/* ==========================================================================
LAYAR "MENUNGGU PERSETUJUAN" - akun mahasiswa yang belum disetujui Admin
========================================================================== */
.pending-approval-screen {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 24px 0 8px;
}
.pending-card {
width: 100%;
max-width: 560px;
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 36px 32px;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
animation: fadeIn 0.3s ease;
}
.pending-card-icon {
width: 72px;
height: 72px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: var(--text-secondary);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 50%;
}
.pending-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-secondary);
}
.pending-title {
margin: 10px 0 8px;
font-size: clamp(20px, 3vw, 26px);
color: var(--text-primary);
}
.pending-desc {
margin: 0 auto 22px;
max-width: 46ch;
color: var(--text-secondary);
font-size: 0.92rem;
line-height: 1.65;
}
.pending-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
text-align: left;
margin-bottom: 18px;
}
.pending-info-item {
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: 12px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.pending-info-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
color: var(--text-tertiary);
}
.pending-info-item strong {
font-size: 0.95rem;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pending-status-text {
color: var(--text-secondary) !important;
letter-spacing: 0.06em;
}
.pending-note {
display: flex;
gap: 10px;
align-items: flex-start;
text-align: left;
padding: 12px 14px;
margin-bottom: 18px;
border-radius: 12px;
border: 1px dashed var(--border-strong);
background: rgba(36, 72, 85, 0.06);
color: var(--text-secondary);
font-size: 0.82rem;
line-height: 1.55;
}
.pending-note i {
color: var(--brand-indigo);
margin-top: 2px;
flex-shrink: 0;
}
.pending-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
@media (max-width: 520px) {
.pending-info-grid { grid-template-columns: 1fr; }
.pending-card { padding: 28px 20px; }
}
/* Aksi tabel: Murni ikon bersih datar tanpa button timbul atau border bulat */
.action-btns,
#admin-view .action-btns,
.admin-table .action-btns {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
width: auto !important;
}
.action-btn-divider {
display: inline-block !important;
width: 0 !important;
height: 16px !important;
min-height: 16px !important;
border-left: 1px dashed var(--border-subtle, rgba(255, 255, 255, 0.45)) !important;
margin: 0 4px !important;
align-self: center !important;
flex: none !important;
pointer-events: none !important;
}
.action-btns .btn,
.action-btns .btn-icon,
.admin-table .btn-icon,
#admin-view .admin-table .btn-icon,
button.btn-icon {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
border-radius: 6px !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
color: var(--text-secondary, rgba(255, 255, 255, 0.75)) !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: color 150ms ease, background 150ms ease !important;
}
.action-btns .btn-icon:hover,
.admin-table .btn-icon:hover,
#admin-view .admin-table .btn-icon:hover,
button.btn-icon:hover {
background: rgba(255, 255, 255, 0.12) !important;
color: #ffffff !important;
box-shadow: none !important;
border: none !important;
transform: none !important;
}
.action-btns .btn-icon-danger,
.action-btns .btn-danger,
.admin-table .btn-icon-danger,
.admin-table .btn-danger,
button.btn-icon.btn-icon-danger,
button.btn-icon.btn-danger {
color: var(--color-danger, #E05A47) !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.action-btns .btn-icon-danger:hover,
.action-btns .btn-danger:hover,
.admin-table .btn-icon-danger:hover,
.admin-table .btn-danger:hover,
button.btn-icon.btn-icon-danger:hover,
button.btn-icon.btn-danger:hover {
background: rgba(224, 90, 71, 0.16) !important;
color: #ff6e5a !important;
box-shadow: none !important;
border: none !important;
transform: none !important;
}
.action-btns {
display: flex;
gap: 6px;
align-items: center;
}
.action-btns-center {
justify-content: center;
}
.text-center {
text-align: center !important;
}
.btn-icon {
width: 30px;
height: 30px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-strong);
background: var(--bg-base);
color: var(--text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.btn-icon:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.btn-icon.btn-danger:hover {
background: rgba(230, 72, 51, 0.2);
color: var(--accent-rose);
border-color: var(--accent-rose);
}
/* Tombol ikon hapus (merah) di kolom aksi */
.btn-icon.btn-icon-danger {
border-color: rgba(230, 72, 51, 0.4);
color: var(--accent-rose, #E64833);
}
.btn-icon.btn-icon-danger:hover {
background: rgba(230, 72, 51, 0.18);
color: var(--accent-rose, #E64833);
border-color: var(--accent-rose, #E64833);
}
/* Stats Cards Grid for Admin */
.admin-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 20px;
}
.admin-stat-card {
display: flex;
align-items: center;
gap: 16px;
padding: 18px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
}
.stat-icon {
width: 42px;
height: 42px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.icon-indigo,
.icon-emerald,
.icon-cyan,
.icon-amber {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
}
.stat-info { display: flex; flex-direction: column; }
.stat-label { font-size: 12px; color: var(--text-tertiary); }
.stat-value { font-size: 20px; font-weight: 700; }
/* Modal & Forms */
.modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal-card {
background: var(--bg-surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
width: 100%;
max-width: 480px;
padding: 24px;
box-shadow: var(--box-shadow-modal);
}
/* Modal Sesi - lebar & tinggi dinamis mengikuti ukuran layar monitor */
.modal-sesi-overlay {
overflow-y: auto;
}
.modal-sesi {
width: min(760px, 94vw);
max-width: none; /* override max-width:480px bawaan modal-card */
max-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
}
.modal-sesi .modal-header {
flex: none;
}
.modal-sesi .admin-form {
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
/* Gulir tetap aktif lewat roda mouse, sentuhan, dan keyboard; garis
scrollbar tidak digambar agar permukaan modal tidak terlihat kotor. */
padding: 2px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.modal-sesi .admin-form::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
/* Kontrol form di modal sesi membutuhkan batas yang terlihat. Aturan input
global memakai border:none!important, jadi selector ber-ID ini
mengembalikan garis, permukaan, dan cincin fokus khusus di dalam modal. */
#sesi-form-modal .form-group input:not([type="checkbox"]):not([type="hidden"]),
#sesi-form-modal .form-group select {
border: 1px solid var(--border-subtle) !important;
background-color: var(--bg-elevated) !important;
box-shadow: none !important;
}
#sesi-form-modal .form-group input:not([type="checkbox"]):not([type="hidden"]):focus,
#sesi-form-modal .form-group select:focus {
border-color: var(--brand-indigo) !important;
background-color: var(--bg-surface) !important;
box-shadow: 0 0 0 3px var(--brand-indigo-glow) !important;
}
#sesi-form-modal .sesi-time-field {
border: 1px solid var(--border-subtle) !important;
background: var(--bg-elevated) !important;
box-shadow: none !important;
}
#sesi-form-modal .sesi-time-field:focus-within {
border-color: var(--brand-indigo) !important;
box-shadow: 0 0 0 3px var(--brand-indigo-glow) !important;
}
#sesi-form-modal .sesi-time-field.invalid {
border-color: var(--accent-rose) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-rose) 18%, transparent) !important;
}
/* Chip pilihan di modal: isian aktif dipulihkan karena aturan tombol global
memaksa latar transparan. Teks preset aktif memakai warna dasar tema agar
tetap terbaca di atas aksen putih (gelap) atau hitam (terang). */
#sesi-form-modal .sesi-lang-chip:has(input:checked) {
background: var(--brand-indigo-glow) !important;
border-color: var(--brand-indigo) !important;
}
#sesi-form-modal .preset-chip.active {
background: var(--brand-indigo) !important;
border-color: var(--brand-indigo) !important;
color: var(--bg-base) !important;
}
/* Header dipisahkan dari area gulir dengan garis tipis. */
#sesi-form-modal .modal-header {
padding-bottom: 14px;
margin-bottom: 16px;
border-bottom: 1px solid var(--border-subtle);
}
/* Tombol simpan/batal tetap terlihat saat formulir digulir. */
#sesi-form-modal .form-actions {
position: sticky;
bottom: 0;
z-index: 2;
margin: 0 -2px;
padding: 14px 2px 2px;
background: var(--bg-surface);
border-top: 1px solid var(--border-subtle);
}
@media (max-width: 520px) {
.modal-sesi-overlay {
padding: 12px;
}
.modal-sesi {
width: 100%;
max-height: calc(100vh - 24px);
padding: 16px;
}
/* Target sentuh minimum 44px untuk kontrol utama di layar kecil. */
#sesi-form-modal .modal-close-btn {
width: 44px !important;
height: 44px !important;
margin: -8px -8px -8px 0;
}
#sesi-form-modal .form-actions .btn,
#sesi-form-modal .sesi-lang-chip,
#sesi-form-modal .preset-chip {
min-height: 44px;
}
#sesi-form-modal .preset-chip {
padding: 8px 12px;
}
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.modal-close-btn {
background: none;
border: none;
color: var(--text-tertiary);
font-size: 24px;
cursor: pointer;
}
.admin-form {
display: flex;
flex-direction: column;
gap: 14px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
text-align: left;
width: 100%;
}
.form-group label {
font-size: 12.5px;
font-weight: 600;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 6px;
margin: 0;
}
.form-group input:not([type="checkbox"]):not([type="radio"]), .form-group select {
box-sizing: border-box;
width: 100%;
height: 38px;
padding: 0 12px;
background-color: var(--bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 13.5px;
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
max-width: 16px !important;
flex: 0 0 16px !important;
margin: 0;
padding: 0;
}
.form-group select {
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23ABA396' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px 14px;
padding-right: 36px !important;
}
.form-group input:focus, .form-group select:focus {
border-color: var(--brand-indigo);
box-shadow: 0 0 0 3px var(--brand-indigo-glow);
background-color: var(--bg-surface);
}
.code-textarea {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
background: var(--bg-editor);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.6;
outline: none;
resize: vertical;
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.code-textarea:focus {
border-color: var(--brand-indigo);
box-shadow: 0 0 0 3px var(--brand-indigo-glow);
}
.code-textarea::-webkit-scrollbar { width: 7px; height: 7px; }
.code-textarea::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 0 0 4px 4px; }
.code-textarea::-webkit-scrollbar-track { background: transparent; }
/* --- Modal Tambah/Edit Pengguna - profesional & rapi --- */
.modal-user-card {
width: min(600px, 94vw);
max-width: none;
max-height: calc(100vh - 40px);
overflow-y: auto;
overscroll-behavior: contain;
animation: modal-pop 0.18s ease-out;
}
@keyframes modal-pop {
from { opacity: 0; transform: translateY(10px) scale(0.98); }
to { opacity: 1; transform: none; }
}
.modal-title-wrap h3 { margin: 0; font-size: 17px; }
.modal-subtitle { margin: 3px 0 0; font-size: 12.5px; color: var(--text-tertiary); }
.form-section {
border: 1px solid var(--color-border);
background: var(--bg-surface);
border-radius: var(--radius-md);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.form-section-head {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--color-divider);
}
.form-section-head > i {
width: 30px; height: 30px;
border-radius: var(--radius-sm);
background: var(--brand-indigo);
color: #fff;
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
}
.form-section-head strong { display: block; font-size: 13px; color: var(--text-primary); }
.form-section-head small { display: block; font-size: 11.5px; color: var(--text-tertiary); }
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
align-items: start;
}
.grid-span-2 { grid-column: 1 / -1; }
.password-wrap {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.password-wrap input {
width: 100%;
padding-right: 40px !important;
}
.password-toggle {
position: absolute !important;
right: 8px !important;
top: 0 !important;
bottom: 0 !important;
margin-top: auto !important;
margin-bottom: auto !important;
width: 30px !important;
height: 30px !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
color: var(--text-tertiary) !important;
border-radius: var(--radius-sm) !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transform: none !important;
animation: none !important;
transition: color var(--transition-fast) !important;
}
.password-toggle:hover {
color: var(--text-primary) !important;
background: transparent !important;
transform: none !important;
box-shadow: none !important;
}
.password-toggle:active,
.password-toggle:focus,
.password-toggle:focus-visible {
transform: none !important;
animation: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
color: var(--text-primary) !important;
}
.password-toggle i,
.password-toggle .material-symbols-outlined {
transform: none !important;
transition: none !important;
animation: none !important;
}
.role-badge-card {
display: flex;
align-items: center;
gap: 12px;
border: 1px solid var(--border-strong);
background: var(--bg-base);
border-radius: var(--radius-md);
padding: 10px 14px;
}
.role-badge-icon {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
}
.role-badge-card strong { display: block; font-size: 13.5px; color: var(--text-primary); }
.role-badge-card small { display: block; font-size: 11.5px; color: var(--text-tertiary); margin-top: 1px; }
.modal-user-card .modal-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid var(--border-subtle);
}
.modal-user-card .modal-actions .btn {
height: 40px;
min-height: 40px;
padding: 0 20px;
font-size: 13.5px;
font-weight: 600;
border-radius: var(--radius-md, 8px);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-sizing: border-box;
}
.modal-user-card .modal-actions .btn-secondary {
min-width: 96px;
background: transparent !important;
border: 1px solid var(--border-strong) !important;
color: var(--text-primary) !important;
}
.modal-user-card .modal-actions .btn-secondary:hover {
background: var(--bg-hover) !important;
border-color: var(--border-strong) !important;
}
.modal-user-card .modal-actions .btn-primary {
min-width: 160px;
}
.modal-user-card .modal-actions .btn i {
font-size: 18px;
line-height: 1;
}
@media (max-width: 560px) {
.form-grid { grid-template-columns: 1fr; }
.modal-user-card { padding: 18px; }
}
@media (max-width: 480px) {
.modal-user-card .modal-actions {
flex-direction: column-reverse;
gap: 10px;
margin-top: 20px;
padding-top: 14px;
}
.modal-user-card .modal-actions .btn {
width: 100%;
min-width: 0;
}
}
/* Sel ringkas rekap per level (jumlah soal · rata-rata nilai) pada Rekap per Kelas */
.level-recap-cell {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
font-size: 11.5px;
color: var(--text-secondary);
white-space: nowrap;
}
/* Modal Context Sintaks - lebih lebar agar editor kode & daftar pilar lega */
/* Form Context Sintaks INLINE (bukan modal) - panel yang muncul di bawah toolbar */
.snippet-inline-form {
background: var(--bg-elevated);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
margin: 14px 0;
padding: 18px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
animation: snippetInlineIn 0.18s ease-out;
}
@keyframes snippetInlineIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.snippet-inline-form-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-subtle);
}
.snippet-inline-form .admin-form {
padding: 0;
background: transparent;
border: none;
box-shadow: none;
}
.snippet-inline-form .form-actions {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--border-subtle);
}
.modal-snippet-card {
width: min(1120px, 96vw);
max-width: none;
scrollbar-width: thin; /* Firefox */
scrollbar-color: rgba(127, 137, 146, 0.22) transparent;
}
.modal-snippet-card::-webkit-scrollbar { width: 8px; }
.modal-snippet-card::-webkit-scrollbar-thumb { background: rgba(127, 137, 146, 0.16); border-radius: 0 0 4px 4px; }
.modal-snippet-card::-webkit-scrollbar-thumb:hover { background: rgba(127, 137, 146, 0.30); }
.modal-snippet-card::-webkit-scrollbar-track { background: transparent; }
.modal-snippet-card .code-textarea {
font-size: 12.5px;
}
@media (max-width: 560px) {
.modal-snippet-card { padding: 18px; }
}
/* --- UI Pengaturan Waktu Sesi (Jam Mulai / Selesai WIT + Tanggal Berakhir) --- */
.sesi-time-set {
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.sesi-time-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.sesi-time-head label {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 6px;
}
.sesi-preset-chips {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.preset-chip-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--text-tertiary);
}
.preset-chip {
border: 1px solid var(--border-strong);
background: var(--bg-surface);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 11px;
padding: 3px 10px;
border-radius: 999px;
cursor: pointer;
transition: var(--transition);
}
.preset-chip:hover {
border-color: var(--brand-indigo);
color: var(--brand-indigo);
background: var(--brand-indigo-glow);
}
.preset-chip.active {
border-color: var(--brand-indigo);
color: #fff;
background: var(--brand-indigo);
}
.sesi-time-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 10px;
}
.sesi-time-arrow {
color: var(--text-muted);
font-size: 13px;
text-align: center;
}
.sesi-time-field {
display: flex;
align-items: center;
gap: 10px;
background: var(--bg-elevated);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
padding: 8px 12px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sesi-time-field:focus-within {
border-color: var(--brand-indigo);
box-shadow: 0 0 0 3px var(--brand-indigo-glow);
}
.sesi-time-field.invalid {
border-color: rgba(230, 72, 51, 0.55);
box-shadow: 0 0 0 3px rgba(230, 72, 51, 0.12);
}
.sesi-time-icon {
color: var(--brand-cyan);
font-size: 13px;
width: 16px;
text-align: center;
flex: none;
}
.sesi-time-input-wrap {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
gap: 1px;
}
.sesi-time-input-wrap input[type="time"] {
background: transparent;
border: none;
outline: none;
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 16px;
font-weight: 600;
padding: 0;
width: 100%;
}
.sesi-time-label {
font-size: 10px;
color: var(--text-tertiary);
letter-spacing: 0.3px;
}
.sesi-valid-msg {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--text-tertiary);
min-height: 16px;
transition: color 0.15s ease;
}
.sesi-valid-msg.ok { color: var(--accent-emerald); }
.sesi-valid-msg.bad { color: var(--accent-rose); }
/* Preview ringkasan jadwal live */
.sesi-preview {
display: flex;
align-items: center;
gap: 12px;
background: var(--bg-elevated);
border: 1px dashed var(--border-strong);
border-radius: var(--radius-md);
padding: 12px 14px;
transition: border-color 0.15s ease, background 0.15s ease;
}
.sesi-preview.ok {
border-color: rgba(79, 138, 114, 0.45);
background: rgba(79, 138, 114, 0.06);
}
.sesi-preview.bad {
border-color: rgba(230, 72, 51, 0.5);
background: rgba(230, 72, 51, 0.06);
}
.sesi-preview-icon {
width: 34px;
height: 34px;
flex: none;
border-radius: var(--radius-sm);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-cyan);
font-size: 14px;
}
.sesi-preview-body {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.sesi-preview-body strong {
font-size: 13px;
color: var(--text-primary);
font-family: var(--font-mono);
word-break: break-word;
}
.sesi-preview-body span {
font-size: 11px;
color: var(--text-tertiary);
}
.sesi-preview-badge {
flex: none;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--text-tertiary);
white-space: nowrap;
}
.sesi-preview.ok .sesi-preview-badge {
color: var(--text-primary);
}
.sesi-preview.bad .sesi-preview-badge {
color: var(--text-tertiary);
}
/* Picker jam/tanggal native ikut tema aplikasi */
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="date"] { color-scheme: dark; }
[data-theme="light"] input[type="time"], [data-theme="light"] input[type="date"] { color-scheme: light; }
/* Popup daftar opsi