/* Portal Sekolah v202 — lapisan iOS ringan, hanya untuk modal. */
body.admin-modal-layer-open { overscroll-behavior: contain; }

#modal.modal {
  background: rgba(19, 31, 38, .48) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}

#modal.modal:not(.hidden) { animation: admin-ios-backdrop-in 180ms ease-out both; }

#modal .modal-card {
  max-width: calc(100vw - 28px);
  max-height: calc(100dvh - 28px);
  border: 1px solid rgba(255, 255, 255, .78) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 28px 85px rgba(15, 30, 37, .27), 0 2px 9px rgba(15, 30, 37, .08) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(92, 111, 103, .28) transparent;
  -webkit-font-smoothing: antialiased;
}

#modal.modal:not(.hidden) .modal-card { animation: admin-ios-modal-in 240ms cubic-bezier(.22, .82, .24, 1) both; }

#modal .modal-card::-webkit-scrollbar { width: 6px; }
#modal .modal-card::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(92, 111, 103, .24); }

#modal .close,
#modal [data-close].modal-x {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(118, 132, 125, .12) !important;
  color: #52615b !important;
  box-shadow: inset 0 0 0 1px rgba(100, 116, 108, .05) !important;
  transition: transform 150ms ease, background-color 150ms ease !important;
}

#modal .close:hover,
#modal [data-close].modal-x:hover { background: rgba(118, 132, 125, .19) !important; transform: scale(1.04); }
#modal .close:active,
#modal [data-close].modal-x:active { transform: scale(.94); }

#modal .modal-card input,
#modal .modal-card select,
#modal .modal-card textarea {
  border-color: #d9e2de !important;
  background: rgba(248, 250, 249, .94) !important;
  box-shadow: inset 0 1px 1px rgba(32, 52, 44, .025);
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

#modal .modal-card input:focus,
#modal .modal-card select:focus,
#modal .modal-card textarea:focus {
  border-color: #36b88d !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .11) !important;
}

#modal .modal-card button { -webkit-tap-highlight-color: transparent; }
#modal .modal-card .primary,
#modal .modal-card .secondary,
#modal .modal-card .danger { box-shadow: none !important; transition: transform 140ms ease, filter 140ms ease, opacity 140ms ease !important; }
#modal .modal-card .primary:active,
#modal .modal-card .secondary:active,
#modal .modal-card .danger:active { transform: scale(.975) !important; }

@keyframes admin-ios-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes admin-ios-modal-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 850px) {
  #modal.modal { align-items: end !important; padding: 8px 8px 0 !important; }
  #modal .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(92dvh, 920px) !important;
    padding: 20px 17px calc(18px + env(safe-area-inset-bottom)) !important;
    border-bottom: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -18px 58px rgba(15, 30, 37, .22) !important;
  }
  #modal.modal:not(.hidden) .modal-card { animation-name: admin-ios-sheet-in; }
  #modal .modal-card::before {
    content: "";
    display: block;
    width: 38px;
    height: 5px;
    margin: -9px auto 12px;
    border-radius: 999px;
    background: #d8dfdc;
  }
  @keyframes admin-ios-sheet-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
}

@media (prefers-reduced-motion: reduce) {
  #modal.modal:not(.hidden),
  #modal.modal:not(.hidden) .modal-card { animation: none !important; }
  #modal .modal-card *,
  #modal .modal-card *::before,
  #modal .modal-card *::after { transition: none !important; }
}