/* Umum */
#main .entry-content {
  min-height: 600px;
}

/* Header */
#header-user-halo .header-user-display-name {
  font-weight: bold;
  color: #317256;
}
#header-user-halo .header-user-halo-teks {
  margin-right: 1em;
}

/* Widget user */
#menu-sidebar-user .menu-active {
  font-weight: bold;
}
#menu-sidebar-user .menu-disable {
  pointer-events: none; /* Prevents mouse clicks */
  cursor: default;       /* Removes the pointer finger icon */
  color: #888888;        /* Visual cue for users */
}
#menu-sidebar-user .halaman-pretest,
#menu-sidebar-user .halaman-materi,
#menu-sidebar-user .halaman-posttest {
  background: #f3f3f3;
  border-left: 5px solid #1559ed;
  padding: 8px;
}
#menu-sidebar-user .menu-item {
  margin-bottom: 8px;
}

#menu-sidebar-user .menu-item-daftar-soal {
  margin-top: 3em;
}
#menu-sidebar-user .menu-item-daftar-soal-title {
  font-size: 1.25em;
}

#menu-sidebar-user .menu-daftar-paket-soal {
  padding-inline-start: 0;
}
#menu-sidebar-user .menu-daftar-paket-soal-title {
  font-size: 1em;
}
#menu-sidebar-user .menu-daftar-paket-soal li {
  margin-bottom: 1em;
  padding: 0.25em 0;
}
#menu-sidebar-user .menu-daftar-paket-soal li a,
#menu-sidebar-user .menu-daftar-paket-soal li span {
  display: inline-block;
  border: 1px dashed #888888;
  font-weight: bold;
  padding: 0.5em;
  width: 40px;
  height: 40px;
  line-height: normal;
  text-align: center;
}
#menu-sidebar-user .menu-daftar-paket-soal li a {

}
#menu-sidebar-user .menu-daftar-paket-soal li span {
  opacity: 0.25;
  -webkit-user-select: none; /* Safari */
  user-select: none;         /* Standard syntax */
}

#menu-sidebar-user .menu-daftar-paket-soal li a.menu-soal-terisi,
#menu-sidebar-user .menu-daftar-paket-soal li a.menu-subbab-terisi {
  border: 1px solid #889c7d; /* Soft green border */
  background-color: #dff0d8; /* Light green background */
  color: #3c763d; /* Dark green text for readability */
  box-shadow: rgb(136, 156, 125) 0px 0px 0px 1px;
}
#menu-sidebar-user .menu-daftar-paket-soal li a.halaman-menu-soal-sekarang,
#menu-sidebar-user .menu-daftar-paket-soal li a.halaman-menu-subbab-sekarang {
  border-bottom: 3px solid #1559ed;
}
#menu-sidebar-user .menu-daftar-paket-soal li a:hover {
  background-color: #fff3cd;
}

/* Login Form */
.login-required-block {
  max-width: 450px !important; /* Adjust the width as you like */
  width: 100% !important;
  margin: 0 auto !important;
}
.login-error {
  background-color: #fff3cd; /* Light yellow */
  border-left: 5px solid #ffc107; /* Dark yellow/orange */
  color: #856404; /* Dark text */
  font-weight: normal;
  padding: 15px;
  margin-bottom: 20px;
}
.tombol {
  background: #ee0000;
  color: #ffffff;
  font-weight: bold;
  padding: 1em 1.5em;
  border-radius: 0.5em;
}

