/* 
 * LimeSurvey Scale Radio Button Fix - CSS Grid Solution
 * Fixes overlapping radio buttons in 5-point scales
 * Compatible with LimeSurvey 4.x, 5.x, and 6.x
 */

/* =============================================================================
   CORE CSS GRID SOLUTION
   ============================================================================= */

/* ONLY apply to confirmed 5-point scales with specific class */
.scale-5point-fixed.ls-answers.list-radio,
.scale-5point-fixed.answer-list.list-radio,
.scale-5point-fixed.radio-list.list-radio,
ul.scale-5point-fixed.list-radio,
.scale-5point-fixed.question-container ul[class*="radio"],
.scale-5point-fixed {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(60px, 1fr)) !important;
    gap: 38px !important; /* 1cm spacing */
    justify-items: center !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
    padding: 15px 0 !important;
    margin: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    list-style: none !important;
    border-spacing: 0 !important;
    /* Right border only, no left border */
    border-width: 0px 1px 0px 0px !important; /* top 0, right 1px, bottom 0, left 0 */
    border-style: solid !important;
    border-color: #dbdbdb !important; /* EXACT same as .question-help-container and .answer-container */
}

/* LimeSurvey table-based scale structure - ONLY for confirmed 5-point scales */
table.question.subquestion-list tr.scale-5point-fixed.radio-list,
tr.scale-5point-fixed.answers-list.radio-list,
.scale-5point-fixed.answers-list.radio-list,
table.questions-list tr.scale-5point-fixed.radio-list {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(60px, 1fr)) !important;
    gap: 38px !important;
    justify-items: center !important;
    align-items: start !important;
    width: 100% !important;
    padding: 15px 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    /* Right border only, no left border */
    border-width: 0px 1px 0px 0px !important; /* top 0, right 1px, bottom 0, left 0 */
    border-style: solid !important;
    border-color: #dbdbdb !important; /* EXACT same as .answer-container */
}

/* Individual radio button containers - ONLY for confirmed 5-point scales */
.scale-5point-fixed.ls-answers.list-radio li,
.scale-5point-fixed.radio-list.list-radio li,
.scale-5point-fixed .answer-item.radio-item,
.scale-5point-fixed .answer_cell_001, 
.scale-5point-fixed .answer_cell_002, 
.scale-5point-fixed .answer_cell_003, 
.scale-5point-fixed .answer_cell_004, 
.scale-5point-fixed .answer_cell_005,
.scale-5point-fixed td.answer-item.radio-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    position: relative !important;
}

/* FIX: Ensure first radio button is fully visible */
.scale-5point-fixed.ls-answers.list-radio li:first-child,
.scale-5point-fixed.radio-list.list-radio li:first-child,
.scale-5point-fixed .answer-item.radio-item:first-child {
    padding-left: 0 !important; /* Remove padding that causes clipping */
    margin-left: 0 !important;
}

/* Radio button styling - ONLY for confirmed 5-point scales */
.scale-5point-fixed.ls-answers.list-radio input[type="radio"],
.scale-5point-fixed .radio-list input[type="radio"],
.scale-5point-fixed .answer-item input[type="radio"] {
    display: block !important;
    margin: 0 auto 8px auto !important;
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
    accent-color: #8B4A3B !important; /* Kastanie-Mittel */
}

/* FIX: Override margin for first radio button INPUT to prevent clipping */
.scale-5point-fixed.ls-answers.list-radio li:first-child input[type="radio"],
.scale-5point-fixed.radio-list.list-radio li:first-child input[type="radio"],
.scale-5point-fixed .answer-item.radio-item:first-child input[type="radio"] {
    margin-left: 10px !important; /* Shift right to be fully visible, not centered */
    margin-right: auto !important;
}

/* Label styling - handle both visible and hidden labels - ONLY for confirmed 5-point scales */
.scale-5point-fixed.ls-answers.list-radio label,
.scale-5point-fixed .radio-list label,
.scale-5point-fixed .answer-item label {
    display: block !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #3C3530 !important; /* Schmiedeeisen */
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    min-height: 18px !important;
}

/* Show hidden labels for scale numbers - ONLY for confirmed 5-point scales */
.scale-5point-fixed.ls-answers.list-radio label.hide,
.scale-5point-fixed .radio-list label.hide,
.scale-5point-fixed .answer-item label.hide {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    clip: auto !important;
    width: auto !important;
    height: auto !important;
}

