/* =========================================================================
   SIKAP — Theme Layer (Fase 1: Fondasi)
   Ditulis di ATAS sb-admin.min.css / bootstrap.min.css yang sudah ada.
   Tidak mengubah struktur HTML/markup lama — hanya menimpa tampilan lewat
   class Bootstrap/SB Admin yang sudah dipakai di seluruh halaman, supaya
   semua ±90 halaman ikut ter-update tanpa perlu disentuh satu per satu.
   Palet: hijau islami modern + netral abu-abu, aksen emas tipis.
   ========================================================================= */

:root {
  --sikap-green-900: #063f2e;
  --sikap-green-800: #0a5040;
  --sikap-green-700: #0f6e51;
  --sikap-green-600: #128a63;
  --sikap-green-500: #16a374;
  --sikap-green-400: #2ebd8c;
  --sikap-green-100: #e6f6f0;
  --sikap-green-50:  #f2faf7;

  --sikap-gold-500:  #c9a24b;
  --sikap-gold-100:  #faf2df;

  --sikap-red-500:   #e0554a;
  --sikap-amber-500: #e0a13a;
  --sikap-blue-500:  #3b82c4;

  --sikap-ink-900:   #16211d;
  --sikap-ink-700:   #3d4b45;
  --sikap-ink-500:   #6b7a73;
  --sikap-ink-300:   #a9b6b0;

  --sikap-bg:        #f3f7f5;
  --sikap-surface:   #ffffff;
  --sikap-border:    #e3ece8;

  --sikap-radius-sm: 8px;
  --sikap-radius:    14px;
  --sikap-radius-lg: 18px;

  --sikap-shadow-sm: 0 1px 3px rgba(6, 41, 30, 0.06);
  --sikap-shadow:    0 6px 20px rgba(6, 41, 30, 0.08);
  --sikap-shadow-lg: 0 12px 32px rgba(6, 41, 30, 0.14);

  --sikap-navbar-h: 60px;
  --sikap-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* -------------------------------------------------------------------------
   0. Dasar
   ------------------------------------------------------------------------- */
html, body {
  background-color: var(--sikap-bg);
  color: var(--sikap-ink-900);
  font-family: var(--sikap-font);
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
}

/* Cegah auto-zoom Safari/Chrome mobile saat fokus ke input (min. 16px) */
input, select, textarea, .form-control {
  font-size: 16px;
}

a {
  color: var(--sikap-green-700);
}
a:hover, a:focus {
  color: var(--sikap-green-800);
}

::selection {
  background: var(--sikap-green-100);
  color: var(--sikap-green-900);
}

#wrapper #content-wrapper {
  background-color: var(--sikap-bg);
}

.container-fluid {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 768px) {
  .container-fluid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* -------------------------------------------------------------------------
   1. Navbar atas
   ------------------------------------------------------------------------- */
.navbar.static-top,
nav.navbar.navbar-dark.bg-dark {
  position: sticky;
  top: 0;
  z-index: 1050;
  min-height: var(--sikap-navbar-h);
  background: linear-gradient(135deg, var(--sikap-green-800), var(--sikap-green-700)) !important;
  box-shadow: var(--sikap-shadow-sm);
  border-bottom: none;
}

.navbar .navbar-brand {
  font-weight: 700;
  letter-spacing: 0.03em;
}

.navbar #sidebarToggle {
  color: #fff;
  opacity: 0.9;
}
.navbar #sidebarToggle:hover {
  opacity: 1;
}

.navbar .nav-link {
  transition: opacity 0.15s ease;
}

.navbar .badge.badge-danger {
  background-color: var(--sikap-gold-500);
  color: var(--sikap-green-900);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   2. Sidebar (desktop: rail/panel bawaan dipertahankan, hanya diwarnai ulang)
   ------------------------------------------------------------------------- */
.sidebar {
  background: linear-gradient(180deg, var(--sikap-green-900), var(--sikap-green-800)) !important;
}

.sidebar .nav-item .nav-link {
  color: rgba(255, 255, 255, 0.72);
  border-left: 3px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item .nav-link:focus,
.sidebar .nav-item .nav-link:active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.06);
}

.sidebar .nav-item.active > .nav-link,
.sidebar .nav-item .nav-link.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.09);
  border-left-color: var(--sikap-gold-500);
}

.sidebar .nav-item .nav-link i {
  color: var(--sikap-green-400);
  width: 1.25rem;
}

.sidebar .dropdown-menu {
  background-color: var(--sikap-surface);
  border: none;
  border-radius: var(--sikap-radius-sm);
  box-shadow: var(--sikap-shadow-lg);
  overflow: hidden;
}
.sidebar .dropdown-menu .dropdown-item {
  color: var(--sikap-ink-900);
  padding: 0.65rem 1.1rem;
}
.sidebar .dropdown-menu .dropdown-item:hover {
  background-color: var(--sikap-green-50);
  color: var(--sikap-green-800);
}

