/* ==========================================================================
   FBE UII — Tema Open edX
   Sumber token: https://fbe.uii.ac.id/design-system
   Cakupan: LMS, MFE (apps.*), dan halaman legacy (instructor/Studio).

   Cara kerja:
   - Open edX (Verawood / Paragon 23) memakai CSS custom properties
     --pgn-color-* yang didefinisikan pada :root oleh paragon-theme-variants.
   - File tema Paragon dimuat BELAKANGAN oleh frontend-platform, sehingga
     override di sini memakai selector "html:root" (specificity lebih tinggi)
     agar tetap menang tanpa perlu !important.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap");

html:root {
  /* ---------- Token inti FBE ---------- */
  --fbe-universityblue-500: #031e53;
  --fbe-universityblue-300: #56688c;
  --fbe-universityblue-100: #b1b9ca;
  --fbe-universityblue-50:  #e6e9ee;

  --fbe-facultygray-500: #3a3a3b;
  --fbe-facultygray-300: #7b7b7c;
  --fbe-facultygray-100: #c2c2c2;
  --fbe-facultygray-50:  #ebebeb;

  --fbe-accent-500: #f7ca26;
  --fbe-accent-300: #fadb6e;
  --fbe-accent-100: #fdefbc;
  --fbe-accent-50:  #fefae9;

  --fbe-text-500: #070513;
  --fbe-text-200: #8d8c92;

  --fbe-surface-normal:  #fdfeff;
  --fbe-surface-softgray: #fcfdff;
  --fbe-surface-softblue: #fcfeff;

  /* ---------- Paragon: primary (faculty gray FBE) ---------- */
  --pgn-color-primary-base: #3a3a3b;
  --pgn-color-primary-100: #ebebeb;
  --pgn-color-primary-200: #c2c2c2;
  --pgn-color-primary-300: #7b7b7c;
  --pgn-color-primary-400: #5a5a5b;
  --pgn-color-primary-500: #3a3a3b;
  --pgn-color-primary-600: #2e2e2f;
  --pgn-color-primary-700: #242425;
  --pgn-color-primary-800: #1b1b1c;
  --pgn-color-primary-900: #070513;

  /* ---------- Paragon: brand (samakan dengan primary) ---------- */
  --pgn-color-brand-base: #3a3a3b;
  --pgn-color-brand-100: #ebebeb;
  --pgn-color-brand-200: #c2c2c2;
  --pgn-color-brand-300: #7b7b7c;
  --pgn-color-brand-400: #5a5a5b;
  --pgn-color-brand-500: #3a3a3b;
  --pgn-color-brand-600: #2e2e2f;
  --pgn-color-brand-700: #242425;
  --pgn-color-brand-800: #1b1b1c;
  --pgn-color-brand-900: #070513;

  /* ---------- Paragon: accent (gold FBE) ---------- */
  --pgn-color-accent-a: #f7ca26;
  --pgn-color-accent-b: #fdefbc;

  /* ---------- Paragon: netral ---------- */
  --pgn-color-gray-100: #ebebeb;
  --pgn-color-gray-200: #c2c2c2;
  --pgn-color-gray-300: #adadad;
  --pgn-color-gray-400: #8d8c92;
  --pgn-color-gray-500: #7b7b7c;
  --pgn-color-gray-600: #5c5c5c;
  --pgn-color-gray-700: #3a3a3b;
  --pgn-color-gray-800: #2b2b2c;
  --pgn-color-gray-900: #070513;
  --pgn-color-gray-base: #7b7b7c;

  /* ---------- Paragon: dark & light ---------- */
  --pgn-color-dark-base: #070513;
  --pgn-color-dark-500: #070513;
  --pgn-color-dark-600: #050410;

  --pgn-color-light-base: #e6e9ee;
  --pgn-color-light-500: #e6e9ee;
  --pgn-color-light-600: #c2c2c2;

  /* ---------- Paragon: permukaan & teks ---------- */
  --pgn-color-body-base: #3a3a3b;
  --pgn-color-body-bg: #fdfeff;
  --pgn-color-text-muted: #7b7b7c;
  --pgn-color-headings-base: #070513;

  /* Paragon memakai warna "info" untuk tautan; arahkan ke faculty gray */
  --pgn-color-link-base: #3a3a3b;
  --pgn-color-link-inline-base: #3a3a3b;
  --pgn-color-link-muted-hover: #070513;
  --pgn-color-link-muted-inline-decoration: #3a3a3b4d;
  --pgn-color-link-muted-inline-hover-base: #070513;
  --pgn-color-link-brand-hover: #070513;
  --pgn-color-link-brand-inline-decoration: #3a3a3b4d;
  --pgn-color-link-brand-inline-hover-base: #070513;

  /* Banner beranda katalog: default Open edX memakai abu-abu, ubah ke navy */
  --catalog-home-page-banner-background-color: #3a3a3b;
  /* Foto gedung FBE UII sebagai background hero katalog; overlay navy
     menjaga teks putih "Discover New" tetap terbaca di atas foto. */
  --catalog-home-page-banner-background-image:
    linear-gradient(
      105deg,
      rgba(58, 58, 59, 0.9) 0%,
      rgba(58, 58, 59, 0.74) 55%,
      rgba(58, 58, 59, 0.55) 100%
    ),
    url("/fbe-login-bg.jpg?v=2");

  /* ---------- Paragon: tipografi ---------- */
  --pgn-typography-font-family-sans-serif: "Roboto", -apple-system,
    BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --pgn-typography-font-family-base: "Roboto", -apple-system,
    BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
}

