/* ============================================================
   MgSolution Modern UI Override — v5
   Load order: bootstrap → layout → default → components →
               plugins → custom → modern.css (THIS FILE, LAST)
   Safe to use !important where needed to win specificity wars.
   Palette: #7367f0 primary · #1b1f3b sidebar · #f4f5fb bg
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   A. CSS CUSTOM PROPERTIES
   ══════════════════════════════════════════════════════════════ */
:root {
  --vg-primary:      #7367f0;
  --vg-primary-dk:   #5e50ee;
  --vg-primary-lt:   #ede9fd;
  --vg-sidebar:      #1b1f3b;
  --vg-sidebar-sub:  #141728;
  --vg-bg:           #f4f5fb;
  --vg-white:        #ffffff;
  --vg-text:         #3d405b;
  --vg-muted:        #8e92b0;
  --vg-border:       #e6e8f0;
  --vg-success:      #28c76f;
  --vg-danger:       #ea5455;
  --vg-warning:      #ff9f43;
  --vg-info:         #00cfe8;
  --vg-radius:       8px;
  --vg-shadow:       0 2px 12px rgba(115, 103, 240, 0.10);
  --vg-shadow-md:    0 4px 24px rgba(0, 0, 0, 0.08);
  --vg-header-h:     52px;
  --vg-sidebar-w:    215px;
  --vg-sidebar-w-closed: 45px;
  --vg-transition:   0.2s ease;
}


/* ══════════════════════════════════════════════════════════════
   A. GLOBAL RESET / BOX-SIZING / TYPOGRAPHY
   ══════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: var(--vg-text) !important;
  background: var(--vg-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  transition: color var(--vg-transition), background var(--vg-transition);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', 'Roboto', sans-serif !important;
  color: var(--vg-text);
  font-weight: 600;
}

p {
  margin-bottom: 0.75rem;
}


/* ══════════════════════════════════════════════════════════════
   B. PRE-LOADER
   ══════════════════════════════════════════════════════════════ */
.wrapper {
  background: var(--vg-primary) !important;
}

/* Override spinner arc border colors so no colored arcs bleed through */
div.spinner i {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
}

/* Belt-and-suspenders: ensure wrapper is gone once page is shown */
.page-wrapper ~ section.wrapper,
section.wrapper.hidden,
section.wrapper[style*="display: none"],
section.wrapper[style*="display:none"] {
  display: none !important;
  visibility: hidden !important;
}


/* ══════════════════════════════════════════════════════════════
   C. FIXED HEADER / NAVBAR
   ══════════════════════════════════════════════════════════════ */
.page-header.navbar {
  background: var(--vg-white) !important;
  border-bottom: 1px solid var(--vg-border) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06) !important;
  min-height: var(--vg-header-h) !important;
  height: var(--vg-header-h) !important;
  transition: width var(--vg-transition), margin var(--vg-transition);
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

/* Logo / brand area */
.page-header.navbar .page-logo {
  background: var(--vg-sidebar) !important;
  width: var(--vg-sidebar-w) !important;
  height: var(--vg-header-h) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 20px !important;
  border-right: none !important;
  transition: width var(--vg-transition);
}

.page-header.navbar .page-logo .logo-default {
  border-radius: 6px;
  object-fit: contain;
}

.page-header.navbar .page-logo span,
.page-header.navbar .page-logo a {
  color: var(--vg-white) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.5px;
  text-decoration: none !important;
}

/* Top nav links */
.page-header.navbar .page-top {
  background: var(--vg-white) !important;
  height: var(--vg-header-h) !important;
}

