/* E-Ujian interface. Colors inherit from Pengaturan Aplikasi. */
:root {
  --ui-primary: var(--theme-main, #0b8062);
  --ui-deep: var(--theme-dark, #064b3e);
  --ui-accent: var(--theme-accent, #1ba77b);
  --ui-canvas: var(--theme-background, #e9f1ec);
  --ui-table-head: var(--theme-table-header, #12634d);
  --ui-table-ink: var(--theme-table-text, #fff);
  --ui-ink: #19352f;
  --ui-muted: #52665d;
  --ui-line: color-mix(in srgb, var(--ui-primary) 27%, #d8e2dc);
  --ui-soft: color-mix(in srgb, var(--ui-primary) 13%, white);
  --ui-hover: color-mix(in srgb, var(--ui-primary) 20%, white);
  --ui-shadow: 0 12px 34px rgba(17, 42, 37, .07);
}

/* Menu: open space, clear grouping and consistent line icons. */
body.ujian-modern #sidebar {
  background: linear-gradient(160deg, var(--ui-deep), color-mix(in srgb, var(--ui-deep) 78%, var(--ui-primary))) !important;
  border-right: 1px solid color-mix(in srgb, var(--ui-deep) 75%, white) !important;
  box-shadow: 8px 0 28px rgba(8, 33, 30, .12);
  color: #fff;
}
body.ujian-modern #sidebar .sidebar-brand,
body.ujian-modern #sidebar > div:first-child {
  background: rgba(0, 0, 0, .12) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .15) !important;
}
body.ujian-modern #sidebar .sidebar-brand-title { color: #fff !important; }
body.ujian-modern #sidebar .sidebar-brand-subtitle { color: #d2eadf !important; }
body.ujian-modern #sidebar .sidebar-brand .bg-white\/20,
body.ujian-modern #sidebar #closeSidebar { color: #fff !important; background: rgba(255, 255, 255, .14) !important; }
body.ujian-modern #sidebar .sidebar-brand .text-white { color: #fff !important; }
body.ujian-modern .sidebar-search-box input {
  background: rgba(255, 255, 255, .11) !important;
  border: 1px solid rgba(255, 255, 255, .26) !important;
  color: #fff !important;
  border-radius: 13px;
}
body.ujian-modern .sidebar-search-box input::placeholder { color: #e1eee6 !important; opacity: 1; }
body.ujian-modern .sidebar-search-box i { color: #d2eadf !important; }
body.ujian-modern .sidebar-search-box input:focus { border-color: #fff !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18) !important; }
body.ujian-modern #sideNav a.sidebar-link { color: #e3f2e9 !important; border: 1px solid transparent; border-radius: 12px; }
body.ujian-modern #sideNav a.sidebar-link:hover { color: #fff !important; background: rgba(255, 255, 255, .13) !important; }
body.ujian-modern #sideNav a.sidebar-link.nav-active {
  color: #fff !important;
  background: var(--ui-primary) !important;
  border-color: rgba(255, 255, 255, .3) !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, .12) !important;
}
body.ujian-modern #sideNav .sidebar-link-icon,
body.ujian-modern #sideNav .sidebar-nav-heading > .modern-icon { color: #d2eadf !important; }
body.ujian-modern #sideNav .sidebar-link-icon {
  width: 31px; height: 31px; border-radius: 9px;
  display: inline-grid; place-items: center;
  background: rgba(255, 255, 255, .09);
}
body.ujian-modern #sideNav a.nav-active .sidebar-link-icon { background: rgba(255, 255, 255, .19); color: #fff !important; }
body.ujian-modern #sideNav .modern-icon { display: inline-block; width: 18px; height: 18px; flex-shrink: 0; vertical-align: middle; }
body.ujian-modern #sideNav .sidebar-nav-heading { color: #e2eee5 !important; font-weight: 750; }
body.ujian-modern #sideNav .sidebar-nav-group[open] { background: rgba(255, 255, 255, .07) !important; border-color: rgba(255, 255, 255, .11) !important; }
body.ujian-modern #sideNav .sidebar-nav-children { border-left-color: rgba(255, 255, 255, .26) !important; }
body.ujian-modern #sidebar > div:last-child,
body.ujian-modern #sidebar > div:last-child > div { background: rgba(0, 0, 0, .16) !important; }
body.ujian-modern #sidebar > div:last-child { border-top: 1px solid rgba(255, 255, 255, .16) !important; }
body.ujian-modern #sidebar > div:last-child .text-white { color: #fff !important; }
body.ujian-modern #sidebar > div:last-child .text-blue-200 { color: #d3eadf !important; }
body.ujian-modern #sidebar > div:last-child .bg-white\/30 { background: var(--ui-primary) !important; color: #fff !important; }
body.ujian-modern .sidebar-logout-btn { color: #ffe0d8 !important; }
body.ujian-modern .sidebar-logout-btn:hover { background: rgba(239, 96, 90, .2) !important; color: #fff !important; }

/* App shell */
body.ujian-modern, body.ujian-modern main { background: var(--ui-canvas) !important; color: var(--ui-ink); }
body.ujian-modern #topbar { background: #fff !important; border-bottom: 1px solid var(--ui-line) !important; box-shadow: 0 4px 18px rgba(12, 45, 37, .055); }
body.ujian-modern #topbar h1 { color: var(--ui-ink) !important; }
body.ujian-modern #topbar .text-teal-600 { color: var(--ui-primary) !important; }
body.ujian-modern #topbar :is(#toggleSidebar, #themeBtn, #topbar-clock) { background: var(--ui-soft) !important; color: var(--ui-primary) !important; }
body.ujian-modern #topbar :is(#toggleSidebar, #themeBtn):hover { background: var(--ui-hover) !important; }
body.ujian-modern #mainContent :is(.bg-white, .section-card, .stat-card, .data-table-shell) {
  border-color: var(--ui-line);
  box-shadow: var(--ui-shadow);
}
body.ujian-modern #mainContent :is(.stat-card, .section-card, .data-table-shell) { border-radius: 20px !important; }
body.ujian-modern #mainContent .stat-card {
  background: linear-gradient(115deg, #fff 0%, color-mix(in srgb, var(--ui-primary) 15%, #fff) 100%) !important;
  border-left: 4px solid var(--ui-accent) !important;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--ui-deep) 12%, transparent);
}
body.ujian-modern #mainContent .stat-card:hover { border-left-color: var(--ui-primary) !important; transform: translateY(-2px); }
body.ujian-modern #mainContent .stat-val { color: var(--ui-deep) !important; }
body.ujian-modern #mainContent .section-header {
  color: #fff !important;
  background: linear-gradient(100deg, var(--ui-deep), var(--ui-primary));
  border-bottom-color: var(--ui-primary);
  min-height: 54px;
}
body.ujian-modern #mainContent :is(.stat-icon, .student-quick-icon, .student-announcement-icon) { background: var(--ui-soft) !important; color: var(--ui-primary) !important; }
body.ujian-modern #mainContent :is(.stat-icon, .student-quick-icon) .modern-icon { width: 23px; height: 23px; }
body.ujian-modern #mainContent .quick-btn { min-height: 85px; border-radius: 15px; border-color: var(--ui-line); background: var(--ui-soft); color: var(--ui-deep); }
body.ujian-modern #mainContent .quick-btn:hover { background: var(--ui-primary); color: #fff; border-color: var(--ui-primary); transform: translateY(-2px); }
body.ujian-modern #mainContent .quick-action-icon { width: 31px; height: 31px; display: inline-grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--ui-primary) 19%, white); color: var(--ui-deep); }
body.ujian-modern #mainContent .quick-btn:hover .quick-action-icon { background: rgba(255,255,255,.18); color: #fff; }
body.ujian-modern #mainContent .section-header > .modern-icon { color: #fff; width: 18px; height: 18px; }
body.ujian-modern #mainContent :is(button.bg-blue-600, a.bg-blue-600, .btn-theme, .bg-theme) { background: var(--ui-primary) !important; color: #fff !important; }
body.ujian-modern #mainContent :is(button.bg-blue-600, a.bg-blue-600, .btn-theme, .bg-theme):hover { background: var(--ui-deep) !important; }
body.ujian-modern #mainContent :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus { border-color: var(--ui-accent) !important; --tw-ring-color: color-mix(in srgb, var(--ui-accent) 25%, transparent) !important; }

/* Tables: calmer header, roomy rows, no old-style zebra pattern. */
body.ujian-modern #mainContent .data-table-shell,
body.ujian-modern #mainContent .overflow-x-auto:has(> table) { border-radius: 18px; }
body.ujian-modern #mainContent .data-table-shell > .p-2\.5,
body.ujian-modern #mainContent .data-table-shell > div:last-child { background: #fff !important; border-color: var(--ui-line) !important; padding: 14px 17px; }
body.ujian-modern #mainContent .data-table-shell .dt-search,
body.ujian-modern #mainContent .data-table-shell .dt-len { min-height: 39px; border-color: var(--ui-line) !important; border-radius: 11px; color: var(--ui-ink) !important; background: #fff !important; }
body.ujian-modern #mainContent table { border-collapse: separate; border-spacing: 0; }
body.ujian-modern #mainContent table thead,
body.ujian-modern #mainContent table thead tr,
body.ujian-modern #mainContent .data-table-shell table thead tr { background: var(--ui-table-head) !important; color: var(--ui-table-ink) !important; }
body.ujian-modern #mainContent table thead th,
body.ujian-modern #mainContent table thead th.text-gray-500,
body.ujian-modern #mainContent table thead th.text-gray-600,
body.ujian-modern #mainContent table thead th.text-blue-700 {
  background: transparent !important; color: var(--ui-table-ink) !important;
  border-bottom: 1px solid var(--ui-line) !important;
  font-size: 12px; font-weight: 800; letter-spacing: .025em;
  padding-top: 15px; padding-bottom: 15px;
}
body.ujian-modern #mainContent table thead th[data-key]:hover { background: color-mix(in srgb, var(--ui-primary) 28%, var(--ui-table-head)) !important; }
body.ujian-modern #mainContent table tbody tr { background: #fff !important; border-color: #dfeae2 !important; color: #293d35; }
body.ujian-modern #mainContent table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ui-primary) 5%, white) !important; }
body.ujian-modern #mainContent table tbody tr:hover { background: var(--ui-soft) !important; }
body.ujian-modern #mainContent table tbody td { padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid #e8eee9; font-size: 14px; line-height: 1.45; }
body.ujian-modern #mainContent table tbody tr:last-child td { border-bottom: 0; }
body.ujian-modern #mainContent .data-table-shell :is(.dt-prev, .dt-next) { border-color: var(--ui-line) !important; border-radius: 10px; }
body.ujian-modern #mainContent .data-table-shell :is(.dt-prev, .dt-next):hover:not(:disabled) { background: var(--ui-soft) !important; border-color: var(--ui-primary) !important; color: var(--ui-primary) !important; }
body.ujian-modern #mainContent .data-table-shell .dt-page { color: var(--ui-primary) !important; background: var(--ui-soft) !important; border-color: var(--ui-line) !important; border-radius: 10px; }
body.ujian-modern #mainContent table tbody :is(.bg-blue-100, .bg-gray-100) { background: var(--ui-soft) !important; color: var(--ui-primary) !important; border-radius: 999px; padding: 5px 10px; }
body.ujian-modern #mainContent table tbody :is(.bg-green-100, .bg-yellow-100, .bg-red-100) { border-radius: 999px; padding: 5px 10px; }
body.ujian-modern .table-scroll-hint { background: var(--ui-soft); color: var(--ui-primary); border-color: var(--ui-line); }
body.ujian-modern #mainContent table tbody :is(button, a):has(> i),
body.ujian-modern #mainContent .data-table-shell tbody :is(button, a):has(> .modern-icon) { border-radius: 10px; min-height: 34px; transition: transform .16s, box-shadow .16s, background-color .16s; }
body.ujian-modern #mainContent table tbody :is(button, a):has(> i):hover,
body.ujian-modern #mainContent .data-table-shell tbody :is(button, a):has(> .modern-icon):hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(14, 46, 38, .1); }
.modern-icon { width: 16px; height: 16px; display: inline-block; vertical-align: -.16em; flex-shrink: 0; }

/* Student, login and standalone exam reuse the saved palette. */
body.ujian-modern .student-welcome { background: linear-gradient(115deg, var(--ui-deep), var(--ui-primary)); box-shadow: 0 17px 35px color-mix(in srgb, var(--ui-deep) 22%, transparent); }
body.ujian-modern :is(.student-quick-card, .student-announcements, .student-exam-card) { border-color: var(--ui-line); box-shadow: var(--ui-shadow); }
body.ujian-modern :is(.student-cbt-heading, .student-password-heading) { background: var(--ui-soft); border-color: var(--ui-line); }
body.ujian-modern :is(.student-count, .student-cbt-count, .student-exam-results span) { background: var(--ui-soft); color: var(--ui-primary); }
body.ujian-modern :is(.student-exam-subject, .student-section-kicker) { color: var(--ui-primary); }
body.ujian-modern :is(.student-password-submit, .student-primary-link) { color: var(--ui-primary); }
body.exam-modern { background: var(--ui-canvas) !important; }
body.exam-modern .exam-topbar { background: linear-gradient(105deg, var(--ui-deep), var(--ui-primary)); }
body.exam-modern .exam-toolbar { background: var(--ui-soft); }
body.exam-modern .exam-time, body.exam-modern .exam-save-status { background: var(--ui-soft); color: var(--ui-deep); }
body.exam-modern #soalText { background: #fff; border-color: var(--ui-line); }
body.exam-modern #soalOptions label { border-color: var(--ui-line); }
body.exam-modern #soalOptions label:hover { border-color: var(--ui-accent); background: var(--ui-soft); }
body.exam-modern #soalOptions label:has(input:checked) { border: 2px solid var(--ui-primary); background: var(--ui-soft); }
body.login-modern { background: radial-gradient(circle at 15% 10%, var(--ui-primary), var(--ui-deep) 70%) !important; }
body.login-modern .login-shell { box-shadow: 0 26px 70px rgba(2, 28, 24, .29); border: 1px solid var(--ui-line); }
body.login-modern .login-shell > .login-hero { background: linear-gradient(155deg, var(--ui-deep), var(--ui-primary)) !important; color: #fff !important; }
body.login-modern .login-form-panel { background: #fff !important; }
body.login-modern .login-role { border-color: var(--ui-line); }
body.login-modern .login-role:not(.login-role-primary):hover { background: var(--ui-soft); border-color: var(--ui-accent); }
body.login-modern .login-role-primary,
body.login-modern .login-role-primary:hover { background: linear-gradient(110deg, var(--ui-deep), var(--ui-primary)) !important; border-color: var(--ui-primary); color: #fff; }
body.login-modern :is(.login-section-label, .login-brand-overline) { color: var(--ui-primary); }

/* Dark appearance, still tied to the selected main and accent colors. */
html.dark body.ujian-modern, html.dark body.ujian-modern main { background: #111c19 !important; color: #e9f3ed; }
html.dark body.ujian-modern #sidebar { background: linear-gradient(150deg, #0d1a17, var(--ui-deep)) !important; }
html.dark body.ujian-modern #sidebar .sidebar-brand { background: rgba(0, 0, 0, .16) !important; border-color: rgba(255, 255, 255, .16) !important; }
html.dark body.ujian-modern #sideNav a.sidebar-link.nav-active { background: var(--ui-primary) !important; color: #fff !important; }
html.dark body.ujian-modern #sidebar > div:last-child,
html.dark body.ujian-modern #sidebar > div:last-child > div { background: rgba(0, 0, 0, .16) !important; }
html.dark body.ujian-modern #topbar { background: #1d2d26 !important; border-color: #374f41 !important; }
html.dark body.ujian-modern #topbar h1 { color: #edf5ef !important; }
html.dark body.ujian-modern #topbar :is(#toggleSidebar, #themeBtn, #topbar-clock) { background: #30493a !important; color: #e9f3ed !important; }
html.dark body.ujian-modern #mainContent :is(.bg-white, .section-card, .stat-card, .data-table-shell) { background: #1d3027 !important; color: #edf5ef; border-color: #3a5846 !important; }
html.dark body.ujian-modern #mainContent .section-header { color: #fff !important; background: linear-gradient(100deg, var(--ui-deep), var(--ui-primary)); }
html.dark body.ujian-modern #mainContent .stat-val { color: #edf5ef !important; }
html.dark body.ujian-modern #mainContent .stat-card { background: linear-gradient(115deg, #20352a, color-mix(in srgb, var(--ui-primary) 22%, #20352a)) !important; }
html.dark body.ujian-modern #mainContent .data-table-shell > .p-2\.5,
html.dark body.ujian-modern #mainContent .data-table-shell > div:last-child { background: #253a2d !important; border-color: #3a5846 !important; }
html.dark body.ujian-modern #mainContent table thead,
html.dark body.ujian-modern #mainContent table thead tr { background: var(--ui-table-head) !important; }
html.dark body.ujian-modern #mainContent table thead th { color: var(--ui-table-ink) !important; border-color: rgba(255,255,255,.2) !important; }
html.dark body.ujian-modern #mainContent table tbody tr,
html.dark body.ujian-modern #mainContent table tbody tr:nth-child(even) { background: #1d3027 !important; color: #e1eee5; }
html.dark body.ujian-modern #mainContent table tbody tr:hover { background: #2e4a37 !important; }
html.dark body.ujian-modern #mainContent table tbody td { border-color: #344b3b; }
html.dark body.ujian-modern #mainContent .data-table-shell :is(.dt-search, .dt-len) { background: #1d3027 !important; border-color: #4a6350 !important; color: #edf5ef !important; }
html.dark body.exam-modern { background: #111c19 !important; color: #edf5ef; }
html.dark body.exam-modern :is(.exam-toolbar, #soalText) { background: #243b2d; border-color: #45604b; }
html.dark body.exam-modern #soalOptions label:has(input:checked) { background: #315c3c; border-color: var(--ui-accent); }
html.dark body.login-modern .login-form-panel { background: #1e293b !important; }

@media (prefers-reduced-motion: reduce) {
  body.ujian-modern #mainContent :is(button, a) { transition: none !important; }
}
@media print {
  body.ujian-modern, body.ujian-modern main { background: #fff !important; }
  body.ujian-modern #mainContent table thead,
  body.ujian-modern #mainContent table thead tr { background: #f2f2f2 !important; }
}