/* Fixed footer layout */
html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Main content wrapper */
.otree-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0px 30px;
    padding-bottom: 110px;
    box-sizing: border-box;
    min-height: 0;
    max-height: calc(100vh - 70px);
}

/* Remove top margin from first child */
.otree-body > *:first-child {
    margin-top: 0 !important;
}

/* When page has scrollable content, allow the body to flex */
.otree-body:has(.scrollable-content) {
    overflow: visible;
    padding-bottom: 20px;
}

/* Auto-scale content to fit */
.otree-body > * {
    flex-shrink: 1;
    margin-bottom: 8px;
    min-height: 0;
}

.otree-body h1, .otree-body h2, .otree-body h3 {
    flex-shrink: 0;
    margin-top: 0;
    margin-bottom: 8px;
    font-size: clamp(1.2rem, 2vw, 1.75rem);
}

/* Ensure images scale down aggressively */
img {
    max-width: 100%;
    height: auto;
    max-height: min(35vh, 300px);
    object-fit: contain;
    flex-shrink: 2;
    min-height: 0;
}

/* Ensure container takes full available height */
.container {
    margin-bottom: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Form elements should be compact and flexible */
form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 6px;
}

form > div {
    flex-shrink: 1;
    margin-bottom: 6px !important;
    min-height: 0;
}

/* Compact labels and inputs */
label {
    display: block;
    margin-bottom: 3px;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
}

input[type="number"], input[type="text"] {
    flex-shrink: 0;
    min-height: 0;
}

/* Compact radio button groups */
input[type="radio"] {
    margin: 0 5px 0 0;
}

/* Radio button labels inline and compact */
label[style*="inline-block"] {
    margin-right: 10px !important;
    font-size: clamp(0.8rem, 1.5vw, 0.95rem);
}

/* Responsive adjustments for smaller screens */
@media (max-height: 800px) {
    .otree-body {
        padding: 0px 30px;
        padding-bottom: 95px;
    }
    
    img {
        max-height: min(30vh, 250px);
    }
    
    form {
        gap: 4px;
    }
    
    form > div {
        margin-bottom: 4px !important;
    }
}

@media (max-height: 700px) {
    .otree-body {
        padding: 0px 30px;
        padding-bottom: 85px;
    }
    
    img {
        max-height: min(25vh, 200px);
    }
    
    form {
        gap: 3px;
    }
    
    form > div {
        margin-bottom: 3px !important;
    }
    
    .otree-body h1, .otree-body h2, .otree-body h3 {
        margin-bottom: 5px;
    }
}

/* Scrollable content for specific pages (instructions, questionnaires) */
.scrollable-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 15px;
    padding-bottom: 30px;
    box-sizing: border-box;
    min-height: 0;
    max-height: calc(100vh - 200px);
}

/* Custom scrollbar for scrollable content */
.scrollable-content::-webkit-scrollbar {
    width: 6px;
    height: 70%;
    margin-top: 15%;
    margin-bottom: 15%;
}

.scrollable-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
    margin-top: calc(15% + 10px);
    margin-bottom: calc(15% + 10px);
}

.scrollable-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Fixed footer */
.fixed-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f8f9fa;
    border-top: 2px solid #dee2e6;
    padding: 12px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    height: 70px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.footer-left {
    flex: 1;
    text-align: left;
}

.footer-center {
    flex: 2;
    text-align: center;
    padding: 0 20px;
}

.footer-right {
    flex: 1;
    text-align: right;
}

/* Error message styling */
.error-message {
    color: #dc3545;
    font-weight: 500;
    font-size: 14px;
    min-height: 20px;
}

/* Hide default oTree error alerts */
.alert-danger {
    display: none !important;
}

/* Ensure forms don't have extra margin */
form {
    margin-bottom: 0;
}

/* Adjust container for fixed footer */
.container {
    margin-bottom: 0;
}