/* v224 — Claymorphism ringan, khusus modal Portal Sekolah.
   Tanpa backdrop blur, tanpa animasi berat, dan tidak mengubah halaman utama. */
#modal.modal {
  background:rgba(18,39,33,.48) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

#modal .modal-card {
  border:1px solid rgba(255,255,255,.9) !important;
  background:linear-gradient(145deg,#f8fffc 0%,#eaf6f1 100%) !important;
  box-shadow:
    0 16px 38px rgba(15,66,53,.18),
    inset 1px 1px 0 rgba(255,255,255,.96) !important;
}

#modal .modal-card #modalBody,
#modal .modal-card .ab-modal {
  background:transparent !important;
}

/* Bidang isian tetap tipis dan cepat dirender. */
#modal .modal-card :is(input,select,textarea) {
  border-color:rgba(255,255,255,.86) !important;
  background:#eff8f4 !important;
  box-shadow:
    inset 2px 2px 5px rgba(67,111,98,.08),
    inset -2px -2px 5px rgba(255,255,255,.88) !important;
  transition:border-color 80ms ease,background-color 80ms ease,box-shadow 80ms ease !important;
}

#modal .modal-card :is(input,select,textarea):focus {
  border-color:#43b697 !important;
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(16,169,128,.1) !important;
}

#modal .modal-card :is(.close,.modal-close),
#modal .modal-card .secondary {
  border:1px solid rgba(255,255,255,.86) !important;
  background:linear-gradient(145deg,#f7fffc,#e6f5ef) !important;
  color:#08715b !important;
  -webkit-text-fill-color:#08715b !important;
  box-shadow:
    3px 3px 7px rgba(45,93,79,.1),
    -3px -3px 7px rgba(255,255,255,.76) !important;
}

#modal .modal-card :is(.primary,.secondary,.danger,.close,.modal-close) {
  transition:transform 70ms ease,filter 70ms ease,box-shadow 70ms ease !important;
}

#modal .modal-card :is(.primary,.secondary,.danger,.close,.modal-close):not(:disabled):hover {
  transform:translateY(-1px);
  filter:brightness(1.02);
}

#modal .modal-card :is(.primary,.secondary,.danger):not(:disabled):active {
  transform:translateY(0) scale(.985) !important;
}

/* Kontras teks tombol utama dikunci untuk normal, hover, dan disabled. */
#modal .modal-card .primary,
#modal .modal-card .primary:hover,
#modal .modal-card .primary:focus,
#modal .modal-card .primary:active {
  border:1px solid rgba(255,255,255,.2) !important;
  background:linear-gradient(145deg,#0caf87,#078c6f) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:0 1px 0 rgba(0,0,0,.12) !important;
  box-shadow:
    0 5px 10px rgba(7,140,111,.18),
    inset 1px 1px 0 rgba(255,255,255,.25) !important;
}

#modal .modal-card .primary:disabled {
  border-color:rgba(255,255,255,.28) !important;
  background:#66bea8 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:none !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.25) !important;
  filter:none !important;
  opacity:.78 !important;
}

/* Clay lebih terasa pada komponen modal anggaran, tanpa menambah bingkai tebal. */
#modal .ab-modal-head .ab-kicker,
#modal .ab-section-title .secondary,
#modal .ab-line,
#modal .ab-attachment {
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:
    2px 2px 6px rgba(53,101,87,.08),
    -2px -2px 6px rgba(255,255,255,.72) !important;
}

#modal .ab-line,
#modal .ab-attachment {
  background:#f1f9f6 !important;
}

#modal .ab-form-actions {
  background:linear-gradient(180deg,rgba(245,252,249,.95),#edf8f3) !important;
  border-top-color:rgba(102,157,140,.16) !important;
}

@media (max-width:780px) {
  #modal .modal-card {
    border-radius:26px 26px 17px 17px !important;
    box-shadow:0 10px 24px rgba(15,66,53,.16),inset 1px 1px 0 #fff !important;
  }
}

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