/* Portal Sekolah v198 — modal program eskul responsif tanpa mengubah modal lain. */

@media (min-width: 1101px) {
  body.admin-modal-layer-open #modal:has(.eskul-form-modal) {
    align-items: center !important;
    padding: 28px 36px !important;
  }

  #modal .modal-card:has(.eskul-form-modal) {
    width: min(1180px, calc(100vw - 72px)) !important;
    max-width: 1180px !important;
    max-height: calc(100dvh - 56px) !important;
    padding: 26px 28px !important;
    overflow: hidden !important;
  }

  #eskulProgramForm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px !important;
  }

  #eskulProgramForm > .eskul-form-section:nth-of-type(n + 3),
  #eskulProgramForm > .eskul-form-actions {
    grid-column: 1 / -1;
  }

  #eskulProgramForm .eskul-schedule-row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px;
  }

  #eskulProgramForm .eskul-schedule-row > label:nth-of-type(1),
  #eskulProgramForm .eskul-schedule-row > label:nth-of-type(2),
  #eskulProgramForm .eskul-schedule-row > label:nth-of-type(3) {
    grid-column: span 2;
  }

  #eskulProgramForm .eskul-schedule-row > label:nth-of-type(4) {
    grid-column: span 3;
  }

  #eskulProgramForm .eskul-schedule-row > label:nth-of-type(5) {
    grid-column: span 1;
  }

  #eskulProgramForm .eskul-schedule-row > label:nth-of-type(6) {
    grid-column: span 2;
  }

  #eskulProgramForm .eskul-schedule-row > label:nth-of-type(7) {
    grid-column: span 10;
  }

  #eskulProgramForm .eskul-schedule-row > .danger-link {
    grid-column: span 2;
    width: 100%;
  }
}

#modal .modal-card:has(.eskul-form-modal) #modalBody,
#modal .modal-card:has(.eskul-form-modal) .eskul-form-modal,
#modal .modal-card:has(.eskul-form-modal) #eskulProgramForm,
#modal .modal-card:has(.eskul-form-modal) .eskul-form-section,
#modal .modal-card:has(.eskul-form-modal) .eskul-schedule-row,
#modal .modal-card:has(.eskul-form-modal) .eskul-schedule-row > * {
  min-width: 0 !important;
  max-width: 100%;
}

#modal .modal-card:has(.eskul-form-modal) .eskul-form-modal {
  width: 100%;
  max-height: calc(100dvh - 108px);
  padding: 0 5px 1px 1px;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
}

#modal .modal-card:has(.eskul-form-modal) .eskul-form-heading {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 0 -1px;
  padding: 2px 50px 14px 1px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
}

#modal .modal-card:has(.eskul-form-modal) .eskul-form-heading .modal-x {
  display: none;
}

#modal .modal-card:has(.eskul-form-modal) .eskul-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin: 0 -1px -1px;
  padding: 13px 1px 1px;
  border-top: 1px solid #e8efec;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
}

#modal .modal-card:has(.eskul-form-modal) .eskul-schedule-row {
  width: 100%;
  overflow: hidden;
}

#modal .modal-card:has(.eskul-form-modal) .eskul-schedule-row input,
#modal .modal-card:has(.eskul-form-modal) .eskul-schedule-row select {
  min-width: 0 !important;
  width: 100% !important;
}

@media (min-width: 851px) and (max-width: 1100px) {
  body.admin-modal-layer-open #modal:has(.eskul-form-modal) {
    padding: 20px !important;
  }

  #modal .modal-card:has(.eskul-form-modal) {
    width: calc(100vw - 40px) !important;
    max-width: 920px !important;
    max-height: calc(100dvh - 40px) !important;
    padding: 24px !important;
    overflow: hidden !important;
  }
}

@media (max-width: 850px) {
  #modal .modal-card:has(.eskul-form-modal) {
    overflow: hidden !important;
  }

  #modal .modal-card:has(.eskul-form-modal) .eskul-form-modal {
    max-height: calc(88dvh - 48px);
    padding-right: 3px;
  }

  #eskulProgramForm {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #eskulProgramForm > * {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 560px) {
  #modal .modal-card:has(.eskul-form-modal) .eskul-schedule-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #modal .modal-card:has(.eskul-form-modal) .eskul-schedule-row > * {
    grid-column: 1 / -1 !important;
  }
}