/* Base styling for the logout button */
.logout-btn {
  background-color: #dc3545; /* Modern red color */
  color: #ffffff; /* White text */
  font-size: 16px;
  font-weight: 600;
  padding: 0.5em 1em;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  /* Smoothly animates colors and scale on hover */
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

/* Hover state animation */
.logout-btn:hover {
  background-color: #c82333; /* Darker red on hover */
  color: #ffffff; /* White text */
  border-color: #bd2130; /* Adds a border anchor */
  transform: translateY(-2px); /* Subtle lift effect */
}

/* Active state (when clicked) */
.logout-btn:active {
  background-color: #b21f2d;
  transform: translateY(0); /* Returns to baseline when pressed */
}

.login-btn {
  background-color: #2872fa;
}
.login-btn:hover {
  background-color: #2872fa;
  border-color: #2872fa;
}

/* Bungkus konten */
.bungkus-konten figure {
  margin-bottom: 1em;

}



/* Halaman SISWA */
.url-page-siswa-block {
  text-align: center;
}

/* Target the specific ACF radio button field */
.acf-field.radio-left-input .acf-label {
  padding: 1em 1.75em !important;
}
.acf-field.radio-left-input ul.acf-radio-list li {
  padding: 1em;
}
.acf-field.radio-left-input ul.acf-radio-list li label {
  display: inline-flex !important;
  align-items: start !important;
  flex-direction: row !important; /* Forces input to the left, text to the right */
  gap: 1em; /* Adjust spacing between the radio dot and text */
}

/* Ensure the input element takes its natural order first */
.acf-field.radio-left-input ul.acf-radio-list li label input[type="radio"] {
  order: -1 !important;
  margin: 0.5em !important;
}

/* Notifikasi semua selesai */
.notifikasi-semua-selesai {
  text-align: center;
  padding: 40px;
  margin: 40px 0;
  border-width: thin;
  border-color: #999999;
  border-style: dashed;
}

/* Notifikasi jawaban disimpan */
.notification-success {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 400px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #c9e2b3; /* Soft green border */
  background-color: #dff0d8; /* Light green background */
  color: #3c763d; /* Dark green text for readability */
  font-family: system-ui, -apple-system, sans-serif;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  margin: 2em 0;
}

.notification-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: #3c763d;
  color: #ffffff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  flex-shrink: 0;
}

.notification-content {
  flex-grow: 1;
}

.notification-title {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

.notification-message {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.notification-close {
  background: none;
  border: none;
  color: #3c763d;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.notification-close:hover {
  opacity: 1;
}

/* acf form jawaban */
.custom-acf-form-wrapper {
  overflow: hidden;
}
.custom-acf-form-wrapper .acf-form-fields {
  border: 1px solid #cacaca;
}

.custom-acf-form-wrapper .acf-form-submit {
  margin: 2em;
  text-align: right;
}

/* Tombol mulai */
#bungkus-navigasi-mulai {
  text-align: center;
  background-color: #d9edf7;
  color: #31708f;
  border: 1px solid #bce8f1;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}

/* Bungkus navigasi */
#bungkus-navigasi {
  margin: 4em 0 0;
  overflow: hidden;
  float: none;
}

#bungkus-navigasi .tombol-soal-prev {
  float: left;
}
#bungkus-navigasi .tombol-soal-next {
  float: right;
}

.bungkus-soal {
  margin-bottom: 4em;
}
.bungkus-soal .bungkus-isian {
  border: 1px solid #cacaca;
  padding: 16px;
}
.bungkus-soal .bungkus-isian .wp-editor-container {
  background: #f0f0f0;
  padding: 1em;
}
.bungkus-soal hr {
  margin: 4em 0;
}

.bungkus-soal .bungkus-respons {

}

.bungkus-soal .bungkus-isian .ubah-isian-jawaban {
  display: none;
}


.info-box {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  padding: 24px 20px 20px 24px;
  margin: 20px 0;
  width: 100%;
  /*max-width: 500px;*/
  color: #333; /* Use #ffffff for dark themes */
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease-in-out;
}

.info-box:hover {
  border-color: rgba(0, 122, 255, 0.5);
  box-shadow: 0 8px 32px 0 rgba(0, 122, 255, 0.2);
}

.info-tag {
  position: absolute;
  top: -12px;
  left: 24px;
  background-color: #0B6623;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.info-content p:last-child {
  margin: 0;
}





#boks-tombol-selesai,
#boks-tombol-selesai-materi {
  background-color: #fff3cd; /* Light yellow */
  border: 1px dashed #ffc107;
  float: left;
  width: 100%;
  margin: 4em 0 0;
  padding: 2em;
  text-align: center;
}
#boks-tombol-selesai .tombol-soal-selesai,
#boks-tombol-selesai-materi .tombol-soal-selesai {
  display: block;
  width: 100%;
  text-align: center;
}

