/* ==========================================================================
   AP3KnI — Tampilan Versi 2
   --------------------------------------------------------------------------
   Lapisan warna yang menyelaraskan aplikasi registrasi dengan situs utama
   ap3kni.or.id. Dimuat SETELAH blok <style> bawaan tiap layout, sehingga
   aturannya menimpa warna versi 1 tanpa mengubah satu pun berkas view.

   Aktif/nonaktif diatur di  app/Config/Tampilan.php  ($versi = 'v1' | 'v2').

   Versi  : 2.0.0
   Palet  : merah pusaka #C8102E · merah tua #7E0B1E · emas #C2933F
   ========================================================================== */

:root {
  /* ---- Palet AP3KnI ---- */
  --merah:        #C8102E;   /* merah pusaka — warna utama   */
  --merah-terang: #E4243F;   /* keadaan hover                */
  --merah-tua:    #7E0B1E;   /* judul, kepala kartu          */
  --merah-gelap:  #430610;   /* sidebar, footer              */
  --emas:         #C2933F;   /* aksen, status menunggu       */
  --tinta:        #1B1517;   /* teks utama                   */
  --abu:          #6E6367;   /* teks sekunder                */
  --garis:        #E6DDDE;   /* pembatas                     */
  --kertas:       #F6F0EF;   /* latar halaman                */

  /* ---- Menimpa variabel layout lama ---- */
  --sidebar-bg:     var(--merah-gelap);
  --sidebar-hover:  rgba(255, 255, 255, .10);
  --sidebar-active: rgba(200, 16, 46, .38);
  --accent:         var(--merah);
  --text-muted-sb:  rgba(255, 255, 255, .55);

  /* ---- Menimpa variabel Bootstrap 5 ---- */
  --bs-primary:      #C8102E;
  --bs-primary-rgb:  200, 16, 46;
  --bs-link-color:   #7E0B1E;
  --bs-link-hover-color: #C8102E;
  --bs-link-color-rgb: 126, 11, 30;

  --bs-success:      #2E7D5B;
  --bs-success-rgb:  46, 125, 91;
  --bs-warning:      #C2933F;
  --bs-warning-rgb:  194, 147, 63;
  --bs-info:         #3D5A80;
  --bs-info-rgb:     61, 90, 128;
  --bs-danger:       #96121F;
  --bs-danger-rgb:   150, 18, 31;

  --bs-body-color:   #1B1517;
  --bs-body-bg:      #F6F0EF;
  --bs-border-color: #E6DDDE;
}

/* --------------------------------------------------------------------------
   1. Dasar
   -------------------------------------------------------------------------- */
body {
  background: var(--kertas);
  color: var(--tinta);
}

a { color: var(--merah-tua); }
a:hover { color: var(--merah); }

::selection { background: rgba(200, 16, 46, .18); }

:focus-visible {
  outline: 3px solid var(--emas);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2. Sidebar (layout admin & user)
   -------------------------------------------------------------------------- */
.sidebar {
  background: linear-gradient(180deg, #5A0817 0%, var(--merah-gelap) 55%, #2E040B 100%);
}

.sidebar-brand {
  border-bottom-color: rgba(255, 255, 255, .12);
  letter-spacing: .01em;
}

.sidebar-brand .brand-icon {
  background: #FFFFFF;
  padding: 3px;
  overflow: hidden;
}
.sidebar-brand .brand-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Bila masih memakai ikon Font Awesome, bukan gambar */
.sidebar-brand .brand-icon > i { color: var(--merah); }

.sidebar-label { color: var(--text-muted-sb); }

.sidebar-nav .nav-link { color: rgba(255, 255, 255, .78); }
.sidebar-nav .nav-link:hover {
  background: var(--sidebar-hover);
  border-left-color: rgba(255, 255, 255, .35);
}
.sidebar-nav .nav-link.active {
  background: var(--sidebar-active);
  border-left-color: var(--merah-terang);
}

.sidebar-divider,
.sidebar-footer { border-color: rgba(255, 255, 255, .12); }

.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); }

/* --------------------------------------------------------------------------
   3. Topbar
   -------------------------------------------------------------------------- */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--garis);
  box-shadow: 0 1px 0 rgba(200, 16, 46, .06);
}
.topbar-title h5 { color: var(--merah-tua); }
.topbar-title small { color: var(--abu); }
.topbar-toggle { color: var(--merah-tua); }
.topbar-toggle:hover { background: rgba(200, 16, 46, .08); }

/* Garis merah tipis di bawah topbar — pengikat identitas */
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg, var(--merah) 0%, var(--merah-tua) 60%, var(--emas) 100%);
}
.topbar { position: sticky; }

