/*
 * Portal Pendidikan v151
 * Lapisan visual global bergaya iOS. Tombol sengaja tidak ditargetkan agar
 * bentuk, warna, ukuran, dan perilaku tombol dari setiap portal tetap utuh.
 */

html.ios-ui-v151 {
  --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --ios-ink: #17231f;
  --ios-muted: #6d7c77;
  --ios-green: #078c72;
  --ios-line: rgba(35, 74, 64, 0.1);
  --ios-glass: rgba(255, 255, 255, 0.76);
  --ios-glass-strong: rgba(255, 255, 255, 0.9);
  --ios-shadow: 0 18px 48px rgba(22, 62, 51, 0.105);
  --ios-shadow-hover: 0 27px 66px rgba(22, 62, 51, 0.16);
  color: var(--ios-ink);
  background: #f3f8f6;
  color-scheme: light;
  font-family: var(--ios-font);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html.ios-ui-v151 *,
html.ios-ui-v151 *::before,
html.ios-ui-v151 *::after {
  box-sizing: border-box;
}

html.ios-ui-v151 body {
  min-height: 100dvh;
  color: var(--ios-ink);
  background:
    radial-gradient(circle at 4% -8%, rgba(93, 214, 180, 0.16), transparent 31rem),
    radial-gradient(circle at 102% 96%, rgba(142, 175, 255, 0.12), transparent 34rem),
    linear-gradient(155deg, #f8fbfa 0%, #f2f7f5 52%, #f7faf9 100%);
  font-family: var(--ios-font);
  -webkit-tap-highlight-color: transparent;
}

html.ios-ui-v151 body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 22% 16%, rgba(255, 255, 255, 0.95), transparent 22%),
    radial-gradient(circle at 84% 40%, rgba(123, 224, 199, 0.08), transparent 26%);
  content: "";
  pointer-events: none;
}

html.ios-ui-v151 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--ios-font);
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

html.ios-ui-v151 :is(p, li, td, label, small) {
  letter-spacing: -0.008em;
}

html.ios-ui-v151 :is(.app, .owner-app, .foundation-app) main,
html.ios-ui-v151 :is(.workspace, .content) {
  min-width: 0;
}

html.ios-ui-v151 :is(aside, .sidebar) {
  border-color: rgba(35, 74, 64, 0.09);
  box-shadow:
    14px 0 46px rgba(26, 65, 54, 0.055),
    inset -1px 0 rgba(255, 255, 255, 0.48);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
}

html.ios-ui-v151 :is(.app, .owner-app, .foundation-app) main > header,
html.ios-ui-v151 :is(.topbar, .legal-nav) {
  border-color: rgba(35, 74, 64, 0.085);
  background-color: rgba(255, 255, 255, 0.74);
  box-shadow: 0 10px 34px rgba(30, 69, 58, 0.055);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  backdrop-filter: blur(24px) saturate(155%);
}