.page-header.navbar .top-menu .navbar-nav > li > a {
  color: var(--vg-muted) !important;
  transition: color var(--vg-transition) !important;
  height: var(--vg-header-h) !important;
  line-height: var(--vg-header-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.page-header.navbar .top-menu .navbar-nav > li > a:hover {
  color: var(--vg-primary) !important;
  background: transparent !important;
}

/* Menu toggle button */
.page-header.navbar .menu-toggler {
  color: var(--vg-muted) !important;
}

/* User dropdown avatar */
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > a img,
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > a .username + img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 2px solid var(--vg-primary-lt) !important;
  vertical-align: middle;
}

.page-header.navbar .top-menu .dropdown-menu {
  background: var(--vg-white) !important;
  border: 1px solid var(--vg-border) !important;
  border-radius: var(--vg-radius) !important;
  box-shadow: var(--vg-shadow-md) !important;
  padding: 6px !important;
  margin-top: 4px !important;
}

.page-header.navbar .top-menu .dropdown-menu > li > a {
  color: var(--vg-text) !important;
  border-radius: 6px !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  transition: all var(--vg-transition) !important;
}

.page-header.navbar .top-menu .dropdown-menu > li > a:hover {
  background: var(--vg-primary-lt) !important;
  color: var(--vg-primary) !important;
}

.page-header.navbar .top-menu .dropdown-menu .divider {
  background: var(--vg-border) !important;
  margin: 4px 0 !important;
}

/* Notification badge */
.page-header.navbar .top-menu .badge {
  background: var(--vg-danger) !important;
  font-size: 9px !important;
  top: 10px !important;
  right: 6px !important;
}


/* ══════════════════════════════════════════════════════════════
   D. SIDEBAR
   ══════════════════════════════════════════════════════════════ */
.page-sidebar {
  background: var(--vg-sidebar) !important;
  width: var(--vg-sidebar-w) !important;
  transition: width var(--vg-transition);
  position: fixed !important;
  top: var(--vg-header-h) !important;
  bottom: 0;
  left: 0;
  z-index: 9998;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Scrollbar in sidebar */
.page-sidebar::-webkit-scrollbar {
  width: 4px;
}
.page-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.page-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

/* Nav menu */
.page-sidebar .page-sidebar-menu {
  background: transparent !important;
  padding-top: 12px !important;
}

.page-sidebar .page-sidebar-menu > li > a {
  color: rgba(255, 255, 255, 0.72) !important;
  background: transparent !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-left: 3px solid transparent !important;
  transition: all var(--vg-transition) !important;
  display: flex !important;
  align-items: center !important;
}

.page-sidebar .page-sidebar-menu > li > a i {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 15px !important;
  width: 20px !important;
  margin-right: 10px !important;
  text-align: center;
  transition: color var(--vg-transition) !important;
  flex-shrink: 0;
}

.page-sidebar .page-sidebar-menu > li > a:hover,
.page-sidebar .page-sidebar-menu > li.active > a,
.page-sidebar .page-sidebar-menu > li.open > a {
  color: var(--vg-white) !important;
  background: rgba(115, 103, 240, 0.12) !important;
  border-left-color: var(--vg-primary) !important;
}

.page-sidebar .page-sidebar-menu > li > a:hover i,
.page-sidebar .page-sidebar-menu > li.active > a i,
.page-sidebar .page-sidebar-menu > li.open > a i {
  color: var(--vg-primary) !important;
}

/* Arrow indicator */
.page-sidebar .page-sidebar-menu > li > a .arrow {
  color: rgba(255, 255, 255, 0.35) !important;
  transition: transform var(--vg-transition) !important;
}

.page-sidebar .page-sidebar-menu > li.open > a .arrow,
.page-sidebar .page-sidebar-menu > li.active > a .arrow {
  color: var(--vg-white) !important;
  transform: rotate(90deg);
}

/* Sub-menus */
.page-sidebar .page-sidebar-menu .sub-menu {
  background: var(--vg-sidebar-sub) !important;
  padding: 4px 0 !important;
}

.page-sidebar .page-sidebar-menu .sub-menu > li > a {
  color: rgba(255, 255, 255, 0.6) !important;
  background: transparent !important;
  padding: 8px 20px 8px 48px !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  border-left: 3px solid transparent !important;
  transition: all var(--vg-transition) !important;
}

.page-sidebar .page-sidebar-menu .sub-menu > li > a:hover,
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a {
  color: var(--vg-white) !important;
  background: rgba(115, 103, 240, 0.10) !important;
  border-left-color: var(--vg-primary) !important;
}

/* Sidebar separator */
.page-sidebar .page-sidebar-menu li.sidebar-toggler-wrapper,
.page-sidebar .page-sidebar-menu li.sidebar-search-wrapper {
  background: transparent !important;
}

/* Sidebar closed / icon-only state */
.page-sidebar-closed .page-sidebar {
  width: 45px !important;
}

.page-sidebar-closed .page-sidebar .page-sidebar-menu > li > a {
  padding: 10px 0 !important;
  justify-content: center !important;
  border-left: none !important;
  border-left-width: 0 !important;
}

.page-sidebar-closed .page-sidebar .page-sidebar-menu > li > a i {
  margin-right: 0 !important;
  width: 45px !important;
  text-align: center !important;
  font-size: 16px !important;
}

.page-sidebar-closed .page-sidebar .page-sidebar-menu > li > a .title,
.page-sidebar-closed .page-sidebar .page-sidebar-menu > li > a .arrow,
.page-sidebar-closed .page-sidebar .page-sidebar-menu > li > a .badge {
  display: none !important;
}

.page-sidebar-closed .page-sidebar .page-logo {
  width: 45px !important;
  padding: 0 !important;
  justify-content: center !important;
}

.page-sidebar-closed .page-sidebar .page-logo span {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════
   E. PAGE CONTENT AREA
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   GAP ELIMINATION — Nuclear layout reset
   Root cause: .page-sidebar-wrapper (float:right) still claims
   horizontal block space even when .page-sidebar is position:fixed.
   This shifts .page-content-wrapper right unexpectedly.
   Fix: collapse the wrapper div to zero, let the fixed sidebar
   appear at left:0 independently.
   ══════════════════════════════════════════════════════════════ */
html,
body {
  height: 100% !important;
  overflow-x: hidden !important;
}

/* Zero all container padding/margin — no inherited left spacing */
.page-wrapper,
.page-container,
.page-body {
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Sidebar wrapper: collapse to zero — sidebar is position:fixed anyway ── */
.page-sidebar-wrapper {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  float: right !important;   /* keep float so it stays out of block flow */
}

/* ── Content wrapper: pushed right by exactly sidebar width ── */
.page-content-wrapper {
  margin-left: 215px !important;   /* explicit px — no CSS var dependency */
  width: auto !important;          /* override layout.min.css width:100% — prevents right overflow */
  padding: 0 !important;
  float: none !important;
  display: block !important;
  transition: margin-left var(--vg-transition);
}

/* Sidebar collapsed (icon mode) */
.page-sidebar-closed .page-content-wrapper {
  margin-left: 45px !important;
  width: auto !important;
}

/* ── Page content inner: top offset + symmetric padding ── */
.page-content {
  padding: 20px !important;
  background: var(--vg-bg) !important;
  min-height: calc(100vh - var(--vg-header-h) - 40px);
  margin-top: var(--vg-header-h) !important;
  margin-left: 0 !important;
}

/* Remove max-height on every textarea so they grow freely */
textarea,
textarea.form-control {
  max-height: none !important;
}


/* ══════════════════════════════════════════════════════════════
   F. PORTLET / CARDS
   ══════════════════════════════════════════════════════════════ */
.portlet {
  background: var(--vg-white) !important;
  border-radius: var(--vg-radius) !important;
  border: 1px solid var(--vg-border) !important;
  box-shadow: var(--vg-shadow) !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Portlet title — flex layout */
.portlet > .portlet-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--vg-border) !important;
  background: transparent !important;
  border-radius: var(--vg-radius) var(--vg-radius) 0 0 !important;
  min-height: 48px !important;
}

.portlet > .portlet-title .caption {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--vg-text) !important;
  line-height: 1.4 !important;
}

.portlet > .portlet-title .caption i {
  color: var(--vg-primary) !important;
  font-size: 15px !important;
}

.portlet > .portlet-title .caption .caption-subject {
  font-size: 14px !important;
  font-weight: 600 !important;
}

.portlet > .portlet-title .tools {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.portlet > .portlet-title .tools > a {
  color: var(--vg-muted) !important;
  font-size: 13px !important;
  padding: 4px 6px !important;
  border-radius: 4px !important;
  transition: all var(--vg-transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.portlet > .portlet-title .tools > a:hover {
  color: var(--vg-primary) !important;
  background: var(--vg-primary-lt) !important;
}

.portlet > .portlet-title .actions {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
}

/* Portlet body */
.portlet > .portlet-body {
  padding: 20px !important;
  border-radius: 0 0 var(--vg-radius) var(--vg-radius) !important;
}

/* Light portlet variant */
.portlet.light {
  background: var(--vg-white) !important;
  border: 1px solid var(--vg-border) !important;
}

.portlet.light > .portlet-title {
  border-bottom: 1px solid var(--vg-border) !important;
}

/* Portlet border-color accents */
.portlet.blue > .portlet-title   { border-top: 3px solid var(--vg-primary) !important; border-radius: var(--vg-radius) var(--vg-radius) 0 0 !important; }
.portlet.green > .portlet-title  { border-top: 3px solid var(--vg-success) !important; border-radius: var(--vg-radius) var(--vg-radius) 0 0 !important; }
.portlet.red > .portlet-title    { border-top: 3px solid var(--vg-danger) !important;  border-radius: var(--vg-radius) var(--vg-radius) 0 0 !important; }
.portlet.yellow > .portlet-title { border-top: 3px solid var(--vg-warning) !important; border-radius: var(--vg-radius) var(--vg-radius) 0 0 !important; }


/* ══════════════════════════════════════════════════════════════
   G. PAGE BREADCRUMB
   ══════════════════════════════════════════════════════════════ */
.page-bar {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 0 16px 0 !important;
}

.page-breadcrumb {
  background: transparent !important;
  padding: 0 !important;
}

.page-breadcrumb > li > a,
.page-breadcrumb > li {
  color: var(--vg-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.page-breadcrumb > li.active,
.page-breadcrumb > li > a:hover {
  color: var(--vg-primary) !important;
}

.page-breadcrumb > li + li::before {
  color: var(--vg-border) !important;
}

.page-title {
  color: var(--vg-text) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}


/* ══════════════════════════════════════════════════════════════
   H. BUTTONS
   ══════════════════════════════════════════════════════════════ */
.btn {
  font-family: 'Poppins', 'Roboto', sans-serif !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  padding: 7px 16px !important;
  transition: all var(--vg-transition) !important;
  border: 1px solid transparent !important;
  letter-spacing: 0.2px;
  line-height: 1.5 !important;
}

/* Primary */
.btn-primary {
  background: var(--vg-primary) !important;
  border-color: var(--vg-primary) !important;
  color: var(--vg-white) !important;
  box-shadow: 0 4px 12px rgba(115, 103, 240, 0.35) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--vg-primary-dk) !important;
  border-color: var(--vg-primary-dk) !important;
  box-shadow: 0 4px 18px rgba(115, 103, 240, 0.50) !important;
}

/* Success */
.btn-success {
  background: var(--vg-success) !important;
  border-color: var(--vg-success) !important;
  color: var(--vg-white) !important;
  box-shadow: 0 4px 12px rgba(40, 199, 111, 0.30) !important;
}
.btn-success:hover,
.btn-success:focus {
  background: #22a85e !important;
  border-color: #22a85e !important;
}

/* Danger */
.btn-danger {
  background: var(--vg-danger) !important;
  border-color: var(--vg-danger) !important;
  color: var(--vg-white) !important;
  box-shadow: 0 4px 12px rgba(234, 84, 85, 0.30) !important;
}
.btn-danger:hover,
.btn-danger:focus {
  background: #d43b3c !important;
  border-color: #d43b3c !important;
}

/* Warning */
.btn-warning {
  background: var(--vg-warning) !important;
  border-color: var(--vg-warning) !important;
  color: var(--vg-white) !important;
  box-shadow: 0 4px 12px rgba(255, 159, 67, 0.30) !important;
}
.btn-warning:hover,
.btn-warning:focus {
  background: #e68e35 !important;
  border-color: #e68e35 !important;
}

/* Info */
.btn-info {
  background: var(--vg-info) !important;
  border-color: var(--vg-info) !important;
  color: var(--vg-white) !important;
  box-shadow: 0 4px 12px rgba(0, 207, 232, 0.30) !important;
}
.btn-info:hover,
.btn-info:focus {
  background: #00b8cf !important;
  border-color: #00b8cf !important;
}

/* Default */
.btn-default {
  background: var(--vg-white) !important;
  border-color: var(--vg-border) !important;
  color: var(--vg-text) !important;
  box-shadow: none !important;
}
.btn-default:hover,
.btn-default:focus {
  background: var(--vg-bg) !important;
  border-color: var(--vg-muted) !important;
  color: var(--vg-text) !important;
}

/* Outline variants */
.btn-outline-primary {
  background: transparent !important;
  border-color: var(--vg-primary) !important;
  color: var(--vg-primary) !important;
}
.btn-outline-primary:hover {
  background: var(--vg-primary) !important;
  color: var(--vg-white) !important;
}

/* Sizes */
.btn-sm {
  font-size: 12px !important;
  padding: 5px 12px !important;
  border-radius: 5px !important;
}
.btn-xs {
  font-size: 11px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
}
.btn-lg {
  font-size: 15px !important;
  padding: 10px 22px !important;
  border-radius: 7px !important;
}

/* Icon button */
.btn-icon {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
}
.btn-icon.btn-sm {
  width: 26px !important;
  height: 26px !important;
  border-radius: 4px !important;
}


/* ══════════════════════════════════════════════════════════════
   I. FORMS — CRITICAL
   ══════════════════════════════════════════════════════════════ */
.form-control {
  height: 36px !important;
  border-radius: 6px !important;
  border: 1px solid var(--vg-border) !important;
  color: var(--vg-text) !important;
  background: var(--vg-white) !important;
  font-family: 'Poppins', 'Roboto', sans-serif !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
  transition: border-color var(--vg-transition), box-shadow var(--vg-transition) !important;
  box-shadow: none !important;
}

.form-control:focus {
  border-color: var(--vg-primary) !important;
  box-shadow: 0 0 0 3px rgba(115, 103, 240, 0.15) !important;
  outline: 0 !important;
}

.form-control:disabled,
.form-control[readonly] {
  background: var(--vg-bg) !important;
  color: var(--vg-muted) !important;
  cursor: not-allowed;
}

textarea.form-control {
  height: auto !important;
  min-height: 80px !important;
  resize: vertical;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.form-group {
  margin-bottom: 16px !important;
  width: 100% !important;             /* ensure every form group fills its grid cell */
}

/* Form controls fill their container — no narrow inline widths */
.form-group .form-control,
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.form-group select,
.form-group textarea {
  width: 100% !important;
}

/* ── Standalone labels ONLY — not checkbox/radio ── */
.form-group > label:not(.checkbox):not(.radio):not(.checkbox-inline):not(.radio-inline):not([class*="make-switch"]),
label.control-label:not(.checkbox):not(.radio):not(.checkbox-inline):not(.radio-inline):not([class*="make-switch"]) {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--vg-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 4px !important;
}

/* ── Checkbox / Radio labels — must NOT be uppercase ── */
.checkbox label,
.radio label,
.checkbox-inline,
.radio-inline {
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--vg-text) !important;
  cursor: pointer !important;
}

/* ── Input groups ── */
.input-group-addon {
  background: var(--vg-bg) !important;
  border: 1px solid var(--vg-border) !important;
  color: var(--vg-muted) !important;
  border-radius: 6px !important;
  font-size: 13px !important;
}

.input-group .form-control:first-child {
  border-radius: 6px 0 0 6px !important;
}
.input-group .form-control:last-child {
  border-radius: 0 6px 6px 0 !important;
}
.input-group-addon:first-child {
  border-radius: 6px 0 0 6px !important;
  border-right: 0 !important;
}
.input-group-addon:last-child {
  border-radius: 0 6px 6px 0 !important;
  border-left: 0 !important;
}

/* ── Bootstrap-select plugin ── */
.bootstrap-select .btn.dropdown-toggle,
.bootstrap-select > .dropdown-toggle.btn-default {
  height: 36px !important;
  border-radius: 6px !important;
  border: 1px solid var(--vg-border) !important;
  background: var(--vg-white) !important;
  color: var(--vg-text) !important;
  font-size: 13px !important;
  padding: 6px 30px 6px 12px !important;
  box-shadow: none !important;
  font-family: 'Poppins', 'Roboto', sans-serif !important;
  transition: border-color var(--vg-transition), box-shadow var(--vg-transition) !important;
}

.bootstrap-select.open > .dropdown-toggle,
.bootstrap-select .btn.dropdown-toggle:focus {
  border-color: var(--vg-primary) !important;
  box-shadow: 0 0 0 3px rgba(115, 103, 240, 0.15) !important;
  outline: 0 !important;
}

.bootstrap-select .dropdown-menu {
  background: var(--vg-white) !important;
  border: 1px solid var(--vg-border) !important;
  border-radius: 6px !important;
  box-shadow: var(--vg-shadow-md) !important;
  padding: 6px !important;
  font-size: 13px !important;
}

.bootstrap-select .dropdown-menu > li > a {
  border-radius: 5px !important;
  color: var(--vg-text) !important;
  padding: 6px 10px !important;
}

.bootstrap-select .dropdown-menu > li > a:hover,
.bootstrap-select .dropdown-menu > li.active > a {
  background: var(--vg-primary-lt) !important;
  color: var(--vg-primary) !important;
}

.bootstrap-select .dropdown-menu > li.selected > a {
  background: var(--vg-primary) !important;
  color: var(--vg-white) !important;
}

/* ── Select2 ── */
.select2-container .select2-choice,
.select2-container-multi .select2-choices {
  border: 1px solid var(--vg-border) !important;
  border-radius: 6px !important;
  background: var(--vg-white) !important;
  box-shadow: none !important;
  min-height: 36px !important;
}

.select2-drop-active {
  border: 1px solid var(--vg-primary) !important;
  box-shadow: 0 0 0 3px rgba(115, 103, 240, 0.15) !important;
}

/* ── Form validation states ── */
.has-success .form-control { border-color: var(--vg-success) !important; }
.has-error .form-control   { border-color: var(--vg-danger) !important; }
.has-warning .form-control { border-color: var(--vg-warning) !important; }
.has-success .control-label { color: var(--vg-success) !important; }
.has-error .control-label   { color: var(--vg-danger) !important; }
.has-warning .control-label { color: var(--vg-warning) !important; }

.help-block {
  font-size: 11.5px !important;
  color: var(--vg-muted) !important;
  margin-top: 3px !important;
}
.has-error .help-block { color: var(--vg-danger) !important; }


/* ══════════════════════════════════════════════════════════════
   J. LABEL ACTION ICON TOOLBAR — THE MOST IMPORTANT FIX
   ══════════════════════════════════════════════════════════════ */

/* Full-width labels (e.g. Available VMTAs) become a flex row */
label.control-label.full-width {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  min-height: 28px !important;
  column-gap: 2px !important;
  row-gap: 2px !important;
  width: 100% !important;
  overflow: visible !important;
}

/* First span = label title — takes remaining space */
label.control-label.full-width > span:first-child,
label.control-label.full-width > .available-vmta-user-label,
label.control-label.full-width > .selected-vmta-user-label {
  flex: 1 1 auto !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--vg-muted) !important;
  float: none !important;
}

/* Count badge spans */
label.control-label.full-width .options-sum,
label.control-label.full-width .lines-sum {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: var(--vg-muted) !important;
  margin-left: 4px !important;
  white-space: nowrap !important;
  float: none !important;
  flex-shrink: 0 !important;
}

/* Hide the <br> gap that pushes icons onto second line */
label.control-label.full-width > br {
  display: none !important;
}

/* ── Action icon links — compact inline toolbar ── */
label a.pull-right.tooltips,
label a.tooltips.pull-right,
label.control-label.full-width a[href="javascript:;"],
label.control-label.full-width a[href="javascript:void(0)"] {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  margin-left: 2px !important;   /* was 15px — fix overflow */
  margin-right: 0 !important;
  font-size: 10px !important;
  color: var(--vg-muted) !important;
  background: transparent !important;
  border-radius: 4px !important;
  transition: all 0.15s ease !important;
  vertical-align: middle !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

label a.pull-right.tooltips i,
label a.tooltips.pull-right i,
label.control-label.full-width a[href="javascript:;"] i,
label.control-label.full-width a[href="javascript:void(0)"] i {
  font-size: 10px !important;
  line-height: 1 !important;
}

label a.pull-right.tooltips:hover,
label a.tooltips.pull-right:hover,
label.control-label.full-width a[href="javascript:;"]:hover,
label.control-label.full-width a[href="javascript:void(0)"]:hover {
  color: var(--vg-primary) !important;
  background: var(--vg-primary-lt) !important;
}


/* ══════════════════════════════════════════════════════════════
   K. MULTI-SELECT PANELS / SEND-PROCESS PAGE
   ══════════════════════════════════════════════════════════════ */

/* Allow the first row of panels to scroll horizontally instead of overlapping */
.portlet-body .form-body > .row:first-child,
.portlet-body > .form-body > .row:first-of-type {
  overflow-x: auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  padding-bottom: 6px !important;
}

/* Columns inside that scrollable row — no negative margin interference */
.portlet-body .form-body > .row:first-child > [class*="col-"],
.portlet-body > .form-body > .row:first-of-type > [class*="col-"] {
  min-width: 0 !important;
  flex-shrink: 0 !important;
}

/* Multiple-select lists */
select[multiple].form-control,
select[multiple],
.servers-selection,
.vmtas-selection,
.users-selection,
.groups-selection {
  border: 1px solid var(--vg-border) !important;
  border-radius: 6px !important;
  background: #fafbff !important;
  font-size: 12px !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 4px !important;
}

select[multiple].form-control option,
select[multiple] option {
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  color: var(--vg-text) !important;
  cursor: pointer;
}

select[multiple].form-control option:checked,
select[multiple] option:checked {
  background: var(--vg-primary) !important;
  color: var(--vg-white) !important;
}

select[multiple].form-control option:hover,
select[multiple] option:hover {
  background: var(--vg-primary-lt) !important;
  color: var(--vg-primary) !important;
}

/* Panel containers with inline width styles (18%, 31%, etc.) */
[style*="width: 18%"],
[style*="width:18%"],
[style*="width: 31%"],
[style*="width:31%"] {
  box-sizing: border-box !important;
  padding: 0 6px !important;
  overflow: visible !important;
}


/* ══════════════════════════════════════════════════════════════
   L. TABLES
   ══════════════════════════════════════════════════════════════ */
.table {
  width: 100% !important;
  margin-bottom: 0 !important;
  background: transparent !important;
}

.table > thead > tr > th {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--vg-muted) !important;
  border-bottom: 2px solid var(--vg-border) !important;
  border-top: none !important;
  padding: 10px 14px !important;
  background: var(--vg-bg) !important;
  vertical-align: middle !important;
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: 10px 14px !important;
  vertical-align: middle !important;
  border-top: 1px solid var(--vg-border) !important;
  font-size: 13px !important;
  color: var(--vg-text) !important;
}

.table > tbody > tr:hover > td {
  background: rgba(115, 103, 240, 0.04) !important;
}

.table-striped > tbody > tr:nth-child(odd) > td {
  background: rgba(244, 245, 251, 0.7) !important;
}

.table-striped > tbody > tr:nth-child(odd):hover > td {
  background: rgba(115, 103, 240, 0.04) !important;
}

.table-bordered {
  border: 1px solid var(--vg-border) !important;
  border-radius: 6px !important;
  overflow: hidden;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border: 1px solid var(--vg-border) !important;
}

/* DataTables */
.dataTables_wrapper {
  padding: 0 !important;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  font-size: 12px !important;
  color: var(--vg-muted) !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  height: 32px !important;
  border-radius: 6px !important;
  border: 1px solid var(--vg-border) !important;
  color: var(--vg-text) !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  background: var(--vg-white) !important;
  transition: border-color var(--vg-transition) !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--vg-primary) !important;
  box-shadow: 0 0 0 3px rgba(115, 103, 240, 0.15) !important;
  outline: 0 !important;
}

.dataTables_wrapper .dataTables_info {
  font-size: 12px !important;
  color: var(--vg-muted) !important;
  padding-top: 8px !important;
}

.dataTables_wrapper .dataTables_paginate {
  padding-top: 8px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 5px !important;
  border: 1px solid var(--vg-border) !important;
  color: var(--vg-text) !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  margin: 0 2px !important;
  transition: all var(--vg-transition) !important;
  background: var(--vg-white) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--vg-primary-lt) !important;
  border-color: var(--vg-primary) !important;
  color: var(--vg-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--vg-primary) !important;
  border-color: var(--vg-primary) !important;
  color: var(--vg-white) !important;
  box-shadow: 0 4px 10px rgba(115, 103, 240, 0.35) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--vg-muted) !important;
  opacity: 0.5 !important;
  cursor: default !important;
}


/* ══════════════════════════════════════════════════════════════
   M. BADGES & LABELS
   ══════════════════════════════════════════════════════════════ */
.badge,
.label {
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  padding: 3px 9px !important;
  letter-spacing: 0.3px !important;
}

.badge-primary, .label-primary { background: var(--vg-primary) !important; color: var(--vg-white) !important; }
.badge-success, .label-success { background: var(--vg-success) !important; color: var(--vg-white) !important; }
.badge-danger,  .label-danger  { background: var(--vg-danger) !important;  color: var(--vg-white) !important; }
.badge-warning, .label-warning { background: var(--vg-warning) !important; color: var(--vg-white) !important; }
.badge-info,    .label-info    { background: var(--vg-info) !important;    color: var(--vg-white) !important; }
.badge-default, .label-default { background: var(--vg-border) !important;  color: var(--vg-text) !important; }

/* Light variants */
.badge-primary-lt { background: var(--vg-primary-lt) !important; color: var(--vg-primary) !important; }
.badge-success-lt { background: rgba(40, 199, 111, 0.12) !important; color: var(--vg-success) !important; }
.badge-danger-lt  { background: rgba(234, 84, 85, 0.12) !important;  color: var(--vg-danger) !important; }
.badge-warning-lt { background: rgba(255, 159, 67, 0.12) !important; color: var(--vg-warning) !important; }
.badge-info-lt    { background: rgba(0, 207, 232, 0.12) !important;  color: var(--vg-info) !important; }


/* ══════════════════════════════════════════════════════════════
   N. ALERTS
   ══════════════════════════════════════════════════════════════ */
.alert {
  border: none !important;
  border-radius: var(--vg-radius) !important;
  font-size: 13px !important;
  padding: 14px 18px !important;
  font-weight: 500 !important;
}

.alert-success {
  background: rgba(40, 199, 111, 0.12) !important;
  color: #1a8a4d !important;
}
.alert-danger, .alert-error {
  background: rgba(234, 84, 85, 0.12) !important;
  color: #c23232 !important;
}
.alert-warning {
  background: rgba(255, 159, 67, 0.12) !important;
  color: #b56c10 !important;
}
.alert-info {
  background: rgba(0, 207, 232, 0.12) !important;
  color: #007a8c !important;
}

.alert .close {
  color: inherit !important;
  opacity: 0.5 !important;
  text-shadow: none !important;
}
.alert .close:hover { opacity: 1 !important; }


/* ══════════════════════════════════════════════════════════════
   O. MODALS
   ══════════════════════════════════════════════════════════════ */
.modal-content {
  border: none !important;
  border-radius: var(--vg-radius) !important;
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.18) !important;
  background: var(--vg-white) !important;
}

.modal-header {
  border-bottom: 1px solid var(--vg-border) !important;
  padding: 16px 20px !important;
  border-radius: var(--vg-radius) var(--vg-radius) 0 0 !important;
  background: var(--vg-white) !important;
}

.modal-header .modal-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--vg-text) !important;
}

