/*
 * Questionnaire System - Consolidated CSS
 * Master styles for questionnaire builder, viewer, and question types
 * Combines questionnaire-builder.css, questionnaire-unified.css, and question-types.css
 */

/* =============================================
   VARIABLES & TOKENS
   ============================================= */

/* Variables are defined in app.css and imported globally */

/* =============================================
   BASE QUESTION COMPONENTS - SHARED FOUNDATIONS
   ============================================= */

/* Base evaluation item styling - works across all contexts */
.evaluation-item {
    /* Base layout and spacing */
    position: relative;
    padding: 1.25rem 0;
    margin-bottom: 0;

    /* Theme colors */
    background-color: var(--primary-color-alpha-subtle) !important;

    /* Transitions and performance */
    transition: all 0.15s ease-in-out;
    box-sizing: border-box;
}

.evaluation-item * {
    box-sizing: border-box;
}

.question-title {
    font-size: 1.125rem;
    font-weight: var(--font-weight-emphasis);
    color: var(--rz-primary) !important;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Context-specific modifiers for evaluation items */
.evaluation-item.builder-context {
    /* Builder-specific styling with colorful borders */
    background: var(--primary-color-alpha-subtle) !important;
    border: none !important;
    padding: 1.25rem !important;
    margin-bottom: 0 !important;
}

.evaluation-item.builder-context:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}


/* Base goal item styling */
.collaborative-goal {
    /* No box padding; a thin divider separates individual goals (like assessment items) */
    padding: 2.25rem 0;
    border-bottom: 1px solid var(--border-light);
    transition: all 0.2s ease;
}

/* Reset all margins: the h4's default top margin and .question-title's bottom margin
   otherwise make the title row taller than the buttons and misalign them */
.collaborative-goal .question-title {
    margin: 0;
}

.collaborative-goal:last-child {
    border-bottom: none;
}

.collaborative-goal .goal-header .fw-bold {
    font-size: 1.1rem;
    font-weight: var(--font-weight-emphasis);
    color: var(--dark-color);
}

.goal-badges .rz-badge {
    font-size: 0.75rem;
}

/* Base text section styling */
.text-section-card {
    margin-bottom: 0;
    transition: all 0.2s ease;
    position: relative;
    background-color: var(--question-text-alpha-subtle) !important;
    padding: 1.25rem 0;
}

/* Generic question section styles - used by both evaluation and text sections */
.text-section-card .question-section-header {
    margin-bottom: 16px;
}

/* Context-specific override for text section titles */
.text-section-card .question-title {
    font-size: 1.1rem;
    margin: 0 0 12px 0;
}


.text-section-card .question-section-description {
    font-size: 0.9rem;
    color: var(--secondary-color);
    margin: 0;
    line-height: 1.4;
}


.readonly-text {
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.6;
    min-height: 60px;
}