html.ios-ui-v151 :is(
  .card,
  .panel,
  .stat,
  .summary-card,
  .record-card,
  .school-card,
  .login-card,
  .auth-card,
  .legal-card,
  .legal-hero,
  .modal-card,
  .profile-menu,
  [class*="preview-card"],
  [class*="profile-card"]
) {
  border-color: var(--ios-line);
  background-color: var(--ios-glass);
  box-shadow:
    var(--ios-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

html.ios-ui-v151 :is(
  .card,
  .stat,
  .summary-card,
  .record-card,
  .school-card,
  [class*="preview-card"],
  [class*="profile-card"]
) {
  transform: translateZ(0);
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.38s ease,
    background-color 0.3s ease;
}

html.ios-ui-v151 :is(.panel-head, .panel-body, .record-meta div, .school-meta div) {
  border-color: rgba(35, 74, 64, 0.075);
}

html.ios-ui-v151 :is(.record-meta div, .school-meta div) {
  background-color: rgba(243, 248, 246, 0.78);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
}

html.ios-ui-v151 :is(
  input:not([type="button"]):not([type="submit"]):not([type="reset"]),
  select,
  textarea
) {
  min-height: 44px;
  border-color: rgba(49, 86, 76, 0.14);
  border-radius: 14px;
  color: var(--ios-ink);
  background-color: rgba(248, 251, 250, 0.88);
  box-shadow:
    inset 0 1px 2px rgba(20, 49, 41, 0.035),
    0 1px 0 rgba(255, 255, 255, 0.9);
  font-family: var(--ios-font);
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease;
}

html.ios-ui-v151 :is(
  input:not([type="button"]):not([type="submit"]):not([type="reset"]),
  select,
  textarea
):focus {
  border-color: color-mix(in srgb, var(--ios-green) 65%, white);
  outline: none;
  background-color: rgba(255, 255, 255, 0.97);
  box-shadow:
    0 0 0 4px rgba(7, 140, 114, 0.11),
    0 9px 24px rgba(7, 140, 114, 0.07);
}

html.ios-ui-v151 :is(input, textarea)::placeholder {
  color: #9aa8a3;
}

html.ios-ui-v151 :is(.table-wrap, [class*="table-wrap"]) {
  border: 1px solid rgba(35, 74, 64, 0.075);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.85);
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(7, 140, 114, 0.28) transparent;
}

html.ios-ui-v151 table {
  border-spacing: 0;
}

html.ios-ui-v151 th {
  border-color: rgba(35, 74, 64, 0.07);
  background-color: rgba(242, 248, 246, 0.86);
  font-weight: 800;
  letter-spacing: 0.055em;
}

html.ios-ui-v151 td {
  border-color: rgba(35, 74, 64, 0.065);
}

html.ios-ui-v151 tbody tr {
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

html.ios-ui-v151 tbody tr:hover {
  background-color: rgba(7, 140, 114, 0.035);
}

html.ios-ui-v151 :is(.modal, [class$="-modal"]):not(button):not(a) {
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}

html.ios-ui-v151 .modal-card {
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 27px;
  background-color: var(--ios-glass-strong);
  box-shadow:
    0 36px 90px rgba(14, 43, 35, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  animation: iosModalIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.ios-ui-v151 :is(.badge, [class*="badge"], [class*="status"]):not(button):not(a) {
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow:
    0 5px 14px rgba(26, 65, 54, 0.055),
    inset 0 1px rgba(255, 255, 255, 0.75);
}

html.ios-ui-v151 :is(.login, .owner-login, .auth-screen) {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 8%, rgba(103, 218, 188, 0.22), transparent 31rem),
    radial-gradient(circle at 91% 89%, rgba(130, 163, 255, 0.15), transparent 30rem),
    linear-gradient(145deg, #fbfdfc, #edf5f2);
}

html.ios-ui-v151 :is(.login-card, .auth-card) {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.84);
  background-color: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 34px 90px rgba(19, 58, 47, 0.14),
    inset 0 1px rgba(255, 255, 255, 0.96);
  animation: iosSurfaceIn 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.ios-ui-v151 .legal-nav {
  position: sticky;
  z-index: 30;
  top: 14px;
  width: min(1120px, calc(100% - 28px));
  margin: 14px auto 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  box-shadow:
    0 18px 50px rgba(24, 62, 52, 0.09),
    inset 0 1px rgba(255, 255, 255, 0.9);
}

html.ios-ui-v151 .legal-wrap {
  width: min(980px, calc(100% - 28px));
}

html.ios-ui-v151 .legal-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background:
    radial-gradient(circle at 94% 4%, rgba(115, 223, 193, 0.24), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.93), rgba(242, 250, 247, 0.82));
}

html.ios-ui-v151 .legal-hero::after {
  position: absolute;
  top: -62px;
  right: -48px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(7, 140, 114, 0.12);
  border-radius: 50%;
  content: "";
  box-shadow:
    0 0 0 26px rgba(7, 140, 114, 0.035),
    0 0 0 54px rgba(7, 140, 114, 0.02);
  pointer-events: none;
}

html.ios-ui-v151 .legal-meta span {
  border: 1px solid rgba(7, 140, 114, 0.09);
  border-radius: 999px;
  background: rgba(234, 248, 243, 0.78);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.84);
}

html.ios-ui-v151 .legal-card {
  border: 1px solid rgba(255, 255, 255, 0.84);
  background-color: rgba(255, 255, 255, 0.84);
}

html.ios-ui-v151 .legal-card h2 {
  position: relative;
  padding-left: 16px;
}

html.ios-ui-v151 .legal-card h2::before {
  position: absolute;
  top: 0.18em;
  bottom: 0.18em;
  left: 0;
  width: 4px;
  border-radius: 99px;
  background: linear-gradient(#11b78e, #067c66);
  box-shadow: 0 4px 12px rgba(7, 140, 114, 0.24);
  content: "";
}

html.ios-ui-v151 .notice {
  border: 1px solid rgba(7, 140, 114, 0.09);
  background-color: rgba(231, 248, 242, 0.72);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.78);
}

html.ios-ui-v151 :is(.card, .panel, .legal-card, .legal-hero, .login-card, .auth-card) {
  animation: iosSurfaceIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.ios-ui-v151 * {
  scrollbar-width: thin;
  scrollbar-color: rgba(7, 140, 114, 0.3) transparent;
}

html.ios-ui-v151 *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html.ios-ui-v151 *::-webkit-scrollbar-track {
  background: transparent;
}

html.ios-ui-v151 *::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(7, 140, 114, 0.28);
  background-clip: padding-box;
}

@media (hover: hover) and (pointer: fine) {
  html.ios-ui-v151 :is(
    .card,
    .stat,
    .summary-card,
    .record-card,
    .school-card,
    [class*="preview-card"],
    [class*="profile-card"]
  ):hover {
    border-color: rgba(7, 140, 114, 0.15);
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow:
      var(--ios-shadow-hover),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transform: translateY(-3px) perspective(900px) rotateX(0.35deg);
  }
}

@media (max-width: 760px) {
  html.ios-ui-v151 :is(aside, .sidebar) {
    box-shadow:
      0 -14px 38px rgba(22, 62, 51, 0.1),
      inset 0 1px rgba(255, 255, 255, 0.28);
  }

  html.ios-ui-v151 :is(.app, .owner-app, .foundation-app) main > header,
  html.ios-ui-v151 .topbar {
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
  }

  html.ios-ui-v151 :is(.content, section) {
    max-width: 100%;
  }

  html.ios-ui-v151 :is(.card, .panel, .summary-card, .record-card, .school-card) {
    border-radius: 19px;
  }

  html.ios-ui-v151 .modal-card {
    border-radius: 27px 27px 0 0;
    box-shadow: 0 -24px 70px rgba(14, 43, 35, 0.22);
  }

  html.ios-ui-v151 .legal-nav {
    top: 8px;
    width: calc(100% - 16px);
    margin-top: 8px;
    border-radius: 17px;
  }

  html.ios-ui-v151 .legal-wrap {
    width: calc(100% - 20px);
  }

  html.ios-ui-v151 .legal-hero,
  html.ios-ui-v151 .legal-card {
    border-radius: 24px;
  }

  html.ios-ui-v151 :is(
    input:not([type="button"]):not([type="submit"]):not([type="reset"]),
    select,
    textarea
  ) {
    min-height: 46px;
    font-size: max(16px, 1em);
  }
}

@keyframes iosSurfaceIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes iosModalIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes iosToastIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ios-ui-v151 *,
  html.ios-ui-v151 *::before,
  html.ios-ui-v151 *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* V151 — menangkap surface dinamis React tanpa menyentuh tombol maupun toast v144. */
html.ios-ui-v151 #root {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 8% 6%, rgba(92, 223, 187, 0.1), transparent 30rem),
    radial-gradient(circle at 94% 36%, rgba(112, 151, 255, 0.08), transparent 31rem);
}