#boks-tombol-selesai {
  display: none;
}

#boks-tombol-selesai-materi {
  margin: 0 0 0;
}

#boks-tombol-selesai-sidebar {
  margin-top: 2em;
}
#boks-tombol-selesai-sidebar p {
  margin-block-end: 1em;
}

/* counter */
.bungkus-nilai {
  text-align: center;
}
.stat-box {
  background: #2c3e50;
  color: #fff;
  padding: 2.5rem 4rem;
  border-radius: 12px;
  text-align: center;
  /*  width: 300px;*/
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: inline-block;
}

.stat-title {
  font-size: 2.5rem;
  margin-bottom: 15px;
  text-transform: uppercase;
  color: #bdc3c7;
}

.stat-number {
  font-size: 7.5rem;
  font-weight: bold;
}



/* table Laporan */
.tabel-daftar-jawaban .tabel-daftar-jawaban-judul {
  text-align: center;
}
.tabel-daftar-jawaban h2.tabel-daftar-jawaban-judul {
  margin-bottom: 0;
}

/* Keep main content hidden initially */
#all-table-container,
#materi-table-container {
  display: none;
}

/* Center the loader inside its parent container */
#loader {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px; /* Adjust based on your target layout */
  width: 100%;
}

/* Simple CSS Spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Base page styling */
/*body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f7f6;
  padding: 40px 20px;
  color: #333;
}*/

/* Container to handle horizontal scrolling on small screens */
.table-container {
/*  max-width: 900px;*/
  margin: 0 auto;
  overflow-x: auto;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 2em;
  border: 1px solid #eaeaea;
}

/* Core table configuration */
.score-table {
  width: 100%;
  border-collapse: collapse; /* Merges borders into clean single lines */
  font-size: 15px;
  text-align: left;

}

/* Header styling */
.score-table thead tr {
  background-color: #1e3a8a; /* Deep educational blue */
  color: #ffffff;
  font-weight: 600;
}

/* Cell spacing and structural dividers */
.score-table th,
.score-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
}

/* Alignment principles: Left-align text, center-align specific numbers/metrics */
.score-table th.text-center,
.score-table td.text-center {
  text-align: center;
}

/* Zebra striping for enhanced structural readability */
.score-table tbody tr:nth-of-type(even) {
  background-color: #f8fafc;
}

/* Interactive row highlight */
.score-table tbody tr:hover {
  background-color: #f1f5f9;
  transition: background-color 0.2s ease;
}

/* Visual Status Badges */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.badge.pass {
  background-color: #dcfce7;
  color: #15803d;
}

.badge.fail {
  background-color: #fee2e2;
  color: #b91c1c;
}
.badge.empty {
  background-color: #efefef;
  color: #666666;
}

.score-table thead tr th.table-poin-siswa-nama {
  min-width: 200px;
  max-width: 200px;
}
.score-table thead tr th.table-poin-siswa-kelas {
  min-width: 75px;
  max-width: 75px;
}
.score-table thead tr th.table-poin-siswa-sekolah {
  min-width: 200px;
  max-width: 200px;
}

.score-table thead tr th.table-poin-siswa-paket-soal {
  min-width: 200px;
  max-width: 200px;
}
.score-table thead tr th.table-poin-siswa-total-poin {
  min-width: 100px;
  max-width: 100px;
}
.score-table .table-poin-siswa-total-poin {
  font-weight: bold;
}

.score-table .kolom-total {
  font-weight: bold;
}
.score-table .kolom-total-judul {
  text-align: right;
}


/* Fullscreen Overlay */
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* Sits on top of other links */
}

.modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dims background */
}

/* Centered Pop-up Box */
.modal-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.modal-box p {
  font-weight: bolder;
  margin-bottom: 0;
}

/* Close Button */
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

/* Prevents Background Scrolling */
.no-scroll {
    overflow: hidden;
}

#tombol-download-tabel {
  margin: 2em;
}


/* Halaman detail artikel, pertanyaan & soal */
.bungkus-siswa {
  background-color: #fafafa; /* Light yellow */
  border: 1px dashed #cacaca; /* Dark yellow/orange */

  padding: 1em;
}
.bungkus-siswa .bungkus-siswa-nama {
  font-weight: bold;
}

