/* v228 — White Claymorphism untuk seluruh portal dan seluruh jenis modal.
   Button tidak ditarget sehingga gaya tombol tetap memakai tema portal asal. */
html[data-clay-theme="v228"] {
  --white-clay-canvas:#e8edeb;
  --white-clay-top:#fbfdfc;
  --white-clay-bottom:#e8efec;
  --white-clay-inset:#edf3f0;
  --white-clay-ink:#20332d;
  --white-clay-muted:#647871;
  --white-clay-highlight:rgba(255,255,255,.82);
  --white-clay-shadow:rgba(53,76,68,.13);
  background:var(--white-clay-canvas) !important;
}

html[data-clay-theme="v228"] body {
  min-height:100dvh;
  background:
    radial-gradient(circle at 8% 2%,rgba(255,255,255,.82),transparent 31%),
    linear-gradient(135deg,#e7ecea,#f2f5f4 55%,#e6ece9) !important;
}

html[data-clay-theme="v228"] :is(
  #root,
  #app,
  .app,
  .owner-app,
  .foundation-app,
  .workspace,
  .content,
  main,
  main > section,
  .subnav,
  .portal-groups
) {
  background-color:transparent !important;
}

/* Layar masuk dan pemilih portal. */
html[data-clay-theme="v228"] :is(
  .login,
  .owner-login,
  .auth-screen,
  [class$="-login-screen"],
  [class$="-auth-screen"]
) {
  background:transparent !important;
}

html[data-clay-theme="v228"] :is(
  .login-card,
  .auth-card,
  .selector,
  .welcome
):not(button):not([role="button"]) {
  border:1px solid rgba(255,255,255,.88) !important;
  background:linear-gradient(145deg,#fff,#e8efec) !important;
  box-shadow:
    11px 11px 25px rgba(53,76,68,.14),
    -9px -9px 22px rgba(255,255,255,.78),
    inset 1px 1px 0 rgba(255,255,255,.9) !important;
}

/* Shell putih seperti satu perangkat, bukan bidang datar. */
html[data-clay-theme="v228"] :is(
  aside,
  .sidebar,
  .unified-sidebar,
  [class$="-sidebar"]
) {
  border-color:rgba(255,255,255,.8) !important;
  background:linear-gradient(160deg,#fafcfb,#e7eeeb) !important;
  box-shadow:7px 0 19px rgba(47,73,64,.11),inset 1px 0 0 rgba(255,255,255,.8) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

html[data-clay-theme="v228"] :is(
  header,
  .topbar,
  .app-header,
  [class$="-topbar"],
  [class$="-header-bar"]
) {
  border-color:rgba(255,255,255,.82) !important;
  background:linear-gradient(145deg,#fbfdfc,#e8efec) !important;
  box-shadow:0 6px 17px rgba(48,73,65,.11),inset 0 1px 0 #fff !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* Semua hero ikut tema putih; teks dipaksa gelap agar tidak pernah menghilang. */
html[data-clay-theme="v228"] :is(
  .hero-panel,
  .ab-hero,
  .dashboard-hero,
  .foundation-profile-hero,
  .employee-accreditation-v128-hero,
  .eskul-student-hero,
  [class$="-dashboard-hero"]
) {
  border:1px solid rgba(255,255,255,.9) !important;
  background:linear-gradient(145deg,#fff,#e6eeea) !important;
  box-shadow:
    9px 9px 21px rgba(49,75,66,.13),
    -7px -7px 18px rgba(255,255,255,.76),
    inset 1px 1px 0 #fff !important;
}

html[data-clay-theme="v228"] :is(
  .hero-panel,
  .ab-hero,
  .dashboard-hero,
  .foundation-profile-hero,
  .employee-accreditation-v128-hero,
  .eskul-student-hero,
  [class$="-dashboard-hero"]
) :is(h1,h2,h3,h4,p,span,small,b):not(button *) {
  color:var(--white-clay-ink) !important;
  opacity:1 !important;
  text-shadow:none !important;
}

/* Kartu dan panel biasa; button berakhiran -card tetap dikecualikan. */
html[data-clay-theme="v228"] :where(
  .card,
  .panel,
  .portal-card,
  .profile-menu,
  [class$="-card"],
  [class$="-panel"]
):not(button):not([role="button"]):not(.student-id-card):not(.employee-id-card):not(.print-card):not([class*="-id-card"]) {
  border:1px solid rgba(255,255,255,.86) !important;
  background:linear-gradient(145deg,var(--white-clay-top),var(--white-clay-bottom)) !important;
  box-shadow:
    7px 7px 17px var(--white-clay-shadow),
    -6px -6px 15px var(--white-clay-highlight) !important;
  transform:none !important;
  transition:none !important;
}

/* Panel inline yang berfungsi seperti modal non-popup. */
html[data-clay-theme="v228"] :where(
  .form-section,
  .foundation-form-section,
  .ab-form-section,
  .eskul-form-section,
  .table-wrap,
  .qris-wrap,
  .setting-center-direct-shell-v215,
  .report-v190-section,
  [class$="-table-wrap"]
):not(button):not([role="button"]) {
  border:1px solid rgba(255,255,255,.78) !important;
  background:var(--white-clay-inset) !important;
  box-shadow:
    inset 3px 3px 8px rgba(49,76,67,.08),
    inset -3px -3px 8px rgba(255,255,255,.76) !important;
}

html[data-clay-theme="v228"] :where(
  .document-item,
  .portal-management-notification-item,
  .portal-student-notification-item,
  .psn-item,
  .teacher-report-item,
  .global-history-item,
  .leave-row,
  .slip,
  .school-card
):not(button):not([role="button"]) {
  border-color:rgba(255,255,255,.82) !important;
  background:linear-gradient(145deg,#fafcfb,#e9f0ed) !important;
  box-shadow:3px 4px 9px rgba(49,76,67,.08),inset 1px 1px 0 #fff !important;
}

/* Seluruh modal popup dan dialog. Overlay tidak memakai blur. */
html[data-clay-theme="v228"] :is(
  .modal,
  .dialog,
  [class$="-overlay"],
  [class$="-backdrop"]
):not(.hidden) {
  background-color:rgba(22,32,29,.5) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

html[data-clay-theme="v228"] :is(
  .modal-card,
  .ab-modal,
  .eskul-form-modal,
  .eskul-review-modal,
  .eskul-student-modal-card,
  .payroll-template-modal,
  .report-v190-sheet,
  [role="dialog"],
  [class$="-dialog"],
  [class$="-modal-card"]
):not(button):not([role="button"]),
html[data-clay-theme="v228"] :is(.modal,.dialog,[role="dialog"]):not(.hidden) > :is(form,section,article):not(button) {
  border:1px solid rgba(255,255,255,.92) !important;
  background:linear-gradient(145deg,#fff,#e7eeeb) !important;
  color:var(--white-clay-ink) !important;
  box-shadow:
    0 18px 40px rgba(25,48,40,.2),
    -5px -5px 14px rgba(255,255,255,.62),
    inset 1px 1px 0 #fff !important;
}

html[data-clay-theme="v228"] :is(
  .modal-card,
  .ab-modal,
  .eskul-form-modal,
  .eskul-review-modal,
  .eskul-student-modal-card,
  .payroll-template-modal,
  .report-v190-sheet,
  [role="dialog"],
  [class$="-dialog"],
  [class$="-modal-card"]
) :is(h1,h2,h3,h4,p,label,small):not(button *) {
  color:var(--white-clay-ink) !important;
  opacity:1 !important;
}

html[data-clay-theme="v228"] :is(#modalBody,#foundationModalBody,.modal-body,[class$="-modal-body"]) {
  background:transparent !important;
}

/* Form halaman dan modal: cekung putih, kontras fokus tetap jelas. */
html[data-clay-theme="v228"] :is(input,select,textarea) {
  border-color:rgba(255,255,255,.88) !important;
  background:#eef3f1 !important;
  color:var(--white-clay-ink) !important;
  box-shadow:
    inset 2px 2px 5px rgba(48,75,66,.09),
    inset -2px -2px 5px rgba(255,255,255,.8) !important;
  transition:border-color 70ms ease,box-shadow 70ms ease !important;
}

html[data-clay-theme="v228"] :is(input,select,textarea):focus {
  border-color:#3da98a !important;
  background:#fbfdfc !important;
  box-shadow:0 0 0 3px rgba(13,148,111,.1) !important;
}

html[data-clay-theme="v228"] th {
  background:#e8efec !important;
  color:#536a62 !important;
}

html[data-clay-theme="v228"] :is(th,td) {
  border-bottom-color:rgba(65,94,84,.13) !important;
}

html[data-clay-theme="v228"] :is(.loading,.toast):not(.hidden):not(button) {
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* Hilangkan gerakan permukaan lama; interaksi button tidak termasuk. */
html[data-clay-theme="v228"] :where(
  .card,
  .panel,
  .portal-card,
  .modal-card,
  [class$="-card"],
  [class$="-panel"]
):not(button):not([role="button"]):hover {
  transform:none !important;
  filter:none !important;
}

@media (max-width:850px) {
  html[data-clay-theme="v228"] :is(
    aside,
    .sidebar,
    .unified-sidebar,
    [class$="-sidebar"]
  ) {
    background:linear-gradient(160deg,#fafcfb,#e6edea) !important;
    box-shadow:0 -6px 17px rgba(47,73,64,.11),inset 0 1px 0 #fff !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  html[data-clay-theme="v228"] :where(
    .card,
    .panel,
    .portal-card,
    .profile-menu,
    .modal-card,
    [class$="-card"],
    [class$="-panel"]
  ):not(button):not([role="button"]):not(.student-id-card):not(.employee-id-card):not(.print-card):not([class*="-id-card"]) {
    box-shadow:5px 6px 13px rgba(49,76,67,.1),-4px -4px 11px rgba(255,255,255,.72) !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  html[data-clay-theme="v228"] *,
  html[data-clay-theme="v228"] *::before,
  html[data-clay-theme="v228"] *::after {
    animation:none !important;
    transition:none !important;
  }
}