.no-response {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-section-card textarea {
    resize: vertical;
    transition: none; /* Disable transitions on input for better performance */
}

.text-section-card[data-updating="true"] {
    opacity: 0.8;
}

/* =============================================
   QUESTION TYPE SPECIFIC COLORS & BADGES
   ============================================= */

/* Assessment Question Colors */
.question-assessment,
.text-assessment {
    color: var(--question-assessment) !important;
}

.bg-assessment {
    background-color: var(--question-assessment) !important;
}

.bg-assessment-opacity {
    background-color: var(--question-assessment-alpha) !important;
}

.border-assessment {
    border-color: var(--question-assessment) !important;
}

.badge-assessment {
    background-color: var(--question-assessment-alpha) !important;
    color: var(--question-assessment) !important;
}

/* Goal Achievement Question Colors */
.question-goal-achievement,
.text-goal-achievement {
    color: var(--question-goal-achievement) !important;
}

.bg-goal-achievement {
    background-color: var(--question-goal-achievement) !important;
}

.bg-goal-achievement-opacity {
    background-color: var(--question-goal-alpha) !important;
}

.border-goal-achievement {
    border-color: var(--question-goal-achievement) !important;
}

.badge-goal-achievement {
    background-color: var(--question-goal-alpha) !important;
    color: var(--dark-color) !important;
}

/* Text Response Question Colors - consolidated above */

.bg-text-response {
    background-color: var(--rz-primary) !important;
}

.bg-text-response-opacity {
    background-color: var(--question-text-alpha) !important;
}

.border-text-response {
    border-color: var(--question-text-response) !important;
}

.badge-text-response {
    background-color: var(--question-text-alpha) !important;
    color: var(--question-text-response) !important;
}

/* Question Type Cards */
.question-type-card.assessment {
    border-color: var(--question-assessment) !important;
    background-color: var(--primary-color-alpha-subtle) !important;
}

.question-type-card.assessment:hover {
    box-shadow: 0 8px 25px rgba(15, 105, 255, 0.15) !important;
    border-color: var(--question-assessment) !important;
}

.question-type-card.goal-achievement {
    border-color: var(--question-goal-achievement) !important;
    background-color: var(--question-goal-alpha-subtle) !important;
}

.question-type-card.goal-achievement:hover {
    box-shadow: 0 8px 25px rgba(230, 191, 127, 0.15) !important;
    border-color: var(--question-goal-achievement) !important;
}

.question-type-card.text-response {
    border-color: var(--question-text-response) !important;
    background-color: var(--question-text-alpha-subtle) !important;
}

.question-type-card.text-response:hover {
    box-shadow: 0 8px 25px rgba(147, 91, 169, 0.15) !important;
    border-color: var(--question-text-response) !important;
}

/* Border utilities for question types */
.border-evaluation {
    border-color: var(--question-assessment) !important;
}

.bg-evaluation {
    background-color: var(--question-assessment) !important;
}

.bg-evaluation-opacity {
    background-color: var(--question-assessment-alpha) !important;
}

.text-evaluation {
    color: var(--question-assessment) !important;
}

.border-goal-category {
    border-color: var(--question-goal-achievement) !important;
}

.bg-goal-category {
    background-color: var(--question-goal-achievement) !important;
}

.bg-goal-category-opacity {
    background-color: var(--question-goal-alpha) !important;
}

.text-goal-category {
    color: var(--question-goal-achievement) !important;
}

/* =============================================
   GOAL QUESTION COMPONENTS
   ============================================= */

.goal-question {
    /* Container styling if needed */
}

.goal-question .question-header {
    margin-bottom: 1.5rem;
}

.goal-question .question-description {
    margin-bottom: 1rem;
    color: var(--secondary-color);
}


/* Goal Content Sections */
.two-section-goal-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Ensure proper section ordering */
.two-section-goal-content > .predecessor-goals-section {
    order: 1; /* Always first */
}

.two-section-goal-content > .new-goals-section {
    order: 2; /* Always second */
}

.two-section-goal-content[data-updating="true"] {
    opacity: 0.8;
}

/* New Goals Section Styling */
.new-goals-section {
    border-bottom: 1px solid var(--border-light);
}

.new-goals-section:first-child {
    padding-top: 28px;
}

.new-goals-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.goal-section-header {
    margin-bottom: 16px;
}

.goal-section-title {
    font-size: 1.1rem;
    font-weight: var(--font-weight-emphasis);
    margin: 0 0 8px 0;
    color: var(--dark-color);
    display: flex;
    align-items: center;
}

.goal-section-description {
    font-size: 0.9rem;
    color: var(--secondary-color);
    margin: 0;
    line-height: 1.4;
}

.section-content {
    /* Container for all goals content */
}

/* Goal category item styling */
.goal-category-item {
    border-color: var(--question-goal-achievement) !important;
    background-color: var(--question-goal-alpha-subtle) !important;
}

.goal-category-item .goal-title {
    color: var(--question-goal-achievement) !important;
}

/* Goals summary styling - more minimal */
.goals-summary {
    margin-top: 16px;
    padding: 16px;
    background-color: var(--rz-body-background-color);
    border-radius: 4px;
    border: 1px solid var(--border-light);
}

/* Add button section - cleaner alignment */
.add-goal-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 16px 0 0 0;
    margin-top: 16px;
}

/* Alert styling to match assessment subtlety */
.section-content .rz-alert {
    background-color: var(--primary-color-alpha-subtle);
    border: 1px solid var(--primary-color-alpha);
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 16px;
}

.section-content .rz-alert .rz-text {
    color: var(--dark-color);
    font-size: 0.9rem;
}

/* Text section item styling */
.text-section-item {
    border: none !important;
    border-radius: 0 !important;
    background-color: var(--question-text-alpha-subtle) !important;
}

.text-section-item .section-title {
    color: var(--question-text-response) !important;
}

/* Remove focus outline for text sections in builder */
.text-section-item:focus-within {
    outline: none;
}


/* =============================================
   BUILDER-SPECIFIC LAYOUTS
   ============================================= */

