/* Mobile-first responsive design */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 100%;
        --spacing-xl: 1rem;
    }

    /* Layout adjustments */
    .main-content.with-sidebar {
        margin-left: 0;
    }

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

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

    .sidebar-nav {
        padding-bottom: 100px; /* Space for overlay close */
    }

    /* Mobile menu toggle */
    .mobile-menu-toggle {
        display: block;
    }

    .sidebar-toggle {
        display: none;
    }

    /* Header adjustments */
    .top-header {
        padding: 0 var(--spacing-md);
    }

    .page-content {
        padding: var(--spacing-md);
    }

    /* Dashboard mobile layout */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    /* Card mobile adjustments */
    .card-header {
        padding: var(--spacing-md);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .card-content {
        padding: var(--spacing-md);
    }

    /* Button mobile adjustments */
    .btn {
        min-height: 44px; /* Better touch targets */
    }

    /* Form mobile adjustments */
    .form-input {
        min-height: 44px;
        font-size: 16px; /* Prevent zoom on iOS */
    }

    /* Dropdown mobile adjustments */
    .dropdown-menu {
        min-width: 180px;
        right: 0;
        left: auto;
    }

    /* Modal mobile adjustments */
    .modal {
        margin: var(--spacing-md);
        width: calc(100% - 2rem);
    }

    .modal-footer {
        flex-direction: column-reverse;
    }

    .modal-footer .btn {
        width: 100%;
    }

    /* Flash message mobile */
    .flash-message {
        top: var(--spacing-md);
        right: var(--spacing-md);
        left: var(--spacing-md);
        max-width: none;
    }

    /* Typography mobile adjustments */
    .dashboard-title {
        font-size: 1.5rem;
    }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    /* Activity items mobile */
    .activity-item {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .activity-icon {
        align-self: flex-start;
    }

    /* Stat card mobile */
    .stat-card {
        flex-direction: column;
        text-align: center;
    }

    .stat-icon {
        margin-bottom: var(--spacing-sm);
    }
}

@media (max-width: 480px) {
    :root {
        --spacing-xl: 0.75rem;
        --spacing-lg: 0.75rem;
    }

    .page-content {
        padding: var(--spacing-sm);
    }

    .stats-grid {
        gap: var(--spacing-sm);
    }

    .dashboard-grid {
        gap: var(--spacing-sm);
    }

    .stat-card {
        padding: var(--spacing-md);
    }

    .card-header,
    .card-content {
        padding: var(--spacing-sm);
    }

    .dashboard-header {
        margin-bottom: var(--spacing-lg);
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* Large screen adjustments */
@media (min-width: 1400px) {
    .dashboard-container {
        max-width: 1400px;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}