.bungkus-jawaban {
  border: 1px solid #dadada;
}
.bungkus-jawaban > ul {
  padding-inline-start: 0;
}
.bungkus-jawaban > ul > li {
  list-style-type: none;
}

.bungkus-jawaban .detail-jawaban {
  overflow: hidden;
  padding: 20px;
}
.bungkus-jawaban .detail-jawaban-siswa {
  float: left;
  width: 15%;
  font-weight: bold;
}
.bungkus-jawaban .detail-jawaban-benar {
  float: left;
  width: 85%;
  border: 1px solid #cacaca;
  padding: 20px;
  background: #ffffff;
}
.bungkus-jawaban .detail-jawaban-pilihan {
  float: left;
  width: 100%;

}

.bungkus-jawaban .pilihan-siswa {
  background-color: #fff9e6;
}
.bungkus-jawaban .teks-tanda-jawaban-siswa-benar {
  background-color: #388E3C;
  color: #ffffff;
  border-radius: 8px;
  padding: 5px 12px;
  margin-top: 0.5em;
  display: inline-block;
  font-size: 13px;
}
.bungkus-jawaban .teks-tanda-jawaban-siswa-salah {
  background-color: #c82333;
  color: #ffffff;
  border-radius: 8px;
  padding: 5px 12px;
  margin-top: 0.5em;
  display: inline-block;
  font-size: 13px;
}

.bungkus-jawaban .pilihan-benar {
  background-color: #ffffff;
  border: 1px solid #0076cc;
}
.bungkus-jawaban .teks-tanda-jawaban-benar {
  background-color: #ffffff;
  border: 2px solid #0076cc;
  color: #0076cc;
  border-radius: 8px;
  display: inline-block;
  margin-bottom: 1em;
  padding: 5px 12px;
  font-size: 14px;
  font-weight: bold;
}



.bungkus-jawaban .teks-pilihan-abjad {
  background-color: #666666;
  border-radius: 100%;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  display: inline-block;
  padding: 5px;
  margin-bottom: 1em;
  margin-right: 0.5em;
  width: 31px;
  height: 31px;
  line-height: normal;
  text-align: center;
}

/* tabel rekap aktivitas Materi */
.rekap-aktivitas-table {
  font-weight: bold;
  margin-bottom: 40px;
}
.rekap-aktivitas-table th.text-center,
.rekap-aktivitas-table td.text-center {
  text-align: center;
}

/* halaman detail pertanyaan */
.bungkus-sekolah {

}
.bungkus-sekolah h2 {
  font-size: 20px;
}
.bungkus-sekolah h3 {
  font-size: 20px;
}

.bungkus-isian-siswa {
  border: 1px solid #dadada;
  overflow: hidden;
}
.bungkus-isian-siswa > ul {
  padding-inline-start: 0;
  overflow: hidden;
}
.bungkus-isian-siswa > ul > li {
  list-style-type: none;
  overflow: hidden;
  border-bottom: 1px solid #dadada;
}
.bungkus-isian-siswa > ul > li:last-child {
  border-bottom: none;
}
.bungkus-isian-siswa .isian-siswa-nama {
  float: left;
  width: 20%;
  font-weight: bold;
  padding: 20px;
  /*border-right: 1px solid #dadada;*/
}
.bungkus-isian-siswa .isian-siswa-jawaban {
  float: left;
  width: 80%;
  /*border: 1px solid #cacaca;*/
  padding: 20px;
  background: #ffffff;
}

/* Tabel data siswa */
.bungkus-data-siswa h2 {
  font-size: 24px;
}
.tabel-data-siswa {
  width: auto;
  border: none;
}
.tabel-data-siswa tr,
.tabel-data-siswa td {
  border: none;
  font-weight: bold;
}
.tabel-data-siswa .tabel-data-siswa-judul {
  padding-left: 0;
}

.data-siswa-link-subbab {
  font-weight: bold !important;
  margin: 0 20px 20px 0;
}
.subbab-isian-siswa-jawaban {
  border: 1px solid #cacaca;
  padding: 20px;
  background: #ffffff;
  margin-bottom: 6em !important;
}