.modal-header .close {
  color: var(--vg-muted) !important;
  font-size: 22px !important;
  text-shadow: none !important;
  opacity: 0.7 !important;
  margin-top: 0 !important;
  transition: all var(--vg-transition) !important;
}
.modal-header .close:hover { opacity: 1 !important; color: var(--vg-danger) !important; }

.modal-body {
  padding: 20px !important;
}

.modal-footer {
  border-top: 1px solid var(--vg-border) !important;
  padding: 14px 20px !important;
  border-radius: 0 0 var(--vg-radius) var(--vg-radius) !important;
  background: var(--vg-bg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.modal-backdrop {
  background: rgba(28, 32, 62, 0.55) !important;
}

.modal-backdrop.in { opacity: 1 !important; }


/* ══════════════════════════════════════════════════════════════
   P. TOASTR NOTIFICATIONS
   ══════════════════════════════════════════════════════════════ */
#toast-container > div {
  border-radius: var(--vg-radius) !important;
  box-shadow: var(--vg-shadow-md) !important;
  padding: 14px 18px !important;
  font-family: 'Poppins', 'Roboto', sans-serif !important;
  font-size: 13px !important;
  opacity: 0.97 !important;
}

#toast-container .toast-success {
  background: var(--vg-success) !important;
}
#toast-container .toast-error {
  background: var(--vg-danger) !important;
}
#toast-container .toast-warning {
  background: var(--vg-warning) !important;
}
#toast-container .toast-info {
  background: var(--vg-info) !important;
}

