:root{
  --brand-dark: #0d0d0d;
  --brand: #ff6a00;
  --brand-light: #fff4ec;
  --accent: #ffb347;
  --flame-red: #d92b1b;

  /* Palet gelap buat konten tengah - abu gelap hangat, bukan hitam pekat */
  --bg-page: #1e1c1b;
  --bg-card: #262322;
  --bg-card-alt: #2c2825;
  --text-main: #f0ece7;
  --text-muted-dark: #a89f97;
  --border-dark: rgba(255,255,255,.08);

  /* Bootstrap 5.3 pakai CSS variables ini secara global, jadi card/modal/table/
     dropdown/form ikut gelap otomatis tanpa perlu override tiap class satu-satu */
  --bs-body-bg: var(--bg-page);
  --bs-body-color: var(--text-main);
  --bs-border-color: var(--border-dark);
  --bs-secondary-color: var(--text-muted-dark);
  --bs-secondary-bg: #54565c;
  --bs-tertiary-bg: var(--bg-card-alt);
  --bs-emphasis-color: #ffffff;

  --bs-card-bg: var(--bg-card);
  --bs-card-color: var(--text-main);
  --bs-card-border-color: var(--border-dark);

  --bs-modal-bg: var(--bg-card);
  --bs-modal-color: var(--text-main);

  --bs-dropdown-bg: var(--bg-card);
  --bs-dropdown-color: var(--text-main);
  --bs-dropdown-link-color: var(--text-main);
  --bs-dropdown-link-hover-bg: rgba(255,106,0,.15);
  --bs-dropdown-link-hover-color: #ffffff;
  --bs-dropdown-border-color: var(--border-dark);

  --bs-table-color: var(--text-main);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-hover-bg: rgba(255,106,0,.09);
  --bs-table-border-color: var(--border-dark);

  --bs-list-group-bg: transparent;
  --bs-list-group-color: var(--text-main);
  --bs-list-group-border-color: var(--border-dark);
}
body{
  font-family: 'Poppins', sans-serif;
  background: var(--bg-page);
  color: var(--text-main);
}
.app-navbar{
  background: linear-gradient(90deg, var(--brand-dark), var(--flame-red) 55%, var(--brand));
  height: 60px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  z-index: 1030;
}
.app-navbar .navbar-brand{
  color: #fff;
  font-weight: 600;
  max-width: 150px;
}
.navbar-username{
  display: inline-block;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
@media (max-width: 400px){
  .app-navbar .brand-text{ display: none; }
  .navbar-username{ max-width: 70px; }
}
.role-badge{ font-size: .75rem; padding: .4em .7em; }
.role-admin{ background: var(--brand-dark); color:#fff; }
.role-pengurus{ background: var(--brand); color:#1a1a1a; }
.role-jemaat{ background: var(--accent); color:#1a1a1a; }

.app-wrapper{
  display:flex;
  padding-top: 60px;
  min-height: 100vh;
}
.app-sidebar{
  width: 250px;
  background: var(--bg-card);
  border-right: 1px solid var(--border-dark);
  position: fixed;
  top: 60px;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  z-index: 1020;
  transition: transform .25s ease;
}
.sidebar-inner{ padding: 1rem .5rem; }
.sidebar-link{
  color: var(--text-main);
  border-radius: 8px;
  padding: .6rem .9rem;
  margin-bottom: .15rem;
  font-size: .92rem;
}
.sidebar-link:hover{ background: rgba(255,106,0,.14); color: var(--brand); }
.sidebar-link.active{ background: linear-gradient(90deg, var(--flame-red), var(--brand)); color: #fff; font-weight: 500; }

.app-content{
  margin-left: 250px;
  padding: 1.75rem;
  width: 100%;
}
@media (max-width: 991.98px){
  .app-sidebar{ transform: translateX(-100%); }
  .app-sidebar.show{ transform: translateX(0); box-shadow: 4px 0 12px rgba(0,0,0,.4); }
  .app-content{ margin-left: 0; }
}

.stat-card{
  border: none;
  border-radius: 14px;
  color:#fff;
  padding: 1.25rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.stat-card .stat-icon{
  width: 46px; height:46px; border-radius: 12px;
  background: rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  font-size: 1.2rem;
}
.stat-card h3{ font-weight:700; margin:0; }
.bg-grad-1{ background: linear-gradient(135deg,#ff6a00,#d92b1b); }
.bg-grad-2{ background: linear-gradient(135deg,#3a3a3a,#161616); }
.bg-grad-3{ background: linear-gradient(135deg,#ffb347,#ff6a00); }
.bg-grad-4{ background: linear-gradient(135deg,#d92b1b,#6b0f08); }

.card-section{
  border:1px solid var(--border-dark); border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.table thead{ background: rgba(255,106,0,.12); }
.table > :not(caption) > * > *{ color: var(--text-main); }

.form-control, .form-select{
  background-color: var(--bg-card-alt);
  color: var(--text-main);
  border-color: var(--border-dark);
}
.form-control:focus, .form-select:focus{
  background-color: var(--bg-card-alt);
  color: var(--text-main);
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(255,106,0,.2);
}
.form-control::placeholder{ color: var(--text-muted-dark); opacity: .8; }
.form-control:disabled, .form-select:disabled{
  background-color: rgba(255,255,255,.04);
  color: var(--text-muted-dark);
}

.modal-header, .modal-footer{ border-color: var(--border-dark) !important; }
.btn-close{ filter: invert(1) grayscale(100%) brightness(200%); }

.auth-wrapper{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--brand-dark), var(--flame-red) 60%, var(--brand));
  padding: 1rem;
}
.auth-card{
  max-width: 420px; width:100%; border-radius:16px; border:none;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.auth-card .card-header{
  background: var(--brand-dark); color:#fff; text-align:center; border-radius:16px 16px 0 0 !important;
  padding: 1.5rem;
}
.auth-card .card-header i{ color: var(--brand); }
.btn-success{
  background: linear-gradient(90deg, var(--flame-red), var(--brand)) !important;
  border: none !important;
}
.btn-success:hover{
  background: linear-gradient(90deg, #b8210f, #e05f00) !important;
}
.btn-outline-success{
  color: var(--brand) !important;
  border-color: var(--brand) !important;
}
.btn-outline-success:hover{
  background: var(--brand) !important;
  color: #1a1a1a !important;
}
.text-success{ color: var(--brand) !important; }
.text-muted{ color: var(--text-muted-dark) !important; }
code{ color: var(--accent); background: rgba(255,255,255,.06); padding: .1rem .35rem; border-radius: 4px; }