html.ios-ui-v151 #root header {
  border-color: rgba(28, 68, 57, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.78) !important;
  box-shadow:
    0 12px 36px rgba(29, 66, 56, 0.06),
    inset 0 -1px rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
}

html.ios-ui-v151 #root :is(div, section, article)[class*="bg-white"][class*="rounded-"][class*="border"] {
  border-color: rgba(37, 76, 65, 0.09) !important;
  background-color: rgba(255, 255, 255, 0.79) !important;
  box-shadow:
    0 16px 42px rgba(24, 58, 49, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}

html.ios-ui-v151
  #root
  :is(div, section, article)[class*="shadow-2xl"][class*="rounded-"]:not(.toast):not(
    [class*="-toast"]
  ):not([id$="Toast"]):not(#toast):not(
    [class*="fixed"][class*="top-"][class*="left-1/2"]
  ) {
  border: 1px solid rgba(255, 255, 255, 0.82);
  background-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow:
    0 34px 90px rgba(12, 41, 33, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  backdrop-filter: blur(26px) saturate(155%);
}

html.ios-ui-v151 #root :is(div, section, article)[class*="bg-white"][class*="rounded-"] {
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.42s ease;
}

/* Portal Guru — hero dashboard dengan kontras kuat dan kedalaman iOS. */
html.ios-ui-v151 .portal-guru-dashboard > .portal-school-report-gradient {
  isolation: isolate;
  min-height: 172px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background:
    radial-gradient(circle at 88% 6%, rgba(150, 255, 222, 0.35), transparent 27%),
    radial-gradient(circle at 66% 115%, rgba(53, 220, 178, 0.28), transparent 38%),
    linear-gradient(132deg, #063d38 0%, #087a67 43%, #0ca77f 72%, #37c79b 100%) !important;
  box-shadow:
    0 28px 70px rgba(4, 92, 73, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(2, 75, 61, 0.32) !important;
  transform: translateZ(0);
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s ease;
}

html.ios-ui-v151 .portal-guru-dashboard > .portal-school-report-gradient::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.12), transparent 35%),
    repeating-linear-gradient(
      118deg,
      transparent 0,
      transparent 28px,
      rgba(255, 255, 255, 0.025) 29px,
      rgba(255, 255, 255, 0.025) 30px
    );
  content: "";
  pointer-events: none;
}

