/* Dynamic Color Utilities - Generated from Database Settings */

/* Primary Color System */
:root {
    --primary-color: {{ ic_setting('ui_primary_color') }};
    --secondary-color: {{ ic_setting('ui_secondary_color') }};
    --accent-color: {{ ic_setting('ui_accent_color') }};
    --success-color: {{ ic_setting('ui_success_color') }};
    --warning-color: {{ ic_setting('ui_warning_color') }};
    --error-color: {{ ic_setting('ui_error_color') }};
    --info-color: {{ ic_setting('ui_info_color') }};
}

/* Primary Color Utilities */
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-accent { color: var(--accent-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-error { color: var(--error-color) !important; }
.text-info { color: var(--info-color) !important; }

/* Background Color Utilities */
.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-accent { background-color: var(--accent-color) !important; }
.bg-success { background-color: var(--success-color) !important; }
.bg-warning { background-color: var(--warning-color) !important; }
.bg-error { background-color: var(--error-color) !important; }
.bg-info { background-color: var(--info-color) !important; }

/* Light Background Colors (with transparency) */
.bg-primary-light { background-color: color-mix(in srgb, var(--primary-color) 15%, transparent) !important; }
.bg-secondary-light { background-color: color-mix(in srgb, var(--secondary-color) 15%, transparent) !important; }
.bg-accent-light { background-color: color-mix(in srgb, var(--accent-color) 15%, transparent) !important; }
.bg-success-light { background-color: color-mix(in srgb, var(--success-color) 15%, transparent) !important; }
.bg-warning-light { background-color: color-mix(in srgb, var(--warning-color) 15%, transparent) !important; }
.bg-error-light { background-color: color-mix(in srgb, var(--error-color) 15%, transparent) !important; }
.bg-info-light { background-color: color-mix(in srgb, var(--info-color) 15%, transparent) !important; }

/* Border Color Utilities */
.border-primary { border-color: var(--primary-color) !important; }
.border-secondary { border-color: var(--secondary-color) !important; }
.border-accent { border-color: var(--accent-color) !important; }
.border-success { border-color: var(--success-color) !important; }
.border-warning { border-color: var(--warning-color) !important; }
.border-error { border-color: var(--error-color) !important; }
.border-info { border-color: var(--info-color) !important; }

/* Hover States */
.hover\:text-primary:hover { color: var(--primary-color) !important; }
.hover\:text-secondary:hover { color: var(--secondary-color) !important; }
.hover\:text-accent:hover { color: var(--accent-color) !important; }
.hover\:text-success:hover { color: var(--success-color) !important; }
.hover\:text-warning:hover { color: var(--warning-color) !important; }
.hover\:text-error:hover { color: var(--error-color) !important; }
.hover\:text-info:hover { color: var(--info-color) !important; }

.hover\:bg-primary:hover { background-color: var(--primary-color) !important; }
.hover\:bg-secondary:hover { background-color: var(--secondary-color) !important; }
.hover\:bg-accent:hover { background-color: var(--accent-color) !important; }
.hover\:bg-success:hover { background-color: var(--success-color) !important; }
.hover\:bg-warning:hover { background-color: var(--warning-color) !important; }
.hover\:bg-error:hover { background-color: var(--error-color) !important; }
.hover\:bg-info:hover { background-color: var(--info-color) !important; }

.hover\:border-primary:hover { border-color: var(--primary-color) !important; }
.hover\:border-secondary:hover { border-color: var(--secondary-color) !important; }
.hover\:border-accent:hover { border-color: var(--accent-color) !important; }
.hover\:border-success:hover { border-color: var(--success-color) !important; }
.hover\:border-warning:hover { border-color: var(--warning-color) !important; }
.hover\:border-error:hover { border-color: var(--error-color) !important; }
.hover\:border-info:hover { border-color: var(--info-color) !important; }

/* Focus States */
.focus\:border-primary:focus { border-color: var(--primary-color) !important; }
.focus\:border-secondary:focus { border-color: var(--secondary-color) !important; }
.focus\:border-accent:focus { border-color: var(--accent-color) !important; }
.focus\:border-success:focus { border-color: var(--success-color) !important; }
.focus\:border-warning:focus { border-color: var(--warning-color) !important; }
.focus\:border-error:focus { border-color: var(--error-color) !important; }
.focus\:border-info:focus { border-color: var(--info-color) !important; }

.focus\:ring-primary:focus { --tw-ring-color: var(--primary-color) !important; }
.focus\:ring-secondary:focus { --tw-ring-color: var(--secondary-color) !important; }
.focus\:ring-accent:focus { --tw-ring-color: var(--accent-color) !important; }
.focus\:ring-success:focus { --tw-ring-color: var(--success-color) !important; }
.focus\:ring-warning:focus { --tw-ring-color: var(--warning-color) !important; }
.focus\:ring-error:focus { --tw-ring-color: var(--error-color) !important; }
.focus\:ring-info:focus { --tw-ring-color: var(--info-color) !important; }

/* Button Styles */
.btn-primary {
    background-color: var(--primary-color) !important;
    color: white !important;
    border: 1px solid var(--primary-color) !important;
}

.btn-primary:hover {
    background-color: color-mix(in srgb, var(--primary-color) 90%, black) !important;
    border-color: color-mix(in srgb, var(--primary-color) 90%, black) !important;
}

.btn-secondary {
    background-color: var(--secondary-color) !important;
    color: white !important;
    border: 1px solid var(--secondary-color) !important;
}

.btn-secondary:hover {
    background-color: color-mix(in srgb, var(--secondary-color) 90%, black) !important;
    border-color: color-mix(in srgb, var(--secondary-color) 90%, black) !important;
}

.btn-success {
    background-color: var(--success-color) !important;
    color: white !important;
    border: 1px solid var(--success-color) !important;
}

.btn-success:hover {
    background-color: color-mix(in srgb, var(--success-color) 90%, black) !important;
    border-color: color-mix(in srgb, var(--success-color) 90%, black) !important;
}

.btn-warning {
    background-color: var(--warning-color) !important;
    color: white !important;
    border: 1px solid var(--warning-color) !important;
}

.btn-warning:hover {
    background-color: color-mix(in srgb, var(--warning-color) 90%, black) !important;
    border-color: color-mix(in srgb, var(--warning-color) 90%, black) !important;
}

.btn-error {
    background-color: var(--error-color) !important;
    color: white !important;
    border: 1px solid var(--error-color) !important;
}

.btn-error:hover {
    background-color: color-mix(in srgb, var(--error-color) 90%, black) !important;
    border-color: color-mix(in srgb, var(--error-color) 90%, black) !important;
}

/* Outline Button Styles */
.btn-outline-primary {
    background-color: transparent !important;
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}

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

.btn-outline-secondary {
    background-color: transparent !important;
    color: var(--secondary-color) !important;
    border: 1px solid var(--secondary-color) !important;
}

.btn-outline-secondary:hover {
    background-color: var(--secondary-color) !important;
    color: white !important;
}

/* Link Styles */
.link-primary {
    color: var(--primary-color) !important;
    text-decoration: none !important;
}

.link-primary:hover {
    color: color-mix(in srgb, var(--primary-color) 80%, black) !important;
    text-decoration: underline !important;
}

.link-secondary {
    color: var(--secondary-color) !important;
    text-decoration: none !important;
}

.link-secondary:hover {
    color: color-mix(in srgb, var(--secondary-color) 80%, black) !important;
    text-decoration: underline !important;
}

/* Form Elements */
.input-primary:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent) !important;
}

