/* ==========================================================================
   Identitas JASA SERVICE untuk WEB (website publik + panel admin), sama
   dengan tema APK: warna logo (navy, jingga, sian), ornamen batik peach &
   pita batik navy dari poster resmi, aksen merah-putih.
   Gambar: frontend-assets/theme/ (dibangkitkan brand/gen_theme_images.py).
   Warna tetap mengikuti tema aktif (--ok-*); berkas ini menambah ornamen.
   ========================================================================== */
:root {
  --js-navy: #0B3BA8;
  --js-navy-night: #031553;
  --js-orange: #FF8A00;
  --js-cyan: #12C2F7;
  --js-red: #E11D2E;
  --js-bg-batik: url("theme/bg-batik.webp");
  --js-batik-band: url("theme/batik-band.webp");
  --js-merah-putih: linear-gradient(var(--js-red) 0 50%, #fff 50% 100%);
}

/* ---------------------------------------------------------------- umum */
.js-merah-putih {
  background: var(--js-merah-putih);
  border-radius: 3px;
  display: inline-block;
  height: 6px;
  width: 40px;
}

/* Pita batik navy (potongan bawah poster, bagian atas transparan). */
.js-batik-divider {
  background: var(--js-batik-band) center bottom / 100% auto no-repeat;
  height: min(18.4vw, 260px);
  margin-top: 24px;
  pointer-events: none;
}

/* ===================================================== WEBSITE PUBLIK */
.onkerja-public {
  background: #f7f9fd var(--js-bg-batik) center top / 100% auto repeat-y;
}

/* Aksen merah-putih di tepi atas header. */
.onkerja-public .header.navbar::before {
  background: var(--js-merah-putih);
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* Judul bagian: garis jingga di bawah judul, seperti APK. */
.onkerja-public .content-title::after {
  background: linear-gradient(90deg, var(--js-orange), #ffb547);
  border-radius: 4px;
  content: "";
  display: block;
  height: 4px;
  margin: 14px auto 0;
  width: 64px;
}
.onkerja-public .content-title.text-start::after {
  margin-left: 0;
}

/* Kartu & formulir sedikit transparan supaya ornamen batik ikut terasa. */
.onkerja-public .onkerja-form-card,
.onkerja-public .card {
  backdrop-filter: blur(2px);
  border: 1px solid rgba(11, 59, 168, .10);
  box-shadow: 0 14px 34px rgba(3, 21, 83, .08);
}

/* Footer: SATU blok. Pita gelombang + batik navy (theme/footer-band.webp,
   bagian bawahnya sudah memudar ke #061650) jadi latar atas footer, lalu
   warna yang sama untuk isi footer -> tidak terlihat terpisah. */
:root { --js-footer: #061650; }
.onkerja-public .onkerja-footer.js-footer {
  /* Warna navy hanya di belakang bagian pita yang sudah pekat (>= 62% tinggi
     pita), jadi area di atas gelombang tetap memperlihatkan latar halaman. */
  background:
    url("theme/footer-band.webp") center top / 100% auto no-repeat,
    linear-gradient(to bottom, #f7f8fa calc(100vw * 267 / 1024 * .62), var(--js-footer) calc(100vw * 267 / 1024 * .62));
  border-top: 0;
  color: rgba(255, 255, 255, .78);
  /* Tinggi pita = 26% lebar; isi footer mulai di bagian yang sudah navy. */
  padding: calc(100vw * 267 / 1024 * .64) 0 0;
  position: relative;
}
.onkerja-public .onkerja-footer.js-footer::after {
  background: var(--js-merah-putih);
  bottom: 0;
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
}
.onkerja-public .onkerja-footer-brand {
  letter-spacing: .5px;
}
.onkerja-public .onkerja-footer-brand .onkerja-logo {
  background: #fff;
  border-radius: 50%;
  padding: 2px;
}
.js-footer-company {
  color: #ffb547;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.5px;
  margin: 6px 0 8px;
}
.js-footer .js-footer-bottom {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 8px 20px;
  justify-content: space-between;
  margin-top: 22px;
  padding: 16px 0 22px;
}
.js-footer-tagline {
  align-items: center;
  color: #fff;
  display: inline-flex;
  font-weight: 700;
  gap: 8px;
}
.js-footer-tagline .js-merah-putih {
  height: 12px;
  width: 18px;
}

/* Nama PT di bawah merek pada header. */
.onkerja-public .header .navbar-brand .brand-text {
  display: inline-flex;
  flex-direction: column;
}
.js-brand-company {
  color: var(--js-orange);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  margin-top: 4px;
  text-transform: uppercase;
}

/* ====================================================== PANEL ADMIN */
/* Latar konten: putih lembut + ornamen batik peach poster. */
body:has(#app.app) {
  background: #f7f9fd var(--js-bg-batik) center top / 100% auto fixed no-repeat !important;
}
body:has(#app.app) .app-content {
  background: transparent !important;
}

/* Header: aksen merah-putih di tepi bawah. */
#header.app-header {
  box-shadow: 0 6px 22px rgba(3, 21, 83, .16) !important;
}
#header.app-header::after {
  background: var(--js-merah-putih);
  bottom: -4px;
  content: "";
  height: 4px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 2;
}
#header .onkerja-navbar-title span {
  color: var(--js-orange);
  font-weight: 700;
}

/* Sidebar: warna tema + pita batik navy di dasar. */
#sidebar.app-sidebar,
#sidebar.app-sidebar .app-sidebar-content {
  background: transparent !important;
}
.app-sidebar-bg {
  background:
    var(--js-batik-band) center bottom / 100% auto no-repeat,
    linear-gradient(180deg, var(--ok-sidebar-bg, #0b2a86) 0%, color-mix(in srgb, var(--ok-sidebar-bg, #0b2a86) 70%, #000) 100%) !important;
}
#sidebar .menu > .menu-item.active > .menu-link {
  box-shadow: inset 4px 0 0 var(--js-orange);
}

/* Judul halaman: garis jingga tegak di depan, seperti SectionTitle APK. */
.app-content > .page-header,
.app-content .page-header {
  border-left: 5px solid var(--js-orange);
  padding-left: 12px;
}

/* Panel/kartu: tepi navy tipis + bayangan lembut di atas latar batik. */
.app-content .panel,
.app-content .card {
  border: 1px solid rgba(11, 59, 168, .08);
  box-shadow: 0 10px 28px rgba(3, 21, 83, .07);
}

/* Nama PT pada header & dasar halaman panel admin. */
#header .onkerja-navbar-title {
  column-gap: 6px;
  display: inline-grid;
  grid-template-columns: auto auto;
  row-gap: 3px;
}
#header .js-navbar-company {
  color: color-mix(in srgb, var(--ok-header-text, #fff) 78%, transparent);
  grid-column: 1 / -1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.js-admin-footer {
  border-top: 1px solid rgba(11, 59, 168, .14);
  color: #44546a;
  display: flex;
  flex-wrap: wrap;
  font-size: 12.5px;
  gap: 6px 18px;
  justify-content: space-between;
  margin-top: 28px;
  padding: 14px 0 4px;
}
.js-admin-footer b { color: var(--js-navy); }
@media (max-width: 575.98px) {
  #header .js-navbar-company { display: none; }
}

/* Header website: merek + nama PT bertumpuk. */
.onkerja-public .header .navbar-brand .js-brand-name { white-space: nowrap; }