/* Review Tab - Integrated Summary */
.questionnaire-summary {
    text-align: center;
    padding: 2rem;
    margin-bottom: 2rem;
    background: var(--rz-body-background-color);
    border-radius: 12px;
    border: 1px solid var(--border-light);
    box-shadow: 0 1px 3px var(--shadow-color-light);
}

.summary-title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-emphasis);
    color: var(--dark-color);
    margin: 0 0 0.75rem 0;
    line-height: 1.2;
}

.summary-stats {
    font-size: 1rem;
    color: var(--secondary-color);
    margin: 0;
    line-height: 1.5;
    font-weight: var(--font-weight-medium);
}

/* Build Sections - Section Containers */
.question-pages-container {
    gap: 2.5rem;
    display: flex;
    flex-direction: column;
}

.question-pages-container .question-page-card {
    /* Border/shadow now come from SectionCard.razor.css so consecutive sections read as separate cards */
    transition: none;
}

.question-pages-container .question-page-card:hover {
    /* No hover effects - clean static appearance */
}

/* Evaluation Lists - Enhanced Organization */
.evaluations-container {
    /* Removed background, border-radius, and padding to reduce visual depth */
    /* Container kept for structural purposes only */
}

.competencies-config {
    display: grid;
    gap: 1.25rem;
}

.evaluation-input-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: start;
    margin-bottom: 0.75rem;
}

.required-checkbox-container {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding-top: 0.5rem;
}

/* Visual Polish & Micro-Interactions */
.questionnaire-header-modern + div .progress-steps-modern {
    margin-top: -1px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.questionnaire-builder-container {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.action-buttons-group .rz-button {
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.action-buttons-group .rz-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.action-buttons-group .rz-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s;
}

.action-buttons-group .rz-button:hover::before {
    left: 100%;
}

.status-badge-enhanced.new {
    animation: subtle-pulse 3s ease-in-out infinite;
}

@keyframes subtle-pulse {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(59, 130, 246, 0.1);
    }
}

.save-indicator {
    animation: slideInFromRight 0.3s ease-out;
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.save-indicator.saving .save-icon {
    animation: rotate 2s linear infinite, pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        filter: drop-shadow(0 0 2px rgba(96, 165, 250, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.6));
    }
}

.step-modern:focus {
    outline: none;
    transform: translateY(-2px);
}

.step-modern:focus .step-number-modern {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.questionnaire-header-modern.loading {
    opacity: 0.9;
    pointer-events: none;
}

.questionnaire-header-modern.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer-loading 2s infinite;
}

@keyframes shimmer-loading {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.questionnaire-content {
    transition: all 0.3s ease;
}

.questionnaire-content.step-changing {
    opacity: 0.7;
    transform: translateY(10px);
}

/* =============================================
   VIEWER-SPECIFIC LAYOUTS
   ============================================= */

/* Container & Layout */
.questionnaire-unified-container {
    max-width: none;
    margin: 0;
    padding: 0 1rem;
    width: 100%;
}

.questionnaire-main-card {
    background: var(--background-color);
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-bottom: 1rem;
}

/* Header Section (Left-aligned like other pages) */
.page-header {
    margin-bottom: 2rem;
}

.questionnaire-info-banner {
    background: var(--primary-color-alpha-subtle);
    border: 1px solid var(--primary-color-alpha);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--rz-text-color);
}

/* Section Counter */
.question-page-counter {
    text-align: right;
    margin-bottom: 1rem;
    color: var(--secondary-color);
    font-size: 0.875rem;
}

/* Section Structure (Simplified) */
.section-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-bottom: 2rem;
}

.section-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.question-page-header-questionnaire {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.25rem;
}

.question-page-title-container {
    flex: 1;
}

.section-title {
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: var(--font-weight-emphasis);
    margin: 0;
    line-height: 1.3;
}

.section-description {
    color: var(--secondary-color);
    font-size: 1rem;
    margin: 0.5rem 0 0 0;
    line-height: 1.5;
}

/* Completion Role Badge */
.completion-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: var(--font-weight-emphasis);
    font-size: 0.875rem;
    white-space: nowrap;
}

.role-employee {
    background: var(--primary-color-alpha);
    color: var(--rz-primary);
    border: 1px solid var(--primary-color-alpha);
}

.role-team-lead {
    background: var(--secondary-color-alpha);
    color: var(--rz-secondary);
    border: 1px solid var(--secondary-color-alpha);
}

