/**
 * Responsive Styles
 * Media queries and device-specific adjustments
 * Breakpoints: 375px (iPhone 6) to 2560px (4K Desktop)
 */

/* ============================================================================
   MOBILE FIRST (375px - 767px)
   ============================================================================ */

/* Base styles are mobile-first, so this is the default */

/* Extra small devices specific adjustments */
@media (max-width: 374px) {
    .container {
        padding: 0 var(--space-sm);
    }

    .btn {
        padding: var(--space-xs) var(--space-md);
        font-size: var(--text-sm);
    }

    .card {
        padding: var(--space-md);
    }
}

/* Mobile optimizations (375px - 767px) */
@media (max-width: 767px) {
    /* Stack layout grid on mobile - flex override ensures order property works */
    .layout-grid {
        display: flex !important;
        flex-direction: column;
    }

    /* Full-width buttons on mobile */
    .mobile-full {
        width: 100%;
    }

    /* Reduce padding on cards */
    .card {
        padding: var(--space-lg);
    }

    /* Adjust header */
    .header {
        padding: var(--space-md) 0;
    }

    .header-brand h1 {
        font-size: var(--text-lg);
    }

    /* Form groups */
    .form-group {
        margin-bottom: var(--space-md);
    }

    /* Button groups stack on mobile */
    .button-group {
        flex-direction: column;
    }

    .button-group .btn {
        width: 100%;
    }

    /* Table responsive */
    .table {
        font-size: var(--text-sm);
    }

    .table th,
    .table td {
        padding: var(--space-sm);
    }

    /* Mobile section ordering - prioritize most important info first */

    /* Make main container use flexbox for proper ordering */
    .main > .container {
        display: flex;
        flex-direction: column;
    }

    /* Countdown Timer - First */
    #countdownSection {
        order: -10;
    }

    /* Results panel comes before config panel */
    .results-panel {
        order: -5;
        display: flex;
        flex-direction: column;
    }

    /* Within results-panel: Prayer Times card - Second */
    .results-panel > .card:has(#prayerTimesTable),
    .results-panel > div.card:has(#prayerTimesBody) {
        order: -3;
    }

    /* Within results-panel: Preferred Times card - Third */
    .results-panel > #preferredTimesSection,
    .results-panel > div.card:has(#preferredTimesBody) {
        order: -2;
    }

    /* Within results-panel: Export card comes after preferred times */
    .results-panel > .card:has(#exportCSV) {
        order: -1;
    }

    /* Config panel comes after results */
    .config-panel {
        order: 0;
        display: flex;
        flex-direction: column;
    }

    /* Within config-panel: Location Section - First */
    .config-panel > section.card:has(#useCurrentLocation),
    .config-panel > section.card:has(#latitude) {
        order: -5;
    }

    /* Within config-panel: Method Selection - Second */
    .config-panel > section.card:has(#methodSelect) {
        order: -4;
    }

    /* Within config-panel: Date Selection - Third */
    .config-panel > section.card:has(#dateInput) {
        order: -3;
    }

    /* Within config-panel: Custom Parameters - Fourth */
    .config-panel > section.card:has(#customParamsPanel) {
        order: -2;
    }

    /* Within config-panel: Qibla Section - Fifth */
    .config-panel > section.card:has(#qiblaPanel) {
        order: -1;
    }

    /* All other sections come after (default order: 0) */
}

/* ============================================================================
   TABLET (768px - 1023px)
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        max-width: var(--container-md);
    }

    /* Two-column grid for certain layouts */
    .grid-tablet-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Adjust card padding */
    .card {
        padding: var(--space-xl);
    }

    /* Form layouts */
    .form-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
}

/* ============================================================================
   DESKTOP (1024px - 1279px)
   ============================================================================ */

@media (min-width: 1024px) {
    .container {
        max-width: var(--container-lg);
    }

    /* Two-column layout activates */
    .layout-grid {
        grid-template-columns: 400px 1fr;
    }

    /* Larger cards */
    .card {
        padding: var(--space-2xl);
    }

    /* Form layouts */
    .form-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }

    /* Hide mobile-only elements */
    .mobile-only {
        display: none !important;
    }

    /* Show desktop-only elements */
    .desktop-only {
        display: block;
    }
}

/* ============================================================================
   LARGE DESKTOP (1280px - 1919px)
   ============================================================================ */

