/* ============================================
   التصميم المتجاوب - Responsive Design
   ============================================ */

/* Mobile First Approach */

/* Mobile (< 768px) */
@media (max-width: 767.98px) {
    :root {
        --font-size-h1: 2rem;
        --font-size-h2: 1.8rem;
        --font-size-h3: 1.4rem;
        --spacing-xl: 2rem;
        --spacing-lg: 1.5rem;
    }
    
    .container-custom {
        padding: 0 var(--spacing-sm);
    }
    
    .card {
        padding: var(--spacing-md);
    }
    
    .btn {
        width: 100%;
        margin-bottom: var(--spacing-sm);
    }
    
    .btn-sm {
        width: auto;
    }
    
    /* Tables become cards on mobile */
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
    
    .table thead {
        display: none;
    }
    
    .table tbody tr {
        display: block;
        margin-bottom: var(--spacing-md);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: var(--spacing-sm);
    }
    
    .table tbody td {
        display: block;
        text-align: right;
        padding: var(--spacing-xs) 0;
        border: none;
    }
    
    .table tbody td::before {
        content: attr(data-label) ': ';
        font-weight: 700;
        color: var(--color-text);
    }
    
    /* Hide less important elements */
    .hide-mobile {
        display: none !important;
    }
    
    /* Adjust spacing */
    .section {
        padding: var(--spacing-lg) 0;
    }
    
    /* Points badge smaller on mobile */
    .points-badge h2 {
        font-size: 2.5rem;
    }
    
    /* Achievement badges stack */
    .achievement-badge {
        display: block;
        width: 100%;
        margin: var(--spacing-xs) 0;
    }
}

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --font-size-h1: 2.5rem;
        --font-size-h2: 2rem;
        --font-size-h3: 1.6rem;
    }
    
    .container-custom {
        padding: 0 var(--spacing-md);
    }
    
    .card {
        padding: var(--spacing-lg);
    }
    
    /* Grid adjustments */
    .row.g-3 > [class*="col-"] {
        margin-bottom: var(--spacing-md);
    }
}

/* Desktop (> 1024px) */
@media (min-width: 1025px) {
    .container-custom {
        max-width: 1200px;
    }
    
    /* Show desktop-only elements */
    .hide-desktop {
        display: none !important;
    }
}

/* Large Desktop (> 1440px) */
@media (min-width: 1440px) {
    .container-custom {
        max-width: 1400px;
    }
}

/* Touch Device Optimizations (Mobile-first) */
@media (hover: none) and (pointer: coarse) {
    .btn, .card, .answer-option, .region-card, .city-card,
    .ui-btn, .ui-card, .radio-option, .ui-checkbox {
        min-height: 48px;
    }
    .ui-input, .ui-select, .form-control {
        min-height: 48px;
    }
    body { font-size: 1rem; }
    .ui-theme body { -webkit-text-size-adjust: 100%; }
}

/* Safe area for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
    .ui-page, .login-page, .dash-page, .response-page, .basic-info-page, .city-selection-page {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* Landscape Mobile */
@media (max-width: 767.98px) and (orientation: landscape) {
    .header-section {
        padding: var(--spacing-md) 0;
    }
    
    .header-section h1 {
        font-size: 1.8rem;
    }
}

/* Print Styles */
@media print {
    body {
        background: white;
        color: black;
    }
    
    .no-print,
    .btn,
    .navbar,
    .celebration {
        display: none !important;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .table {
        border: 1px solid #ddd;
    }
    
    .table thead {
        background: #f5f5f5 !important;
        color: black !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #0000ff;
        --color-text: #000000;
        --color-bg: #ffffff;
        --color-border: #000000;
    }
    
    .card {
        border: 2px solid var(--color-border);
    }
    
    .btn {
        border: 2px solid currentColor;
    }
}

/* 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 Support (Future) */
@media (prefers-color-scheme: dark) {
    /* يمكن إضافة دعم Dark Mode لاحقاً */
}