/* Tata Usaha › Serah Terima Rapor
   Palet & bentuk sama dengan Periksa 5K (satu aksen hijau hutan, token --app-*).
   main.css memaksa semua <button> berbentuk pil, jadi radius tombol/isian di sini memakai !important. */

#serahRaporView {
  --sr-card: var(--app-card, #ffffff);
  --sr-text: var(--app-text, #18201b);
  --sr-dim: var(--app-dim, #5e6b63);
  --sr-line: var(--app-border, #dfe4e0);
  --sr-fill: var(--app-muted, #eef1ee);
  --sr-accent: #2f6f4e;
  --sr-accent-soft: color-mix(in srgb, var(--sr-accent) 10%, transparent);
  --sr-on-accent: #ffffff;
  --sr-bad: #b54a3c;
  --sr-r-lg: 16px;
  --sr-r: 10px;
  --sr-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sr-nav: calc(var(--device-nav-height, 56px) + var(--device-safe-top, 0px));
  --sr-glass: color-mix(in srgb, var(--sr-card) 86%, transparent);
  color: var(--sr-text);
  font: 15px/1.5 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0;
}
[data-theme="dark"] #serahRaporView {
  --sr-accent: #7cc49a;
  --sr-on-accent: #0b1f14;
  --sr-bad: #f08a7e;
}
#serahRaporView *, #serahRaporView *::before, #serahRaporView *::after { box-sizing: border-box; }
#serahRaporView .sr-shell { max-width: 1040px; margin: 0 auto; padding: 18px 24px 40px; }
#serahRaporView .sr-shell.sr-has-bar { padding-bottom: 132px; }
#serahRaporView p { margin: 0; }
#serahRaporView .sr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Tombol ── */
#serahRaporView button, #serahRaporView select, #serahRaporView input { font: inherit; }
#serahRaporView button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px; padding: 9px 15px; border: 1px solid var(--sr-line); border-radius: var(--sr-r) !important;
  background: var(--sr-card); color: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; box-shadow: none;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--sr-ease), background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
@media (hover: hover) { #serahRaporView button:hover:not(:disabled) { background: var(--sr-fill); } }
#serahRaporView button:active:not(:disabled) { transform: scale(0.97); transition-duration: 100ms; }
#serahRaporView button:disabled { opacity: 0.45; cursor: not-allowed; }
#serahRaporView :is(button, select, input):focus-visible { outline: 3px solid color-mix(in srgb, var(--sr-accent) 50%, transparent); outline-offset: 2px; }
#serahRaporView .sr-back { min-height: 36px; margin: 0 0 4px -8px; padding: 4px 8px; border-color: transparent; background: transparent; color: var(--sr-accent); }
@media (hover: hover) { #serahRaporView .sr-back:hover:not(:disabled) { background: var(--sr-accent-soft); } }
#serahRaporView .sr-primary { border-color: var(--sr-accent); background: var(--sr-accent); color: var(--sr-on-accent); }
@media (hover: hover) { #serahRaporView .sr-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--sr-accent) 88%, #000); } }
#serahRaporView .sr-sekunder { border-color: color-mix(in srgb, var(--sr-accent) 45%, var(--sr-line)); color: var(--sr-accent); }
#serahRaporView .sr-lihat { background: transparent; color: var(--sr-dim); }

/* ── Kepala halaman & periode ── */
#serahRaporView .sr-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 6px 0 20px; }
#serahRaporView h1 { margin: 0 0 4px; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
#serahRaporView .sr-heading p { color: var(--sr-dim); font-size: 13.5px; }
#serahRaporView .sr-paper { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; background: var(--sr-fill); color: var(--sr-dim); font-size: 12px; font-weight: 650; white-space: nowrap; }
#serahRaporView .sr-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 24px; padding: 16px 18px; border: 1px solid var(--sr-line); border-radius: var(--sr-r-lg); background: var(--sr-card); }
#serahRaporView .sr-period > label { flex: 0 1 220px; }
#serahRaporView .sr-period-smt { display: grid; gap: 6px; flex: 1 1 320px; max-width: 420px; }
#serahRaporView label, #serahRaporView .sr-label { display: block; font-size: 12.5px; font-weight: 650; color: var(--sr-dim); }

/* ── Pemilih semester (segmented control) ──
   Indikator bergeser lewat --i; kurva tanpa pantulan karena ini perpindahan mode, bukan lemparan. */
#serahRaporView .sr-segmen { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 3px; border-radius: 12px; background: var(--sr-fill); isolation: isolate; }
#serahRaporView .sr-segmen::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n)); border-radius: 9px; background: var(--sr-card); box-shadow: 0 1px 3px rgb(0 0 0 / 0.12), 0 0 0 0.5px rgb(0 0 0 / 0.06); transform: translateX(calc(var(--i) * 100%)); transition: transform 300ms var(--sr-ease); }
[data-theme="dark"] #serahRaporView .sr-segmen::before { background: color-mix(in srgb, var(--sr-text) 18%, var(--sr-card)); box-shadow: 0 1px 3px rgb(0 0 0 / 0.4); }
#serahRaporView .sr-segmen button { min-height: 38px; padding: 6px 8px; border: 0; background: transparent !important; color: var(--sr-dim); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
#serahRaporView .sr-segmen button[aria-checked="true"] { color: var(--sr-text); font-weight: 700; }
#serahRaporView .sr-segmen button:active:not(:disabled) { transform: scale(0.95); }
#serahRaporView select, #serahRaporView input[type=text] {
  display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--sr-line); border-radius: var(--sr-r) !important; background: var(--sr-card); color: var(--sr-text);
  font-size: 14.5px; font-weight: 500; box-shadow: none; transition: border-color 160ms ease;
}
#serahRaporView .sr-period select { max-width: 220px; }
#serahRaporView select:focus, #serahRaporView input[type=text]:focus { border-color: var(--sr-accent); }
#serahRaporView .sr-status { min-height: 22px; margin: 10px 2px 0; color: var(--sr-dim); font-size: 13px; }
#serahRaporView .sr-error { margin: 10px 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--sr-bad) 45%, var(--sr-line)); border-radius: var(--sr-r); color: var(--sr-bad); }
#serahRaporView .sr-kosong { padding: 28px 12px; text-align: center; color: var(--sr-dim); }
#serahRaporView .sr-skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
#serahRaporView .sr-skeleton span { height: 92px; border-radius: var(--sr-r-lg); background: var(--sr-fill); animation: sr-pulse 1.2s ease-in-out infinite; }
@keyframes sr-pulse { 50% { opacity: 0.55; } }

/* ── Kartu kelas ── */
#serahRaporView .sr-group { margin-top: 22px; }
#serahRaporView .sr-group-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--sr-dim); }
#serahRaporView .sr-group-title small { padding: 1px 8px; border-radius: 999px; background: var(--sr-fill); font-size: 11.5px; letter-spacing: 0; }
#serahRaporView .sr-group-title small.is-belum { background: color-mix(in srgb, var(--sr-bad) 12%, transparent); color: var(--sr-bad); }
#serahRaporView .sr-group-title small.is-lengkap { background: var(--sr-accent-soft); color: var(--sr-accent); }
#serahRaporView .sr-kelas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
#serahRaporView .sr-kelas { position: relative; display: flex; border: 1px solid var(--sr-line); border-radius: var(--sr-r-lg); background: var(--sr-card); overflow: hidden; transition: border-color 160ms ease, background-color 160ms ease; }
#serahRaporView .sr-kelas.is-picked { border-color: color-mix(in srgb, var(--sr-accent) 55%, var(--sr-line)); background: color-mix(in srgb, var(--sr-accent) 5%, var(--sr-card)); }
#serahRaporView .sr-pick { display: grid; place-items: center; flex: 0 0 48px; margin: 0; cursor: pointer; }
#serahRaporView .sr-pick input { width: 20px; height: 20px; margin: 0; accent-color: var(--sr-accent); cursor: pointer; }
#serahRaporView .sr-buka { flex: 1; flex-direction: column; align-items: stretch; gap: 8px; min-height: 88px; padding: 14px 14px 14px 0; border: 0; border-radius: 0 !important; background: transparent; text-align: left; font-weight: 500; }
#serahRaporView .sr-buka strong { font-size: 16px; letter-spacing: -0.01em; }
#serahRaporView .sr-buka-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#serahRaporView .sr-sisa { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--sr-bad) 12%, transparent); color: var(--sr-bad); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
#serahRaporView .sr-sisa.is-lengkap { background: var(--sr-accent-soft); color: var(--sr-accent); }
#serahRaporView .sr-prog.is-nihil em { grid-column: 2 / 4; font-style: normal; color: var(--sr-dim); opacity: 0.8; }
#serahRaporView .sr-prog { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sr-dim); font-variant-numeric: tabular-nums; }
#serahRaporView .sr-prog b { min-width: 38px; text-align: right; color: var(--sr-text); font-weight: 650; }
#serahRaporView .sr-bar { display: block; height: 6px; border-radius: 999px; background: var(--sr-fill); overflow: hidden; }
#serahRaporView .sr-bar i { display: block; height: 100%; border-radius: inherit; background: var(--sr-accent); transition: width 260ms var(--sr-ease); }

/* ── Detail kelas ── */
/* Bar alat menempel di bawah navigasi sebagai lapisan tembus pandang; tepi lembut hanya muncul saat daftar tergulir di bawahnya. */
#serahRaporView .sr-sentinel { height: 1px; }
#serahRaporView .sr-tools {
  position: sticky; top: var(--sr-nav); z-index: 15; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px;
  margin: 0 -10px 12px; padding: 10px; border-radius: var(--sr-r-lg); background: var(--sr-glass);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
}
#serahRaporView .sr-tools::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -10px; height: 10px; pointer-events: none; background: linear-gradient(to bottom, rgb(0 0 0 / 0.07), transparent); opacity: 0; transition: opacity 200ms ease; }
#serahRaporView .sr-tools.is-stuck { border-radius: 0 0 var(--sr-r-lg) var(--sr-r-lg); }
#serahRaporView .sr-tools.is-stuck::after { opacity: 1; }
#serahRaporView .sr-tools .sr-segmen { flex: 1 1 340px; max-width: 420px; }
#serahRaporView .sr-ringkas { display: flex; flex-wrap: wrap; gap: 8px; order: 5; flex: 1 1 100%; }
#serahRaporView .sr-chip { padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--sr-bad) 11%, transparent); color: var(--sr-bad); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
#serahRaporView .sr-chip.is-lengkap { background: var(--sr-accent-soft); color: var(--sr-accent); }
#serahRaporView .sr-chip.is-nihil { background: var(--sr-fill); color: var(--sr-dim); }
#serahRaporView .sr-cari { flex: 1 1 200px; max-width: 260px; }
#serahRaporView .sr-saring { flex: 0 1 190px; }
#serahRaporView .sr-isi { animation: sr-masuk 180ms ease-out; }
@keyframes sr-masuk { from { opacity: 0; } }
#serahRaporView .sr-info { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--sr-r); background: var(--sr-fill); color: var(--sr-dim); font-size: 13.5px; }
#serahRaporView .sr-tabel { border: 1px solid var(--sr-line); border-radius: var(--sr-r-lg); background: var(--sr-card); overflow: hidden; }
#serahRaporView .sr-th, #serahRaporView .sr-tr { display: grid; grid-template-columns: 44px minmax(0, 1fr) 152px 152px 152px; align-items: center; gap: 10px; padding: 8px 14px; }
#serahRaporView .sr-th { background: var(--sr-fill); color: var(--sr-dim); font-size: 12px; font-weight: 700; }
#serahRaporView .sr-tr + .sr-tr { border-top: 1px solid var(--sr-line); }
#serahRaporView .sr-no { color: var(--sr-dim); font-variant-numeric: tabular-nums; }
#serahRaporView .sr-nama { display: grid; min-width: 0; }
#serahRaporView .sr-nama strong { font-weight: 600; overflow-wrap: anywhere; }
#serahRaporView .sr-nama small { color: var(--sr-dim); font-size: 12px; font-weight: 500; }
#serahRaporView .sr-lencana { padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--sr-bad) 12%, transparent); color: var(--sr-bad); font-weight: 700; }
#serahRaporView .sr-smt { width: 100%; justify-content: flex-start; min-height: 44px; padding: 6px 10px; color: var(--sr-dim); font-weight: 550; }
#serahRaporView .sr-smt-tanda { display: grid; place-items: center; flex: 0 0 22px; height: 22px; border: 1.5px solid var(--sr-line); border-radius: 6px; font-size: 14px; font-weight: 800; line-height: 1; transition: background-color 120ms ease, border-color 120ms ease, transform 200ms var(--sr-ease); }
#serahRaporView .sr-smt .sr-teks { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#serahRaporView :is(.sr-smt, .sr-cepat).is-ok { border-color: color-mix(in srgb, var(--sr-accent) 50%, var(--sr-line)); background: var(--sr-accent-soft); color: var(--sr-text); }
#serahRaporView :is(.sr-smt, .sr-cepat).is-ok .sr-smt-tanda { border-color: var(--sr-accent); background: var(--sr-accent); color: var(--sr-on-accent); }
#serahRaporView :is(.sr-smt, .sr-cepat).is-menyimpan .sr-teks { color: var(--sr-dim); }
#serahRaporView :is(.sr-smt, .sr-cepat).is-gagal { border-color: color-mix(in srgb, var(--sr-bad) 55%, var(--sr-line)); background: color-mix(in srgb, var(--sr-bad) 8%, var(--sr-card)); }
#serahRaporView :is(.sr-smt, .sr-cepat).is-gagal .sr-teks { color: var(--sr-bad); font-weight: 650; }
#serahRaporView :is(.sr-smt, .sr-cepat).is-gagal .sr-smt-tanda { border-color: var(--sr-bad); background: transparent; color: var(--sr-bad); }
/* "Tidak wajib" bukan tombol: tanpa bingkai, redup. */
#serahRaporView .sr-nihil { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--sr-dim); font-size: 12.5px; opacity: 0.75; }

/* ── Mode isi cepat: satu semester, seluruh baris bisa diketuk ── */
#serahRaporView .sr-daftar { margin: 0; padding: 0; list-style: none; border: 1px solid var(--sr-line); border-radius: var(--sr-r-lg); background: var(--sr-card); overflow: hidden; }
#serahRaporView .sr-daftar > li + li { border-top: 1px solid var(--sr-line); }
#serahRaporView .sr-cepat {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 28px; align-items: center; gap: 12px;
  width: 100%; min-height: 60px; padding: 8px 16px; border: 0; border-radius: 0 !important; background: transparent; text-align: left; font-weight: 500;
}
#serahRaporView .sr-cepat .sr-teks { color: var(--sr-dim); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
#serahRaporView .sr-cepat .sr-smt-tanda { width: 28px; height: 28px; flex-basis: 28px; border-radius: 8px; font-size: 16px; }
#serahRaporView .sr-cepat.is-ok { border: 0; }
#serahRaporView .sr-cepat.is-ok .sr-teks { color: var(--sr-accent); font-weight: 600; }
#serahRaporView .sr-cepat.is-gagal { border: 0; }
#serahRaporView .sr-cepat.is-nihil .sr-nihil { grid-column: 3 / 5; justify-self: end; }
#serahRaporView button.sr-cepat:active:not(:disabled) { transform: none; background: var(--sr-fill); }
#serahRaporView button.sr-cepat:active:not(:disabled) .sr-smt-tanda { transform: scale(0.88); }

/* ── Bilah unduh ── */
#serahRaporView .sr-download { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px max(24px, calc((100vw - 992px) / 2)) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sr-line); background: color-mix(in srgb, var(--sr-card) 94%, transparent); backdrop-filter: blur(14px); }
#serahRaporView .sr-download-text { display: grid; margin-right: auto; min-width: 0; }
#serahRaporView .sr-download-text small { color: var(--sr-dim); font-size: 12.5px; overflow-wrap: anywhere; }
#serahRaporView .sr-download-text small.is-error { color: var(--sr-bad); }
#serahRaporView .sr-download-text small.is-notice { color: var(--sr-accent); }

/* ── Toast urungkan: lapisan padat (bukan kaca di atas kaca), terbalik warnanya agar menonjol ── */
#serahRaporView .sr-toast {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 25; display: flex; align-items: center; gap: 14px;
  max-width: min(520px, calc(100vw - 32px)); padding: 8px 8px 8px 16px; border-radius: 14px; background: var(--sr-text); color: var(--sr-card);
  font-size: 14px; font-weight: 550; box-shadow: 0 10px 30px rgb(0 0 0 / 0.22);
  opacity: 0; pointer-events: none; transform: translate(-50%, 12px) scale(0.98); transition: opacity 200ms ease, transform 300ms var(--sr-ease);
}
#serahRaporView .sr-toast.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
#serahRaporView .sr-toast span { min-width: 0; overflow-wrap: anywhere; }
#serahRaporView .sr-toast button { flex: 0 0 auto; min-height: 40px; border: 0; background: transparent; color: color-mix(in srgb, var(--sr-accent) 55%, var(--sr-card)); font-weight: 750; }
@media (hover: hover) { #serahRaporView .sr-toast button:hover:not(:disabled) { background: color-mix(in srgb, var(--sr-card) 14%, transparent); } }

/* ── Tablet: kartu 2–3 kolom, target sentuh lega, bilah bawah tidak berdesakan ── */
@media (min-width: 721px) and (max-width: 1180px) {
  #serahRaporView .sr-kelas-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  #serahRaporView .sr-th, #serahRaporView .sr-tr { grid-template-columns: 36px minmax(0, 1fr) repeat(3, minmax(118px, 150px)); gap: 8px; padding: 8px 12px; }
  #serahRaporView .sr-smt { min-height: 48px; }
  #serahRaporView .sr-cepat { min-height: 64px; }
  #serahRaporView .sr-download { flex-wrap: wrap; row-gap: 8px; padding-left: 20px; padding-right: 20px; }
  #serahRaporView .sr-download-text { flex: 1 1 260px; }
  #serahRaporView .sr-shell.sr-has-bar { padding-bottom: 150px; }
}

@media (max-width: 720px) {
  #serahRaporView .sr-shell { padding: 14px 16px 36px; }
  #serahRaporView .sr-shell.sr-has-bar { padding-bottom: 168px; }
  #serahRaporView .sr-heading { align-items: flex-start; }
  #serahRaporView .sr-paper { display: none; }
  #serahRaporView .sr-cari, #serahRaporView .sr-saring { max-width: none; flex: 1 1 140px; }
  #serahRaporView .sr-tools .sr-segmen, #serahRaporView .sr-period-smt { flex: 1 1 100%; max-width: none; }
  #serahRaporView .sr-tools { margin: 0 -16px 12px; padding: 10px 16px; border-radius: 0; }
  #serahRaporView .sr-cepat { grid-template-columns: 26px minmax(0, 1fr) 28px; padding: 10px 14px; }
  #serahRaporView .sr-cepat .sr-teks { grid-column: 2; grid-row: 2; text-align: left; }
  #serahRaporView .sr-cepat .sr-smt-tanda { grid-column: 3; grid-row: 1 / 3; }
  #serahRaporView .sr-cepat.is-nihil .sr-nihil { grid-column: 2; min-height: 0; padding: 0; }
  #serahRaporView .sr-toast { bottom: calc(146px + env(safe-area-inset-bottom)); }
  #serahRaporView .sr-th { display: none; }
  #serahRaporView .sr-tr { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); row-gap: 8px; padding: 12px; }
  #serahRaporView .sr-nama { grid-column: 2 / 4; }
  #serahRaporView .sr-tr > span:nth-child(3) { grid-column: 2; }
  #serahRaporView .sr-tr > span:nth-child(4) { grid-column: 3; }
  #serahRaporView .sr-tr > span:nth-child(5) { grid-column: 2 / 4; }
  #serahRaporView .sr-download { flex-wrap: wrap; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  #serahRaporView .sr-download-text { flex: 1 1 100%; }
  #serahRaporView .sr-download button { flex: 1 1 0; }
}
/* Gerak dikurangi: tanpa geser/skala, cukup pudar warna. */
@media (prefers-reduced-motion: reduce) {
  #serahRaporView *, #serahRaporView *::before, #serahRaporView *::after { animation: none !important; transition: opacity 150ms ease, background-color 150ms ease, color 150ms ease !important; }
  #serahRaporView .sr-toast { transform: translate(-50%, 0) !important; }
  #serahRaporView button:active:not(:disabled), #serahRaporView .sr-smt-tanda { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  #serahRaporView .sr-tools, #serahRaporView .sr-download { background: var(--sr-card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  #serahRaporView { --sr-line: color-mix(in srgb, var(--sr-text) 45%, transparent); }
  #serahRaporView .sr-tools, #serahRaporView .sr-download { background: var(--sr-card); border-bottom: 1px solid var(--sr-line); }
  #serahRaporView .sr-nihil { opacity: 1; }
}