:root{
  --bsb-green: #2B5D34;      /* warna utama yang kamu minta */
  --bsb-green-700: #2B5D34;
  --bsb-green-600: #3A7243;
  --hero-bg: #ffffff;
  --footer-bg: rgba(215, 235, 217, 0.70) !important;
}

body {
    font-family: 'Poppins', sans-serif;
}


/* --- NAVBAR --- */
.navbar {
  margin: 0 !important;
  padding: 0 !important;
}

.bs-navbar{
  background-color: #ffffff;
  z-index: 1000 !important;
}
.bs-navbar .navbar-brand span{ color:#1c1c1c; }
.bs-navbar .nav-link{
  color:#2b2b2b;
  font-weight:500;
}
.bs-navbar .nav-link.active,
.bs-navbar .nav-link:hover{ color: var(--bsb-green); }
.bs-navbar .btn-success,
.btn-success{
  background-color: var(--bsb-green);
  border-color: var(--bsb-green);
}

.btn-success:hover {
  background-color: #0E3D13;
  border-color: #0E3D13;
}

.btn-outline-success{
  color: var(--bsb-green);
  border-color: var(--bsb-green);
  background-color:  #ffffff;
}

.btn-outline-success2{
  color: var(--bsb-green);
  border-color: var(--bsb-green);
  background-color:  #ffffff;
}
.btn-outline-success2:hover{
  color: var(--bsb-green);
  border-color: var(--bsb-green);
  background-color:  #ffffff;
}

.btn-outline-success:hover{
  background-color: var(--bsb-green);
  border-color: #ffffff;
  color:#fff;
}

/* kompensasi navbar fixed-top */
body{ padding-top: 65px; }

.navbar .nav-link {
    font-weight: bold;  /* Semua link navbar jadi tebal */
}

/* Avatar kecil di navbar user login */
.nav-avatar{
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.nav-avatar.placeholder{
  display:flex; align-items:center; justify-content:center;
  background:#2B5D34; color:#fff;
  font-weight:700; font-size:.9rem;
}

/* Dropdown sedikit menjorok ke bawah */
.dropdown-menu-end {
  margin-top: 8px !important;
}


/* --- HERO --- */
.hero-section{
  padding: 0rem 0 1rem;
  background: var(--hero-bg);
}
.text-success-700{ color: var(--bsb-green-700) !important; }
.hero-illustration{ max-height: 420px; object-fit: contain; }
.bg-bsb-light {
  background-color: rgba(215, 235, 217, 0.70) !important;
}

/* Biar text bisa rata kiri-kanan */
.text-justify {
  text-align: justify;
}


/* --- LAYANAN --- */
.service-card{
  border: 1px solid #e7ece9;
  border-radius: 7px;
  transition: transform .15s ease, box-shadow .15s ease;
  overflow:hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
}

.service-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0,0,0,.22), 0 8px 18px rgba(0,0,0,.18);
}

.service-thumb{
  background-color: var(--bsb-green);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;                    /* sesuaikan tinggi ikon area */
  padding: 5rem 24px 62px;
}

.service-ico{ height: 187px; max-width: 100%; }

.service-caption{
  background: #fff;
  padding: 12px 16px;
  color: #1c1c1c;
  border-top: 1px solid #e7ece9;
}

/* --- EDUKASI HIGHLIGHT --- */
.edu-highlight .bg-success-50{
  background: #eff6f0;
  border: 1px solid #e0eee3;
  border-radius: 16px;
}

/* Benefit cards */
.benefit-card{
  border: 1px solid #e7ece9;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.12), 0 3px 10px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.benefit-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(0,0,0,.22), 0 10px 22px rgba(0,0,0,.18);
}

.benefit-icon{
  width: 86px;
  height: 86px;
  border-radius: 12px;
  background: var(--bsb-green);
  display: grid;
  place-items: center;
}
.benefit-icon img{
  width: 54px; height: 54px; object-fit: contain; filter: brightness(0) invert(1); /* jadi putih */
}

.benefit-text{
  font-weight: 600;
  color: #2b2b2b;
  line-height: 1.5;
}