/* ---------- Tipografi: heading Montserrat, body Roboto ---------- */
body {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
  color: #3a3a3b;
  background-color: #fdfeff;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4 {
  font-family: "Montserrat", "Roboto", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 700;
}

/* Warna heading & teks isi diatur lewat token
   (--pgn-color-headings-base / --pgn-color-body-base) agar konteks gelap
   seperti hero course tidak ikut tertimpa. */

::selection {
  background: #f7ca26;
  color: #070513;
}

/* ---------- Tombol legacy (LMS instructor, Studio, Django admin) ---------- */
.btn-primary {
  background-color: #3a3a3b;
  border-color: #3a3a3b;
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #242425;
  border-color: #242425;
  color: #fff;
}

.btn-outline-primary {
  color: #3a3a3b;
  border-color: #3a3a3b;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: #3a3a3b;
  border-color: #3a3a3b;
  color: #fff;
}

/* Tombol Google SSO: biru terang diganti faculty gray. */
.btn-social.btn-oa2-google-oauth2 {
  background-color: #3a3a3b !important;
  border-color: #3a3a3b !important;
  color: #fff !important;
}
.btn-social.btn-oa2-google-oauth2:hover,
.btn-social.btn-oa2-google-oauth2:focus {
  background-color: #242425 !important;
  border-color: #242425 !important;
}
.btn-social.btn-oa2-google-oauth2 .btn-tpa__font-container {
  background-color: #070513 !important;
}

/* Stripe dekoratif atas: hilangkan segmen biru muda. */
.extra-large-screen-top-stripe {
  background-image: linear-gradient(
    102.02deg,
    #070513 10%,
    #3a3a3b 10%,
    #3a3a3b 45%,
    #070513 45%,
    #070513 55%,
    #f7ca26 55%,
    #f7ca26 75%,
    #c2c2c2 75%
  ) !important;
}

/* Tombol pencarian di banner katalog: navy di atas navy tidak terlihat,
   jadi pakai aksen gold FBE (teks gelap, kontras 12,9:1). */
.home-banner .pgn__searchfield__button.btn-primary {
  background-color: #f7ca26;
  border-color: #f7ca26;
  color: #070513;
}
.home-banner .pgn__searchfield__button.btn-primary:hover,
.home-banner .pgn__searchfield__button.btn-primary:focus,
.home-banner .pgn__searchfield__button.btn-primary:active {
  background-color: #fadb6e;
  border-color: #fadb6e;
  color: #070513;
}

/* Background foto FBE UII (sumber: fecon.uii.ac.id) pada panel login/register.
   Overlay navy menjaga kontras teks putih/gold di atas foto. */
.layout .col-md-9.bg-primary-400 {
  background-image:
    linear-gradient(
      105deg,
      rgba(58, 58, 59, 0.92) 0%,
      rgba(58, 58, 59, 0.74) 55%,
      rgba(58, 58, 59, 0.55) 100%
    ),
    url("/fbe-login-bg.jpg?v=1");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Panel diagonal (SVG) disamakan dengan warna overlay navy. */
.layout .large-screen-svg-primary rect {
  fill: #3a3a3b !important;
}

/* Halaman login/register: pas satu layar penuh, tanpa scroll.
   Tinggi dikurangi 8px (stripe dekoratif di atas) dan offset internal
   masing-masing kolom agar tidak ada overflow. */
body:has(.layout) {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
body:has(.layout) .layout {
  height: calc(100vh - 8px) !important;
  height: calc(100dvh - 8px) !important;
  min-height: 0 !important;
}
body:has(.layout) .layout > .w-50 {
  height: 100% !important;
}
body:has(.layout) .layout > .w-50 > .col-md-9 {
  height: 100% !important;
}
body:has(.layout) .layout .min-vh-100 {
  height: calc(100% - 28px) !important;
  min-height: 0 !important;
}
body:has(.layout) .layout > .content {
  height: calc(100% - 64px) !important;
  min-height: 0 !important;
  overflow-y: auto;
}

/* Sembunyikan menu/link registrasi (pendaftaran publik dimatikan;
   akun tetap dibuat otomatis lewat Google SSO). */
a[href$="/register"],
a[href*="/register?"] {
  display: none !important;
}

/* Logo FBE: default Open edX membatasi tinggi 28px (header) / 20px (login)
   sehingga teks logo terlalu kecil. Dinaikkan agar terbaca. */
.site-header-desktop a.logo img,
.site-header-mobile a.logo img {
  height: 38px !important;
  width: auto !important;
}

/* Logo di panel berwarna pada halaman login/register: beri chip putih
   agar logo navy tetap terbaca di atas latar universityblue-400. */
img.logo.position-absolute {
  height: 34px !important;
  width: auto !important;
  padding: 5px 9px;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(7, 5, 19, 0.18);
}

/* Aksen garis atas ala kartu FBE (dipakai hemat, hanya untuk header seksi) */
.fbe-accent-top {
  border-top: 4px solid #f7ca26;
}