/* v203 — visual modal bersama; seluruh selector dibatasi pada lapisan modal. */
:is(#modal,#ownerModal,#foundationModal).modal,
.eskul-student-modal,
.student-id-card-modal,
.teacher-qr-modal,
.teacher-student-scan-modal,
.employee-id-card-modal,
.employee-attendance-v126-modal,
.employee-accreditation-v128-modal,
.portal-student-preview-v190 {
  background-color:rgba(18,29,36,.5) !important;
  -webkit-backdrop-filter:blur(8px) saturate(118%);
  backdrop-filter:blur(8px) saturate(118%);
}

:is(#modal,#ownerModal,#foundationModal).modal:not(.hidden),
.eskul-student-modal:not([hidden]),
.student-id-card-modal:not([hidden]),
.teacher-qr-modal:not([hidden]),
.teacher-student-scan-modal:not([hidden]),
.employee-id-card-modal:not([hidden]),
.employee-attendance-v126-modal:not([hidden]),
.employee-accreditation-v128-modal:not([hidden]),
.portal-student-preview-v190.is-open {
  animation:portal-ios-v203-backdrop 170ms ease-out both;
}

:is(#modal,#ownerModal,#foundationModal) .modal-card,
.eskul-student-modal-card,
.student-id-card-dialog,
.teacher-qr-dialog,
.teacher-student-scan-dialog,
.employee-id-card-dialog,
.employee-attendance-v126-dialog,
.employee-accreditation-v128-dialog,
.portal-student-preview-card-v190 {
  border:0 !important;
  background-color:rgba(255,255,255,.98) !important;
  box-shadow:0 28px 85px rgba(15,30,37,.25),0 2px 8px rgba(15,30,37,.07) !important;
  -webkit-font-smoothing:antialiased;
  scrollbar-width:thin;
  scrollbar-color:rgba(92,111,103,.24) transparent;
}

:is(#modal,#ownerModal,#foundationModal).modal:not(.hidden) .modal-card,
.eskul-student-modal:not([hidden]) .eskul-student-modal-card,
.student-id-card-modal:not([hidden]) .student-id-card-dialog,
.teacher-qr-modal:not([hidden]) .teacher-qr-dialog,
.teacher-student-scan-modal:not([hidden]) .teacher-student-scan-dialog,
.employee-id-card-modal:not([hidden]) .employee-id-card-dialog,
.employee-attendance-v126-modal:not([hidden]) .employee-attendance-v126-dialog,
.employee-accreditation-v128-modal:not([hidden]) .employee-accreditation-v128-dialog,
.portal-student-preview-v190.is-open .portal-student-preview-card-v190 {
  animation:portal-ios-v203-dialog 230ms cubic-bezier(.22,.82,.24,1) both;
}

:is(#modal,#ownerModal,#foundationModal) .modal-card :is(input,select,textarea),
.eskul-student-modal-card :is(input,select,textarea),
.teacher-qr-dialog :is(input,select,textarea),
.teacher-student-scan-dialog :is(input,select,textarea),
.employee-attendance-v126-dialog :is(input,select,textarea),
.employee-accreditation-v128-dialog :is(input,select,textarea) {
  border-color:#d9e2de !important;
  background-color:rgba(248,250,249,.96) !important;
  box-shadow:inset 0 1px 1px rgba(32,52,44,.025);
  transition:border-color 140ms ease,box-shadow 140ms ease,background-color 140ms ease;
}

:is(#modal,#ownerModal,#foundationModal) .modal-card :is(input,select,textarea):focus,
.eskul-student-modal-card :is(input,select,textarea):focus,
.teacher-qr-dialog :is(input,select,textarea):focus,
.teacher-student-scan-dialog :is(input,select,textarea):focus,
.employee-attendance-v126-dialog :is(input,select,textarea):focus,
.employee-accreditation-v128-dialog :is(input,select,textarea):focus {
  border-color:#36b88d !important;
  background-color:#fff !important;
  box-shadow:0 0 0 3px rgba(16,185,129,.11) !important;
  outline:0;
}

:is(#modal,#ownerModal,#foundationModal) .modal-card button,
.eskul-student-modal-card button,
.student-id-card-dialog button,
.teacher-qr-dialog button,
.teacher-student-scan-dialog button,
.employee-id-card-dialog button,
.employee-attendance-v126-dialog button,
.employee-accreditation-v128-dialog button,
.portal-student-preview-card-v190 button {
  -webkit-tap-highlight-color:transparent;
  transition:transform 135ms ease,filter 135ms ease,background-color 135ms ease,opacity 135ms ease;
}

:is(#modal,#ownerModal,#foundationModal) .modal-card button:active,
.eskul-student-modal-card button:active,
.student-id-card-dialog button:active,
.teacher-qr-dialog button:active,
.teacher-student-scan-dialog button:active,
.employee-id-card-dialog button:active,
.employee-attendance-v126-dialog button:active,
.employee-accreditation-v128-dialog button:active,
.portal-student-preview-card-v190 button:active { transform:scale(.975); }

@keyframes portal-ios-v203-backdrop { from { opacity:0; } to { opacity:1; } }
@keyframes portal-ios-v203-dialog { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }

@media (max-width:760px) {
  :is(#modal,#ownerModal,#foundationModal).modal { align-items:flex-end !important; padding:8px 8px 0 !important; }
  :is(#modal,#ownerModal,#foundationModal) .modal-card {
    width:100% !important;
    max-width:100% !important;
    max-height:92dvh !important;
    padding:20px 17px calc(18px + env(safe-area-inset-bottom)) !important;
    border-radius:24px 24px 0 0 !important;
    box-shadow:0 -18px 58px rgba(15,30,37,.2) !important;
  }
  :is(#modal,#ownerModal,#foundationModal) .modal-card::before,
  .eskul-student-modal-card::before {
    content:"";
    display:block;
    width:38px;
    height:5px;
    margin:-9px auto 12px;
    border-radius:999px;
    background:#d8dfdc;
  }
  .eskul-student-modal { align-items:flex-end !important; padding:8px 8px 0 !important; }
  .eskul-student-modal-card { width:100% !important; max-height:92dvh !important; border-radius:24px 24px 0 0 !important; padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important; }
  :is(#modal,#ownerModal,#foundationModal).modal:not(.hidden) .modal-card,
  .eskul-student-modal:not([hidden]) .eskul-student-modal-card,
  .student-id-card-modal:not([hidden]) .student-id-card-dialog,
  .teacher-qr-modal:not([hidden]) .teacher-qr-dialog,
  .teacher-student-scan-modal:not([hidden]) .teacher-student-scan-dialog,
  .employee-id-card-modal:not([hidden]) .employee-id-card-dialog,
  .employee-attendance-v126-modal:not([hidden]) .employee-attendance-v126-dialog,
  .employee-accreditation-v128-modal:not([hidden]) .employee-accreditation-v128-dialog,
  .portal-student-preview-v190.is-open .portal-student-preview-card-v190 { animation-name:portal-ios-v203-sheet; }
}

@keyframes portal-ios-v203-sheet { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) {
  :is(#modal,#ownerModal,#foundationModal).modal:not(.hidden),
  :is(#modal,#ownerModal,#foundationModal).modal:not(.hidden) .modal-card,
  .eskul-student-modal:not([hidden]),.eskul-student-modal:not([hidden]) .eskul-student-modal-card,
  .student-id-card-modal:not([hidden]),.student-id-card-modal:not([hidden]) .student-id-card-dialog,
  .teacher-qr-modal:not([hidden]),.teacher-qr-modal:not([hidden]) .teacher-qr-dialog,
  .teacher-student-scan-modal:not([hidden]),.teacher-student-scan-modal:not([hidden]) .teacher-student-scan-dialog,
  .employee-id-card-modal:not([hidden]),.employee-id-card-modal:not([hidden]) .employee-id-card-dialog,
  .employee-attendance-v126-modal:not([hidden]),.employee-attendance-v126-modal:not([hidden]) .employee-attendance-v126-dialog,
  .employee-accreditation-v128-modal:not([hidden]),.employee-accreditation-v128-modal:not([hidden]) .employee-accreditation-v128-dialog,
  .portal-student-preview-v190.is-open,.portal-student-preview-v190.is-open .portal-student-preview-card-v190 { animation:none !important; }
}