/* Dynamic Theme Color Override CSS */
/* This file overrides all hardcoded #f7858d colors with CSS variables */

:root {
    --theme-color: #f7858d; /* Default fallback */
}

/* Global override for ALL elements using #f7858d */
/* This is a comprehensive approach to replace all hardcoded colors */

/* Button and form controls */
.btn-primary-cm,
.btn-primary-cm:hover,
.btn-primary-cm:focus,
.btn-primary-cm:active,
button[style*="background-color: #f7858d"],
button[style*="background: #f7858d"] {
    background-color: var(--theme-color) !important;
    background: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
}

/* All color properties - comprehensive selector */
*[style*="color: #f7858d"],
.text-theme,
.primary-text,
a[style*="color: #f7858d"],
span[style*="color: #f7858d"],
div[style*="color: #f7858d"],
p[style*="color: #f7858d"] {
    color: var(--theme-color) !important;
}

/* All background properties - comprehensive selector */
*[style*="background: #f7858d"],
*[style*="background-color: #f7858d"],
.bg-theme,
.primary-bg,
div[style*="background: #f7858d"],
div[style*="background-color: #f7858d"],
section[style*="background: #f7858d"],
header[style*="background: #f7858d"] {
    background: var(--theme-color) !important;
    background-color: var(--theme-color) !important;
}

/* All border properties - comprehensive selector */
*[style*="border-color: #f7858d"],
*[style*="border-bottom-color: #f7858d"],
*[style*="border-top-color: #f7858d"],
*[style*="border-left-color: #f7858d"],
*[style*="border-right-color: #f7858d"],
*[style*="border: 1px solid #f7858d"],
*[style*="border-bottom: 1px solid #f7858d"],
*[style*="border-bottom: 1px dashed #f7858d"],
.border-theme {
    border-color: var(--theme-color) !important;
    border-bottom-color: var(--theme-color) !important;
    border-top-color: var(--theme-color) !important;
    border-left-color: var(--theme-color) !important;
    border-right-color: var(--theme-color) !important;
}

/* Class-based overrides for main.css */
.theme-color,
.primary-color {
    color: var(--theme-color) !important;
}

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

.theme-border,
.primary-border {
    border-color: var(--theme-color) !important;
}

/* SVG fill colors */
svg[fill="#f7858d"],
*[fill="#f7858d"],
polygon[fill="#f7858d"],
path[fill="#f7858d"],
ellipse[fill="#f7858d"] {
    fill: var(--theme-color) !important;
}

/* Pseudo-elements that might use theme color */
*::before[style*="#f7858d"],
*::after[style*="#f7858d"] {
    background-color: var(--theme-color) !important;
    color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
}

/* Meta tag theme colors will be handled via ViewBag in Layout */

/* Specific CSS rules that are commonly used with the theme color */
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff !important;
    border-color: var(--theme-color) !important;
    background-color: var(--theme-color) !important;
}