/* ============================================================
   TEMA KRIDOASIH — CSS Override untuk Velzon Admin Template
   Yayasan Kridoasih | 2026

   Aset asli Velzon (app.min.css, bootstrap.min.css, icons.min.css)
   TIDAK disentuh. File ini dimuat SETELAH custom.min.css.

   - `data-bs-theme="dark"` / `.theme-dark`   -> DEEP NAVY  (default saat load)
   - `data-bs-theme="light"` / `.theme-light`  -> OFF-WHITE  (toggle via topbar)
   ============================================================ */

/* ------------------------------------------------------------
   1. Token brand + default (= DEEP NAVY)
   ------------------------------------------------------------ */
:root {
  --kridoasih-primary:     #0184D1;
  --kridoasih-success:     #049736;
  --kridoasih-accent-teal: #00D492;
  --kridoasih-accent-cyan: #35E0DF;

  --kridoasih-white:       #FFFFFF;
  --kridoasih-bg-deep:     #080D13;
  --kridoasih-bg-base:     #050818;
  --kridoasih-bg-card:     #192538;
  --kridoasih-bg-elevated: #394455;

  --vz-primary:     #0184D1;
  --vz-primary-rgb: 1, 132, 209;
  --vz-success:     #049736;
  --vz-success-rgb: 4, 151, 54;
  --vz-info:        #35E0DF;
  --vz-info-rgb:    53, 224, 223;

  /* semantic default = deep navy (identik blok .theme-dark) */
  --page-bg:      #080D13;
  --sidebar-bg:   #050818;
  --topbar-bg:    #080D13;
  --card-bg:      #192538;
  --card-border:  #394455;
  --text-primary: #FFFFFF;
  --text-muted:   rgba(255, 255, 255, 0.55);
  --text-link:    #35E0DF;
}

/* ------------------------------------------------------------
   2. DEEP NAVY  ->  data-bs-theme="dark" / .theme-dark  (DEFAULT)
   ------------------------------------------------------------ */
[data-bs-theme="dark"],
html.theme-dark {
  --page-bg:      #080D13;
  --sidebar-bg:   #050818;
  --topbar-bg:    #080D13;
  --card-bg:      #192538;
  --card-border:  #394455;
  --text-primary: #FFFFFF;
  --text-muted:   rgba(255, 255, 255, 0.55);
  --text-link:    #35E0DF;

  --vz-body-bg:      #080D13;
  --vz-body-color:   #FFFFFF;
  --vz-secondary-bg: #192538;
  --vz-tertiary-bg:  #394455;
  --vz-light:        #192538;
  --vz-light-rgb:    25, 37, 56;
  --vz-dark:         #FFFFFF;
  --vz-dark-rgb:     255, 255, 255;

  /* Sidebar (kedua nama variabel Velzon di-set: -border & -border-color) */
  --vz-vertical-menu-bg:                #050818;
  --vz-vertical-menu-border:            #394455;
  --vz-vertical-menu-border-color:      #394455;
  --vz-vertical-menu-item-color:        rgba(255, 255, 255, 0.65);
  --vz-vertical-menu-item-hover-color:  #35E0DF;
  --vz-vertical-menu-item-active-color: #FFFFFF;
  --vz-vertical-menu-item-active-bg:    rgba(1, 132, 209, 0.18);
  --vz-vertical-menu-sub-item-color:        rgba(255, 255, 255, 0.5);
  --vz-vertical-menu-sub-item-hover-color:  #35E0DF;
  --vz-vertical-menu-sub-item-active-color: #35E0DF;
  --vz-vertical-menu-title-color:       rgba(255, 255, 255, 0.3);

  --vz-header-bg:             #080D13;
  --vz-header-border-color:   #394455;
  --vz-header-item-color:     rgba(255, 255, 255, 0.7);
  --vz-header-item-sub-color: rgba(255, 255, 255, 0.5);

  --vz-card-bg:           #192538;
  --vz-card-border-color: #394455;
  --vz-card-cap-bg:       #192538;

  --vz-heading-color:   #FFFFFF;
  --vz-text-muted:      rgba(255, 255, 255, 0.55);
  --vz-secondary-color: rgba(255, 255, 255, 0.55);
  --vz-link-color:      #35E0DF;
  --vz-link-hover-color:#00D492;
  --vz-emphasis-color:  #FFFFFF;

  --vz-input-bg:                 #192538;
  --vz-input-border-color:       #394455;
  --vz-input-color:              #FFFFFF;
  --vz-input-placeholder-color:  rgba(255, 255, 255, 0.35);
  --vz-input-focus-border-color: #0184D1;
  --vz-input-focus-box-shadow:   0 0 0 0.2rem rgba(1, 132, 209, 0.25);
  --vz-input-group-addon-bg:     #192538;
  --vz-form-select-bg:           #192538;

  --vz-table-bg:           transparent;
  --vz-table-striped-bg:   rgba(53, 224, 223, 0.04);
  --vz-table-hover-bg:     rgba(53, 224, 223, 0.06);
  --vz-table-border-color: #394455;
  --vz-table-color:        rgba(255, 255, 255, 0.85);

  --vz-border-color:             #394455;
  --vz-border-color-translucent: rgba(57, 68, 85, 0.5);

  --vz-dropdown-bg:              #192538;
  --vz-dropdown-border-color:    #394455;
  --vz-dropdown-link-color:      rgba(255, 255, 255, 0.75);
  --vz-dropdown-link-hover-bg:   #394455;
  --vz-dropdown-link-hover-color:#FFFFFF;

  --vz-modal-bg:                  #192538;
  --vz-modal-header-border-color: #394455;
  --vz-modal-footer-border-color: #394455;
  --vz-offcanvas-bg:              #192538;

  --vz-box-shadow:    0 5px 20px rgba(0, 0, 0, 0.4);
  --vz-list-group-bg: #192538;
}

