/* ============================================================
   jadwal-map — style.css
   MKP FISIPOL UGM palette: navy #244C7D, blue #0677B7,
   gold #FFB400, text #323232, card #fff, bg #F4F6F8.
   Rules: BEM-ish .jsd-* classes, NO `>` child combinators,
   NO :has(). Elementor-safe.
   ============================================================ */

:root {
  --jsd-navy: #244C7D;
  --jsd-navy-dark: #1E3F6B;
  --jsd-blue: #0677B7;
  --jsd-gold: #FFB400;
  --jsd-gold-dark: #E6A300;
  --jsd-text: #323232;
  --jsd-muted: #6B7A90;
  --jsd-bg: #F4F6F8;
  --jsd-card: #FFFFFF;
  --jsd-border: #E3E8EF;
  --jsd-danger: #B3402E;
  --jsd-radius: 10px;
  --jsd-shadow: 0 1px 2px rgba(16, 42, 67, 0.05), 0 1px 6px rgba(16, 42, 67, 0.04);
  --jsd-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--jsd-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--jsd-text);
  background: var(--jsd-bg);
}

h1, h2, h3, p { margin-top: 0; }

button { font-family: inherit; }

/* ---------- Header ---------- */

.jsd-header {
  background: var(--jsd-navy);
  color: #fff;
}

.jsd-header::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--jsd-gold);
}

.jsd-header__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.jsd-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.jsd-brand__mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  background: var(--jsd-navy-dark);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
}

/* UGM white-line symbol mark: fills the navy rounded tile without
   distortion (object-fit: contain — no crop, no stretch). */
.jsd-brand__mark-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.jsd-brand__title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.3;
}

.jsd-brand__sub {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: #C7D6E8;
}

.jsd-header__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- Buttons ---------- */

.jsd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--jsd-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.jsd-btn:hover { background: var(--jsd-navy-dark); }

.jsd-btn:active { transform: translateY(1px); }

.jsd-btn:focus-visible {
  outline: 2px solid var(--jsd-gold);
  outline-offset: 2px;
}

.jsd-btn--ghost {
  background: #fff;
  border-color: #D5DDE6;
  color: var(--jsd-navy);
}

.jsd-btn--ghost:hover {
  border-color: var(--jsd-navy);
  background: #F7FAFD;
}

.jsd-btn--gold {
  background: var(--jsd-gold);
  color: #3A2E00;
}

.jsd-btn--gold:hover { background: var(--jsd-gold-dark); }

.jsd-btn--danger-ghost {
  background: #fff;
  border-color: #E8D3CE;
  color: var(--jsd-danger);
}

.jsd-btn--danger-ghost:hover {
  border-color: var(--jsd-danger);
  background: #FBF0EE;
}

.jsd-btn--small {
  padding: 5px 11px;
  font-size: 12.5px;
  border-radius: 6px;
}

.jsd-btn--header {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  padding: 8px 12px;
  font-size: 13px;
}

.jsd-btn--header:hover { background: rgba(255, 255, 255, 0.18); }

.jsd-btn--header-danger { color: #FFD9D1; }

.jsd-btn--header-danger:hover { background: rgba(255, 120, 90, 0.18); }

.jsd-link-btn {
  background: none;
  border: none;
  color: var(--jsd-blue);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.jsd-link-btn:hover { background: #EAF4FB; }

.jsd-link-btn--danger { color: var(--jsd-danger); }

.jsd-link-btn--danger:hover { background: #FBEFED; }

.jsd-link-btn:disabled {
  opacity: 0.4;
  cursor: default;
  background: none;
}

/* ---------- Tabs ---------- */

.jsd-tabs {
  display: flex;
  gap: 4px;
  background: #fff;
  border-bottom: 1px solid var(--jsd-border);
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 30;
  overflow-x: auto;
}

.jsd-tab {
  appearance: none;
  border: none;
  background: none;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--jsd-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.jsd-tab:hover { color: var(--jsd-navy); }

.jsd-tab.is-active {
  color: var(--jsd-navy);
  border-bottom-color: var(--jsd-gold);
}

.jsd-tab:focus-visible {
  outline: 2px solid var(--jsd-gold);
  outline-offset: -2px;
}

/* ---------- Layout ---------- */

.jsd-main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 24px 84px;
}

.jsd-pane { display: none; }

.jsd-pane.is-active { display: block; }

/* ---------- Cards ---------- */

.jsd-card {
  background: var(--jsd-card);
  border: 1px solid var(--jsd-border);
  border-radius: var(--jsd-radius);
  box-shadow: var(--jsd-shadow);
  margin-bottom: 20px;
  overflow: hidden;
}

.jsd-card__head {
  padding: 15px 20px;
  border-bottom: 1px solid var(--jsd-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.jsd-card__head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--jsd-navy);
}

.jsd-card__body { padding: 20px; }

/* Split exam inputs: "Ujian Tesis" and "Seminar Proposal" cards sit
   side by side on wide screens, stacked on narrow ones. */
.jsd-exam-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.jsd-exam-inputs .jsd-card { margin-bottom: 0; }

.jsd-exam-inputs .jsd-textarea { min-height: 220px; }

@media (max-width: 900px) {
  .jsd-exam-inputs { grid-template-columns: 1fr; }
  .jsd-exam-inputs .jsd-card { margin-bottom: 20px; }
  .jsd-exam-inputs .jsd-card:last-child { margin-bottom: 0; }
}

.jsd-hint {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--jsd-muted);
}

.jsd-hint code {
  background: #EEF3F8;
  border: 1px solid #DDE5EE;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
  color: var(--jsd-navy);
}

/* ---------- Forms ---------- */

.jsd-input,
.jsd-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--jsd-text);
  background: #FBFCFE;
  border: 1px solid #D5DDE6;
  border-radius: 8px;
  padding: 11px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.jsd-input:focus,
.jsd-textarea:focus {
  outline: none;
  border-color: var(--jsd-blue);
  box-shadow: 0 0 0 3px rgba(6, 119, 183, 0.14);
}

.jsd-textarea {
  min-height: 200px;
  resize: vertical;
  line-height: 1.55;
}

.jsd-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.jsd-media-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.jsd-media-form .jsd-input { flex: 1 1 260px; }

/* ---------- Manual input forms ---------- */

.jsd-card--manual .jsd-card__body { padding-top: 16px; }

.jsd-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.jsd-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.jsd-field--wide { grid-column: 1 / -1; }

.jsd-field__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--jsd-navy);
  letter-spacing: 0.02em;
}