/* Selected state styling - ONLY for confirmed 5-point scales */
.scale-5point-fixed.ls-answers.list-radio input[type="radio"]:checked + label,
.scale-5point-fixed .radio-list input[type="radio"]:checked + label,
.scale-5point-fixed .answer-item input[type="radio"]:checked + label {
    color: #8B4A3B !important; /* Kastanie-Mittel */
    font-weight: 700 !important;
}

/* Hover effects - ONLY for confirmed 5-point scales */
.scale-5point-fixed.ls-answers.list-radio label:hover,
.scale-5point-fixed .radio-list label:hover,
.scale-5point-fixed .answer-item label:hover {
    color: #B8654F !important; /* Kastanie-Hell */
}

/* =============================================================================
   CRITICAL FIX - Show survey containers that contain scale questions
   ============================================================================= */

/* CRITICAL FIX: Remove clipping boundary for survey containers with scales */
.survey-container:has(.scale-5point-fixed),
.survey-container:has(.ls-answers.list-radio),
.survey-container:has(.radio-list.list-radio),
.survey-container:has(.list-radio),
.survey-container:has(.answers-list),
.survey-container:has(.scale-radio-list),
.survey-container.has-scale-question {
    /* ELIMINATE the clipping rectangle completely */
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important; /* This overrides the overflow:hidden from custom.css */
    margin-top: 0 !important;
    padding-top: 0 !important;
    
    /* Force browser to recalculate clipping boundaries */
    clip: unset !important;
    clip-path: none !important;
    contain: none !important;
    
    /* Ensure container can accommodate shifted content */
    min-width: calc(100% + 100px) !important;
    margin-left: -50px !important;
    padding-left: 50px !important;
}

/* Additional override for nested containers - eliminate ALL clipping */
.question-container .survey-container:has(.scale-5point-fixed),
div[class*="survey"]:has(.scale-5point-fixed) {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    clip: unset !important;
    clip-path: none !important;
}

/* TARGETED FIX for specific section with "erleichtern" */
.survey-container:has([id*="erleichtern"]),
.survey-container:has([id*="alltag"]),
.survey-container:has([title*="erleichtern"]) {
    /* Nuclear option: completely reset clipping for this section */
    overflow: visible !important;
    clip: unset !important;
    clip-path: none !important;
    contain: none !important;
    mask: none !important;
    
    /* Force container expansion */
    width: auto !important;
    max-width: none !important;
    min-width: calc(100% + 150px) !important;
    margin-left: -75px !important;
    padding-left: 75px !important;
    
    /* Reset any inherited constraints */
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
}

/* =============================================================================
   CONTAINER OVERRIDE - Fix .question-container padding conflicts
   ============================================================================= */

/* Override .question-container padding for scale questions */
.question-container:has(.scale-5point-fixed),
.question-container .scale-5point-fixed {
    padding-left: 0 !important; /* Remove conflicting 12px left padding */
    overflow: visible !important; /* Prevent clipping of radio buttons */
    max-width: none !important; /* Remove character-based width limits */
    box-sizing: border-box !important;
}

/* =============================================================================
   NUCLEAR RESET - Maximum specificity overrides
   ============================================================================= */

/* Reset any conflicting table styles - ONLY for confirmed 5-point scales */
.scale-5point-fixed.ls-answers.list-radio,
.scale-5point-fixed.radio-list.list-radio,
tr.scale-5point-fixed.radio-list {
    display: grid !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Force grid on confirmed 5-point LimeSurvey scale containers */
ul.scale-5point-fixed.ls-answers[class*="radio"],
div.scale-5point-fixed.ls-answers[class*="radio"],
table .scale-5point-fixed[class*="radio-list"],
tr.scale-5point-fixed[class*="radio-list"] {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(60px, 1fr)) !important;
    gap: 38px !important;
    justify-items: center !important;
    padding-left: 10px !important;
}

/* =============================================================================
   RESPONSIVE DESIGN
   ============================================================================= */

/* Tablet responsiveness - ONLY for confirmed 5-point scales */
@media screen and (max-width: 768px) {
    .scale-5point-fixed.ls-answers.list-radio,
    .scale-5point-fixed.radio-list.list-radio,
    tr.scale-5point-fixed.radio-list {
        gap: 20px !important;
        padding: 10px 0 !important;
        padding-left: 50px !important;
    }
    
    .scale-5point-fixed.ls-answers.list-radio input[type="radio"],
    .scale-5point-fixed .radio-list input[type="radio"] {
        width: 18px !important;
        height: 18px !important;
    }
    
    .scale-5point-fixed.ls-answers.list-radio label,
    .scale-5point-fixed .radio-list label {
        font-size: 13px !important;
    }
}

