/* GAFAM Dependence Analysis Tool - Custom Styles */

/* Brand Colors from the-frog.fr */
:root {
    --frog-green: #47A153;
    --frog-green-dark: #038F4E;
    --frog-green-light: #5cb865;
}

/* Light mode overrides */
[data-bs-theme="light"] {
    --bs-primary: var(--frog-green);
    --bs-primary-rgb: 71, 161, 83;
}

/* Dark mode overrides */
[data-bs-theme="dark"] {
    --bs-primary: var(--frog-green-dark);
    --bs-primary-rgb: 3, 143, 78;
}

/* Primary button styling */
.btn-primary {
    --bs-btn-bg: var(--frog-green);
    --bs-btn-border-color: var(--frog-green);
    --bs-btn-hover-bg: var(--frog-green-dark);
    --bs-btn-hover-border-color: var(--frog-green-dark);
    --bs-btn-active-bg: var(--frog-green-dark);
    --bs-btn-active-border-color: var(--frog-green-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--frog-green);
    --bs-btn-border-color: var(--frog-green);
    --bs-btn-hover-bg: var(--frog-green);
    --bs-btn-hover-border-color: var(--frog-green);
    --bs-btn-active-bg: var(--frog-green-dark);
    --bs-btn-active-border-color: var(--frog-green-dark);
}

/* Header background */
.bg-primary {
    background-color: var(--frog-green) !important;
}

[data-bs-theme="dark"] .bg-primary {
    background-color: var(--frog-green-dark) !important;
}

/* Text primary */
.text-primary {
    color: var(--frog-green) !important;
}

[data-bs-theme="dark"] .text-primary {
    color: var(--frog-green-light) !important;
}

/* Progress bar */
.progress-bar {
    background-color: var(--frog-green);
}

/* Primary subtle background for selected items */
.bg-primary-subtle {
    background-color: rgba(71, 161, 83, 0.15) !important;
}

[data-bs-theme="dark"] .bg-primary-subtle {
    background-color: rgba(3, 143, 78, 0.25) !important;
}

/* Alpine.js cloak - hide elements until Alpine initializes */
[x-cloak] {
    display: none !important;
}

/* Cursor pointer for clickable elements */
.cursor-pointer {
    cursor: pointer;
}

/* Card hover effect for options */
.form-check.card {
    transition: border-color 0.2s, background-color 0.2s;
    cursor: pointer;
}

.form-check.card:hover {
    border-color: var(--frog-green);
}

/* Score color classes */
.bg-score-low {
    background-color: #198754 !important;
}

.bg-score-medium {
    background-color: #ffc107 !important;
}

.bg-score-high {
    background-color: #fd7e14 !important;
}

.bg-score-very-high {
    background-color: #dc3545 !important;
}

/* Radar chart container */
#radarChart {
    max-height: 300px;
}

/* Slider styling */
.form-range::-webkit-slider-thumb {
    background: var(--frog-green);
}

.form-range::-moz-range-thumb {
    background: var(--frog-green);
}

.form-range::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #198754, #ffc107, #fd7e14, #dc3545);
    border-radius: 4px;
}

/* Badge styling */
.badge.bg-primary {
    background-color: var(--frog-green) !important;
}

/* Card selected state */
.card.border-primary {
    border-color: var(--frog-green) !important;
    border-width: 2px;
}

/* Two-column question layout */
.slider-panel {
    position: sticky;
    top: 1rem;
}

.slider-panel .card {
    border: 1px solid rgba(0, 0, 0, 0.125);
}

[data-bs-theme="dark"] .slider-panel .card.bg-light {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Multi-device accordion styling */
.accordion-button:not(.collapsed) {
    background-color: rgba(71, 161, 83, 0.1);
    color: var(--frog-green-dark);
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(71, 161, 83, 0.25);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: rgba(3, 143, 78, 0.2);
    color: var(--frog-green-light);
}

.accordion-item {
    border-color: rgba(0, 0, 0, 0.125);
}

[data-bs-theme="dark"] .accordion-item {
    border-color: rgba(255, 255, 255, 0.125);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .display-1 {
        font-size: 3rem;
    }

    .card-body {
        padding: 1rem;
    }

    /* Stack columns on mobile */
    .slider-panel {
        position: static;
        margin-top: 1rem;
    }
}

/* Animation for transitions */
[x-transition] {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Footer link styling */
footer a {
    color: var(--frog-green);
}

footer a:hover {
    color: var(--frog-green-dark);
}

/* Country dropdown styling */
.country-option:hover {
    background-color: rgba(71, 161, 83, 0.15);
}

[data-bs-theme="dark"] .country-option:hover {
    background-color: rgba(3, 143, 78, 0.25);
}