.jsd-manual-optional {
  margin-top: 14px;
  border: 1px dashed #D5DDE6;
  border-radius: 8px;
  padding: 10px 14px;
  background: #FBFCFE;
}

.jsd-manual-optional summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--jsd-blue);
  list-style: none;
}

.jsd-manual-optional summary::-webkit-details-marker { display: none; }

.jsd-manual-optional[open] summary { margin-bottom: 10px; }

.jsd-manual-block { margin-top: 14px; }

.jsd-manual-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.jsd-manual-block__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jsd-navy);
}

.jsd-mrows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jsd-mrow {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.7fr auto;
  gap: 8px;
  align-items: center;
}

.jsd-mrow--single { grid-template-columns: 1fr auto; }

.jsd-media-upload {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #D5DDE6;
}

.jsd-hint--upload { margin: 8px 0 0; }

.jsd-file {
  font-family: inherit;
  font-size: 13px;
  color: var(--jsd-text);
  background: #FBFCFE;
  border: 1px solid #D5DDE6;
  border-radius: 8px;
  padding: 9px 12px;
  width: 100%;
}

/* ---------- Warnings ---------- */

.jsd-warnings {
  margin-top: 14px;
  border: 1px solid #E9C9A8;
  background: #FDF6EC;
  border-radius: 8px;
  padding: 12px 16px;
}

.jsd-warnings__title {
  font-weight: 700;
  color: #8A5A1E;
  font-size: 13px;
  margin-bottom: 6px;
}

.jsd-warnings ul {
  margin: 0;
  padding-left: 18px;
}

.jsd-warnings li {
  font-size: 12.5px;
  color: #7A6240;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-word;
}

/* ---------- Tables ---------- */

.jsd-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border: 1px solid var(--jsd-border);
  border-radius: 8px;
}

.jsd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 680px;
}

/* Schedule table (Jadwal Perkuliahan). The Jam column gets a fixed,
   comfortable width (150px) and never wraps; Mata Kuliah stays
   flexible with a generous min-width and wraps long names; Dosen /
   Ruang / Semester get comfortable min-widths; Aksi stays compact.
   table-layout: auto so columns size to content but respect the
   min-widths. The table itself is min-width 1100px so it never
   squeezes — on narrower viewports the .jsd-tablewrap scrolls
   horizontally instead of letting cells collide. Separate borders
   keep the sticky first column opaque while scrolling. */
.jsd-table--schedule {
  min-width: 1100px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

.jsd-table--schedule th:first-child,
.jsd-table--schedule td:first-child {
  position: sticky;
  left: 0;
}

.jsd-table--schedule th:first-child { z-index: 3; }
.jsd-table--schedule td:first-child { z-index: 2; background: #fff; }

.jsd-table--schedule .jsd-cell--time {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jsd-table--schedule td:nth-child(2) { min-width: 300px; } /* Mata Kuliah — flexible, wraps long names */
.jsd-table--schedule td:nth-child(3) { min-width: 200px; } /* Nama Dosen */
.jsd-table--schedule td:nth-child(4) { min-width: 160px; } /* Ruang Kuliah */
.jsd-table--schedule td:nth-child(5) { min-width: 160px; } /* Semester/Angkatan */
.jsd-table--schedule td:nth-child(6) { width: 1%; min-width: 90px; white-space: nowrap; } /* Aksi */

.jsd-table th {
  background: var(--jsd-navy);
  color: #fff;
  text-align: left;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.jsd-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}

.jsd-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--jsd-border);
  vertical-align: middle;
  color: var(--jsd-text);
}

.jsd-table td:first-child {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
}

.jsd-table tr:last-child td { border-bottom: none; }

.jsd-cell {
  min-width: 120px;
  cursor: text;
  word-break: break-word;
}

.jsd-cell--time {
  color: var(--jsd-blue);
  font-weight: 600;
  white-space: nowrap;
  min-width: 96px;
}

.jsd-cell--no {
  color: var(--jsd-muted);
  text-align: center;
  white-space: nowrap;
  min-width: 40px;
}

.jsd-cell--actions {
  white-space: nowrap;
  width: 1%;
}

/* Editable affordance */
.jsd-cell[contenteditable="true"]:hover,
.jsd-day__title[contenteditable="true"]:hover,
.jsd-slot__time[contenteditable="true"]:hover,
.jsd-exam__title[contenteditable="true"]:hover,
.jsd-exam__meta-value[contenteditable="true"]:hover,
.jsd-media__url[contenteditable="true"]:hover {
  background: #F6F9FD;
}

.jsd-cell[contenteditable="true"]:focus,
.jsd-day__title[contenteditable="true"]:focus,
.jsd-slot__time[contenteditable="true"]:focus,
.jsd-exam__title[contenteditable="true"]:focus,
.jsd-exam__meta-value[contenteditable="true"]:focus,
.jsd-media__url[contenteditable="true"]:focus {
  background: #FFFDF5;
  outline: 2px solid var(--jsd-gold);
  outline-offset: -2px;
  border-radius: 4px;
}

/* Placeholder text inside empty editable fields */
.jsd-cell[data-placeholder]:empty::before,
.jsd-day__title[data-placeholder]:empty::before,
.jsd-slot__time[data-placeholder]:empty::before,
.jsd-exam__title[data-placeholder]:empty::before,
.jsd-exam__meta-value[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: #9AA7B5;
  font-style: italic;
  font-weight: 400;
}

/* ---------- Schedule day groups ---------- */

.jsd-day {
  background: #fff;
  border: 1px solid var(--jsd-border);
  border-radius: var(--jsd-radius);
  box-shadow: var(--jsd-shadow);
  margin-bottom: 20px;
  overflow: hidden;
}

.jsd-day__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 18px;
  background: #F0F5FA;
  border-bottom: 1px solid var(--jsd-border);
  border-left: 4px solid var(--jsd-navy);
}