/* --------------------------------------------------------------------------
   4. Kartu & panel
   -------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--garis);
  box-shadow: 0 1px 3px rgba(27, 21, 23, .04), 0 8px 24px rgba(27, 21, 23, .06);
}

.card-header {
  background: linear-gradient(135deg, var(--merah-tua) 0%, var(--merah-gelap) 100%);
  color: #fff;
}
.card-header.bg-white,
.card-header.bg-light {
  background: #fff;
  color: var(--merah-tua);
  border-bottom: 1px solid var(--garis);
}

.stats-card {
  background: linear-gradient(135deg, var(--merah) 0%, var(--merah-tua) 65%, var(--merah-gelap) 100%);
  box-shadow: 0 8px 24px rgba(126, 11, 30, .22);
}

.profile-card {
  background: linear-gradient(135deg, var(--merah) 0%, var(--merah-tua) 65%, var(--merah-gelap) 100%);
  box-shadow: 0 8px 24px rgba(126, 11, 30, .22);
}
.profile-avatar { background: rgba(255, 255, 255, .22); }

/* --------------------------------------------------------------------------
   5. Tombol
   -------------------------------------------------------------------------- */
.btn-primary {
  background: var(--merah);
  border-color: var(--merah);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background: var(--merah-terang) !important;
  border-color: var(--merah-terang) !important;
  color: #fff !important;
}
.btn-primary:focus,
.btn-check:focus + .btn-primary {
  box-shadow: 0 0 0 .25rem rgba(200, 16, 46, .3);
}

.btn-outline-primary {
  color: var(--merah-tua);
  border-color: var(--merah);
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
  background: var(--merah) !important;
  border-color: var(--merah) !important;
  color: #fff !important;
}

