/*
 * ================================================================
 * Portal Pendidikan v244 — Sistem Desain "Eduvia Fresh"
 * ================================================================
 * Lapisan bersama untuk Portal Guru, Siswa, Sekolah, Yayasan, dan
 * Pengelola melalui scope html[data-portal-brand].
 *
 * Sifatnya aditif: file ini ditambahkan sebagai stylesheet
 * TERAKHIR di setiap halaman portal. Tidak ada file lama yang
 * diubah maupun dihapus — lapisan clay/neumorphism lama tetap
 * ada di baliknya dan hanya ditimpa pada lapisan presentasi.
 *
 * Arah desain: SaaS modern yang bersih — kartu putih dengan satu
 * bayangan lembut (bukan neumorphism dobel), hijau blue sebagai
 * identitas utama, aksen amber untuk status/penyorotan, radius
 * besar & konsisten, dan sedikit gerakan halus di sana-sini.
 * ================================================================
 */

html[data-portal-brand] {
  --eg-primary: #006fd1;
  --eg-primary-dark: #003f9e;
  --eg-primary-deep: #00347d;
  --eg-primary-light: #20a7ff;
  --eg-primary-soft: #dbeeff;
  --eg-accent: #f59e0b;
  --eg-accent-soft: #fef3c7;
  --eg-violet: #6366f1;
  --eg-violet-soft: #e0e7ff;
  --eg-danger: #e11d48;
  --eg-danger-soft: #ffe4e8;
  --eg-info: #0ea5e9;
  --eg-info-soft: #e0f2fe;

  --eg-ink: #0f2a22;
  --eg-body: #424e55;
  --eg-muted: #7c8f88;
  --eg-line: #e3ece7;
  --eg-line-soft: #edf4f1;
  --eg-surface: #ffffff;
  --eg-canvas: #f4f9f7;

  --eg-radius-xl: 26px;
  --eg-radius-lg: 20px;
  --eg-radius-md: 14px;
  --eg-radius-sm: 10px;
  --eg-radius-pill: 999px;

  --eg-shadow-xs: 0 1px 2px rgba(15, 42, 34, 0.05);
  --eg-shadow-sm: 0 4px 14px rgba(15, 42, 34, 0.06);
  --eg-shadow-md: 0 14px 34px -14px rgba(6, 52, 78, 0.28),
    0 2px 8px rgba(6, 52, 78, 0.05);
  --eg-shadow-lg: 0 28px 64px -20px rgba(6, 52, 78, 0.32);
  --eg-shadow-glow: 0 10px 26px -6px rgba(0, 111, 209, 0.4);

  --eg-font: "Manrope", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------
   1. Kanvas dasar
   --------------------------------------------------------------- */

html[data-portal-brand] {
  background: var(--eg-canvas) !important;
}

html[data-portal-brand] body {
  min-height: 100dvh !important;
  background:
    radial-gradient(circle at 4% -6%, rgba(7, 142, 232, 0.1), transparent 32%),
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.06), transparent 28%),
    var(--eg-canvas) !important;
  color: var(--eg-body);
  font-family: var(--eg-font);
  -webkit-font-smoothing: antialiased;
}

html[data-portal-brand] ::selection {
  background: var(--eg-primary-soft);
  color: var(--eg-primary-deep);
}