.jsd-day__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--jsd-navy);
  letter-spacing: 0.3px;
  word-break: break-word;
  cursor: text;
}

.jsd-day__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.jsd-day__body { padding: 14px 18px 18px; }

.jsd-slot { margin-bottom: 14px; }

.jsd-slot:last-child { margin-bottom: 0; }

.jsd-slot__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: #FAFBFD;
  border: 1px solid var(--jsd-border);
  border-radius: 8px 8px 0 0;
}

.jsd-slot__time {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--jsd-navy);
  background: #EAF3FB;
  border-radius: 6px;
  padding: 4px 12px;
  cursor: text;
  min-width: 90px;
}

.jsd-slot__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.jsd-slot__empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed #CBD5E1;
  border-radius: 0 0 8px 8px;
  font-size: 13px;
  color: var(--jsd-muted);
  text-align: center;
}

/* ---------- Exam cards ---------- */

.jsd-exam {
  background: #fff;
  border: 1px solid var(--jsd-border);
  border-radius: var(--jsd-radius);
  box-shadow: var(--jsd-shadow);
  margin-bottom: 20px;
  overflow: hidden;
}

.jsd-exam__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 18px;
  background: #F0F5FA;
  border-bottom: 1px solid var(--jsd-border);
  border-left: 4px solid var(--jsd-gold);
}

.jsd-exam__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--jsd-navy);
  letter-spacing: 0.3px;
  word-break: break-word;
  cursor: text;
}

.jsd-exam__actions { display: flex; gap: 8px; }

/* Exam type badge (Ujian Tesis / Seminar Proposal) in the card head */

.jsd-exam__titlewrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1 1 auto;
}

.jsd-exam__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.jsd-exam__type--tesis {
  background: var(--jsd-navy);
  color: #fff;
}

.jsd-exam__type--seminar {
  background: #FFF4D6;
  border: 1px solid var(--jsd-gold);
  color: #6B4E00;
}

/* Segmented control: Semua / Ujian Tesis / Seminar Proposal */

.jsd-exam-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 6px;
  background: #EEF3F8;
  border: 1px solid var(--jsd-border);
  border-radius: 10px;
}

.jsd-exam-filter__btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--jsd-navy);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.jsd-exam-filter__btn:hover { background: rgba(255, 255, 255, 0.7); }

.jsd-exam-filter__btn.is-active {
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 42, 67, 0.16);
  border-color: #D5DDE6;
}

.jsd-exam-filter__btn:focus-visible {
  outline: 2px solid var(--jsd-gold);
  outline-offset: 1px;
}

.jsd-exam-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--jsd-navy);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
}

.jsd-exam-filter__btn.is-active .jsd-exam-filter__count {
  background: var(--jsd-gold);
  color: #3A2E00;
}

.jsd-exam-filter__none {
  margin: 0;
  padding: 18px;
  border: 1.5px dashed #CBD5E1;
  border-radius: 8px;
  color: var(--jsd-muted);
  font-size: 13.5px;
  text-align: center;
  background: #FBFCFE;
}

/* Dosen Penguji — highlighted pill group in the exam editor */

.jsd-exam__penguji {
  margin-top: 16px;
  border: 1px solid #D8E4F0;
  border-radius: 10px;
  background: #FBFCFE;
  overflow: hidden;
}

.jsd-exam__penguji-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(36, 76, 125, 0.06), rgba(36, 76, 125, 0.02));
  border-left: 4px solid var(--jsd-gold);
  border-bottom: 1px solid var(--jsd-border);
}

.jsd-exam__penguji-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-variant: small-caps;
  color: var(--jsd-navy);
}

.jsd-exam__penguji-hint {
  font-size: 12px;
  color: var(--jsd-muted);
}

.jsd-exam__penguji-head .jsd-btn { margin-left: auto; }

.jsd-exam__penguji-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
}

.jsd-exam__penguji-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--jsd-navy);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--jsd-navy);
}

.jsd-exam__penguji-ico {
  display: inline-flex;
  color: var(--jsd-gold);
  line-height: 0;
}

