#sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0, 140, 255), rgb(66, 170, 254));
  z-index: 0;
}

.sidebar-header {
  background: rgb(0, 140, 255);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

body.auth-login-page {
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(255, 255, 255, 0.35),
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(255, 255, 255, 0.25),
      transparent 45%
    ),
    linear-gradient(180deg, rgb(0, 140, 255), rgb(66, 170, 254));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* ===================================================================== */
/* PENANDA TAHUN BUKU — khusus branch ini                                */
/*                                                                        */
/* Tujuan: tiga deployment (pai / pai2025 / pai2026) memakai logo yang    */
/* sama persis, jadi satu-satunya pembeda dulu cuma URL. User gampang     */
/* salah masuk dan salah input tahun. Badge di bawah ini bikin tahun      */
/* buku kelihatan di sidebar dan di halaman login.                        */
/*                                                                        */
/* Saat bikin branch tahun baru: cukup ubah --app-year di sini dan        */
/* title/logoAlt di spesific/js/config.js. File spesific/ tidak           */
/* tertimpa saat merge dari dev.                                          */
/* ===================================================================== */
:root {
  --app-year: "2025";
}

/* --- Sidebar ---------------------------------------------------------- */
/* Wordmark PAI rasionya 752x181. Pada height 45px (default .sidebar-text-
   logo di assets/css/style.css) lebarnya ~187px, sehingga isi header jadi
   16+38+16+187+16 = ~273px dan meluber dari #sidebar yang 260px dengan
   overflow:hidden — tulisan "PixMe Agriculture" ikut terpotong di kanan.
   Diturunkan ke 40px (lebar ~166px) supaya muat utuh. */
.sidebar-text-logo {
  height: 40px;
  width: auto;
  max-width: 100%;
}

.sidebar-header {
  flex-wrap: wrap;
  row-gap: 8px;
}

/* badge dipaksa 100% agar turun ke baris sendiri, tidak menggencet logo */
.sidebar-header::after {
  content: "TAHUN BUKU " var(--app-year);
  flex: 0 0 100%;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.7;
  color: #fff;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  padding: 1px 10px;
}

/* --- Halaman login ---------------------------------------------------- */
/* .brand sudah flex-column; order dipakai supaya badge nyempil di antara
   logo dan subtitle tanpa mengubah markup login.html (file shared). */
body.auth-login-page .brand-logo-wide {
  order: 1;
}

body.auth-login-page .brand-sub {
  order: 3;
}

body.auth-login-page .brand::after {
  order: 2;
  content: "TAHUN BUKU " var(--app-year);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #fff;
  background: rgb(0, 140, 255);
  border-radius: 999px;
  padding: 4px 14px;
  box-shadow: 0 6px 16px rgba(0, 140, 255, 0.35);
}