/* Client area brand palette overrides
   Ensures all frontend dashboard pages consume shared brand variables. */

:root {
  --brand-primary-soft: color-mix(in srgb, var(--brand-primary, #2948fa) 14%, var(--brand-surface, #ffffff));
  --brand-emphasis-soft: color-mix(in srgb, var(--brand-emphasis, #39f797) 18%, var(--brand-surface, #ffffff));
  --brand-text-soft: color-mix(in srgb, var(--brand-text, #131126) 60%, var(--brand-surface, #ffffff));
  --brand-border: color-mix(in srgb, var(--brand-text, #131126) 18%, transparent);
}

body,
.app-wrapper,
.app-content,
main {
  color: var(--brand-text, #131126);
}

a,
.link-primary {
  color: var(--brand-primary, #2948fa);
}

a:hover,
a:focus-visible,
.link-primary:hover,
.link-primary:focus-visible {
  color: var(--brand-primary-hover, #2948fa);
}

/* Core utility text/background tokens */
.text-primary,
.text-light-primary,
.text-bg-primary {
  color: var(--brand-primary, #2948fa) !important;
}

.text-secondary,
.text-info,
.text-light-info {
  color: var(--brand-emphasis, #39f797) !important;
}

.text-success,
.text-light-success {
  color: var(--brand-primary, #2948fa) !important;
}

.text-danger,
.text-warning,
.text-light-warning,
.text-light-danger {
  color: var(--brand-text, #131126) !important;
}

.text-muted {
  color: var(--brand-text-soft) !important;
}

.bg-primary,
.bg-success {
  background-color: var(--brand-primary, #2948fa) !important;
}

.bg-secondary,
.bg-info,
.bg-warning {
  background-color: var(--brand-emphasis, #39f797) !important;
}

.bg-danger,
.bg-dark {
  background-color: var(--brand-text, #131126) !important;
}

.bg-light {
  background-color: var(--brand-surface-alt, #ffffff) !important;
}

.bg-light-primary,
.bg-light-success {
  background-color: var(--brand-primary-soft) !important;
  color: var(--brand-primary, #2948fa) !important;
}

.bg-light-secondary,
.bg-light-info,
.bg-light-warning {
  background-color: var(--brand-emphasis-soft) !important;
  color: var(--brand-emphasis, #39f797) !important;
}

.bg-light-danger,
.bg-light-dark {
  background-color: color-mix(in srgb, var(--brand-text, #131126) 12%, var(--brand-surface, #ffffff)) !important;
  color: var(--brand-text, #131126) !important;
}

/* Buttons */
.btn-primary,
.btn-success {
  background-color: var(--brand-primary, #2948fa) !important;
  border-color: var(--brand-primary, #2948fa) !important;
  color: var(--brand-surface, #ffffff) !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-success:hover,
.btn-success:active,
.btn-success:focus {
  background-color: var(--brand-primary-hover, #2948fa) !important;
  border-color: var(--brand-primary-hover, #2948fa) !important;
  color: var(--brand-surface, #ffffff) !important;
}

.btn-secondary,
.btn-info,
.btn-warning {
  background-color: var(--brand-emphasis, #39f797) !important;
  border-color: var(--brand-emphasis, #39f797) !important;
  color: var(--brand-text, #131126) !important;
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus,
.btn-info:hover,
.btn-info:active,
.btn-info:focus,
.btn-warning:hover,
.btn-warning:active,
.btn-warning:focus {
  background-color: color-mix(in srgb, var(--brand-emphasis, #39f797) 84%, var(--brand-text, #131126)) !important;
  border-color: color-mix(in srgb, var(--brand-emphasis, #39f797) 84%, var(--brand-text, #131126)) !important;
  color: var(--brand-text, #131126) !important;
}

.btn-danger,
.btn-dark {
  background-color: var(--brand-text, #131126) !important;
  border-color: var(--brand-text, #131126) !important;
  color: var(--brand-surface, #ffffff) !important;
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus,
.btn-dark:hover,
.btn-dark:active,
.btn-dark:focus {
  background-color: color-mix(in srgb, var(--brand-text, #131126) 88%, #000000) !important;
  border-color: color-mix(in srgb, var(--brand-text, #131126) 88%, #000000) !important;
}

.btn-outline-primary,
.btn-outline-success {
  color: var(--brand-primary, #2948fa) !important;
  border-color: var(--brand-primary, #2948fa) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-outline-success:hover,
.btn-outline-success:active,
.btn-outline-success:focus {
  background-color: var(--brand-primary, #2948fa) !important;
  color: var(--brand-surface, #ffffff) !important;
  border-color: var(--brand-primary, #2948fa) !important;
}

.btn-outline-secondary,
.btn-outline-info,
.btn-outline-warning {
  color: var(--brand-emphasis, #39f797) !important;
  border-color: var(--brand-emphasis, #39f797) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary:focus,
.btn-outline-info:hover,
.btn-outline-info:active,
.btn-outline-info:focus,
.btn-outline-warning:hover,
.btn-outline-warning:active,
.btn-outline-warning:focus {
  background-color: var(--brand-emphasis, #39f797) !important;
  color: var(--brand-text, #131126) !important;
  border-color: var(--brand-emphasis, #39f797) !important;
}

.btn-outline-danger,
.btn-outline-dark {
  color: var(--brand-text, #131126) !important;
  border-color: var(--brand-text, #131126) !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:active,
.btn-outline-danger:focus,
.btn-outline-dark:hover,
.btn-outline-dark:active,
.btn-outline-dark:focus {
  background-color: var(--brand-text, #131126) !important;
  color: var(--brand-surface, #ffffff) !important;
  border-color: var(--brand-text, #131126) !important;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--brand-primary, #2948fa) !important;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-primary, #2948fa) 28%, transparent) !important;
}

.btn.disabled,
.btn:disabled {
  background-color: color-mix(in srgb, var(--brand-surface-alt, #ffffff) 70%, var(--brand-text, #131126)) !important;
  border-color: color-mix(in srgb, var(--brand-surface-alt, #ffffff) 70%, var(--brand-text, #131126)) !important;
  color: var(--brand-text-soft) !important;
  opacity: 0.75;
}

/* Cards, borders, controls */
.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.list-group-item,
.table,
.accordion-item,
.form-control,
.form-select,
.input-group-text {
  border-color: var(--brand-border) !important;
}

.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.list-group-item {
  background-color: var(--brand-surface, #ffffff);
}

/* Alerts */
.alert-primary,
.alert-success {
  background-color: var(--brand-primary-soft) !important;
  border-color: color-mix(in srgb, var(--brand-primary, #2948fa) 36%, transparent) !important;
  color: var(--brand-primary, #2948fa) !important;
}

.alert-secondary,
.alert-info,
.alert-warning {
  background-color: var(--brand-emphasis-soft) !important;
  border-color: color-mix(in srgb, var(--brand-emphasis, #39f797) 42%, transparent) !important;
  color: var(--brand-text, #131126) !important;
}

.alert-danger,
.alert-dark {
  background-color: color-mix(in srgb, var(--brand-text, #131126) 10%, var(--brand-surface, #ffffff)) !important;
  border-color: color-mix(in srgb, var(--brand-text, #131126) 36%, transparent) !important;
  color: var(--brand-text, #131126) !important;
}

/* Badges + icon accents */
.badge.bg-primary,
.badge.bg-success {
  background-color: var(--brand-primary, #2948fa) !important;
  color: var(--brand-surface, #ffffff) !important;
}

.badge.bg-secondary,
.badge.bg-info,
.badge.bg-warning {
  background-color: var(--brand-emphasis, #39f797) !important;
  color: var(--brand-text, #131126) !important;
}

.badge.bg-danger,
.badge.bg-dark {
  background-color: var(--brand-text, #131126) !important;
  color: var(--brand-surface, #ffffff) !important;
}

.icon-primary,
i.text-primary,
svg.text-primary {
  color: var(--brand-primary, #2948fa) !important;
}

/* Sidebar/menu specific harmonization */
nav .app-nav .main-nav > li:not(.menu-title) > a[aria-expanded=true],
nav .app-nav .main-nav > li:not(.menu-title) > a.active,
nav .main-nav > li > a.active,
nav .main-nav .no-sub > a.active {
  background: linear-gradient(
    90deg,
    var(--brand-primary, #2948fa) 0%,
    var(--brand-primary-hover, #2948fa) 100%
  ) !important;
  color: var(--brand-surface, #ffffff) !important;
  border-color: color-mix(in srgb, var(--brand-primary, #2948fa) 45%, transparent) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-primary, #2948fa) 30%, transparent) !important;
}

nav .app-nav .main-nav > li:not(.menu-title) > a i.ph-light,
nav .app-nav .main-nav > li:not(.menu-title) > a i.ph-duotone,
nav .app-nav .main-nav > li:not(.menu-title) > a i.ph-bold,
nav .app-nav .main-nav > li:not(.menu-title) > a i.ph,
nav .app-nav .main-nav > li:not(.menu-title) > a i.ti,
nav .app-nav .main-nav > li:not(.menu-title) > a svg {
  color: #ffffff !important;
  opacity: 1 !important;
}

nav .app-nav .main-nav > li:not(.menu-title) > a.active i.ph-light,
nav .app-nav .main-nav > li:not(.menu-title) > a.active i.ph-duotone,
nav .app-nav .main-nav > li:not(.menu-title) > a.active i.ph-bold,
nav .app-nav .main-nav > li:not(.menu-title) > a.active i.ph,
nav .app-nav .main-nav > li:not(.menu-title) > a.active i.ti,
nav .app-nav .main-nav > li:not(.menu-title) > a.active svg {
  color: var(--brand-surface, #ffffff) !important;
}

/* Dashboard widgets that had hardcoded purple */
.eshop-cards-container .eshop-icon-box,
.client-dashboard-modern .eshop-cards-container .eshop-icon-box {
  background-color: color-mix(in srgb, var(--brand-primary, #2948fa) 78%, var(--brand-surface, #ffffff)) !important;
  border-color: var(--brand-primary, #2948fa) !important;
  color: var(--brand-surface, #ffffff) !important;
}

.eshop-cards-container .eshop-icon-box i,
.client-dashboard-modern .eshop-cards-container .eshop-icon-box i {
  color: var(--brand-surface, #ffffff) !important;
}

.eshop-cards-container .eshop-cards h3,
.client-dashboard-modern .eshop-cards-container .eshop-cards h3 {
  color: var(--brand-text, #131126) !important;
}

.eshop-cards-container .eshop-cards a.badge,
.client-dashboard-modern .eshop-cards-container .eshop-cards a.badge {
  background: linear-gradient(
    135deg,
    var(--brand-primary, #2948fa) 0%,
    var(--brand-primary-hover, #2948fa) 100%
  ) !important;
  border-color: var(--brand-primary, #2948fa) !important;
  color: var(--brand-surface, #ffffff) !important;
}

/* KPI ripple / pulse: translucent rings + low opacity so titles stay readable */
.client-dashboard-modern .eshop-cards-container .eshop-cards {
  --ripple-color: color-mix(in srgb, var(--brand-primary, #2948fa) 14%, transparent);
}

.client-dashboard-modern .eshop-cards-container .eshop-cards .ripple-effect {
  opacity: 0.28 !important;
}

.client-dashboard-modern .eshop-cards-container .eshop-cards:hover .ripple-effect {
  opacity: 0.38 !important;
}

.client-dashboard-modern .card.dashboard-card-pulse .eshop-cards .ripple-effect {
  opacity: 0.28 !important;
}

/* Banner + floating assistant button */
.impersonation-banner {
  color: var(--brand-surface, #ffffff) !important;
  background: linear-gradient(
    90deg,
    var(--brand-primary, #2948fa) 0%,
    var(--brand-primary-hover, #2948fa) 100%
  ) !important;
}

.impersonation-banner a.btn {
  background-color: var(--brand-text, #131126) !important;
  border-color: var(--brand-text, #131126) !important;
  color: var(--brand-surface, #ffffff) !important;
}

#support-assistant-button,
.support-assistant-button,
.btn-support-assistant,
#ai-support-fab,
.ai-support-fab {
  background: linear-gradient(
    135deg,
    var(--brand-primary, #2948fa) 0%,
    var(--brand-primary-hover, #2948fa) 100%
  ) !important;
  border-color: var(--brand-primary, #2948fa) !important;
  color: var(--brand-surface, #ffffff) !important;
}

#support-assistant-button:hover,
#support-assistant-button:focus-visible,
.support-assistant-button:hover,
.support-assistant-button:focus-visible,
.btn-support-assistant:hover,
.btn-support-assistant:focus-visible,
#ai-support-fab:hover,
#ai-support-fab:focus-visible,
.ai-support-fab:hover,
.ai-support-fab:focus-visible {
  background: linear-gradient(
    135deg,
    var(--brand-primary-hover, #2948fa) 0%,
    var(--brand-primary, #2948fa) 100%
  ) !important;
  border-color: var(--brand-primary-hover, #2948fa) !important;
  color: var(--brand-surface, #ffffff) !important;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--brand-primary, #2948fa) 34%, transparent) !important;
}

#ai-support-fab .ai-support-fab-label,
.ai-support-fab .ai-support-fab-label,
#ai-support-fab i,
.ai-support-fab i,
#ai-support-fab svg,
.ai-support-fab svg {
  color: var(--brand-surface, #ffffff) !important;
}

/* Dark mode: brand “light” cards/modals keep dark copy (global theme inverts --dark and --text-secondary) */

/*
 * Customer dashboard (index): cards stay on --brand-surface while body.dark flips semantic vars to white.
 * Redefine those variables on each card so var(--text-secondary), var(--dark), card color resolve to dark ink.
 */
body.dark .client-dashboard-modern .card {
  --text-secondary: color-mix(
    in srgb,
    var(--brand-text, #131126) 72%,
    transparent
  );
  --text-muted: color-mix(
    in srgb,
    var(--brand-text, #131126) 58%,
    var(--brand-surface, #ffffff)
  );
  --font-color: var(--brand-text, #131126);
  --body-color: var(--brand-text, #131126);
  --dark: var(--brand-text, #131126);
  --bs-card-color: var(--brand-text, #131126);
  --bs-body-color: var(--brand-text, #131126);
  color: var(--brand-text, #131126);
}

body.dark .app-content .card,
body.dark .app-content .modal-content {
  color: var(--brand-text, #131126);
  --bs-card-color: var(--brand-text, #131126);
}

body.dark .app-content .card .text-muted,
body.dark .app-content .modal-content .text-muted {
  color: color-mix(
    in srgb,
    var(--brand-text, #131126) 58%,
    var(--brand-surface, #ffffff)
  ) !important;
}

body.dark .client-dashboard-modern .eshop-cards-container .eshop-cards p {
  color: var(--brand-text, #131126) !important;
}

body.dark .client-dashboard-modern .card .card-body .text-muted {
  color: color-mix(
    in srgb,
    var(--brand-text, #131126) 58%,
    var(--brand-surface, #ffffff)
  ) !important;
}

body.dark .app-content .card .text-dark,
body.dark .app-content .card .text-dark-300,
body.dark .app-content .card .text-dark-400,
body.dark .app-content .card .text-dark-500,
body.dark .app-content .card .text-dark-600,
body.dark .app-content .card .text-dark-700,
body.dark .app-content .card .text-dark-800,
body.dark .app-content .card .text-dark-900,
body.dark .app-content .card .link-dark,
body.dark .app-content .modal-content .text-dark,
body.dark .app-content .modal-content .text-dark-300,
body.dark .app-content .modal-content .text-dark-400,
body.dark .app-content .modal-content .text-dark-500,
body.dark .app-content .modal-content .text-dark-600,
body.dark .app-content .modal-content .text-dark-700,
body.dark .app-content .modal-content .text-dark-800,
body.dark .app-content .modal-content .text-dark-900,
body.dark .app-content .modal-content .link-dark {
  color: var(--brand-text, #131126) !important;
}

body.dark .app-content .offcanvas,
body.dark .app-content .dropdown-menu {
  color: var(--brand-text, #131126);
}

body.dark .app-content .offcanvas .text-muted,
body.dark .app-content .dropdown-menu .text-muted {
  color: color-mix(
    in srgb,
    var(--brand-text, #131126) 58%,
    var(--brand-surface, #ffffff)
  ) !important;
}

/* Header: fixed slot + stacked icons so the theme control stays inline next to cart/notification */
header.header-main .container-fluid .header-right .header-dark {
  flex: 0 0 40px;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
}

header.header-main .container-fluid .header-right .header-dark .sun-logo,
header.header-main .container-fluid .header-right .header-dark .moon-logo {
  position: absolute;
  top: 0;
  left: 0;
}

/*
 * Sidebar gear menu lives under <nav>, not .app-content. Dark-mode tokens can still paint
 * dropdown links as light-on-light; force readable brand-text on the light flyout surface.
 */
nav .app-logo .profile-menu-dropdown .dropdown-menu {
  color: var(--brand-text, #131126) !important;
}

nav .app-logo .profile-menu-dropdown .dropdown-menu .dropdown-item > a {
  color: var(--brand-text, #131126) !important;
}

nav .app-logo .profile-menu-dropdown .dropdown-menu .dropdown-item > a:hover,
nav .app-logo .profile-menu-dropdown .dropdown-menu .dropdown-item > a:focus {
  color: var(--brand-primary, #2948fa) !important;
}

nav .app-logo .profile-menu-dropdown .dropdown-menu .dropdown-item > a i,
nav .app-logo .profile-menu-dropdown .dropdown-menu .dropdown-item > a svg {
  color: inherit !important;
  opacity: 1 !important;
}

/* Mobile scroll safety: keep page scrollable in client view */
@media screen and (max-width: 768px) {
  body:not(.menu-open-mobile):not(.modal-open) {
    overflow-y: auto !important;
    position: static !important;
    width: auto !important;
    top: auto !important;
  }

  .app-wrapper .app-content,
  .app-wrapper .app-content main,
  .client-dashboard-modern main {
    overflow: visible !important;
  }
}