/* =========================================================
   e-Barasih — tema hijau "eco" di atas AdminLTE 4 / Bootstrap 5
   ========================================================= */
:root {
  --eb-green-900: #022c22;
  --eb-green-800: #064e3b;
  --eb-green-700: #065f46;
  --eb-green-600: #047857;
  --eb-green-500: #059669;
  --eb-green-400: #10b981;
  --eb-green-100: #d1fae5;
  --eb-green-50:  #ecfdf5;
  --eb-lime: #a3e635;
  --eb-amber: #f59e0b;
  --eb-radius: 1rem;
  --eb-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);

  --bs-primary: #059669;
  --bs-primary-rgb: 5, 150, 105;
  --bs-success: #059669;
  --bs-success-rgb: 5, 150, 105;
  --bs-link-color: #047857;
  --bs-link-color-rgb: 4, 120, 87;
  --bs-link-hover-color: #065f46;
  --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-border-radius: .65rem;
  --bs-border-radius-lg: 1rem;
}
[data-bs-theme="light"] body.bg-body-tertiary, body.bg-body-tertiary { background-color: #f3f7f5 !important; }
[data-bs-theme="dark"] body.bg-body-tertiary { background-color: #0b1411 !important; }
[data-bs-theme="dark"] {
  --bs-body-bg: #0f1a16;
  --bs-tertiary-bg: #0b1411;
  --bs-link-color: #34d399;
  --bs-link-color-rgb: 52, 211, 153;
  --eb-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
body { font-family: var(--bs-body-font-family); letter-spacing: -.005em; }

/* ---------- tombol ---------- */
.btn { font-weight: 600; border-radius: .7rem; }
.btn-primary, .btn-success {
  --bs-btn-bg: var(--eb-green-500); --bs-btn-border-color: var(--eb-green-500);
  --bs-btn-hover-bg: var(--eb-green-600); --bs-btn-hover-border-color: var(--eb-green-600);
  --bs-btn-active-bg: var(--eb-green-700); --bs-btn-active-border-color: var(--eb-green-700);
  --bs-btn-disabled-bg: var(--eb-green-500); --bs-btn-disabled-border-color: var(--eb-green-500);
}
.btn-outline-primary {
  --bs-btn-color: var(--eb-green-600); --bs-btn-border-color: var(--eb-green-500);
  --bs-btn-hover-bg: var(--eb-green-500); --bs-btn-hover-border-color: var(--eb-green-500);
  --bs-btn-active-bg: var(--eb-green-600);
}
.btn-soft { background: var(--eb-green-50); color: var(--eb-green-700); border: 0; }
.btn-soft:hover { background: var(--eb-green-100); color: var(--eb-green-800); }
[data-bs-theme="dark"] .btn-soft { background: rgba(16,185,129,.12); color: #6ee7b7; }
.text-primary { color: var(--eb-green-600) !important; }
[data-bs-theme="dark"] .text-primary { color: #34d399 !important; }
.bg-primary { background-color: var(--eb-green-500) !important; }
.form-control:focus, .form-select:focus { border-color: var(--eb-green-400); box-shadow: 0 0 0 .2rem rgba(16,185,129,.18); }
.form-check-input:checked { background-color: var(--eb-green-500); border-color: var(--eb-green-500); }
.form-control, .form-select { border-radius: .7rem; padding-top: .55rem; padding-bottom: .55rem; }
.form-label { font-weight: 600; font-size: .875rem; margin-bottom: .35rem; }
.nav-pills .nav-link.active { background: var(--eb-green-500); }
.nav-pills .nav-link { color: var(--bs-body-color); font-weight: 600; border-radius: .7rem; }

/* ---------- header ---------- */
.eb-header { border-bottom: 1px solid var(--bs-border-color-translucent); box-shadow: none !important; }
.eb-avatar {
  width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center;
  background: linear-gradient(135deg, var(--eb-green-400), var(--eb-green-700)); color: #fff;
  font-weight: 700; font-size: .8rem;
}
.eb-dropdown { border-radius: 1rem; min-width: 240px; overflow: hidden; }
.eb-dot { font-size: .6rem; }
.eb-page-title { font-weight: 800; letter-spacing: -.02em; font-size: 1.45rem; }
.app-content-header { padding-top: 1.1rem; padding-bottom: .6rem; }

/* ---------- sidebar ---------- */
.eb-sidebar { background: linear-gradient(180deg, var(--eb-green-800) 0%, var(--eb-green-900) 100%) !important; }
.eb-sidebar .sidebar-brand { border-bottom: 1px solid rgba(255,255,255,.08); }
.eb-sidebar .brand-link .brand-text { color: #fff; letter-spacing: -.01em; }
.eb-brand-img { background: #fff; border-radius: .6rem; padding: 3px; box-shadow: none !important; opacity: 1 !important; }
.eb-sidebar .nav-header { color: rgba(255,255,255,.45) !important; font-size: .68rem; font-weight: 700; letter-spacing: .08em; padding-top: 1rem !important; }
.eb-sidebar .sidebar-menu .nav-link { color: rgba(255,255,255,.78); border-radius: .7rem; margin: 1px .5rem; font-weight: 500; }
.eb-sidebar .sidebar-menu .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.eb-sidebar .sidebar-menu .nav-link.active {
  background: rgba(163,230,53,.14) !important; color: #fff !important; font-weight: 700;
  box-shadow: inset 3px 0 0 var(--eb-lime);
}
.eb-sidebar .sidebar-menu .nav-link.active .nav-icon { color: var(--eb-lime); }
.eb-side-kelas { background: rgba(255,255,255,.08); border-radius: .8rem; padding: .7rem .9rem; color: #fff; }
.eb-side-footer { color: rgba(255,255,255,.4); font-size: .72rem; margin-top: 1.5rem; }
.sidebar-collapse .eb-side-kelas, .sidebar-collapse .eb-side-footer { display: none; }

/* ---------- kartu ---------- */
.card { border: 0; border-radius: var(--eb-radius); box-shadow: var(--eb-shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--bs-border-color-translucent); padding: 1rem 1.25rem; }
.card-header .card-title { font-weight: 700; font-size: 1rem; margin: 0; }
.card-body { padding: 1.25rem; }
.card-footer { background: transparent; }

.stat-card { position: relative; overflow: hidden; }
.stat-card .stat-icon {
  width: 46px; height: 46px; border-radius: .9rem; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0;
}
.stat-card .stat-label { font-size: .78rem; color: var(--bs-secondary-color); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.stat-card .stat-value { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.stat-card .stat-sub { font-size: .78rem; color: var(--bs-secondary-color); }
.ic-green  { background: var(--eb-green-50); color: var(--eb-green-600); }
.ic-amber  { background: #fef3c7; color: #b45309; }
.ic-blue   { background: #e0f2fe; color: #0369a1; }
.ic-violet { background: #ede9fe; color: #6d28d9; }
.ic-rose   { background: #ffe4e6; color: #be123c; }
.ic-teal   { background: #ccfbf1; color: #0f766e; }
[data-bs-theme="dark"] .ic-green  { background: rgba(16,185,129,.15); color: #34d399; }
[data-bs-theme="dark"] .ic-amber  { background: rgba(245,158,11,.15); color: #fbbf24; }
[data-bs-theme="dark"] .ic-blue   { background: rgba(14,165,233,.15); color: #38bdf8; }
[data-bs-theme="dark"] .ic-violet { background: rgba(139,92,246,.15); color: #a78bfa; }
[data-bs-theme="dark"] .ic-rose   { background: rgba(244,63,94,.15); color: #fb7185; }
[data-bs-theme="dark"] .ic-teal   { background: rgba(20,184,166,.15); color: #2dd4bf; }

/* kartu dompet / hero */
.eb-wallet {
  border-radius: 1.4rem; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, #10b981 0%, #047857 45%, #064e3b 100%);
  box-shadow: 0 12px 30px -12px rgba(4,120,87,.55);
}
.eb-wallet::before, .eb-wallet::after {
  content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08);
}
.eb-wallet::before { width: 220px; height: 220px; right: -60px; top: -80px; }
.eb-wallet::after  { width: 140px; height: 140px; right: 60px; bottom: -70px; background: rgba(163,230,53,.12); }
.eb-wallet > * { position: relative; z-index: 1; }
.eb-wallet .w-label { opacity: .8; font-size: .82rem; font-weight: 600; }
.eb-wallet .w-saldo { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.eb-wallet .btn-light { color: var(--eb-green-700); }
.eb-wallet .btn-glass { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.eb-wallet .btn-glass:hover { background: rgba(255,255,255,.25); color: #fff; }
.eb-hero {
  border-radius: 1.4rem; color: #fff; overflow: hidden; position: relative;
  background: linear-gradient(120deg, #064e3b 0%, #047857 55%, #10b981 100%);
}
.eb-hero .hero-leaf { position: absolute; right: -10px; bottom: -30px; font-size: 9rem; opacity: .1; transform: rotate(-15deg); }
.eb-impact { background: linear-gradient(135deg, #ecfccb, #d1fae5); border-radius: var(--eb-radius); }
[data-bs-theme="dark"] .eb-impact { background: linear-gradient(135deg, rgba(163,230,53,.08), rgba(16,185,129,.12)); }

/* ---------- tabel ---------- */
.table-modern { margin-bottom: 0; }
.table-modern > thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color);
  font-weight: 700; background: var(--bs-tertiary-bg); border-bottom: 0; white-space: nowrap; padding: .75rem 1rem;
}
.table-modern > tbody td { padding: .8rem 1rem; vertical-align: middle; border-color: var(--bs-border-color-translucent); }
.table-modern > tfoot td, .table-modern > tfoot th { padding: .8rem 1rem; font-weight: 700; }
.table-modern tbody tr:hover { background: rgba(16,185,129,.04); }
.kode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; font-weight: 600; }
.badge { font-weight: 600; }
.badge-soft-success { background: #d1fae5 !important; color: #047857 !important; }
.badge-soft-warning { background: #fef3c7 !important; color: #b45309 !important; }
.badge-soft-danger { background: #ffe4e6 !important; color: #be123c !important; }
.badge-soft-secondary { background: #e5e7eb !important; color: #4b5563 !important; }
[data-bs-theme="dark"] .badge-soft-success { background: rgba(16,185,129,.18) !important; color: #6ee7b7 !important; }
[data-bs-theme="dark"] .badge-soft-warning { background: rgba(245,158,11,.18) !important; color: #fcd34d !important; }
[data-bs-theme="dark"] .badge-soft-danger { background: rgba(244,63,94,.18) !important; color: #fda4af !important; }
[data-bs-theme="dark"] .badge-soft-secondary { background: rgba(255,255,255,.1) !important; color: #d1d5db !important; }
.amount-in { color: #047857; font-weight: 700; }
.amount-out { color: #be123c; font-weight: 700; }
[data-bs-theme="dark"] .amount-in { color: #34d399; }
[data-bs-theme="dark"] .amount-out { color: #fb7185; }

/* daftar ringkas (mobile friendly) */
.eb-list-item { display: flex; align-items: center; gap: .85rem; padding: .85rem 1.25rem; border-bottom: 1px solid var(--bs-border-color-translucent); color: inherit; text-decoration: none; }
.eb-list-item:last-child { border-bottom: 0; }
a.eb-list-item:hover { background: rgba(16,185,129,.05); }
.eb-list-icon { width: 40px; height: 40px; border-radius: .8rem; display: grid; place-items: center; flex-shrink: 0; font-size: 1.1rem; }
.eb-empty { text-align: center; padding: 2.5rem 1rem; color: var(--bs-secondary-color); }
.eb-empty i { font-size: 2.6rem; display: block; margin-bottom: .5rem; opacity: .5; }

/* ---------- pemilih sampah (tile) ---------- */
.eb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.eb-tile {
  border: 1.5px solid var(--bs-border-color); border-radius: .9rem; padding: .7rem .75rem; cursor: pointer;
  background: var(--bs-body-bg); text-align: left; transition: .15s; position: relative; width: 100%;
}
.eb-tile:hover { border-color: var(--eb-green-400); transform: translateY(-1px); }
.eb-tile.selected { border-color: var(--eb-green-500); background: var(--eb-green-50); }
[data-bs-theme="dark"] .eb-tile.selected { background: rgba(16,185,129,.12); }
.eb-tile .t-dot { width: 26px; height: 26px; border-radius: .5rem; display: inline-grid; place-items: center; color: #fff; font-size: .8rem; }
.eb-tile .t-name { font-weight: 700; font-size: .82rem; line-height: 1.25; margin-top: .4rem; }
.eb-tile .t-price { font-size: .75rem; color: var(--bs-secondary-color); }
.eb-tile .t-check { position: absolute; top: .5rem; right: .55rem; color: var(--eb-green-500); display: none; }
.eb-tile.selected .t-check { display: block; }
.eb-tile:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.eb-cat-filter .btn { border-radius: 2rem; font-size: .8rem; padding: .3rem .8rem; }

.eb-item-row { border: 1px solid var(--bs-border-color-translucent); border-radius: .9rem; padding: .75rem; margin-bottom: .6rem; background: var(--bs-body-bg); }
.eb-item-row .item-name { font-weight: 700; font-size: .9rem; }
.eb-item-row .item-sub { font-size: .78rem; color: var(--bs-secondary-color); }
.eb-item-row .item-subtotal { font-weight: 800; color: var(--eb-green-600); }
.eb-total-bar {
  background: linear-gradient(120deg, var(--eb-green-700), var(--eb-green-500)); color: #fff; border-radius: 1rem; padding: 1rem 1.1rem;
}
.eb-total-bar .tv { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }

/* ---------- peringkat ---------- */
.eb-podium { display: flex; align-items: flex-end; justify-content: center; gap: .6rem; }
.eb-podium .pod { flex: 1; max-width: 190px; text-align: center; }
.eb-podium .pod .bar { border-radius: 1rem 1rem .4rem .4rem; color: #fff; padding: .8rem .5rem; font-weight: 800; }
.eb-podium .p1 .bar { height: 140px; background: linear-gradient(180deg, #fbbf24, #d97706); }
.eb-podium .p2 .bar { height: 105px; background: linear-gradient(180deg, #cbd5e1, #64748b); }
.eb-podium .p3 .bar { height: 80px;  background: linear-gradient(180deg, #fdba74, #c2410c); }
.eb-podium .pod .medal { font-size: 1.8rem; }
.eb-podium .pod .nm { font-weight: 800; font-size: .9rem; line-height: 1.2; }
.eb-podium .pod .kg { font-size: .78rem; color: var(--bs-secondary-color); }
.eb-rank { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 800; font-size: .85rem; background: var(--bs-tertiary-bg); }
.eb-progress { height: 8px; border-radius: 8px; background: var(--bs-tertiary-bg); }
.eb-progress .progress-bar { background: linear-gradient(90deg, var(--eb-green-400), var(--eb-lime)); border-radius: 8px; }
.eb-me { background: rgba(163,230,53,.12) !important; }

/* ---------- login ---------- */
.eb-login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.eb-login-art {
  background: radial-gradient(120% 120% at 0% 0%, #10b981 0%, #047857 40%, #022c22 100%);
  color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
.eb-login-art .bubble { position: absolute; border-radius: 50%; background: rgba(255,255,255,.06); }
.eb-login-art h1 { font-weight: 800; letter-spacing: -.03em; font-size: 2.6rem; line-height: 1.1; }
.eb-feature { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1rem; }
.eb-feature i { background: rgba(255,255,255,.12); width: 38px; height: 38px; border-radius: .8rem; display: grid; place-items: center; flex-shrink: 0; }
.eb-login-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.eb-login-box { width: 100%; max-width: 400px; }
.eb-login-box .form-control { padding: .75rem 1rem; }
@media (max-width: 991.98px) {
  .eb-login { grid-template-columns: 1fr; }
  .eb-login-art { padding: 2rem 1.5rem 3.5rem; min-height: auto; }
  .eb-login-art .art-features { display: none; }
  .eb-login-art h1 { font-size: 1.8rem; }
  .eb-login-form { margin-top: -2rem; padding-top: 0; }
  .eb-login-box { background: var(--bs-body-bg); border-radius: 1.4rem; padding: 1.5rem; box-shadow: var(--eb-shadow); }
}

/* ---------- navigasi bawah (mobile) ---------- */
.eb-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; display: flex; justify-content: space-around; align-items: flex-end;
  background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color-translucent);
  padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(0,0,0,.05);
}
.eb-bn-item { flex: 1; text-align: center; color: var(--bs-secondary-color); text-decoration: none; font-size: .68rem; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.eb-bn-item .eb-bn-icon { font-size: 1.25rem; position: relative; line-height: 1; padding: .25rem .9rem; border-radius: 1rem; }
.eb-bn-item.active { color: var(--eb-green-600); }
.eb-bn-item.active .eb-bn-icon { background: var(--eb-green-50); }
[data-bs-theme="dark"] .eb-bn-item.active { color: #34d399; }
[data-bs-theme="dark"] .eb-bn-item.active .eb-bn-icon { background: rgba(16,185,129,.15); }
.eb-bn-fab .eb-bn-icon {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; padding: 0; margin-top: -26px;
  background: linear-gradient(135deg, var(--eb-green-400), var(--eb-green-700)) !important; color: #fff; font-size: 1.5rem;
  box-shadow: 0 8px 18px -4px rgba(4,120,87,.6); border: 4px solid var(--bs-body-bg);
}
.eb-bn-badge { position: absolute; top: -4px; right: 6px; background: #ef4444; color: #fff; font-size: .6rem; border-radius: 1rem; padding: 1px 5px; }
@media (max-width: 991.98px) {
  .app-main { padding-bottom: 90px; }
  .eb-page-title { font-size: 1.2rem; }
  .card-body { padding: 1rem; }
  .stat-card .stat-value { font-size: 1.1rem; }
  .eb-wallet .w-saldo { font-size: 1.75rem; }
  .eb-actions .btn { font-size: .85rem; }
  .table-modern > tbody td, .table-modern > thead th { padding: .65rem .75rem; }
  .eb-sticky-total { position: sticky; bottom: 78px; z-index: 5; }
}

/* ---------- cetak ---------- */
.print-only { display: none; }
@media print {
  .app-header, .app-sidebar, .app-footer, .eb-bottom-nav, .no-print, .eb-actions, .btn { display: none !important; }
  .print-only { display: block !important; }
  .app-main { margin: 0 !important; padding: 0 !important; }
  body { background: #fff !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd; }
  .tab-content > .tab-pane { display: block !important; opacity: 1 !important; margin-bottom: 1rem; }
  .app-wrapper { display: block !important; }
  .table-modern > thead th { background: #f1f5f9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.kop { border-bottom: 3px double #111; padding-bottom: .6rem; margin-bottom: 1rem; }
.kop img { height: 60px; }