.jsd-exam__penguji-empty {
  color: var(--jsd-muted);
  font-size: 13px;
  font-style: italic;
}

.jsd-exam__penguji-editrow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

.jsd-exam__penguji-edit {
  flex: 1 1 320px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--jsd-text);
  border: 1px solid #D5DDE6;
  border-radius: 8px;
  padding: 9px 12px;
  resize: vertical;
  min-height: 54px;
  background: #fff;
}

.jsd-exam__penguji-edit:focus {
  outline: none;
  border-color: var(--jsd-blue);
  box-shadow: 0 0 0 3px rgba(6, 119, 183, 0.14);
}

.jsd-exam__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px 20px;
  padding: 13px 18px;
  background: #FBFCFE;
  border-bottom: 1px solid var(--jsd-border);
  font-size: 13px;
}

.jsd-exam__meta-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.jsd-exam__meta-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--jsd-navy);
  white-space: nowrap;
}

.jsd-exam__meta-value {
  color: var(--jsd-text);
  word-break: break-all;
  cursor: text;
  border-radius: 4px;
  padding: 0 3px;
  min-width: 40px;
}

.jsd-link-out {
  font-size: 12px;
  font-weight: 600;
  color: var(--jsd-blue);
  text-decoration: none;
  margin-left: 4px;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: baseline;
}

.jsd-link-out:hover { color: var(--jsd-navy); text-decoration: underline; }

.jsd-link-out.is-disabled {
  color: #A9B4C2;
  border-bottom-color: transparent;
  pointer-events: none;
}

.jsd-exam__body { padding: 14px 18px 18px; }

/* Exam editor table: wider min-width for the extra Dosen Pembimbing
   column; Nama Mahasiswa and Dosen Pembimbing get comfortable floors. */
.jsd-exam__body .jsd-table { min-width: 880px; }
.jsd-exam__body .jsd-table td:nth-child(3) { min-width: 250px; }
.jsd-exam__body .jsd-table td:nth-child(4) { min-width: 230px; }
.jsd-exam__body .jsd-table th:nth-child(4) { white-space: normal; }

.jsd-exam__cell-date {
  font-weight: 600;
  color: var(--jsd-navy);
  white-space: nowrap;
}

.jsd-exam__cell-time {
  font-size: 12px;
  color: var(--jsd-muted);
  white-space: nowrap;
}

.jsd-exam__empty {
  margin: 0 0 12px;
  padding: 14px;
  border: 1px dashed #CBD5E1;
  border-radius: 8px;
  font-size: 13px;
  color: var(--jsd-muted);
  text-align: center;
}

.jsd-exam__add { margin-top: 12px; }

/* ---------- Media ---------- */

.jsd-media {
  background: #fff;
  border: 1px solid var(--jsd-border);
  border-radius: var(--jsd-radius);
  box-shadow: var(--jsd-shadow);
  margin-bottom: 20px;
  overflow: hidden;
}

.jsd-media__preview {
  position: relative;
  background: #0B1524;
}

.jsd-media__preview iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #0B1524;
}

.jsd-media__preview img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: contain;
  background: #EAF1F8;
}

.jsd-media__img-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 230px;
  color: #8FA0B4;
  background: #EEF3F8;
  font-size: 13px;
}

.jsd-media__overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  pointer-events: none;
}

.jsd-media__overlay .jsd-btn { pointer-events: auto; }

.jsd-media__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--jsd-border);
}

.jsd-media__url {
  flex: 1 1 220px;
  min-width: 0;
  font-size: 12.5px;
  color: var(--jsd-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: text;
}

.jsd-media__actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.jsd-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.jsd-badge--youtube { background: #FDEBE9; color: #B23B2E; }

.jsd-badge--image { background: #EAF3FB; color: var(--jsd-blue); }

/* ---------- Empty state ---------- */

.jsd-empty {
  border: 1.5px dashed #CBD5E1;
  border-radius: var(--jsd-radius);
  padding: 48px 24px;
  text-align: center;
  background: #FBFCFE;
}

.jsd-empty__icon {
  color: var(--jsd-blue);
  opacity: 0.55;
  margin-bottom: 12px;
}

.jsd-empty h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--jsd-navy);
}

.jsd-empty p {
  margin: 0;
  font-size: 13.5px;
  color: var(--jsd-muted);
}

/* ---------- Toast ---------- */

.jsd-toast {
  position: fixed;
  right: 20px;
  bottom: 68px;
  max-width: 360px;
  background: #1F3A5F;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  border-left: 4px solid var(--jsd-gold);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(16, 42, 67, 0.25);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 100;
}

.jsd-toast.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Status bar ---------- */

.jsd-statusbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--jsd-border);
  padding: 9px 24px;
  font-size: 12.5px;
  color: var(--jsd-muted);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  z-index: 40;
}

.jsd-statusbar__mode { font-weight: 600; color: var(--jsd-blue); }

.jsd-statusbar__mode--warn { color: var(--jsd-danger); }

/* ---------- Sync pill & popover ---------- */

.jsd-sync {
  position: relative;
}

.jsd-sync__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.jsd-sync__pill:hover { background: rgba(255, 255, 255, 0.18); }

.jsd-sync__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9AA7B8;
  flex: 0 0 8px;
}