/* ------------------------------------------------------------
   3. OFF-WHITE  ->  data-bs-theme="light" / .theme-light  (TOGGLE)
   ------------------------------------------------------------ */
[data-bs-theme="light"],
html.theme-light {
  --page-bg:      #F0F4F8;
  --sidebar-bg:   #FFFFFF;
  --topbar-bg:    #FFFFFF;
  --card-bg:      #FFFFFF;
  --card-border:  #E2E8F0;
  --text-primary: #080D13;
  --text-muted:   #6B7280;
  --text-link:    #0184D1;

  --vz-body-bg:      #F0F4F8;
  --vz-body-color:   #080D13;
  --vz-secondary-bg: #F8FAFC;
  --vz-tertiary-bg:  #EDF2F7;
  --vz-light:        #F8FAFC;
  --vz-light-rgb:    248, 250, 252;
  --vz-dark:         #080D13;
  --vz-dark-rgb:     8, 13, 19;

  --vz-vertical-menu-bg:                #FFFFFF;
  --vz-vertical-menu-border:            #E2E8F0;
  --vz-vertical-menu-border-color:      #E2E8F0;
  --vz-vertical-menu-item-color:        #394455;
  --vz-vertical-menu-item-hover-color:  #0184D1;
  --vz-vertical-menu-item-active-color: #0184D1;
  --vz-vertical-menu-item-active-bg:    rgba(1, 132, 209, 0.08);
  --vz-vertical-menu-sub-item-color:        #6B7280;
  --vz-vertical-menu-sub-item-hover-color:  #0184D1;
  --vz-vertical-menu-sub-item-active-color: #0184D1;
  --vz-vertical-menu-title-color:       #9CA3AF;

  --vz-header-bg:             #FFFFFF;
  --vz-header-border-color:   #E2E8F0;
  --vz-header-item-color:     #394455;
  --vz-header-item-sub-color: #6B7280;

  --vz-card-bg:           #FFFFFF;
  --vz-card-border-color: #E2E8F0;
  --vz-card-cap-bg:       #FFFFFF;

  --vz-heading-color:   #080D13;
  --vz-text-muted:      #6B7280;
  --vz-secondary-color: #6B7280;
  --vz-link-color:      #0184D1;
  --vz-link-hover-color:#016DB0;
  --vz-emphasis-color:  #080D13;

  --vz-input-bg:                 #FFFFFF;
  --vz-input-border-color:       #CBD5E0;
  --vz-input-color:              #080D13;
  --vz-input-placeholder-color:  #9CA3AF;
  --vz-input-focus-border-color: #0184D1;
  --vz-input-focus-box-shadow:   0 0 0 0.2rem rgba(1, 132, 209, 0.15);
  --vz-input-group-addon-bg:     #EDF2F7;
  --vz-form-select-bg:           #FFFFFF;

  --vz-table-bg:           transparent;
  --vz-table-striped-bg:   rgba(1, 132, 209, 0.03);
  --vz-table-hover-bg:     rgba(1, 132, 209, 0.05);
  --vz-table-border-color: #E2E8F0;
  --vz-table-color:        #080D13;

  --vz-border-color:             #E2E8F0;
  --vz-border-color-translucent: rgba(226, 232, 240, 0.8);

  --vz-dropdown-bg:              #FFFFFF;
  --vz-dropdown-border-color:    #E2E8F0;
  --vz-dropdown-link-color:      #394455;
  --vz-dropdown-link-hover-bg:   #F0F4F8;
  --vz-dropdown-link-hover-color:#080D13;

  --vz-modal-bg:                  #FFFFFF;
  --vz-modal-header-border-color: #E2E8F0;
  --vz-modal-footer-border-color: #E2E8F0;
  --vz-offcanvas-bg:              #FFFFFF;

  --vz-box-shadow:    0 5px 20px rgba(8, 13, 19, 0.08);
  --vz-list-group-bg: #FFFFFF;
}

