/* =========================================================
   Jupiter — Custom Theme
   Font: Poppins | Warna: dominan putih bersih, elegan
   ========================================================= */

:root,
[data-bs-theme='light'] {
  --bs-font-sans-serif: 'Poppins', sans-serif;
  --bs-body-font-family: 'Poppins', sans-serif;
  --bs-body-bg: #ffffff;
  --jupiter-primary: #635bff;
  --jupiter-surface: #ffffff;
  --jupiter-border: #eef1f6;
}

body,
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6,
.btn, .form-control, .form-select, .table, .dropdown-menu,
.sidebar-nav, .topbar {
  font-family: 'Poppins', sans-serif !important;
}

/* Latar putih bersih */
.body-wrapper { background: #ffffff; }
.page-wrapper { background: #fafbfd; }

/* Kartu elegan: putih, border halus, bayangan lembut */
.card {
  background: var(--jupiter-surface);
  border: 1px solid var(--jupiter-border);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
  border-radius: 14px;
}
.card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--jupiter-border);
}

/* =========================
   Sidebar putih bersih & rapi
   ========================= */
.left-sidebar {
  background: #ffffff;
  border-right: 1px solid var(--jupiter-border);
  transition: width 0.2s ease;
}
.topbar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--jupiter-border);
}

/* Brand */
.left-sidebar .brand-logo {
  min-height: 70px;
  border-bottom: 1px solid var(--jupiter-border);
}

/* Section caption */
.sidebar-nav .nav-small-cap {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: #8a94a6;
  padding: 14px 12px 6px;
}

/* Item menu */
.sidebar-nav .sidebar-menu { padding: 0 12px 24px; }
.sidebar-nav .sidebar-item { margin-bottom: 2px; }
.sidebar-nav .sidebar-item .sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #3b4453;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-nav .sidebar-item .sidebar-link iconify-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.sidebar-nav .sidebar-item .sidebar-link:hover {
  background: #f2f4ff;
  color: var(--jupiter-primary);
}
.sidebar-nav .sidebar-item .sidebar-link.active {
  background: var(--jupiter-primary);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(99, 91, 255, 0.28);
}

/* ---- Mode mini (sidebar tertutup: hanya ikon) ---- */
html[data-layout='vertical'] [data-sidebartype='mini-sidebar'].link-sidebar
  .sidebar-nav .sidebar-item .sidebar-link {
  justify-content: center;
  padding: 10px 0;
}
html[data-layout='vertical'] [data-sidebartype='mini-sidebar'].link-sidebar
  .left-sidebar:hover .sidebar-nav .sidebar-item .sidebar-link {
  justify-content: flex-start;
  padding: 10px 14px;
}
/* Logo brand: penuh saat sidebar terbuka, terpotong jadi ikon saat mini */
html[data-layout='vertical'] [data-sidebartype='mini-sidebar'].link-sidebar
  .brand-logo { padding-left: 0 !important; padding-right: 0 !important; justify-content: center; }
html[data-layout='vertical'] [data-sidebartype='mini-sidebar'].link-sidebar
  .brand-logo .logo-img { width: 40px; overflow: hidden; margin: 0 auto; }
html[data-layout='vertical'] [data-sidebartype='mini-sidebar'].link-sidebar
  .left-sidebar:hover .brand-logo { padding-left: 16px !important; padding-right: 16px !important; justify-content: flex-start; }
html[data-layout='vertical'] [data-sidebartype='mini-sidebar'].link-sidebar
  .left-sidebar:hover .brand-logo .logo-img { width: auto; margin: 0; }

/* Avatar inisial di topbar */
.jupiter-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: #eef0ff;
  color: var(--jupiter-primary);
  font-weight: 600;
}

/* Trigger user di topbar: satu baris rapi, tidak wrap, tidak terpengaruh CSS template */
.topbar .jupiter-user-trigger {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 10px;
  white-space: nowrap;
  padding: 6px 8px;
  border-radius: 12px;
  cursor: pointer;
}
.topbar .jupiter-user-trigger:hover { background: #f2f4ff; }
.jupiter-user-meta {
  display: flex;
  flex-direction: column !important;
  align-items: flex-start !important;
  line-height: 1.25;
  text-align: left;
}

/* Dropdown user */
.jupiter-user-menu {
  min-width: 250px;
  padding: 0 0 6px;
  border: 1px solid var(--jupiter-border);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.10);
  overflow: hidden;
}
.jupiter-user-menu .dropdown-item { white-space: normal; }

/* Kartu statistik dashboard */
.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 1.4rem;
}

/* Tabel lebih ringan */
.table > :not(caption) > * > * { padding: 12px 16px; }
.table thead th {
  font-weight: 600;
  color: #29343d;
  background: #f8fafc;
  white-space: nowrap;
}

/* Badge status */
.badge { font-weight: 500; letter-spacing: 0.2px; }

/* Form ringkas dalam modal */
.modal-content { border-radius: 14px; border: none; }

/* Baris item dinamis (pembelian/transfer/order) */
.line-item-row { border-bottom: 1px dashed var(--jupiter-border); }
.line-item-row:last-child { border-bottom: 0; }

/* Login page */
.auth-card { max-width: 420px; }

@media print {
  .left-sidebar, .topbar, .btn, .no-print { display: none !important; }
}

/* ===== Video/gambar latar penuh di panel kanan halaman login ===== */
.hero-bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* gambar: isi penuh panel */
  z-index: 0;
}
/* Video: memenuhi seluruh panel tanpa ruang kosong (sisi berlebih terpangkas
   otomatis mengikuti bentuk panel) */
video.hero-bg-media {
  object-fit: cover;
  object-position: center;
  background: #0b1e3a;
}
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 24, 48, 0.72) 0%, rgba(7, 24, 48, 0.35) 45%, rgba(7, 24, 48, 0.25) 100%);
  z-index: 1;          /* di atas media, di bawah teks */
}


/* ===== AI Asisten chat ===== */
.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-bot  { justify-content: flex-start; }
.ai-bubble {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.55;
}
.ai-msg-user .ai-bubble {
  background: var(--jupiter-primary, #635bff);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-msg-bot .ai-bubble {
  background: #f4f6fb;
  color: #2a3547;
  border-bottom-left-radius: 4px;
}
.ai-bubble table { background: #fff; font-size: 0.85rem; }
.ai-bubble code { background: #e9ecf5; padding: 1px 5px; border-radius: 4px; }
.ai-refs a { font-weight: 500; }

/* ===== Badge notifikasi merah (menu sidebar) ===== */
.sidebar-link { position: relative; }
.jupiter-noti {
  margin-left: auto;
  background: #ff4757;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(255, 71, 87, 0.18);
}

/* Animasi badge saat pesanan baru masuk */
@keyframes notiPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); box-shadow: 0 0 0 6px rgba(255, 71, 87, 0.25); }
  100% { transform: scale(1); }
}
.jupiter-noti.noti-pop { animation: notiPop 0.6s ease-out 2; }

/* ===== Modal detail (view) master data ===== */
.view-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #635bff, #8f6bff);
  color: #fff;
  font-size: 22px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.view-dl dt { color: #8a94a6; font-weight: 500; font-size: 0.85rem; padding-top: 8px; }
.view-dl dd { font-weight: 500; padding-top: 8px; margin-bottom: 0; }
.view-dl dd a { color: var(--jupiter-primary, #635bff); text-decoration: none; }