/* ================================================
   MOVIN Design System — Admin Dashboard Theme
   Version: 1.2 — Dark + Light Mode
   Dark:  bg #0A0A0A  cards #111111  accent #8B00FF
   Light: bg #F5F7FA  cards #FFFFFF  accent #8B00FF
   ================================================ */

/* ===============================================================
   0. MOVIN LIGHT MODE
      Applies when html does NOT have .dark-layout class
      Clean white + Purple accent — still feels MOVIN
   =============================================================== */

/* ── Body & Layout ── */
html:not(.dark-layout) body,
html:not(.dark-layout) .wrapper,
html:not(.dark-layout) .app-content,
html:not(.dark-layout) .content-wrapper,
html:not(.dark-layout) .content-body,
html:not(.dark-layout) .content-area-wrapper {
  background-color: #F5F7FA !important;
  color: #374151 !important;
}
html:not(.dark-layout) { background: #F5F7FA !important; }

/* ── Cards ── */
html:not(.dark-layout) .card,
html:not(.dark-layout) .card-statistics,
html:not(.dark-layout) .card-transaction {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
  color: #374151 !important;
}
html:not(.dark-layout) .card:hover {
  box-shadow: 0 6px 30px rgba(139,0,255,0.15) !important;
  border-color: rgba(139,0,255,0.25) !important;
}
html:not(.dark-layout) .card-header {
  background: transparent !important;
  border-bottom: 1px solid #E5E7EB !important;
}
html:not(.dark-layout) .card-body  { color: #374151 !important; }
html:not(.dark-layout) .card-footer {
  background: transparent !important;
  border-top: 1px solid #E5E7EB !important;
}

/* ── Card title in light ── */
html:not(.dark-layout) .card-title,
html:not(.dark-layout) h1,
html:not(.dark-layout) h2,
html:not(.dark-layout) h3,
html:not(.dark-layout) h4,
html:not(.dark-layout) h5,
html:not(.dark-layout) h6,
html:not(.dark-layout) .content-header-title {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}

/* ── Body text ── */
html:not(.dark-layout) p    { color: #4B5563 !important; }
html:not(.dark-layout) small,
html:not(.dark-layout) .text-muted { color: #9CA3AF !important; }

/* ── Links ── */
html:not(.dark-layout) a { color: #374151 !important; }
html:not(.dark-layout) a:hover { color: #8B00FF !important; }

/* ── Sidebar (Light) ── */
html:not(.dark-layout) .main-menu,
html:not(.dark-layout) .main-menu.menu-light {
  background: #FFFFFF !important;
  border-right: 1px solid #E5E7EB !important;
  box-shadow: 2px 0 20px rgba(0,0,0,0.06) !important;
}
html:not(.dark-layout) .main-menu .navbar-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E5E7EB !important;
}
html:not(.dark-layout) .main-menu .brand-text { color: #111111 !important; }
html:not(.dark-layout) .main-menu .navigation .navigation-header span { color: #9CA3AF !important; }
html:not(.dark-layout) .main-menu .navigation li > a {
  color: #374151 !important;
}
html:not(.dark-layout) .main-menu .navigation li > a i,
html:not(.dark-layout) .main-menu .navigation li > a svg {
  color: #9CA3AF !important;
}
html:not(.dark-layout) .main-menu .navigation li > a:hover {
  background: rgba(139,0,255,0.08) !important;
  color: #8B00FF !important;
  transform: translateX(4px) !important;
}
html:not(.dark-layout) .main-menu .navigation li > a:hover i,
html:not(.dark-layout) .main-menu .navigation li > a:hover svg {
  color: #8B00FF !important;
}
html:not(.dark-layout) .main-menu .navigation li.active > a {
  background: linear-gradient(118deg, #8B00FF, #9B30FF) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(139,0,255,0.35) !important;
}
html:not(.dark-layout) .main-menu .navigation li.active > a i,
html:not(.dark-layout) .main-menu .navigation li.active > a svg {
  color: #FFFFFF !important;
}
html:not(.dark-layout) .main-menu .navigation li ul .nav-item > a {
  color: #6B7280 !important;
}
html:not(.dark-layout) .main-menu .navigation li ul .nav-item > a:hover {
  color: #8B00FF !important;
  background: rgba(139,0,255,0.06) !important;
}
html:not(.dark-layout) .main-menu .shadow-bottom {
  background: linear-gradient(180deg, #FFFFFF 0%, transparent 100%) !important;
}

/* ── Navbar (Light) ── */
html:not(.dark-layout) .header-navbar {
  background: rgba(255,255,255,0.92) !important;
  border-bottom: 1px solid #E5E7EB !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
}
html:not(.dark-layout) .header-navbar .nav-link,
html:not(.dark-layout) .header-navbar .ficon {
  color: #374151 !important;
}
html:not(.dark-layout) .header-navbar .nav-link:hover { color: #8B00FF !important; }
html:not(.dark-layout) .header-navbar .user-name { color: #111111 !important; -webkit-text-fill-color: #111111 !important; }
html:not(.dark-layout) .header-navbar .user-status { color: #9CA3AF !important; }

/* ── Dropdowns (Light) ── */
html:not(.dark-layout) .dropdown-menu {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}
html:not(.dark-layout) .dropdown-menu .dropdown-item { color: #374151 !important; }
html:not(.dark-layout) .dropdown-menu .dropdown-item:hover,
html:not(.dark-layout) .dropdown-menu .dropdown-item:focus {
  background: rgba(139,0,255,0.08) !important;
  color: #8B00FF !important;
}
html:not(.dark-layout) .dropdown-menu .dropdown-header { color: #9CA3AF !important; }
html:not(.dark-layout) .dropdown-divider { border-color: #E5E7EB !important; }

/* notification dropdown */
html:not(.dark-layout) .dropdown-menu-media { background: #FFFFFF !important; border-color: #E5E7EB !important; }
html:not(.dark-layout) .dropdown-menu-media .dropdown-menu-header {
  background: linear-gradient(135deg, #2D0066, #4A0099) !important;
}
html:not(.dark-layout) .dropdown-menu-media .dropdown-menu-header h4 { color: #FFFFFF !important; }
html:not(.dark-layout) .dropdown-menu-media .list-item { border-color: #E5E7EB !important; }

/* ── Tables (Light) ── */
html:not(.dark-layout) .table { color: #374151 !important; }
html:not(.dark-layout) .table thead th {
  background: linear-gradient(135deg, #2D0066, #4A0099) !important;
  color: #FFFFFF !important;
  border-bottom-color: #8B00FF !important;
}
html:not(.dark-layout) .table tbody tr { background: #FFFFFF !important; }
html:not(.dark-layout) .table tbody tr:hover { background: rgba(139,0,255,0.04) !important; }
html:not(.dark-layout) .table tbody td {
  color: #374151 !important;
  border-color: #F3F4F6 !important;
}
html:not(.dark-layout) .table-responsive {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
}

/* ── Forms (Light) ── */
html:not(.dark-layout) form label,
html:not(.dark-layout) .form-label,
html:not(.dark-layout) .col-form-label { color: #374151 !important; }

html:not(.dark-layout) .form-control,
html:not(.dark-layout) .form-select {
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  color: #111111 !important;
}
html:not(.dark-layout) .form-control::placeholder { color: #9CA3AF !important; }
html:not(.dark-layout) .form-control:hover,
html:not(.dark-layout) .form-select:hover { border-color: #C4B5FD !important; }
html:not(.dark-layout) .form-control:focus,
html:not(.dark-layout) .form-select:focus {
  background: #FFFFFF !important;
  border-color: #8B00FF !important;
  box-shadow: 0 0 0 3px rgba(139,0,255,0.12) !important;
  color: #111111 !important;
}
html:not(.dark-layout) .input-group-text {
  background: #F9FAFB !important;
  border-color: #D1D5DB !important;
  color: #6B7280 !important;
}
html:not(.dark-layout) input[type="file"] {
  background: #F9FAFB !important;
  border-color: #D1D5DB !important;
  color: #374151 !important;
}

/* Select2 (Light) */
html:not(.dark-layout) .select2-container--default .select2-selection--single,
html:not(.dark-layout) .select2-container--default .select2-selection--multiple {
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  color: #111111 !important;
}
html:not(.dark-layout) .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #111111 !important;
}
html:not(.dark-layout) .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #8B00FF !important;
  box-shadow: 0 0 0 3px rgba(139,0,255,0.12) !important;
}
html:not(.dark-layout) .select2-dropdown {
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
}
html:not(.dark-layout) .select2-search--dropdown .select2-search__field {
  background: #F9FAFB !important;
  border-color: #D1D5DB !important;
  color: #111111 !important;
}
html:not(.dark-layout) .select2-results__option { color: #374151 !important; }
html:not(.dark-layout) .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #8B00FF !important;
  color: #FFFFFF !important;
}

/* BS Stepper (Light) */
html:not(.dark-layout) .bs-stepper {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
}
html:not(.dark-layout) .bs-stepper .bs-stepper-header { border-color: #E5E7EB !important; }
html:not(.dark-layout) .bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-title {
  color: #374151 !important;
}

/* Modal (Light) */
html:not(.dark-layout) .modal-content {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
}
html:not(.dark-layout) .modal-header {
  background: linear-gradient(135deg, #2D0066, #4A0099) !important;
  border-color: #E5E7EB !important;
}
html:not(.dark-layout) .modal-header .modal-title { color: #FFFFFF !important; }
html:not(.dark-layout) .modal-footer {
  background: #F9FAFB !important;
  border-color: #E5E7EB !important;
}

/* Footer (Light) */
html:not(.dark-layout) .footer {
  background: #FFFFFF !important;
  border-top: 1px solid #E5E7EB !important;
  color: #9CA3AF !important;
}
html:not(.dark-layout) .footer a { color: #8B00FF !important; }

/* Breadcrumb (Light) */
html:not(.dark-layout) .content-header-title { color: #111111 !important; -webkit-text-fill-color: #111111 !important; }
html:not(.dark-layout) .breadcrumb { background: transparent !important; }
html:not(.dark-layout) .breadcrumb-item,
html:not(.dark-layout) .breadcrumb-item a { color: #9CA3AF !important; }
html:not(.dark-layout) .breadcrumb-item.active { color: #8B00FF !important; }

/* Avatars (Light) */
html:not(.dark-layout) .avatar { background: rgba(139,0,255,0.1) !important; }
html:not(.dark-layout) .avatar i { color: #8B00FF !important; }
html:not(.dark-layout) .card:hover .avatar { background: linear-gradient(135deg, #8B00FF, #9B30FF) !important; }
html:not(.dark-layout) .card:hover .avatar i,
html:not(.dark-layout) .card:hover .avatar svg { color: #FFFFFF !important; stroke: #FFFFFF !important; }

/* Statistics body (Light) */
html:not(.dark-layout) .statistics-body .d-flex.flex-row:hover {
  background: rgba(139,0,255,0.05) !important;
}
html:not(.dark-layout) .card-text.font-small-3 { color: #9CA3AF !important; }

/* Input-box (Light) */
html:not(.dark-layout) .input-box {
  background: #FFFFFF !important;
  border-color: #D1D5DB !important;
}
html:not(.dark-layout) .input-box input {
  background: #FFFFFF !important;
  color: #111111 !important;
}
html:not(.dark-layout) #container {
  background: #FFFFFF !important;
  border-color: #E5E7EB !important;
}

/* Alerts (Light) */
html:not(.dark-layout) .header-navbar .alert-danger {
  background: rgba(234,84,85,0.08) !important;
  border-color: rgba(234,84,85,0.2) !important;
  color: #ea5455 !important;
}
html:not(.dark-layout) .header-navbar .alert-info {
  background: rgba(139,0,255,0.08) !important;
  border-color: rgba(139,0,255,0.2) !important;
  color: #8B00FF !important;
}

/* Scrollbar (Light) */
html:not(.dark-layout) ::-webkit-scrollbar-track { background: #F5F7FA; }
html:not(.dark-layout) ::-webkit-scrollbar-thumb { background: #D1D5DB; }
html:not(.dark-layout) ::-webkit-scrollbar-thumb:hover { background: #8B00FF; }

/* header navbar shadow (Light) */
html:not(.dark-layout) .header-navbar-shadow {
  background: linear-gradient(180deg, rgba(245,247,250,0.9) 44%, rgba(245,247,250,0.43) 73%, transparent) !important;
}

/* ===============================================================
   CKEditor — Light Mode
   =============================================================== */
html:not(.dark-layout) .cke,
html:not(.dark-layout) .cke_chrome,
html:not(.dark-layout) .cke_reset {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
html:not(.dark-layout) .cke_top,
html:not(.dark-layout) .cke_toolbox,
html:not(.dark-layout) .cke_toolbox_collapser {
  background: #F3F4F6 !important;
  border-bottom: 1px solid #E5E7EB !important;
}
html:not(.dark-layout) .cke_button,
html:not(.dark-layout) .cke_button_on,
html:not(.dark-layout) .cke_button_off {
  background: transparent !important;
  border: none !important;
}
html:not(.dark-layout) .cke_button:hover,
html:not(.dark-layout) .cke_button_on {
  background: rgba(139,0,255,0.1) !important;
  border-radius: 4px !important;
}
html:not(.dark-layout) .cke_button__bold_icon,
html:not(.dark-layout) .cke_button_icon {
  opacity: 0.7 !important;
  filter: none !important;
}
html:not(.dark-layout) .cke_separator,
html:not(.dark-layout) .cke_toolbar_separator {
  border-left-color: #D1D5DB !important;
}
html:not(.dark-layout) .cke_combo_text,
html:not(.dark-layout) .cke_combo_button {
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  color: #374151 !important;
  border-radius: 4px !important;
}
html:not(.dark-layout) .cke_combo_arrow { border-top-color: #6B7280 !important; }
html:not(.dark-layout) .cke_contents {
  background: #FFFFFF !important;
}
html:not(.dark-layout) .cke_bottom,
html:not(.dark-layout) .cke_path,
html:not(.dark-layout) .cke_resizer {
  background: #F3F4F6 !important;
  border-top: 1px solid #E5E7EB !important;
  color: #6B7280 !important;
}
html:not(.dark-layout) .cke_path_item,
html:not(.dark-layout) .cke_path_item:hover {
  color: #8B00FF !important;
}
html:not(.dark-layout) .cke_resizer { border-color: transparent #8B00FF transparent transparent !important; }
html:not(.dark-layout) .cke_dialog_body {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
}
html:not(.dark-layout) .cke_dialog_title {
  background: #F3F4F6 !important;
  color: #111111 !important;
  border-bottom: 1px solid #E5E7EB !important;
  border-radius: 12px 12px 0 0 !important;
}
html:not(.dark-layout) .cke_dialog_footer {
  background: #F9FAFB !important;
  border-top: 1px solid #E5E7EB !important;
}
html:not(.dark-layout) .cke_dialog .cke_label { color: #374151 !important; }
html:not(.dark-layout) .cke_dialog input,
html:not(.dark-layout) .cke_dialog select,
html:not(.dark-layout) .cke_dialog textarea {
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  color: #111111 !important;
  border-radius: 6px !important;
}

/* ===============================================================
   CKEditor — Dark Mode
   =============================================================== */
html.dark-layout .cke,
html.dark-layout .cke_chrome,
html.dark-layout .cke_reset {
  background: #111111 !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
html.dark-layout .cke_top,
html.dark-layout .cke_toolbox,
html.dark-layout .cke_toolbox_collapser {
  background: #1A0033 !important;
  border-bottom: 1px solid #2A2A2A !important;
}
html.dark-layout .cke_button,
html.dark-layout .cke_button_on,
html.dark-layout .cke_button_off {
  background: transparent !important;
  border: none !important;
}
html.dark-layout .cke_button:hover,
html.dark-layout .cke_button_on {
  background: rgba(139,0,255,0.15) !important;
  border-radius: 4px !important;
}
html.dark-layout .cke_button__bold_icon,
html.dark-layout .cke_button_icon {
  opacity: 0.8 !important;
  filter: invert(0.8) !important;
}
html.dark-layout .cke_separator,
html.dark-layout .cke_toolbar_separator {
  border-left-color: #2A2A2A !important;
}
html.dark-layout .cke_combo_text,
html.dark-layout .cke_combo_button {
  background: #1A1A1A !important;
  border: 1px solid #2A2A2A !important;
  color: #E0E0E0 !important;
  border-radius: 4px !important;
}
html.dark-layout .cke_combo_arrow { border-top-color: #888 !important; }
html.dark-layout .cke_contents {
  background: #1A1A1A !important;
}
html.dark-layout .cke_bottom,
html.dark-layout .cke_path,
html.dark-layout .cke_resizer {
  background: #1A0033 !important;
  border-top: 1px solid #2A2A2A !important;
  color: #888 !important;
}
html.dark-layout .cke_path_item,
html.dark-layout .cke_path_item:hover {
  color: #8B00FF !important;
}
html.dark-layout .cke_resizer { border-color: transparent #8B00FF transparent transparent !important; }
html.dark-layout .cke_dialog_body {
  background: #111111 !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 12px !important;
}
html.dark-layout .cke_dialog_title {
  background: #2D0066 !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid #2A2A2A !important;
  border-radius: 12px 12px 0 0 !important;
}
html.dark-layout .cke_dialog_footer {
  background: #0A0A0A !important;
  border-top: 1px solid #2A2A2A !important;
}
html.dark-layout .cke_dialog .cke_label { color: #E0E0E0 !important; }
html.dark-layout .cke_dialog input,
html.dark-layout .cke_dialog select,
html.dark-layout .cke_dialog textarea {
  background: #1A1A1A !important;
  border: 1px solid #2A2A2A !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
}

/* ===============================================================
   Fix custom.css white backgrounds — Dark Mode only
   =============================================================== */
html.dark-layout .input-box {
  background: #1A1A1A !important;
  border-color: #2A2A2A !important;
}
html.dark-layout .input-box .prefix { color: #888 !important; }
html.dark-layout .input-box input {
  background: #1A1A1A !important;
  color: #E0E0E0 !important;
}
html.dark-layout .input-box:focus-within { border-color: #8B00FF !important; }

html.dark-layout #container {
  background: #111111 !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 10px !important;
}

/* Fix cyan/teal tags */
.tag {
  background: rgba(139,0,255,0.15) !important;
  border: 1px solid rgba(139,0,255,0.4) !important;
  color: #C080FF !important;
  border-radius: 100px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
}

/* Fix any btn-info (teal) buttons to MOVIN purple */
.btn-info,
.btn.btn-info {
  background: #8B00FF !important;
  border-color: #8B00FF !important;
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 10px !important;
  box-shadow: 0 0 16px rgba(139,0,255,0.35) !important;
}
.btn-info:hover {
  background: #9B30FF !important;
  box-shadow: 0 0 24px rgba(139,0,255,0.5) !important;
}

/* Fix bootstrap-tagsinput */
.bootstrap-tagsinput {
  background: #1A1A1A !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 10px !important;
  color: #E0E0E0 !important;
  min-width: 200px;
}
.bootstrap-tagsinput .tag {
  background: rgba(139,0,255,0.2) !important;
  border: 1px solid rgba(139,0,255,0.4) !important;
  color: #C080FF !important;
  border-radius: 100px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
}
.bootstrap-tagsinput input {
  background: transparent !important;
  color: #FFFFFF !important;
}

/* ===============================================================
   ITI Phone input dark
   =============================================================== */
.iti__country-list {
  background: #111111 !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 10px !important;
}
.iti__country:hover { background: rgba(139,0,255,0.1) !important; }
.iti__country-name, .iti__dial-code { color: #E0E0E0 !important; }
.iti__selected-flag {
  background: transparent !important;
  border-right: 1px solid #2A2A2A !important;
}

/* ===============================================================
   Nested/Draggable lists (style2.css overrides)
   =============================================================== */
.dd-item > button,
.dd3-item > button { color: #8B00FF !important; background: transparent !important; }
.dd3-content {
  background: #1A1A1A !important;
  border: 1px solid #2A2A2A !important;
  color: #E0E0E0 !important;
  border-radius: 8px !important;
}
.dd3-content:hover { background: rgba(139,0,255,0.08) !important; }

/* ===============================================================
   Statistics body item number color
   =============================================================== */
.statistics-body h3,
.statistics-body .h3 {
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 900 !important;
}

/* ===============================================================
   Prevent white flash on page load / transition
   =============================================================== */
html { background: #0A0A0A !important; }

/* ===============================================================
   Badge notification overrides — keep them purple not primary
   =============================================================== */
.badge-up.bg-danger { background: #8B00FF !important; }
.rounded-pill.bg-danger { background: #ea5455 !important; }

/* ===============================================================
   Force icon colors in light mode
   =============================================================== */
html:not(.dark-layout) .ficon { color: #6B7280 !important; }
html:not(.dark-layout) [data-feather] { color: #6B7280; }

/* Sun icon (light mode indicator) color */
.nav-link-style .ficon { color: #E0E0E0 !important; }

/* === Google Fonts === */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

/* === CSS Variables === */
:root {
  --mv-black:         #0A0A0A;
  --mv-deep-black:    #111111;
  --mv-purple:        #8B00FF;
  --mv-purple-hover:  #9B30FF;
  --mv-dark-purple:   #2D0066;
  --mv-purple-mist:   #4A0099;
  --mv-white:         #FFFFFF;
  --mv-soft-white:    #E0E0E0;
  --mv-muted:         #888888;
  --mv-border:        #2A2A2A;
  --mv-card-bg:       #111111;
  --mv-purple-glow:   rgba(139, 0, 255, 0.35);
  --mv-purple-subtle: rgba(139, 0, 255, 0.12);
}

/* ===============================================================
   1. GLOBAL / BODY
   =============================================================== */
*,
html body,
body {
  font-family: 'Inter', sans-serif !important;
}

/* Restore FontAwesome font so icons render correctly */
.fa,
[class^="fa-"],
[class*=" fa-"] {
  font-family: 'FontAwesome' !important;
}

html,
body,
.wrapper,
.app-content,
.content-wrapper,
.content-body,
.content-area-wrapper {
  background-color: var(--mv-black) !important;
  color: var(--mv-soft-white) !important;
}

/* Dark layout overrides — force MOVIN palette */
html.dark-layout,
.dark-layout body,
body {
  background-color: var(--mv-black) !important;
  color: var(--mv-soft-white) !important;
}

/* Page overlay */
.content-overlay {
  background: var(--mv-black) !important;
}

/* ===============================================================
   2. TYPOGRAPHY
   =============================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title,
.content-header-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--mv-white) !important;
  -webkit-text-fill-color: var(--mv-white) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  letter-spacing: 0.03em;
}

/* accent word highlight — wrap in <span class="mv-accent"> */
.mv-accent {
  color: var(--mv-purple) !important;
  -webkit-text-fill-color: var(--mv-purple) !important;
}

/* body text */
p, span, label, small, td, th, li, a {
  color: var(--mv-soft-white);
}

a {
  color: var(--mv-soft-white) !important;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--mv-purple) !important;
}

/* ===============================================================
   3. MAIN MENU / SIDEBAR — MOVIN Dark Style
   =============================================================== */
.main-menu {
  background: var(--mv-deep-black) !important;
  border: 1px solid var(--mv-border) !important;
  box-shadow: 4px 0 40px rgba(0, 0, 0, 0.6) !important;
  border-radius: 0 24px 24px 0 !important;
  margin: 0 !important;
}

/* Remove both light and dark menu background overrides */
.menu-light,
.menu-dark,
.main-menu.menu-light,
.main-menu.menu-dark {
  background: var(--mv-deep-black) !important;
  box-shadow: 4px 0 40px rgba(0, 0, 0, 0.6) !important;
}

/* Brand area */
.main-menu .navbar-header {
  background: var(--mv-deep-black) !important;
  border-bottom: 1px solid var(--mv-border) !important;
  padding: 20px 16px 16px !important;
}

.main-menu .brand-text {
  color: var(--mv-white) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* toggle icon */
.main-menu .toggle-icon,
.main-menu .collapse-toggle-icon {
  color: var(--mv-purple) !important;
}

/* Shadow bottom separator */
.main-menu .shadow-bottom {
  background: linear-gradient(180deg, var(--mv-deep-black) 0%, transparent 100%) !important;
}

/* ── NAV HEADER LABELS ── */
.main-menu .navigation .navigation-header span {
  font-family: 'Poppins', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: var(--mv-muted) !important;
}
.main-menu .navigation .navigation-header i {
  color: var(--mv-muted) !important;
}

/* ── NAV ITEMS ── */
.main-menu .navigation li > a {
  color: var(--mv-soft-white) !important;
  border-radius: 10px !important;
  margin: 2px 8px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.25s ease !important;
  gap: 10px !important;
}
.main-menu .navigation li > a i,
.main-menu .navigation li > a svg {
  color: var(--mv-muted) !important;
  transition: color 0.25s ease !important;
  width: 18px !important;
  height: 18px !important;
}

/* hover */
.main-menu .navigation li > a:hover,
.menu-light .navigation-main > .nav-item > a:hover,
.menu-dark .navigation-main > .nav-item > a:hover,
.main-menu.menu-light .navigation li > a:hover {
  background: var(--mv-purple-subtle) !important;
  color: var(--mv-white) !important;
  transform: translateX(4px) !important;
}
.main-menu .navigation li > a:hover i,
.main-menu .navigation li > a:hover svg {
  color: var(--mv-purple) !important;
}

/* active */
.main-menu .navigation li.active > a,
.navigation-main > .nav-item.active > a {
  background: linear-gradient(118deg, var(--mv-purple), var(--mv-purple-hover)) !important;
  color: var(--mv-white) !important;
  box-shadow: 0 4px 20px var(--mv-purple-glow) !important;
  border-radius: 10px !important;
}
.main-menu .navigation li.active > a i,
.main-menu .navigation li.active > a svg {
  color: var(--mv-white) !important;
}

/* active left indicator */
.navigation-main > .nav-item.active > a::before {
  background: var(--mv-purple) !important;
}

/* submenu */
.main-menu .navigation li ul {
  background: transparent !important;
}
.main-menu .navigation li ul .nav-item > a {
  font-size: 13px !important;
  color: var(--mv-muted) !important;
  padding-left: 42px !important;
}
.main-menu .navigation li ul .nav-item > a:hover {
  color: var(--mv-white) !important;
  background: var(--mv-purple-subtle) !important;
}
.main-menu .navigation li ul .nav-item.active > a {
  color: var(--mv-purple) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* badge in nav */
.main-menu .navigation li > a .badge {
  background: var(--mv-purple) !important;
  color: var(--mv-white) !important;
}

/* scrollbar */
.main-menu-content::-webkit-scrollbar { width: 4px !important; }
.main-menu-content::-webkit-scrollbar-thumb {
  background: var(--mv-purple) !important;
  border-radius: 10px !important;
}
.main-menu-content::-webkit-scrollbar-track {
  background: transparent !important;
}

/* ===============================================================
   4. TOP NAVBAR
   =============================================================== */
.header-navbar,
.navbar-floating .header-navbar,
nav.header-navbar {
  background: rgba(17, 17, 17, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--mv-border) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
  border-radius: 0 0 20px 20px !important;
}

/* navbar links */
.header-navbar .navbar-container .nav-link,
.header-navbar .nav-link {
  color: var(--mv-soft-white) !important;
}
.header-navbar .nav-link:hover,
.header-navbar .navbar-container .nav-link:hover {
  color: var(--mv-purple) !important;
}

/* user name + role */
.header-navbar .user-name {
  color: var(--mv-white) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
}
.header-navbar .user-status {
  color: var(--mv-muted) !important;
  font-size: 12px !important;
}

/* avatar ring */
.header-navbar .avatar img {
  border: 2px solid var(--mv-purple) !important;
  border-radius: 50% !important;
}

/* feather icons in navbar */
.header-navbar .ficon {
  color: var(--mv-soft-white) !important;
}

/* notification badge */
.header-navbar .badge-up {
  background: var(--mv-purple) !important;
}

/* ── NAVBAR DROPDOWN ── */
.header-navbar .dropdown-menu,
.navbar .dropdown-menu {
  background: var(--mv-deep-black) !important;
  border: 1px solid var(--mv-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6) !important;
}
.header-navbar .dropdown-menu .dropdown-item,
.navbar .dropdown-menu .dropdown-item {
  color: var(--mv-soft-white) !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  margin: 2px 6px !important;
  padding: 10px 14px !important;
  transition: all 0.2s ease !important;
}
.header-navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:hover,
.dark-layout .dropdown-menu .dropdown-item:hover {
  background: var(--mv-purple-subtle) !important;
  color: var(--mv-purple) !important;
}
.header-navbar .dropdown-menu .dropdown-header {
  color: var(--mv-muted) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 11px !important;
}
.dropdown-divider {
  border-color: var(--mv-border) !important;
}

/* notification dropdown */
.dropdown-menu-media {
  background: var(--mv-deep-black) !important;
  border: 1px solid var(--mv-border) !important;
}
.dropdown-menu-media .dropdown-menu-header {
  background: var(--mv-dark-purple) !important;
  border-bottom: 1px solid var(--mv-border) !important;
}
.dropdown-menu-media .dropdown-menu-header h4 {
  color: var(--mv-white) !important;
}
.dropdown-menu-media .list-item {
  border-bottom: 1px solid var(--mv-border) !important;
}
.dropdown-menu-media .dropdown-menu-footer a.btn {
  background: var(--mv-purple) !important;
  border: none !important;
  color: var(--mv-white) !important;
}

/* alerts in navbar */
.header-navbar .alert-danger {
  background: rgba(234, 84, 85, 0.12) !important;
  border: 1px solid rgba(234, 84, 85, 0.25) !important;
  color: #f77 !important;
  border-radius: 20px !important;
}
.header-navbar .alert-info {
  background: var(--mv-purple-subtle) !important;
  border: 1px solid rgba(139, 0, 255, 0.25) !important;
  color: #c880ff !important;
  border-radius: 20px !important;
}

/* ===============================================================
   5. BREADCRUMB
   =============================================================== */
.content-header-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  text-transform: uppercase !important;
  color: var(--mv-white) !important;
  letter-spacing: 0.05em !important;
}

.breadcrumb-wrapper .breadcrumb {
  background: transparent !important;
}
.breadcrumb-item,
.breadcrumb-item a {
  color: var(--mv-muted) !important;
  font-size: 13px !important;
}
.breadcrumb-item.active {
  color: var(--mv-purple) !important;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--mv-border) !important;
}

/* ===============================================================
   6. CARDS
   =============================================================== */
.card,
.card-statistics,
.card-transaction {
  background: var(--mv-card-bg) !important;
  border: 1px solid var(--mv-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.3s ease !important;
  color: var(--mv-soft-white) !important;
}

/* remove the old gradient top border */
.card::before,
.card-statistics::before,
.card-transaction::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--mv-purple), var(--mv-purple-hover)) !important;
  border-radius: 16px 16px 0 0 !important;
  width: 100% !important;
}

.card:hover {
  box-shadow: 0 8px 48px var(--mv-purple-glow) !important;
  border-color: rgba(139, 0, 255, 0.4) !important;
  transform: translateY(-2px) !important;
}
.card:hover .avatar {
  background: linear-gradient(135deg, var(--mv-purple), var(--mv-purple-hover)) !important;
}
.card:hover .avatar i,
.card:hover .avatar svg {
  color: var(--mv-white) !important;
  stroke: var(--mv-white) !important;
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--mv-border) !important;
}
.card-body {
  color: var(--mv-soft-white) !important;
}
.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--mv-border) !important;
}

/* stats number */
.card h3,
.card .h3 {
  color: var(--mv-white) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 900 !important;
  font-size: 2rem !important;
}

/* avatar icon */
.avatar {
  border-radius: 12px !important;
  background: rgba(139, 0, 255, 0.22) !important;
  transition: all 0.3s ease !important;
}
.avatar i,
.avatar svg {
  color: #C080FF !important;
}
.avatar-content {
  color: #C080FF !important;
}

/* ===============================================================
   7. TABLES
   =============================================================== */
.table,
.dark-layout .table {
  color: var(--mv-soft-white) !important;
  border-collapse: separate !important;
  border-spacing: 0 4px !important;
}

.table thead,
.dark-layout .table thead {
  background: var(--mv-dark-purple) !important;
  box-shadow: none !important;
}

.table thead th,
.dark-layout .table thead tr th,
.dark-layout .table .thead tr:not([class*=table-]) th {
  background: var(--mv-dark-purple) !important;
  color: var(--mv-white) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-bottom: 2px solid var(--mv-purple) !important;
  border-top: none !important;
  padding: 14px 16px !important;
  white-space: nowrap !important;
}

.table thead th:not(:last-child)::after {
  background: rgba(139, 0, 255, 0.2) !important;
}

.table thead th.sorting:hover {
  background: rgba(45, 0, 102, 0.8) !important;
  color: var(--mv-purple) !important;
}

.table tbody tr,
.dark-layout .table tbody tr {
  background: var(--mv-card-bg) !important;
  transition: all 0.2s ease !important;
}

.table tbody tr:hover,
.dark-layout .table tbody tr:hover {
  background: rgba(139, 0, 255, 0.07) !important;
  transform: scale(1.001) !important;
}

.table td,
.dark-layout .table .thead tr:not([class*=table-]) td,
.dark-layout .table tbody tr:not([class*=table-]) td {
  color: var(--mv-soft-white) !important;
  border-bottom: 1px solid var(--mv-border) !important;
  vertical-align: middle !important;
  padding: 12px 16px !important;
}

.table-responsive {
  border-radius: 12px !important;
  border: 1px solid var(--mv-border) !important;
  background: var(--mv-card-bg) !important;
}

/* sort icons */
.sort-icons i.active {
  color: var(--mv-purple) !important;
}

/* ===============================================================
   8. BUTTONS
   =============================================================== */
.btn-primary,
form .btn-primary,
.dark-layout .btn-primary {
  background: var(--mv-purple) !important;
  background-image: none !important;
  border: none !important;
  border-color: transparent !important;
  color: var(--mv-white) !important;
  box-shadow: 0 0 20px var(--mv-purple-glow) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 10px !important;
  padding: 10px 22px !important;
  transition: all 0.25s ease !important;
}
.btn-primary:hover,
form .btn-primary:hover {
  background: var(--mv-purple-hover) !important;
  box-shadow: 0 0 30px rgba(155, 48, 255, 0.55) !important;
  transform: translateY(-1px) !important;
  color: var(--mv-white) !important;
}
.btn-primary:active {
  transform: scale(0.98) !important;
}
.btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(139, 0, 255, 0.3) !important;
}

.btn-secondary {
  background: transparent !important;
  border: 1.5px solid var(--mv-white) !important;
  color: var(--mv-white) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-radius: 10px !important;
  transition: all 0.25s ease !important;
}
.btn-secondary:hover {
  border-color: var(--mv-purple) !important;
  color: var(--mv-purple) !important;
  background: var(--mv-purple-subtle) !important;
}

.btn-outline-primary {
  border-color: var(--mv-purple) !important;
  color: var(--mv-purple) !important;
  background: transparent !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-radius: 10px !important;
  transition: all 0.25s ease !important;
}
.btn-outline-primary:hover {
  background: var(--mv-purple) !important;
  color: var(--mv-white) !important;
  box-shadow: 0 0 20px var(--mv-purple-glow) !important;
}

.btn-success {
  background: linear-gradient(135deg, #28c76f, #0ba360) !important;
  border: none !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 10px !important;
  color: var(--mv-white) !important;
}
.btn-danger {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 10px !important;
}

/* ===============================================================
   9. FORMS & INPUTS
   =============================================================== */
html.dark-layout form label,
html.dark-layout .form-label,
html.dark-layout .col-form-label {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--mv-soft-white) !important;
  margin-bottom: 6px !important;
}

html.dark-layout .form-control,
html.dark-layout .form-select,
html.dark-layout textarea.form-control,
html.dark-layout input.form-control {
  background: #1A1A1A !important;
  border: 1px solid var(--mv-border) !important;
  border-radius: 10px !important;
  color: var(--mv-white) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  transition: all 0.25s ease !important;
}
html.dark-layout .form-control::placeholder {
  color: #555 !important;
}
html.dark-layout .form-control:hover,
html.dark-layout .form-select:hover {
  border-color: #444 !important;
}
html.dark-layout .form-control:focus,
html.dark-layout .form-select:focus {
  background: #1A1A1A !important;
  border-color: var(--mv-purple) !important;
  box-shadow: 0 0 0 3px rgba(139, 0, 255, 0.2) !important;
  color: var(--mv-white) !important;
}
.form-control.is-invalid {
  border-color: #ea5455 !important;
  box-shadow: 0 0 0 2px rgba(234, 84, 85, 0.15) !important;
}

html.dark-layout .input-group-text {
  background: #1A1A1A !important;
  border: 1px solid var(--mv-border) !important;
  color: var(--mv-muted) !important;
  border-radius: 10px !important;
}

input[type="file"] {
  background: #1A1A1A !important;
  border: 1px dashed var(--mv-border) !important;
  border-radius: 10px !important;
  color: var(--mv-soft-white) !important;
}
input[type="file"]:hover {
  border-color: var(--mv-purple) !important;
  background: rgba(139, 0, 255, 0.05) !important;
}

/* form switch */
.form-check-input:checked {
  background-color: var(--mv-purple) !important;
  border-color: var(--mv-purple) !important;
}
.form-check-label {
  color: var(--mv-soft-white) !important;
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: #1A1A1A !important;
  border: 1px solid var(--mv-border) !important;
  border-radius: 10px !important;
  color: var(--mv-white) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--mv-white) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #555 !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--mv-purple) !important;
  box-shadow: 0 0 0 3px rgba(139, 0, 255, 0.2) !important;
}
.select2-dropdown {
  background: var(--mv-deep-black) !important;
  border: 1px solid var(--mv-border) !important;
  border-radius: 10px !important;
  z-index: 99999 !important;
}
.select2-search--dropdown .select2-search__field {
  background: #1A1A1A !important;
  border: 1px solid var(--mv-border) !important;
  color: var(--mv-white) !important;
  border-radius: 8px !important;
}
.select2-results__option {
  color: var(--mv-soft-white) !important;
  border-radius: 6px !important;
  margin: 2px 4px !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--mv-purple) !important;
  color: var(--mv-white) !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background: var(--mv-purple-subtle) !important;
  color: var(--mv-purple) !important;
}

/* ===============================================================
   10. BADGES & TAGS
   =============================================================== */
.badge,
.label {
  border-radius: 100px !important;
  padding: 6px 14px !important;
  font-size: 11px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.badge-light-primary,
.badge.bg-light-primary {
  background: var(--mv-purple-subtle) !important;
  color: #C080FF !important;
  border: 1px solid rgba(139, 0, 255, 0.3) !important;
}
.badge-light-success,
.badge.bg-light-success {
  background: rgba(40, 199, 111, 0.12) !important;
  color: #28c76f !important;
}
.badge-light-danger,
.badge.bg-light-danger {
  background: rgba(234, 84, 85, 0.12) !important;
  color: #ea5455 !important;
}
.badge-light-warning,
.badge.bg-light-warning {
  background: rgba(255, 159, 67, 0.12) !important;
  color: #ff9f43 !important;
}
.badge.bg-primary,
.badge-primary {
  background: var(--mv-purple) !important;
  color: var(--mv-white) !important;
}
.badge.bg-danger,
.badge-danger {
  background: #ea5455 !important;
  color: #fff !important;
}
.rounded-pill.badge-light-primary {
  background: var(--mv-purple-subtle) !important;
  color: #C080FF !important;
  border: 1px solid rgba(139, 0, 255, 0.3) !important;
}

/* ===============================================================
   11. ALERTS
   =============================================================== */
.alert {
  border-radius: 12px !important;
  border-width: 1px !important;
}

/* Light mode alerts */
html:not(.dark-layout) .alert-info {
  background: rgba(139, 0, 255, 0.07) !important;
  border-color: rgba(139, 0, 255, 0.25) !important;
  color: #6B00CC !important;
}
html:not(.dark-layout) .alert-danger {
  background: rgba(234, 84, 85, 0.08) !important;
  border-color: rgba(234, 84, 85, 0.25) !important;
  color: #c0392b !important;
}
html:not(.dark-layout) .alert-success {
  background: rgba(40, 199, 111, 0.08) !important;
  border-color: rgba(40, 199, 111, 0.25) !important;
  color: #1a8a4a !important;
}
html:not(.dark-layout) .alert-warning {
  background: rgba(255, 159, 67, 0.08) !important;
  border-color: rgba(255, 159, 67, 0.25) !important;
  color: #b35a00 !important;
}

/* Dark mode alerts */
html.dark-layout .alert-info {
  background: var(--mv-purple-subtle) !important;
  border-color: rgba(139, 0, 255, 0.3) !important;
  color: #C080FF !important;
}
html.dark-layout .alert-danger {
  background: rgba(234, 84, 85, 0.1) !important;
  border-color: rgba(234, 84, 85, 0.3) !important;
  color: #f77 !important;
}
html.dark-layout .alert-success {
  background: rgba(40, 199, 111, 0.1) !important;
  border-color: rgba(40, 199, 111, 0.3) !important;
  color: #28c76f !important;
}
html.dark-layout .alert-warning {
  background: rgba(255, 159, 67, 0.1) !important;
  border-color: rgba(255, 159, 67, 0.3) !important;
  color: #ff9f43 !important;
}

/* ===============================================================
   12. MODALS
   =============================================================== */
.modal-content {
  background: var(--mv-deep-black) !important;
  border: 1px solid var(--mv-border) !important;
  border-radius: 20px !important;
  color: var(--mv-soft-white) !important;
}
.modal-header {
  background: var(--mv-dark-purple) !important;
  border-bottom: 1px solid var(--mv-border) !important;
  border-radius: 20px 20px 0 0 !important;
}
.modal-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--mv-white) !important;
  letter-spacing: 0.05em !important;
}
.modal-footer {
  background: transparent !important;
  border-top: 1px solid var(--mv-border) !important;
}
.btn-close {
  filter: invert(1) !important;
}

/* ===============================================================
   13. BS-STEPPER
   =============================================================== */
.bs-stepper {
  background: var(--mv-card-bg) !important;
  border: 1px solid var(--mv-border) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.bs-stepper .bs-stepper-header {
  border-bottom: 1px solid var(--mv-border) !important;
}
.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-box {
  background: var(--mv-purple-subtle) !important;
  color: var(--mv-purple) !important;
  border-radius: 10px !important;
}
.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-box {
  background: var(--mv-purple) !important;
  color: var(--mv-white) !important;
  box-shadow: 0 3px 12px var(--mv-purple-glow) !important;
}
.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-label .bs-stepper-title {
  color: var(--mv-purple) !important;
}
.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-title {
  color: var(--mv-soft-white) !important;
}
.bs-stepper .bs-stepper-header .line {
  color: var(--mv-border) !important;
}

/* ===============================================================
   14. PAGINATION
   =============================================================== */
.pagination .page-link {
  background: var(--mv-card-bg) !important;
  border: 1px solid var(--mv-border) !important;
  color: var(--mv-soft-white) !important;
  border-radius: 8px !important;
  margin: 0 3px !important;
  transition: all 0.2s ease !important;
}
.pagination .page-link:hover {
  background: var(--mv-purple-subtle) !important;
  border-color: var(--mv-purple) !important;
  color: var(--mv-purple) !important;
}
.pagination .page-item.active .page-link {
  background: var(--mv-purple) !important;
  border-color: var(--mv-purple) !important;
  color: var(--mv-white) !important;
  box-shadow: 0 0 12px var(--mv-purple-glow) !important;
}
.pagination .page-item.disabled .page-link {
  background: var(--mv-card-bg) !important;
  border-color: var(--mv-border) !important;
  color: var(--mv-muted) !important;
}

/* ===============================================================
   15. FOOTER
   =============================================================== */
.footer {
  background: var(--mv-deep-black) !important;
  border-top: 1px solid var(--mv-border) !important;
  color: var(--mv-muted) !important;
  font-size: 13px !important;
}
.footer a {
  color: var(--mv-purple) !important;
  font-weight: 600 !important;
}
.footer a:hover {
  color: var(--mv-purple-hover) !important;
}

/* ===============================================================
   16. SCROLLBAR — Global
   =============================================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--mv-black); }
::-webkit-scrollbar-thumb {
  background: var(--mv-border);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--mv-purple); }

/* ===============================================================
   17. CUSTOMIZER PANEL
   =============================================================== */
.customizer {
  background: var(--mv-deep-black) !important;
  border-left: 1px solid var(--mv-border) !important;
}
.customizer .customizer-header {
  background: var(--mv-dark-purple) !important;
  border-bottom: 1px solid var(--mv-border) !important;
}
.customizer .customizer-header h4 {
  color: var(--mv-white) !important;
}

/* ===============================================================
   18. DARK LAYOUT — FORCE MOVIN ON ALL DARK ELEMENTS
   =============================================================== */
.dark-layout .card,
.dark-layout .card-statistics,
.dark-layout .card-transaction {
  background: var(--mv-card-bg) !important;
  border-color: var(--mv-border) !important;
}

.dark-layout .form-control,
.dark-layout .form-select {
  background: #1A1A1A !important;
  border-color: var(--mv-border) !important;
  color: var(--mv-white) !important;
}

.dark-layout .table thead th,
.dark-layout .table thead tr th {
  background: var(--mv-dark-purple) !important;
  color: var(--mv-white) !important;
}

.dark-layout .dropdown-menu {
  background: var(--mv-deep-black) !important;
  border-color: var(--mv-border) !important;
}

.dark-layout a:hover {
  color: var(--mv-purple) !important;
}

/* light layout — force dark */
.menu-light {
  background: var(--mv-deep-black) !important;
}

/* ===============================================================
   19. STATISTICS BODY ITEMS
   =============================================================== */
.statistics-body .d-flex.flex-row {
  padding: 14px !important;
  border-radius: 12px !important;
  transition: all 0.25s ease !important;
}
.statistics-body .d-flex.flex-row:hover {
  background: var(--mv-purple-subtle) !important;
  transform: translateX(4px) !important;
}

/* card text */
.card-text.font-small-3 {
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  color: var(--mv-muted) !important;
  letter-spacing: 0.05em !important;
}

/* ===============================================================
   20. TOASTR NOTIFICATIONS
   =============================================================== */
#toast-container > div {
  border-radius: 12px !important;
  backdrop-filter: blur(10px) !important;
}

/* Light mode toastr */
html:not(.dark-layout) #toast-container > div {
  border: 1px solid #E5E7EB !important;
}
html:not(.dark-layout) #toast-container .toast-success {
  background: rgba(40, 199, 111, 0.12) !important;
  border-color: rgba(40, 199, 111, 0.4) !important;
  color: #1a8a4a !important;
}
html:not(.dark-layout) #toast-container .toast-error {
  background: rgba(234, 84, 85, 0.1) !important;
  border-color: rgba(234, 84, 85, 0.4) !important;
  color: #c0392b !important;
}
html:not(.dark-layout) #toast-container .toast-info {
  background: rgba(139, 0, 255, 0.08) !important;
  border-color: rgba(139, 0, 255, 0.3) !important;
  color: #6B00CC !important;
}
html:not(.dark-layout) #toast-container .toast-warning {
  background: rgba(255, 159, 67, 0.1) !important;
  border-color: rgba(255, 159, 67, 0.4) !important;
  color: #b35a00 !important;
}
html:not(.dark-layout) #toast-container .toast-title,
html:not(.dark-layout) #toast-container .toast-message {
  color: inherit !important;
}

/* Dark mode toastr */
html.dark-layout #toast-container > div {
  border: 1px solid var(--mv-border) !important;
}
html.dark-layout #toast-container .toast-success {
  background: rgba(40, 199, 111, 0.15) !important;
  border-color: rgba(40, 199, 111, 0.4) !important;
  color: #28c76f !important;
}
html.dark-layout #toast-container .toast-error {
  background: rgba(234, 84, 85, 0.15) !important;
  border-color: rgba(234, 84, 85, 0.4) !important;
  color: #f77 !important;
}
html.dark-layout #toast-container .toast-info {
  background: var(--mv-purple-subtle) !important;
  border-color: rgba(139, 0, 255, 0.4) !important;
  color: #C080FF !important;
}

/* ===============================================================
   21. SWAL2
   =============================================================== */

/* Light mode swal2 */
html:not(.dark-layout) .swal2-popup {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 20px !important;
  color: #374151 !important;
}
html:not(.dark-layout) .swal2-title {
  color: #111111 !important;
  font-family: 'Poppins', sans-serif !important;
  text-transform: uppercase !important;
}
html:not(.dark-layout) .swal2-content,
html:not(.dark-layout) .swal2-html-container {
  color: #4B5563 !important;
}
html:not(.dark-layout) .swal2-cancel {
  background: transparent !important;
  border: 1.5px solid #374151 !important;
  color: #374151 !important;
  border-radius: 10px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* Dark mode swal2 */
html.dark-layout .swal2-popup {
  background: var(--mv-deep-black) !important;
  border: 1px solid var(--mv-border) !important;
  border-radius: 20px !important;
  color: var(--mv-soft-white) !important;
}
html.dark-layout .swal2-title {
  color: var(--mv-white) !important;
  font-family: 'Poppins', sans-serif !important;
  text-transform: uppercase !important;
}
html.dark-layout .swal2-content,
html.dark-layout .swal2-html-container {
  color: var(--mv-soft-white) !important;
}
html.dark-layout .swal2-cancel {
  background: transparent !important;
  border: 1.5px solid var(--mv-white) !important;
  color: var(--mv-white) !important;
  border-radius: 10px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* shared swal2 */
.swal2-confirm {
  background: var(--mv-purple) !important;
  border-radius: 10px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  box-shadow: 0 0 20px var(--mv-purple-glow) !important;
}
.swal2-icon.swal2-warning { border-color: #ff9f43 !important; color: #ff9f43 !important; }
.swal2-icon.swal2-error   { border-color: #ea5455 !important; }
.swal2-icon.swal2-success { border-color: #28c76f !important; }

/* ===============================================================
   22. FLATPICKR DATE PICKER
   =============================================================== */
.flatpickr-calendar {
  background: var(--mv-deep-black) !important;
  border: 1px solid var(--mv-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6) !important;
}
.flatpickr-months,
.flatpickr-weekdays,
span.flatpickr-weekday {
  background: var(--mv-dark-purple) !important;
  color: var(--mv-white) !important;
}
.flatpickr-day {
  color: var(--mv-soft-white) !important;
  border-radius: 8px !important;
}
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: var(--mv-purple-subtle) !important;
  border-color: var(--mv-purple) !important;
  color: var(--mv-purple) !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--mv-purple) !important;
  border-color: var(--mv-purple) !important;
  color: var(--mv-white) !important;
  box-shadow: 0 0 12px var(--mv-purple-glow) !important;
}
.flatpickr-monthDropdown-months,
.numInput {
  background: transparent !important;
  color: var(--mv-white) !important;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: var(--mv-soft-white) !important;
}

/* ===============================================================
   23. HEADER NAVBAR SHADOW
   =============================================================== */
.header-navbar-shadow {
  background: linear-gradient(180deg, rgba(10,10,10,0.9) 44%, rgba(10,10,10,0.43) 73%, transparent) !important;
}

/* ===============================================================
   24. CARD SPECIFIC — FILTER CARDS, ACTION ROWS
   =============================================================== */
.card .d-flex.justify-content-between.align-items-center {
  border-bottom: 1px solid var(--mv-border);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

/* search input filter area */
html.dark-layout .input-group .form-control,
html.dark-layout .filter-component .form-control {
  background: #1A1A1A !important;
  border-color: var(--mv-border) !important;
  color: var(--mv-white) !important;
}

/* ===============================================================
   25. ANIMATIONS
   =============================================================== */
@keyframes mvFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mvGlow {
  0%, 100% { box-shadow: 0 0 12px var(--mv-purple-glow); }
  50%       { box-shadow: 0 0 28px rgba(139, 0, 255, 0.5); }
}

.card {
  animation: mvFadeUp 0.4s ease both;
}

/* Filter cards that sit above a sticky-header table must win the z-index race */
.card.mt-2 {
  position: relative;
  z-index: 10;
}

/* ===============================================================
   26. MISC UTILITIES
   =============================================================== */

/* purple left border accent for important text blocks */
.mv-text-block {
  border-left: 3px solid var(--mv-purple);
  padding-left: 14px;
  background: var(--mv-purple-subtle);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px 12px 14px;
  margin: 12px 0;
}

/* sidenav overlay */
.sidenav-overlay {
  background: rgba(10, 10, 10, 0.7) !important;
}

/* drag target */
.drag-target {
  z-index: 9999998 !important;
}

/* selection text */
::selection {
  background: var(--mv-purple) !important;
  color: var(--mv-white) !important;
}

/* image preview */
#uploadInputPreview {
  border-radius: 12px !important;
  border: 2px solid var(--mv-border) !important;
}

/* card numbers — stat displays */
.font-digit {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 900 !important;
  color: var(--mv-white) !important;
}

/* section divider in forms */
.form-section {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--mv-muted) !important;
  font-size: 11px !important;
}
.form-section::after {
  background: var(--mv-purple) !important;
}

/* toggle icon in dark */
.dark-layout .main-menu .collapse-toggle-icon {
  color: var(--mv-purple) !important;
}

/* image cards */
.card .card-img-top,
.card .card-img {
  border-radius: 16px 16px 0 0 !important;
}

/* transaction items */
.transaction-item {
  border-bottom: 1px solid var(--mv-border) !important;
  transition: all 0.2s ease !important;
}
.transaction-item:hover {
  background: var(--mv-purple-subtle) !important;
  padding-left: 8px !important;
}

/* ---- clock ---- */
#clock {
  color: var(--mv-purple) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
}

/* ===============================================================
   DARK MODE — Global text white + light-bg sections override
   =============================================================== */
html.dark-layout p,
html.dark-layout span,
html.dark-layout label,
html.dark-layout small,
html.dark-layout td,
html.dark-layout th,
html.dark-layout li,
html.dark-layout .form-label,
html.dark-layout .col-form-label,
html.dark-layout .form-check-label,
html.dark-layout .card-text,
html.dark-layout .text-muted {
  color: #D0D0D0 !important;
}
html.dark-layout h1, html.dark-layout h2, html.dark-layout h3,
html.dark-layout h4, html.dark-layout h5, html.dark-layout h6,
html.dark-layout .h1, html.dark-layout .h2, html.dark-layout .h3,
html.dark-layout .h4, html.dark-layout .h5, html.dark-layout .h6 {
  color: #FFFFFF !important;
}

/* Fix light-colored inline sections in dark mode */
html.dark-layout [style*="background: #f"],
html.dark-layout [style*="background:#f"],
html.dark-layout [style*="background-color: #f"],
html.dark-layout .bg-white,
html.dark-layout .bg-light,
html.dark-layout .bg-light-secondary {
  background: #1A1A1A !important;
  border-color: var(--mv-border) !important;
  color: #D0D0D0 !important;
}