/* Base responsive styles */
:root {
    --panel-width-small: 280px;
    --panel-width-medium: 340px;
    --panel-width-large: 900px;
    --panel-gap: 40px;
}

/* Mobile styles */
@media (max-width: 768px) {
    /* Stack panels vertically on mobile */
    #step1-panel, #step2-panel {
        width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        height: 100vh !important;
        top: 0 !important;
        bottom: 0 !important;
    }
    
    #form-panel {
        width: 100vw !important;
        left: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    #explanation-panel {
        width: 100vw !important;
        left: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    /* Hide map on mobile when panels are open */
    #interactive-map {
        display: none !important;
    }
    
    /* Adjust modals for mobile */
    #email-modal > div, #notes-modal > div, #user-id-modal > div {
        width: 90vw !important;
        padding: 20px !important;
    }
    
    /* Adjust login box for mobile */
    #login-page > div {
        width: 90vw !important;
        padding: 20px !important;
    }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1200px) {
    #step1-panel, #step2-panel {
        width: var(--panel-width-small) !important;
    }
    
    #form-panel {
        width: 60vw !important;
        max-width: 700px !important;
    }
    
    #explanation-panel {
        width: 300px !important;
    }
}

/* Handle zoom levels */
@media (min-resolution: 120dpi) and (max-resolution: 144dpi) {
    /* 125% zoom */
    body {
        font-size: 14px !important;
    }
    
    #step1-panel, #step2-panel {
        width: 300px !important;
    }
}

@media (min-resolution: 144dpi) and (max-resolution: 192dpi) {
    /* 150% zoom */
    body {
        font-size: 13px !important;
    }
    
    #step1-panel, #step2-panel {
        width: 280px !important;
    }
    
    #form-panel {
        width: 750px !important;
    }
}

/* Scrollable content for smaller screens */
@media (max-height: 700px) {
    #sections-container {
        max-height: calc(100vh - 280px) !important;
    }
    
    #form-content {
        max-height: calc(100vh - 100px) !important;
    }
}

/* Flexible font sizing */
html {
    font-size: calc(14px + 0.2vw);
}

/* Make buttons more touch-friendly on mobile */
@media (pointer: coarse) {
    button, .dash-dropdown, input, textarea {
        min-height: 44px !important;
    }
}
/* Safari-specific fixes */
@supports (-webkit-appearance: none) and (stroke-color: transparent) {
    /* Safari only styles */
    #step1-panel, #step2-panel, #form-panel, #explanation-panel {
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        will-change: left, width;
    }
    
    /* Prevent Safari zoom issues */
    input, textarea, select {
        font-size: 16px !important; /* Prevents zoom on focus in iOS Safari */
    }
}

/* Better transition handling for Safari */
#step1-panel, #step2-panel, #form-panel, #explanation-panel {
    transition: left 0.3s ease, width 0.3s ease;
    -webkit-transition: left 0.3s ease, width 0.3s ease;
}

/* Prevent layout shifts during resize */
body {
    -webkit-text-size-adjust: 100%;
}