@media (min-width: 992px){
  .display-6{ font-size: 2.25rem; } /* ~36px */
}

/* --- CTA MONEY --- */
.cta-money{
  background: #ffffff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.bg-bsb-green {
  background-color: var(--bsb-green);
}

.border-map{
  border: 3px solid #2B5D34;
}

/* --- FOOTER --- */
.bg-footer{ background: var(--footer-bg); }

/* FOOTER */
.bs-footer{
  background: var(--footer-bg); /* sudah kamu definisikan: #eef5f0 */
}

.bs-footer .footer-link{
  color: #1c1c1c;
  text-decoration: none;
  font-weight: 500;
}
.bs-footer .footer-link:hover{
  color: var(--bsb-green);
  text-decoration: underline;
}

/* jika ingin ikon sosial punya klik area nyaman */
.bs-footer .footer-social{
  display: inline-flex;
  align-items: end;
  justify-content: end;
  line-height: 1;
}

.bs-footer .border-top {
  border-top: 1px solid #363636 !important; /* warna hijau muda */
  opacity: 0.6;
}

/* ========== EDUKASI PELATIHAN ========== */
.hero-edu{
  background: var(--bsb-green);
  padding: 3rem 0;
}
.hero-edu-ill{ max-height: 420px; object-fit: contain; }

.edu-card{
  border: 1px solid #e7ece9;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,.05);

  overflow: hidden;
}
.edu-card .card-img-top{
  height: 280px; 
  object-fit: cover; 
  border-top-left-radius: 14px; 
  border-top-right-radius: 14px;
}
.edu-card .card-body{ 
  background:#fff; 
  border-bottom-left-radius:14px; 
  border-bottom-right-radius:14px;

  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}

