/* styles/responsive.css - Responsive Design */
@media (min-width: 1025px) {
    .mobile-menu-toggle,
    .mobile-overlay {
        display: none !important;
    }
}

@media (max-width: 1440px) {
    .content-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 1280px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .sidebar {
        width: min(84vw, 320px);
        transform: translateX(-100%);
        box-shadow: var(--shadow-xl);
        z-index: calc(var(--z-modal) + 2);
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0;
    }
    
    .sidebar.collapsed ~ .main-content {
        margin-left: 0;
    }
    
    .mobile-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: calc(var(--z-modal) + 1);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-base);
    }
    
    .mobile-overlay.open {
        opacity: 1;
        visibility: visible;
    }
    
    .search-bar {
        width: 100%;
        flex-basis: 280px;
    }

    .mobile-menu-toggle {
        display: inline-flex;
    }

    .top-bar {
        padding-inline: var(--space-4);
    }

    .page-content {
        padding: var(--space-5);
    }

    body.mobile-nav-open {
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .top-bar {
        height: auto;
        min-height: var(--top-bar-height);
        align-items: center;
        flex-wrap: wrap;
        padding-block: var(--space-3);
    }

    .mobile-menu-toggle {
        order: 1;
    }

    .top-actions {
        order: 2;
        margin-left: auto;
    }

    .search-bar {
        display: flex;
        order: 3;
        width: 100%;
        flex-basis: 100%;
    }
    
    .page-header {
        flex-direction: column;
        gap: var(--space-4);
        align-items: flex-start;
    }

    .page-header > div,
    .page-header-actions {
        width: 100%;
    }

    .page-header-actions {
        justify-content: stretch;
    }

    .page-header-actions .btn {
        flex: 1 1 100%;
        width: 100%;
    }
    
    .filters-bar {
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-4);
    }
    
    .filter-group {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group select,
    .filter-group input,
    .filter-group .btn {
        width: 100%;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }

    .table-footer {
        flex-direction: column;
        align-items: stretch;
    }
    
    .drawer,
    .slide-over-panel {
        width: 100%;
        max-width: 100%;
    }
    
    .modal {
        margin: var(--space-4);
        max-height: calc(100vh - var(--space-8));
        max-width: calc(100vw - var(--space-8));
    }
    
    .batch-bar {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .kanban-board {
        grid-template-columns: 1fr;
    }
    
    .variation-row {
        grid-template-columns: 1fr;
    }
    
    .meta-field {
        grid-template-columns: 1fr;
    }
    
    .repeater-item {
        flex-direction: column;
    }
    
    .repeater-remove {
        margin-top: 0;
        align-self: flex-end;
    }

    .modal-header,
    .modal-body,
    .modal-footer,
    .drawer-header,
    .drawer-body,
    .drawer-footer,
    .slide-over-header,
    .slide-over-body,
    .slide-over-footer,
    .content-card-header,
    .content-card-body,
    .card-header,
    .card-body {
        padding-inline: var(--space-4);
    }

    .modal-footer,
    .drawer-footer,
    .slide-over-footer {
        flex-wrap: wrap;
    }

    .modal-footer .btn,
    .drawer-footer .btn,
    .slide-over-footer .btn {
        flex: 1 1 100%;
        width: 100%;
    }

    .slide-over-header {
        align-items: flex-start;
        gap: var(--space-3);
    }

    .slide-over-header h3 {
        font-size: var(--text-xl);
        line-height: 1.3;
        min-width: 0;
    }

    .content-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .content-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns: 240px 1fr"] {
        grid-template-columns: 1fr !important;
    }

    [style*="align-items: flex-end; gap: var(--space-2);"] {
        align-items: stretch !important;
        flex-direction: column !important;
    }
}

@media (max-width: 480px) {
    .connection-card {
        padding: var(--space-6);
    }
    
    .page-content {
        padding: var(--space-4);
    }

    .top-bar {
        padding-inline: var(--space-3);
    }
    
    .stat-card {
        padding: var(--space-4);
    }
    
    .data-card {
        flex-direction: column;
        text-align: center;
    }
    
    .data-card-actions {
        width: 100%;
        justify-content: center;
    }
    
    .top-actions {
        gap: var(--space-1);
    }

    .top-actions .avatar {
        width: 32px;
        height: 32px;
    }
    
    .icon-btn {
        width: 36px;
        height: 36px;
    }
    
    .notification-panel {
        width: calc(100vw - var(--space-6));
        right: var(--space-3);
    }

    .sidebar {
        width: min(92vw, 320px);
    }

    .connection-form .form-row,
    .connection-form .form-options,
    .confirm-dialog-actions,
    .pagination,
    .tabs {
        flex-direction: column;
        align-items: stretch;
    }

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

    .pagination .page-btn,
    .confirm-dialog-actions .btn,
    .tabs .tab {
        width: 100%;
        justify-content: center;
    }

    .dropdown-menu {
        min-width: 180px;
        right: 0;
    }
}

/* Print Styles */
@media print {
    .sidebar, .top-bar, .page-header-actions, .cell-actions, .batch-bar {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0;
    }
    
    .data-table {
        font-size: 12px;
    }
    
    .data-table th, .data-table td {
        padding: 8px;
    }
}

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

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --border-color: #000;
        --text-secondary: #000;
    }
    
    .btn-primary {
        border: 2px solid #000;
    }
}