.jsd-sync__pill--synced .jsd-sync__dot { background: #35C077; }

.jsd-sync__pill--saving .jsd-sync__dot { background: var(--jsd-gold); }

.jsd-sync__pill--login .jsd-sync__dot,
.jsd-sync__pill--error .jsd-sync__dot { background: #FF6B5E; }

.jsd-sync__pill--login,
.jsd-sync__pill--error { border-color: rgba(255, 107, 94, 0.55); }

.jsd-sync__popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: #fff;
  color: var(--jsd-text);
  border: 1px solid var(--jsd-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(16, 42, 67, 0.18);
  padding: 16px;
  z-index: 60;
}

.jsd-sync__pop-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--jsd-navy);
  margin-bottom: 6px;
}

.jsd-sync__pop-hint {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--jsd-muted);
  line-height: 1.55;
}

.jsd-sync__pop-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.jsd-sync__pop-meta {
  margin: 12px 0 0;
  font-size: 11.5px;
  color: var(--jsd-muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .jsd-main { padding: 14px 14px 76px; }

  .jsd-tabs { padding: 0 8px; }

  .jsd-tab { padding: 12px 12px; font-size: 13px; }

  .jsd-header__inner { padding: 14px 16px; }

  .jsd-header__actions .jsd-btn { padding: 7px 10px; font-size: 12.5px; }

  .jsd-header__actions .jsd-sync__pill { padding: 7px 10px; font-size: 12px; }

  .jsd-card__body { padding: 16px; }

  .jsd-day__head,
  .jsd-slot__head,
  .jsd-exam__head { align-items: flex-start; }

  .jsd-media__bar { align-items: flex-start; }
}

/* ---------- Print ---------- */

@media print {
  @page { margin: 14mm; }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body { background: #fff; font-size: 12px; }

  .jsd-header::before { height: 2px; }

  .jsd-header__inner { padding: 8px 0; }

  .jsd-header__actions,
  .jsd-sync,
  .jsd-tabs,
  .jsd-card--input,
  .jsd-actions,
  .jsd-warnings,
  .jsd-statusbar,
  .jsd-toast,
  .jsd-btn,
  .jsd-link-btn,
  .jsd-media,
  .jsd-empty { display: none !important; }

  .jsd-main { max-width: none; padding: 0; }

  .jsd-pane { display: none !important; }

  .jsd-pane.is-active { display: block !important; }

  .jsd-card,
  .jsd-day,
  .jsd-exam {
    box-shadow: none;
    border: 1px solid #C9D2DC;
    border-radius: 6px;
    margin-bottom: 12px;
    break-inside: avoid;
  }

  .jsd-card__body { padding: 10px; }

  .jsd-day__body,
  .jsd-exam__body { padding: 8px 10px 10px; }

  .jsd-day__head,
  .jsd-exam__head {
    padding: 8px 10px;
    border-left-width: 3px;
  }

  .jsd-day__actions,
  .jsd-slot__actions,
  .jsd-exam__actions,
  .jsd-exam__add,
  .jsd-media__actions { display: none !important; }

  .jsd-table th:first-child,
  .jsd-table td:first-child,
  .jsd-table--schedule th:first-child,
  .jsd-table--schedule td:first-child { position: static; }

  .jsd-table th:last-child,
  .jsd-table td:last-child { display: none; }

  .jsd-tablewrap { border: 1px solid #C9D2DC; }

  .jsd-slot__head { border: 1px solid #C9D2DC; }
  .jsd-exam__meta { padding: 6px 10px; }
}

/* ============================================================
   TAYANGAN — Slideshow mode
   Immersive navy presentation view for campus info screens.
   Rules: no `>` child combinators, no :has(). Elementor-safe.
   ============================================================ */

.jsd-btn--header-gold {
  background: var(--jsd-gold);
  border-color: var(--jsd-gold);
  color: #3A2E00;
}

.jsd-btn--header-gold:hover {
  background: var(--jsd-gold-dark);
  border-color: var(--jsd-gold-dark);
}

.jsd-body--slideshow { overflow: hidden; }

.jsd-slideshow {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  /* UGM presentation template as the stage backdrop (relative URL works
     both from file:// and http://). Slides render as white cards on top. */
  background-color: #F4F6F8;
  background-image: url('../assets/ugm-bg-wide.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--jsd-text);
}

.jsd-slideshow[hidden] { display: none; }

.jsd-slideshow::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--jsd-gold);
}

.jsd-slideshow__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 24px;
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid rgba(36, 76, 125, 0.18);
}

.jsd-slideshow__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.jsd-slideshow__brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 8px;
  background: var(--jsd-navy);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.jsd-slideshow__brand-mark-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.jsd-slideshow__brand-text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--jsd-navy);
}

.jsd-slideshow__bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.jsd-slideshow__speed {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--jsd-navy);
  font-size: 13px;
  font-weight: 600;
}

