/* Portal Sekolah v206 — tombol hapus, rekap per kelas, kartu pegawai, dan tab langganan. */

.eskul-v205-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.eskul-v205-danger-button {
  min-height: 42px !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  border: 1px solid #b91c1c !important;
  border-radius: 13px !important;
  background: #dc2626 !important;
  color: #fff !important;
  font-weight: 850 !important;
  box-shadow: 0 9px 20px rgba(220, 38, 38, .18) !important;
  cursor: pointer;
}

.eskul-v205-danger-button:hover { background: #b91c1c !important; }
.eskul-v205-danger-button:active { transform: scale(.975); }
.eskul-v205-danger-button:disabled { opacity: .42; box-shadow: none !important; cursor: not-allowed; }

.eskul-v206-registration-panel { width: 100%; }

.eskul-v206-class-filter {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 0 14px;
  padding: 14px 16px;
  border: 1px solid #dce9e4;
  border-radius: 16px;
  background: #f5fbf8;
}

.eskul-v206-class-filter label { display: grid; min-width: min(340px, 100%); gap: 7px; }
.eskul-v206-class-filter label > span { color: #49625a; font-size: 11px; font-weight: 850; }
.eskul-v206-class-filter select {
  width: 100%;
  min-height: 44px;
  padding: 0 42px 0 13px;
  border: 1px solid #cfe0da;
  border-radius: 13px;
  background: #fff;
  color: #173c31;
  font-weight: 800;
}
.eskul-v206-class-filter small { color: #718078; font-size: 11px; }

.eskul-v206-registration-group {
  overflow: hidden;
  width: 100%;
  padding: 0 !important;
  border: 1px solid #dfe9e5;
  border-radius: 18px;
  background: #fff;
}

.eskul-v206-registration-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: linear-gradient(105deg, #eaf8f3, #f8fcfa);
}
.eskul-v206-registration-group-head div { display: grid; gap: 3px; }
.eskul-v206-registration-group-head span { color: #0b8d6d; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.eskul-v206-registration-group-head h3 { margin: 0; color: #17382f; font-size: 17px; }
.eskul-v206-registration-group-head > b { padding: 7px 11px; border-radius: 999px; background: #fff; color: #08745d; font-size: 10px; }

.eskul-v206-registration-list { display: grid; width: 100%; }
.eskul-v206-registration-columns,
.eskul-v206-registration-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.25fr) minmax(210px, 1.25fr) minmax(90px, .45fr) minmax(210px, auto);
  align-items: center;
  gap: 16px;
}
.eskul-v206-registration-columns {
  padding: 10px 18px;
  background: #fbfcfc;
  color: #84918c;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.eskul-v206-registration-row {
  min-height: 70px;
  padding: 12px 18px;
  border-top: 1px solid #edf2f0;
}
.eskul-v206-student,
.eskul-v206-program { display: grid; min-width: 0; gap: 4px; }
.eskul-v206-student b,
.eskul-v206-program b { overflow: hidden; color: #243a33; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.eskul-v206-student small,
.eskul-v206-program small { overflow: hidden; color: #76837d; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.eskul-v206-registration-row > .eskul-v203-status { justify-self: start; }
.eskul-v206-registration-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.eskul-v206-registration-actions .eskul-v203-decisions { display: flex; gap: 5px; }
.eskul-v206-registration-actions button { white-space: nowrap; }

#subNav [data-page="subscription"] {
  border: 1px solid #f4c34f !important;
  border-left: 5px solid #e5a900 !important;
  background: #fff6c7 !important;
  color: #765000 !important;
  box-shadow: 0 7px 16px rgba(180, 123, 0, .12) !important;
}
#subNav [data-page="subscription"]:hover { background: #ffef9b !important; color: #684500 !important; }
#subNav [data-page="subscription"].active {
  border-color: #d99a00 !important;
  background: linear-gradient(135deg, #f4bd16, #dfa000) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(201, 139, 0, .25) !important;
}
#subNav [data-page="subscription"].active::before { background: #8c5b00 !important; }

#modal .modal-card:has(.v204-card-detail) {
  overflow: hidden !important;
}
#modal .modal-card:has(.v204-card-detail) > .close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 100 !important;
  display: grid !important;
  width: 38px !important;
  height: 38px !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  background: #25352f !important;
  color: #fff !important;
  font-size: 23px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .24) !important;
  cursor: pointer !important;
  touch-action: manipulation;
}
#modal .modal-card:has(.v204-card-detail) > .close:hover { background: #111d19 !important; }
#modal .modal-card:has(.v204-card-detail) #modalBody {
  position: relative;
  z-index: 1;
  max-height: calc(100dvh - 86px);
  overflow: auto;
  scrollbar-width: thin;
}
#modal .modal-card:has(.v204-card-detail) .v204-card-detail-head { padding-right: 62px; }

@media (max-width: 900px) {
  .eskul-v206-registration-columns { display: none; }
  .eskul-v206-registration-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 12px;
    padding: 14px;
  }
  .eskul-v206-program { grid-column: 1; grid-row: 2; }
  .eskul-v206-registration-row > .eskul-v203-status { grid-column: 2; grid-row: 1; justify-self: end; }
  .eskul-v206-registration-actions { grid-column: 2; grid-row: 2; }
}

@media (max-width: 720px) {
  .eskul-v205-heading-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .eskul-v205-heading-actions button { width: 100%; padding-inline: 9px !important; }
  .eskul-v206-class-filter { align-items: stretch; flex-direction: column; }
  .eskul-v206-class-filter label { min-width: 0; }
  .eskul-v206-registration-row { grid-template-columns: minmax(0, 1fr); }
  .eskul-v206-student,
  .eskul-v206-program,
  .eskul-v206-registration-row > .eskul-v203-status,
  .eskul-v206-registration-actions { grid-column: 1; grid-row: auto; justify-self: stretch; }
  .eskul-v206-registration-actions { justify-content: space-between; }
  .eskul-v206-registration-actions .eskul-v203-decisions { flex: 1; }
  .eskul-v206-registration-actions .eskul-v203-decisions button { flex: 1; }
  #modal .modal-card:has(.v204-card-detail) #modalBody { max-height: calc(92dvh - 58px); }
}

@media (prefers-reduced-motion: reduce) {
  .eskul-v205-danger-button,
  #subNav [data-page="subscription"],
  #modal .modal-card:has(.v204-card-detail) > .close { transition: none !important; }
}