#toast-container .toast-title {
  font-weight: 600 !important;
  font-size: 13.5px !important;
}

#toast-container .toast-message {
  font-size: 12.5px !important;
  opacity: 0.92 !important;
}


/* ══════════════════════════════════════════════════════════════
   Q. FOOTER
   ══════════════════════════════════════════════════════════════ */
.page-footer {
  background: var(--vg-white) !important;
  border-top: 1px solid var(--vg-border) !important;
  padding: 14px 24px !important;
  color: var(--vg-muted) !important;
  font-size: 12px !important;
  margin-left: 215px !important;
  transition: margin-left var(--vg-transition) !important;
}

.page-sidebar-closed .page-footer {
  margin-left: 45px !important;
}

.page-footer .page-footer-inner {
  color: var(--vg-muted) !important;
}

.page-footer a {
  color: var(--vg-primary) !important;
}


/* ══════════════════════════════════════════════════════════════
   R. NAV TABS
   ══════════════════════════════════════════════════════════════ */
.nav-tabs {
  border-bottom: 2px solid var(--vg-border) !important;
  margin-bottom: 20px !important;
  background: transparent !important;
}

.nav-tabs > li > a {
  color: var(--vg-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 18px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: all var(--vg-transition) !important;
  margin-bottom: -2px !important;
}

.nav-tabs > li > a:hover {
  color: var(--vg-primary) !important;
  background: transparent !important;
  border-bottom-color: var(--vg-primary-lt) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--vg-primary) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--vg-primary) !important;
  font-weight: 600 !important;
}

/* Tabbable */
.tabbable {
  background: transparent !important;
}

.tab-content {
  padding-top: 4px !important;
}

/* Pills */
.nav-pills > li > a {
  color: var(--vg-muted) !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  font-weight: 500 !important;
  transition: all var(--vg-transition) !important;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover {
  background: var(--vg-primary) !important;
  color: var(--vg-white) !important;
}


/* ══════════════════════════════════════════════════════════════
   S. PROGRESS BARS
   ══════════════════════════════════════════════════════════════ */
.progress {
  height: 8px !important;
  border-radius: 10px !important;
  background: var(--vg-border) !important;
  box-shadow: none !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
}

.progress-bar {
  border-radius: 10px !important;
  background: var(--vg-primary) !important;
  box-shadow: none !important;
  transition: width 0.4s ease !important;
}

.progress-bar-success { background: var(--vg-success) !important; }
.progress-bar-warning { background: var(--vg-warning) !important; }
.progress-bar-danger  { background: var(--vg-danger) !important; }
.progress-bar-info    { background: var(--vg-info) !important; }

.progress-sm { height: 5px !important; }
.progress-lg { height: 14px !important; }


/* ══════════════════════════════════════════════════════════════
   T. DASHBOARD STAT TILES
   ══════════════════════════════════════════════════════════════ */
.dashboard-stat {
  border-radius: var(--vg-radius) !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  cursor: default;
}

.dashboard-stat:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12) !important;
}

.dashboard-stat .visual {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.2;
  font-size: 64px !important;
}

.dashboard-stat .details {
  position: relative;
  z-index: 1;
}

.dashboard-stat .details .number {
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: inherit !important;
}

.dashboard-stat .details .desc {
  font-size: 12px !important;
  opacity: 0.85 !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
}

.dashboard-stat.blue-hoki,
.dashboard-stat.vg-primary {
  background: var(--vg-primary) !important;
  color: var(--vg-white) !important;
  box-shadow: 0 4px 16px rgba(115, 103, 240, 0.30) !important;
}

.dashboard-stat.green-haze,
.dashboard-stat.vg-success {
  background: var(--vg-success) !important;
  color: var(--vg-white) !important;
  box-shadow: 0 4px 16px rgba(40, 199, 111, 0.30) !important;
}

.dashboard-stat.red-sunglo,
.dashboard-stat.vg-danger {
  background: var(--vg-danger) !important;
  color: var(--vg-white) !important;
  box-shadow: 0 4px 16px rgba(234, 84, 85, 0.30) !important;
}

.dashboard-stat.yellow-casablanca,
.dashboard-stat.vg-warning {
  background: var(--vg-warning) !important;
  color: var(--vg-white) !important;
  box-shadow: 0 4px 16px rgba(255, 159, 67, 0.30) !important;
}


/* ══════════════════════════════════════════════════════════════
   U. CUSTOM SCROLLBAR (WebKit)
   ══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--vg-bg);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgba(115, 103, 240, 0.35);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--vg-primary);
}


/* ══════════════════════════════════════════════════════════════
   V. UTILITY CLASSES
   ══════════════════════════════════════════════════════════════ */
/* Text colors */
.text-primary { color: var(--vg-primary) !important; }
.text-success { color: var(--vg-success) !important; }
.text-danger,
.text-error   { color: var(--vg-danger) !important; }
.text-warning { color: var(--vg-warning) !important; }
.text-info    { color: var(--vg-info) !important; }
.text-muted   { color: var(--vg-muted) !important; }
.text-dark    { color: var(--vg-text) !important; }

