/* Responsive styles with media queries */

/* Medium size screens */
@media (max-width: 1280px) {
    .screen-content {
        flex-direction: column;
        gap: 8px;
    }
    
    .column {
        width: 100%;
        flex: 1 1 auto;
    }
    
    #left-column, #middle-column, #right-column {
        width: 100%;
    }
    
    .compact-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
    
    .tooltip {
        max-width: 300px;
    }
}

/* Tablet/small screens */
@media (max-width: 768px) {
    .screen-content {
        padding: 5px;
    }
    
    .column {
        padding: 0;
    }
    
    .compact-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
    
    .tooltip {
        max-width: 250px;
    }
}

/* Height-based responsive adjustments */
@media (max-height: 900px) {
    .panel.tall-panel .panel-content {
        height: 600px;
    }
}

@media (max-height: 700px) {
    .panel.tall-panel .panel-content {
        height: 450px;
    }
}

/* Height-based tooltip adjustments */
@media (max-height: 800px) {
    .tooltip {
        max-height: 80vh;
        overflow-y: auto;
    }
}

/* Small screens */
@media (max-width: 991px) {
    .tooltip {
        position: fixed !important;
        top: 10% !important;
        left: 5% !important;
        width: 90% !important;
        max-width: none !important;
    }
}