/* =========================================================
   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; }

/* ===== Resep & HPP — component costing workspace ===== */
.recipe-cost-builder { color: #172033; }
.recipe-metric-card {
  height: 100%;
  min-height: 126px;
  padding: 18px;
  border: 1px solid #e6eaf0;
  border-radius: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.recipe-metric-card span { color: #445064; font-size: 12px; font-weight: 600; }
.recipe-metric-card strong { font-size: 20px; line-height: 1.2; }
.recipe-metric-card small { color: #7c8798; font-size: 11px; }
.recipe-metric-card.metric-blue strong { color: #2878ed; }
.recipe-metric-card.metric-green strong { color: #149d67; }
.recipe-metric-card.metric-orange strong { color: #f0831a; }
.recipe-metric-card.metric-purple strong { color: var(--jupiter-primary); }

.recipe-component-panel {
  border: 1px solid #e6eaf0;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.recipe-component-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  border-bottom: 1px solid #e6eaf0;
  padding: 0 14px;
}
.recipe-component-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #4d586a;
  padding: 15px 13px 13px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.recipe-component-tabs .nav-link span {
  display: inline-flex;
  width: 18px;
  height: 18px;
  margin-right: 7px;
  border-radius: 5px;
  align-items: center;
  justify-content: center;
  background: #eef1f5;
  color: #5d6878;
  font-size: 10px;
}
.recipe-component-tabs .nav-link.active {
  color: var(--jupiter-primary);
  border-bottom-color: var(--jupiter-primary);
}
.recipe-component-tabs .nav-link.active span {
  color: #fff;
  background: var(--jupiter-primary);
}
.recipe-entry-box {
  padding: 14px;
  border: 1px solid #e8ebf1;
  border-radius: 10px;
  background: #fafbfc;
}
.recipe-cost-table thead th { font-size: 11px; color: #5d6878; }
.recipe-cost-table tbody td { font-size: 12px; }
.recipe-summary-card {
  position: sticky;
  top: 92px;
  padding: 20px;
  border: 1px solid #e6eaf0;
  border-radius: 12px;
  background: #fff;
}
.recipe-summary-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  color: #566174;
  font-size: 12px;
}
.recipe-summary-line strong { color: #172033; text-align: right; font-weight: 600; }
.recipe-summary-line.total {
  color: #172033;
  font-weight: 700;
  border-bottom: 1px solid #e6eaf0;
  margin-bottom: 4px;
}
.recipe-summary-line.total strong { color: var(--jupiter-primary); }

@media (max-width: 1199.98px) {
  .recipe-summary-card { position: static; }
}

@media (max-width: 767.98px) {
  .recipe-metric-card { min-height: 108px; }
  .recipe-component-tabs { padding: 0 6px; }
  .recipe-component-tabs .nav-link { padding-left: 9px; padding-right: 9px; }
}

/* ===== Opex monthly workspace ===== */
.opex-metric-card {
  height: 100%; min-height: 126px; padding: 18px;
  border: 1px solid #e6eaf0; border-radius: 12px; background: #fff;
  display: flex; flex-direction: column; gap: 8px;
}
.opex-metric-card span { color: #445064; font-size: 12px; font-weight: 600; }
.opex-metric-card strong { font-size: 20px; line-height: 1.2; }
.opex-metric-card small { color: #7c8798; font-size: 11px; }
.opex-metric-card.metric-green strong { color: #149d67; }
.opex-metric-card.metric-blue strong { color: #2878ed; }
.opex-metric-card.metric-purple strong { color: var(--jupiter-primary); }
.opex-metric-card.metric-orange strong { color: #f0831a; }
.opex-workspace-card { overflow: hidden; }
.opex-tabs { display: flex; gap: 14px; padding: 0 18px; overflow-x: auto; flex-wrap: nowrap; }
.opex-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: #4d586a; font-size: 12px; font-weight: 600;
  padding: 15px 12px 13px; white-space: nowrap;
}
.opex-tabs .nav-link.active { color: var(--jupiter-primary); border-bottom-color: var(--jupiter-primary); }
.opex-category-card {
  height: 100%; padding: 15px; border: 1px solid #e6eaf0;
  border-radius: 10px; background: #fff; display: flex; flex-direction: column; gap: 7px;
}
.opex-category-card span { color: #4d586a; font-size: 11px; }
.opex-category-card strong { color: #172033; font-size: 14px; }
.opex-category-card small { color: #7c8798; font-size: 10px; }
.opex-category-card .progress { height: 5px; background: #edf0f5; }
.opex-category-card .progress-bar { background: var(--jupiter-primary); border-radius: 99px; }
.opex-side-card {
  padding: 18px; border: 1px solid #e6eaf0; border-radius: 12px; background: #fff;
}
.opex-summary-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 11px; color: #5d6878; }
.opex-summary-line strong { color: #172033; text-align: right; }
.opex-trend-row { margin-bottom: 13px; color: #5d6878; font-size: 10px; }
.opex-trend-row strong { color: #172033; font-size: 10px; }
.opex-trend-track { height: 7px; margin-top: 5px; border-radius: 99px; background: #edf0f5; overflow: hidden; }
.opex-trend-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8c85ff, var(--jupiter-primary)); }
.opex-table thead th { font-size: 10px; }
.opex-table tbody td { font-size: 11px; }

/* ===== Master Menu dan Paket ===== */
.recipe-master-switch { gap: .5rem; }
.recipe-master-switch .nav-link { border: 1px solid #e5e9f2; color: #445066; background: #fff; font-weight: 600; }
.recipe-master-switch .nav-link.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.recipe-entity-list { display: grid; gap: .55rem; max-height: 680px; overflow: auto; padding-right: .25rem; }
.recipe-entity-item { width: 100%; border: 1px solid #e9edf4; border-radius: 12px; padding: .8rem .9rem; background: #fff; display: flex; align-items: center; justify-content: space-between; text-align: left; color: inherit; transition: .15s ease; }
.recipe-entity-item:hover { border-color: rgba(var(--bs-primary-rgb),.45); transform: translateY(-1px); }
.recipe-entity-item.active { background: rgba(var(--bs-primary-rgb),.08); border-color: var(--bs-primary); }
.recipe-entity-item.package.active { background: rgba(19,160,92,.08); border-color: #13a05c; }
.recipe-entity-item strong,.recipe-entity-item small { display: block; }
.recipe-entity-item small { color: #7b8794; margin-top: .18rem; }
.entity-actions { margin-left: .5rem; }