/* =============================================================================
   TIER 2 COMPREHENSIVE RESPONSIVE SOLUTION - 5 Breakpoints
   Professional UX optimization for all mobile device sizes
   ============================================================================= */

/* BREAKPOINT 1: Ultra-small devices - iPhone SE (≤320px)
   Strategy: Minimal spacing, horizontal scroll fallback */
@media screen and (max-width: 320px) {
    .scale-5point-fixed.ls-answers.list-radio,
    .scale-5point-fixed.radio-list.list-radio,
    tr.scale-5point-fixed.radio-list {
        /* CRITICAL: Include borders in width calculation */
        box-sizing: border-box !important;
        /* CRITICAL: Ensure container fits viewport */
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        padding: 0 !important; /* Match .answer-container: 0px all sides */
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        /* Right border only, no left border */
        border-width: 0px 1px 0px 0px !important; /* top 0, right 1px, bottom 0, left 0 */
        border-style: solid !important;
        border-color: #dbdbdb !important; /* EXACT same as .answer-container */
    }

    .scale-5point-fixed.ls-answers.list-radio li,
    .scale-5point-fixed.radio-list.list-radio li,
    tr.scale-5point-fixed.radio-list li {
        flex: 0 0 auto !important;
        min-width: 50px !important;
        scroll-snap-align: center !important;
    }

    .scale-5point-fixed.ls-answers.list-radio input[type="radio"],
    .scale-5point-fixed .radio-list input[type="radio"] {
        width: 14px !important;
        height: 14px !important;
        margin-bottom: 6px !important;
        /* 44px touch target via padding */
        padding: 15px !important;
    }

    .scale-5point-fixed.ls-answers.list-radio label,
    .scale-5point-fixed .radio-list label {
        font-size: 12px !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
}

/* BREAKPOINT 2: Small mobile - iPhone 6/7/8 (321px-375px)
   Strategy: Comfortable spacing, no scroll needed */
@media screen and (min-width: 321px) and (max-width: 375px) {
    .scale-5point-fixed.ls-answers.list-radio,
    .scale-5point-fixed.radio-list.list-radio,
    tr.scale-5point-fixed.radio-list {
        /* CRITICAL: Include borders in width calculation */
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        padding: 0 !important; /* Match .answer-container: 0px all sides */
        justify-content: flex-start !important; /* FIXED: Changed from space-between to prevent edge pushing */
        /* CRITICAL: Ensure container fits viewport */
        width: 100% !important;
        max-width: 100% !important;
        /* Add borders for mobile structured appearance */
        border-width: 0px 1px 0px 0px !important; /* top 0, right 1px, bottom 0, left 0 */
        border-style: solid !important;
        border-color: #dbdbdb !important; /* EXACT same as .answer-container */
    }

    .scale-5point-fixed.ls-answers.list-radio li,
    .scale-5point-fixed.radio-list.list-radio li,
    tr.scale-5point-fixed.radio-list li {
        flex: 1 1 0 !important;
        min-width: 44px !important;
    }

    .scale-5point-fixed.ls-answers.list-radio input[type="radio"],
    .scale-5point-fixed .radio-list input[type="radio"] {
        width: 15px !important;
        height: 15px !important;
        margin-bottom: 6px !important;
    }

    .scale-5point-fixed.ls-answers.list-radio label,
    .scale-5point-fixed .radio-list label {
        font-size: 12px !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
}

/* BREAKPOINT 3: Medium mobile - iPhone 12/13 (376px-480px)
   Strategy: Generous spacing, optimal readability */
@media screen and (min-width: 376px) and (max-width: 480px) {
    .scale-5point-fixed.ls-answers.list-radio,
    .scale-5point-fixed.radio-list.list-radio,
    tr.scale-5point-fixed.radio-list {
        /* CRITICAL: Include borders in width calculation */
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        padding: 0 !important; /* Match .answer-container: 0px all sides */
        justify-content: flex-start !important; /* FIXED: Changed from space-between to prevent edge pushing */
        /* CRITICAL: Ensure container fits viewport */
        width: 100% !important;
        max-width: 100% !important;
        /* Add borders for mobile structured appearance */
        border-width: 0px 1px 0px 0px !important; /* top 0, right 1px, bottom 0, left 0 */
        border-style: solid !important;
        border-color: #dbdbdb !important; /* EXACT same as .answer-container */
    }

    .scale-5point-fixed.ls-answers.list-radio li,
    .scale-5point-fixed.radio-list.list-radio li,
    tr.scale-5point-fixed.radio-list li {
        flex: 1 1 0 !important;
        min-width: 44px !important;
    }

    .scale-5point-fixed.ls-answers.list-radio input[type="radio"],
    .scale-5point-fixed .radio-list input[type="radio"] {
        width: 16px !important;
        height: 16px !important;
        margin-bottom: 6px !important;
    }

    .scale-5point-fixed.ls-answers.list-radio label,
    .scale-5point-fixed .radio-list label {
        font-size: 12px !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
}

/* BREAKPOINT 4: Tablet (481px-768px)
   Strategy: Balanced spacing, grid layout */
@media screen and (min-width: 481px) and (max-width: 768px) {
    .scale-5point-fixed.ls-answers.list-radio,
    .scale-5point-fixed.radio-list.list-radio,
    tr.scale-5point-fixed.radio-list {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 20px !important;
        padding: 10px !important;
        justify-items: center !important;
        /* Add borders for structured tablet appearance */
        border-width: 0px 1px 0px 0px !important; /* top 0, right 1px, bottom 0, left 0 */
        border-style: solid !important;
        border-color: #dbdbdb !important;
    }

    .scale-5point-fixed.ls-answers.list-radio input[type="radio"],
    .scale-5point-fixed .radio-list input[type="radio"] {
        width: 18px !important;
        height: 18px !important;
        margin-bottom: 8px !important;
    }

    .scale-5point-fixed.ls-answers.list-radio label,
    .scale-5point-fixed .radio-list label {
        font-size: 13px !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
}

/* BREAKPOINT 5: Landscape mode optimization (all mobiles)
   Strategy: Centered layout with max-width for better aesthetics */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .scale-5point-fixed.ls-answers.list-radio,
    .scale-5point-fixed.radio-list.list-radio,
    tr.scale-5point-fixed.radio-list {
        gap: 15px !important;
        max-width: 80vw !important;
        margin: 0 auto !important;
    }
}

/* =============================================================================
   SPECIFIC FIX for "Was würde Ihren Alltag wirklich erleichtern?" section
   ============================================================================= */

/* EXTREME FIX: Force overflow on ALL parent containers for this section */
[id*="erleichtern"],
[id*="alltag"],
[id*="erleichtern"] *,
[id*="alltag"] *,
.question-container:has([title*="erleichtern"]),
.question-container:has([title*="erleichtern"]) * {
    overflow: visible !important;
    clip: unset !important;
    clip-path: none !important;
}

/* REMOVED - Desktop transform was causing border issues on mobile
   This transform was specific to ONE question only and should not apply to ALL scale containers.
   Desktop uses CSS Grid (lines 12-35) and works correctly without transformation. */

/* Force ALL ancestors to allow overflow for this section */
[id*="erleichtern"] .question-container,
[id*="alltag"] .question-container,
.question-container:has([title*="erleichtern"]),
.question-container:has([alt*="erleichtern"]) {
    position: relative !important;
    min-height: 120px !important;
    padding-bottom: 80px !important;
    overflow: visible !important;
    width: calc(100% + 100px) !important;
    margin-left: -50px !important;
    padding-left: 50px !important;
    max-width: none !important;
}

/* Force parent survey container to expand */
.survey-container:has([id*="erleichtern"]),
.survey-container:has([id*="alltag"]) {
    overflow: visible !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* EXTREME: Force first radio button with pseudo-element */
[id*="erleichtern"] .scale-5point-fixed li:first-child::before,
[id*="alltag"] .scale-5point-fixed li:first-child::before,
.question-container:has([title*="erleichtern"]) .scale-5point-fixed li:first-child::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 0;
    width: 60px;
    height: 40px;
    background: white;
    z-index: 999;
}

/* First radio button container - extra wide to accommodate custom radio */
[id*="erleichtern"] .scale-5point-fixed li:first-child,
[id*="alltag"] .scale-5point-fixed li:first-child,
.question-container:has([title*="erleichtern"]) .scale-5point-fixed li:first-child {
    position: relative !important;
    margin-left: 20px !important; /* Extra margin to push away from edge */
    padding-left: 70px !important; /* FIXED: Increased from 40px to 70px for full circle visibility */
    padding-top: 30px !important;
    z-index: 1001 !important;
    cursor: pointer !important;
    min-height: 50px !important;
    min-width: 80px !important; /* Ensure enough space */
}

/* Make the entire first li clickable to trigger the hidden radio */
[id*="erleichtern"] .scale-5point-fixed li:first-child label,
[id*="alltag"] .scale-5point-fixed li:first-child label,
.question-container:has([title*="erleichtern"]) .scale-5point-fixed li:first-child label {
    cursor: pointer !important;
    position: relative !important;
    z-index: 1003 !important;
    margin-top: 8px !important;
    display: block !important;
}

/* ULTIMATE SOLUTION: Hide native radio and create custom one */
[id*="erleichtern"] .scale-5point-fixed li:first-child input[type="radio"],
[id*="alltag"] .scale-5point-fixed li:first-child input[type="radio"],
.question-container:has([title*="erleichtern"]) .scale-5point-fixed li:first-child input[type="radio"] {
    /* Hide the native radio button completely */
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    z-index: -1 !important;
}

/* Create a custom radio button with ::after pseudo-element - MOVED RIGHT */
[id*="erleichtern"] .scale-5point-fixed li:first-child::after,
[id*="alltag"] .scale-5point-fixed li:first-child::after,
.question-container:has([title*="erleichtern"]) .scale-5point-fixed li:first-child::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 55px !important; /* FIXED: Moved from 30px to 55px to prevent clipping */
    transform: none !important; /* Removed centering transform */
    width: 22px !important;
    height: 22px !important;
    border: 2px solid #8B4A3B !important;
    border-radius: 50% !important;
    background: white !important;
    z-index: 1002 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(139, 74, 59, 0.2) !important;
    transition: all 0.2s ease !important;
}

/* Show checked state on custom radio button */
[id*="erleichtern"] .scale-5point-fixed li:first-child input[type="radio"]:checked + label + *,
[id*="erleichtern"] .scale-5point-fixed li:first-child:has(input:checked)::after,
[id*="alltag"] .scale-5point-fixed li:first-child:has(input:checked)::after,
.question-container:has([title*="erleichtern"]) .scale-5point-fixed li:first-child:has(input:checked)::after {
    background: #8B4A3B !important;
    box-shadow: inset 0 0 0 3px white, 0 2px 8px rgba(139, 74, 59, 0.4) !important;
}

/* Hover effect for custom radio button */
[id*="erleichtern"] .scale-5point-fixed li:first-child:hover::after,
[id*="alltag"] .scale-5point-fixed li:first-child:hover::after,
.question-container:has([title*="erleichtern"]) .scale-5point-fixed li:first-child:hover::after {
    border-color: #B8654F !important;
    box-shadow: 0 2px 12px rgba(139, 74, 59, 0.3) !important;
}

/* =============================================================================
   DEBUGGING AIDS (Remove in production if needed)
   ============================================================================= */

/* Visual debugging - uncomment to see grid boundaries */
/*
.scale-grid-debug .ls-answers.list-radio,
.scale-grid-debug .radio-list {
    border: 2px dashed #8B4A3B !important;
    background: rgba(139, 74, 59, 0.1) !important;
}

.scale-grid-debug .ls-answers.list-radio li,
.scale-grid-debug .radio-list li,
.scale-grid-debug .answer-item {
    border: 1px solid #B8654F !important;
    background: rgba(184, 101, 79, 0.1) !important;
}
*/

/* =============================================================================
   COMPATIBILITY LAYERS
   ============================================================================= */

/* Legacy browser support (IE 10+) - ONLY for confirmed 5-point scales */
.scale-5point-fixed.ls-answers.list-radio,
.scale-5point-fixed.radio-list.list-radio {
    display: -ms-grid !important;
    -ms-grid-columns: 1fr 38px 1fr 38px 1fr 38px 1fr 38px 1fr !important;
}

/* Flexbox fallback for very old browsers - ONLY for confirmed 5-point scales */
@supports not (display: grid) {
    .scale-5point-fixed.ls-answers.list-radio,
    .scale-5point-fixed.radio-list.list-radio {
        display: flex !important;
        justify-content: space-between !important;
        gap: 20px !important;
    }
    
    .scale-5point-fixed.ls-answers.list-radio li,
    .scale-5point-fixed.radio-list.list-radio li {
        flex: 0 0 auto !important;
        margin-right: 20px !important;
    }
    
    .scale-5point-fixed.ls-answers.list-radio li:last-child,
    .scale-5point-fixed.radio-list.list-radio li:last-child {
        margin-right: 0 !important;
    }
}