/* ==========================================================================
   Theme Colors System - Parameterized Booking System
   ========================================================================== */

/* Base color variables that will be overridden by inline styles */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --accent-color: #28a745;
    --text-color: #333333;
    --background-color: #ffffff;
}

/* Full color application mode */
body.full-color-mode {
    background-color: color-mix(in srgb, var(--primary-color) 8%, white) !important;
}

body.full-color-mode .navbar {
    background-color: var(--primary-color) !important;
    background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 85%, black)) !important;
}

body.full-color-mode .navbar-brand,
body.full-color-mode .navbar-nav-main .nav-link {
    color: white !important;
}

body.full-color-mode .offcanvas-menu .nav-link {
    color: var(--text-color) !important;
}

body.full-color-mode .offcanvas-title {
    color: var(--text-color) !important;
}

body.full-color-mode .offcanvas {
    background-color: color-mix(in srgb, var(--primary-color) 8%, white) !important;
}

body.full-color-mode .btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

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

body.full-color-mode .card {
    border-color: var(--primary-color);
}

body.full-color-mode .service-card {
    border: 1px solid var(--primary-color);
}

body.full-color-mode .service-details {
    background-color: color-mix(in srgb, var(--primary-color) 10%, white);
}

/* Ensure proper text colors in full mode */
body.full-color-mode .card-title,
body.full-color-mode .card-text,
body.full-color-mode .service-name,
body.full-color-mode .service-description,
body.full-color-mode .stat-label {
    color: var(--text-color) !important;
}

body.full-color-mode .card-title:hover,
body.full-color-mode .service-name:hover {
    color: var(--primary-color) !important;
}

/* Minimal color application mode */
body.minimal-color-mode .btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

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

body.minimal-color-mode .navbar-brand {
    color: var(--primary-color) !important;
    font-weight: bold;
}

body.minimal-color-mode .stat-value {
    color: var(--primary-color) !important;
}

/* Ensure proper text colors in minimal mode */
body.minimal-color-mode .card-title,
body.minimal-color-mode .card-text,
body.minimal-color-mode .service-name,
body.minimal-color-mode .service-description,
body.minimal-color-mode .stat-label {
    color: var(--text-color) !important;
}

body.minimal-color-mode .card-title:hover,
body.minimal-color-mode .service-name:hover {
    color: var(--primary-color) !important;
}

/* Nav-pills active tab styling */
body.full-color-mode .nav-pills .nav-link.active,
body.minimal-color-mode .nav-pills .nav-link.active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

body.full-color-mode .nav-pills .nav-link,
body.minimal-color-mode .nav-pills .nav-link {
    color: var(--text-color) !important;
}

body.full-color-mode .nav-pills .nav-link:hover,
body.minimal-color-mode .nav-pills .nav-link:hover {
    background-color: color-mix(in srgb, var(--primary-color) 20%, white) !important;
    color: var(--primary-color) !important;
}

/* Dropdown menu hover effects to match navbar */
.dropdown-item:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* Back to Services button custom hover */
.back-to-services-btn:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
}

/* Service card hover effects */
.service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}