/* responsive.css - Media Queries for Responsive Design */

@media (max-width: 900px) {
    .hud-grid { gap: 20px; }
}

/* Cuesheet responsive breakpoints */
@media (min-width: 1600px) {
    .cuesheet-container {
        margin: 60px 48px;
    }
    .cuesheet-table {
        font-size: 0.75rem;
    }
    .cuesheet-table th {
        font-size: 0.65rem;
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    .cuesheet-container {
        margin: 60px 24px;
    }
}

@media (min-width: 900px) and (max-width: 1199px) {
    .cuesheet-container {
        margin: 40px 16px;
    }
    .cuesheet-table {
        font-size: 0.65rem;
    }
    .cuesheet-table th {
        font-size: 0.55rem;
    }
    .cuesheet-table th.col-firstname { min-width: 80px; }
    .cuesheet-table th.col-lastname { min-width: 70px; }
    .cuesheet-table th.col-publisher { min-width: 80px; }
}

@media (max-width: 899px) {
    .cuesheet-container {
        margin: 20px 8px;
    }
    .cuesheet-table {
        font-size: 0.6rem;
    }
    .cuesheet-table th {
        font-size: 0.5rem;
    }
    .cuesheet-table th.col-timein { min-width: 75px; }
    .cuesheet-table th.col-timeout { min-width: 75px; }
    .cuesheet-table th.col-firstname { min-width: 70px; }
    .cuesheet-table th.col-lastname { min-width: 60px; }
    .cuesheet-table th.col-publisher { min-width: 70px; }
    .cuesheet-table th.col-title { max-width: 250px; }
}