/* Gradient di belakang halaman — default (deep navy); dimatikan di off-white */
body {
  background-image: linear-gradient(180deg, #080D13 0%, #050818 100%);
  background-attachment: fixed;
}
[data-bs-theme="light"] body,
html.theme-light body {
  background-image: none;
}

/* ------------------------------------------------------------
   4. HALAMAN LOGIN (panel kiri SELALU deep navy)
   ------------------------------------------------------------ */
.auth-page-wrapper {
  background: linear-gradient(135deg, #080D13 0%, #050818 100%);
  min-height: 100vh;
}
.auth-page-wrapper .bg-overlay { display: none; }

.auth-one-bg {
  background: linear-gradient(160deg, #080D13 0%, #050818 50%, #192538 100%);
  position: relative;
  overflow: hidden;
}
.auth-one-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(1, 132, 209, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(53, 224, 223, 0.10) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(0, 212, 146, 0.05) 0%, transparent 70%);
  pointer-events: none;
}
.auth-one-bg::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  border: 1px solid rgba(53, 224, 223, 0.08);
  animation: kridoasih-pulse-ring 4s ease-in-out infinite;
  pointer-events: none;
}

.auth-card {
  background: #192538;
  border: 1px solid #394455;
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(53, 224, 223, 0.04),
    0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
html.theme-light .auth-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 4px 24px rgba(8, 13, 19, 0.08);
}

.auth-card .form-control {
  background: #080D13;
  border-color: #394455;
  color: #FFFFFF;
  border-radius: 10px;
  padding: 12px 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-card .form-control::placeholder { color: rgba(255, 255, 255, 0.35); }
.auth-card .form-control:focus {
  background: #080D13;
  border-color: #0184D1;
  box-shadow: 0 0 0 3px rgba(1, 132, 209, 0.2);
  color: #FFFFFF;
}
html.theme-light .auth-card .form-control { background: #FFFFFF; border-color: #CBD5E0; color: #080D13; }
html.theme-light .auth-card .form-control:focus { background: #FFFFFF; color: #080D13; }
html.theme-light .auth-card .form-control::placeholder { color: #9CA3AF; }

.auth-card .btn-login {
  background: linear-gradient(135deg, #0184D1 0%, #016DB0 100%);
  border: none;
  color: #FFFFFF;
  border-radius: 10px;
  padding: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 15px rgba(1, 132, 209, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.auth-card .btn-login:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(1, 132, 209, 0.5);
  color: #FFFFFF;
}
.auth-card .btn-login:disabled { opacity: 0.75; }

.auth-hero-title {
  color: #FFFFFF;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
}
.auth-hero-title .accent {
  background: linear-gradient(135deg, #35E0DF, #00D492);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.auth-hero-subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1rem;
  margin-top: 1rem;
}

.auth-card .password-addon { color: rgba(255, 255, 255, 0.45); }
html.theme-light .auth-card .password-addon { color: #6B7280; }

/* ------------------------------------------------------------
   5. KOMPONEN DASHBOARD — stat card
   ------------------------------------------------------------ */
.card-stats,
.card-animate {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.card-stats::before,
.card-animate::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0184D1, #35E0DF);
  border-radius: var(--vz-card-border-radius, 0.75rem) var(--vz-card-border-radius, 0.75rem) 0 0;
}
.card-stats:hover,
.card-animate:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(1, 132, 209, 0.15);
}

.card-stats .stat-value { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); }

.stat-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.stat-icon.primary { background: rgba(1, 132, 209, 0.15);  color: #0184D1; }
.stat-icon.success { background: rgba(4, 151, 54, 0.15);   color: #00D492; }
.stat-icon.info    { background: rgba(53, 224, 223, 0.15); color: #35E0DF; }
.stat-icon.warning { background: rgba(247, 184, 75, 0.15); color: #F7B84B; }
.stat-icon.danger  { background: rgba(240, 101, 72, 0.15); color: #F06548; }

.badge-delta-up {
  background: rgba(4, 151, 54, 0.15);
  color: #00D492;
  border: 1px solid rgba(0, 212, 146, 0.2);
  font-size: 0.75rem;
}
.badge-delta-down {
  background: rgba(220, 38, 38, 0.12);
  color: #FC8181;
  border: 1px solid rgba(252, 129, 129, 0.2);
  font-size: 0.75rem;
}

/* ------------------------------------------------------------
   6. SIDEBAR + PERBAIKAN MENU AKTIF
   ------------------------------------------------------------
   Akar bug:
   (a) `<html data-sidebar="dark">` memaksa token menu Velzon jadi
       putih/pucat -> di mode off-white teks item AKTIF & hover jadi
       putih di atas sidebar putih (tidak terlihat).  -> Solusi: layout
       memakai `data-sidebar="light"`, warna diatur penuh oleh token
       tema per `data-bs-theme` di file ini.
   (b) Velzon menandai `[data-bs-toggle=collapse][aria-expanded=true]`
       sebagai warna aktif -> menu induk ikut "menyala" hanya karena
       submenu-nya SEDANG DIBUKA, walau bukan halaman aktif.
       -> Di sini: highlight HANYA untuk `.active` (di-set server-side
       oleh navigation.blade.php dari URL). `[aria-expanded]` tanpa
       `.active` dinetralkan.
   Aksen kiri pakai `inset box-shadow` supaya TIDAK menggeser layout.
   Prefiks `#navbar-nav` menaikkan specificity -> menang tanpa !important.
   ------------------------------------------------------------ */
.menu-title { font-size: 0.65rem; letter-spacing: 1.5px; text-transform: uppercase; }

.app-menu.navbar-menu {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--vz-vertical-menu-border-color);
}

/* Setiap item MENYEDIAKAN ruang 3px di kiri (transparan) supaya item aktif
   tidak menggeser teks / "loncat". Aman dari clipping overflow sidebar. */
#navbar-nav > .nav-item > .nav-link,
#navbar-nav .menu-dropdown .nav-link {
  border-left: 3px solid transparent;
  transition: background-color .15s, border-color .15s, color .15s;
}

/* Menu tingkat atas — AKTIF (halaman saat ini berada di section ini) */
#navbar-nav > .nav-item > .nav-link.active {
  background: var(--vz-vertical-menu-item-active-bg);
  border-left-color: var(--vz-primary);
  color: var(--vz-vertical-menu-item-active-color);
  font-weight: 600;
}
#navbar-nav > .nav-item > .nav-link.active > i,
#navbar-nav > .nav-item > .nav-link.active > svg,
#navbar-nav > .nav-item > .nav-link.active > .icon-dual {
  color: var(--vz-primary);
  stroke: var(--vz-primary);
}
#navbar-nav > .nav-item > .nav-link.active::after { color: var(--vz-vertical-menu-item-active-color); }

/* Sub-item aktif di dalam dropdown */
#navbar-nav .menu-dropdown .nav-link.active {
  background: var(--vz-vertical-menu-item-active-bg);
  border-left-color: var(--vz-primary);
  color: var(--vz-vertical-menu-sub-item-active-color);
  font-weight: 500;
}

/* Menu induk yang HANYA sedang dibuka (bukan halaman aktif) -> TANPA highlight.
   Kembalikan ke warna item normal. */
#navbar-nav > .nav-item > .nav-link.menu-link[aria-expanded="true"]:not(.active) {
  background: transparent;
  border-left-color: transparent;
  color: var(--vz-vertical-menu-item-color);
  font-weight: 400;
}
#navbar-nav > .nav-item > .nav-link.menu-link[aria-expanded="true"]:not(.active) > i,
#navbar-nav > .nav-item > .nav-link.menu-link[aria-expanded="true"]:not(.active) > svg {
  color: var(--vz-vertical-menu-item-color);
  stroke: var(--vz-vertical-menu-item-color);
}

/* Hover */
#navbar-nav .nav-link:hover { color: var(--vz-vertical-menu-item-hover-color); }

/* Area logo sidebar */
.navbar-brand-box { background: var(--sidebar-bg); border-bottom: 1px solid var(--vz-vertical-menu-border-color); }

/* ------------------------------------------------------------
   7. TOPBAR
   ------------------------------------------------------------ */
#page-topbar {
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--vz-header-border-color);
}
.btn-topbar:hover { background: rgba(var(--vz-info-rgb), 0.10); color: var(--vz-info); }
.user-name-text { color: var(--text-primary); }
.user-name-sub-text { color: var(--text-muted); }

/* ------------------------------------------------------------
   8. DATATABLE
   ------------------------------------------------------------ */
table.dataTable thead th,
.table > thead th {
  font-size: 0.72rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--vz-table-border-color);
}
table.dataTable tbody tr { transition: background 0.15s; }
table.dataTable tbody tr:hover > * { background: var(--vz-table-hover-bg); }

table.dataTable thead th { background: #192538; }
table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(25, 37, 56, 0.5); }
html.theme-light table.dataTable thead th { background: #F8FAFC; }
html.theme-light table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(1, 132, 209, 0.03); }

/* ------------------------------------------------------------
   9. BADGE & STATUS — jaga kontras
   ------------------------------------------------------------ */
.badge.bg-success-subtle { background-color: rgba(4, 151, 54, 0.2) !important;  color: #00D492 !important; }
.badge.bg-info-subtle    { background-color: rgba(53, 224, 223, 0.2) !important; color: #35E0DF !important; }
.badge.bg-primary-subtle { background-color: rgba(1, 132, 209, 0.2) !important;  color: #4FB6E8 !important; }

html.theme-light .badge.bg-success-subtle { background-color: rgba(4, 151, 54, 0.1) !important;  color: #049736 !important; }
html.theme-light .badge.bg-info-subtle    { background-color: rgba(1, 132, 209, 0.1) !important; color: #0184D1 !important; }
html.theme-light .badge.bg-primary-subtle { background-color: rgba(1, 132, 209, 0.1) !important; color: #016DB0 !important; }

.text-muted { color: var(--text-muted) !important; }

/* ------------------------------------------------------------
   10. ANIMASI
   ------------------------------------------------------------ */
@keyframes kridoasih-pulse-ring {
  0%, 100% { transform: scale(1);    opacity: 0.5; }
  50%      { transform: scale(1.05); opacity: 1;   }
}
@keyframes kridoasih-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(53, 224, 223, 0); }
  50%      { box-shadow: 0 0 18px 2px rgba(53, 224, 223, 0.25); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-one-bg::after,
  .card-stats, .card-animate { animation: none !important; transition: none !important; }
}