/* ============================================================
   Mobile — Responsive breakpoints
   ============================================================ */

@media (max-width: 768px) {
    /* Show mobile header, hide desktop sidebar by default */
    .mobile-header {
        display: flex;
    }

    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-close {
        display: block;
    }

    .sidebar-overlay.active {
        display: block;
    }

    .main-content {
        margin-left: 0;
        padding: 16px;
        padding-top: calc(var(--header-height) + 16px);
    }

    /* Page header */
    .page-header {
        margin-bottom: 16px;
    }

    .page-header h1 {
        font-size: 20px;
    }

    /* Forms */
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    /* Cards */
    .card-grid {
        grid-template-columns: 1fr;
    }

    /* Tables */
    .table-wrapper {
        font-size: 13px;
    }

    /* Toolbar */
    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar .search-box {
        max-width: 100%;
    }

    .toolbar .btn-group {
        justify-content: flex-start;
    }

    /* Tabs */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab {
        flex-shrink: 0;
    }

    /* Week nav */
    .week-nav .week-label {
        font-size: 13px;
        min-width: 160px;
    }

    /* Schedule grid — make horizontal scroll easy */
    .schedule-grid-wrapper {
        margin: 0 -16px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* Staffing dashboard */
    .staffing-week-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Clock list */
    .clock-list {
        grid-template-columns: 1fr;
    }

    /* Modal */
    .modal {
        max-width: 100%;
        margin: 0;
        border-radius: var(--radius) var(--radius) 0 0;
        max-height: 85vh;
    }

    .modal-backdrop {
        align-items: flex-end;
    }

    /* Detail panel */
    .detail-row {
        flex-direction: column;
        gap: 4px;
    }

    .detail-label {
        width: auto;
    }

    /* Login */
    .login-card {
        padding: 32px 24px;
    }

    /* PTO approvals */
    .pto-card-actions {
        flex-direction: column;
    }

    .pto-card-actions .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .staffing-week-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .my-schedule-day {
        flex-direction: column;
    }

    .day-date-col {
        width: 100%;
        flex-direction: row;
        gap: 8px;
        padding: 8px 12px;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
    }

    .day-date-col .day-num {
        font-size: 16px;
    }

    .day-info-col {
        padding: 10px 12px;
    }

    .btn-group {
        flex-direction: column;
    }

    .btn-group .btn {
        width: 100%;
    }
}

/* ---- Print styles ---- */
@media print {
    .sidebar,
    .mobile-header,
    .sidebar-overlay,
    #toast-container {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .btn {
        display: none !important;
    }

    .schedule-grid-wrapper {
        overflow: visible;
    }

    .schedule-grid {
        min-width: auto;
    }
}