@media (max-width: 1400px) {
    .stat-grid.stats-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .users-layout,
    .form-grid,
    .layout-grid,
    .duty-apply-grid {
        grid-template-columns: 1fr;
    }

    .month-nav {
        flex-wrap: wrap;
    }
}

@media (max-width: 860px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-102%);
        transition: transform 0.2s ease;
        box-shadow: 12px 0 30px rgba(15, 23, 42, 0.12);
    }

    body.sidebar-open .sidebar {
        transform: none;
    }

    .icon-btn.sidebar-close,
    .icon-btn.menu-toggle {
        display: grid;
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.35);
        z-index: 25;
    }

    body.sidebar-open .sidebar-backdrop {
        display: block;
    }

    .topbar,
    .content,
    .app-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .user-meta {
        display: none;
    }

    .app-footer {
        flex-direction: column;
        gap: 4px;
    }
}

@media (max-width: 640px) {
    .duty-apply-grid {
        grid-template-columns: 1fr;
    }

    .month-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        width: 100%;
        gap: 8px;
    }

    .month-nav .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        padding-left: 8px;
        padding-right: 8px;
    }

    .month-nav form {
        grid-column: 1 / -1;
    }

    .month-field {
        min-width: 0;
        width: 100%;
    }

    .month-field input[type="date"],
    .month-field input[type="month"] {
        min-height: 44px;
        width: 100%;
    }

    .stat-grid,
    .quick-grid,
    .quick-grid.quick-3,
    .hr-duty-groups,
    .toolbar {
        grid-template-columns: 1fr;
    }

    .toolbar {
        display: grid;
    }

    .page-heading h1 {
        font-size: 24px;
    }

    .att-row {
        grid-template-columns: 1fr;
    }

    .att-status-btns {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        justify-content: stretch;
    }

    .att-btn {
        min-width: 0;
        width: 100%;
        min-height: 44px;
    }

    .att-register-grid .att-sum {
        position: static;
        right: auto;
    }

    .date-chip span {
        font-size: 12px;
    }

    .payroll-table .staff-col {
        position: static;
    }

    .toolbar-actions {
        margin-left: 0;
        width: 100%;
    }
}