/* Enhanced Form Styling for Tourneys */
/* 
 * This stylesheet improves the visual hierarchy and polish of form elements,
 * particularly for radio groups and checkboxes in the Settings pages.
 * 
 * Three styling options for radio/checkbox groups:
 * 1. Default: Left border accent in Championship Gold
 * 2. Compact: Inline layout for horizontal display
 * 3. Minimal: No borders, just typography and spacing
 * 
 * Key features:
 * - Distinguished form labels with proper weight and spacing
 * - Subtle left border accent instead of backgrounds (avoids card-in-card)
 * - Championship Gold focus states
 * - Dark mode support
 */

/* Championship Gold color variables */
:root {
    --color-gold: #f8b731;
    --color-gold-light: #fbd989;
    --color-gold-dark: #d4a033;
}

/* Form Field Groups */
.form-field-group {
    margin-bottom: 1.5rem;
}

/* Enhanced Form Labels */
.form-label {
    font-weight: 600;
    color: var(--bs-emphasis-color);
    margin-bottom: 0.625rem;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

/* Radio/checkbox groups with subtle left accent */
.radio-group,
.checkbox-group {
    border-left: 3px solid var(--color-gold-light);
    padding-left: 1rem;
    margin-top: 0.5rem;
    margin-left: 0.25rem;
    position: relative;
    transition: border-left-color 0.2s ease, border-left-width 0.2s ease;
}

/* Subtle hover effect for the entire group */
.radio-group:hover,
.checkbox-group:hover {
    border-left-color: var(--color-gold);
}

/* Dark mode support */
[data-theme="dark"] .radio-group,
[data-theme="dark"] .checkbox-group {
    border-left-color: var(--color-gold-dark);
}

[data-theme="dark"] .radio-group:hover,
[data-theme="dark"] .checkbox-group:hover {
    border-left-color: var(--color-gold);
}

/* Radio and Checkbox styling */
.form-check {
    padding-left: 1.75rem;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.form-check:last-child {
    margin-bottom: 0;
}

.form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    margin-left: -1.75rem;
    border: 2px solid var(--bs-gray-400);
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

/* Hover state for better interactivity */
.form-check-input:hover:not(:disabled) {
    border-color: var(--color-gold-light);
}

/* Radio button specific - filled circle effect */
.form-check-input[type="radio"]:checked {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.5' fill='white'/%3e%3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

/* Checkbox specific - checkmark */
.form-check-input[type="checkbox"]:checked {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
}

.form-check-input:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 0.2rem rgba(248, 183, 49, 0.25);
}

.form-check-label {
    font-size: 0.9375rem;
    color: var(--bs-body-color);
    cursor: pointer;
    user-select: none;
}

/* Make radio button labels more distinct */
.form-check-label strong {
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

/* Selected radio/checkbox label enhancement */
.form-check-input:checked ~ .form-check-label {
    color: var(--bs-emphasis-color);
    font-weight: 500;
}

/* Disabled state */
.form-check-input:disabled ~ .form-check-label {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Form sections within cards */
.tourney-card h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
    margin-bottom: 0;
}

/* Grid layout adjustments for Settings */
.settings-tab-content .row.g-4 {
    --bs-gutter-x: 2rem;
    --bs-gutter-y: 1.5rem;
}

@media (max-width: 991px) {
    /* Stack columns on tablets and below */
    .settings-tab-content .col-lg-6 {
        margin-bottom: 1rem;
    }
    
    /* Reduce horizontal checkbox spacing on mobile */
    .checkbox-group-horizontal {
        gap: 1rem;
    }
}

/* Horizontal form layout option */
.form-horizontal .row {
    margin-bottom: 1rem;
}

.form-horizontal .form-label {
    text-align: right;
    padding-top: 0.375rem;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .form-horizontal .form-label {
        text-align: left;
        margin-bottom: 0.5rem;
    }
}

/* Compact radio group style */
.radio-group-compact {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    margin-top: 0.25rem;
}

.radio-group-compact .form-check {
    display: inline-block;
    margin-right: 1.5rem;
    margin-bottom: 0;
}

/* Alternative minimal style - no borders, just typography and spacing */
.radio-group-minimal,
.checkbox-group-minimal {
    border-left: none;
    padding-left: 0.5rem;
    margin-left: 0;
    margin-top: 0.5rem;
}

.radio-group-minimal .form-check,
.checkbox-group-minimal .form-check {
    margin-bottom: 0.625rem;
}

/* Horizontal checkbox layout */
.checkbox-group-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.checkbox-group-horizontal .form-check {
    margin-bottom: 0;
    flex: 0 0 auto;
}

/* Settings page specific enhancements */
.settings-tab-content .form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Optional: Add icons to form labels */
.form-label-icon {
    font-size: 1.125rem;
    opacity: 0.7;
}

/* Form help text */
.form-help-text {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    margin-top: 0.25rem;
}

/* Active/focused radio group */
.radio-group:focus-within {
    border-left-color: var(--color-gold);
    border-left-width: 4px;
    padding-left: calc(1rem - 1px); /* Compensate for border width change */
}

/* Switch specific styling */
.form-switch {
    padding-left: 2.5rem;
}

.form-switch .form-check-input {
    width: 2rem;
    margin-left: -2.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    background-position: left center;
    border-radius: 2rem;
    transition: background-position 0.15s ease-in-out;
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f8b731'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
}