.role-both {
    background: var(--success-color-bg);
    color: var(--rz-success);
    border: 1px solid var(--success-color-alpha-subtle);
}

/* Question Container (Simplified) */
.questions-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-top: 1.5rem;
    padding: 0;
}

.question-wrapper {
    margin-bottom: 2rem;
}


.question-description {
    font-size: 0.875rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* Question Rendering Styles (Semantic) */
.question-header {
    margin-bottom: 1.5rem;
}


.question-description {
    font-size: 0.875rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* Assessment Question Styles (Simplified) */
.assessment-question {
    margin-bottom: 2rem;
}

/* Separator between multiple questions rendered in the same section */
.question-page-questions > .question-container + .question-container {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--rz-base-200, #e5e7eb);
}


.evaluations-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.evaluation-card {
    background: var(--rz-body-background-color);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 1rem;
}

/* Text Question Styles */
.text-question {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.planning-sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.planning-card {
    background: var(--rz-body-background-color);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 1rem;
}

/* Goal Achievement Question Styles */
.goal-achievement-question {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.goal-card {
    background: var(--rz-body-background-color);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 1rem;
}

/* Navigation Footer */
.navigation-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 2px solid var(--border-light);
    margin-top: 2rem;
}

.navigation-actions {
    display: flex;
    gap: 0.5rem;
}

/* Workflow Status & Alerts */
.workflow-alert {
    margin-bottom: 1.5rem;
}

/* =============================================
   REVIEW MODE SPECIFIC STYLES
   ============================================= */

.review-question-container {
    margin-bottom: 2rem;
}

/* Single Answer View (Employee or TeamLead only sections) */
.single-answer-view {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

/* Question Comparison Card - each question gets its own card */
.question-comparison-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 0 2rem 0;
    margin-bottom: 2rem;
    box-shadow: none;
    border-bottom: 2px solid var(--border-light);
}

.question-comparison-card:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Evaluation Comparison Card - each evaluation gets its own card in assessment reviews */
.evaluation-comparison-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 0 2rem 0;
    margin-bottom: 2rem;
    box-shadow: none;
    border-bottom: 2px solid var(--border-light);
}

.evaluation-comparison-card:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Per-choice difference highlight in MultipleChoice review */
.choice-item.choice-answer-differs {
    border-color: var(--rz-warning);
    background: rgba(var(--rz-warning-rgb), 0.08);
}

.rating-badge {
    margin-left: 0.5rem;
    font-weight: var(--font-weight-semibold);
}

.rating-badge.employee-rating {
    background: var(--rz-primary) !important;
    color: white !important;
}

.rating-badge.team-lead-rating {
    background: var(--rz-secondary) !important;
    color: white !important;
}

/* Side-by-Side View (Both sections) */
.side-by-side-view {
    display: grid;
    grid-template-columns: 1fr 88px 1fr;
    gap: 1.5rem 0;
    position: relative;
}

.difference-icon-column {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.25rem;
    position: relative;
}

.difference-icon-column::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--border-light);
    transform: translateX(-50%);
    z-index: 0;
}

@media (max-width: 968px) {
    .side-by-side-view {
        grid-template-columns: 1fr;
    }

    .difference-icon-column {
        display: none;
    }
}

.answer-column {
    background: transparent;
    border-radius: 0;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.answer-column.employee {
    /* No left border - using central divider instead */
}

.answer-column.team-lead {
    /* No left border - using central divider instead */
}

.answer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

/* Show labels only for the first question */
.questions-container .question-wrapper:not(:first-child) .answer-label {
    display: none;
}

.answer-label {
    font-weight: var(--font-weight-emphasis);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.answer-content {
    margin-bottom: 1rem;
    flex-grow: 1;
}

.answer-value {
    font-size: 1rem;
    color: var(--dark-color);
    line-height: 1.6;
}

.empty-answer {
    font-style: italic;
    color: var(--secondary-color);
    opacity: 0.7;
}

.answer-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    margin-top: auto;
}

/* Question Item Display (for read-only review) */
.question-item-card {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--background-color);
}

.question-item-title {
    font-weight: var(--font-weight-emphasis);
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--dark-color);
}

