/* ============================================
   AGUIRRE DESPENSA — Responsive Design (Mobile-First)
   ============================================ */

/* Tablet landscape & below */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* Tablet portrait & below */
@media (max-width: 992px) {
    .dashboard-grid,
    .dashboard-grid-2 {
        grid-template-columns: 1fr;
    }
    .purchase-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Sidebar slides in from left */
    .sidebar {
        transform: translateX(-100%);
    }

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

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

    .sidebar-close {
        display: block;
    }

    .main-area {
        margin-left: 0;
    }

    .hamburger-btn {
        display: flex;
    }

    .top-header {
        padding: 0 16px;
    }

    .header-search-box {
        width: 100%;
    }

    .search-shortcut {
        display: none;
    }

    .content-area {
        padding: 20px 16px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-value {
        font-size: 22px;
    }

    .stat-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

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

    .page-actions {
        width: 100%;
    }

    .page-actions .btn {
        flex: 1;
        justify-content: center;
    }

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

    .product-actions {
        flex-direction: column;
    }

    .product-actions .btn {
        justify-content: center;
        padding: 12px 14px;
    }

    .product-admin-actions {
        flex-direction: column;
        gap: 4px;
    }

    .product-admin-actions .btn-text {
        justify-content: center;
        padding: 10px 14px;
    }

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

    .card-header {
        padding: 14px 18px;
    }

    .card-body {
        padding: 18px;
    }

    .expense-card {
        flex-wrap: wrap;
        padding: 14px;
    }

    .expense-amount {
        font-size: 14px;
    }

    .purchase-item {
        flex-direction: column;
        text-align: center;
    }

    .purchase-quantity {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--border-subtle);
    }

    .qty-label-sm { display: none; }

    .modal {
        padding: 10px;
        align-items: flex-end;
    }

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

    .modal-header {
        padding: 18px 18px 14px;
    }

    .modal-body {
        padding: 18px;
    }

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

    .modal-actions .btn {
        width: 100%;
        justify-content: center;
        padding: 12px 22px;
    }

    .sync-history-item {
        grid-template-columns: 55px 80px 60px 1fr;
        font-size: 11px;
        gap: 8px;
    }

    .maintenance-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .login-card {
        padding: 28px 24px;
    }

    .category-filter {
        padding-bottom: 8px;
    }

    .user-card-badge-active {
        display: none;
    }

    .purchased-item {
        flex-wrap: wrap;
    }

    .purchased-item small {
        margin-left: 0;
        width: 100%;
    }

    .app-footer {
        flex-direction: column;
        gap: 6px;
        text-align: center;
        padding: 12px 16px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-value {
        font-size: 20px;
    }

    .product-header {
        flex-direction: column;
        gap: 8px;
    }

    .product-category {
        align-self: flex-start;
        margin-left: 0;
    }

    .expense-details-info {
        flex-direction: column;
        gap: 4px;
    }

    .expense-avatar {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }

    .sync-history-item {
        grid-template-columns: 1fr;
        gap: 3px;
        padding: 12px 0;
    }

    .login-card {
        padding: 20px 16px;
    }

    .user-quick-select .quick-user {
        padding: 10px 14px;
        font-size: 13px;
    }

    .header-search-box {
        padding: 6px 10px;
    }

    .sidebar-brand {
        padding: 16px;
    }

    .sidebar-user {
        padding: 12px 16px;
    }

    .sidebar-nav {
        padding: 8px;
    }

    .nav-item {
        padding: 10px 12px;
    }
}

/* Print */
@media print {
    .sidebar,
    .top-header,
    .app-footer,
    .btn,
    .sidebar-overlay,
    .hamburger-btn,
    .search-bar,
    .category-filter,
    .header-search-box,
    .header-right {
        display: none !important;
    }

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

    .card {
        break-inside: avoid;
        border: 1px solid #ccc !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .content-area {
        padding: 0 !important;
    }
}

/* High contrast */
@media (prefers-contrast: high) {
    :root {
        --bg-deep: #FFFFFF;
        --bg-primary: #FFFFFF;
        --bg-secondary: #FFFFFF;
        --border: #64748B;
        --text-primary: #000000;
        --text-secondary: #1E293B;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}