@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Manrope:wght@500;600;700;800&display=swap');
@import url('theme-variables.css');

/* Local FontAwesome & LineAwesome Font Face Definitions */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('../plugins/global/fonts/fa-solid-900.woff2') format('woff2'),
       url('../plugins/global/fonts/fa-solid-900.ttf') format('truetype');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../plugins/global/fonts/fa-regular-400.woff2') format('woff2'),
       url('../plugins/global/fonts/fa-regular-400.ttf') format('truetype');
}

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../plugins/global/fonts/fa-brands-400.woff2') format('woff2'),
       url('../plugins/global/fonts/fa-brands-400.ttf') format('truetype');
}

@font-face {
  font-family: 'Line Awesome Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('../plugins/global/fonts/la-solid-900.woff2') format('woff2'),
       url('../plugins/global/fonts/la-solid-900.ttf') format('truetype');
}

.fa-solid, .fas, .fa, .la, .las {
  font-family: 'Font Awesome 5 Free', 'Line Awesome Free' !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
}

.fa-regular, .far, .lar {
  font-family: 'Font Awesome 5 Free', 'Line Awesome Free' !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
}

.fa-brands, .fab, .lab {
  font-family: 'Font Awesome 5 Brands', 'Line Awesome Brands' !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
}

:root {
  --konekt-orange: var(--theme-primary, #FF9800);
  --konekt-orange-hover: var(--theme-primary-hover, #FFB74D);
  --konekt-black: var(--theme-secondary, #1E1E2D);
  --konekt-white: #FFFFFF;
  --konekt-gray-light: var(--theme-bg-body, #F4F6F9);
  --konekt-gray-dark: var(--theme-bg-surface, #14151B);
  --konekt-text-main-light: var(--theme-text-primary, #1E1E2D);
  --konekt-text-muted-light: var(--theme-text-secondary, #5E6278);
  --konekt-border-light: var(--theme-border, #E4E6EF);

  --konekt-text-main-dark: var(--theme-text-primary, #FFFFFF);
  --konekt-text-muted-dark: var(--theme-text-secondary, #A1A5B7);
  --konekt-border-dark: var(--theme-border, rgba(255, 255, 255, 0.08));

  --konekt-success: var(--theme-success, #4CAF50);
  --konekt-warning: var(--theme-warning, #F5A524);
  --konekt-error: var(--theme-danger, #E5484D);

  --bs-secondary-rgb: var(--theme-secondary-rgb, 30, 30, 45);
  --bs-muted-color: var(--theme-text-secondary, #5E6278);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--theme-bg-body);
  color: var(--theme-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .btn, .nav-link, .card-title {
  font-family: 'Manrope', sans-serif !important;
}

/* Light & Dark Modes */
body.dark-version,
body.dark-mode,
body[data-theme="dark"],
html[data-theme="dark"] {
  background-color: var(--theme-bg-body) !important;
  color: var(--theme-text-primary) !important;
}

body.dark-version .card,
body.dark-mode .card,
body[data-theme="dark"] .card {
  background-color: var(--theme-bg-card) !important;
  border: 1px solid var(--theme-border) !important;
  color: var(--theme-text-primary) !important;
}

body.dark-version .table, body.dark-version th, body.dark-version td,
body.dark-mode .table, body.dark-mode th, body.dark-mode td,
body[data-theme="dark"] .table, body[data-theme="dark"] th, body[data-theme="dark"] td {
  color: var(--theme-text-primary) !important;
  border-color: var(--theme-border) !important;
}

body.dark-version .form-control, body.dark-version .form-select,
body.dark-mode .form-control, body.dark-mode .form-select,
body[data-theme="dark"] .form-control, body[data-theme="dark"] .form-select {
  background-color: var(--theme-input-bg) !important;
  border-color: var(--theme-input-border) !important;
  color: var(--theme-input-text) !important;
}

body.dark-version .sidenav,
body.dark-mode .sidenav,
body[data-theme="dark"] .sidenav {
  background-color: var(--theme-bg-surface) !important;
  border-right: 1px solid var(--theme-border) !important;
}

/* Buttons Primary KOnekt — Respecting Fundamental Contrast Rule */
.btn-primary, .bg-gradient-primary, .bg-primary, .btn-konekt {
  background-color: var(--theme-primary) !important;
  background-image: none !important;
  color: var(--theme-on-primary) !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

.btn-primary i, .btn-primary .svg-icon, .btn-primary span, .btn-konekt i {
  color: var(--theme-on-primary) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-konekt:hover, .btn-konekt:focus, .btn-konekt:active {
  background-color: var(--theme-primary-hover) !important;
  color: var(--theme-on-primary) !important;
  box-shadow: 0 4px 14px rgba(var(--theme-primary-rgb), 0.35) !important;
}

.btn-primary:hover i, .btn-primary:focus i, .btn-primary:active i,
.btn-primary:hover span, .btn-primary:focus span, .btn-primary:active span,
.btn-konekt:hover i, .btn-konekt:focus i, .btn-konekt:active i {
  color: var(--theme-on-primary) !important;
}

.btn-outline-primary {
  border: 2px solid var(--theme-primary) !important;
  color: var(--theme-primary) !important;
  background: transparent !important;
  border-radius: 8px !important;
}

.btn-outline-primary:hover {
  background-color: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
}

.btn-outline-primary:hover i {
  color: var(--theme-on-primary) !important;
}

/* Badges */
.badge-konekt-success {
  background-color: rgba(76, 175, 80, 0.15) !important;
  color: var(--konekt-success) !important;
  border: 1px solid var(--konekt-success) !important;
  border-radius: 6px !important;
  padding: 5px 10px;
  font-weight: 600;
  display: inline-block;
}

.badge-konekt-warning {
  background-color: rgba(245, 165, 36, 0.15) !important;
  color: var(--konekt-warning) !important;
  border: 1px solid var(--konekt-warning) !important;
  border-radius: 6px !important;
  padding: 5px 10px;
  font-weight: 600;
  display: inline-block;
}

.badge-konekt-error {
  background-color: rgba(229, 72, 77, 0.15) !important;
  color: var(--konekt-error) !important;
  border: 1px solid var(--konekt-error) !important;
  border-radius: 6px !important;
  padding: 5px 10px;
  font-weight: 600;
  display: inline-block;
}

.badge-konekt-active {
  background-color: rgba(255, 152, 0, 0.15) !important;
  color: var(--konekt-orange) !important;
  border: 1px solid var(--konekt-orange) !important;
  border-radius: 6px !important;
  padding: 5px 10px;
  font-weight: 600;
  display: inline-block;
}

/* Form Inputs & Labels Always Fixed on Top */
.input-group.input-group-outline {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  position: relative !important;
}

/* Keep horizontal layout if input-group contains prepend/append elements without label */
.input-group.input-group-outline:has(> .input-group-text):not(:has(> .form-label)):not(:has(> label)) {
  flex-direction: row !important;
  align-items: stretch !important;
}

.input-group.input-group-outline > .form-label,
.input-group.input-group-outline > label,
.input-group.input-group-static > .form-label,
.input-group.input-group-static > label,
label.form-label,
.form-label {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 0.35rem !important;
  margin-left: 0 !important;
  color: #344767 !important;
  pointer-events: auto !important;
}

body.dark-version .input-group.input-group-outline > .form-label,
body.dark-version .input-group.input-group-outline > label,
body.dark-version .input-group.input-group-static > .form-label,
body.dark-version .input-group.input-group-static > label,
body.dark-version label.form-label,
body.dark-version .form-label {
  color: #e0e0e0 !important;
}

/* Remove Material split-notch pseudo elements */
.input-group.input-group-outline .form-label:before,
.input-group.input-group-outline .form-label:after,
.input-group.input-group-outline label:before,
.input-group.input-group-outline label:after,
.input-group.input-group-outline.is-focused .form-label:before,
.input-group.input-group-outline.is-focused .form-label:after,
.input-group.input-group-outline.is-filled .form-label:before,
.input-group.input-group-outline.is-filled .form-label:after {
  display: none !important;
  content: none !important;
  border: none !important;
}

/* Ensure consistent solid border on form-control */
.input-group.input-group-outline > .form-control {
  width: 100% !important;
  border: 1px solid #d2d6da !important;
  border-radius: 0.375rem !important;
  padding: 0.55rem 0.75rem !important;
  line-height: 1.4 !important;
  background-color: transparent !important;
}

body.dark-version .input-group.input-group-outline > .form-control {
  border-color: var(--theme-input-border) !important;
  background-color: var(--theme-input-bg) !important;
  color: var(--theme-input-text) !important;
}

.input-group.input-group-outline > .form-control:focus,
.input-group.input-group-outline.is-focused > .form-control,
.input-group.input-group-outline.is-focused .form-label+.form-control,
.input-group.input-group-outline.is-filled .form-label+.form-control {
  border-color: var(--theme-primary) !important;
  border-top-color: var(--theme-primary) !important;
  box-shadow: 0 0 0 2px var(--theme-input-focus-ring) !important;
  outline: none !important;
}

.input-group.input-group-outline.is-focused > .form-label,
.input-group.input-group-outline.is-filled > .form-label {
  color: var(--theme-primary) !important;
  font-size: 0.8125rem !important;
  line-height: 1.4 !important;
}

/* Sidebar Styling */
.sidenav .nav-link.active {
  background-color: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
  border-radius: 8px !important;
}

.sidenav .nav-link.active .nav-link-text, .sidenav .nav-link.active i {
  color: var(--theme-on-primary) !important;
}

.card {
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Action Badges in Permissions Matrix */
.badge-action-view {
  background-color: #0284c7 !important;
  color: #fff !important;
  font-size: 0.65rem !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
}
.badge-action-create {
  background-color: #16a34a !important;
  color: #fff !important;
  font-size: 0.65rem !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
}
.badge-action-edit {
  background-color: #ea580c !important;
  color: #fff !important;
  font-size: 0.65rem !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
}
.badge-action-delete {
  background-color: #dc2626 !important;
  color: #fff !important;
  font-size: 0.65rem !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
}

/* Table Hover and Clickable Links */
.table-hover tbody tr:hover {
  background-color: rgba(255, 152, 0, 0.04) !important;
}
.role-name-trigger:hover {
  color: var(--konekt-orange) !important;
}

/* ========================================================
   SOBER & REFINED ENTERPRISE PALETTE (ANTI-RAINBOW GRADIENTS)
   ======================================================== */
.bg-gradient-primary, .bg-gradient-secondary, .bg-gradient-success,
.bg-gradient-info, .bg-gradient-warning, .bg-gradient-danger,
.bg-gradient-dark, .bg-gradient-light {
  background-image: none !important;
}

/* Tone down card header gradients */
.card-header.bg-gradient-dark,
.card-header.bg-gradient-info,
.card-header.bg-gradient-warning,
.card-header.bg-gradient-success,
.card-header.bg-gradient-secondary {
  background-color: #1e293b !important;
  color: #ffffff !important;
}

/* Soft, subtle modern shadows instead of colored glow */
.shadow-primary, .shadow-secondary, .shadow-success,
.shadow-info, .shadow-warning, .shadow-danger, .shadow-dark {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.05) !important;
}

/* Subtle, elegant badges (pill badges with soft tints) */
.badge.bg-gradient-success, .badge.bg-success {
  background-color: #ecfdf5 !important;
  color: #065f46 !important;
  border: 1px solid #a7f3d0 !important;
  font-weight: 600 !important;
}
.badge.bg-gradient-danger, .badge.bg-danger {
  background-color: #fef2f2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca !important;
  font-weight: 600 !important;
}
.badge.bg-gradient-warning, .badge.bg-warning {
  background-color: #fffbeb !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
  font-weight: 600 !important;
}
.badge.bg-gradient-info, .badge.bg-info {
  background-color: #f0f9ff !important;
  color: #075985 !important;
  border: 1px solid #bae6fd !important;
  font-weight: 600 !important;
}
.badge.bg-gradient-secondary, .badge.bg-secondary {
  background-color: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  font-weight: 600 !important;
}
.badge.bg-gradient-dark, .badge.bg-dark {
  background-color: #1e293b !important;
  color: #ffffff !important;
  border: 1px solid #0f172a !important;
  font-weight: 600 !important;
}

/* Dark mode versions for badges */
body.dark-version .badge.bg-gradient-success, body.dark-version .badge.bg-success {
  background-color: rgba(6, 95, 70, 0.25) !important;
  color: #6ee7b7 !important;
  border-color: rgba(110, 231, 183, 0.3) !important;
}
body.dark-version .badge.bg-gradient-danger, body.dark-version .badge.bg-danger {
  background-color: rgba(153, 27, 27, 0.25) !important;
  color: #fca5a5 !important;
  border-color: rgba(252, 165, 165, 0.3) !important;
}
body.dark-version .badge.bg-gradient-warning, body.dark-version .badge.bg-warning {
  background-color: rgba(146, 64, 14, 0.25) !important;
  color: #fcd34d !important;
  border-color: rgba(252, 211, 77, 0.3) !important;
}
body.dark-version .badge.bg-gradient-info, body.dark-version .badge.bg-info {
  background-color: rgba(7, 89, 133, 0.25) !important;
  color: #7dd3fc !important;
  border-color: rgba(125, 211, 252, 0.3) !important;
}
body.dark-version .badge.bg-gradient-secondary, body.dark-version .badge.bg-secondary {
  background-color: rgba(71, 85, 105, 0.25) !important;
  color: #cbd5e1 !important;
  border-color: rgba(203, 213, 225, 0.3) !important;
}

/* Sober KPI Stats Icon Shapes */
.icon.icon-shape {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}
.icon.icon-shape i {
  color: #334155 !important;
}
body.dark-version .icon.icon-shape {
  background-color: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
body.dark-version .icon.icon-shape i {
  color: #e2e8f0 !important;
}

/* ========================================================
   DATATABLES CONTROLS & STYLING
   ======================================================== */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 0.75rem;
}
.dataTables_wrapper .dataTables_length select {
  border: 1px solid #d2d6da;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.8125rem;
  background-color: #fff;
  color: #344767;
  margin: 0 4px;
}
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #d2d6da;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.8125rem;
  background-color: #fff;
  color: #344767;
  margin-left: 6px;
}
.dataTables_wrapper .dataTables_info {
  font-size: 0.75rem;
  color: #64748b;
  padding-top: 0.5rem;
}
.dataTables_wrapper .dataTables_paginate {
  padding-top: 0.5rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 0.75rem !important;
  margin: 0 2px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #334155 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.active,
.dataTables_wrapper .dataTables_paginate .paginate_button.active:hover {
  background: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
  border-color: var(--theme-primary) !important;
  font-weight: 700 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--theme-primary-subtle) !important;
  color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
}

body.dark-version .dataTables_wrapper .dataTables_length select,
body.dark-version .dataTables_wrapper .dataTables_filter input {
  background-color: var(--theme-input-bg) !important;
  border-color: var(--theme-input-border) !important;
  color: var(--theme-input-text) !important;
}
body.dark-version .dataTables_wrapper .dataTables_info {
  color: var(--theme-text-muted) !important;
}
body.dark-version .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--theme-bg-card) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-secondary) !important;
}
body.dark-version .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dark-version .dataTables_wrapper .dataTables_paginate .paginate_button.active {
  background: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
  border-color: var(--theme-primary) !important;
  font-weight: 700 !important;
}
body.dark-version .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(var(--theme-primary-rgb), 0.2) !important;
  color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
}

/* ==========================================================================
   SEVEN HTML FREE THEME INTEGRATION & KONEKT BRANDING
   ========================================================================== */

/* Typography Overrides */
body, .font-text {
  font-family: 'Inter', sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .btn, .nav-link, .menu-link, .fw-bolder, .font-ui {
  font-family: 'Manrope', sans-serif !important;
}

/* Brand Primary Colors & BS Overrides */
:root {
  --kt-primary: var(--theme-primary);
  --kt-primary-active: var(--theme-primary-hover);
  --kt-primary-light: var(--theme-primary-subtle);
  --kt-primary-inverse: var(--theme-on-primary);
  --bs-primary: var(--theme-primary);
  --bs-primary-rgb: var(--theme-primary-rgb);
}

/* Seven Extended Aside Dimensions & Dual Column Layout */
@media (min-width: 992px) {
  .aside .aside-primary {
    width: 86px !important;
    background-color: var(--theme-nav-primary-bg) !important;
    border-right: 1px solid var(--theme-nav-primary-border) !important;
  }

  .aside .aside-secondary {
    background-color: var(--theme-nav-secondary-bg) !important;
    border-right: 1px solid var(--theme-nav-secondary-border) !important;
  }

  .aside .aside-secondary .aside-workspace {
    width: 280px !important;
    padding: 1.5rem 1.25rem !important;
  }

  .aside-secondary-enabled .aside {
    width: 366px !important;
  }

  .aside-secondary-enabled.aside-fixed .wrapper {
    padding-left: 366px !important;
  }

  .aside-secondary-enabled.aside-fixed[data-kt-aside-minimize=on] .aside {
    width: 86px !important;
  }

  .aside-secondary-enabled.aside-fixed[data-kt-aside-minimize=on] .wrapper {
    padding-left: 86px !important;
  }
}

/* Aside Primary Nav Buttons */
.aside-primary .btn-custom {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  color: var(--theme-nav-primary-text) !important;
  background-color: transparent !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.aside-primary .btn-custom:hover {
  background-color: var(--theme-nav-primary-hover-bg) !important;
  color: var(--theme-nav-primary-hover-text) !important;
  transform: translateY(-1px);
}

.aside-primary .btn-custom.active,
.aside-primary .nav-link.btn-custom.active {
  background-color: var(--theme-nav-primary-active-bg) !important;
  color: var(--theme-nav-primary-active-text) !important;
  box-shadow: 0 4px 14px rgba(var(--theme-primary-rgb), 0.4) !important;
}

.aside-primary .btn-custom.active i,
.aside-primary .nav-link.btn-custom.active i {
  color: var(--theme-nav-primary-active-text) !important;
}

/* Secondary Aside Menu Items */
.aside-secondary .menu-link {
  border-radius: 8px !important;
  padding: 10px 14px !important;
  color: var(--theme-nav-item-text) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.aside-secondary .menu-link:hover {
  background-color: var(--theme-nav-item-hover-bg) !important;
  color: var(--theme-nav-item-hover-text) !important;
}

.aside-secondary .menu-link.active {
  background-color: var(--theme-nav-item-active-bg) !important;
  color: var(--theme-nav-item-active-text) !important;
  font-weight: 700 !important;
}

.aside-secondary .menu-link.active .menu-icon i {
  color: var(--theme-nav-item-active-text) !important;
}

.aside-secondary .menu-link.active .badge-circle {
  background-color: var(--theme-nav-item-active-indicator) !important;
}

/* Header Compact Height & Styling */
.header {
  background-color: var(--theme-header-bg) !important;
  border-bottom: 1px solid var(--theme-header-border) !important;
  height: 54px !important;
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
}

@media (min-width: 992px) {
  .header {
    height: 54px !important;
    min-height: 54px !important;
  }
  .header-fixed[data-kt-sticky-header=on] .header {
    height: 54px !important;
    min-height: 54px !important;
  }
  .header-fixed[data-kt-sticky-header=on] .wrapper {
    padding-top: 54px !important;
  }
}

@media (max-width: 991.98px) {
  .header {
    height: 50px !important;
    min-height: 50px !important;
  }
  .header-tablet-and-mobile-fixed[data-kt-sticky-header=on] .header {
    height: 50px !important;
    min-height: 50px !important;
  }
  .header-tablet-and-mobile-fixed[data-kt-sticky-header=on] .wrapper {
    padding-top: 50px !important;
  }
}

.header #kt_header_container {
  height: 100% !important;
}

/* Footer Styling */
.footer {
  background-color: var(--theme-footer-bg) !important;
  border-top: 1px solid var(--theme-footer-border) !important;
}

/* Badges */
.badge.bg-warning {
  background-color: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
}

.bg-light-warning {
  background-color: var(--theme-primary-subtle) !important;
}

.text-warning {
  color: var(--theme-primary) !important;
}

/* Dark Mode Overrides */
body.dark-version,
body[data-theme="dark"],
html[data-theme="dark"] {
  background-color: var(--theme-bg-body) !important;
  color: var(--theme-text-primary) !important;
}

body.dark-version .aside .aside-primary,
body[data-theme="dark"] .aside .aside-primary {
  background-color: var(--theme-nav-primary-bg) !important;
  border-right: 1px solid var(--theme-nav-primary-border) !important;
}

body.dark-version .aside .aside-secondary,
body[data-theme="dark"] .aside .aside-secondary {
  background-color: var(--theme-nav-secondary-bg) !important;
  border-right: 1px solid var(--theme-nav-secondary-border) !important;
}

body.dark-version .aside-secondary .text-dark,
body.dark-version .aside-secondary h4,
body[data-theme="dark"] .aside-secondary .text-dark,
body[data-theme="dark"] .aside-secondary h4 {
  color: var(--theme-nav-secondary-heading) !important;
}

body.dark-version .aside-secondary .menu-link,
body[data-theme="dark"] .aside-secondary .menu-link {
  color: var(--theme-nav-item-text) !important;
}

body.dark-version .aside-secondary .menu-link:hover,
body[data-theme="dark"] .aside-secondary .menu-link:hover {
  background-color: var(--theme-nav-item-hover-bg) !important;
  color: var(--theme-nav-item-hover-text) !important;
}

body.dark-version .aside-secondary .menu-link.active,
body[data-theme="dark"] .aside-secondary .menu-link.active {
  background-color: var(--theme-nav-item-active-bg) !important;
  color: var(--theme-nav-item-active-text) !important;
}

body.dark-version .header,
body[data-theme="dark"] .header {
  background-color: var(--theme-header-bg) !important;
  border-bottom: 1px solid var(--theme-header-border) !important;
}

body.dark-version .header .text-dark,
body[data-theme="dark"] .header .text-dark {
  color: var(--theme-text-primary) !important;
}

body.dark-version .footer,
body[data-theme="dark"] .footer {
  background-color: var(--theme-footer-bg) !important;
  border-top: 1px solid var(--theme-footer-border) !important;
}

body.dark-version .card,
body[data-theme="dark"] .card {
  background-color: var(--theme-bg-card) !important;
  border: 1px solid var(--theme-border) !important;
  color: var(--theme-text-primary) !important;
}

body.dark-version .modal-content,
body[data-theme="dark"] .modal-content {
  background-color: var(--theme-modal-bg) !important;
  border: 1px solid var(--theme-modal-border) !important;
  color: var(--theme-modal-text) !important;
}

/* Full-Width Unrestricted Layout */
.wrapper,
#kt_content,
#kt_content_container,
#kt_header_container,
#kt_footer .container-fluid {
  max-width: 100% !important;
  width: 100% !important;
}

#kt_content_container {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

@media (max-width: 991.98px) {
  #kt_content_container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ============================================================
   KOnekt Theme Overrides: Pagination & DataTables Controls
   ============================================================ */

:root {
  --bs-pagination-active-bg: var(--theme-primary) !important;
  --bs-pagination-active-border-color: var(--theme-primary) !important;
  --bs-pagination-active-color: var(--theme-on-primary) !important;
  --bs-pagination-hover-color: var(--theme-primary) !important;
  --bs-pagination-hover-bg: var(--theme-primary-subtle) !important;
  --bs-pagination-focus-color: var(--theme-primary) !important;
  --bs-pagination-focus-bg: var(--theme-primary-subtle) !important;
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--theme-primary-rgb), 0.25) !important;
}

/* Base page link default styles */
.pagination .page-item .page-link,
.page-item .page-link,
.page-link,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item a.page-link {
  color: var(--theme-text-secondary) !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

/* 1. Active Page State — Respecting Fundamental Contrast Rule */
.pagination .page-item.active .page-link,
.pagination .page-item.active > .page-link,
.page-item.active .page-link,
.page-item.active > .page-link,
.page-item.active .page-link:hover,
.page-item.active .page-link:focus,
.page-link.active,
.dataTables_paginate .pagination .page-item.active .page-link,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item.active a.page-link,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item.active a.page-link:hover,
div.dataTables_wrapper div.dataTables_paginate .paginate_button.active,
div.dataTables_wrapper div.dataTables_paginate .paginate_button.current,
.paginate_button.page-item.active .page-link {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(var(--theme-primary-rgb), 0.35) !important;
}

.page-item.active .page-link i,
.pagination .page-item.active .page-link i,
.page-item.active .page-link * {
  color: var(--theme-on-primary) !important;
}

.page-item.active .page-link .svg-icon svg [fill]:not(.permanent):not(g) {
  fill: var(--theme-on-primary) !important;
}

/* 2. Hover & Focus States */
.pagination .page-item:not(.active):not(.disabled):hover .page-link,
.pagination .page-item:not(.active):not(.disabled) .page-link:hover,
.page-item:not(.active):not(.disabled):hover .page-link,
.page-item:not(.active):not(.disabled) .page-link:hover,
.page-link:hover:not(.active),
.page-link:hover,
.dataTables_paginate .pagination .page-item:not(.active):not(.disabled):hover .page-link,
.dataTables_paginate .pagination .page-item:not(.active):not(.disabled) .page-link:hover,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item:not(.active):not(.disabled):hover a.page-link,
div.dataTables_wrapper div.dataTables_paginate .paginate_button:not(.active):not(.disabled):hover {
  background-color: var(--theme-primary-subtle) !important;
  border-color: rgba(var(--theme-primary-rgb), 0.35) !important;
  color: var(--theme-primary) !important;
}

.page-link:focus,
.page-item .page-link:focus,
.page-item:focus:not(.disabled) .page-link,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item a.page-link:focus {
  color: var(--theme-primary) !important;
  background-color: var(--theme-primary-subtle) !important;
  border-color: var(--theme-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--theme-primary-rgb), 0.25) !important;
  outline: 0 !important;
}

.page-item:focus:not(.disabled) .page-link i,
.page-item:hover:not(.disabled) .page-link i,
.pagination .page-item:hover:not(.disabled) .page-link i {
  color: var(--theme-primary) !important;
}

.page-item:focus:not(.disabled) .page-link .svg-icon svg [fill]:not(.permanent):not(g),
.page-item:hover:not(.disabled) .page-link .svg-icon svg [fill]:not(.permanent):not(g) {
  fill: var(--theme-primary) !important;
}

/* Custom SVG previous / next arrow hover replacements */
.page-item:hover:not(.disabled) .page-link .previous,
.page-item:focus:not(.disabled) .page-link .previous {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' fill='%23FF9800'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.06463 4.42111C1.96161 4.22088 1.9809 3.9637 2.12863 3.78597L5.12847 0.177181C5.31402 -0.046034 5.63049 -0.060261 5.83532 0.145404C6.04015 0.351069 6.05578 0.698744 5.87023 0.921959L3.19406 4.14137L5.84414 7.06417C6.03896 7.27904 6.03835 7.62686 5.84278 7.84105C5.64721 8.05524 5.33073 8.05469 5.13591 7.83982L2.14806 4.54449C2.1141 4.50704 2.08629 4.46541 2.06463 4.42111Z'/%3e%3c/svg%3e") !important;
}

.page-item:hover:not(.disabled) .page-link .next,
.page-item:focus:not(.disabled) .page-link .next {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' fill='%23FF9800'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.93537 4.57889C6.03839 4.77912 6.0191 5.0363 5.87137 5.21403L2.87153 8.82282C2.68598 9.04603 2.36951 9.06026 2.16468 8.8546C1.95985 8.64893 1.94422 8.30126 2.12977 8.07804L4.80594 4.85863L2.15586 1.93583C1.96104 1.72096 1.96165 1.37314 2.15722 1.15895C2.35279 0.944757 2.66927 0.945311 2.86409 1.16018L5.85194 4.45551C5.8859 4.49296 5.91371 4.53459 5.93537 4.57889Z'/%3e%3c/svg%3e") !important;
}

/* 3. Pagination outline variant */
.pagination.pagination-outline .page-item:hover .page-link,
.pagination.pagination-outline .page-item.active .page-link {
  border-color: var(--theme-primary) !important;
}

/* 4. DataTables Search & Filter Inputs Focus */
div.dataTables_wrapper div.dataTables_filter input:focus,
div.dataTables_wrapper div.dataTables_length select:focus {
  border-color: var(--theme-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--theme-primary-rgb), 0.25) !important;
  outline: none !important;
}

/* 5. Dark Mode Pagination Support */
body.dark-version .pagination .page-item .page-link,
body.dark-version .page-item .page-link,
body.dark-version .page-link,
body.dark-version div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item a.page-link,
body.dark-version div.dataTables_wrapper div.dataTables_paginate .paginate_button {
  background-color: var(--theme-bg-subtle) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-primary) !important;
}

body.dark-version .pagination .page-item.active .page-link,
body.dark-version .pagination .page-item.active > .page-link,
body.dark-version .page-item.active .page-link,
body.dark-version .page-item.active > .page-link,
body.dark-version .page-item.active .page-link:hover,
body.dark-version div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item.active a.page-link,
body.dark-version div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item.active a.page-link:hover,
body.dark-version div.dataTables_wrapper div.dataTables_paginate .paginate_button.active,
body.dark-version div.dataTables_wrapper div.dataTables_paginate .paginate_button.current {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
  box-shadow: 0 2px 6px rgba(var(--theme-primary-rgb), 0.35) !important;
  font-weight: 700 !important;
}

body.dark-version .pagination .page-item:not(.active):not(.disabled):hover .page-link,
body.dark-version .pagination .page-item:not(.active):not(.disabled) .page-link:hover,
body.dark-version .page-item:not(.active):not(.disabled):hover .page-link,
body.dark-version .page-item:not(.active):not(.disabled) .page-link:hover,
body.dark-version .page-link:hover,
body.dark-version div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item:not(.active):not(.disabled):hover a.page-link,
body.dark-version div.dataTables_wrapper div.dataTables_paginate .paginate_button:not(.active):not(.disabled):hover {
  background-color: rgba(var(--theme-primary-rgb), 0.2) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-primary) !important;
}

body.dark-version .pagination .page-item.disabled .page-link,
body.dark-version .page-item.disabled .page-link,
body.dark-version div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item.disabled a.page-link,
body.dark-version div.dataTables_wrapper div.dataTables_paginate .paginate_button.disabled {
  background-color: transparent !important;
  border-color: transparent !important;
  color: rgba(255, 255, 255, 0.25) !important;
}

/* ============================================================
   KOnekt — Semantic Component Styling
   ============================================================ */

/* 1. Hyperlinks */
a {
  color: var(--theme-primary) !important;
}
a:hover {
  color: var(--theme-primary-hover) !important;
}
/* Exception: menu/nav links keep their own color from sidebar rules */
.sidenav a,
.nav-link,
.menu-link,
.aside a {
  color: inherit !important;
}

/* 2. Form Checkboxes & Radios */
.form-check-input:checked {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
}
.form-check-input:focus {
  border-color: var(--theme-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--theme-primary-rgb), 0.25) !important;
}

/* 3. Range Inputs */
.form-range::-webkit-slider-thumb {
  background-color: var(--theme-primary) !important;
}
.form-range::-moz-range-thumb {
  background-color: var(--theme-primary) !important;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(var(--theme-primary-rgb), 0.25) !important;
}

/* 4. Progress Bars */
.progress-bar {
  background-color: var(--theme-primary) !important;
}

/* 5. List Group Active State */
.list-group-item.active {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
}

/* 6. Dropdown Item Active */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--theme-primary-subtle) !important;
  color: var(--theme-primary) !important;
}
.dropdown-menu-dark .dropdown-item.active,
.dropdown-menu-dark .dropdown-item:active {
  background-color: rgba(var(--theme-primary-rgb), 0.2) !important;
  color: var(--theme-primary) !important;
}

/* 7. Breadcrumb Active Item */
.breadcrumb-item.active {
  color: var(--theme-primary) !important;
}

/* 8. btn-link */
.btn-link {
  color: var(--theme-primary) !important;
}
.btn-link:hover {
  color: var(--theme-primary-hover) !important;
}

/* 9. Select form-select focus ring */
.form-select:focus {
  border-color: var(--theme-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--theme-primary-rgb), 0.25) !important;
}

/* 10. Dark mode adjustments for the above */
body.dark-version .form-check-input:checked {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
}
body.dark-version .list-group-item.active {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
}
body.dark-version .breadcrumb-item.active {
  color: var(--theme-primary-hover) !important;
}
body.dark-version a:not(.nav-link):not(.menu-link):not(.btn):not(.page-link) {
  color: var(--theme-primary-hover) !important;
}

/* 8. btn-link */
.btn-link {
  color: var(--theme-link, var(--theme-primary)) !important;
}
.btn-link:hover {
  color: var(--theme-link-hover, var(--theme-primary-hover)) !important;
}

/* 9. Select form-select focus ring */
.form-select:focus {
  border-color: var(--theme-input-focus-border, var(--theme-primary)) !important;
  box-shadow: 0 0 0 0.25rem var(--theme-input-focus-ring, rgba(var(--theme-primary-rgb), 0.25)) !important;
}

/* 10. Dark mode adjustments for the above */
body.dark-version .form-check-input:checked {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
}
body.dark-version .list-group-item.active {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
}
body.dark-version .breadcrumb-item.active {
  color: var(--theme-primary-hover) !important;
}
body.dark-version a:not(.nav-link):not(.menu-link):not(.btn):not(.page-link) {
  color: var(--theme-link-hover, var(--theme-primary-hover)) !important;
}

/* ==========================================================================
   HIGH CONTRAST & ACCESSIBILITY FIX (ANTI-LIGHT-GRAY ON WHITE)
   WCAG AAA Compliant (Contrast Ratio >= 7:1 against White Background)
   Fixes illegible light-gray text (#E4E6EF / #A1A5B7) on white backgrounds
   ========================================================================== */

/* 1. Global Light-Theme Overrides for Muted and Secondary Text */
body:not(.dark-version) .text-muted,
body:not(.dark-version) .text-secondary {
  color: #4B5675 !important;
  --bs-text-opacity: 1 !important;
}

/* For small / extra small text, use deeper slate #3F4254 (contrast 9.9:1) */
body:not(.dark-version) small.text-muted,
body:not(.dark-version) small.text-secondary,
body:not(.dark-version) p.text-muted,
body:not(.dark-version) p.text-secondary,
body:not(.dark-version) span.text-muted,
body:not(.dark-version) span.text-secondary,
body:not(.dark-version) div.text-muted,
body:not(.dark-version) div.text-secondary,
body:not(.dark-version) label.text-muted,
body:not(.dark-version) label.text-secondary,
body:not(.dark-version) .form-text,
body:not(.dark-version) .text-xs.text-muted,
body:not(.dark-version) .text-xs.text-secondary,
body:not(.dark-version) .text-xxs.text-muted,
body:not(.dark-version) .text-xxs.text-secondary,
body:not(.dark-version) .fs-7.text-muted,
body:not(.dark-version) .fs-7.text-secondary,
body:not(.dark-version) .fs-8.text-muted,
body:not(.dark-version) .fs-8.text-secondary {
  color: #3F4254 !important;
}

/* 2. Table Headers (Completely Eliminate Invisible Ghost Headers) */
body:not(.dark-version) table th,
body:not(.dark-version) .table thead th,
body:not(.dark-version) .table th,
body:not(.dark-version) thead th,
body:not(.dark-version) th.text-secondary,
body:not(.dark-version) th.text-muted {
  color: #181C32 !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* 3. Strip Pale Opacity On All Text Elements */
body:not(.dark-version) th.opacity-7,
body:not(.dark-version) th.opacity-6,
body:not(.dark-version) th.opacity-5,
body:not(.dark-version) td.opacity-7,
body:not(.dark-version) td.opacity-6,
body:not(.dark-version) td.opacity-5,
body:not(.dark-version) span.opacity-7,
body:not(.dark-version) span.opacity-6,
body:not(.dark-version) span.opacity-5,
body:not(.dark-version) p.opacity-7,
body:not(.dark-version) p.opacity-6,
body:not(.dark-version) p.opacity-5,
body:not(.dark-version) small.opacity-7,
body:not(.dark-version) small.opacity-6,
body:not(.dark-version) small.opacity-5,
body:not(.dark-version) a.opacity-7,
body:not(.dark-version) a.opacity-6,
body:not(.dark-version) a.opacity-5,
body:not(.dark-version) label.opacity-7,
body:not(.dark-version) label.opacity-6,
body:not(.dark-version) label.opacity-5,
body:not(.dark-version) .text-secondary.opacity-7,
body:not(.dark-version) .text-muted.opacity-7,
body:not(.dark-version) .opacity-7:not(img):not(.badge):not(.overlay):not(.btn) {
  opacity: 1 !important;
}

/* 4. Metronic Gray Palette Overrides in Light Mode */
body:not(.dark-version) .text-gray-400 {
  color: #5E6278 !important;
}
body:not(.dark-version) .text-gray-500 {
  color: #4B5675 !important;
}
body:not(.dark-version) .text-gray-600 {
  color: #3F4254 !important;
}
body:not(.dark-version) .text-gray-700 {
  color: #252F4A !important;
}
body:not(.dark-version) .text-gray-800 {
  color: #181C32 !important;
}
body:not(.dark-version) .text-hover-gray-400:hover,
body:not(.dark-version) .text-hover-gray-500:hover,
body:not(.dark-version) .text-hover-gray-600:hover,
body:not(.dark-version) .text-hover-muted:hover,
body:not(.dark-version) .text-hover-secondary:hover {
  color: #181C32 !important;
}
body:not(.dark-version) .text-active-gray-400.active,
body:not(.dark-version) .text-active-gray-500.active,
body:not(.dark-version) .text-active-gray-600.active,
body:not(.dark-version) .text-active-secondary.active {
  color: #181C32 !important;
}

/* 5. Secondary Aside (Submenu) Navigation High Contrast */
body:not(.dark-version) .aside-secondary .menu-link {
  color: var(--theme-nav-item-text, #252F4A) !important;
}
body:not(.dark-version) .aside-secondary .menu-link .menu-title {
  color: var(--theme-nav-item-text, #181C32) !important;
  font-weight: 600 !important;
}
body:not(.dark-version) .aside-secondary .menu-link .menu-icon i {
  color: var(--theme-text-muted, #4B5675) !important;
}
body:not(.dark-version) .aside-secondary .menu-link:hover .menu-title,
body:not(.dark-version) .aside-secondary .menu-link:hover .menu-icon i {
  color: var(--theme-nav-item-hover-text, var(--theme-primary)) !important;
}
body:not(.dark-version) .aside-secondary .menu-link.active {
  background-color: var(--theme-nav-item-active-bg, rgba(var(--theme-primary-rgb), 0.12)) !important;
}
body:not(.dark-version) .aside-secondary .menu-link.active .menu-title,
body:not(.dark-version) .aside-secondary .menu-link.active .menu-icon i {
  color: var(--theme-nav-item-active-text, var(--theme-primary)) !important;
}

/* 6. Form Helper Texts, Labels & Placeholders */
body:not(.dark-version) .form-label {
  color: #181C32 !important;
  font-weight: 600 !important;
}
body:not(.dark-version) .form-control::placeholder,
body:not(.dark-version) .form-select::placeholder,
body:not(.dark-version) input::placeholder,
body:not(.dark-version) textarea::placeholder {
  color: #5E6278 !important;
  opacity: 1 !important;
}
body:not(.dark-version) .form-control:disabled,
body:not(.dark-version) .form-control[readonly],
body:not(.dark-version) .form-select:disabled {
  background-color: #F9F9FB !important;
  color: #252F4A !important;
  border-color: #D8D8E0 !important;
  -webkit-text-fill-color: #252F4A !important;
  opacity: 1 !important;
}

/* 7. Table Cell Text Clarity */
body:not(.dark-version) .table td {
  color: #181C32 !important;
}
body:not(.dark-version) .table td .text-secondary,
body:not(.dark-version) .table td .text-muted,
body:not(.dark-version) .table td.text-secondary,
body:not(.dark-version) .table td.text-muted {
  color: #3F4254 !important;
}
body:not(.dark-version) .table td .text-dark,
body:not(.dark-version) .table td.text-dark {
  color: #181C32 !important;
  font-weight: 600 !important;
}

/* 8. Breadcrumbs High Contrast */
body:not(.dark-version) .breadcrumb-item {
  color: #4B5675 !important;
}
body:not(.dark-version) .breadcrumb-item a {
  color: #3F4254 !important;
  font-weight: 500 !important;
}
body:not(.dark-version) .breadcrumb-item a:hover {
  color: var(--theme-link-hover, var(--theme-primary)) !important;
}
body:not(.dark-version) .breadcrumb-item.active {
  color: #181C32 !important;
  font-weight: 700 !important;
}
body:not(.dark-version) .breadcrumb-item + .breadcrumb-item::before {
  color: #7E8299 !important;
}

/* 9. Badges & Cards High Contrast */
body:not(.dark-version) .badge.bg-secondary,
body:not(.dark-version) .badge-secondary {
  background-color: #4B5675 !important;
  color: #FFFFFF !important;
}
body:not(.dark-version) .badge.bg-light,
body:not(.dark-version) .badge-light {
  background-color: #F1F1F4 !important;
  color: #181C32 !important;
  border: 1px solid #D8D8E0 !important;
}
body:not(.dark-version) .badge.bg-light.text-muted,
body:not(.dark-version) .badge.bg-light.text-secondary {
  color: #252F4A !important;
}
body:not(.dark-version) .badge.bg-light-dark,
body:not(.dark-version) .badge-light-dark {
  background-color: #E1E3EA !important;
  color: #181C32 !important;
}

/* 10. Icons in Muted / Secondary */
body:not(.dark-version) i.text-muted,
body:not(.dark-version) i.text-secondary,
body:not(.dark-version) .text-muted i,
body:not(.dark-version) .text-secondary i {
  color: #4B5675 !important;
}

/* 11. Code and Monospace Elements */
code {
  color: #0f5132 !important;
  background-color: #e8f5e9 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

/* 12. Modal Elements */
body:not(.dark-version) .modal-title {
  color: #181C32 !important;
  font-weight: 700 !important;
}
body:not(.dark-version) .modal-body .text-muted,
body:not(.dark-version) .modal-body .text-secondary {
  color: #3F4254 !important;
}

/* 13. Dark Mode Equivalents (Ensures Dark Mode Stays Legible) */
body.dark-version .text-secondary,
body.dark-version .text-muted,
body.dark-version small.text-muted,
body.dark-version p.text-muted,
body.dark-version span.text-muted,
body.dark-version div.text-muted,
body.dark-version label.text-muted,
body.dark-version .text-gray-400,
body.dark-version .text-gray-500,
body.dark-version .text-gray-600 {
  color: #B5B5C3 !important;
}
body.dark-version table th,
body.dark-version .table thead th,
body.dark-version thead th,
body.dark-version th.text-secondary,
body.dark-version th.text-muted {
  color: #FFFFFF !important;
  opacity: 1 !important;
}
body.dark-version .form-label {
  color: #FFFFFF !important;
}
body.dark-version .breadcrumb-item,
body.dark-version .breadcrumb-item a {
  color: #B5B5C3 !important;
}
body.dark-version .breadcrumb-item.active {
  color: var(--theme-primary-hover) !important;
}
body.dark-version .aside-secondary .menu-link .menu-title {
  color: var(--theme-nav-item-text) !important;
}
body.dark-version .aside-secondary .menu-link .menu-icon i {
  color: var(--theme-text-muted) !important;
}
body.dark-version .aside-secondary .menu-link.active .menu-title,
body.dark-version .aside-secondary .menu-link.active .menu-icon i {
  color: var(--theme-nav-item-active-text, var(--theme-primary)) !important;
}
body.dark-version code {
  color: #86efac !important;
  background-color: rgba(34, 197, 94, 0.15) !important;
}

/* ==========================================================================
   Giant 3-Bars Menu Symbol & Submenu Footer Powered-By Konekt
   ========================================================================== */

/* Giant 3-Bars Menu Symbol at the top of aside-primary */
.giant-menu-symbol-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 58px !important;
  height: 50px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  background-color: transparent !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
}

.giant-menu-symbol-link:hover {
  background-color: rgba(var(--theme-primary-rgb), 0.15) !important;
}

body.dark-version .giant-menu-symbol-link:hover,
body.dark-mode .giant-menu-symbol-link:hover,
body[data-theme="dark"] .giant-menu-symbol-link:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.giant-menu-bars-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  width: 44px !important;
  height: 28px !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
}

.giant-menu-symbol-link:hover .giant-menu-bars-container {
  transform: scale(1.06) !important;
}

.giant-menu-bar {
  display: block !important;
  width: 44px !important;
  height: 5px !important;
  border-radius: 3px !important;
  transition: background-color 0.3s ease !important;
}

/* Light Mode: 3 horizontal bars are Primary color */
body:not(.dark-version) .giant-menu-bar,
.giant-menu-bar {
  background-color: var(--theme-primary) !important;
}

/* Dark Mode: 3 horizontal bars are White (#FFFFFF) */
body.dark-version .giant-menu-bar,
body.dark-mode .giant-menu-bar,
body[data-theme="dark"] .giant-menu-bar {
  background-color: #FFFFFF !important;
}

/* Secondary Aside Workspace Flexbox & Height Fix (Prevents footer from being pushed off-screen) */
.aside .aside-secondary {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.aside .aside-secondary .aside-workspace {
  width: 280px !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 1.25rem 1rem 0.75rem 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Brand Logo Container above lateral submenu */
.aside-secondary-header {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0.25rem 0.5rem 0.75rem 0.5rem !important;
  margin-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--theme-nav-secondary-border, #E8ECEF) !important;
  min-height: 48px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.dark-version .aside-secondary-header,
body.dark-mode .aside-secondary-header,
body[data-theme="dark"] .aside-secondary-header {
  border-bottom: 1px solid var(--theme-nav-secondary-border, rgba(255, 255, 255, 0.08)) !important;
}

.aside-secondary-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  text-decoration: none !important;
}

.aside-secondary-logo {
  max-height: 40px !important;
  max-width: 210px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
  transition: opacity 0.2s ease, filter 0.2s ease !important;
}

.aside-secondary-logo-fallback {
  display: none !important;
}

.aside-secondary-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 180px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Page Title (App Name in Top Header: Uppercase and larger) */
.page-title h1,
.page-title .page-title-heading {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.45rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  color: var(--theme-text-primary, #1E1E2D) !important;
}

body.dark-version .page-title h1,
body.dark-version .page-title .page-title-heading,
body.dark-mode .page-title h1,
body.dark-mode .page-title .page-title-heading,
body[data-theme="dark"] .page-title h1,
body[data-theme="dark"] .page-title .page-title-heading {
  color: var(--theme-text-primary, #FFFFFF) !important;
}

/* Submenu Footer: Powered by Konekt (Strictly visible at base, stacked layout) */
.aside-secondary-footer {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  margin-top: auto !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  border: none !important;
  border-top: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.dark-version .aside-secondary-footer {
  border: none !important;
  border-top: none !important;
}

.konekt-powered-box {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.25rem 0.5rem !important;
  transition: all 0.25s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.konekt-powered-box:hover {
  background-color: transparent !important;
  border: none !important;
}

body.dark-version .konekt-powered-box {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.dark-version .konekt-powered-box:hover {
  background-color: transparent !important;
  border: none !important;
}

.konekt-powered-text {
  color: #7e8299 !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.8px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  display: block !important;
  line-height: 1.2 !important;
}

body.dark-version .konekt-powered-text {
  color: #92929f !important;
}

.konekt-powered-logo {
  height: 16px !important;
  width: 93px !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.konekt-brand-fill {
  fill: #FF9800 !important;
  transition: fill 0.25s ease !important;
}

.konekt-brand-stroke {
  stroke: #FF9800 !important;
  transition: stroke 0.25s ease !important;
}

body.dark-version .konekt-brand-fill,
body.dark-mode .konekt-brand-fill,
body[data-theme="dark"] .konekt-brand-fill {
  fill: #FFFFFF !important;
}

body.dark-version .konekt-brand-stroke,
body.dark-mode .konekt-brand-stroke,
body[data-theme="dark"] .konekt-brand-stroke {
  stroke: #FFFFFF !important;
}

.konekt-powered-link {
  transition: transform 0.2s ease, opacity 0.2s ease !important;
  line-height: 1 !important;
}

.konekt-powered-link:hover {
  transform: scale(1.04) !important;
}