/**
 * BNPOS Professional Overrides
 * Loaded last to stabilize visuals and navigation.
 */

:root {
  --pro-font: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', sans-serif;
  --pro-bg: #f4f6fb;
  --pro-surface: #ffffff;
  --pro-border: #dfe5ef;
  --pro-text: #1f2937;
  --pro-muted: #6b7280;
  --pro-primary: #2563eb;
  --pro-primary-dark: #1d4ed8;
  --pro-success: #059669;
  --pro-danger: #dc2626;
  --pro-radius: 10px;
  --pro-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

/* Global reset to cleaner enterprise tone */
body {
  font-family: var(--pro-font) !important;
  color: var(--pro-text) !important;
  background: var(--pro-bg) !important;
}

.content-wrapper::before {
  display: none !important; /* remove decorative overlay noise */
}

.content-wrapper {
  background: var(--pro-bg) !important;
}

.content-header {
  background: transparent !important;
  border-bottom: 0 !important;
  padding: 18px 24px 8px !important;
}

.content {
  padding: 16px 24px 28px !important;
}

/* Cards/boxes */
.box {
  border: 1px solid var(--pro-border) !important;
  border-radius: var(--pro-radius) !important;
  box-shadow: var(--pro-shadow) !important;
}

.box:hover {
  box-shadow: var(--pro-shadow) !important;
  transform: none !important;
}

.box-header {
  background: #fafbff !important;
  border-bottom: 1px solid var(--pro-border) !important;
  padding: 14px 18px !important;
}

.box-body {
  padding: 18px !important;
}

/* Buttons */
.btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease !important;
  transform: none !important;
}

.btn:hover,
.btn:active,
.btn:focus {
  transform: none !important;
}

.btn-primary {
  background: var(--pro-primary) !important;
  border-color: var(--pro-primary) !important;
}

.btn-primary:hover {
  background: var(--pro-primary-dark) !important;
  border-color: var(--pro-primary-dark) !important;
}

.btn-success {
  background: var(--pro-success) !important;
  border-color: var(--pro-success) !important;
}

.btn-danger {
  background: var(--pro-danger) !important;
  border-color: var(--pro-danger) !important;
}

/* Forms */
.form-control {
  border: 1px solid var(--pro-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.form-control:focus {
  border-color: #8ab4ff !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

/* Tables */
.table > thead > tr > th {
  background: #f8faff !important;
  color: #475569 !important;
  border-bottom: 1px solid var(--pro-border) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
}

.table > tbody > tr > td {
  border-color: #eef2f7 !important;
}

.table-hover > tbody > tr:hover {
  background: #f8fbff !important;
  box-shadow: none !important;
}

/* Sidebar professionalism + navigation sanity */
.skin-blue .main-sidebar {
  background: #111827 !important;
}

.skin-blue .sidebar-menu > li > a {
  margin: 0 !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  padding: 11px 14px !important;
}

.skin-blue .sidebar-menu > li.active > a {
  background: rgba(37, 99, 235, 0.20) !important;
  border-left-color: #60a5fa !important;
}

.skin-blue .sidebar-menu > li:hover > a {
  background: rgba(255, 255, 255, 0.06) !important;
  padding-left: 14px !important;
}

/* Critical: do NOT force all tree menus open */
.sidebar-expanded .main-sidebar .sidebar-menu .treeview-menu {
  display: none !important;
}
.sidebar-expanded .main-sidebar .sidebar-menu .treeview.active > .treeview-menu,
.sidebar-expanded .main-sidebar .sidebar-menu .treeview.menu-open > .treeview-menu {
  display: block !important;
}

.skin-blue .sidebar-menu .treeview-menu > li > a {
  padding: 8px 14px 8px 36px !important;
  color: #9ca3af !important;
}

.skin-blue .sidebar-menu .treeview-menu > li.active > a,
.skin-blue .sidebar-menu .treeview-menu > li > a:hover {
  color: #e5e7eb !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Header */
.skin-blue .main-header .navbar {
  background: #ffffff !important;
  border-bottom: 1px solid var(--pro-border) !important;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05) !important;
}

.skin-blue .main-header .navbar .nav > li > a,
.skin-blue .main-header .navbar .sidebar-toggle {
  color: #334155 !important;
}

/* Remove heavy animations for stable feel */
.content > .row,
.content > section {
  animation: none !important;
}

