/* Shared visual polish for the participant portal. */
:root {
  --exam-ink: #172b4d;
  --exam-blue: #1469ba;
  --exam-cyan: #14a9bb;
  --exam-surface: #ffffff;
  --exam-border: #e2eaf2;
  --exam-shadow: 0 14px 34px rgba(30, 63, 97, .09);
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 5%, rgba(31, 166, 194, .10), transparent 24rem),
    radial-gradient(circle at 94% 82%, rgba(20, 105, 186, .08), transparent 30rem),
    #f5f8fc !important;
  color: var(--exam-ink);
}

.portal-nav,
.exam-toolbar {
  background: rgba(255, 255, 255, .94) !important;
  border-bottom: 1px solid var(--exam-border) !important;
  box-shadow: 0 5px 22px rgba(30, 63, 97, .07) !important;
  backdrop-filter: blur(14px);
}

.portal-card,
.welcome-panel,
.exam-sidebar .card,
.question-area .card {
  border: 1px solid var(--exam-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--exam-shadow) !important;
}

.portal-card {
  overflow: hidden;
}

.portal-card.accent-card:before {
  height: 5px !important;
}

.btn {
  border-radius: 9px;
  font-weight: 700;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(20, 86, 145, .14);
}

.btn-primary {
  border-color: #126bc2;
  background: linear-gradient(135deg, #1676d2, #1592ce);
}

.btn-success {
  border-color: #249b69;
  background: linear-gradient(135deg, #28ae74, #1e9b79);
}

.btn-danger {
  border-color: #d8364a;
  background: linear-gradient(135deg, #e34157, #d9294e);
}

.exam-toolbar {
  position: sticky;
  top: 0;
  z-index: 1020;
}

.exam-toolbar-layout {
  max-width: 1780px;
  margin: auto;
}

.exam-toolbar-title {
  color: var(--exam-ink);
  font-weight: 800;
}

.exam-toolbar-timer {
  border: 1px solid #d6e4f1 !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #f7fbff, #edf6ff) !important;
  box-shadow: 0 5px 14px rgba(25, 105, 170, .07);
}

.exam-toolbar-timer #timer {
  color: #123f72;
  letter-spacing: .035em;
}

#enterFullscreenTop {
  border-color: #8cbce5;
  color: #126bc2;
  background: #f7fbff;
}

.exam-sidebar .portal-card {
  position: sticky;
  top: 92px;
}

.question-area .card-body,
.exam-sidebar .card-body {
  padding: 20px !important;
}

.exam-question-section,
.question-nav-section {
  border-radius: 11px !important;
  border-left-width: 5px !important;
  background: linear-gradient(90deg, #edfaff, #f7fcfe) !important;
}

.question-nav {
  gap: 8px !important;
}

.question-nav button {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid #d4e0eb !important;
  border-radius: 11px !important;
  color: #45637e;
  background: #fff;
  box-shadow: 0 2px 5px rgba(30, 63, 97, .04);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}

.question-nav button:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(25, 98, 164, .16);
}

.question-nav .active {
  color: #fff !important;
  border-color: #1774c9 !important;
  background: linear-gradient(135deg, #1676d2, #1592ce) !important;
  box-shadow: 0 6px 14px rgba(21, 118, 210, .28) !important;
}

.question-nav .answered {
  background: linear-gradient(135deg, #168a4d, #25ad68) !important;
  border-color: #0f713d !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(22, 138, 77, .32) !important;
}

.question-nav .flagged {
  background: linear-gradient(135deg, #f5aa00, #ffd044) !important;
  border-color: #c47d00 !important;
  color: #4c3500 !important;
  box-shadow: 0 4px 10px rgba(196, 125, 0, .34) !important;
}

/* Selalu prioritaskan penanda soal yang sedang dibuka, termasuk bila sudah dijawab/ragu-ragu. */
.question-nav button.active {
  position: relative;
  z-index: 2;
  color: #fff !important;
  font-size: 15px;
  font-weight: 800;
  border: 2px solid #083f7c !important;
  background: linear-gradient(135deg, #0756a1, #008fc4) !important;
  box-shadow: 0 0 0 3px #d3edff, 0 8px 18px rgba(0, 86, 161, .38) !important;
  transform: translateY(-2px) scale(1.08);
}

.question-nav button.active::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(7, 86, 161, .65);
}

.question-text {
  color: #1a304c;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.78 !important;
}

.option-item {
  min-height: 62px;
  display: flex;
  align-items: center;
  border: 1px solid #dce7f0 !important;
  border-radius: 13px !important;
  box-shadow: 0 2px 4px rgba(25, 62, 95, .02);
}

.option-item:hover {
  border-color: #76b4e7 !important;
  background: #fbfdff;
  box-shadow: 0 8px 18px rgba(20, 105, 186, .10) !important;
}

.option-item:has(input:checked) {
  border-color: #2585d5 !important;
  background: linear-gradient(90deg, #eaf6ff, #fafdff) !important;
  box-shadow: inset 4px 0 #1683d7, 0 6px 15px rgba(22, 131, 215, .10) !important;
}

.option-item input {
  accent-color: #1676d2;
}

#saveStatus {
  border-radius: 999px;
  padding: 5px 10px;
  background: #edf9f3;
  color: #19734b !important;
  font-size: 12px;
  font-weight: 700;
}

.alert-warning {
  border: 0;
  border-left: 5px solid #e2a500;
  box-shadow: 0 5px 12px rgba(172, 117, 0, .08);
}

@media (max-width: 991px) {
  .exam-sidebar .portal-card { position: static; }
  .question-area .card-body,
  .exam-sidebar .card-body { padding: 16px !important; }
}

@media (max-width: 767px) {
  .portal-card,
  .welcome-panel,
  .exam-sidebar .card,
  .question-area .card { border-radius: 13px !important; }
  .question-text { font-size: 16px !important; }
  .option-item { min-height: 57px; padding: 13px !important; }
  .question-nav { gap: 7px !important; }
  .question-nav button { width: 38px !important; height: 38px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Participant dashboard */
body .welcome-panel {
  padding: 26px !important;
  border: 1px solid #d9e9f5 !important;
  background:
    radial-gradient(circle at 92% 22%, rgba(20, 169, 187, .16), transparent 12rem),
    linear-gradient(120deg, #ffffff 0%, #f2f9ff 100%) !important;
}

body .welcome-panel h3 {
  margin-bottom: 7px !important;
  color: #163556;
  letter-spacing: -.025em;
}

body .welcome-panel > .row > div:last-child > div {
  min-width: 192px;
  border: 1px solid #d8e6f1 !important;
  border-radius: 13px !important;
  box-shadow: 0 7px 16px rgba(34, 85, 125, .07);
}

body .alert-info {
  border: 1px solid #b9e5ec;
  border-left: 5px solid #159bad;
  border-radius: 12px;
  background: linear-gradient(90deg, #eafafd, #effbff);
  color: #155d70;
  box-shadow: 0 6px 15px rgba(21, 155, 173, .06);
}

body .schedule-card {
  overflow: hidden;
}

body .schedule-title {
  position: relative;
  overflow: hidden;
  padding: 21px 24px !important;
  background: linear-gradient(120deg, #146fc9, #1688cc 58%, #18a8b7) !important;
}

body .schedule-title:after {
  position: absolute;
  top: -85px;
  right: -35px;
  width: 220px;
  height: 220px;
  content: '';
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
}

body .schedule-title h5,
body .schedule-title small { position: relative; z-index: 1; }

body .dashboard-list-controls {
  background: #fbfdff;
}

body .dashboard-list-controls label {
  margin-bottom: 7px;
  color: #45637e;
  letter-spacing: .01em;
}

body .dashboard-list-controls .form-control {
  height: 42px !important;
  border: 1px solid #d7e4ef;
  border-radius: 9px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(17, 55, 89, .02);
}

body .dashboard-list-controls .form-control:focus {
  border-color: #65aee5;
  box-shadow: 0 0 0 3px rgba(25, 130, 213, .12);
}

body .schedule-table thead th {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  color: #46617b !important;
  background: #f0f6fb !important;
  border-bottom: 1px solid #dce8f2 !important;
  font-size: 12px !important;
  letter-spacing: .03em;
  text-transform: uppercase;
}

body .schedule-table tbody td {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

body .schedule-table tbody tr {
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

body .schedule-table tbody tr:hover {
  background: linear-gradient(90deg, #f0f9ff, #fbfeff) !important;
  box-shadow: inset 4px 0 #1782d5;
}

body .schedule-table tbody tr:hover td:first-child {
  border-left-color: transparent !important;
}

body .schedule-table tbody td:first-child strong {
  color: #183958;
  font-size: 15px;
}

body .schedule-table .badge {
  border-radius: 999px;
  padding: 6px 10px !important;
  font-size: 11px;
  box-shadow: 0 2px 5px rgba(30, 63, 97, .08);
}

body .schedule-table .btn {
  min-width: 88px;
  padding: 8px 12px;
}

body .dashboard-list-footer {
  min-height: 62px;
  background: #fbfdff;
}

body .dashboard-list-footer .btn-light {
  border: 1px solid #dbe6ef;
  background: #fff;
}

@media (max-width: 767px) {
  body .welcome-panel { padding: 20px !important; }
  body .schedule-title { padding: 18px !important; }
  body .schedule-table thead th,
  body .schedule-table tbody td { white-space: nowrap; }
  body .schedule-table tbody td:first-child { min-width: 205px; }
  body .schedule-table tbody td:nth-child(2) { min-width: 220px; }
}

/* Exam instructions */
.exam-instructions-page { max-width: 1240px; }
.exam-instructions-card { overflow: hidden; }
.exam-instructions-card .card-body { padding: 30px !important; }
.exam-instructions-card h3 { color: #173957; font-size: 27px; font-weight: 800; letter-spacing: -.025em; }
.exam-instructions-card .lead { color: #688097; font-size: 16px; }
.exam-summary { margin: 23px 0 20px; padding: 18px 4px 4px; border-top: 1px solid #e5edf4; }
.exam-summary strong { color: #244664; }
.participant-schedule-range { padding: 11px 14px; border: 1px solid #d5e9f1; border-radius: 10px; background: linear-gradient(90deg, #effbff, #f8fdff); color: #12647c; }
.exam-instructions-card hr { margin: 23px 0 18px; border-color: #e4ebf2; }
.exam-instructions-card h5 { color: #1d405f; font-weight: 800; }
.exam-instructions-card ul { padding-left: 20px; color: #435d75; line-height: 1.8; }
.exam-instructions-card .form-control { height: 45px; border: 1px solid #d7e4ef; border-radius: 10px; }
.exam-instructions-card .form-control:focus { border-color: #65aee5; box-shadow: 0 0 0 3px rgba(25, 130, 213, .12); }
.exam-instructions-card .custom-control-label { font-weight: 700; color: #284866; }
@media (max-width: 767px) { .exam-instructions-card .card-body { padding: 21px !important; } .exam-instructions-card h3 { font-size: 23px; } .participant-schedule-range { font-size: 13px; line-height: 1.55; } }