/* Background colors */
.bg-primary { background: var(--vg-primary) !important; color: var(--vg-white) !important; }
.bg-success { background: var(--vg-success) !important; color: var(--vg-white) !important; }
.bg-danger  { background: var(--vg-danger) !important;  color: var(--vg-white) !important; }
.bg-warning { background: var(--vg-warning) !important; color: var(--vg-white) !important; }
.bg-info    { background: var(--vg-info) !important;    color: var(--vg-white) !important; }
.bg-light   { background: var(--vg-bg) !important; }
.bg-white   { background: var(--vg-white) !important; }

/* MgSolution card utility — use .vg-card for any quick card wrapper */
.vg-card {
  background: var(--vg-white) !important;
  border-radius: var(--vg-radius) !important;
  border: 1px solid var(--vg-border) !important;
  box-shadow: var(--vg-shadow) !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}

/* Spacing helpers */
.mt-0  { margin-top: 0 !important; }
.mt-4  { margin-top: 4px !important; }
.mt-8  { margin-top: 8px !important; }
.mt-12 { margin-top: 12px !important; }
.mt-16 { margin-top: 16px !important; }
.mt-20 { margin-top: 20px !important; }
.mb-0  { margin-bottom: 0 !important; }
.mb-4  { margin-bottom: 4px !important; }
.mb-8  { margin-bottom: 8px !important; }
.mb-12 { margin-bottom: 12px !important; }
.mb-16 { margin-bottom: 16px !important; }
.mb-20 { margin-bottom: 20px !important; }
.p-0   { padding: 0 !important; }
.p-8   { padding: 8px !important; }
.p-16  { padding: 16px !important; }
.p-20  { padding: 20px !important; }

/* Font sizes */
.font-xs  { font-size: 11px !important; }
.font-sm  { font-size: 12px !important; }
.font-md  { font-size: 13.5px !important; }
.font-lg  { font-size: 15px !important; }
.font-xl  { font-size: 18px !important; }

/* Weight */
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }

/* Border radius */
.rounded   { border-radius: var(--vg-radius) !important; }
.rounded-sm { border-radius: 4px !important; }
.rounded-pill { border-radius: 50px !important; }

/* Separator */
.vg-separator {
  border: none !important;
  border-top: 1px solid var(--vg-border) !important;
  margin: 16px 0 !important;
}


/* ══════════════════════════════════════════════════════════════
   W. RESPONSIVE — SIDEBAR COLLAPSE AT 991px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .page-header.navbar .page-logo {
    width: auto !important;
    min-width: 50px !important;
  }

  .page-sidebar {
    width: 0 !important;
    transform: translateX(-100%);
    transition: transform var(--vg-transition), width var(--vg-transition) !important;
  }

  .page-sidebar.open,
  .page-sidebar-open .page-sidebar {
    width: var(--vg-sidebar-w) !important;
    transform: translateX(0) !important;
  }

  .page-content-wrapper {
    margin-left: 0 !important;
  }

  .page-footer {
    margin-left: 0 !important;
  }

  .page-content {
    padding: 16px !important;
  }
}

@media (max-width: 767px) {
  .portlet > .portlet-body {
    padding: 14px !important;
  }

  .portlet > .portlet-title {
    padding: 10px 14px !important;
  }

  .page-content {
    padding: 12px !important;
  }

  .table-responsive {
    border: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   X. PLUGIN OVERRIDES
   ══════════════════════════════════════════════════════════════ */

/* ── Bootstrap-switch ── */
.bootstrap-switch {
  border-radius: 20px !important;
  border: 1px solid var(--vg-border) !important;
  transition: all var(--vg-transition) !important;
}

.bootstrap-switch.bootstrap-switch-on {
  border-color: var(--vg-primary) !important;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
  background: var(--vg-primary) !important;
  color: var(--vg-white) !important;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
  background: var(--vg-success) !important;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger {
  background: var(--vg-danger) !important;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning {
  background: var(--vg-warning) !important;
}

.bootstrap-switch .bootstrap-switch-handle-off {
  background: var(--vg-bg) !important;
  color: var(--vg-muted) !important;
}

.bootstrap-switch .bootstrap-switch-label {
  background: var(--vg-white) !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.12) !important;
}

/* ── CodeMirror ── */
.CodeMirror {
  border: 1px solid var(--vg-border) !important;
  border-radius: 6px !important;
  font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace !important;
  font-size: 13px !important;
  background: #fafbff !important;
  color: var(--vg-text) !important;
}

.CodeMirror-focused,
.CodeMirror.cm-s-default.CodeMirror-focused {
  border-color: var(--vg-primary) !important;
  box-shadow: 0 0 0 3px rgba(115, 103, 240, 0.15) !important;
}

.CodeMirror-scroll {
  min-height: 120px;
}

/* ── WideArea plugin ── */
.widearea-background {
  background: rgba(28, 32, 62, 0.6) !important;
}

.widearea .widearea-textarea {
  border: none !important;
  border-radius: 0 !important;
  background: var(--vg-white) !important;
  color: var(--vg-text) !important;
  font-family: 'Fira Code', 'Consolas', monospace !important;
  font-size: 13px !important;
}

/* ── Panel → card look (for any Bootstrap panel) ── */
.panel {
  border-radius: var(--vg-radius) !important;
  border: 1px solid var(--vg-border) !important;
  box-shadow: var(--vg-shadow) !important;
  overflow: hidden !important;
}

.panel-heading {
  border-bottom: 1px solid var(--vg-border) !important;
  background: var(--vg-bg) !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--vg-text) !important;
}

.panel-body {
  padding: 16px !important;
}

.panel-footer {
  background: var(--vg-bg) !important;
  border-top: 1px solid var(--vg-border) !important;
  padding: 10px 16px !important;
}

.panel-default > .panel-heading { border-left: none !important; }
.panel-primary > .panel-heading { background: var(--vg-primary) !important; color: var(--vg-white) !important; border-color: var(--vg-primary) !important; }
.panel-success > .panel-heading { background: var(--vg-success) !important; color: var(--vg-white) !important; border-color: var(--vg-success) !important; }
.panel-danger  > .panel-heading { background: var(--vg-danger) !important;  color: var(--vg-white) !important; border-color: var(--vg-danger) !important; }
.panel-warning > .panel-heading { background: var(--vg-warning) !important; color: var(--vg-white) !important; border-color: var(--vg-warning) !important; }
.panel-info    > .panel-heading { background: var(--vg-info) !important;    color: var(--vg-white) !important; border-color: var(--vg-info) !important; }

/* ── Tooltip ── */
.tooltip-inner {
  background: var(--vg-sidebar) !important;
  border-radius: 5px !important;
  font-size: 11.5px !important;
  padding: 5px 10px !important;
  font-family: 'Poppins', 'Roboto', sans-serif !important;
}

.tooltip.top    .tooltip-arrow { border-top-color:    var(--vg-sidebar) !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--vg-sidebar) !important; }
.tooltip.left   .tooltip-arrow { border-left-color:   var(--vg-sidebar) !important; }
.tooltip.right  .tooltip-arrow { border-right-color:  var(--vg-sidebar) !important; }

/* ── Popover ── */
.popover {
  border: 1px solid var(--vg-border) !important;
  border-radius: var(--vg-radius) !important;
  box-shadow: var(--vg-shadow-md) !important;
  font-family: 'Poppins', 'Roboto', sans-serif !important;
  font-size: 13px !important;
}

.popover-title {
  background: var(--vg-bg) !important;
  border-bottom: 1px solid var(--vg-border) !important;
  font-weight: 600 !important;
  border-radius: var(--vg-radius) var(--vg-radius) 0 0 !important;
}

/* ── Dropdowns ── */
.dropdown-menu {
  border: 1px solid var(--vg-border) !important;
  border-radius: 6px !important;
  box-shadow: var(--vg-shadow-md) !important;
  padding: 6px !important;
  font-size: 13px !important;
  background: var(--vg-white) !important;
}

.dropdown-menu > li > a {
  border-radius: 5px !important;
  color: var(--vg-text) !important;
  padding: 7px 12px !important;
  transition: all var(--vg-transition) !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--vg-primary-lt) !important;
  color: var(--vg-primary) !important;
}

.dropdown-menu .divider {
  background: var(--vg-border) !important;
  margin: 4px 0 !important;
}


/* ══════════════════════════════════════════════════════════════
   Y. PAGE HEADER TRANSITION (sidebar width transitions)
   ══════════════════════════════════════════════════════════════ */
.page-header.navbar,
.page-sidebar,
.page-content-wrapper,
.page-footer {
  transition-property: width, margin-left, transform !important;
  transition-duration: 0.22s !important;
  transition-timing-function: ease !important;
}


/* ══════════════════════════════════════════════════════════════
   Z. DATA LIST FILTER BOXES
   ══════════════════════════════════════════════════════════════ */
.data-list-checks {
  border: 1px solid var(--vg-border) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: var(--vg-white) !important;
}

.data-list-checks .row {
  border-bottom: 1px solid var(--vg-border) !important;
  margin: 0 !important;
  height: 37px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 10px !important;
  transition: background var(--vg-transition) !important;
}

.data-list-checks .row:last-child {
  border-bottom: none !important;
}

.data-list-checks .row:hover {
  background: rgba(115, 103, 240, 0.04) !important;
}

.data-list-checks .form-group {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.data-list-checks .form-group label {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--vg-text) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  cursor: pointer !important;
}

.data-list-checks .form-group .bootstrap-switch {
  margin: 0 !important;
}


/* ══════════════════════════════════════════════════════════════
   EXTRA: MISC METRONIC COMPATIBILITY
   ══════════════════════════════════════════════════════════════ */