/* Judul: clamp 2–3 baris + tinggi minimum agar antar kartu seragam */
.edu-title{
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 0px;
  min-height: 3em;             /* ~3 baris */
  display: -webkit-box;
  -webkit-line-clamp: 3;          /* potong max 3 baris */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tombol full width + jarak konsisten */
.edu-btn{
  /* opsional: kalau mau tombol sedikit lebih tinggi */
  padding-top: .55rem;
  padding-bottom: .55rem;
}

.badge.bg-success-subtle{
  background: #e8f2eb !important;
  color: var(--bsb-green) !important;
  border: 1px solid #d6e6da !important;
}

/* Why section (green strip) */
.edu-why{
  background: var(--bsb-green);
}
.edu-why-card{
  border: 1px solid #dfeadf;
  border-radius: 14px;
  background:#ffffff;
}
.edu-why-icon{ width:40px; height:40px; }

/* Detail Edukasi */
.collab-img {
  width: 200px;
  height: 140px;
  object-fit: cover;
}
.edu-collab {
  background: var(--bsb-green);
}

/* HERO HARGA */
.hero-harga{
  background: var(--bsb-green);
  padding: 0rem 0;
}
.hero-harga-ill{ max-height: 420px; object-fit: contain; }

/* CARD HARGA */
.harga-card{
  border: 1px solid #e7ece9;
  border-radius: 14px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.harga-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.harga-img-wrapper{
  background: #aacaa7;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
}
.harga-img-wrapper img{
  max-height: 160px;
  object-fit: contain;
}

/* CTA HARGA */
.harga-cta{
  background: var(--bsb-green);
}

/* Tombol filter kategori */
.filter-btn{
  border: 1px solid var(--bsb-green);
  background:#fff;
  color: var(--bsb-green);
  font-weight:700;
  padding: .35rem .8rem;
  border-radius: .35rem;
}
.filter-btn:hover{ background:#f2f8f4; }

.filter-btn.active{
  background: var(--bsb-green);
  color:#fff;
  border-color: var(--bsb-green);
}

/* Kartu disembunyikan saat tidak match filter */
.harga-card.d-none{ display:none !important; }

/* tombol filter */
#filterBar .filter-btn {
  border: 1px solid var(--bsb-green);
  color: var(--bsb-green);
  background: #fff;
  border-radius: 8px;
  padding: .35rem .75rem;
  font-weight: 600;
}
#filterBar .filter-btn.active,
#filterBar .filter-btn:hover {
  background: var(--bsb-green);
  color: #fff;
}

/* HERO PRODUK */
.hero-produk{
  background: var(--bsb-green);
  padding: 0rem 0;
}
.hero-produk-ill{ max-height: 420px; object-fit: contain; }

/* CARD PRODUK */
.produk-card{
  border: 1px solid #e7ece9;
  border-radius: 14px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.produk-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.produk-img-wrapper{
  background: #aacaa7;         /* hijau lembut seperti screenshot */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 230px;
}
.produk-img-wrapper img{
  max-height: 200px;
  object-fit: contain;
}

/* WHY STRIP utk produk */
.produk-why{ background: var(--bsb-green); }

/* HERO Tentang Kami*/
.hero-profil{ 
  background: var(--bsb-green); 
  padding: 0rem 0; }

/* Org chart sederhana menggunakan grid */
.org-container{ display: grid; gap: 18px; }
.org-level{ display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.org-level.org-multi{ row-gap: 18px; }
.org-card{
  background: #1f4226;
  color: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 220px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  font-weight: 500;
}
.org-card small {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: #ffffff;
  font-weight: 300;
  opacity: 0.9;
}

/* ===== LOGIN ===== */
.login-wrap{ background:#fff; }

/* shared auth layout */
.login-left{ background:#2B5D34; min-height:520px; }
.login-illustration{ max-height:680px; object-fit:contain; }

.login-right{ max-width: 720px; min-height: 620px; }

.login-eye{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  text-decoration: none;
  padding: 6px 8px;
}
.login-eye:hover{ color:#2B5D34; }

.form-check-input {
  border: 2px solid #2B5D34; /* garis tebal warna hijau utama kamu */
}

/* ===== REGISTER ===== */
.register-left{
  background:#2B5D34;
  min-height: 680px;
  padding-top: 40px 
}
.register-illustration{ 
  max-height: 720px; 
  object-fit: contain; 
}

.login-eye{ position:absolute; right:8px; top:50%; transform:translateY(-50%); text-decoration:none; }

/* Warna merah untuk tanda bintang wajib */
.form-label.required::after {
  content: "*";
  color: red;
}

:root{
  /* sesuaikan bila mau lebih kecil/besar */
  --sidebar-w: 260px;  /* lebar sidebar di desktop */
  --nav-h: 65px;       /* tinggi navbar fixed-top (samakan dgn body padding-top) */
}



/* Sidebar fix + scroll sendiri di desktop */
@media (min-width: 992px){
  .dashboard-sidebar{
    position: fixed;
    top: var(--nav-h);
    left: 0;
    width: var(--sidebar-w);
    height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    background: #fff;
    z-index: 1100; /* boleh tetap di atas */
  }

  /* Beri ruang di kiri konten sebesar lebar sidebar */
  .dashboard-main{
    margin-left: var(--sidebar-w);
    width: calc(100% - var(--sidebar-w)) !important;  /* lebar sisa layar */
    max-width: none !important;                       /* override grid */
    flex: 0 0 auto !important;                        /* cegah ukuran grid */
  }
}

/* Di bawah desktop, biarkan mengalir normal (stack) */
@media (max-width: 991.98px){
  .dashboard-sidebar{
    position: static;
    width: 100%;
    height: auto;
    z-index: 1;
  }
  .dashboard-main{
    margin-left: 0;
  }
}

/* efek gelap sidebar saat modal aktif */
.sidebar-dim {
  position: relative;
}

.sidebar-dim::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* tingkat kegelapan */
  z-index: 1200; /* di atas isi sidebar */
  pointer-events: none; /* supaya tetap bisa klik area modal */
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sidebar-dim.active::after {
  opacity: 1;
}

/* ===== Sidebar Admin ===== */

/* item utama */
.admin-link{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  color:#2b2b2b; text-decoration:none; font-weight:500;
  margin-bottom:6px; background:transparent; border:0;
}
.admin-link:hover{ background:#eef5f0; color:#2b2b2b; }

/* ikon */
.admin-ico{ width:22px; text-align:center; margin-right:6px; }
.admin-icoo{ width:22px; text-align:center; }

/* state aktif hijau persis seperti desain */
.admin-link.active{
  background:#2B5D34; color:#fff;
}

/* tombol grup (dropdown header) */
.admin-group{
  cursor:pointer;
}

/* chevron (pakai CSS, tanpa icon file) */
.admin-group .chev{
  width: 10px; height: 10px; border-right: 2px solid #2b2b2b; border-bottom: 2px solid #2b2b2b;
  transform: rotate(-45deg); transition: transform .2s ease; 
}
.admin-group.open .chev{ transform: rotate(45deg); } /* saat terbuka, menghadap bawah */

/* submenu container */
#grpNasabah, #grpSite, #grpTrans{
  margin-left: 32px;    /* indent keseluruhan grup */
  margin-top: 4px;
  margin-bottom: 8px;
}

/* link submenu */
.admin-sublink{
  display:block;
  padding:8px 10px; border-radius:10px;
  color:#2b2b2b; text-decoration:none; font-weight:500;
  margin-bottom:6px;
}
.admin-sublink:hover{ background:#eef5f0; }

/* submenu aktif (hijau) */
.admin-sublink.active{
  background:#2B5D34; color:#fff;
}


/* ===== Dashboard Nasabah ===== */
.dashboard-sidebar{
  min-height: calc(100vh); /* 74px kompensasi tinggi navbar fixed-top */
  background: #ffffff;
  position: fixed;
  top: 0px;
  z-index: 1100 !important;
}
.ds-link{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  color:#2b2b2b; text-decoration:none; font-weight:500;
  margin-bottom:6px;
}
.ds-link:hover{ background:#eef5f0; }
.ds-link.active{ background:#2B5D34; color:#fff; }

.ds-ico{ width:22px; text-align:center; }

.ds-welcome{
  background:#2B5D34; color:#fff;
  border-radius:14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.ds-card{
  border: 1px solid #e7ece9; border-radius: 12px;
}
.ds-card-ico{
  background:#2B5D34; color:#fff; width:54px; height:54px;
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:22px;
}

/* ===== Setor Sampah ===== */
.table thead.table-success th{
  background:#2B5D34 !important;
  color:#fff; border-color:#2B5D34;
}
.ds-saldo{
  background:#eef5f0; border:1px solid #d6e6da; border-radius:10px; padding:8px 12px;
}

/* ===== Rekap Data Transaksi ===== */

/* Badge untuk jumlah transaksi (+ hijau, - merah) */
.table td.text-success {
  font-weight: 600;
  color: #2B5D34 !important;
}
.table td.text-danger {
  font-weight: 600;
  color: #c0392b !important;
}

/* Card saldo akhir */
.rekap-saldo {
  background: #eef5f0;
  border: 1px solid #d6e6da;
  border-radius: 10px;
  padding: 10px 15px;
  font-weight: bold;
  color: #2B5D34;
}

/* Filter section */
.card .form-label {
  font-weight: 500;
  font-size: 0.9rem;
  color: #2b2b2b;
}

/* header tabel hijau (sudah ada global), badge hijau lembut */
.badge.bg-success-subtle{
  background: #eef5f0;
  color: #2B5D34;
  border: 1px solid #d6e6da;
}

.badge.bg-warning { background:#f9e79f !important; color:#7d6608 !important; }
.badge.bg-success { background:#2B5D34 !important; }

/* Footer bleed ke kiri di balik sidebar (desktop) */
@media (min-width: 992px){
  .bs-footer--with-sidebar{
    /* dorong elemen footer melebar ke kiri sampai ke tepi layar */
    margin-left: calc(-1 * var(--sidebar-w));
    /* geser isi footer ke kanan supaya logo tidak ketutup sidebar */
    padding-left: var(--sidebar-w);
    /* pastikan layer di bawah sidebar (sidebar kamu z-index tinggi) */
    z-index: 1;
  }
}

/* mobile/tablet: kembali normal */
@media (max-width: 991.98px){
  .bs-footer--with-sidebar{
    margin-left: 0;
    padding-left: 0;
  }
}