.jsd-slideshow__speed-select {
  appearance: none;
  background: #fff;
  border: 1px solid rgba(36, 76, 125, 0.35);
  color: var(--jsd-navy);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.jsd-slideshow__btn {
  border: 1px solid rgba(36, 76, 125, 0.35);
  background: #fff;
  color: var(--jsd-navy);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.jsd-slideshow__btn:hover { background: #EEF4FB; }

.jsd-slideshow__btn--close {
  background: var(--jsd-gold);
  border-color: var(--jsd-gold);
  color: #3A2E00;
}

.jsd-slideshow__btn--close:hover {
  background: var(--jsd-gold-dark);
  border-color: var(--jsd-gold-dark);
}

.jsd-slideshow__btn:focus-visible,
.jsd-slideshow__nav:focus-visible,
.jsd-slideshow__speed-select:focus-visible {
  outline: 2px solid var(--jsd-gold);
  outline-offset: 2px;
}

.jsd-slideshow__stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 32px;
  overflow: hidden;
}

.jsd-slideshow__stage.is-bleed { padding: 0; }

.jsd-slideshow__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px 24px;
  background: rgba(255, 255, 255, 0.86);
  border-top: 1px solid rgba(36, 76, 125, 0.18);
  position: relative;
}

.jsd-slideshow.is-empty .jsd-slideshow__controls { display: none; }

.jsd-slideshow__nav {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(36, 76, 125, 0.35);
  background: #fff;
  color: var(--jsd-navy);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.jsd-slideshow__nav:hover { background: #EEF4FB; }

.jsd-slideshow__counter {
  min-width: 96px;
  text-align: center;
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 800;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--jsd-navy);
  transition: color 0.2s ease;
}

.jsd-slideshow.is-paused .jsd-slideshow__counter { color: var(--jsd-gold-dark); }

.jsd-slideshow__hint {
  position: absolute;
  right: 24px;
  font-size: 12px;
  color: var(--jsd-muted);
  letter-spacing: 0.3px;
}

/* ---------- Hide-controls toggle ---------- */

/* Floating pill in the bottom-right corner. Sits just above the bottom
   controls bar while visible; drops into the corner when hidden. */
.jsd-slideshow__hide {
  position: absolute;
  right: 20px;
  bottom: 96px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(36, 76, 125, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--jsd-navy);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 42, 67, 0.18);
  z-index: 210;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.jsd-slideshow__hide:hover {
  background: rgba(255, 255, 255, 0.95);
}

.jsd-slideshow__hide:focus-visible {
  outline: 2px solid var(--jsd-gold);
  outline-offset: 2px;
}

/* Hide mode: top bar + bottom controls disappear, slide gets more
   room, and the toggle stays as a subtler corner pill. */
.jsd-slideshow.is-controls-hidden .jsd-slideshow__bar,
.jsd-slideshow.is-controls-hidden .jsd-slideshow__controls {
  display: none;
}

.jsd-slideshow.is-controls-hidden .jsd-show-slide {
  max-height: calc(100vh - 64px);
}

.jsd-slideshow.is-controls-hidden .jsd-slideshow__hide {
  bottom: 20px;
  background: rgba(255, 255, 255, 0.55);
  opacity: 0.85;
}

.jsd-slideshow.is-controls-hidden .jsd-slideshow__hide:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.92);
}

/* ---------- Slides ---------- */

.jsd-show-slide {
  width: min(1240px, 92vw);
  max-height: calc(100vh - 200px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(6, 18, 38, 0.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--jsd-text);
}

.jsd-show-slide__header {
  flex: 0 0 auto;
  padding: 26px 36px 16px;
  border-bottom: 1px solid var(--jsd-border);
  border-left: 6px solid var(--jsd-gold);
  background: #FBFCFE;
}

.jsd-show-slide__kicker {
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--jsd-blue);
}

.jsd-show-slide__title {
  margin: 6px 0 0;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--jsd-navy);
  word-break: break-word;
}

.jsd-show-slide__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  border-radius: 3px;
  background: var(--jsd-gold);
  margin-top: 12px;
}

.jsd-show-slide__body {
  flex: 1 1 auto;
  padding: 22px 36px 30px;
  overflow-y: auto;
}

.jsd-show-note {
  margin: 0;
  padding: 18px;
  border: 1.5px dashed #CBD5E1;
  border-radius: 10px;
  color: var(--jsd-muted);
  text-align: center;
  font-size: clamp(14px, 1.4vw, 17px);
}

/* ---------- Schedule table on slides ---------- */

.jsd-show-tablewrap {
  border: 1px solid var(--jsd-border);
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.jsd-show-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: clamp(14px, 1.6vw, 20px);
}

.jsd-show-table th {
  background: var(--jsd-navy);
  color: #fff;
  text-align: left;
  padding: 13px 16px;
  font-weight: 700;
  font-size: 0.72em;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.jsd-show-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--jsd-border);
  color: var(--jsd-text);
  word-break: break-word;
  vertical-align: top;
}

.jsd-show-table tr:last-child td { border-bottom: none; }

/* Slideshow schedule columns: Jam is fixed-width nowrap (150px), Mata
   Kuliah is flexible with a generous min-width, the rest proportional.
   table-layout: auto with min-width floors means columns grow to fit
   their content — cells can never overlap. On narrow viewports the
   wrap scrolls horizontally instead. */
.jsd-show-table th:nth-child(1),
.jsd-show-table td:nth-child(1) { min-width: 150px; white-space: nowrap; } /* Jam */
.jsd-show-table th:nth-child(2),
.jsd-show-table td:nth-child(2) { min-width: 320px; } /* Mata Kuliah — flexible, wraps */
.jsd-show-table th:nth-child(3),
.jsd-show-table td:nth-child(3) { min-width: 220px; } /* Dosen */
.jsd-show-table th:nth-child(4),
.jsd-show-table td:nth-child(4) { min-width: 160px; } /* Ruang */
.jsd-show-table th:nth-child(5),
.jsd-show-table td:nth-child(5) { min-width: 160px; } /* Semester */

.jsd-show-cell--time {
  color: var(--jsd-blue);
  font-weight: 700;
  white-space: nowrap;
}

/* Dense variant — many rows shrink to fit the slide */

