/* ========= THEME TOKENS ========= */
:root,[data-theme="light"]{
  /* brand */
  --brand-green: #198754; /* bootstrap success */
  --brand-brick: #9b2c2c; /* merah bata */

  /* base surfaces */
  --bg-body: #ffffff;
  --bg-surface-1: #ffffff;
  --bg-surface-2: #f6f7f9;

  /* text & borders */
  --text: #212529;
  --muted: #6c757d;
  --border: rgba(0,0,0,.12);
  --shadow: 0 6px 18px rgba(0,0,0,.06);

  /* map to bootstrap vars */
  --bs-body-bg: var(--bg-body);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-card-bg: var(--bg-surface-1);
  --bs-card-border-color: var(--border);
  --bs-tertiary-bg: var(--bg-surface-2);
}
[data-theme="dark"]{
  --brand-green: #1fa074;
  --brand-brick: #7a2323;

  --bg-body: #121315;
  --bg-surface-1: #1a1c1f;
  --bg-surface-2: #202327;

  --text: #e9ecef;
  --muted: #b5bcc6;
  --border: rgba(255,255,255,.14);
  --shadow: 0 10px 30px rgba(0,0,0,.55);

  --bs-body-bg: var(--bg-body);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-card-bg: var(--bg-surface-1);
  --bs-card-border-color: var(--border);
  --bs-tertiary-bg: var(--bg-surface-2);
}

/* base */
body{ background: var(--bs-body-bg); color: var(--bs-body-color); }
.text-muted{ color: var(--muted) !important; }

/* header bars */
.public-header{ background: var(--brand-green) !important; }
.admin-body .navbar.bg-danger{ background: var(--brand-brick) !important; }

/* cards & shadows */
.card{
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-card-border-color);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* modal follow theme */
.modal-content{
  background: var(--bg-surface-1);
  color: var(--text);
  border: 1px solid var(--border);
}

/* tables: better contrast in dark */
.table>thead>tr>th{
  background: var(--bg-surface-2) !important;
  color: var(--text);
  border-bottom-color: var(--border) !important;
}
.table td, .table th{ border-color: var(--bs-border-color) !important; }
[data-theme="dark"] .table-hover tbody tr:hover>*{ background: rgba(255,255,255,.03); }

/* .table-light often used for headers */
[data-theme="dark"] .table-light{
  --bs-table-bg: var(--bg-surface-2);
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--bs-border-color);
}

/* badges still readable */
.badge{ border: 1px solid var(--bs-border-color); }

/* Bottom nav (mobile) */
.jubedo-bottom-nav{
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
  background: var(--bg-surface-1);
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-around; align-items: center;
  padding: 8px 10px calc(env(safe-area-inset-bottom,0) + 8px);
  box-shadow: 0 -6px 24px rgba(0,0,0,.08);
}
[data-theme="dark"] .jubedo-bottom-nav{
  box-shadow: 0 -10px 30px rgba(0,0,0,.5);
}
.jubedo-bottom-nav .item{
  flex:1 1 20%; text-align:center; color: var(--bs-body-color); text-decoration:none;
}
.jubedo-bottom-nav .item .icon{ display:block; font-size:1.25rem; line-height:1; }
.jubedo-bottom-nav .item .txt{ display:block; font-size:.75rem; margin-top:.125rem; }
.jubedo-bottom-nav .item.cta{
  background: radial-gradient(70% 70% at 50% 10%, rgba(25,135,84,.18), transparent);
  border-radius:16px; margin-top:-12px; padding:6px 4px;
  box-shadow: 0 10px 26px rgba(25,135,84,.28);
}
.jubedo-bottom-nav .item.cta .icon{ font-size:1.6rem; }
.jubedo-bottom-nav .item.cta .txt{ font-weight:600; }

/* helper */
.table-nowrap th, .table-nowrap td { white-space: nowrap; }