.input-secondary:focus {
    border-color: var(--secondary-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary-color) 20%, transparent) !important;
}

/* Custom Scrollbar */
.scrollbar-primary::-webkit-scrollbar-thumb {
    background-color: var(--primary-color) !important;
}

.scrollbar-secondary::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color) !important;
}

/* Selection */
.selection-primary::selection {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.selection-secondary::selection {
    background-color: var(--secondary-color) !important;
    color: white !important;
}

/* Status Indicators */
.status-success {
    background-color: var(--success-color) !important;
    color: white !important;
}

.status-warning {
    background-color: var(--warning-color) !important;
    color: white !important;
}

.status-error {
    background-color: var(--error-color) !important;
    color: white !important;
}

.status-info {
    background-color: var(--info-color) !important;
    color: white !important;
}

/* Badge Styles */
.badge-primary {
    background-color: var(--primary-color) !important;
    color: white !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

.badge-secondary {
    background-color: var(--secondary-color) !important;
    color: white !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

.badge-success {
    background-color: var(--success-color) !important;
    color: white !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

.badge-warning {
    background-color: var(--warning-color) !important;
    color: white !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

.badge-error {
    background-color: var(--error-color) !important;
    color: white !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

.badge-info {
    background-color: var(--info-color) !important;
    color: white !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}