html.ios-ui-v151 .portal-guru-dashboard > .portal-school-report-gradient::after {
  position: absolute;
  z-index: -1;
  top: -96px;
  right: -58px;
  width: 270px;
  height: 270px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  box-shadow:
    0 0 0 34px rgba(255, 255, 255, 0.035),
    0 0 0 70px rgba(255, 255, 255, 0.018);
  content: "";
  pointer-events: none;
}

html.ios-ui-v151 .portal-guru-dashboard > .portal-school-report-gradient h2 {
  color: #fff !important;
  font-weight: 800;
  letter-spacing: -0.045em;
  text-shadow: 0 3px 20px rgba(0, 48, 39, 0.23);
}

html.ios-ui-v151 .portal-guru-dashboard > .portal-school-report-gradient p {
  color: rgba(239, 255, 250, 0.9) !important;
  text-shadow: 0 2px 13px rgba(0, 54, 43, 0.18);
}

html.ios-ui-v151
  .portal-guru-dashboard
  > .portal-school-report-gradient
  > div
  > div[class*="bg-white"] {
  min-width: 190px;
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: #fff !important;
  background:
    linear-gradient(145deg, rgba(2, 65, 55, 0.74), rgba(4, 112, 91, 0.58)) !important;
  box-shadow:
    0 15px 34px rgba(0, 45, 37, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

html.ios-ui-v151
  .portal-guru-dashboard
  > .portal-school-report-gradient
  > div
  > div[class*="bg-white"]
  :is(p, span, strong, time) {
  color: #fff !important;
  opacity: 1 !important;
  text-shadow: 0 2px 10px rgba(0, 37, 30, 0.3);
}

html.ios-ui-v151
  .portal-guru-dashboard
  > .grid.grid-cols-2[class~="md:grid-cols-4"]
  > div {
  --metric-accent: #3b82f6;
  position: relative;
  isolation: isolate;
  min-height: 178px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.88) !important;
  background:
    radial-gradient(circle at 95% 0%, color-mix(in srgb, var(--metric-accent) 12%, transparent), transparent 43%),
    rgba(255, 255, 255, 0.82) !important;
  box-shadow:
    0 18px 44px color-mix(in srgb, var(--metric-accent) 9%, transparent),
    0 5px 14px rgba(20, 54, 45, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  transform: translateZ(0);
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.42s ease !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}

html.ios-ui-v151
  .portal-guru-dashboard
  > .grid.grid-cols-2[class~="md:grid-cols-4"]
  > div:nth-child(2) {
  --metric-accent: #a855f7;
}

html.ios-ui-v151
  .portal-guru-dashboard
  > .grid.grid-cols-2[class~="md:grid-cols-4"]
  > div:nth-child(3) {
  --metric-accent: #10b981;
}

html.ios-ui-v151
  .portal-guru-dashboard
  > .grid.grid-cols-2[class~="md:grid-cols-4"]
  > div:nth-child(4) {
  --metric-accent: #f59e0b;
}

html.ios-ui-v151
  .portal-guru-dashboard
  > .grid.grid-cols-2[class~="md:grid-cols-4"]
  > div::after {
  position: absolute;
  z-index: -1;
  top: -42px;
  right: -36px;
  width: 112px;
  height: 112px;
  border: 1px solid color-mix(in srgb, var(--metric-accent) 14%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 19px color-mix(in srgb, var(--metric-accent) 3%, transparent);
  content: "";
  pointer-events: none;
}

html.ios-ui-v151
  .portal-guru-dashboard
  > .grid.grid-cols-2[class~="md:grid-cols-4"]
  > div
  > div:first-child {
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow:
    0 13px 28px color-mix(in srgb, var(--metric-accent) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  transform: perspective(320px) rotateX(5deg) rotateY(-7deg);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

html.ios-ui-v151
  .portal-guru-dashboard
  > .grid.grid-cols-2[class~="md:grid-cols-4"]
  > div
  p.text-3xl {
  color: #15231f !important;
  font-weight: 800;
  letter-spacing: -0.05em;
}

html.ios-ui-v151
  .portal-guru-dashboard
  > .grid.grid-cols-2[class~="md:grid-cols-4"]
  > div
  p.text-xs {
  color: #66766f !important;
  font-weight: 700;
}

html.ios-ui-v151 .portal-teacher-today-schedule {
  border-color: rgba(33, 73, 62, 0.09) !important;
  background-color: rgba(255, 255, 255, 0.8) !important;
  box-shadow:
    0 20px 52px rgba(21, 58, 48, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.93) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

html.ios-ui-v151 .portal-teacher-schedule-card {
  border-color: rgba(35, 74, 64, 0.07) !important;
  transition:
    background-color 0.25s ease,
    transform 0.3s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  html.ios-ui-v151 #root :is(div, section, article)[class*="bg-white"][class*="rounded-"][class*="border"]:hover {
    border-color: rgba(7, 140, 114, 0.16) !important;
  }

  html.ios-ui-v151 .portal-guru-dashboard > .portal-school-report-gradient:hover {
    box-shadow:
      0 34px 82px rgba(4, 92, 73, 0.31),
      inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px);
  }

  html.ios-ui-v151
    .portal-guru-dashboard
    > .grid.grid-cols-2[class~="md:grid-cols-4"]
    > div:hover {
    border-color: color-mix(in srgb, var(--metric-accent) 22%, white) !important;
    box-shadow:
      0 25px 58px color-mix(in srgb, var(--metric-accent) 15%, transparent),
      inset 0 1px 0 #fff !important;
    transform: translateY(-5px) perspective(900px) rotateX(0.7deg);
  }

  html.ios-ui-v151
    .portal-guru-dashboard
    > .grid.grid-cols-2[class~="md:grid-cols-4"]
    > div:hover
    > div:first-child {
    transform: translateY(-2px) perspective(320px) rotateX(1deg) rotateY(7deg) scale(1.04);
  }

  html.ios-ui-v151 .portal-teacher-schedule-card:hover {
    background-color: rgba(235, 249, 244, 0.72) !important;
    transform: translateX(3px);
  }
}

@media (max-width: 700px) {
  html.ios-ui-v151 .portal-guru-dashboard > .portal-school-report-gradient {
    min-height: 0;
    padding: 23px !important;
    border-radius: 27px !important;
  }

  html.ios-ui-v151 .portal-guru-dashboard > .portal-school-report-gradient > .flex {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }

  html.ios-ui-v151
    .portal-guru-dashboard
    > .portal-school-report-gradient
    > div
    > div[class*="bg-white"] {
    width: min(100%, 220px);
    min-width: 0;
    align-self: flex-start;
    text-align: left;
  }

  html.ios-ui-v151
    .portal-guru-dashboard
    > .grid.grid-cols-2[class~="md:grid-cols-4"]
    > div {
    min-height: 156px;
    padding: 17px !important;
    border-radius: 22px !important;
  }
}

/*
 * Portal Guru mobile — modal berada di atas dock, memakai dynamic viewport,
 * dan panel di dalamnya dapat discroll sampai konten paling bawah.
 */
@media (max-width: 700px) {
  html.ios-ui-v151
    #root
    :is(
      .portal-form-modal,
      div[class*="fixed"][class*="inset-0"][class*="backdrop-blur"][class*="overflow-y-auto"]
    ) {
    z-index: 2147483500 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding:
      max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(18px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left)) !important;
    align-items: flex-start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.ios-ui-v151
    #root
    :is(
      .portal-form-modal,
      div[class*="fixed"][class*="inset-0"][class*="backdrop-blur"][class*="overflow-y-auto"]
    )
    > :is(.portal-form-dialog, div[class*="max-w-"][class*="rounded-"]) {
    width: 100% !important;
    max-height: calc(
      100dvh - max(24px, env(safe-area-inset-top)) -
        max(30px, env(safe-area-inset-bottom))
    ) !important;
    margin-block: auto !important;
    flex: 0 0 auto;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-padding-bottom: calc(28px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.ios-ui-v151
    #root
    :is(
      .portal-form-modal,
      div[class*="fixed"][class*="inset-0"][class*="backdrop-blur"][class*="overflow-y-auto"]
    )
    > :is(.portal-form-dialog, div[class*="max-w-"][class*="rounded-"])
    > :last-child {
    margin-bottom: max(10px, env(safe-area-inset-bottom));
  }
}