/* ==========================================================================
   Footer Open edX FBE UII
   Palet mengikuti footer https://fbeuii.id/ :
     gold  #F7CA26  (latar utama)
     navy  #031E53  (garis atas/bawah)
     ink   #070513  (teks)
   Latar memakai gambar fbe-footer-bg.svg (tekstur gold + motif FBE).
   Dimuat oleh semua MFE melalui <link> yang ditanam di index.html.
   ========================================================================== */

.footer,
.footer.border-top {
  background-color: #F7CA26 !important;
  background-image: url("/fbe-footer-bg.svg?v=3") !important;
  background-repeat: repeat-x !important;
  background-size: auto 100% !important;
  background-position: left center !important;
  border-top: 4px solid #031E53 !important;
  border-bottom: 10px solid #031E53 !important;
  color: #070513 !important;
}

/* Label bahasa dan kontrol di sisi kanan footer. */
.footer .form-inline label {
  color: #070513 !important;
  font-weight: 600;
}

.footer .form-control-sm {
  background-color: #FFFFFF !important;
  border-color: #031E53 !important;
  color: #070513 !important;
}

.footer .btn-outline-primary {
  background-color: transparent !important;
  border-color: #031E53 !important;
  color: #031E53 !important;
}

.footer .btn-outline-primary:hover,
.footer .btn-outline-primary:focus,
.footer .btn-outline-primary:active {
  background-color: #031E53 !important;
  border-color: #031E53 !important;
  color: #F7CA26 !important;
}

.footer a {
  color: #031E53 !important;
}

/* ---------------------------------------------------------------------------
   Sticky footer
   Learner dashboard (dan sebagian MFE lain) merender:
     #root > div > (header, main#main, footer.footer)
   tanpa flex layout, sehingga footer naik saat konten lebih pendek dari
   layar. Jadikan wrapper sebagai flex column dan biarkan main mengisi
   ruang tersisa.
   --------------------------------------------------------------------------- */
/* frontend-platform AppProvider membungkus aplikasi dalam
   <div data-testid="browser-router">, lalu aplikasi merender root div-nya
   sendiri. Jadikan keduanya flex column agar footer turun ke bawah saat
   konten pendek. Hanya diterapkan bila halaman punya .footer (login tidak). */
#root > div[data-testid="browser-router"]:has(.footer) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

#root > div[data-testid="browser-router"]:has(.footer) > div {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

#root > div[data-testid="browser-router"]:has(.footer) main {
  flex: 1 1 auto;
}

#root > div[data-testid="browser-router"]:has(.footer) .footer {
  margin-top: auto;
  flex-shrink: 0;
}

/* Di layar kecil, tekstur tetap mengikuti tinggi footer agar tidak terpotong. */
@media (max-width: 575.98px) {
  .footer,
  .footer.border-top {
    background-size: auto 100% !important;
  }
}