.question-item-description {
    color: var(--secondary-color);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.question-answer-box {
    padding: 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--rz-body-background-color);
    white-space: pre-wrap;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Wrapper div alignment (for OptimizedQuestionRenderer containers) */
.role-response-section {
    margin-bottom: 3rem !important;
}

.role-response-section:last-child {
    margin-bottom: 0 !important;
}

/* Ensure inner wrapper divs don't add extra spacing */
.ps-3.border-start {
    margin-bottom: 0 !important;
}

/* =============================================
   RESPONSIVE DESIGN - CONSOLIDATED
   ============================================= */

/* Tablet Optimizations */
@media (max-width: 1024px) {
    /* Builder responsive */
    .questionnaire-summary {
        padding: 1.5rem;
    }

    .d-flex.gap-2 {
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }

    .d-flex.gap-2 .async-button {
        flex: 1;
        min-width: calc(33.333% - 0.5rem);
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    /* Builder mobile */
    .questionnaire-summary {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .summary-title {
        font-size: 1.25rem;
    }

    .summary-stats {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .question-pages-container {
        gap: 1.5rem;
    }

    .question-pages-container .question-page-card:hover {
        transform: none;
    }

    .evaluations-container {
        padding: 1.5rem;
        margin: 0 -0.25rem;
    }

    .competencies-config {
        gap: 1rem;
    }

    .evaluation-input-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .required-checkbox-container {
        padding-top: 0;
        justify-content: flex-start;
    }

    /* Builder section type buttons */
    .d-flex.justify-content-between.align-items-center {
        flex-direction: column;
        align-items: stretch !important;
        gap: 1rem;
    }

    .d-flex.gap-2 {
        justify-content: center;
    }

    .d-flex.gap-2 .async-button {
        flex: 1;
        min-width: auto;
    }

    /* Viewer mobile */
    .questionnaire-main-card {
        padding: 1rem;
    }

    .section-card {
        padding: 1rem;
    }

    .section-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-title {
        font-size: 1.25rem;
    }

    .navigation-footer {
        flex-direction: column;
        gap: 1rem;
    }

    .navigation-actions {
        width: 100%;
        flex-direction: column;
    }

    /* Question types mobile */
    .evaluation-item.builder-context {
        padding: 1rem !important;
    }
}

/* Small Mobile Optimizations */
@media (max-width: 480px) {
    /* Builder small mobile */
    .questionnaire-summary {
        padding: 1.5rem;
        border-radius: 8px;
    }

    .summary-title {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    .summary-stats {
        font-size: 0.85rem;
        line-height: 1.7;
    }

    .question-pages-container {
        gap: 1rem;
    }

    .evaluations-container {
        padding: 1.5rem;
        border-radius: 6px;
    }

    /* Builder section type buttons */
    .d-flex.gap-2 {
        flex-direction: column;
        gap: 0.75rem !important;
    }

    .d-flex.gap-2 .async-button {
        min-width: auto;
        width: 100%;
    }

    /* Question types small mobile */
    .evaluation-item.builder-context {
        padding: 0.75rem !important;
        margin: 0 !important;
    }

    .evaluation-item.builder-context:hover {
        transform: none;
    }
}

/* =============================================
   ACCESSIBILITY - CONSOLIDATED
   ============================================= */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .question-pages-container .question-page-card,
    .questionnaire-summary,
    .evaluation-item {
        transition: none;
    }

    .question-pages-container .question-page-card:hover,
    .evaluation-item.builder-context:hover {
        transform: none;
    }

    * {
        animation: none !important;
        transition: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .questionnaire-summary,
    .questionnaire-main-card,
    .section-card,
    .evaluation-card,
    .planning-card,
    .goal-card,
    .answer-column,
    .evaluation-item {
        border-width: 2px;
    }
}

/* Focus states */
.questionnaire-summary:focus-within {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Remove focus outline for builder context (has its own focus handling) */
.evaluation-item.builder-context:focus-within {
    outline: none;
}


/* =============================================
   PRINT STYLES - CONSOLIDATED
   ============================================= */

@media print {
    /* Builder print */
    .questionnaire-summary {
        box-shadow: none !important;
        background: var(--background-color) !important;
        border: 1px solid #ccc !important;
    }

    /* Viewer print */
    .navigation-footer,
    .answer-actions {
        display: none;
    }

    .questionnaire-main-card,
    .section-card {
        box-shadow: none;
        border: 1px solid #000;
    }

    /* Question types print */
    .evaluation-item {
        box-shadow: none !important;
        background: var(--background-color) !important;
        border: 1px solid #ccc !important;
    }

    .evaluation-item.builder-context:hover {
        transform: none !important;
    }
}

/* =============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================= */

/* Optimize rendering for complex layouts */
.new-goals-section *,
.evaluation-item * {
    box-sizing: border-box;
}