:root {
  --brand-green: #16a34a;
  --brand-brick: #8B1E1E;
  --bg: #ffffff;
  --fg: #0f172a;
  --card: #ffffff;
  --muted: #64748b;
}
[data-theme="dark"] {
  --bg: #1a1a1a;
  --fg: #e5e7eb;
  --card: #222;
  --muted: #94a3b8;
}
html, body { background: var(--bg); color: var(--fg); }
.public-header { background: var(--brand-green) !important; }
.navbar.bg-danger { background-color: var(--brand-brick) !important; }
.card { background: var(--card); border: 1px solid rgba(0,0,0,.06); border-radius: 16px; }
.jubedo-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
  display: grid; grid-template-columns: repeat(3,1fr); background: var(--card);
  border-top: 1px solid rgba(0,0,0,.08);
}
.jubedo-bottom-nav .item {
  padding: 8px 6px; text-align:center; text-decoration:none; color: var(--fg);
}
.jubedo-bottom-nav .icon { display:block; font-size:18px; line-height:20px; }
.jubedo-bottom-nav .txt { display:block; font-size:12px; color: var(--muted); }
.btn-brand { background: var(--brand-green); border: none; color: #fff; }
.btn-brand:hover { filter: brightness(.95); }
.form-hint { font-size: 12px; color: var(--muted); }
.admin-body main.container { max-width: 1200px; }


/* ===== DARK MODE HARDENING (tables, forms, utilities) ===== */

/* TABLE: paksa variabel agar kontras di dark */
[data-theme="dark"] .table{
  color: var(--text) !important;
  --bs-table-bg: var(--bg-surface-1);
  --bs-table-border-color: var(--border);
  --bs-table-color: var(--text);
  --bs-table-striped-bg: rgba(255,255,255,.045);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: rgba(255,255,255,.07);
  --bs-table-hover-color: var(--text);
  --bs-table-active-bg: rgba(255,255,255,.09);
  --bs-table-active-color: var(--text);
}
[data-theme="dark"] .table thead th{
  background: var(--bg-surface-2) !important;
  color: var(--text) !important;
  border-bottom-color: var(--border) !important;
}
/* Emergency: kalau ada sel yang “ngeyel” pakai .text-dark/.text-black */
[data-theme="dark"] .table td,
[data-theme="dark"] .table th{
  color: var(--text) !important;
}

/* FORM CONTROLS: select/input/append kontras */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text{
  background-color: var(--bg-surface-1) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .form-control::placeholder{ color: rgba(255,255,255,.55); }

/* BUTTON outline agar kelihatan */
[data-theme="dark"] .btn-outline-secondary{
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .btn-outline-secondary:hover{
  background: var(--bg-surface-2);
}

/* UTILITIES yang sering bikin gelap: netralkan di dark */
[data-theme="dark"] .bg-white{ background-color: var(--bg-surface-1) !important; }
[data-theme="dark"] .bg-light{ background-color: var(--bg-surface-2) !important; }
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-black{ color: var(--text) !important; }
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end{ border-color: var(--border) !important; }

/* Table caption/hint muted tetap kebaca */
[data-theme="dark"] .table .text-muted{ color: var(--muted) !important; }

/* ===== Safe space for bottom fixed nav (mobile) ===== */
@media (max-width: 767.98px) {
  /* sisakan ruang di bawah konten utama */
  .public-body main {
    /* 88px ≈ tinggi nav + padding; tambahkan safe-area untuk iPhone */
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0));
  }

  /* kalau ada .container lain di luar <main>, aman-kan juga */
  .public-body .container:last-child {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0));
  }
}



/* ===== Sticky submit area above bottom nav (mobile) ===== */
@media (max-width: 767.98px) {
  .sticky-safe-actions {
    position: sticky;
    bottom: calc(88px + env(safe-area-inset-bottom, 0) + 8px);
    z-index: 2;
    background: var(--bs-body-bg);
    padding: .75rem .5rem;
    border-top: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.08));
    border-radius: .75rem .75rem 0 0;
  }
  .sticky-safe-actions .btn {
    width: 100%;
  }
  [data-theme="dark"] .sticky-safe-actions {
    background: #121212; /* agar kontras di dark mode */
    border-top-color: rgba(255,255,255,.12);
  }
}