/*
 * Portal Pendidikan — UI Unified v01
 * Lapisan final untuk menyamakan tipografi portal dengan landing page,
 * merapikan skala teks, dan memastikan setiap tombol memiliki kontras jelas.
 */

:root {
  --portal-v01-font: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --portal-v01-ink: #11243f;
  --portal-v01-body: #4f5f5b;
  --portal-v01-muted: #6f7f7b;
  --portal-v01-line: #dce9e4;
  --portal-v01-soft: #f2f8f5;
  --portal-v01-white: #ffffff;
  --portal-v01-green: #078ee8;
  --portal-v01-blue-dark: #00347d;
  --portal-v01-blue-soft: #eaf4ff;
  --portal-v01-blue: #2563eb;
  --portal-v01-amber: #f6c453;
  --portal-v01-amber-ink: #5b3500;
  --portal-v01-red: #be123c;
  --portal-v01-radius: 14px;
  --portal-v01-focus: 0 0 0 3px rgba(0, 52, 125, 0.16);
}

html[data-portal-brand],
html[data-portal-page="selector"] {
  font-family: var(--portal-v01-font) !important;
  font-size: 16px !important;
  color: var(--portal-v01-ink);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html[data-portal-brand] :is(body, button, input, select, textarea, option, table),
html[data-portal-page="selector"] :is(body, button, input, select, textarea, option, table) {
  font-family: var(--portal-v01-font) !important;
}

html[data-portal-brand] body,
html[data-portal-page="selector"] body {
  color: var(--portal-v01-body);
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6;
  letter-spacing: 0;
}

/* Skala judul dibuat ringkas dan seragam di desktop maupun mobile. */
html[data-portal-brand] :is(h1, h2, h3, h4, h5, h6),
html[data-portal-page="selector"] :is(h1, h2, h3, h4, h5, h6) {
  color: var(--portal-v01-ink) !important;
  font-family: var(--portal-v01-font) !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  letter-spacing: -0.025em !important;
  text-wrap: balance;
}

html[data-portal-brand] h1,
html[data-portal-page="selector"] h1 {
  font-size: clamp(22px, 2.5vw, 28px) !important;
}

html[data-portal-brand] h2,
html[data-portal-page="selector"] h2 {
  font-size: clamp(20px, 2vw, 24px) !important;
}

html[data-portal-brand] h3,
html[data-portal-page="selector"] h3 {
  font-size: 18px !important;
}

html[data-portal-brand] :is(h4, h5, h6),
html[data-portal-page="selector"] :is(h4, h5, h6) {
  font-size: 16px !important;
}

html[data-portal-brand] p,
html[data-portal-page="selector"] p {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

html[data-portal-brand] small,
html[data-portal-page="selector"] small {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

html[data-portal-brand] :is(b, strong),
html[data-portal-page="selector"] :is(b, strong) {
  font-weight: 700 !important;
}

html[data-portal-brand] :is(.font-black, .font-extrabold, .font-bold),
html[data-portal-page="selector"] :is(.font-black, .font-extrabold, .font-bold) {
  font-weight: 700 !important;
}

html[data-portal-brand] .font-semibold,
html[data-portal-page="selector"] .font-semibold {
  font-weight: 600 !important;
}

html[data-portal-brand] :is(label, th),
html[data-portal-page="selector"] :is(label, th) {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.01em !important;
}

html[data-portal-brand] td,
html[data-portal-page="selector"] td {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

html[data-portal-brand] :is(input, select, textarea),
html[data-portal-page="selector"] :is(input, select, textarea) {
  font-size: 14px !important;
  font-weight: 500 !important;
}

html[data-portal-brand] :is(
  nav a,
  nav button,
  .nav-button,
  .unified-group button,
  .unified-bottom button,
  .portal-nav-desktop button,
  .portal-nav-mobile button
),
html[data-portal-page="selector"] :is(nav a, nav button) {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

html[data-portal-brand] :is(
  .eyebrow,
  [class*="eyebrow"],
  [class*="kicker"],
  .unified-group em,
  .badge,
  [class*="-badge"],
  [class*="-status"]
),
html[data-portal-page="selector"] :is(.eyebrow, [class*="eyebrow"], [class*="kicker"]) {
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.06em !important;
}

/* Membatasi kelas utilitas lama agar tidak menghasilkan teks yang terlalu besar. */
html[data-portal-brand] [class~="text-5xl"] { font-size: 28px !important; }
html[data-portal-brand] [class~="text-4xl"] { font-size: 26px !important; }
html[data-portal-brand] [class~="text-3xl"] { font-size: 24px !important; }
html[data-portal-brand] [class~="text-2xl"] { font-size: 22px !important; }
html[data-portal-brand] [class~="text-xl"] { font-size: 19px !important; }
html[data-portal-brand] [class~="text-lg"] { font-size: 16px !important; }
html[data-portal-brand] [class~="text-sm"] { font-size: 14px !important; }
html[data-portal-brand] [class~="text-xs"] { font-size: 12px !important; }
html[data-portal-brand] :is([class~="text-[9px]"], [class~="text-[10px]"]) {
  font-size: 11px !important;
}

/* Tombol aksi: warna solid dan teks kontras; tombol navigasi dikecualikan. */
html[data-portal-brand] :is(
  button,
  [role="button"],
  a.button,
  a[role="button"]
),
html[data-portal-page="selector"] :is(button, [role="button"], a.button, a[role="button"]) {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-shadow: none !important;
}

html[data-portal-brand] :is(
  button.primary,
  button.is-primary,
  button[type="submit"].primary,
  a.primary,
  a.button-primary,
  button[class*="bg-blue-500"],
  button[class*="bg-blue-600"]
) {
  border: 1px solid var(--portal-v01-blue-dark) !important;
  background: linear-gradient(135deg, #06537d, var(--portal-v01-blue-dark)) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 9px 22px rgba(7, 94, 140, 0.22) !important;
}

html[data-portal-brand] :is(
  button.primary,
  button.is-primary,
  button[type="submit"].primary,
  a.primary,
  a.button-primary,
  button[class*="bg-blue-500"],
  button[class*="bg-blue-600"]
) :is(svg, span, b, strong) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-portal-brand] :is(
  button.secondary,
  button.is-secondary,
  a.secondary,
  .actions button:not(.primary):not(.is-primary):not(.danger):not(.warning):not([class*="bg-"]),
  .table-actions button:not(.primary):not(.is-primary):not(.danger):not(.warning):not([class*="bg-"])
) {
  border: 1px solid #74adcd !important;
  background: var(--portal-v01-white) !important;
  color: var(--portal-v01-blue-dark) !important;
  -webkit-text-fill-color: var(--portal-v01-blue-dark) !important;
  box-shadow: 0 4px 12px rgba(23, 33, 31, 0.07) !important;
}

html[data-portal-brand] :is(button[class*="bg-blue-500"], button[class*="bg-blue-600"]) {
  border-color: #1d4ed8 !important;
  background: var(--portal-v01-blue) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-portal-brand] :is(
  button.warning,
  button[class*="bg-amber-500"],
  button[class*="bg-amber-600"]
) {
  border-color: #d79619 !important;
  background: var(--portal-v01-amber) !important;
  color: var(--portal-v01-amber-ink) !important;
  -webkit-text-fill-color: var(--portal-v01-amber-ink) !important;
}

html[data-portal-brand] :is(
  button.danger,
  button.is-danger,
  button.stop-access,
  button[class*="bg-red-500"],
  button[class*="bg-red-600"]
) {
  border-color: #9f1239 !important;
  background: var(--portal-v01-red) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-portal-brand] :is(
  button.danger,
  button.is-danger,
  button.stop-access,
  button[class*="bg-red-500"],
  button[class*="bg-red-600"]
) :is(svg, span, b, strong) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-portal-brand] :is(button.ghost, .buttons button[data-close], .modal-close, button.close) {
  border: 1px solid #cbd8d3 !important;
  background: #f8fbfa !important;
  color: #3f4b51 !important;
  -webkit-text-fill-color: #3f4b51 !important;
  box-shadow: none !important;
}

html[data-portal-brand] :is(button, [role="button"], a.button, a[role="button"]):focus-visible,
html[data-portal-page="selector"] :is(button, [role="button"], a.button, a[role="button"]):focus-visible {
  outline: 0 !important;
  box-shadow: var(--portal-v01-focus) !important;
}

html[data-portal-brand] button:disabled,
html[data-portal-page="selector"] button:disabled {
  opacity: 0.55 !important;
  filter: grayscale(0.15);
}

/* Kartu, modal, tabel, dan area konten menggunakan ritme visual yang sama. */
html[data-portal-brand] :is(
  .card,
  .panel,
  .modal-card,
  [class$="-card"],
  [class$="-panel"],
  [class$="-dialog"]
):not(button):not([role="button"]),
html[data-portal-page="selector"] :is(.portal-card, .selector) {
  border-color: var(--portal-v01-line) !important;
  border-radius: 18px !important;
}

html[data-portal-brand] :is([class*="rounded-[32px]"], [class*="rounded-[24px]"]) {
  border-radius: 18px !important;
}

html[data-portal-brand] :is(.content, main > .content, #content) {
  line-height: 1.6;
}

html[data-portal-brand] :is(.toolbar, .panel-head, .page-head) {
  gap: 12px !important;
}

html[data-portal-brand] table {
  border-collapse: separate;
  border-spacing: 0;
}

html[data-portal-brand] th {
  color: var(--portal-v01-blue-dark) !important;
  background: var(--portal-v01-soft) !important;
}

html[data-portal-brand] :is(th, td) {
  padding: 11px 12px !important;
  vertical-align: middle;
}

@media (max-width: 760px) {
  html[data-portal-brand] body,
  html[data-portal-page="selector"] body {
    font-size: 13px !important;
  }

  html[data-portal-brand] h1,
  html[data-portal-page="selector"] h1 {
    font-size: 22px !important;
  }

  html[data-portal-brand] h2,
  html[data-portal-page="selector"] h2 {
    font-size: 19px !important;
  }

  html[data-portal-brand] h3,
  html[data-portal-page="selector"] h3 {
    font-size: 16px !important;
  }

  html[data-portal-brand] :is(p, input, select, textarea, button, [role="button"]),
  html[data-portal-page="selector"] :is(p, input, select, textarea, button, [role="button"]) {
    font-size: 13px !important;
  }

  html[data-portal-brand] :is(.content, #content) {
    padding-inline: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-portal-brand] *,
  html[data-portal-page="selector"] * {
    scroll-behavior: auto !important;
  }
}