/* ============================================
   MakanBang — Global Metronic Overrides
   ============================================
   Overrides for Metronic Bootstrap admin theme.
   Loaded globally on all pages after Metronic bundles.
   ============================================ */

/* ---------- Primary Color Override ---------- */
:root {
  --bs-primary: var(--mb-primary); /* single brand blue, defined in mb-modern.css */
  --bs-primary-rgb: 38, 120, 201;
}
.btn-primary {
  background-color: var(--mb-primary) !important;
  border-color: var(--mb-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #1f6ab5 !important;
  border-color: #1f6ab5 !important;
}
.bg-primary {
  background-color: var(--mb-primary) !important;
}
.text-primary {
  color: var(--mb-primary) !important;
}
a.text-primary:hover {
  color: #1f6ab5 !important;
}

/* ---------- Secondary Color Override ---------- */
.btn-secondary {
  background-color: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #e5e7eb !important;
  border-color: #9ca3af !important;
  color: #1f2937 !important;
}
.btn-secondary i,
.btn-secondary svg {
  color: #6b7280 !important;
}
[data-bs-theme="dark"] .btn-secondary {
  background-color: #2a2a3a !important;
  border-color: #3a3a4a !important;
  color: #e0e0e0 !important;
}
[data-bs-theme="dark"] .btn-secondary:hover,
[data-bs-theme="dark"] .btn-secondary:focus {
  background-color: #333346 !important;
  border-color: #4a4a5a !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .btn-secondary i,
[data-bs-theme="dark"] .btn-secondary svg {
  color: #a0a0b0 !important;
}

/* ---------- Font Override ---------- */
body,
.aside,
.header,
.footer,
.content,
.menu,
.card,
.table,
.table > thead > tr > th {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif !important;
}

.font-inter {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif !important;
}

.font-roboto {
  font-family: "Roboto Mono", monospace !important;
}

/* ---------- Page Header ---------- */
.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #181c32;
  margin: 0;
  line-height: 1.3;
}

.page-subtitle {
  font-size: 12px;
  color: #6b7280;
  margin-top: 0.35rem;
  font-weight: 500;
}

.mb-page-header {
  margin-bottom: 1rem;
}

[data-bs-theme="dark"] .page-title {
  color: #ffffff;
}

[data-bs-theme="dark"] .page-subtitle {
  color: #9ca3af;
}

/* ---------- Table & Layout ---------- */
.table-responsive {
  margin-top: -0.5rem;
}

.table > thead > tr > th {
  text-align: center !important;
}

/* Dark mode: bg-secondary on thead clashes with dark backgrounds — override to dark-aware header color */
[data-bs-theme="dark"] thead.bg-secondary {
  background-color: #2a2a40 !important;
}
[data-bs-theme="dark"] thead.bg-secondary th {
  color: #a0a0b0 !important;
}

/* ---------- Card Override ---------- */
/* Use `body .card` (0,1,1) to beat Metronic's `.card` (0,1,0) without !important */
body .card {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f3f5;
}

[data-bs-theme="dark"] .card {
  border-color: #2d2d3a;
}

/* `.card > .card-header` (0,2,0) matches Metronic specificity, wins by source order */
.card > .card-header {
  min-height: 60px;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
}

/* `.card .card-body` (0,2,0) matches Metronic specificity, wins by source order */
.card .card-body {
  padding-top: 1rem;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
}

/* ---------- Modal Override ---------- */
/* `.modal .modal-header` (0,2,0) beats Metronic's `.modal-header` (0,1,0) */
.modal .modal-header,
.modal .modal-footer {
  padding: 1rem 1.75rem;
}

/* ---------- Header & Footer ---------- */
/* Header — glassmorphism blend: subtle transparency + backdrop blur */
.header {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

[data-bs-theme="dark"] .header {
  background-color: rgba(30, 30, 45, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.footer {
  background-color: transparent;
}

.footer .margin-border {
  border: none !important;
}

.margin-border {
  box-shadow: none !important;
  border-bottom: 1px solid #eff2f5;
}

[data-bs-theme="dark"] .margin-border {
  border-bottom-color: #2d2d3a;
}

[data-bs-theme="dark"] #kt_header {
  border-bottom-color: #2d2d3a !important;
}

[data-bs-theme="dark"] #kt_footer {
  border-top-color: #2d2d3a !important;
}

/* ---------- Content Padding ---------- */
@media (min-width: 992px) {
  .content {
    padding: 23px 0;
  }
}

/* ---------- Progress ---------- */
.progress {
  width: 100%;
  height: 15px;
  background: #c9cdd1;
}

/* ---------- Misc Utilities ---------- */
.card-head {
  justify-content: center !important;
  align-items: center !important;
}

.font-size {
  align-items: center;
  text-align: center;
  font-size: 35px;
  color: #fff;
  font-weight: bold;
}

.size-font {
  align-items: center;
  text-align: center;
  font-size: 12px;
  color: #fff;
}

/* ---------- Select2 Customization ---------- */
.select2-container--bootstrap5 .select2-dropdown {
  padding: 0.5rem 0rem 0.75rem 0rem;
}

.select2-container--bootstrap5 .select2-dropdown .select2-search {
  padding: 0.25rem 0.75rem;
  margin: 0 0 0.25rem 0;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option {
  padding: 0.6rem 0.75rem;
}

/* Select2 single-select height & text wrap fix */
.select2-selection--single {
  height: 100% !important;
}

.select2-selection__rendered {
  word-wrap: break-word !important;
  text-overflow: inherit !important;
  white-space: normal !important;
}

/* Select2 highlight — diselaraskan ke brand primary #2678c9 */
.select2-results__option--highlighted {
  background-color: rgba(38, 120, 201, 0.1) !important;
  color: var(--mb-primary) !important;
}

.select2-results__option--selected.select2-results__option--highlighted {
  background-color: var(--mb-primary) !important;
  color: #fff !important;
}

/* Dark mode: the bootstrap5 select2 theme (plugins.bundle.css) hardcodes its
   selected-value and placeholder text to #181c32 (near-black) and never gets
   overridden by plugins.dark.bundle.css — that bundle has no
   `.select2-container--bootstrap5` rules at all. Every select2 control (e.g.
   "Paket" on Tambah/Edit Company) ends up rendering near-invisible text
   against the dark control background (~#1e1e2d). Match the dark text color
   the native `.form-select` already uses; keep the placeholder muted rather
   than full white so it still reads as a hint, not a chosen value. */
[data-bs-theme="dark"] .select2-selection--single .select2-selection__rendered {
  color: #fff !important;
}

[data-bs-theme="dark"] .select2-selection--single .select2-selection__placeholder {
  color: var(--mb-text-sub) !important;
}

/* ---------- Zoom & Size Utilities ---------- */
.z-90 {
  zoom: 90%;
}

.z-120 {
  zoom: 120%;
}

.zoom-80 {
  zoom: 80%;
}

.bg-gray-dark {
  background-color: #181c32 !important;
}

.text-center {
  justify-content: center !important;
}

/* ---------- Button Overrides ---------- */
.btn.btn-sm {
  font-size: 0.8rem;
}

/* Metronic's own .btn-outline-*:hover computes near-black text (best
   contrast against the fill color) — white reads better against these
   particular brand colors, so override it consistently across variants. */
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover,
.btn-outline-dark:hover {
  color: #fff !important;
}

.btn.btn-secondary.buttons-copy.buttons-html5,
.btn.btn-secondary.buttons-excel.buttons-html5,
.btn.btn-secondary.buttons-collection.dropdown-toggle.buttons-colvis {
  zoom: 90%;
}

/* Subtle hover — prevent Metronic's aggressive color flip on btn-light-* */
/* Override hover CSS vars so bg/color stay the same, just add subtle depth */
.btn.btn-light-primary {
  --bs-btn-hover-bg: var(--bs-btn-bg);
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-hover-border-color: var(--bs-btn-border-color);
  --bs-btn-active-bg: var(--bs-btn-bg);
  --bs-btn-active-color: var(--bs-btn-color);
  --bs-btn-active-border-color: var(--bs-btn-border-color);
}
.btn.btn-light-success {
  --bs-btn-hover-bg: var(--bs-btn-bg);
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-hover-border-color: var(--bs-btn-border-color);
  --bs-btn-active-bg: var(--bs-btn-bg);
  --bs-btn-active-color: var(--bs-btn-color);
  --bs-btn-active-border-color: var(--bs-btn-border-color);
}
.btn.btn-light-danger {
  --bs-btn-hover-bg: var(--bs-btn-bg);
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-hover-border-color: var(--bs-btn-border-color);
  --bs-btn-active-bg: var(--bs-btn-bg);
  --bs-btn-active-color: var(--bs-btn-color);
  --bs-btn-active-border-color: var(--bs-btn-border-color);
}
.btn.btn-light-warning {
  --bs-btn-hover-bg: var(--bs-btn-bg);
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-hover-border-color: var(--bs-btn-border-color);
  --bs-btn-active-bg: var(--bs-btn-bg);
  --bs-btn-active-color: var(--bs-btn-color);
  --bs-btn-active-border-color: var(--bs-btn-border-color);
}
.btn.btn-light-info {
  --bs-btn-hover-bg: var(--bs-btn-bg);
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-hover-border-color: var(--bs-btn-border-color);
  --bs-btn-active-bg: var(--bs-btn-bg);
  --bs-btn-active-color: var(--bs-btn-color);
  --bs-btn-active-border-color: var(--bs-btn-border-color);
}

/* Add subtle depth on hover instead of color flip */
.btn[class*="btn-light-"]:hover {
  filter: brightness(0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.btn[class*="btn-light-"]:active {
  filter: brightness(0.92);
}

/* ============================================
   Badge — Global (TailAdmin / Tailwind-style pill)
   ============================================
   Replace Bootstrap/Metronic default solid badges with a consistent
   pill geometry + soft tinted palette routed through the shared semantic
   tokens (--mb-success / -warning / -danger / -info) so badges and the
   table-row variants (mb-modern.css) share ONE color ramp.
     bg   = var(--mb-*-light)  (same tint the table rows use)
     text = the accent token, darkened (light) / lifted (dark) via
            color-mix so small labels clear WCAG AA (>=4.5:1) on the tint.
   color-mix keeps the token as the single source of truth (no re-hardcoded
   hexes); the badge greens/reds unify onto the table-row ramp as intended.

   Covers all common variants:
     - Bootstrap 5  : .badge.bg-{primary,success,danger,warning,info,secondary,light,dark}
     - Metronic solid: .badge.badge-{primary,success,danger,warning,info,secondary,light,dark}
     - Metronic soft : .badge.badge-light-{primary,success,danger,warning,info,secondary,dark}
   ============================================ */

/* Base geometry — matches:
   inline-flex items-center justify-center gap-1 rounded-full
   px-2.5 py-0.5 text-sm font-medium */
.badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem; /* gap-1 */
  padding: 0.125rem 0.625rem !important; /* py-0.5 px-2.5 */
  border-radius: 9999px !important; /* rounded-full */
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  line-height: 1.25rem;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
}

/* --- Primary (brand) --- */
.badge.bg-primary,
.badge.badge-primary,
.badge.badge-light-primary {
  background-color: #eff6ff !important;                              /* brand tint (blue-50) */
  color: color-mix(in srgb, var(--mb-primary) 88%, #000) !important; /* brand blue darkened, AA on tint (5.13:1 vs 4.18:1 raw) */
  border-color: transparent;
}
[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.badge-primary,
[data-bs-theme="dark"] .badge.badge-light-primary {
  background-color: var(--mb-primary-light) !important;  /* token: primary tint (dark) */
  color: #7cb4e8 !important;                             /* lighter brand (dark) */
}

/* --- Success --- */
.badge.bg-success,
.badge.badge-success,
.badge.badge-light-success {
  background-color: var(--mb-success-light) !important;              /* token: success tint */
  color: color-mix(in srgb, var(--mb-success) 65%, #000) !important; /* success accent, AA on tint (4.79:1) */
  border-color: transparent;
}
[data-bs-theme="dark"] .badge.bg-success,
[data-bs-theme="dark"] .badge.badge-success,
[data-bs-theme="dark"] .badge.badge-light-success {
  background-color: var(--mb-success-light) !important;              /* token: success tint (dark) */
  color: color-mix(in srgb, var(--mb-success) 85%, #fff) !important; /* success accent, AA on dark tint (6.85:1) */
}

/* --- Error / Danger --- */
.badge.bg-danger,
.badge.badge-danger,
.badge.badge-light-danger {
  background-color: var(--mb-danger-light) !important;              /* token: danger tint */
  color: color-mix(in srgb, var(--mb-danger) 65%, #000) !important; /* danger accent, AA on tint (6.85:1) */
  border-color: transparent;
}
[data-bs-theme="dark"] .badge.bg-danger,
[data-bs-theme="dark"] .badge.badge-danger,
[data-bs-theme="dark"] .badge.badge-light-danger {
  background-color: var(--mb-danger-light) !important;              /* token: danger tint (dark) */
  color: color-mix(in srgb, var(--mb-danger) 85%, #fff) !important; /* danger accent, AA on dark tint (4.58:1) */
}

/* --- Warning --- */
.badge.bg-warning,
.badge.badge-warning,
.badge.badge-light-warning {
  background-color: var(--mb-warning-light) !important;              /* token: warning tint */
  color: color-mix(in srgb, var(--mb-warning) 65%, #000) !important; /* warning accent, AA on tint (4.59:1) */
  border-color: transparent;
}
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.badge-warning,
[data-bs-theme="dark"] .badge.badge-light-warning {
  background-color: var(--mb-warning-light) !important;              /* token: warning tint (dark) */
  color: color-mix(in srgb, var(--mb-warning) 85%, #fff) !important; /* warning accent, AA on dark tint (7.19:1) */
}

/* --- Info (blue-light) --- */
.badge.bg-info,
.badge.badge-info,
.badge.badge-light-info {
  background-color: var(--mb-info-light) !important;              /* token: info tint */
  color: color-mix(in srgb, var(--mb-info) 65%, #000) !important; /* info accent, AA on tint (5.08:1) */
  border-color: transparent;
}
[data-bs-theme="dark"] .badge.bg-info,
[data-bs-theme="dark"] .badge.badge-info,
[data-bs-theme="dark"] .badge.badge-light-info {
  background-color: var(--mb-info-light) !important;              /* token: info tint (dark) */
  color: color-mix(in srgb, var(--mb-info) 85%, #fff) !important; /* info accent, AA on dark tint (6.52:1) */
}

/* --- Light (gray) — used by .bg-light / .bg-secondary / .badge-light / .badge-secondary / .badge-light-secondary --- */
.badge.bg-light,
.badge.bg-secondary,
.badge.badge-light,
.badge.badge-secondary,
.badge.badge-light-secondary {
  background-color: #f2f4f7 !important; /* gray-100 */
  color: #344054 !important;            /* gray-700 */
  border-color: transparent;
}
[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.bg-secondary,
[data-bs-theme="dark"] .badge.badge-light,
[data-bs-theme="dark"] .badge.badge-secondary,
[data-bs-theme="dark"] .badge.badge-light-secondary {
  background-color: rgba(255, 255, 255, 0.05) !important; /* white/5 */
  color: rgba(255, 255, 255, 0.8) !important;             /* white/80 */
}

/* --- Dark (solid gray-500) --- */
.badge.bg-dark,
.badge.badge-dark,
.badge.badge-light-dark {
  background-color: #667085 !important; /* gray-500 */
  color: #ffffff !important;
  border-color: transparent;
}
[data-bs-theme="dark"] .badge.bg-dark,
[data-bs-theme="dark"] .badge.badge-dark,
[data-bs-theme="dark"] .badge.badge-light-dark {
  background-color: rgba(255, 255, 255, 0.05) !important; /* white/5 */
  color: #ffffff !important;
}

/* ---------- SweetAlert ---------- */
.title-sweat {
  font-weight: 800 !important;
}

.swal-high-zindex {
  z-index: 9999999 !important;
}

.swal2-styled.swal2-confirm {
  min-width: 80px;
}

.swal2-styled.swal2-cancel {
  min-width: 80px;
}

/* ---------- Mobile Responsive ---------- */
@media (max-width: 991.98px) {
  /* Page header */
  .page-title {
    font-size: 20px;
  }

  .page-subtitle {
    font-size: 13px;
  }

  /* PD page header stack vertically */
  .mb-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .mb-page-header__actions {
    width: 100%;
    justify-content: flex-start;
  }

  /* MB component responsive rules are in mb-modern.css (correct source order) */
}

/* ---------- Dark Mode: DataTables Empty State ---------- */
[data-bs-theme="dark"] .dataTables_empty img,
[data-bs-theme="dark"] td.dataTables_empty img {
  filter: invert(0.85) hue-rotate(180deg);
  opacity: 0.6;
}
[data-bs-theme="dark"] .dataTables_empty p,
[data-bs-theme="dark"] td.dataTables_empty p {
  color: #8c98a4 !important;
}

/* ---------- Bell Icon (Navbar) Dark Mode ---------- */
#latest-transaction .bi-bell-fill {
  color: #778899;
  transition: color 0.2s ease;
}

[data-bs-theme="dark"] #latest-transaction .bi-bell-fill {
  color: #a0a8b8;
}

/* ---------- btn-light-primary: visible border ----------
   Core Metronic sets border-color identical to the button's own background
   (#f1faff light / #212e48 dark) — effectively no border. Add a real one so
   the button reads as a button against a white/dark card, not just colored
   text. Loaded after style.bundle.css (see head.blade.php), so this wins
   the cascade at equal specificity — no !important needed. */
.btn.btn-light-primary {
  border-color: rgba(0, 158, 247, 0.35);
}
[data-bs-theme="dark"] .btn.btn-light-primary {
  border-color: rgba(54, 153, 255, 0.4);
}