.jsd-show-slide--dense .jsd-show-slide__header { padding: 18px 28px 12px; }
.jsd-show-slide--dense .jsd-show-slide__title { font-size: clamp(24px, 3vw, 34px); }
.jsd-show-slide--dense .jsd-show-slide__title::after { margin-top: 8px; height: 4px; width: 48px; }
.jsd-show-slide--dense .jsd-show-slide__body { padding: 16px 28px 22px; }
.jsd-show-slide--dense .jsd-show-table { font-size: clamp(12px, 1.2vw, 15px); }
.jsd-show-slide--dense .jsd-show-table th { padding: 8px 12px; }
.jsd-show-slide--dense .jsd-show-table td { padding: 8px 12px; }

/* ---------- Split schedule slide (many rows on one date) ----------
   When a date has more than 5 course rows the deck renders TWO
   side-by-side tables (rows split roughly in half) so the slide fits
   the stage without scrolling. Each column keeps the same table
   structure but with compressed min-widths; on narrow screens the
   columns stack and the body may scroll instead. */

.jsd-show-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.jsd-show-slide--split .jsd-show-tablewrap {
  overflow-x: hidden;
  min-width: 0;
}

.jsd-show-slide--split .jsd-show-table {
  width: 100%;
  table-layout: auto;
}

.jsd-show-slide--split .jsd-show-table th,
.jsd-show-slide--split .jsd-show-table td {
  padding: 7px 8px;
}

.jsd-show-slide--split .jsd-show-table th:nth-child(1),
.jsd-show-slide--split .jsd-show-table td:nth-child(1) { min-width: 72px; white-space: nowrap; } /* Jam */
.jsd-show-slide--split .jsd-show-table th:nth-child(2),
.jsd-show-slide--split .jsd-show-table td:nth-child(2) { min-width: 120px; } /* Mata Kuliah — wraps */
.jsd-show-slide--split .jsd-show-table th:nth-child(3),
.jsd-show-slide--split .jsd-show-table td:nth-child(3) { min-width: 88px; } /* Dosen */
.jsd-show-slide--split .jsd-show-table th:nth-child(4),
.jsd-show-slide--split .jsd-show-table td:nth-child(4) { min-width: 64px; } /* Ruang */
.jsd-show-slide--split .jsd-show-table th:nth-child(5),
.jsd-show-slide--split .jsd-show-table td:nth-child(5) { min-width: 64px; } /* Semester */

@media (max-width: 1100px) {
  /* Narrow screens: stack the two halves (each table full width) and
     let the slide body scroll — the side-by-side split is for wide
     screens. */
  .jsd-show-cols {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .jsd-show-slide--split .jsd-show-tablewrap { overflow-x: auto; }
}

/* ---------- Exam slide ---------- */

.jsd-show-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.jsd-show-pill {
  background: #EEF4FB;
  border: 1px solid #D8E4F0;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: clamp(13px, 1.3vw, 17px);
}

.jsd-show-pill__label {
  font-weight: 800;
  color: var(--jsd-navy);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 0.8em;
  margin-right: 8px;
}

.jsd-show-pill__value {
  color: var(--jsd-text);
  font-weight: 600;
  word-break: break-all;
}

/* Exam type badge on slideshow exam slides */

.jsd-show-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 999px;
}

.jsd-show-type--tesis {
  background: var(--jsd-navy);
  color: #fff;
}

.jsd-show-type--seminar {
  background: #FFF4D6;
  border: 2px solid var(--jsd-gold);
  color: #6B4E00;
}

/* Dosen Penguji — highlighted pills on slideshow exam slides */

.jsd-show-penguji {
  margin: 0 0 22px;
  border-top: 3px solid var(--jsd-gold);
  padding-top: 12px;
}

.jsd-show-penguji__title {
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-variant: small-caps;
  color: var(--jsd-navy);
  margin-bottom: 10px;
}

.jsd-show-penguji__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.jsd-show-penguji__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--jsd-navy);
  color: #fff;
  font-size: clamp(13px, 1.4vw, 18px);
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
}

.jsd-show-penguji__ico {
  display: inline-flex;
  color: var(--jsd-gold);
  line-height: 0;
}

.jsd-show-students {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  counter-reset: jsd-show-std;
}

.jsd-show-students__item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--jsd-border);
  counter-increment: jsd-show-std;
}

.jsd-show-students__item::before {
  content: counter(jsd-show-std, decimal-leading-zero);
  font-weight: 800;
  color: var(--jsd-gold);
  font-size: clamp(16px, 1.8vw, 22px);
  min-width: 40px;
}

.jsd-show-students__name {
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 700;
  color: var(--jsd-navy);
  word-break: break-word;
}

.jsd-show-students__examiner {
  font-size: clamp(13px, 1.3vw, 17px);
  color: var(--jsd-muted);
}

.jsd-show-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.jsd-show-link {
  color: var(--jsd-blue);
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(13px, 1.4vw, 17px);
  word-break: break-all;
}

.jsd-show-link:hover {
  color: var(--jsd-navy);
  text-decoration: underline;
}

.jsd-show-link.is-disabled {
  color: #A9B4C2;
  pointer-events: none;
}

/* ---------- Media slide (full-bleed) ---------- */

.jsd-show-slide--media {
  width: 100%;
  max-height: none;
  height: 100%;
  background: #0B1524;
  border-radius: 0;
  box-shadow: none;
}

.jsd-show-media {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jsd-show-media__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.jsd-show-media__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #8FA0B4;
  background: #141F33;
  font-size: clamp(14px, 1.6vw, 20px);
}

.jsd-show-slide--video .jsd-show-media { padding: 20px; }