/* Scrollbar tipis bernuansa hijau di seluruh area portal */
html[data-portal-brand] ::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
html[data-portal-brand] ::-webkit-scrollbar-track {
  background: transparent;
}
html[data-portal-brand] ::-webkit-scrollbar-thumb {
  background: #cbe9de;
  border-radius: var(--eg-radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
html[data-portal-brand] ::-webkit-scrollbar-thumb:hover {
  background: #a9c9dc;
  background-clip: content-box;
}

/* ---------------------------------------------------------------
   2. Tipografi
   --------------------------------------------------------------- */

html[data-portal-brand] :is(h1, h2, h3, h4) {
  color: var(--eg-ink) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}

html[data-portal-brand] .head small,
html[data-portal-brand] em,
html[data-portal-brand] .unified-group em {
  color: var(--eg-primary-dark) !important;
  font-weight: 900 !important;
  letter-spacing: 0.14em !important;
}

/* ---------------------------------------------------------------
   3. Layar masuk / login
   --------------------------------------------------------------- */

html[data-portal-brand] :is(.center, .individual-login) {
  background:
    radial-gradient(circle at top left, rgba(7, 142, 232, 0.14), transparent 45%),
    radial-gradient(circle at bottom right, rgba(99, 102, 241, 0.08), transparent 40%),
    var(--eg-canvas) !important;
}

html[data-portal-brand] :is(
  .shell,
  .login-card,
  .auth-card,
  .portal-guru-login-dialog
) {
  border: 1px solid var(--eg-line) !important;
  background: var(--eg-surface) !important;
  border-radius: var(--eg-radius-xl) !important;
  box-shadow: var(--eg-shadow-lg) !important;
}

html[data-portal-brand] .choice {
  border: 1.5px solid var(--eg-line) !important;
  border-radius: var(--eg-radius-lg) !important;
  background: var(--eg-surface) !important;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
html[data-portal-brand] .choice:hover {
  border-color: var(--eg-primary-light) !important;
  transform: translateY(-2px);
}
html[data-portal-brand] .choice.active {
  border-color: var(--eg-primary) !important;
  background: linear-gradient(160deg, var(--eg-primary-soft), #fff) !important;
  box-shadow: var(--eg-shadow-sm) !important;
}

/* ---------------------------------------------------------------
   4. Header / topbar
   --------------------------------------------------------------- */

html[data-portal-brand] #root header {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid var(--eg-line) !important;
  box-shadow: 0 2px 16px rgba(15, 42, 34, 0.04) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
}

html[data-portal-brand] .portal-premium-status {
  border-radius: var(--eg-radius-pill) !important;
  box-shadow: var(--eg-shadow-xs) !important;
}

html[data-portal-brand] #root header button[aria-label="Buka profil"] img {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--eg-primary-light) !important;
}

/* ---------------------------------------------------------------
   5. Sidebar navigasi desktop
   --------------------------------------------------------------- */

html[data-portal-brand] :is(.unified-sidebar, aside.sidebar) {
  background: var(--eg-surface) !important;
  border-right: 1px solid var(--eg-line) !important;
  box-shadow: 6px 0 26px rgba(15, 42, 34, 0.035) !important;
}

html[data-portal-brand] .unified-brand small {
  color: var(--eg-primary-dark) !important;
}

html[data-portal-brand] .unified-group button,
html[data-portal-brand] .portal-nav-desktop > button {
  border-radius: var(--eg-radius-md) !important;
  font-weight: 700 !important;
  color: var(--eg-body) !important;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
}

html[data-portal-brand] .unified-group button:hover,
html[data-portal-brand] .portal-nav-desktop > button:hover {
  background: var(--eg-line-soft) !important;
  color: var(--eg-primary-dark) !important;
}

/* Indikator aktif: pil gradien blue + glow lembut. Selector di-copy
   sama persis strukturnya dengan portal-active-clay-v234.css supaya
   spesifisitas CSS-nya setara, lalu dimenangkan lewat urutan file. */
html[data-portal-brand] body :is(
  #groupNav > button.active,
  #subNav > button.active,
  #foundationNav > button.active,
  #ownerNav > button.active,
  .sidebar nav > button.active,
  .unified-group button.active,
  .unified-sidebar nav button.active,
  .portal-nav-desktop > button:is(
    .active,
    .bg-blue-500,
    .bg-blue-50,
    .text-blue-500,
    .portal-accreditation-nav-active,
    [aria-current="page"],
    [aria-selected="true"],
    [aria-pressed="true"]
  ),
  .nav-button.active,
  [role="tablist"] button:is(.active, [aria-selected="true"]),
  [role="tab"]:is(.active, [aria-selected="true"]),
  nav button:is(.active, [aria-current="page"])
) {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--eg-primary) 0%, var(--eg-primary-deep) 100%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: var(--eg-shadow-glow) !important;
  text-shadow: none !important;
  transform: none !important;
}

html[data-portal-brand] body :is(
  .portal-nav-desktop > button:is(.active, .bg-blue-500, .bg-blue-50),
  .unified-group button.active
) svg {
  color: #fff !important;
  stroke: #fff !important;
}

/* ---------------------------------------------------------------
   6. Dock navigasi mobile
   --------------------------------------------------------------- */

html[data-portal-brand] :is(.unified-bottom, .portal-nav-mobile) {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid var(--eg-line) !important;
  box-shadow: 0 -10px 30px rgba(15, 42, 34, 0.06) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
}

html[data-portal-brand] :is(.unified-bottom, .portal-nav-mobile) > button {
  color: #94a8a0 !important;
  font-weight: 700 !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
}

html[data-portal-brand] body :is(
  .unified-bottom button.active,
  .portal-nav-mobile > button:is(
    .active,
    .bg-blue-500,
    .bg-blue-50,
    .text-blue-500,
    [aria-current="page"],
    [aria-selected="true"]
  )
) {
  background: transparent !important;
  color: var(--eg-primary) !important;
  -webkit-text-fill-color: var(--eg-primary) !important;
  box-shadow: none !important;
  transform: translateY(-2px);
}

html[data-portal-brand] body :is(
  .unified-bottom button.active,
  .portal-nav-mobile > button:is(.active, .bg-blue-500, .bg-blue-50)
) svg {
  filter: drop-shadow(0 4px 8px rgba(0, 111, 209, 0.35));
}

/* ---------------------------------------------------------------
   7. Tab kategori (mis. akreditasi, akun sekolah)
   --------------------------------------------------------------- */

html[data-portal-brand] :is(
  .portal-guru-category-tabs-v133,
  .school-account-tabs
) {
  background: var(--eg-line-soft);
  padding: 5px !important;
  border-radius: var(--eg-radius-pill) !important;
}

html[data-portal-brand] .portal-guru-category-tabs-v133 > button {
  background: transparent !important;
  border-radius: var(--eg-radius-pill) !important;
  color: var(--eg-muted) !important;
  font-weight: 800 !important;
}

html[data-portal-brand] .portal-guru-category-tabs-v133 > button:is(
  .bg-blue-500,
  .portal-accreditation-nav-active
) {
  background: var(--eg-surface) !important;
  color: var(--eg-primary-dark) !important;
  box-shadow: var(--eg-shadow-sm) !important;
}

/* ---------------------------------------------------------------
   8. Hero / panel sambutan dashboard
   --------------------------------------------------------------- */

html[data-portal-brand] :is(
  .welcome,
  .dashboard-hero,
  [class$="-hero"]
) {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  border-radius: var(--eg-radius-xl) !important;
  background: linear-gradient(135deg, #078ee8 0%, #006fd1 46%, #0d577d 100%) !important;
  box-shadow: var(--eg-shadow-md) !important;
}

html[data-portal-brand] :is(.welcome, .dashboard-hero, [class$="-hero"])::before,
html[data-portal-brand] :is(.welcome, .dashboard-hero, [class$="-hero"])::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
html[data-portal-brand] :is(.welcome, .dashboard-hero, [class$="-hero"])::before {
  width: 220px;
  height: 220px;
  top: -90px;
  right: -60px;
  background: rgba(255, 255, 255, 0.14);
}
html[data-portal-brand] :is(.welcome, .dashboard-hero, [class$="-hero"])::after {
  width: 140px;
  height: 140px;
  bottom: -70px;
  left: 18%;
  background: rgba(255, 255, 255, 0.08);
}

html[data-portal-brand] :is(.welcome, .dashboard-hero, [class$="-hero"]) :is(h1, h2, h3, p, span, small, b) {
  color: #fff !important;
  position: relative;
  z-index: 1;
  text-shadow: none !important;
}

/* ---------------------------------------------------------------
   9. Kartu & panel generik
   --------------------------------------------------------------- */

html[data-portal-brand] :is(
  .card,
  .panel,
  .portal-card,
  article,
  [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 var(--eg-line) !important;
  background: var(--eg-surface) !important;
  border-radius: var(--eg-radius-lg) !important;
  box-shadow: var(--eg-shadow-sm) !important;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease !important;
}

html[data-portal-brand] :is(
  .card,
  .panel,
  .portal-card,
  article,
  [class$="-card"],
  [class$="-panel"]
):not(button):not([role="button"]):hover {
  box-shadow: var(--eg-shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* Grid statistik ringkas di beranda */
html[data-portal-brand] .management-grid > div {
  background: linear-gradient(160deg, #fff, var(--eg-line-soft)) !important;
  border: 1px solid var(--eg-line) !important;
  border-radius: var(--eg-radius-lg) !important;
}
html[data-portal-brand] .management-grid b {
  color: var(--eg-primary-deep) !important;
}

html[data-portal-brand] .attendance-state {
  background: var(--eg-primary-soft) !important;
  border-radius: var(--eg-radius-md) !important;
  border: 1px solid rgba(0, 111, 209, 0.16);
}

/* ---------------------------------------------------------------
   10. Tombol
   --------------------------------------------------------------- */

html[data-portal-brand] :is(.primary, .is-primary, button[type="submit"].primary) {
  background: linear-gradient(135deg, var(--eg-primary), var(--eg-primary-deep)) !important;
  border: 0 !important;
  border-radius: var(--eg-radius-md) !important;
  font-weight: 800 !important;
  box-shadow: var(--eg-shadow-glow) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
html[data-portal-brand] :is(.primary, .is-primary):hover {
  transform: translateY(-1px) !important;
}
html[data-portal-brand] :is(.primary, .is-primary):active {
  transform: scale(0.97) !important;
}

html[data-portal-brand] :is(.secondary, .is-secondary) {
  background: var(--eg-surface) !important;
  border: 1.5px solid var(--eg-primary) !important;
  color: var(--eg-primary-dark) !important;
  border-radius: var(--eg-radius-md) !important;
  font-weight: 800 !important;
}

html[data-portal-brand] :is(
  .danger,
  .is-danger,
  .buttons .out,
  header button[aria-label*="Keluar"],
  header button[title*="Keluar"]
) {
  background: var(--eg-danger-soft) !important;
  color: var(--eg-danger) !important;
  border-radius: var(--eg-radius-md) !important;
  font-weight: 800 !important;
  border: 0 !important;
}

html[data-portal-brand] .buttons button:not(.out) {
  background: var(--eg-primary-soft) !important;
  color: var(--eg-primary-deep) !important;
  border-radius: var(--eg-radius-sm) !important;
  font-weight: 800 !important;
}

/* ---------------------------------------------------------------
   11. Formulir & input
   --------------------------------------------------------------- */

html[data-portal-brand] label {
  color: var(--eg-muted) !important;
  font-weight: 800 !important;
}

html[data-portal-brand] :is(input, select, textarea) {
  background: var(--eg-canvas) !important;
  border: 1.5px solid var(--eg-line) !important;
  border-radius: var(--eg-radius-md) !important;
  color: var(--eg-ink) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

html[data-portal-brand] :is(input, select, textarea):focus {
  border-color: var(--eg-primary) !important;
  background: var(--eg-surface) !important;
  box-shadow: 0 0 0 4px rgba(0, 111, 209, 0.14) !important;
}

/* ---------------------------------------------------------------
   12. Tabel
   --------------------------------------------------------------- */

html[data-portal-brand] :is(
  table,
  .academic-table,
  .portal-gradebook-table,
  .report-v190-table
) {
  border-radius: var(--eg-radius-md);
  overflow: hidden;
}

html[data-portal-brand] th {
  background: var(--eg-line-soft) !important;
  color: var(--eg-primary-deep) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
}

html[data-portal-brand] :is(th, td) {
  border-bottom-color: var(--eg-line) !important;
}

html[data-portal-brand] tbody tr:hover {
  background: rgba(7, 142, 232, 0.05) !important;
}

/* ---------------------------------------------------------------
   13. Modal & dialog
   --------------------------------------------------------------- */

html[data-portal-brand] :is(.modal, [class$="-overlay"], [class$="-backdrop"], [role="dialog"]):not(.hidden) {
  background-color: rgba(9, 26, 21, 0.5) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  backdrop-filter: blur(3px) !important;
}

html[data-portal-brand] :is(
  .modal-card,
  [class$="-dialog"],
  [class$="-modal-card"],
  [class$="-modal"]
):not(button):not([role="button"]) {
  border: 1px solid var(--eg-line) !important;
  background: var(--eg-surface) !important;
  border-radius: var(--eg-radius-xl) !important;
  box-shadow: var(--eg-shadow-lg) !important;
}

html[data-portal-brand] .modal form {
  border-radius: var(--eg-radius-xl) !important;
}

/* ---------------------------------------------------------------
   14. Baris daftar / item (izin, riwayat, QR siswa, dst.)
   --------------------------------------------------------------- */

html[data-portal-brand] :is(
  .leave-row,
  .slip,
  .notice,
  .document-item,
  .teacher-task-history-item,
  .teacher-qr-student-row,
  .portal-student-row-v188,
  .setting-center-item-v210
) {
  border-radius: var(--eg-radius-md) !important;
  border-bottom: 1px solid var(--eg-line-soft) !important;
  transition: background-color 0.14s ease !important;
}

html[data-portal-brand] :is(
  .leave-row,
  .teacher-task-history-item,
  .teacher-qr-student-row,
  .portal-student-row-v188,
  .setting-center-item-v210
):hover {
  background: var(--eg-line-soft) !important;
}

/* ---------------------------------------------------------------
   15. Status badge & chip
   --------------------------------------------------------------- */

html[data-portal-brand] :is(
  .portal-leave-status,
  .report-v190-status,
  .report-v190-chip
) {
  border-radius: var(--eg-radius-pill) !important;
  font-weight: 800 !important;
  padding: 4px 12px !important;
}

html[data-portal-brand] :is(.portal-leave-status-approved, .is-success, .is-on-time, .approved) {
  background: var(--eg-primary-soft) !important;
  color: var(--eg-primary-deep) !important;
}
html[data-portal-brand] :is(.portal-leave-status-pending, .is-warning, .is-late, .submitted) {
  background: var(--eg-accent-soft) !important;
  color: #92400e !important;
}
html[data-portal-brand] :is(.portal-leave-status-rejected, .portal-leave-status-cancelled, .is-danger, .is-overdue, .late) {
  background: var(--eg-danger-soft) !important;
  color: var(--eg-danger) !important;
}
html[data-portal-brand] .revision {
  background: var(--eg-violet-soft) !important;
  color: var(--eg-violet) !important;
}

/* ---------------------------------------------------------------
   16. Pusat pengaturan (settings center)
   --------------------------------------------------------------- */

html[data-portal-brand] .setting-center-hero-v210 {
  background: linear-gradient(135deg, #078ee8, #0d577d) !important;
  border-radius: var(--eg-radius-xl) !important;
  box-shadow: var(--eg-shadow-md) !important;
}
html[data-portal-brand] .setting-center-hero-v210 * {
  color: #fff !important;
}
html[data-portal-brand] .setting-center-card-v210 {
  border-radius: var(--eg-radius-lg) !important;
  border: 1px solid var(--eg-line) !important;
  background: var(--eg-surface) !important;
  box-shadow: var(--eg-shadow-xs) !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease !important;
}
html[data-portal-brand] .setting-center-card-v210:hover {
  box-shadow: var(--eg-shadow-sm) !important;
  transform: translateY(-2px) !important;
}
html[data-portal-brand] .setting-center-card-icon-v210 {
  background: var(--eg-primary-soft) !important;
  color: var(--eg-primary-deep) !important;
  border-radius: var(--eg-radius-sm) !important;
}

/* ---------------------------------------------------------------
   17. Status kosong & pemuatan
   --------------------------------------------------------------- */

html[data-portal-brand] :is(
  .academic-empty,
  .teacher-qr-empty,
  .teacher-scan-empty,
  [class$="-empty"]
) {
  color: var(--eg-muted) !important;
  background: var(--eg-line-soft) !important;
  border-radius: var(--eg-radius-lg) !important;
  border: 1px dashed var(--eg-line) !important;
}

html[data-portal-brand] .loading {
  background: var(--eg-surface) !important;
  border-radius: var(--eg-radius-pill) !important;
  box-shadow: var(--eg-shadow-md) !important;
  border: 1px solid var(--eg-line) !important;
  color: var(--eg-primary-dark) !important;
  font-weight: 800 !important;
}

/* ---------------------------------------------------------------
   18. Animasi masuk halus (dihormati prefers-reduced-motion)
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @keyframes eg-fade-up {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  html[data-portal-brand] :is(.welcome, .dashboard-hero, [class$="-hero"]) {
    animation: eg-fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-portal-brand] * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------
   19. Penyesuaian mobile
   --------------------------------------------------------------- */

@media (max-width: 760px) {
  html[data-portal-brand] :is(.welcome, .dashboard-hero, [class$="-hero"]) {
    border-radius: var(--eg-radius-lg) !important;
  }
  html[data-portal-brand] :is(
    .card,
    .panel,
    [class$="-card"],
    [class$="-panel"]
  ):not(button):hover {
    transform: none !important;
  }
}