/**
 * CallHub theme (SAS² colors)
 * Brandkit tokens + Dark/Light modes via html[data-theme]
 */
:root {
  --cd-primary: #e1122f;
  --cd-primary-hover: #c40f28;
  --cd-cyan: #e1122f;
  --cd-blue: #e1122f;
  --cd-purple: #c40f28;
  --cd-lavender: #ff4d63;
  --cd-royal: #e1122f;
  --cd-success: #10b981;
  --cd-radius: 12px;
  --cd-radius-sm: 8px;
  --cd-gradient: linear-gradient(90deg, #e1122f 0%, #ff4d63 100%);
  --cd-gradient-soft: linear-gradient(135deg, rgba(225, 18, 47, 0.2), rgba(255, 77, 99, 0.2));
}

/* Shared layout chrome sizing */
body.cd-theme,
body.m-page--fluid {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.m-brand {
  min-width: 235px;
  height: 60px !important;
}

.m-header {
  height: 60px !important;
}

.m-brand__logo.w-75 {
  width: 85% !important;
}

.m-brand__logo-wrapper img.cd-brand-logo {
  max-height: 36px;
  height: 36px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

.cd-brand-logo--light { display: none !important; }
.cd-brand-logo--dark { display: inline-block !important; }

/* Brand/logo area stays dark in both themes (matches sidebar) */
.m-brand,
.m-brand--skin-dark {
  background-color: #040404 !important;
}

html[data-theme="light"] .m-brand,
html[data-theme="light"] .m-brand--skin-dark {
  background-color: #040404 !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="light"] .cd-brand-logo--dark,
html[data-theme="light"] .cd-brand-logo {
  display: inline-block !important;
}

html[data-theme="light"] .cd-brand-logo--light {
  display: none !important;
}

html[data-theme="light"] .m-brand__toggler span,
html[data-theme="light"] .m-brand__toggler span::before,
html[data-theme="light"] .m-brand__toggler span::after {
  background-color: #a0a0b0 !important;
}

.cd-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 1rem;
  flex-wrap: wrap;
}

.cd-footer-product {
  color: var(--cd-cyan) !important;
  font-weight: 600;
}

/* Primary / brand CTAs (Metronic defaults: #ffae16 yellow) */
.btn-primary,
.m-btn--custom.btn-primary,
.btn.btn-brand,
.btn-brand {
  background: var(--cd-primary) !important;
  background-image: none !important;
  border-color: var(--cd-primary) !important;
  color: #fff !important;
  border-radius: var(--cd-radius-sm) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.btn-brand:hover,
.btn-brand:focus,
.btn-brand:not(:disabled):not(.disabled):active,
.btn-brand:not(:disabled):not(.disabled).active,
.show > .btn-brand.dropdown-toggle,
.m-btn--custom.btn-primary:hover,
.m-btn--custom.btn-primary:focus {
  background: var(--cd-primary-hover) !important;
  background-image: none !important;
  border-color: var(--cd-primary-hover) !important;
  color: #fff !important;
  filter: none;
  box-shadow: 0 0 0 0.2rem rgba(225, 18, 47, 0.35) !important;
}

/* Focus = Metronic purple CTA (#9816f4); used as primary action (Sign Up, etc.) */
.btn-focus,
.btn.btn-focus,
.m-btn--custom.btn-focus {
  background: var(--cd-primary) !important;
  background-image: none !important;
  border-color: var(--cd-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.btn-focus:hover,
.btn-focus:focus,
.btn-focus.focus,
.btn-focus:not(:disabled):not(.disabled):active,
.btn-focus:not(:disabled):not(.disabled).active,
.show > .btn-focus.dropdown-toggle {
  background: var(--cd-primary-hover) !important;
  background-image: none !important;
  border-color: var(--cd-primary-hover) !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.2rem rgba(225, 18, 47, 0.35) !important;
}

/*
 * Warning buttons are used as Save / Next / Charge CTAs across wizards.
 * Keep semantic warning chrome (alerts, badges, text) yellow — see below.
 */
.btn-warning,
.btn.btn-warning,
.m-btn--custom.btn-warning {
  background: var(--cd-primary) !important;
  background-image: none !important;
  border-color: var(--cd-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
  background: var(--cd-primary-hover) !important;
  background-image: none !important;
  border-color: var(--cd-primary-hover) !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.2rem rgba(225, 18, 47, 0.35) !important;
}

/* Outline variants for brand/focus/warning action buttons */
.btn-outline-brand,
.btn-outline-focus,
.btn-outline-warning {
  color: var(--cd-primary) !important;
  border-color: var(--cd-primary) !important;
  background-color: transparent !important;
}

.btn-outline-brand:hover,
.btn-outline-brand:focus,
.btn-outline-focus:hover,
.btn-outline-focus:focus,
.btn-outline-warning:hover,
.btn-outline-warning:focus {
  color: #fff !important;
  background-color: var(--cd-primary) !important;
  border-color: var(--cd-primary) !important;
}

.m-btn--label-brand {
  color: var(--cd-primary) !important;
}

/* Semantic warning — leave Metronic yellow (#ffb822) for meaning */
/* .alert-warning, .m-badge--warning, .text-warning, .bg-warning, .table-warning */

.m-scroll-top {
  background: var(--cd-gradient) !important;
}

.m-datatable__pager-link--active,
.dataTables_paginate .paginate_button.current,
.page-item.active .page-link,
.dataTables_wrapper .pagination .page-item.active > .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--cd-primary) !important;
  border-color: var(--cd-primary) !important;
  color: #fff !important;
}

.alert {
  border-radius: var(--cd-radius-sm);
}

/* Shared dashboard components (both themes) */
.cd-card {
  background: var(--cd-surface, #151521);
  border: 1px solid var(--cd-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--cd-radius);
  padding: 1.25rem 1.5rem;
  color: var(--cd-text, #fff);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.cd-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--cd-gradient);
  opacity: 0.9;
  z-index: 1;
}

.cd-card__label {
  color: var(--cd-text-muted, #a0a0b0);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.cd-card__value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--cd-text, #fff);
  line-height: 1.2;
}

.cd-card__trend {
  color: var(--cd-success);
  font-size: 0.85rem;
  font-weight: 600;
}

.cd-filter-bar {
  background: var(--cd-surface, #151521);
  border: 1px solid var(--cd-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--cd-radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.cd-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cd-text, #fff);
  margin-bottom: 0.25rem;
}

.cd-page-subtitle {
  color: var(--cd-text-muted, #a0a0b0);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

.cd-auth-links a {
  color: var(--cd-cyan) !important;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8rem;
  padding: 0 0.75rem;
}

.cd-auth-links a:hover {
  color: var(--cd-lavender) !important;
}

.cd-auth-logo {
  max-width: 280px;
  width: 80%;
  height: auto;
  margin-bottom: 1.5rem;
}



.cd-theme-mode .m-dropdown__inner {
  background: var(--cd-surface, #151521) !important;
  border: 1px solid var(--cd-border, rgba(255,255,255,.08)) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
  padding: 0.4rem !important;
  min-width: 160px;
  overflow: hidden;
}

html[data-theme="light"] .cd-theme-mode .m-dropdown__inner {
  background: #ffffff !important;
  border: 1px solid rgba(15, 15, 25, 0.1) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Avoid double Metronic body/content boxes on this menu */
.cd-theme-mode .m-dropdown__body,
.cd-theme-mode .m-dropdown__content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.cd-theme-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cd-theme-menu__link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  color: var(--cd-text-muted, #a0a0b0);
  text-decoration: none !important;
  font-size: 0.9rem;
  font-weight: 500;
}

.cd-theme-menu__link > i:first-child {
  font-size: 1.05rem;
  width: 1.2rem;
  text-align: center;
}

.cd-theme-menu__link:hover {
  background: rgba(225, 18, 47, 0.14);
  color: var(--cd-cyan, #e1122f);
}

.cd-theme-menu__item.is-active .cd-theme-menu__link {
  color: var(--cd-text, #fff);
}

html[data-theme="light"] .cd-theme-menu__item.is-active .cd-theme-menu__link {
  color: #1b1b28;
}

.cd-theme-check {
  margin-left: auto;
  opacity: 0;
  color: var(--cd-cyan, #e1122f);
  font-size: 0.95rem;
}

.cd-theme-menu__item.is-active .cd-theme-check {
  opacity: 1;
}


/* ========== DARK ========== */
html[data-theme="dark"] {
  --cd-bg: #040404;
  --cd-bg-elevated: #0b0b10;
  --cd-surface: #151521;
  --cd-surface-2: #1a1a24;
  --cd-border: rgba(255, 255, 255, 0.08);
  --cd-text: #ffffff;
  --cd-text-muted: #a0a0b0;
}
/* Base shell */
html[data-theme="dark"] body.m-page--fluid,
html[data-theme="dark"] body.cd-theme {
  background-color: var(--cd-bg) !important;
  color: var(--cd-text);
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

html[data-theme="dark"] body.m-content--skin-light2 {
  /* keep class for Metronic JS; force dark content */
}

html[data-theme="dark"] .m-body,
html[data-theme="dark"] .m-wrapper,
html[data-theme="dark"] .m-content,
html[data-theme="dark"] #vueRoot {
  background-color: var(--cd-bg-elevated) !important;
  color: var(--cd-text);
}

/* Header / brand */
html[data-theme="dark"] .m-header,
html[data-theme="dark"] #m_header {
  background-color: var(--cd-bg) !important;
  border-bottom: 1px solid var(--cd-border);
  box-shadow: none !important;
}

html[data-theme="dark"] .m-brand,
html[data-theme="dark"] .m-brand--skin-dark {
  background-color: var(--cd-bg) !important;
}

html[data-theme="dark"] .m-brand {
  min-width: 235px;
  height: 60px !important;
}

html[data-theme="dark"] .m-header {
  height: 60px !important;
}

html[data-theme="dark"] .m-brand__logo.w-75 {
  width: 85% !important;
}

html[data-theme="dark"] .m-brand__logo-wrapper img.cd-brand-logo {
  max-height: 36px;
  height: 36px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

html[data-theme="dark"] .m-brand__toggler span,
html[data-theme="dark"] .m-brand__toggler span::before,
html[data-theme="dark"] .m-brand__toggler span::after {
  background-color: var(--cd-text-muted) !important;
}

html[data-theme="dark"] .m-header-menu.m-header-menu--skin-light,
html[data-theme="dark"] .m-header-menu .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-text {
  color: var(--cd-text-muted) !important;
}

html[data-theme="dark"] .m-header-menu .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-text,
html[data-theme="dark"] .m-header-menu .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
  color: var(--cd-text) !important;
}

html[data-theme="dark"] .m-topbar .m-topbar__nav-wrapper .m-topbar__nav .m-nav__item .m-nav__link .m-nav__link-icon {
  color: var(--cd-text-muted) !important;
}

/* Sidebar */
html[data-theme="dark"] .m-aside-left,
html[data-theme="dark"] .m-aside-left--skin-dark,
html[data-theme="dark"] #m_aside_left {
  background-color: var(--cd-bg) !important;
  border-right: 1px solid var(--cd-border);
}

html[data-theme="dark"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-text,
html[data-theme="dark"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-icon {
  color: var(--cd-text-muted) !important;
}

html[data-theme="dark"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item:hover > .m-menu__link,
html[data-theme="dark"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link {
  background: var(--cd-gradient-soft) !important;
  border-radius: var(--cd-radius-sm);
}

html[data-theme="dark"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
html[data-theme="dark"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon,
html[data-theme="dark"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-text,
html[data-theme="dark"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-icon {
  color: var(--cd-cyan) !important;
}

html[data-theme="dark"] .m-aside-menu .m-menu__section .m-menu__section-text {
  color: var(--cd-text-muted) !important;
  opacity: 0.7;
  letter-spacing: 0.06em;
}

/* Footer */
html[data-theme="dark"] .m-footer {
  background-color: var(--cd-bg) !important;
  border-top: 1px solid var(--cd-border) !important;
  color: var(--cd-text-muted) !important;
}

html[data-theme="dark"] .m-footer__copyright,
html[data-theme="dark"] .m-footer__copyright b {
  color: var(--cd-text-muted) !important;
  font-weight: 500;
}

html[data-theme="dark"] .cd-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 1rem;
  flex-wrap: wrap;
}

html[data-theme="dark"] .cd-footer-product {
  color: var(--cd-cyan) !important;
  font-weight: 600;
}

/* Cards / portlets / content surfaces */
html[data-theme="dark"] .m-portlet,
html[data-theme="dark"] .card,
html[data-theme="dark"] .m-portlet.m-portlet--bordered-semi,
html[data-theme="dark"] .m-portlet .m-portlet__head,
html[data-theme="dark"] .m-portlet .m-portlet__body {
  background-color: var(--cd-surface) !important;
  color: var(--cd-text) !important;
  border-color: var(--cd-border) !important;
  border-radius: var(--cd-radius) !important;
  box-shadow: none !important;
}



/* Metronic KPI widgets (broker/buyer/vendor dashboards) */
html[data-theme="dark"] .m-widget29,
html[data-theme="dark"] .m-widget29 .m-widget_content,
html[data-theme="dark"] .m-portlet .m-portlet__body--no-padding,
html[data-theme="dark"] .m-portlet.m-portlet--full-height {
  background-color: var(--cd-surface, #151521) !important;
  color: var(--cd-text, #fff) !important;
}

html[data-theme="dark"] .m-widget29 .m-widget_content-title,
html[data-theme="dark"] .m-widget29 .m-widget_content-items,
html[data-theme="dark"] .m-widget29 .m-widget_content-item,
html[data-theme="dark"] .m-widget29 h1,
html[data-theme="dark"] .m-widget29 h2,
html[data-theme="dark"] .m-widget29 h3,
html[data-theme="dark"] .m-widget29 span {
  color: var(--cd-text-muted, #a0a0b0) !important;
}

html[data-theme="dark"] .m-widget29 .m--font-accent,
html[data-theme="dark"] .m-widget29 .m--font-accent h1,
html[data-theme="dark"] .m-widget29 .m--font-accent h2 {
  color: var(--cd-cyan, #e1122f) !important;
}

html[data-theme="dark"] .m-row--col-separator-xl > div,
html[data-theme="dark"] .m-row--col-separator-lg > div,
html[data-theme="dark"] .m-row--col-separator-md > div,
html[data-theme="dark"] [class*="m-row--col-separator"] > div {
  border-color: var(--cd-border, rgba(255,255,255,.08)) !important;
}

html[data-theme="dark"] .m-separator,
html[data-theme="dark"] .m-separator--dashed {
  border-bottom-color: var(--cd-border, rgba(255,255,255,.08)) !important;
}

html[data-theme="dark"] .m-portlet .m-portlet__head .m-portlet__head-text,
html[data-theme="dark"] .m-portlet .m-portlet__head-caption .m-portlet__head-title .m-portlet__head-text,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .m-form .form-control-label {
  color: var(--cd-text) !important;
}

html[data-theme="dark"] .m-subheader .m-subheader__title,
html[data-theme="dark"] .m-subheader__breadcrumbs-link,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: var(--cd-text) !important;
}

/* Forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .bootstrap-select .dropdown-toggle,
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .m-input {
  background-color: var(--cd-surface-2) !important;
  border: 1px solid var(--cd-border) !important;
  color: var(--cd-text) !important;
  border-radius: var(--cd-radius-sm) !important;
}

html[data-theme="dark"] .form-control:focus {
  border-color: var(--cd-cyan) !important;
  box-shadow: 0 0 0 0.15rem rgba(225, 18, 47, 0.22) !important;
}

html[data-theme="dark"] .form-control::placeholder {
  color: var(--cd-text-muted) !important;
}

/* Buttons (dark): shared SAS² primary/focus/warning rules above apply */

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline-metal,
html[data-theme="dark"] .m-btn--custom.btn-secondary {
  background-color: var(--cd-surface-2) !important;
  border: 1px solid var(--cd-border) !important;
  color: var(--cd-text) !important;
  border-radius: var(--cd-radius-sm) !important;
}

/* Tables */
html[data-theme="dark"] .table,
html[data-theme="dark"] .m-table,
html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
  color: var(--cd-text-muted) !important;
  border-color: var(--cd-border) !important;
}

html[data-theme="dark"] .table thead th {
  background-color: var(--cd-surface-2) !important;
  color: var(--cd-text) !important;
}

/* Base row bg — DataTables CDN sets #fff on tbody tr (loads after theme) */
html[data-theme="dark"] .table tbody tr,
html[data-theme="dark"] table.dataTable tbody tr,
html[data-theme="dark"] table.dataTable tbody tr.even,
html[data-theme="dark"] table.dataTable.stripe tbody tr.even,
html[data-theme="dark"] table.dataTable.display tbody tr.even {
  background-color: var(--cd-surface, #151521) !important;
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
html[data-theme="dark"] table.dataTable tbody tr.odd,
html[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
html[data-theme="dark"] table.dataTable.display tbody tr.odd {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] .table-hover tbody tr:hover,
html[data-theme="dark"] table.dataTable.hover tbody tr:hover,
html[data-theme="dark"] table.dataTable.display tbody tr:hover {
  background-color: rgba(225, 18, 47, 0.08) !important;
}

/* DataTables order-column paints td.sorting_* with #fafafa — neutralize in dark */
html[data-theme="dark"] table.dataTable tbody tr > td,
html[data-theme="dark"] table.dataTable tbody tr > th,
html[data-theme="dark"] table.dataTable.display tbody tr > .sorting_1,
html[data-theme="dark"] table.dataTable.display tbody tr > .sorting_2,
html[data-theme="dark"] table.dataTable.display tbody tr > .sorting_3,
html[data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_1,
html[data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_2,
html[data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_3,
html[data-theme="dark"] table.dataTable.display tbody tr.odd > .sorting_1,
html[data-theme="dark"] table.dataTable.display tbody tr.odd > .sorting_2,
html[data-theme="dark"] table.dataTable.display tbody tr.odd > .sorting_3,
html[data-theme="dark"] table.dataTable.display tbody tr.even > .sorting_1,
html[data-theme="dark"] table.dataTable.display tbody tr.even > .sorting_2,
html[data-theme="dark"] table.dataTable.display tbody tr.even > .sorting_3 {
  background-color: transparent !important;
}

/* Modals */
html[data-theme="dark"] .modal-content {
  background-color: var(--cd-surface) !important;
  color: var(--cd-text) !important;
  border: 1px solid var(--cd-border) !important;
  border-radius: var(--cd-radius) !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  border-color: var(--cd-border) !important;
}

html[data-theme="dark"] .btn-close {
  filter: invert(1);
}

/* Scroll top */
html[data-theme="dark"] .m-scroll-top {
  background: var(--cd-gradient) !important;
}

/* Dropdowns */
html[data-theme="dark"] .dropdown-menu {
  background-color: var(--cd-surface) !important;
  border: 1px solid var(--cd-border) !important;
  color: var(--cd-text) !important;
}

html[data-theme="dark"] .dropdown-item {
  color: var(--cd-text-muted) !important;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--cd-surface-2) !important;
  color: var(--cd-cyan) !important;
}

/* cd-card / filter / titles: shared above; dark uses tokens */


/* Auth / welcome — ALWAYS dark (ignore light/dark toggle) */
.cd-auth-body,
html[data-theme="light"] .cd-auth-body,
html[data-theme="light"] body.cd-auth-body,
html[data-theme="dark"] .cd-auth-body {
  --cd-bg: #040404;
  --cd-bg-elevated: #0b0b10;
  --cd-surface: #151521;
  --cd-surface-2: #1a1a24;
  --cd-border: rgba(255, 255, 255, 0.08);
  --cd-text: #ffffff;
  --cd-text-muted: #a0a0b0;
  background:
    radial-gradient(ellipse at top, rgba(225, 18, 47, 0.14), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(225, 18, 47, 0.1), transparent 45%),
    #040404 !important;
  background-color: #040404 !important;
  color: #ffffff !important;
  min-height: 100vh;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.cd-auth-panel,
html[data-theme="light"] .cd-auth-panel {
  background: #151521 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--cd-radius);
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  color: #ffffff !important;
}

.cd-auth-logo {
  max-width: 280px;
  width: 80%;
  height: auto;
  margin-bottom: 1.5rem;
}

.cd-auth-links a,
html[data-theme="light"] .cd-auth-links a {
  color: var(--cd-cyan, #e1122f) !important;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8rem;
  padding: 0 0.75rem;
}

.cd-auth-links a:hover,
html[data-theme="light"] .cd-auth-links a:hover {
  color: var(--cd-lavender, #ff4d63) !important;
}

.cd-auth-footer,
html[data-theme="light"] .cd-auth-footer {
  color: #a0a0b0 !important;
  font-size: 0.85rem;
}

/* Login Metronic shell */
.cd-auth-body .m-login,
.cd-auth-body .m-login-2--skin-2,
html[data-theme="light"] .cd-auth-body .m-login {
  background: #040404 !important;
  color: #ffffff !important;
}

.cd-auth-body .m-login .form-control,
.cd-auth-body .m-login .m-input,
html[data-theme="light"] .cd-auth-body .m-login .form-control {
  background-color: #151521 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.cd-auth-body .navbar,
.cd-auth-body .navbar-dark,
html[data-theme="light"] .cd-auth-body .navbar {
  background: #040404 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.cd-auth-body .navbar .nav-link,
.cd-auth-body .navbar-brand,
html[data-theme="light"] .cd-auth-body .navbar .nav-link {
  color: #a0a0b0 !important;
}

/* Bootstrap / Metronic text helpers on dark */
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black-50,
html[data-theme="dark"] .m--font-dark {
  color: var(--cd-text) !important;
}

html[data-theme="dark"] .text-muted {
  color: var(--cd-text-muted) !important;
}

html[data-theme="dark"] .alert {
  border-radius: var(--cd-radius-sm);
}

/* DataTables length/filter labels */
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
  color: var(--cd-text-muted) !important;
}

/* Selectpicker dropdown */
html[data-theme="dark"] .bootstrap-select .dropdown-menu {
  background: var(--cd-surface) !important;
}

html[data-theme="dark"] .bootstrap-select .dropdown-menu li a {
  color: var(--cd-text-muted) !important;
}

html[data-theme="dark"] .bootstrap-select .dropdown-menu li a:hover,
html[data-theme="dark"] .bootstrap-select .dropdown-menu li.selected a {
  background: var(--cd-surface-2) !important;
  color: var(--cd-cyan) !important;
}

/* Topbar user / notification dropdowns — force dark */
html[data-theme="dark"] .m-topbar .m-dropdown__inner,
html[data-theme="dark"] .m-topbar .m-dropdown__body,
html[data-theme="dark"] .m-topbar .m-dropdown__content,
html[data-theme="dark"] .m-topbar__user-profile .m-dropdown__inner,
html[data-theme="dark"] .m-topbar__user-profile .m-dropdown__body {
  background-color: var(--cd-surface) !important;
  border: 1px solid var(--cd-border) !important;
  border-radius: var(--cd-radius) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important;
  color: var(--cd-text) !important;
}

html[data-theme="dark"] .m-topbar .m-dropdown__header,
html[data-theme="dark"] .m-topbar__user-profile .m-dropdown__header {
  background: linear-gradient(135deg, #0b0b10 0%, #151521 55%, #1a1228 100%) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--cd-border) !important;
  border-radius: var(--cd-radius) var(--cd-radius) 0 0 !important;
}

html[data-theme="dark"] .m-topbar .m-dropdown__arrow,
html[data-theme="dark"] .m-topbar .m-dropdown__arrow:before {
  color: var(--cd-surface) !important;
  background: var(--cd-surface) !important;
}

html[data-theme="dark"] .m-topbar .m-card-user__name,
html[data-theme="dark"] .m-topbar .m-dropdown__header-title {
  color: var(--cd-text) !important;
}

html[data-theme="dark"] .m-topbar .m-card-user__email,
html[data-theme="dark"] .m-topbar .m-dropdown__header-subtitle,
html[data-theme="dark"] .m-topbar .m-card-user__email.m-link {
  color: var(--cd-text-muted) !important;
}

html[data-theme="dark"] .m-topbar .m-nav .m-nav__link .m-nav__link-text,
html[data-theme="dark"] .m-topbar .m-nav .m-nav__link .m-nav__link-icon,
html[data-theme="dark"] .m-topbar .m-nav--skin-light .m-nav__link .m-nav__link-text,
html[data-theme="dark"] .m-topbar .m-nav--skin-dark .m-nav__link .m-nav__link-text {
  color: var(--cd-text-muted) !important;
}

html[data-theme="dark"] .m-topbar .m-nav .m-nav__item:hover > .m-nav__link .m-nav__link-text,
html[data-theme="dark"] .m-topbar .m-nav .m-nav__item:hover > .m-nav__link .m-nav__link-icon {
  color: var(--cd-cyan) !important;
}

html[data-theme="dark"] .m-topbar .m-nav__separator {
  border-bottom-color: var(--cd-border) !important;
}

html[data-theme="dark"] .m-topbar__user-profile .btn.btn-secondary,
html[data-theme="dark"] .m-topbar__user-profile .m-btn--label-brand {
  background: var(--cd-surface-2) !important;
  border: 1px solid var(--cd-border) !important;
  color: var(--cd-text) !important;
}

html[data-theme="dark"] .m-topbar__user-profile .btn.btn-secondary:hover {
  background: var(--cd-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
}

html[data-theme="dark"] .m-topbar__userpic img {
  border: 2px solid rgba(225, 18, 47, 0.4);
  background: var(--cd-surface-2);
}

/* Pagination active: brand blue instead of Metronic orange where possible */
html[data-theme="dark"] .m-datatable__pager-link--active,
html[data-theme="dark"] .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .page-item.active .page-link {
  background: var(--cd-blue) !important;
  border-color: var(--cd-blue) !important;
  color: #fff !important;
}


/* ========== LIGHT ========== */
html[data-theme="light"] {
  --cd-bg: #e4e6ed;
  --cd-bg-elevated: #e4e6ed;
  --cd-surface: #ffffff;
  --cd-surface-2: #f4f5f8;
  --cd-border: #c5cad6;
  --cd-text: #181c32;
  --cd-text-muted: #4b4f66;
  --cd-label: #3f4254;
}

html[data-theme="light"] body.cd-theme,
html[data-theme="light"] body.m-page--fluid {
  background-color: var(--cd-bg) !important;
  color: var(--cd-text);
}

html[data-theme="light"] .m-body,
html[data-theme="light"] .m-wrapper,
html[data-theme="light"] .m-content,
html[data-theme="light"] #vueRoot {
  background-color: var(--cd-bg-elevated) !important;
  color: var(--cd-text);
}

html[data-theme="light"] .m-header,
html[data-theme="light"] #m_header {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--cd-border);
  box-shadow: 0 1px 0 rgba(0,0,0,.04) !important;
}

/* Keep brand strip dark in light mode (do not whiten) */
html[data-theme="light"] .m-brand,
html[data-theme="light"] .m-brand--skin-dark {
  background-color: #040404 !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .m-brand__toggler span,
html[data-theme="light"] .m-brand__toggler span::before,
html[data-theme="light"] .m-brand__toggler span::after {
  background-color: #a0a0b0 !important;
}

html[data-theme="light"] .m-header-menu .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-text,
html[data-theme="light"] .m-topbar .m-topbar__nav-wrapper .m-topbar__nav .m-nav__item .m-nav__link .m-nav__link-icon {
  color: var(--cd-text-muted) !important;
}

html[data-theme="light"] .m-header-menu .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-text,
html[data-theme="light"] .m-header-menu .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
  color: var(--cd-text) !important;
}

html[data-theme="light"] .m-aside-left,
html[data-theme="light"] .m-aside-left--skin-dark,
html[data-theme="light"] #m_aside_left {
  background-color: #040404 !important; /* match brand strip */
  border-right: 1px solid rgba(255,255,255,.06);
}

html[data-theme="light"] .m-footer {
  background-color: #ffffff !important;
  border-top: 1px solid var(--cd-border) !important;
  color: var(--cd-text-muted) !important;
}

html[data-theme="light"] .m-footer__copyright,
html[data-theme="light"] .m-footer__copyright b {
  color: var(--cd-text-muted) !important;
}

html[data-theme="light"] .m-portlet,
html[data-theme="light"] .card,
html[data-theme="light"] .m-portlet .m-portlet__head,
html[data-theme="light"] .m-portlet .m-portlet__body,
html[data-theme="light"] .cd-card,
html[data-theme="light"] .cd-filter-bar {
  background-color: var(--cd-surface) !important;
  color: var(--cd-text) !important;
  border: 1px solid var(--cd-border) !important;
  border-radius: var(--cd-radius) !important;
  box-shadow: 0 6px 22px rgba(24, 28, 50, 0.09) !important;
}

html[data-theme="light"] .m-portlet .m-portlet__head-text,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6,
html[data-theme="light"] .cd-page-title,
html[data-theme="light"] .cd-card__value {
  color: var(--cd-text) !important;
}

html[data-theme="light"] .cd-page-subtitle,
html[data-theme="light"] .cd-card__label,
html[data-theme="light"] .text-muted {
  color: var(--cd-text-muted) !important;
}

html[data-theme="light"] label,
html[data-theme="light"] .form-label {
  color: var(--cd-label, #3f4254) !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .form-control,
html[data-theme="light"] .bootstrap-select .dropdown-toggle,
html[data-theme="light"] .m-input {
  background-color: #ffffff !important;
  border: 1px solid #b8bdc9 !important;
  color: var(--cd-text) !important;
}

html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .m-btn--custom.btn-secondary {
  background-color: #f4f5f8 !important;
  border: 1px solid var(--cd-border) !important;
  color: var(--cd-text) !important;
}

html[data-theme="light"] .table,
html[data-theme="light"] .table thead th,
html[data-theme="light"] .table td,
html[data-theme="light"] .table th {
  color: var(--cd-text-muted) !important;
  border-color: var(--cd-border) !important;
}

html[data-theme="light"] .table thead th {
  background-color: #f4f5f8 !important;
  color: var(--cd-text) !important;
}

html[data-theme="light"] .table tbody tr,
html[data-theme="light"] table.dataTable tbody tr,
html[data-theme="light"] table.dataTable tbody tr.even {
  background-color: #ffffff !important;
}

html[data-theme="light"] .table-striped tbody tr:nth-of-type(odd),
html[data-theme="light"] table.dataTable tbody tr.odd,
html[data-theme="light"] table.dataTable.stripe tbody tr.odd,
html[data-theme="light"] table.dataTable.display tbody tr.odd {
  background-color: #f1f2f6 !important;
}

html[data-theme="light"] .table-hover tbody tr:hover,
html[data-theme="light"] table.dataTable.hover tbody tr:hover,
html[data-theme="light"] table.dataTable.display tbody tr:hover {
  background-color: #fff0f2 !important;
}

html[data-theme="light"] table.dataTable.display tbody tr > .sorting_1,
html[data-theme="light"] table.dataTable.display tbody tr > .sorting_2,
html[data-theme="light"] table.dataTable.display tbody tr > .sorting_3,
html[data-theme="light"] table.dataTable.display tbody tr.odd > .sorting_1,
html[data-theme="light"] table.dataTable.display tbody tr.even > .sorting_1 {
  background-color: transparent !important;
}

html[data-theme="light"] .modal-content {
  background-color: #ffffff !important;
  color: var(--cd-text) !important;
  border: 1px solid var(--cd-border) !important;
}

html[data-theme="light"] .btn-close {
  filter: none;
}

html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] .bootstrap-select .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid var(--cd-border) !important;
  color: var(--cd-text) !important;
}

html[data-theme="light"] .dropdown-item {
  color: var(--cd-text-muted) !important;
}

html[data-theme="light"] .dropdown-item:hover,
html[data-theme="light"] .dropdown-item:focus {
  background-color: #f4f5f8 !important;
  color: var(--cd-cyan) !important;
}

html[data-theme="light"] .m-topbar .m-dropdown__inner,
html[data-theme="light"] .m-topbar .m-dropdown__body,
html[data-theme="light"] .m-topbar .m-dropdown__content,
html[data-theme="light"] .m-topbar__user-profile .m-dropdown__inner,
html[data-theme="light"] .m-topbar__user-profile .m-dropdown__body {
  background-color: #ffffff !important;
  border: 1px solid var(--cd-border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  color: var(--cd-text) !important;
}

html[data-theme="light"] .m-topbar .m-dropdown__header,
html[data-theme="light"] .m-topbar__user-profile .m-dropdown__header {
  background: linear-gradient(135deg, #e1122f 0%, #ff4d63 100%) !important;
  border-bottom: none !important;
}

html[data-theme="light"] .m-topbar .m-card-user__name,
html[data-theme="light"] .m-topbar .m-card-user__email,
html[data-theme="light"] .m-topbar .m-card-user__email.m-link {
  color: #ffffff !important;
}

html[data-theme="light"] .m-topbar .m-nav .m-nav__link .m-nav__link-text,
html[data-theme="light"] .m-topbar .m-nav .m-nav__link .m-nav__link-icon {
  color: var(--cd-text-muted) !important;
}

html[data-theme="light"] .m-topbar .m-nav .m-nav__item:hover > .m-nav__link .m-nav__link-text,
html[data-theme="light"] .m-topbar .m-nav .m-nav__item:hover > .m-nav__link .m-nav__link-icon {
  color: var(--cd-cyan) !important;
}

html[data-theme="light"] .m-topbar__user-profile .btn.btn-secondary {
  background: #f4f5f8 !important;
  border: 1px solid var(--cd-border) !important;
  color: var(--cd-text) !important;
}

html[data-theme="light"] .m-topbar__userpic img {
  border: 2px solid rgba(225, 18, 47, 0.35);
  background: #f4f5f8;
}

/* Auth stays dark — light overrides removed */


html[data-theme="light"] .text-dark,
html[data-theme="light"] .m--font-dark {
  color: var(--cd-text) !important;
}

html[data-theme="light"] .dataTables_wrapper .dataTables_length,
html[data-theme="light"] .dataTables_wrapper .dataTables_filter,
html[data-theme="light"] .dataTables_wrapper .dataTables_info,
html[data-theme="light"] .dataTables_wrapper .dataTables_paginate {
  color: var(--cd-text-muted) !important;
}

/* Theme dropdown: override generic topbar dropdown nesting */
html[data-theme="dark"] .cd-theme-mode .m-dropdown__inner,
html[data-theme="light"] .cd-theme-mode .m-dropdown__inner {
  padding: 0.4rem !important;
}

html[data-theme="dark"] .cd-theme-mode .m-dropdown__body,
html[data-theme="dark"] .cd-theme-mode .m-dropdown__content,
html[data-theme="light"] .cd-theme-mode .m-dropdown__body,
html[data-theme="light"] .cd-theme-mode .m-dropdown__content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html[data-theme="light"] .cd-theme-mode .m-nav__link-icon,
html[data-theme="light"] .cd-theme-mode #cd_theme_mode_icon {
  color: #6c7293 !important;
}

html[data-theme="dark"] .cd-theme-mode .m-dropdown__inner,
html[data-theme="light"] .cd-theme-mode .m-dropdown__inner {
  background-color: var(--cd-surface) !important;
  border: 1px solid var(--cd-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
  padding: 0.4rem !important;
}

html[data-theme="light"] .cd-theme-mode .m-dropdown__inner {
  background-color: #ffffff !important;
}

html[data-theme="dark"] .cd-theme-mode .m-dropdown__body,
html[data-theme="dark"] .cd-theme-mode .m-dropdown__content,
html[data-theme="light"] .cd-theme-mode .m-dropdown__body,
html[data-theme="light"] .cd-theme-mode .m-dropdown__content {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ========== LIGHT MODE: depth + contrast ========== */
html[data-theme="light"] {
  --cd-bg: #e4e6ed;
  --cd-bg-elevated: #e4e6ed;
  --cd-surface: #ffffff;
  --cd-surface-2: #f4f5f8;
  --cd-border: #c5cad6;
  --cd-text: #181c32;
  --cd-text-muted: #4b4f66;
  --cd-label: #3f4254;
}

/* Brand strip always dark + opaque over white header */
html[data-theme="light"] #m_header .m-brand,
html[data-theme="light"] .m-header .m-brand,
html[data-theme="light"] .m-stack__item.m-brand,
html[data-theme="light"] .m-brand.m-brand--skin-dark {
  background: #040404 !important;
  background-color: #040404 !important;
  background-image: none !important;
  z-index: 2;
}

html[data-theme="light"] .m-brand__logo-wrapper,
html[data-theme="light"] .m-brand__logo-wrapper img.cd-brand-logo {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Surfaces: white cards on cooler gray canvas */
html[data-theme="light"] .m-portlet,
html[data-theme="light"] .card,
html[data-theme="light"] .m-portlet.m-portlet--bordered-semi,
html[data-theme="light"] .cd-card,
html[data-theme="light"] .cd-filter-bar {
  background-color: #ffffff !important;
  border: 1px solid #c5cad6 !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 22px rgba(24, 28, 50, 0.09) !important;
}

html[data-theme="light"] .cd-card {
  padding: 1.25rem 1.5rem !important;
  position: relative !important;
  overflow: hidden !important;
  height: 100%;
  color: var(--cd-text) !important;
}

html[data-theme="light"] .cd-filter-bar {
  padding: 1.35rem 1.5rem !important;
  margin-bottom: 1.35rem !important;
}

html[data-theme="light"] .m-portlet .m-portlet__head {
  background-color: #ffffff !important;
  border-bottom: 1px solid #dde0e8 !important;
  border-radius: 12px 12px 0 0 !important;
}

html[data-theme="light"] .m-portlet .m-portlet__body {
  background-color: #ffffff !important;
  border-radius: 0 0 12px 12px !important;
}

/* Primary text */
html[data-theme="light"] .m-portlet .m-portlet__head-text,
html[data-theme="light"] .m-portlet__head-title .m-portlet__head-text,
html[data-theme="light"] .cd-page-title,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6,
html[data-theme="light"] .cd-card__value,
html[data-theme="light"] .m-widget_content-title,
html[data-theme="light"] .m-widget29 .m-widget_content-title {
  color: #181c32 !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .cd-page-title {
  font-size: 1.5rem !important;
  margin-bottom: 0.25rem !important;
}

/* Form labels: darker than muted (readable on white) */
html[data-theme="light"] label,
html[data-theme="light"] .form-label,
html[data-theme="light"] .m-form .form-control-label {
  color: #3f4254 !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
}

/* Secondary / KPI captions */
html[data-theme="light"] .cd-page-subtitle,
html[data-theme="light"] .cd-card__label,
html[data-theme="light"] .text-muted,
html[data-theme="light"] .m-widget_content-items {
  color: #4b4f66 !important;
}

html[data-theme="light"] .cd-page-subtitle {
  margin-bottom: 1.25rem !important;
}

html[data-theme="light"] .cd-card__label {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

html[data-theme="light"] .cd-card__value {
  font-size: 1.75rem !important;
  line-height: 1.2 !important;
}

/* Inputs: clearer edges */
html[data-theme="light"] .form-control,
html[data-theme="light"] .bootstrap-select .dropdown-toggle,
html[data-theme="light"] .bootstrap-select > .dropdown-toggle.btn-light,
html[data-theme="light"] .m-input,
html[data-theme="light"] select.form-control {
  background-color: #ffffff !important;
  border: 1px solid #b8bdc9 !important;
  color: #181c32 !important;
  box-shadow: none !important;
  min-height: 40px;
}

html[data-theme="light"] .form-control:focus,
html[data-theme="light"] .bootstrap-select .dropdown-toggle:focus {
  border-color: #e1122f !important;
  box-shadow: 0 0 0 0.15rem rgba(225, 18, 47, 0.18) !important;
}

html[data-theme="light"] .form-control::placeholder {
  color: #7e8299 !important;
  opacity: 1;
}

html[data-theme="light"] .table thead th {
  background-color: #eef0f5 !important;
  color: #181c32 !important;
  border-bottom: 1px solid #c5cad6 !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .table td,
html[data-theme="light"] .table th {
  color: #3f4254 !important;
  border-color: #dde0e8 !important;
}

html[data-theme="light"] .m-separator {
  border-bottom-color: #dde0e8 !important;
}

html[data-theme="light"] .m-subheader .m-subheader__title,
html[data-theme="light"] .m-subheader__breadcrumbs-link {
  color: #181c32 !important;
}

html[data-theme="light"] .m--font-accent,
html[data-theme="light"] .m--font-brand {
  color: #e1122f !important;
}

/* Header menu text readable on white */
html[data-theme="light"] .m-header-menu .m-menu__link-text,
html[data-theme="light"] .m-header-menu .m-menu__link-icon {
  color: #5e6278 !important;
}


/* ========== Dark sidebar readable in BOTH themes ==========
   Body light color must NOT win via inheritance; force muted/cyan text. */
html[data-theme="light"] .m-aside-left,
html[data-theme="light"] .m-aside-left--skin-dark,
html[data-theme="light"] #m_aside_left,
html[data-theme="light"] .m-aside-menu.m-aside-menu--skin-dark,
html[data-theme="dark"] .m-aside-left,
html[data-theme="dark"] .m-aside-menu.m-aside-menu--skin-dark {
  color: #a0a0b0 !important;
}

html[data-theme="light"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__link-text,
html[data-theme="light"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__link-icon,
html[data-theme="light"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__link-icon:before,
html[data-theme="light"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__ver-arrow,
html[data-theme="light"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__link-bullet > span,
html[data-theme="dark"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__link-text,
html[data-theme="dark"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__link-icon,
html[data-theme="dark"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__link-icon:before,
html[data-theme="dark"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__ver-arrow,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__link-icon {
  color: #a0a0b0 !important;
}

html[data-theme="light"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__item:hover > .m-menu__link .m-menu__link-text,
html[data-theme="light"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__item:hover > .m-menu__link .m-menu__link-icon,
html[data-theme="light"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
html[data-theme="light"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon,
html[data-theme="dark"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__item:hover > .m-menu__link .m-menu__link-text,
html[data-theme="dark"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__item:hover > .m-menu__link .m-menu__link-icon,
html[data-theme="dark"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
html[data-theme="dark"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon {
  color: #e1122f !important;
}

html[data-theme="light"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__item:hover > .m-menu__link,
html[data-theme="light"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__item.m-menu__item--active > .m-menu__link,
html[data-theme="dark"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__item:hover > .m-menu__link,
html[data-theme="dark"] .m-aside-menu.m-aside-menu--skin-dark .m-menu__item.m-menu__item--active > .m-menu__link {
  background: linear-gradient(135deg, rgba(225, 18, 47, 0.18), rgba(255, 77, 99, 0.12)) !important;
  border-radius: 8px;
}

.m-aside-menu .m-menu__section .m-menu__section-text {
  color: #6c7293 !important;
}

/* Theme toggle: stay in Metronic horizontal topbar row (table/table-cell), do not restyle siblings */
.m-topbar .m-topbar__nav.m-nav > .m-nav__item.cd-theme-mode {
  height: 100%;
}

.m-topbar .m-topbar__nav.m-nav > .m-nav__item.cd-theme-mode > .m-nav__link {
  display: table !important;
  table-layout: fixed;
  height: 100%;
  width: auto;
  padding: 0 !important;
  margin: 0 auto;
}

.m-topbar .m-topbar__nav.m-nav > .m-nav__item.cd-theme-mode > .m-nav__link .m-nav__link-icon {
  display: table-cell !important;
  height: 100%;
  vertical-align: middle !important;
  line-height: 0 !important;
  padding: 0 !important;
  width: auto;
}

.m-topbar .m-topbar__nav.m-nav > .m-nav__item.cd-theme-mode #cd_theme_mode_icon {
  font-size: 1.4rem !important;
  line-height: 0 !important;
  vertical-align: middle;
}

/* Stripe-hosted Add Funds action shared by tenant-admin and buyer headers. */
.cd-add-credit-item {
  display: flex !important;
  align-items: center;
  height: 60px;
  padding: 0 0.75rem;
}

.cd-add-credit-form {
  margin: 0;
}

.cd-add-credit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 118px;
  min-height: 38px;
  padding: 0.55rem 1rem !important;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.cd-add-credit-button i {
  font-size: 1.15rem;
  line-height: 1;
}

@media (max-width: 1200px) {
  .cd-add-credit-item {
    padding: 0 0.4rem;
  }

  .cd-add-credit-button {
    min-width: 108px;
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
  }
}


/* ========== Auth login (SAS²) ========== */
.cd-login,
.cd-auth-body .m-login.cd-login {
  background: transparent !important;
}
.cd-login .m-login__container {
  max-width: 380px;
}
.cd-login .cd-auth-logo {
  max-width: 240px;
  margin-bottom: 1.75rem;
}
.cd-login .form-control,
.cd-login .m-input {
  background: #151521 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #fff !important;
  border-radius: 8px !important;
  min-height: 46px;
  box-shadow: none !important;
}
.cd-login .form-control:focus {
  border-color: #e1122f !important;
  box-shadow: 0 0 0 0.15rem rgba(225, 18, 47, 0.2) !important;
}
.cd-login .m-login__form-sub {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}
.cd-login .m-link {
  color: #a0a0b0 !important;
  font-size: 0.85rem;
}
.cd-login .m-link:hover {
  color: #e1122f !important;
}
.cd-login .m-checkbox {
  color: #a0a0b0;
}
.cd-login .m-checkbox > input:checked ~ span {
  background: #e1122f !important;
  border-color: #e1122f !important;
}
.cd-login__submit,
.cd-login .m-login__btn--primary,
.cd-auth-body .m-login__btn--primary,
.cd-auth-body .btn-focus.m-login__btn,
.cd-auth-body .btn.btn-focus,
.cd-auth-body .btn-focus {
  background: var(--cd-primary) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: #fff !important;
  width: 100%;
  min-height: 46px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cd-login__submit:hover,
.cd-login .m-login__btn--primary:hover,
.cd-auth-body .m-login__btn--primary:hover,
.cd-auth-body .btn-focus:hover,
.cd-auth-body .btn-focus:focus,
.cd-auth-body .btn.btn-focus:hover {
  background: var(--cd-primary-hover) !important;
  color: #fff !important;
}


/* ========== Compact shell (logo + header text) ========== */
.m-header-menu .m-menu__link-text .h3,
.m-header-menu .m-menu__link-text .h4,
.m-header-menu .m-menu__link-text h3,
.m-header-menu .m-menu__link-text h4 {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  display: inline;
}
.m-header-menu .m-menu__link-text .h3 {
  color: #a0a0b0 !important;
  font-weight: 400 !important;
}
.m-header-menu .m-menu__nav > .m-menu__item > .m-menu__link {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.m-header-menu .m-menu__link-icon {
  font-size: 1.1rem !important;
}
.m-aside-menu.m-aside-menu--skin-dark .m-menu__link-text {
  font-size: 0.92rem !important;
  font-weight: 500 !important;
}
.m-aside-menu.m-aside-menu--skin-dark .m-menu__link-icon {
  font-size: 1.15rem !important;
}
.m-aside-menu .m-menu__nav > .m-menu__item > .m-menu__link {
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
}
.m-brand__logo-wrapper.text-light.h3 {
  font-size: inherit !important;
  margin: 0 !important;
}
.cd-add-credit-item {
  height: 60px !important;
}

.cd-topbar-label {
  color: #a0a0b0 !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  margin-right: 0.35rem;
}
.cd-topbar-value {
  color: #fff !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  margin-left: 0.15rem !important;
}
html[data-theme="light"] .cd-topbar-value {
  color: #181c32 !important;
}
html[data-theme="light"] .cd-topbar-label {
  color: #5e6278 !important;
}