.jsd-show-media__frame {
  width: min(100%, calc((100vh - 200px) * 1.7778));
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
  border-radius: 8px;
}

/* ---------- Slideshow empty state ---------- */

.jsd-show-empty {
  text-align: center;
  max-width: 560px;
}

.jsd-show-empty__icon {
  color: var(--jsd-gold);
  opacity: 0.85;
  margin-bottom: 16px;
}

.jsd-show-empty h3 {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  color: var(--jsd-navy);
}

.jsd-show-empty p {
  margin: 0;
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--jsd-muted);
}

/* ---------- Slideshow responsive ---------- */

@media (max-width: 640px) {
  .jsd-slideshow__bar { padding: 12px 14px; }
  .jsd-slideshow__stage { padding: 16px 12px; }
  .jsd-slideshow__hint { display: none; }
  .jsd-slideshow__nav { width: 44px; height: 44px; font-size: 24px; }
  .jsd-slideshow__hide { right: 14px; bottom: 92px; }
  .jsd-slideshow.is-controls-hidden .jsd-slideshow__hide { bottom: 14px; }
  .jsd-slideshow__refresh { right: 64px; bottom: 14px; }
  .jsd-show-slide__header { padding: 18px 20px 12px; }
  .jsd-show-slide__body { padding: 16px 20px 22px; }
  .jsd-show-slide--dense .jsd-show-slide__header { padding: 14px 18px 10px; }
  .jsd-show-slide--dense .jsd-show-slide__body { padding: 12px 18px 18px; }
}

@media print {
  .jsd-slideshow { display: none !important; }
}

/* ============================================================
   REKAP — statistics & report panel
   ============================================================ */

.jsd-rekap-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.jsd-rekap-card {
  background: #fff;
  border: 1px solid var(--jsd-border);
  border-radius: var(--jsd-radius);
  box-shadow: var(--jsd-shadow);
  padding: 14px 16px;
  border-top: 3px solid var(--jsd-gold);
}

.jsd-rekap-card__value {
  font-size: 26px;
  font-weight: 800;
  color: var(--jsd-navy);
  line-height: 1.2;
}

.jsd-rekap-card__label {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--jsd-muted);
}

.jsd-rekap-section { margin-bottom: 24px; }

.jsd-rekap-section__title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--jsd-navy);
  border-left: 3px solid var(--jsd-gold);
  padding-left: 10px;
}

.jsd-table--rekap { min-width: 520px; }

.jsd-table--rekap td {
  padding: 9px 12px;
  vertical-align: top;
}

.jsd-table--rekap .jsd-rekap-cell--name {
  font-weight: 600;
  color: var(--jsd-text);
  white-space: normal;
}

@media (max-width: 640px) {
  .jsd-table--rekap { min-width: 420px; }
}

/* ============================================================
   LOGIN MODAL & VIEW-ONLY MODE
   ============================================================ */

/* Utility: hides any element (edit controls in view-only mode).
   !important so it always wins over display rules. */
.is-hidden { display: none !important; }

.jsd-body--login { overflow: hidden; }

.jsd-login-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.jsd-login-modal[hidden] { display: none; }

.jsd-login-modal__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(15, 34, 58, 0.62);
  backdrop-filter: blur(2px);
}

.jsd-login-modal__card {
  position: relative;
  width: 380px;
  max-width: 100%;
  background: #fff;
  border-radius: 14px;
  padding: 30px 28px 22px;
  box-shadow: 0 24px 60px rgba(6, 18, 38, 0.4);
  text-align: center;
  border-top: 4px solid var(--jsd-gold);
}

.jsd-login-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--jsd-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.jsd-login-modal__close:hover {
  color: var(--jsd-text);
  background: #F2F5F9;
}

.jsd-login-modal__mark {
  width: 54px;
  height: 54px;
  object-fit: contain;
  margin-bottom: 8px;
}

.jsd-login-modal__title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 800;
  color: var(--jsd-navy);
}

.jsd-login-modal__hint {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--jsd-muted);
}

.jsd-login-modal__form { text-align: left; }

.jsd-login-modal__submit {
  width: 100%;
  margin-top: 14px;
  background: var(--jsd-gold);
  color: #3A2E00;
}

.jsd-login-modal__submit:hover { background: var(--jsd-gold-dark); }

.jsd-login-modal__error {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #FBF0EE;
  border: 1px solid #E8D3CE;
  color: var(--jsd-danger);
  font-size: 13px;
  font-weight: 600;
}

.jsd-login-modal__close-hint {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--jsd-muted);
}

/* ---------- Logout button (header) ---------- */

.jsd-btn--logout { color: #FFD9D1; }

.jsd-btn--logout:hover { background: rgba(255, 120, 90, 0.18); }

/* ---------- Slideshow manual refresh (kiosk mode, ?slideshow=1) ---------- */

.jsd-slideshow__refresh {
  position: absolute;
  right: 70px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(36, 76, 125, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--jsd-navy);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 42, 67, 0.18);
  z-index: 210;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.jsd-slideshow__refresh[hidden] { display: none; }

.jsd-slideshow__refresh:hover { background: rgba(255, 255, 255, 0.95); }

.jsd-slideshow__refresh:focus-visible {
  outline: 2px solid var(--jsd-gold);
  outline-offset: 2px;
}

.jsd-slideshow.is-controls-hidden .jsd-slideshow__refresh {
  opacity: 0.85;
}

.jsd-slideshow.is-controls-hidden .jsd-slideshow__refresh:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.92);
}