/* -------------------------------------------------------------------------
   3. Sidebar mobile: jadi drawer geser + backdrop (bukan rail 90px sempit)
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .sidebar {
    position: fixed !important;
    top: var(--sikap-navbar-h);
    left: 0;
    bottom: 0;
    width: 80vw !important;
    max-width: 300px !important;
    min-height: calc(100vh - var(--sikap-navbar-h)) !important;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    z-index: 1045;
    overflow-y: auto;
    box-shadow: 10px 0 28px rgba(0, 0, 0, 0.25);
  }

  .sidebar.toggled {
    transform: translateX(0);
    overflow-y: auto !important;
    /* sb-admin.min.css punya aturan ".sidebar.toggled{width:0!important}" (tanpa media query,
       jadi berlaku di semua ukuran layar) dengan spesifisitas yang sama (2 class) -- tanpa
       width di sini, aturan dari sb-admin itu menang dan drawer-nya jadi lebar 0 (kelihatan
       cuma backdrop gelap, drawer-nya sendiri tidak pernah tampak). Deklarasikan ulang di sini
       supaya menang (spesifisitas sama, tapi file ini dimuat belakangan). */
    width: 80vw !important;
    max-width: 300px !important;
  }

  .sidebar .nav-item .nav-link {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0.9rem 1.25rem !important;
  }

  .sidebar .nav-item .nav-link span {
    display: inline !important;
    font-size: 0.95rem !important;
    margin-left: 0.5rem;
  }

  .sidebar .nav-item .dropdown-menu {
    position: static !important;
    transform: none !important;
    left: 0 !important;
    margin: 0 0 0 1.5rem !important;
    width: calc(100% - 1.5rem);
  }

  .sidebar .nav-item.dropdown .dropdown-toggle::after {
    display: inline-block !important;
    float: right;
  }

  body.sidebar-toggled {
    overflow: hidden;
  }
}

.sikap-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 20, 15, 0.45);
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.sikap-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

/* -------------------------------------------------------------------------
   4. Kartu (card) — lebih lembut, ada bayangan halus, hover terangkat
   ------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--sikap-border);
  border-radius: var(--sikap-radius);
  box-shadow: var(--sikap-shadow-sm);
}

.card-header {
  background-color: var(--sikap-surface);
  border-bottom: 1px solid var(--sikap-border);
  border-radius: var(--sikap-radius) var(--sikap-radius) 0 0 !important;
  font-weight: 600;
  color: var(--sikap-ink-900);
}

/* Kartu ringkasan berwarna solid (bg-primary/success/warning/danger) di
   dashboard — diubah dari blok warna keras jadi kartu pastel + aksen kiri,
   biar lebih modern & tetap gampang dibedakan per status. */