@media (min-width: 1280px) {
    .container {
        max-width: var(--container-xl);
    }

    /* Wider config panel */
    .layout-grid {
        grid-template-columns: 450px 1fr;
    }

    /* Increase padding */
    .main {
        padding: var(--space-2xl) 0;
    }
}

/* ============================================================================
   EXTRA LARGE DESKTOP (1920px - 2559px)
   ============================================================================ */

@media (min-width: 1920px) {
    .container {
        max-width: var(--container-2xl);
    }

    /* Even wider config panel for large screens */
    .layout-grid {
        grid-template-columns: 500px 1fr;
    }

    /* Larger font sizes for readability on large screens */
    .card h2 {
        font-size: var(--text-2xl);
    }

    .card h3 {
        font-size: var(--text-xl);
    }
}

/* ============================================================================
   4K AND ULTRA-WIDE (2560px+)
   ============================================================================ */

@media (min-width: 2560px) {
    :root {
        /* Slightly larger base font for 4K readability */
        --text-base: clamp(1.125rem, 1rem + 0.25vw, 1.25rem);
    }

    .container {
        max-width: 1800px; /* Cap width for readability */
    }

    .layout-grid {
        grid-template-columns: 550px 1fr;
        gap: var(--space-3xl);
    }

    .card {
        padding: var(--space-3xl);
    }

    /* Increase spacing for better use of space */
    .main {
        padding: var(--space-3xl) 0;
    }
}

/* ============================================================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================================================ */

@media (hover: none) and (pointer: coarse) {
    /* Increase touch target sizes */
    .btn {
        min-height: 48px;
        min-width: 48px;
    }

    .btn-icon {
        width: 48px;
        height: 48px;
    }

    .input,
    .select,
    .textarea {
        min-height: 48px;
    }

    .radio,
    .checkbox {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }

    /* Increase spacing for easier tapping */
    .form-group {
        margin-bottom: var(--space-xl);
    }

    /* Remove hover effects on touch devices */
    .card:hover {
        box-shadow: var(--shadow-sm);
    }

    /* Provide tap feedback */
    .btn:active:not(:disabled) {
        opacity: 0.8;
        transform: scale(0.98);
    }
}

/* ============================================================================
   LANDSCAPE MOBILE (Mobile in landscape orientation)
   ============================================================================ */

@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce vertical padding */
    .header {
        padding: var(--space-sm) 0;
    }

    .main {
        padding: var(--space-md) 0;
    }

    .card {
        padding: var(--space-md);
    }

    .form-group {
        margin-bottom: var(--space-sm);
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    /* Hide non-essential elements */
    .header-controls,
    .btn,
    .footer {
        display: none !important;
    }

    /* Optimize for print */
    body {
        background: white;
        color: black;
    }

    .card {
        border: 1px solid #000;
        box-shadow: none;
        page-break-inside: avoid;
    }

    .table {
        page-break-inside: auto;
    }

    .table tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    /* Ensure good contrast */
    .text-secondary,
    .text-tertiary {
        color: #000;
    }
}

/* ============================================================================
   RESPONSIVE VISIBILITY UTILITIES
   ============================================================================ */

/* Hide on mobile */
@media (max-width: 767px) {
    .hidden-mobile {
        display: none !important;
    }
}

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .hidden-tablet {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 1024px) {
    .hidden-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
.mobile-only {
    display: block;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

/* Show only on desktop */
.desktop-only {
    display: none;
}

@media (min-width: 1024px) {
    .desktop-only {
        display: block;
    }
}

/* ============================================================================
   ACCESSIBILITY: Reduced Motion
   ============================================================================ */

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

    .spinner {
        animation: none;
        opacity: 0.5;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    :root {
        --border-color: #000;
        --border-strong: #000;
    }

    body.dark-mode {
        --border-color: #fff;
        --border-strong: #fff;
    }

    .btn {
        border-width: 2px;
        border-style: solid;
    }

    .input,
    .select,
    .textarea {
        border-width: 2px;
    }
}

/* ============================================================================
   SAFE AREA INSETS (for iPhone X+, notch support)
   ============================================================================ */

@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .header {
        padding-left: max(var(--space-md), env(safe-area-inset-left));
        padding-right: max(var(--space-md), env(safe-area-inset-right));
    }

    .container {
        padding-left: max(var(--space-md), env(safe-area-inset-left));
        padding-right: max(var(--space-md), env(safe-area-inset-right));
    }
}