/**
 * C4-AI Dashboard - Responsive Styles
 * Phase 9.1: Foundation
 * 
 * Mobile and tablet breakpoints
 */

/* ==========================================
   TABLET (< 1024px)
   ========================================== */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 240px;
    }
    
    .page-wrapper {
        padding: var(--spacing-xl);
    }
    
    .header-inner {
        padding: 0 var(--spacing-xl);
    }
    
    .user-email {
        display: none;
    }
    
    .stat-card {
        padding: var(--spacing-lg);
    }
    
    .data-table-header {
        padding: var(--spacing-lg);
    }
    
    .data-table th,
    .data-table td {
        padding: var(--spacing-md) var(--spacing-lg);
    }
}

/* ==========================================
   MOBILE (< 768px)
   ========================================== */
@media (max-width: 768px) {
    /* Sidebar becomes overlay */
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width);
    }
    
    .rtl .sidebar {
        transform: translateX(100%);
    }
    
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    
    .sidebar.collapsed {
        width: var(--sidebar-width);
    }
    
    .sidebar.collapsed .nav-text,
    .sidebar.collapsed .logo-text {
        display: block;
    }
    
    .sidebar.collapsed .nav-link {
        justify-content: flex-start;
        padding: var(--spacing-md);
    }
    
    .sidebar-collapse-btn {
        display: none;
    }
    
    /* Main content full width */
    .main-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Show mobile menu button */
    .mobile-menu-btn {
        display: flex;
    }
    
    /* Show overlay */
    .sidebar-overlay {
        display: block;
    }
    
    /* Header */
    .header-inner {
        padding: 0 var(--spacing-lg);
    }
    
    .header-title h1 {
        font-size: var(--font-size-lg);
    }
    
    .subscription-badge .badge-text {
        display: none;
    }
    
    /* Page content */
    .page-wrapper {
        padding: var(--spacing-lg);
    }
    
    /* Stat cards stack */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    .stat-card {
        flex-direction: row;
        align-items: center;
    }
    
    /* Tables scroll horizontally */
    .data-table-wrapper {
        overflow-x: auto;
    }
    
    .data-table {
        min-width: 600px;
    }
    
    .data-table-header,
    .data-table-footer {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    
    .data-table-actions {
        justify-content: center;
    }
    
    .data-table-pagination {
        justify-content: center;
    }
    
    /* Modals */
    .modal {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    
    .modal-overlay {
        padding: 0;
    }
    
    /* Cards */
    .card-header,
    .card-body,
    .card-footer {
        padding: var(--spacing-lg);
    }
}

/* ==========================================
   SMALL MOBILE (< 480px)
   ========================================== */
@media (max-width: 480px) {
    :root {
        --font-size-3xl: 20px;
        --font-size-2xl: 18px;
        --font-size-xl: 16px;
    }
    
    .header-actions {
        gap: var(--spacing-sm);
    }
    
    .lang-switch-btn {
        width: 36px;
        height: 36px;
    }
    
    .user-menu-btn {
        padding: var(--spacing-sm);
    }
    
    .user-avatar {
        width: 28px;
        height: 28px;
    }
    
    .user-menu-btn svg {
        display: none;
    }
    
    .page-wrapper {
        padding: var(--spacing-md);
    }
    
    .btn {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-sm);
    }
    
    .form-input {
        padding: var(--spacing-md);
    }
}

/* ==========================================
   PRINT
   ========================================== */
@media print {
    .sidebar,
    .header,
    .sidebar-overlay {
        display: none !important;
    }
    
    .main-content {
        margin: 0 !important;
    }
    
    .page-wrapper {
        padding: 0;
    }
    
    .btn,
    .pagination-btn {
        display: none;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

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

/* ==========================================
   DARK MODE (future support)
   ========================================== */
@media (prefers-color-scheme: dark) {
    /* Dark mode variables can be added here in the future */
}

/* ==========================================
   HIGH CONTRAST
   ========================================== */
@media (forced-colors: active) {
    .btn {
        border: 2px solid currentColor;
    }
    
    .nav-link.active {
        border: 2px solid currentColor;
    }
}