.card.bg-primary,
.card.bg-success,
.card.bg-warning,
.card.bg-danger,
.card.bg-info {
  color: var(--sikap-ink-900) !important;
  border: 1px solid var(--sikap-border);
  border-left: 5px solid var(--sikap-green-600);
  box-shadow: var(--sikap-shadow);
}
.card.bg-primary { border-left-color: var(--sikap-green-600); background-color: var(--sikap-green-50) !important; }
.card.bg-success { border-left-color: #2f9e63; background-color: #f1faf5 !important; }
.card.bg-warning { border-left-color: var(--sikap-gold-500); background-color: var(--sikap-gold-100) !important; }
.card.bg-danger  { border-left-color: var(--sikap-red-500); background-color: #fdf1f0 !important; }
.card.bg-info    { border-left-color: var(--sikap-blue-500); background-color: #eff6fb !important; }

.card.bg-primary .text-white,
.card.bg-success .text-white,
.card.bg-warning .text-white,
.card.bg-danger .text-white,
.card.bg-info .text-white {
  color: var(--sikap-ink-900) !important;
}

.card.bg-primary .card-body-icon,
.card.bg-success .card-body-icon,
.card.bg-warning .card-body-icon,
.card.bg-danger .card-body-icon,
.card.bg-info .card-body-icon {
  color: rgba(6, 41, 30, 0.12) !important;
}

.card.bg-primary .card-footer,
.card.bg-success .card-footer,
.card.bg-warning .card-footer,
.card.bg-danger .card-footer,
.card.bg-info .card-footer {
  background: transparent !important;
  color: var(--sikap-ink-700) !important;
  border-top: 1px solid var(--sikap-border);
}

.card.bg-primary .card-footer:hover,
.card.bg-success .card-footer:hover,
.card.bg-warning .card-footer:hover,
.card.bg-danger .card-footer:hover,
.card.bg-info .card-footer:hover {
  color: var(--sikap-green-800) !important;
}

/* -------------------------------------------------------------------------
   5. Tombol
   ------------------------------------------------------------------------- */
.btn {
  border-radius: var(--sikap-radius-sm);
  font-weight: 600;
  padding: 0.5rem 1.1rem;
}

.btn-primary {
  background-color: var(--sikap-green-700);
  border-color: var(--sikap-green-700);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--sikap-green-800);
  border-color: var(--sikap-green-800);
}

.btn-success {
  background-color: var(--sikap-green-600);
  border-color: var(--sikap-green-600);
}

.btn-outline-primary {
  color: var(--sikap-green-700);
  border-color: var(--sikap-green-700);
}
.btn-outline-primary:hover {
  background-color: var(--sikap-green-700);
  border-color: var(--sikap-green-700);
}

/* -------------------------------------------------------------------------
   6. Tabel — rapi & bisa discroll horizontal di HP tanpa merusak layout
   ------------------------------------------------------------------------- */
.table {
  background-color: var(--sikap-surface);
}

.table thead th {
  background-color: var(--sikap-green-50);
  color: var(--sikap-green-900);
  border-bottom: 2px solid var(--sikap-border);
  font-weight: 700;
  white-space: nowrap;
}

.table-bordered,
.table-bordered th,
.table-bordered td {
  border-color: var(--sikap-border);
}

.table-hover tbody tr:hover {
  background-color: var(--sikap-green-50);
}

.table-responsive {
  border-radius: var(--sikap-radius-sm);
  border: 1px solid var(--sikap-border);
}
.table-responsive .table {
  margin-bottom: 0;
  border: none;
}

@media (max-width: 767.98px) {
  .table {
    font-size: 0.85rem;
  }
  .table thead th,
  .table td {
    padding: 0.55rem 0.6rem;
  }
}

/* -------------------------------------------------------------------------
   7. Form
   ------------------------------------------------------------------------- */
.form-control,
.custom-select {
  border-radius: var(--sikap-radius-sm);
  border: 1px solid var(--sikap-border);
  padding: 0.55rem 0.85rem;
  height: auto;
}
.form-control:focus,
.custom-select:focus {
  border-color: var(--sikap-green-500);
  box-shadow: 0 0 0 3px rgba(22, 163, 116, 0.15);
}

label {
  font-weight: 600;
  color: var(--sikap-ink-700);
  font-size: 0.9rem;
}

/* -------------------------------------------------------------------------
   8. Breadcrumb — lebih minimal
   ------------------------------------------------------------------------- */
.breadcrumb {
  background-color: transparent;
  padding: 0.5rem 0 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--sikap-border);
  font-size: 0.9rem;
}
.breadcrumb-item.active {
  color: var(--sikap-ink-500);
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--sikap-ink-300);
}

/* -------------------------------------------------------------------------
   9. Dropdown umum, badge, alert
   ------------------------------------------------------------------------- */
.dropdown-menu {
  border: none;
  border-radius: var(--sikap-radius-sm);
  box-shadow: var(--sikap-shadow-lg);
}
.dropdown-item:active {
  background-color: var(--sikap-green-600);
}

.badge {
  border-radius: 6px;
  font-weight: 600;
}

.alert {
  border: none;
  border-radius: var(--sikap-radius-sm);
  border-left: 4px solid transparent;
}
.alert-success { border-left-color: var(--sikap-green-600); background-color: var(--sikap-green-50); color: var(--sikap-green-900); }
.alert-danger  { border-left-color: var(--sikap-red-500); background-color: #fdf1f0; color: #7a2b24; }
.alert-warning { border-left-color: var(--sikap-gold-500); background-color: var(--sikap-gold-100); color: #6b511c; }

/* -------------------------------------------------------------------------
   10. Modal (mis. konfirmasi logout)
   ------------------------------------------------------------------------- */
.modal-content {
  border: none;
  border-radius: var(--sikap-radius);
  box-shadow: var(--sikap-shadow-lg);
}
.modal-header {
  border-bottom: 1px solid var(--sikap-border);
}
.modal-footer {
  border-top: 1px solid var(--sikap-border);
}

/* -------------------------------------------------------------------------
   11. Footer & tombol scroll-to-top
   ------------------------------------------------------------------------- */
footer.sticky-footer {
  background-color: transparent;
  color: var(--sikap-ink-500);
  padding: 1.25rem 0 2rem;
  font-size: 0.85rem;
}

.scroll-to-top {
  background: var(--sikap-green-700);
  border-radius: 50%;
  box-shadow: var(--sikap-shadow);
}
.scroll-to-top:hover {
  background: var(--sikap-green-800);
}

/* -------------------------------------------------------------------------
   12. Halaman muncul dengan transisi halus
   ------------------------------------------------------------------------- */
#content-wrapper {
  animation: sikap-fade-in 0.25s ease;
}
@keyframes sikap-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scrollbar tipis (khusus browser berbasis WebKit, sifatnya progresif) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(15, 110, 81, 0.25);
  border-radius: 8px;
}