/* theme-default.css */
/* Overrides for Bootstrap 5.0 to match the Quizzy Lizzy theme demo */

/* 1. Define color tokens on the scoped body */
body.theme-default {
    /* Primary: Teal Breeze */
    --bs-primary: #1ABC9C;
    /* Secondary: Vibrant Orange */
    --bs-secondary: #FFA500;
    /* Secondary-Dark: Dark Orange */
    --bs-secondary-dark: #FF8C00;
    /* Dark (Slate Gray) */
    --bs-dark: #2C3E50;
    /* Light (Clean White) */
    --bs-light: #FFFFFF;
    /* Body background & text */
    --bs-body-bg: var(--bs-light);
    --bs-body-color: var(--bs-dark);
    /* Links */
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: var(--bs-secondary-dark);
    /* Borders */
    --bs-border-color: #E0E0E0;
}

/* 2. Base page styling */
body.theme-default {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

    body.theme-default a {
        color: var(--bs-link-color);
        text-decoration: none;
    }

        body.theme-default a:hover {
            color: var(--bs-link-hover-color);
        }

    /* 3. Buttons */
    body.theme-default .btn-primary {
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
        color: #fff !important;
    }

        body.theme-default .btn-primary:hover,
        body.theme-default .btn-primary:focus {
            background-color: var(--bs-secondary-dark) !important;
            border-color: var(--bs-secondary-dark) !important;
        }

    body.theme-default .btn-secondary {
        background-color: var(--bs-secondary) !important;
        border-color: var(--bs-secondary) !important;
        color: #fff !important;
    }

    body.theme-default .btn-outline-primary {
        color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
    }

        body.theme-default .btn-outline-primary:hover,
        body.theme-default .btn-outline-primary:focus {
            background-color: var(--bs-primary) !important;
            color: #fff !important;
        }

    body.theme-default .btn-outline-secondary {
        color: var(--bs-secondary) !important;
        border-color: var(--bs-secondary) !important;
    }

        body.theme-default .btn-outline-secondary:hover,
        body.theme-default .btn-outline-secondary:focus {
            background-color: var(--bs-secondary) !important;
            color: #fff !important;
        }

    /* 4. Badges */
    body.theme-default .badge.bg-primary {
        background-color: var(--bs-primary) !important;
        color: #fff !important;
    }

    body.theme-default .badge.bg-secondary {
        background-color: var(--bs-secondary) !important;
        color: #fff !important;
    }

    /* 5. Alerts */
    body.theme-default .alert-primary {
        background-color: rgba(26,188,156,0.15) !important;
        border-color: var(--bs-primary) !important;
        color: var(--bs-dark) !important;
    }

    body.theme-default .alert-secondary {
        background-color: rgba(255,165,0,0.15) !important;
        border-color: var(--bs-secondary) !important;
        color: var(--bs-dark) !important;
    }

    /* 6. Form controls */
    body.theme-default .form-control,
    body.theme-default .form-select,
    body.theme-default .form-range {
        border: 1px solid var(--bs-border-color) !important;
        border-radius: 0.25rem !important;
    }

        body.theme-default .form-control:focus,
        body.theme-default .form-select:focus,
        body.theme-default .form-range:focus {
            border-color: var(--bs-primary) !important;
            box-shadow: 0 0 0 .2rem rgba(26,188,156,0.25) !important;
            outline: none !important;
        }
        /* Dropdown hover */
        body.theme-default .form-select:hover {
            border-color: var(--bs-primary) !important;
        }
        /* Option hover & selected */
        body.theme-default .form-select option:hover,
        body.theme-default .form-select option:checked {
            background-color: var(--bs-primary) !important;
            color: #fff !important;
        }

        /* 7. Range slider thumb */
        body.theme-default .form-range::-webkit-slider-thumb {
            background-color: var(--bs-primary) !important;
        }

        body.theme-default .form-range::-moz-range-thumb {
            background-color: var(--bs-primary) !important;
        }

        body.theme-default .form-range::-ms-thumb {
            background-color: var(--bs-primary) !important;
        }

    /* 8. Checkboxes & radios */
    body.theme-default .form-check-input {
        width: 1.2em !important;
        height: 1.2em !important;
        border: 1px solid var(--bs-border-color) !important;
    }

        body.theme-default .form-check-input:checked {
            background-color: var(--bs-primary) !important;
            border-color: var(--bs-primary) !important;
        }

    /* 9. Switches */
    body.theme-default .form-switch .form-check-input {
        background-color: var(--bs-border-color) !important;
        border-color: var(--bs-border-color) !important;
        width: 2.5em !important;
        height: 1.2em !important;
    }

        body.theme-default .form-switch .form-check-input:checked {
            background-color: var(--bs-primary) !important;
            border-color: var(--bs-primary) !important;
        }

    /* 10. Progress bar */
    body.theme-default .progress {
        background-color: var(--bs-light) !important;
        border: 1px solid var(--bs-border-color) !important;
        border-radius: 0.25rem !important;
        height: 1rem !important;
        overflow: hidden !important;
    }

    body.theme-default .progress-bar {
        background-color: var(--bs-primary) !important;
    }


    /* 3. Buttons & Utilities */
    body.theme-default .bg-primary {
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
        color: #fff !important;
    }