/* ================================================================
   RESPONSIVE.CSS - Mobile & Tablet Breakpoints
   ================================================================ */

/* ===== TABLET: 768px and below ===== */
@media (max-width: 768px) {
    /* Dashboard Layout */
    .dashboard-container {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
    }

    .sidebar-menu {
        flex-direction: row;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .sidebar-item {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Product Grid */
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }

    /* Products Page */
    .products-page {
        grid-template-columns: 1fr;
    }

    .filter-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .filter-group {
        flex-shrink: 0;
    }

    /* Navigation */
    .nav-links {
        gap: var(--spacing-md);
        font-size: var(--font-size-sm);
    }

    header nav {
        flex-wrap: wrap;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
    }

    /* Statistics */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Forms */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Modal */
    .modal-content {
        padding: var(--spacing-lg);
        width: 95%;
    }

    /* Headings */
    h1 { font-size: var(--font-size-2xl); }
    h2 { font-size: var(--font-size-xl); }
    h3 { font-size: var(--font-size-lg); }

    /* Tables */
    table {
        font-size: var(--font-size-sm);
    }

    th, td {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* Buttons */
    .btn {
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: var(--font-size-sm);
    }

    /* Main Padding */
    main {
        padding: var(--spacing-lg) 0;
    }
}

/* ===== MOBILE: 480px and below ===== */
@media (max-width: 480px) {
    /* Product Grid */
    .product-grid {
        grid-template-columns: 1fr;
    }

    /* Statistics */
    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* Navigation */
    header nav {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .nav-links {
        flex-direction: column;
        gap: var(--spacing-sm);
        width: 100%;
    }

    .nav-links a {
        display: block;
        text-align: center;
        padding: var(--spacing-sm) 0;
    }

    .user-menu {
        flex-direction: column;
        gap: var(--spacing-sm);
        width: 100%;
    }

    .user-menu .btn {
        width: 100%;
    }

    .logo {
        font-size: var(--font-size-lg);
        justify-content: center;
        width: 100%;
    }

    /* Modal */
    .modal-content {
        width: 95%;
        padding: var(--spacing-md);
        max-height: calc(100vh - 40px);
    }

    .modal-header {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start;
    }

    /* Headings */
    h1 { 
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-md);
    }
    h2 { font-size: var(--font-size-lg); }
    h3 { font-size: var(--font-size-base); }

    /* Tables */
    .table-container {
        overflow-x: auto;
        border-radius: var(--radius-md);
        border: 1px solid var(--border-color);
    }

    table {
        font-size: var(--font-size-xs);
        min-width: 600px;
    }

    th {
        background-color: var(--primary-green);
        color: var(--bg-white);
    }

    th, td {
        padding: var(--spacing-sm);
        white-space: nowrap;
    }

    /* Forms */
    .form-row {
        grid-template-columns: 1fr;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: var(--spacing-md);
        font-size: 16px; /* Prevent zoom on iOS */
    }

    /* Buttons */
    .btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
        min-height: 44px; /* Touch target size */
    }

    .btn-block {
        width: 100%;
    }

    .action-buttons {
        flex-direction: column;
    }

    .action-buttons .btn {
        width: 100%;
    }

    /* Cards */
    .card {
        padding: var(--spacing-md);
    }

    .product-details {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .product-detail-item {
        border-bottom: 1px solid var(--border-light);
        padding-bottom: var(--spacing-sm);
    }

    .product-detail-item:last-child {
        border-bottom: none;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .footer-section {
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: var(--spacing-lg);
    }

    .footer-section:last-child {
        border-bottom: none;
    }

    /* Container */
    .container {
        padding: 0 var(--spacing-sm);
    }

    /* Main Content */
    main {
        padding: var(--spacing-lg) 0;
        min-height: auto;
    }

    /* Filters */
    .filter-sidebar {
        width: 100%;
        flex-direction: column;
    }

    .filter-group {
        width: 100%;
    }

    /* Sidebar */
    .sidebar {
        padding: var(--spacing-md);
    }

    .sidebar-item {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }

    /* User Profile */
    .user-profile {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .avatar {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-xs);
    }

    /* Stats Cards */
    .stat-card {
        padding: var(--spacing-md);
    }

    .stat-value {
        font-size: var(--font-size-2xl);
    }

    .stat-label {
        font-size: var(--font-size-xs);
    }

    /* Badge */
    .badge {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
    }

    /* Alert */
    .alert {
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }
}

/* ===== SMALL MOBILE: 360px and below ===== */
@media (max-width: 360px) {
    h1 { font-size: var(--font-size-lg); }
    h2 { font-size: var(--font-size-base); }

    .product-name {
        font-size: var(--font-size-base);
    }

    .price {
        font-size: var(--font-size-xl);
    }

    .stat-value {
        font-size: var(--font-size-xl);
    }

    .container {
        padding: 0 var(--spacing-xs);
    }
}