.btn-secondary {
  background: #6E6367;
  border-color: #6E6367;
}
.btn-secondary:hover { background: #574E51; border-color: #574E51; }

.btn-success  { background: var(--bs-success); border-color: var(--bs-success); }
.btn-success:hover  { background: #266749; border-color: #266749; }

.btn-danger   { background: var(--bs-danger); border-color: var(--bs-danger); }
.btn-danger:hover   { background: #7A0E19; border-color: #7A0E19; }

.btn-warning  { background: var(--bs-warning); border-color: var(--bs-warning); color: #1B1517; }
.btn-warning:hover  { background: #AB8036; border-color: #AB8036; color: #1B1517; }

.btn-info     { background: var(--bs-info); border-color: var(--bs-info); color: #fff; }
.btn-info:hover     { background: #33496A; border-color: #33496A; color: #fff; }

/* --------------------------------------------------------------------------
   6. Warna utilitas Bootstrap
   -------------------------------------------------------------------------- */
.bg-primary   { background-color: var(--merah) !important; }
.bg-dark      { background-color: var(--merah-gelap) !important; }
.bg-secondary { background-color: #6E6367 !important; }
.bg-success   { background-color: var(--bs-success) !important; }
.bg-danger    { background-color: var(--bs-danger) !important; }
.bg-info      { background-color: var(--bs-info) !important; }
.bg-warning   { background-color: var(--bs-warning) !important; color: #1B1517 !important; }
.bg-light     { background-color: var(--kertas) !important; }

.text-primary { color: var(--merah) !important; }
.text-dark    { color: var(--tinta) !important; }
.text-muted   { color: var(--abu) !important; }
.text-success { color: var(--bs-success) !important; }
.text-danger  { color: var(--bs-danger) !important; }
.text-warning { color: #96721E !important; }   /* digelapkan agar terbaca di latar putih */
.text-info    { color: var(--bs-info) !important; }

.border-primary { border-color: var(--merah) !important; }

/* --------------------------------------------------------------------------
   7. Lencana status
   -------------------------------------------------------------------------- */
.badge { font-weight: 600; letter-spacing: .01em; padding: .38em .7em; }
.badge.bg-warning { color: #1B1517 !important; }

/* --------------------------------------------------------------------------
   8. Tabel
   -------------------------------------------------------------------------- */
.table { --bs-table-hover-bg: rgba(200, 16, 46, .045); }
.table > thead { border-bottom: 2px solid var(--merah); }
.table > thead th {
  color: var(--merah-tua);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: var(--kertas);
}
.table-dark > thead th,
.table thead.table-dark th {
  background: var(--merah-tua) !important;
  color: #fff !important;
  border-color: var(--merah-tua) !important;
}
.table-light > thead th,
.table thead.table-light th { background: var(--kertas) !important; }

/* --------------------------------------------------------------------------
   9. Formulir
   -------------------------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
  border-color: var(--merah);
  box-shadow: 0 0 0 .2rem rgba(200, 16, 46, .16);
}
.form-check-input:checked {
  background-color: var(--merah);
  border-color: var(--merah);
}
.form-label { font-weight: 600; color: var(--merah-tua); }
.input-group-text { background: var(--kertas); border-color: var(--garis); color: var(--abu); }

/* Select2 agar seragam dengan Bootstrap */
.select2-container--bootstrap-5 .select2-selection:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
  border-color: var(--merah);
  box-shadow: 0 0 0 .2rem rgba(200, 16, 46, .16);
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__option--highlighted {
  background: var(--merah) !important;
}

/* --------------------------------------------------------------------------
   10. Pemberitahuan
   -------------------------------------------------------------------------- */
.alert { border-left: 4px solid transparent; }
.alert-primary { background: rgba(200, 16, 46, .08);  color: var(--merah-tua); border-left-color: var(--merah); }
.alert-success { background: rgba(46, 125, 91, .10);  color: #205A40; border-left-color: var(--bs-success); }
.alert-danger  { background: rgba(150, 18, 31, .09);  color: #6E0E17; border-left-color: var(--bs-danger); }
.alert-warning { background: rgba(194, 147, 63, .13); color: #7A5C19; border-left-color: var(--bs-warning); }
.alert-info    { background: rgba(61, 90, 128, .10);  color: #2C4460; border-left-color: var(--bs-info); }

/* --------------------------------------------------------------------------
   11. Navigasi tab, halaman, dropdown
   -------------------------------------------------------------------------- */
.nav-tabs .nav-link { color: var(--abu); border: none; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link:hover { color: var(--merah); border-bottom-color: rgba(200, 16, 46, .3); }
.nav-tabs .nav-link.active {
  color: var(--merah-tua);
  font-weight: 700;
  background: transparent;
  border-bottom-color: var(--merah);
}

.page-link { color: var(--merah-tua); }
.page-link:hover { color: var(--merah); background: rgba(200, 16, 46, .07); }
.page-item.active .page-link { background: var(--merah); border-color: var(--merah); }

.dropdown-item.active,
.dropdown-item:active { background: var(--merah); }

.progress-bar { background: var(--merah); }

.modal-header { background: linear-gradient(135deg, var(--merah-tua) 0%, var(--merah-gelap) 100%); color: #fff; }
.modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.modal-header.bg-success,
.modal-header.bg-danger,
.modal-header.bg-warning { background-image: none; }

/* --------------------------------------------------------------------------
   12. Halaman publik (layout frontend)
   -------------------------------------------------------------------------- */
.navbar.bg-dark,
.navbar-dark.bg-dark {
  background: linear-gradient(135deg, var(--merah-tua) 0%, var(--merah-gelap) 100%) !important;
  border-bottom: 3px solid var(--merah);
}
.navbar-dark .navbar-brand { color: #fff; font-weight: 700; }
.navbar-dark .nav-link { color: rgba(255, 255, 255, .82); }
.navbar-dark .nav-link:hover,
.navbar-dark .nav-link.active { color: #fff; }

.hero-section {
  background:
    radial-gradient(120% 90% at 15% 0%, var(--merah-tua) 0%, transparent 55%),
    linear-gradient(150deg, var(--merah) 0%, var(--merah-tua) 45%, var(--merah-gelap) 100%);
  position: relative;
  overflow: hidden;
}
/* Motif kawung — sama seperti situs utama */
.hero-section::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.1'%3E%3Ccircle cx='0' cy='40' r='19'/%3E%3Ccircle cx='80' cy='40' r='19'/%3E%3Ccircle cx='40' cy='0' r='19'/%3E%3Ccircle cx='40' cy='80' r='19'/%3E%3Ccircle cx='40' cy='40' r='19'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .07;
  pointer-events: none;
}
.hero-section > * { position: relative; z-index: 1; }

.footer {
  background: var(--merah-gelap);
  border-top: 3px solid var(--merah);
}
.footer a { color: rgba(255, 255, 255, .75); }
.footer a:hover { color: #fff; }

.contact-info,
.narasumber-section { background: var(--kertas); }

.jadwal-header {
  background: linear-gradient(135deg, var(--merah-tua) 0%, var(--merah-gelap) 100%);
}

.narasumber-avatar { background: linear-gradient(140deg, var(--merah) 0%, var(--merah-tua) 100%); }

/* --------------------------------------------------------------------------
   13. DataTables
   -------------------------------------------------------------------------- */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--merah) !important;
  border-color: var(--merah) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--merah-tua) !important;
  border-color: var(--merah-tua) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--merah);
  box-shadow: 0 0 0 .2rem rgba(200, 16, 46, .16);
}

/* --------------------------------------------------------------------------
   14. Cetak — hemat tinta, hitam putih
   -------------------------------------------------------------------------- */
@media print {
  .sidebar, .topbar, .sidebar-overlay { display: none !important; }
  .main-content { margin-left: 0 !important; }
  .card-header, .stats-card, .profile-card {
    background: #fff !important;
    color: #000 !important;
    border-bottom: 1px solid #000;
  }
}


/* --------------------------------------------------------------------------
   15. Tombol pengganti versi tampilan
   -------------------------------------------------------------------------- */
.ganti-tampilan {
  border-color: var(--garis);
  color: var(--abu);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.ganti-tampilan:hover {
  background: rgba(200, 16, 46, .07);
  border-color: var(--merah);
  color: var(--merah-tua);
}

/* Penanda versi di kaki sidebar — membantu saat menguji dua versi */
.sidebar-footer::after {
  content: "Tampilan v2";
  display: block;
  margin-top: .35rem;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
}