/* ============================================================
   MONIKA+ Design System v3
   Primary accent: #6D6CE9 / #7271E9
   ============================================================ */
:root {
  --mk-primary: #6D6CE9;
  --mk-primary-2: #7271E9;
  --mk-primary-soft: rgba(109, 108, 233, 0.14);
  --mk-primary-glow: rgba(109, 108, 233, 0.32);
  --mk-bg: #f3f4fb;
  --mk-surface: #ffffff;
  --mk-text: #1f2430;
  --mk-muted: #5b6172;
  --mk-border: #e4e6f2;
  --mk-radius: 16px;
  --mk-font: "Inter", "Poppins", "Roboto", system-ui, sans-serif;
  --mk-sidebar: linear-gradient(180deg, #000003 0%, #27274f 45%, #5453dd 100%);
}

body {
  font-family: var(--mk-font) !important;
  color: var(--mk-text) !important;
  background: var(--mk-bg) !important;
  overflow-x: hidden !important;
}
.page-wrapper, .page-body-wrapper, .page-body, .container-fluid {
  max-width: 100%;
  overflow-x: clip;
}

/* Brand text logo */
.mk-brand-text {
  display: inline-flex;
  align-items: center;
  font-family: "Poppins", Inter, sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -.03em;
  text-decoration: none !important;
  white-space: nowrap;
}
.mk-brand-text .mk-plus { color: #ffc500; margin-left: 1px; }
.page-header .mk-brand-text, .header-logo-wrapper .mk-brand-text {
  background: linear-gradient(135deg, #5b5ad6, #6d6ce9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-header .mk-brand-text .mk-plus {
  -webkit-text-fill-color: #ffc500;
  color: #ffc500 !important;
  background: none;
}
.sidebar-wrapper .mk-brand-text, .logo-wrapper .mk-brand-text {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  background: none;
}
.sidebar-wrapper .mk-brand-text .mk-plus {
  color: #ffc500 !important;
  -webkit-text-fill-color: #ffc500;
}

/* Header */
.page-wrapper.compact-wrapper .page-header {
  background: #fff !important;
  border-bottom: 1px solid var(--mk-border) !important;
  box-shadow: 0 4px 18px rgba(31,36,48,.05) !important;
}
.page-header .nav-menus a, .page-header .profile-media { color: var(--mk-text) !important; }
.page-header svg path[stroke] { stroke: #2a2f3d !important; }

/* Sidebar — brighter purple matching #6D6CE9 family */
.page-wrapper .sidebar-wrapper,
.sidebar-wrapper {
  background: var(--mk-sidebar) !important;
  box-shadow: 8px 0 28px rgba(109,108,233,.22) !important;
  color: #fff !important;
}
.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links li a,
.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list a,
.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .sidebar-submenu a,
.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links a span,
.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links a .fa {
  color: #ffffff !important;
}
.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links li a {
  border-radius: 12px !important;
  margin: 2px 10px !important;
}
.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links li a:hover,
.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links li a.active {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}
.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links a svg,
.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links a i {
  color: #f0efff !important;
  stroke: #f0efff !important;
}
.page-wrapper .sidebar-wrapper .logo-wrapper a,
.page-wrapper .sidebar-wrapper .back-btn,
.page-wrapper .sidebar-wrapper .mobile-back {
  color: #fff !important;
}

/* Body */
.page-wrapper .page-body {
  background: var(--mk-bg) !important;
  color: var(--mk-text) !important;
}
.page-title h3, .page-title .breadcrumb-item,
.page-title .breadcrumb-item a, .page-title .breadcrumb-item.active {
  color: var(--mk-text) !important;
}

/* ============ CARDS ============ */
.page-body .card,
.page-wrapper .card,
.card {
  background: #fff !important;
  color: #1f2430 !important;
  border: 1px solid var(--mk-border) !important;
  border-radius: var(--mk-radius) !important;
  box-shadow: 0 10px 28px rgba(31,36,48,.06) !important;
  overflow: hidden;
  max-width: 100%;
}
.page-body .card .card-body,
.card .card-body { color: #1f2430 !important; background: transparent !important; }
.page-body .card .card-header,
.card .card-header {
  background: linear-gradient(180deg, #fafbff 0%, #fff 100%) !important;
  border-bottom: 1px solid var(--mk-border) !important;
  color: #1f2430 !important;
}
.page-body .card h1, .page-body .card h2, .page-body .card h3,
.page-body .card h4, .page-body .card h5, .page-body .card h6,
.page-body .card p, .page-body .card label, .page-body .card li,
.page-body .card .media-body, .card h1, .card h2, .card h3,
.card h4, .card h5, .card h6, .card p, .card label, .card .media-body {
  color: #1f2430 !important;
}
.card .text-muted { color: #5b6172 !important; }

/* Soft elevated dashboard-style cards */
.card:not(.bg-primary):not(.stat-card-modern):not([style*="gradient"]):not(.bg-info):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-dark):not(.bg-light) {
  background: linear-gradient(165deg, #ffffff 0%, #f8f9ff 100%) !important;
  border: 1px solid #e0e2f5 !important;
}

/* Hero / colored cards — primary, success, info, warning, danger, dark, light */
.card.bg-primary,
.page-body .card.bg-primary {
  background: linear-gradient(135deg, #6D6CE9 0%, #5b5ad6 55%, #4a49c4 100%) !important;
  border: 0 !important;
  color: #fff !important;
}
.card.bg-success,
.page-body .card.bg-success {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 55%, #15803d 100%) !important;
  border: 0 !important;
  color: #fff !important;
}
.card.bg-info,
.page-body .card.bg-info {
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 55%, #0284c7 100%) !important;
  border: 0 !important;
  color: #fff !important;
}
.card.bg-warning,
.page-body .card.bg-warning {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 55%, #d97706 100%) !important;
  border: 0 !important;
  color: #1f2430 !important;
}
.card.bg-danger,
.page-body .card.bg-danger {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 55%, #dc2626 100%) !important;
  border: 0 !important;
  color: #fff !important;
}
.card.bg-dark,
.page-body .card.bg-dark {
  background: linear-gradient(135deg, #3f3d6b 0%, #2a2850 55%, #1a1840 100%) !important;
  border: 0 !important;
  color: #fff !important;
}
.card.bg-light,
.page-body .card.bg-light {
  background: linear-gradient(165deg, #ffffff 0%, #f3f4fb 100%) !important;
  border: 1px solid #e0e2f5 !important;
  color: #1f2430 !important;
}

/* Text on colored cards (white text except warning + light) */
.card.bg-primary h1, .card.bg-primary h2, .card.bg-primary h3,
.card.bg-primary h4, .card.bg-primary h5, .card.bg-primary h6,
.card.bg-primary p, .card.bg-primary label, .card.bg-primary .media-body,
.card.bg-primary strong, .card.bg-primary span:not(.badge),
.card.bg-primary .col-form-label,
.page-body .card.bg-primary h1, .page-body .card.bg-primary h2,
.page-body .card.bg-primary h3, .page-body .card.bg-primary h4,
.page-body .card.bg-primary h5, .page-body .card.bg-primary h6,
.page-body .card.bg-primary p, .page-body .card.bg-primary label,
.page-body .card.bg-primary .media-body, .page-body .card.bg-primary strong,
.card.bg-success h1, .card.bg-success h2, .card.bg-success h3,
.card.bg-success h4, .card.bg-success h5, .card.bg-success h6,
.card.bg-success p, .card.bg-success label, .card.bg-success .media-body,
.card.bg-success strong, .card.bg-success span:not(.badge),
.card.bg-success .col-form-label,
.page-body .card.bg-success h1, .page-body .card.bg-success h2,
.page-body .card.bg-success h3, .page-body .card.bg-success h4,
.page-body .card.bg-success h5, .page-body .card.bg-success h6,
.page-body .card.bg-success p, .page-body .card.bg-success label,
.page-body .card.bg-success .media-body, .page-body .card.bg-success strong,
.card.bg-info h1, .card.bg-info h2, .card.bg-info h3,
.card.bg-info h4, .card.bg-info h5, .card.bg-info h6,
.card.bg-info p, .card.bg-info label, .card.bg-info .media-body,
.card.bg-info strong, .card.bg-info span:not(.badge),
.card.bg-info .col-form-label,
.page-body .card.bg-info h1, .page-body .card.bg-info h2,
.page-body .card.bg-info h3, .page-body .card.bg-info h4,
.page-body .card.bg-info h5, .page-body .card.bg-info h6,
.page-body .card.bg-info p, .page-body .card.bg-info label,
.page-body .card.bg-info .media-body, .page-body .card.bg-info strong,
.card.bg-danger h1, .card.bg-danger h2, .card.bg-danger h3,
.card.bg-danger h4, .card.bg-danger h5, .card.bg-danger h6,
.card.bg-danger p, .card.bg-danger label, .card.bg-danger .media-body,
.card.bg-danger strong, .card.bg-danger span:not(.badge),
.card.bg-danger .col-form-label,
.page-body .card.bg-danger h1, .page-body .card.bg-danger h2,
.page-body .card.bg-danger h3, .page-body .card.bg-danger h4,
.page-body .card.bg-danger h5, .page-body .card.bg-danger h6,
.page-body .card.bg-danger p, .page-body .card.bg-danger label,
.page-body .card.bg-danger .media-body, .page-body .card.bg-danger strong,
.card.bg-dark h1, .card.bg-dark h2, .card.bg-dark h3,
.card.bg-dark h4, .card.bg-dark h5, .card.bg-dark h6,
.card.bg-dark p, .card.bg-dark label, .card.bg-dark .media-body,
.card.bg-dark strong, .card.bg-dark span:not(.badge),
.card.bg-dark .col-form-label,
.page-body .card.bg-dark h1, .page-body .card.bg-dark h2,
.page-body .card.bg-dark h3, .page-body .card.bg-dark h4,
.page-body .card.bg-dark h5, .page-body .card.bg-dark h6,
.page-body .card.bg-dark p, .page-body .card.bg-dark label,
.page-body .card.bg-dark .media-body, .page-body .card.bg-dark strong {
  color: #ffffff !important;
}

/* Warning + light: dark text for contrast */
.card.bg-warning h1, .card.bg-warning h2, .card.bg-warning h3,
.card.bg-warning h4, .card.bg-warning h5, .card.bg-warning h6,
.card.bg-warning p, .card.bg-warning label, .card.bg-warning .media-body,
.card.bg-warning strong, .card.bg-warning span:not(.badge),
.card.bg-warning .col-form-label,
.page-body .card.bg-warning h1, .page-body .card.bg-warning h2,
.page-body .card.bg-warning h3, .page-body .card.bg-warning h4,
.page-body .card.bg-warning h5, .page-body .card.bg-warning h6,
.page-body .card.bg-warning p, .page-body .card.bg-warning label,
.page-body .card.bg-warning .media-body, .page-body .card.bg-warning strong,
.card.bg-light h1, .card.bg-light h2, .card.bg-light h3,
.card.bg-light h4, .card.bg-light h5, .card.bg-light h6,
.card.bg-light p, .card.bg-light label, .card.bg-light .media-body,
.card.bg-light strong, .card.bg-light span:not(.badge),
.card.bg-light .col-form-label,
.page-body .card.bg-light h1, .page-body .card.bg-light h2,
.page-body .card.bg-light h3, .page-body .card.bg-light h4,
.page-body .card.bg-light h5, .page-body .card.bg-light h6,
.page-body .card.bg-light p, .page-body .card.bg-light label,
.page-body .card.bg-light .media-body, .page-body .card.bg-light strong {
  color: #1f2430 !important;
}

/* Dashboard stat cards — soft vivid gradients, white text */
.stat-card-modern {
  border: 0 !important;
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(31,36,48,.12) !important;
}
.stat-card-modern,
.stat-card-modern h2,
.stat-card-modern p,
.stat-card-modern small,
.stat-card-modern i,
.stat-card-modern svg {
  color: #ffffff !important;
}
.bg-info-gradient { background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important; }
.bg-primary-gradient { background: linear-gradient(135deg, #818cf8, #6D6CE9) !important; }
.bg-success-gradient { background: linear-gradient(135deg, #34d399, #10b981) !important; }
.bg-warning-gradient { background: linear-gradient(135deg, #fbbf24, #f59e0b) !important; color: #1f2430 !important; }
.bg-gradient-modern { background: linear-gradient(135deg, #6D6CE9, #4a49c4) !important; color: #fff !important; }
.card-header.bg-gradient-modern,
.card-header.bg-gradient-modern h5,
.card-header.bg-gradient-modern h6 {
  color: #fff !important;
  background: linear-gradient(135deg, #6D6CE9, #4a49c4) !important;
}

/* Summary filter cards (perkara) */
.mk-sum-card {
  border-radius: 16px !important;
  border: 2px solid transparent !important;
  cursor: pointer;
  transition: .2s ease;
  background: linear-gradient(160deg, #fff 0%, #f5f6ff 100%) !important;
  box-shadow: 0 8px 22px rgba(109,108,233,.1) !important;
}
.mk-sum-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(109,108,233,.18) !important; }
.mk-sum-card.active-filter {
  border-color: #6D6CE9 !important;
  box-shadow: 0 0 0 3px rgba(109,108,233,.15) !important;
}
.mk-sum-card h3 { font-weight: 800; color: #6D6CE9 !important; margin: .35rem 0 0; }
.mk-sum-card h6 { color: #5b6172 !important; margin: 0; font-weight: 600; }
.mk-sum-card.mk-sum-perdata h3 { color: #059669 !important; }
.mk-sum-card.mk-sum-pidana h3 { color: #dc2626 !important; }

/* ============ FORMS / BUTTONS ============ */
.form-control, .form-select, select.form-select {
  min-height: 44px !important;
  padding: .55rem .9rem !important;
  font-size: .95rem !important;
  border-radius: 10px !important;
  border: 1px solid #d0d3e6 !important;
  color: #1f2430 !important;
  background: #fff !important;
  max-width: 100% !important;
}
.form-select, select.form-select { min-width: 140px !important; }
select.form-select[style*="width"] { width: auto !important; min-width: 140px !important; }
.form-control:focus, .form-select:focus {
  border-color: var(--mk-primary) !important;
  box-shadow: 0 0 0 3px var(--mk-primary-soft) !important;
}
label, .form-label, .col-form-label { color: #1f2430 !important; font-weight: 600; }
.card.bg-primary label, .card.bg-primary .col-form-label,
.card.bg-success label, .card.bg-success .col-form-label,
.card.bg-info label, .card.bg-info .col-form-label,
.card.bg-danger label, .card.bg-danger .col-form-label,
.card.bg-dark label, .card.bg-dark .col-form-label { color: #fff !important; }
.card.bg-warning label, .card.bg-warning .col-form-label,
.card.bg-light label, .card.bg-light .col-form-label { color: #1f2430 !important; }

.btn {
  min-height: 42px !important;
  padding: .5rem 1.15rem !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.btn-primary {
  background: linear-gradient(135deg, #6D6CE9, #5b5ad6) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 8px 18px var(--mk-primary-glow) !important;
}
.btn-warning { background: #ffc500 !important; border-color: #ffc500 !important; color: #1f2430 !important; }
.btn-outline-primary {
  color: #6D6CE9 !important;
  border: 1.5px solid #6D6CE9 !important;
  background: #fff !important;
}
.btn-outline-primary:hover { background: #6D6CE9 !important; color: #fff !important; }

/* ============ DATATABLES — white header text ============ */
.table-responsive { max-width: 100%; overflow-x: auto; }
table.dataTable, .table {
  width: 100% !important;
  color: #1f2430 !important;
  background: #fff !important;
}
table.dataTable thead th,
.table thead th,
.table-modern thead th,
table.dataTable thead th * {
  background: linear-gradient(135deg, #6D6CE9, #5b5ad6) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  white-space: nowrap;
}
table.dataTable tbody td,
.table tbody td {
  color: #1f2430 !important;
  background: #fff !important;
}
table.dataTable tbody tr:hover { background: #f4f5ff !important; }

.dataTables_wrapper { max-width: 100%; color: #1f2430 !important; }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper label { color: #1f2430 !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid var(--mk-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #4a4a6a !important;
  margin: 0 2px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: linear-gradient(135deg, #6D6CE9, #5b5ad6) !important;
  color: #fff !important;
  border-color: #6D6CE9 !important;
}
.dt-buttons .dt-button, .dt-buttons .btn {
  border-radius: 8px !important;
  border: 1px solid #6D6CE9 !important;
  color: #6D6CE9 !important;
  background: #fff !important;
  font-weight: 600 !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 4px 0 0 !important;
  padding: 0.35rem 0.75rem !important;
  line-height: 1.2 !important;
}
.dt-buttons .dt-button:hover { background: #6D6CE9 !important; color: #fff !important; }

/* Length menu sejajar vertikal dengan tombol export */
.dataTables_wrapper .dataTables_length {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 12px 0 0 !important;
  min-height: 36px !important;
}
.dataTables_wrapper .dataTables_length label {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  gap: 6px;
  font-weight: 500;
  color: var(--mk-text) !important;
  white-space: nowrap;
}
.dataTables_wrapper .dataTables_length select {
  min-height: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  border: 1px solid #d8d6ff !important;
  padding: 0 0.5rem !important;
  margin: 0 4px !important;
  vertical-align: middle !important;
}
.dataTables_wrapper .dt-buttons {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 4px;
  vertical-align: middle;
}
/* Baris kontrol length + buttons sejajar */
.dataTables_wrapper .row.align-items-center .d-flex {
  align-items: center !important;
}

/* ============ LOADER — always centered fixed ============ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: linear-gradient(145deg, #3d3cc0, #6D6CE9 55%, #8b8af0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.preloader.is-done, .preloader.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}
.preloader .loading { text-align: center; color: #fff !important; position: static !important; transform: none !important; }
.mk-loader-orbit {
  width: 88px; height: 88px; margin: 0 auto 16px; position: relative;
}
.mk-loader-orbit::before, .mk-loader-orbit::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent; border-top-color: #fff;
  animation: mk-spin 1.1s linear infinite;
}
.mk-loader-orbit::after {
  inset: 12px; border-top-color: #ffc500; border-bottom-color: rgba(255,255,255,.3);
  animation-direction: reverse; animation-duration: .8s;
}
.preloader .loading p {
  color: #fff !important; font-weight: 700; letter-spacing: .12em; font-size: .85rem; margin: 0;
}
@keyframes mk-spin { to { transform: rotate(360deg); } }

/* Page ajax loader — FIXED center (override absolute/top-left bugs) */
#loader-container,
.mk-page-loader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  background: rgba(45, 44, 120, 0.45) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99990 !important;
  backdrop-filter: blur(2px);
}
#loader-container[style*="block"],
#loader-container[style*="flex"],
#loader-container.is-visible {
  display: flex !important;
}
#loader-container #loader,
#loader-container img { display: none !important; }
#loader-container::after {
  content: "";
  width: 72px; height: 72px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-right-color: #ffc500;
  animation: mk-spin .85s linear infinite;
  box-shadow: 0 0 28px rgba(109,108,233,.5);
}

/* Responsive */
img, svg, video, canvas { max-width: 100%; height: auto; }
.row > [class*="col-"] { min-width: 0; max-width: 100%; }
.modal-dialog { max-width: min(960px, 96vw); }
@media (max-width: 575.98px) {
  .form-select, select.form-select { min-width: 100% !important; width: 100% !important; }
}

.bg-primary {
  background-color: #6362e7 !important;
  color: #fff
}

.bg-light-primary {
  background-color: rgba(99, 98, 231, 0.1) !important;
  color: #fff
}

.bg-secondary {
  background-color: #ffc500 !important;
  color: #fff
}

.bg-light-secondary {
  background-color: rgba(255, 197, 0, 0.1) !important;
  color: #fff
}

.bg-success {
  background-color: #7dc006 !important;
  color: #fff
}

.bg-light-success {
  background-color: rgba(125, 192, 6, 0.1) !important;
  color: #fff
}

.bg-danger {
  background-color: #e52727 !important;
  color: #fff
}

.bg-light-danger {
  background-color: rgba(229, 39, 39, 0.1) !important;
  color: #fff
}

.bg-info {
  background-color: #1d97ff !important;
  color: #fff
}

.bg-light-info {
  background-color: rgba(29, 151, 255, 0.1) !important;
  color: #fff
}

.bg-warning {
  background-color: #ff8819 !important;
  color: #fff
}

.bg-light-warning {
  background-color: rgba(255, 136, 25, 0.1) !important;
  color: #fff
}

.bg-light {
  background-color: #f4f6fd !important;
  color: #fff
}

.bg-light-light {
  background-color: rgba(244, 246, 253, 0.1) !important;
  color: #fff
}

.bg-dark {
  background-color: #2c323f !important;
  color: #fff
}

.bg-light-dark {
  background-color: rgba(44, 50, 63, 0.1) !important;
  color: #fff
}

.bg-light-1 {
  background-color: #8f97b2 !important;
  color: #fff
}

.bg-light-light-1 {
  background-color: rgba(143, 151, 178, 0.1) !important;
  color: #fff
}