/* Keep Bootstrap float grid untouched */
.row { margin-left: -15px !important; margin-right: -15px !important; }
[class*="col-"] { padding-left: 15px !important; padding-right: 15px !important; }

/* Portlet tabs in portlet title */
.portlet > .portlet-title .nav-tabs {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

.portlet > .portlet-title .nav-tabs > li > a {
  font-size: 12px !important;
  padding: 6px 14px !important;
  border: 1px solid transparent !important;
  border-radius: 5px 5px 0 0 !important;
}

.portlet > .portlet-title .nav-tabs > li.active > a {
  border-color: var(--vg-border) var(--vg-border) var(--vg-white) !important;
  background: var(--vg-white) !important;
  color: var(--vg-primary) !important;
}

/* List groups */
.list-group-item {
  border-color: var(--vg-border) !important;
  color: var(--vg-text) !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  transition: background var(--vg-transition) !important;
}

.list-group-item:first-child { border-radius: 6px 6px 0 0 !important; }
.list-group-item:last-child  { border-radius: 0 0 6px 6px !important; }
.list-group-item.active,
.list-group-item.active:hover {
  background: var(--vg-primary) !important;
  border-color: var(--vg-primary) !important;
  color: var(--vg-white) !important;
}
.list-group-item:hover {
  background: var(--vg-primary-lt) !important;
  color: var(--vg-primary) !important;
}

/* Well */
.well {
  background: var(--vg-bg) !important;
  border: 1px solid var(--vg-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  padding: 16px !important;
}

/* Jumbotron */
.jumbotron {
  background: var(--vg-primary-lt) !important;
  border-radius: var(--vg-radius) !important;
  padding: 30px !important;
}

/* Blockquote */
blockquote {
  border-left: 3px solid var(--vg-primary) !important;
  color: var(--vg-muted) !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  background: var(--vg-primary-lt) !important;
  border-radius: 0 6px 6px 0 !important;
}

/* Code */
code {
  background: var(--vg-primary-lt) !important;
  color: var(--vg-primary) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  font-size: 12px !important;
}

pre {
  background: var(--vg-bg) !important;
  border: 1px solid var(--vg-border) !important;
  border-radius: 6px !important;
  padding: 14px !important;
  color: var(--vg-text) !important;
  font-size: 12.5px !important;
}

/* Separator / HR */
hr {
  border-top: 1px solid var(--vg-border) !important;
  margin: 20px 0 !important;
}

/* Small text */
small, .small {
  font-size: 11.5px !important;
  color: var(--vg-muted) !important;
}

/* Ensure Metronic `.pull-right` and `.pull-left` are NOT broken by flex contexts */
.portlet > .portlet-body .pull-right { float: right !important; }
.portlet > .portlet-body .pull-left  { float: left !important; }

/* Fix: don't let our label flex rules bleed into checkbox/radio wrapper labels */
.checkbox label,
.radio label {
  display: inline-block !important;
  flex: none !important;
  text-transform: none !important;
}

/* Fix: bootstrap-select dropdown z-index */
.bootstrap-select.open .dropdown-menu {
  z-index: 9990 !important;
}

/* Fix: modal z-index layering */
.modal         { z-index: 10050 !important; }
.modal-backdrop { z-index: 10040 !important; }

/* Fix: datepicker above modals */
.datepicker { z-index: 10060 !important; }

/* Fix: select2 above modals */
.select2-drop { z-index: 10060 !important; }

/* ── Input spinners / number inputs ── */
input[type="number"] { appearance: textfield !important; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ── File input ── */
input[type="file"].form-control {
  height: auto !important;
  padding: 5px 12px !important;
  line-height: 1.5 !important;
}

/* ── Range slider ── */
input[type="range"] {
  accent-color: var(--vg-primary);
}


/* ══════════════════════════════════════════════════════════════
   COMPLEX FORM PAGES / SEND-PROCESS
   ══════════════════════════════════════════════════════════════ */

/* 1. Make .portlet-body.form scrollable so inline-width columns
      never cause the portlet itself to overflow */
.portlet > .portlet-body.form {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 2. Tighten Bootstrap 3 grid gutters inside form-body (15px → 6px)
      to reclaim space for narrow viewports */
.form-body > .row,
.form-body .row .row {
  margin-left: -6px !important;
  margin-right: -6px !important;
}
.form-body > .row > [class*="col-"],
.form-body .row .row > [class*="col-"] {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* 3. Prevent columns from collapsing below usable minimums */
.form-body [class*="col-md-1"] { min-width: 90px; }
.form-body [class*="col-md-2"] { min-width: 120px; }
.form-body [class*="col-md-3"] { min-width: 150px; }
.form-body [class*="col-md-4"] { min-width: 180px; }

/* 4. Label action icon COMPACT FIX
      Override the inline style="margin-left: 15px" on icon links inside labels.
      This is the most critical fix — 8 icons × 15px = 120px+ overflow in an 18% wide column. */
label .pull-right.tooltips,
label a.pull-right[href="javascript:;"],
label a.tooltips[href="javascript:;"] {
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 18px !important;
  height: 18px !important;
  margin-left: 2px !important;
  font-size: 10px !important;
  color: var(--vg-muted) !important;
  border-radius: 3px;
  transition: all 0.15s ease;
  vertical-align: middle;
  text-decoration: none !important;
}

label a.pull-right.tooltips:hover,
label a.tooltips[href="javascript:;"]:hover {
  color: var(--vg-primary) !important;
  background: var(--vg-primary-lt) !important;
}

/* Full-width labels: flex row so icons and title stay on one line */
label.control-label.full-width {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  min-height: 26px !important;
  gap: 1px;
  column-gap: 0px;
}

label.control-label.full-width > br {
  display: none !important;
}

label.control-label.full-width > span.options-sum,
label.control-label.full-width > span.lines-sum {
  font-size: 10px !important;
  margin-left: 4px !important;
  color: var(--vg-muted) !important;
  flex-shrink: 0;
}

label.control-label.full-width > span:not(.options-sum):not(.lines-sum),
label.control-label.full-width > .available-vmta-user-label,
label.control-label.full-width > .selected-vmta-user-label {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* 5. Scrollable send-stats and data-lists panels */
#send-stats,
#data-lists {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 6. Data list filter rows (checkbox filter panel) */
.data-list-checks {
  border: 1px solid var(--vg-border) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: var(--vg-white) !important;
}

.data-list-checks > .row {
  display: flex !important;
  align-items: center !important;
  height: 37px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--vg-border) !important;
}

.data-list-checks > .row:last-child {
  border-bottom: none !important;
}

.data-list-checks .form-group {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.data-list-checks .control-label {
  text-transform: none !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--vg-text) !important;
  margin: 0 !important;
}

/* 7. Multiple select lists — better look */
select[multiple].form-control {
  background: #fafbff !important;
  border: 1px solid var(--vg-border) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  padding: 4px !important;
}

select[multiple].form-control option {
  padding: 4px 8px !important;
  border-radius: 4px !important;
  cursor: pointer;
}

select[multiple].form-control option:checked {
  background: var(--vg-primary) linear-gradient(0deg, var(--vg-primary) 0%, var(--vg-primary) 100%) !important;
  color: white !important;
}

/* 8. Bootstrap-select boxes in right panel — fix truncation */
.bootstrap-select > .dropdown-toggle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bootstrap-select .filter-option {
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Section card used in restructured send-process layout */
.vg-section-card {
  background: #fafbff;
  border: 1px solid var(--vg-border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.vg-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--vg-muted);
  margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 2 — Premium UI Enhancements
   ═══════════════════════════════════════════════════════════════ */

/* ── Bootstrap-Select: Enhanced dropdown appearance ── */
.bootstrap-select .btn.dropdown-toggle,
.bootstrap-select > .dropdown-toggle.btn-default {
  height: 36px !important;
  border-radius: 6px !important;
  border: 1px solid #e6e8f0 !important;
  background: #fff !important;
  color: #3d405b !important;
  font-size: 13px !important;
  padding: 6px 30px 6px 12px !important;
  box-shadow: none !important;
  font-family: 'Poppins','Roboto',sans-serif !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
  text-align: left !important;
}
.bootstrap-select.open > .dropdown-toggle,
.bootstrap-select .btn.dropdown-toggle:focus {
  border-color: #7367f0 !important;
  box-shadow: 0 0 0 3px rgba(115,103,240,.12) !important;
  outline: 0 !important;
}
.bootstrap-select .filter-option-inner-inner {
  font-size: 13px !important;
  color: #3d405b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-family: 'Poppins','Roboto',sans-serif !important;
}
.bootstrap-select .bs-placeholder .filter-option-inner-inner {
  color: #b0b4cc !important;
}
/* Caret icon */
.bootstrap-select > .dropdown-toggle::after,
.bootstrap-select .caret {
  color: #8e92b0 !important;
  float: right !important;
  margin-top: 2px !important;
}
/* Dropdown menu */
.bootstrap-select .dropdown-menu {
  background: #fff !important;
  border: 1px solid #e6e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 30px rgba(61,64,91,.12) !important;
  padding: 6px !important;
  font-size: 13px !important;
  margin-top: 3px !important;
}
/* Search box inside dropdown */
.bootstrap-select .bs-searchbox {
  padding: 6px 8px 4px !important;
}
.bootstrap-select .bs-searchbox input {
  border: 1px solid #e6e8f0 !important;
  border-radius: 5px !important;
  padding: 5px 10px !important;
  font-size: 12.5px !important;
  height: 32px !important;
  box-shadow: none !important;
  color: #3d405b !important;
}
.bootstrap-select .bs-searchbox input:focus {
  border-color: #7367f0 !important;
  box-shadow: 0 0 0 2px rgba(115,103,240,.12) !important;
  outline: none !important;
}
/* Options */
.bootstrap-select .dropdown-menu > li > a {
  border-radius: 5px !important;
  color: #3d405b !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.bootstrap-select .dropdown-menu > li > a:hover,
.bootstrap-select .dropdown-menu > li:hover > a {
  background: #ede9fd !important;
  color: #7367f0 !important;
}
.bootstrap-select .dropdown-menu > li.active > a,
.bootstrap-select .dropdown-menu > li.selected > a {
  background: #7367f0 !important;
  color: #fff !important;
}
/* Check icon for multi-select */
.bootstrap-select .dropdown-menu > li.selected > a .check-mark {
  color: #fff !important;
}
/* Divider */
.bootstrap-select .dropdown-menu .divider {
  background: #e6e8f0 !important;
  margin: 4px 0 !important;
}
/* Select all / Deselect all actions */
.bootstrap-select .bs-actionsbox {
  padding: 4px 8px !important;
  border-bottom: 1px solid #e6e8f0 !important;
}
.bootstrap-select .bs-actionsbox .actions-btn {
  font-size: 11px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  border: 1px solid #e6e8f0 !important;
  background: #f8f8fd !important;
  color: #7367f0 !important;
}
.bootstrap-select .bs-actionsbox .actions-btn:hover {
  background: #7367f0 !important;
  color: #fff !important;
  border-color: #7367f0 !important;
}

/* ── Custom scrollbars — global ── */
* { scrollbar-width: thin; scrollbar-color: #d0d3e8 transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d0d3e8; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #7367f0; }

/* ── Form controls — improved placeholder color ── */
.form-control::placeholder { color: #b0b4cc !important; opacity: 1 !important; }
.form-control::-webkit-input-placeholder { color: #b0b4cc !important; }

/* ── Nav tabs — modern pill tabs for header sections ── */
.tabbable .nav-tabs {
  border-bottom: 2px solid #e6e8f0 !important;
  gap: 2px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.tabbable .nav-tabs > li > a {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #8e92b0 !important;
  border-radius: 5px 5px 0 0 !important;
  padding: 6px 14px !important;
  border: 1px solid transparent !important;
  border-bottom: none !important;
  background: transparent !important;
  transition: all .15s ease !important;
  text-decoration: none !important;
}
.tabbable .nav-tabs > li > a:hover {
  color: #7367f0 !important;
  background: #f5f4ff !important;
  border-color: #e6e8f0 !important;
}
.tabbable .nav-tabs > li.active > a,
.tabbable .nav-tabs > li.active > a:hover,
.tabbable .nav-tabs > li.active > a:focus {
  color: #7367f0 !important;
  border-color: #e6e8f0 !important;
  border-bottom-color: #fff !important;
  background: #fff !important;
  font-weight: 700 !important;
}
.tabbable .tab-content {
  border: 1px solid #e6e8f0 !important;
  border-top: none !important;
  border-radius: 0 0 7px 7px !important;
  padding: 12px !important;
  background: #fff !important;
}

/* ── Portlet page title strip ── */
.portlet .portlet-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid #e6e8f0 !important;
  background: linear-gradient(135deg,#fafbff 0%,#f5f4ff 100%) !important;
  border-radius: 10px 10px 0 0 !important;
}
.portlet .portlet-title .caption .caption-subject {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #3d405b !important;
  letter-spacing: 0.5px !important;
}

/* ── MTA/SMTP switcher alignment ── */
.portlet .portlet-title .actions { display: flex; align-items: center; gap: 8px; }

/* ── Textarea widearea button fix ── */
.widearea-button {
  border-radius: 0 0 6px 6px !important;
  background: #f8f8fd !important;
  border: 1px solid #e6e8f0 !important;
  border-top: none !important;
  padding: 4px 8px !important;
}

/* ════════════════════════════════════════════════════════════════
   QUICK-NAV FLOATING ACTION BUTTON
   Override Metronic teal (#36c6d3) → MgSolution purple (#7367f0)
   ════════════════════════════════════════════════════════════════ */
.quick-nav .quick-nav-bg {
  background: #7367f0 !important;
  box-shadow: 0 4px 20px rgba(115, 103, 240, 0.4) !important;
  border-radius: 8px !important;
}

.quick-nav.nav-is-visible .quick-nav-bg {
  border-radius: 10px !important;
  box-shadow: 0 8px 30px rgba(115, 103, 240, 0.35) !important;
}

/* The hamburger trigger icon */
.quick-nav-trigger span,
.quick-nav-trigger span::before,
.quick-nav-trigger span::after {
  background-color: #fff !important;
}

/* Each action item */
.quick-nav ul li a {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: 'Poppins', 'Roboto', sans-serif !important;
  letter-spacing: 0.2px !important;
}

.quick-nav ul li a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 5px !important;
}

.quick-nav ul li a i {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  color: #fff !important;
}

/* ── Scroll-to-top button ── */
.scroll-to-top {
  background: #7367f0 !important;
  border-radius: 8px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 3px 12px rgba(115, 103, 240, 0.4) !important;
  opacity: 0.85 !important;
  transition: all .2s ease !important;
}

.scroll-to-top:hover {
  opacity: 1 !important;
  box-shadow: 0 6px 20px rgba(115, 103, 240, 0.5) !important;
  transform: translateY(-2px) !important;
}

.scroll-to-top > i {
  color: #fff !important;
  font-size: 16px !important;
  opacity: 1 !important;
}

/* ── Bootstrap-switch ON state → purple (override Metronic teal) ── */
.bootstrap-switch .bootstrap-switch-handle-on {
  background: #7367f0 !important;
  color: #fff !important;
}

/* Keep specific variants intact */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger  { background: #ea5455 !important; }
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success { background: #28c76f !important; }
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning { background: #ff9f43 !important; }
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info    { background: #00cfe8 !important; }
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { background: #7367f0 !important; }

/* Switch label (center thumb) */
.bootstrap-switch .bootstrap-switch-label {
  background: #fff !important;
  border-left: 1px solid #e6e8f0 !important;
  border-right: 1px solid #e6e8f0 !important;
}

/* Switch container border */
.bootstrap-switch {
  border-radius: 6px !important;
  border-color: #e6e8f0 !important;
}
.bootstrap-switch.bootstrap-switch-focused {
  border-color: #7367f0 !important;
  box-shadow: 0 0 0 3px rgba(115, 103, 240, 0.15) !important;
}

/* ── Scroller (slimscroll) rail color ── */
.slimScrollBar  { background: #7367f0 !important; border-radius: 10px !important; }
.slimScrollRail { background: #e6e8f0 !important; border-radius: 10px !important; }

/* ── Page footer strip — FULL WIDTH ALIGNMENT ── */

/*
 * Root cause of footer right-side indent:
 * 1. .page-sidebar-wrapper { float: right } — right float not cleared by
 *    Metronic's "clear: left" on the footer, shrinking the footer's block area.
 * 2. display: flex on the footer made ::before/::after clearfix pseudo-elements
 *    into unintended flex items, adding phantom width on the right.
 *
 * Fix:
 * - clear: both removes ALL float influence (left AND right sidebar-wrapper)
 * - display: block + overflow: hidden establishes a proper BFC
 * - width: calc(100% - sidebar) gives explicit matching width to content area
 * - margin-right: 0 / max-width: none remove any right constraint
 * - ::before / ::after nulled so no phantom flex items
 */
.page-footer {
  display: block !important;
  clear: both !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 15px 0 !important;            /* vertical rhythm, no horizontal offset */
  border-top: 1px solid #e6e8f0 !important;
  background: #fff !important;
  text-align: center !important;        /* center footer text */
}

/* Remove Metronic clearfix pseudo-elements — we use overflow:hidden BFC instead */
.page-footer::before,
.page-footer::after {
  content: none !important;
  display: none !important;
}

/* Sidebar-open: explicit px values — no CSS var dependency */
.page-sidebar-fixed .page-footer {
  margin-left: 215px !important;
  width: calc(100% - 215px) !important;
}

/* Sidebar-closed (icon mode) */
.page-sidebar-fixed.page-sidebar-closed .page-footer {
  margin-left: 45px !important;
  width: calc(100% - 45px) !important;
}

/* Footer inner layout — flex for text + button alignment */
.page-footer-inner-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Text — block + center so it sits exactly in the middle */
.page-footer .page-footer-inner {
  display: block !important;
  float: none !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 11.5px !important;
  color: #8e92b0 !important;
  line-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Scroll-to-top: keep it fixed to viewport, not inside footer flow ── */
.scroll-to-top {
  position: fixed !important;   /* always fixed — override nothing from Metronic */
  right: 20px !important;
  bottom: 20px !important;
  display: flex !important;
  width: 36px !important;
  height: 36px !important;
  align-items: center !important;
  justify-content: center !important;
  background: #7367f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 12px rgba(115, 103, 240, 0.4) !important;
  opacity: 0.9 !important;
  z-index: 10001 !important;
  transition: all .2s ease !important;
  /* IMPORTANT: do NOT set margin/padding that could affect footer width */
}

.scroll-to-top:hover {
  opacity: 1 !important;
  box-shadow: 0 6px 20px rgba(115, 103, 240, 0.5) !important;
  transform: translateY(-2px) !important;
}

.scroll-to-top > i {
  color: #fff !important;
  font-size: 16px !important;
  opacity: 1 !important;
}

/* ── Send-process inline borders cleanup ── */
/* Remove stray inline border colors on data-lists and send-stats */
#data-lists,
#send-stats {
  border: 1px solid #e6e8f0 !important;
  border-radius: 8px !important;
  background: #fff !important;
}

/* ── No float leakage — ensure vsp-wrapper is clean ── */
.vsp-wrapper::after,
.vsp-card-body::after,
.vsp-selection-row::after {
  content: none !important;
  display: none !important;
  clear: none !important;
}

/* ── vsp-campaign-row3 overflow fix — allow wrapping on mid screens ── */
@media (max-width: 1400px) {
  .vsp-campaign-row3 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
@media (max-width: 900px) {
  .vsp-campaign-row3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD-STAT2 WIDGETS
   ══════════════════════════════════════════════════════════════ */

.dashboard-stat2 {
  background: var(--vg-white) !important;
  border: 1px solid var(--vg-border) !important;
  border-radius: var(--vg-radius) !important;
  padding: 16px !important;
  margin-bottom: 14px !important;
  transition: box-shadow .2s ease, transform .15s ease !important;
  box-shadow: 0 1px 6px rgba(61,64,91,.06) !important;
}

.dashboard-stat2:hover {
  box-shadow: 0 4px 18px rgba(115,103,240,.13) !important;
  transform: translateY(-2px) !important;
  border-color: rgba(115,103,240,.25) !important;
}

.dashboard-stat2 .display {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.dashboard-stat2 .display .number {
  flex: 1 !important;
}

.dashboard-stat2 .display .number h3 {
  font-size: 22px !important;
  font-weight: 700 !important;
  margin: 0 0 2px 0 !important;
  line-height: 1.2 !important;
  font-family: 'Poppins', 'Roboto', sans-serif !important;
}

.dashboard-stat2 .display .number small {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--vg-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.dashboard-stat2 .display .icon {
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--vg-primary-lt) !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
}

.dashboard-stat2 .display .icon i {
  font-size: 20px !important;
  opacity: 0.85 !important;
}

/* widget-row spacing */
.widget-row {
  margin-bottom: 0 !important;
}

/* Remove the hardcoded border on portlets inside the dashboard */
.page-content-inner .portlet.portlet-fit[style*="border: 1px solid #aaa"] {
  border: 1px solid var(--vg-border) !important;
}

/* ══════════════════════════════════════════════════════════════
   LOGIN PAGE
   ══════════════════════════════════════════════════════════════ */

/* Full-screen video background */
#myVideo {
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  min-width: 100% !important;
  min-height: 100% !important;
  z-index: -1 !important;
  object-fit: cover !important;
}

/* Outer centering container */
.container-loginh1 {
  width: 100% !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 20px !important;
}

/* Card */
.wrap-loginh1 {
  width: 420px !important;
  max-width: 100% !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
  padding: 40px 40px 36px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Logo / title row */
.login .content .form-title {
  text-align: center !important;
  margin-bottom: 28px !important;
}

.login .content .form-title img {
  max-height: 40px !important;
  width: auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Input fields */
.login .content .input-icon {
  border-left: none !important;
  border-radius: 8px !important;
  position: relative !important;
  margin-bottom: 4px !important;
}

.login .content .input-icon > i {
  position: absolute !important;
  top: 50% !important;
  left: 12px !important;
  transform: translateY(-50%) !important;
  color: #b0b4cc !important;
  font-size: 14px !important;
  z-index: 2 !important;
  margin: 0 !important;
}

.login .content .input-icon .form-control {
  border: 1px solid #e6e8f0 !important;
  border-left: 1px solid #e6e8f0 !important;
  border-radius: 8px !important;
  padding: 10px 12px 10px 38px !important;
  height: 42px !important;
  font-size: 13.5px !important;
  font-family: 'Poppins', 'Roboto', sans-serif !important;
  background: #fafbff !important;
  color: #3d405b !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}

.login .content .input-icon .form-control:focus {
  border-color: #7367f0 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(115,103,240,.12) !important;
  outline: none !important;
}

.login .content .input-icon .form-control::placeholder {
  color: #b0b4cc !important;
  font-size: 13px !important;
}

/* Form group spacing */
.login .content .form-group {
  margin-bottom: 16px !important;
}

/* Submit button row */
.login .content .form-actions {
  background: transparent !important;
  border: none !important;
  padding: 8px 0 0 0 !important;
  margin: 0 !important;
  clear: both !important;
}

.login .content .form-actions .btn {
  width: 100% !important;
  height: 42px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  letter-spacing: 0.3px !important;
  background: var(--vg-primary) !important;
  border-color: var(--vg-primary) !important;
  color: #fff !important;
  margin: 0 !important;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease !important;
  box-shadow: 0 4px 14px rgba(115,103,240,.35) !important;
}

.login .content .form-actions .btn:hover,
.login .content .form-actions .btn:focus {
  background: #6254d4 !important;
  border-color: #6254d4 !important;
  box-shadow: 0 6px 20px rgba(115,103,240,.45) !important;
  transform: translateY(-1px) !important;
}

/* Copyright bar at bottom */
.login .copyright {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;
  padding: 10px !important;
  font-size: 12px !important;
  color: rgba(255,255,255,.75) !important;
  background: rgba(0,0,0,.3) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 10 !important;
}

/* Responsive: shrink card on small screens */
@media (max-width: 480px) {
  .wrap-loginh1 {
    padding: 28px 20px 24px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   FIX: Bootstrap-Select — Dropdown width expansion
   Problem: dropdown menus were locked to the narrow button/column
   width (~120 px for col-md-2), clipping long option labels such
   as SEED HOTMAIL ALLEMAGNE or HOTMAIL BELGIQUE.
   Solution: let the menu grow to fit its content (min 220 px),
   and prevent option text from wrapping so the menu stretches
   horizontally instead of collapsing.
   ══════════════════════════════════════════════════════════════ */

/* 1. Dropdown shell: expand beyond button width */
.bootstrap-select.btn-group .dropdown-menu,
.bootstrap-select .dropdown-menu {
  min-width: 220px !important;   /* floor: always readable */
  width: auto   !important;      /* grow to fit longest option */
}

/* 2. Option rows: prevent text from wrapping */
.bootstrap-select .dropdown-menu > li > a,
.bootstrap-select .dropdown-menu > li > a span.text {
  white-space: nowrap !important;
  overflow: visible  !important;
  text-overflow: unset !important;
}

/* 3. Inner scrollable list: match the expanded shell width */
.bootstrap-select .dropdown-menu.inner {
  min-width: 100% !important;
}

/* 4. Search box and action bar: stretch with the menu */
.bootstrap-select .bs-searchbox,
.bootstrap-select .bs-actionsbox,
.bootstrap-select .bs-donebutton {
  min-width: 100% !important;
  box-sizing: border-box !important;
}

/* 5. Keep the dropdown above other elements when open */
.bootstrap-select.open .dropdown-menu {
  z-index: 9999 !important;
}

/* 6. On narrow screens (< 576 px) cap width to 90 vw
      so the dropdown never scrolls off-screen */
@media (max-width: 575px) {
  .bootstrap-select .dropdown-menu {
    max-width: 90vw !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   FIX v2: Bootstrap-Select container:body — overflow unlocking
   Root cause: two ancestors had overflow-x:auto which creates a
   clipping context that traps position:absolute dropdowns even
   at z-index:9999.  With container:'body' the dropdown <ul> is
   teleported to <body>, so parent overflow is irrelevant — but
   we also undo the overflow rules so other absolute elements
   (tooltips, date-pickers, etc.) aren't clipped either.
   ══════════════════════════════════════════════════════════════ */

/* Override the portlet-body.form overflow that was clipping dropdowns */
.portlet > .portlet-body.form {
  overflow: visible !important;
  -webkit-overflow-scrolling: auto !important;
}

/* Override the row:first-child overflow that was also clipping dropdowns.
   Horizontal scroll protection for narrow viewports is handled instead
   by allowing the portlet itself to scroll (overflow:visible on the
   portlet means the page body handles the scroll). */
.portlet-body .form-body > .row:first-child,
.portlet-body > .form-body > .row:first-of-type {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Bootstrap-select: when container:body is used, the dropdown is
   appended to <body> as .bootstrap-select.bs-container — make sure
   it has the right z-index and positioning */
body > .bootstrap-select.bs-container {
  z-index: 99999 !important;
}
body > .bootstrap-select.bs-container .dropdown-menu {
  min-width: 220px !important;
  width: auto   !important;
}
body > .bootstrap-select.bs-container .dropdown-menu > li > a,
body > .bootstrap-select.bs-container .dropdown-menu > li > a span.text {
  white-space: nowrap !important;
  overflow: visible  !important;
  text-overflow: unset !important;
}
body > .bootstrap-select.bs-container .dropdown-menu.inner {
  min-width: 100% !important;
  max-height: 280px !important;
  overflow-y: auto !important;
}
body > .bootstrap-select.bs-container .bs-searchbox,
body > .bootstrap-select.bs-container .bs-actionsbox {
  min-width: 100% !important;
  box-sizing: border-box !important;
}


/* ══════════════════════════════════════════════════════════════
   FIX: Bootstrap-Select double-border / double-frame
   Root cause: .form-control { border:... !important } in modern.css
   overrides bootstrap-select's own .bootstrap-select.form-control
   { border:none } rule, because !important beats specificity.
   Result: the outer wrapper <div> AND the inner <button> both
   render as bordered white boxes — a visible double-frame.
   Fix: strip all visual decoration from the outer wrapper so only
   the inner .dropdown-toggle button is the visible element.
   ══════════════════════════════════════════════════════════════ */

.bootstrap-select.form-control,
.bootstrap-select.btn-group.form-control,
div.bootstrap-select.form-control {
  border:      none        !important;
  background:  transparent !important;
  box-shadow:  none        !important;
  padding:     0           !important;
  height:      auto        !important;  /* let the inner button set the height */
  border-radius: 0         !important;
}