/**
 * EZBaths Universal Responsive Design Fixes
 * Ensures perfect functionality across Mobile, Tablet, and Desktop
 */

/* ============================================
   UNIVERSAL BACK BUTTON STYLE
   ============================================ */

.back-button,
.btn-back {
    background: linear-gradient(135deg, #3498db 0%, #2ecc71 100%);
    border: none;
    color: white;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.back-button:hover,
.btn-back:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.5);
}

.back-button:active,
.btn-back:active {
    transform: translateY(0);
}

/* Fixed position back button variant */
.back-button.fixed,
.btn-back.fixed {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 100;
    margin: 0;
}

@media (max-width: 768px) {

    .back-button.fixed,
    .btn-back.fixed {
        top: 10px;
        left: 10px;
        padding: 8px 14px;
        font-size: 12px;
    }
}

/* ============================================
   UNIVERSAL TOUCH & MOBILE OPTIMIZATION
   ============================================ */

/* Prevent text selection on touch devices for UI elements */
.btn,
.card,
.option-card,
.menu-card,
.quick-link {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

/* Allow text selection in input areas */
input,
textarea,
[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

/* Improve touch target sizes (minimum 44x44px) */
button,
.btn,
a.card,
.option-card,
input[type="button"],
input[type="submit"],
input[type="checkbox"],
input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 20px;
}

/* Smooth scrolling for all devices */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* ============================================
   MOBILE BREAKPOINT (< 768px)
   ============================================ */
@media (max-width: 767px) {

    /* Body adjustments */
    body {
        padding: calc(10px + env(safe-area-inset-top)) 15px calc(20px + env(safe-area-inset-bottom)) 15px !important;
    }

    /* Container max-width */
    .container {
        max-width: 100% !important;
        margin: 0 auto !important;
        border-radius: 15px !important;
    }

    /* Headers */
    h1 {
        font-size: clamp(24px, 6vw, 28px) !important;
    }

    h2 {
        font-size: clamp(20px, 5vw, 24px) !important;
    }

    h3 {
        font-size: clamp(18px, 4.5vw, 20px) !important;
    }

    /* Grid layouts - single column on mobile */
    .main-options,
    .menu-grid,
    .quick-links-grid,
    .grid,
    [class*="grid"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Cards - full width on mobile */
    .card,
    .option-card,
    .menu-card,
    .module-card {
        width: 100% !important;
        margin: 0 0 15px 0 !important;
    }

    /* Navbar */
    .navbar {
        padding: 12px 15px !important;
        flex-wrap: wrap;
    }

    .navbar .nav-links {
        display: none;
        /* Hide on mobile, show hamburger instead */
    }

    /* Forms */
    input,
    textarea,
    select {
        font-size: 16px !important;
        /* Prevents zoom on iOS */
        padding: 12px 15px !important;
    }

    /* Buttons */
    .btn,
    button {
        width: 100%;
        padding: 14px 20px !important;
        font-size: 16px !important;
    }

    /* Tables - make scrollable */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* Modals */
    .modal,
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 20px auto !important;
    }

    /* Photo/Video elements */
    video,
    img,
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Scheduler specific */
    .schedule-table {
        font-size: 12px !important;
    }

    .schedule-table td,
    .schedule-table th {
        padding: 8px 4px !important;
    }

    /* Photo checklist */
    .photo-grid {
        grid-template-columns: 1fr !important;
    }

    .photo-item {
        margin-bottom: 20px !important;
    }

    /* Measurement inputs */
    .measurement-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .measurement-input {
        width: 100% !important;
    }
}

/* ============================================
   TABLET BREAKPOINT (768px - 1024px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Body adjustments */
    body {
        padding: 20px !important;
    }

    /* Container */
    .container {
        max-width: 720px !important;
    }

    /* Grid layouts - 2 columns on tablet */
    .main-options,
    .menu-grid,
    .quick-links-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* Headers */
    h1 {
        font-size: clamp(28px, 5vw, 32px) !important;
    }

    h2 {
        font-size: clamp(24px, 4vw, 28px) !important;
    }

    /* Forms */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Buttons */
    .btn,
    button {
        padding: 12px 24px !important;
    }

    /* Scheduler */
    .schedule-table {
        font-size: 14px !important;
    }

    /* Photo checklist */
    .photo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   DESKTOP BREAKPOINT (> 1024px)
   ============================================ */
@media (min-width: 1025px) {

    /* Container */
    .container {
        max-width: 900px !important;
    }

    /* Grid layouts - 3 columns on desktop */
    .menu-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .main-options {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Photo checklist */
    .photo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   LANDSCAPE MOBILE (orientation)
   ============================================ */
@media (max-width: 767px) and (orientation: landscape) {
    body {
        padding: 10px !important;
    }

    .header {
        padding: 15px 20px !important;
    }

    .container {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    /* Reduce vertical spacing in landscape */
    .card,
    .option-card {
        padding: 15px !important;
        margin-bottom: 10px !important;
    }
}

/* ============================================
   iOS SPECIFIC FIXES
   ============================================ */
@supports (-webkit-touch-callout: none) {

    /* iOS Safari fixes */
    body {
        min-height: -webkit-fill-available;
    }

    /* Fix for iOS input zoom */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Fix sticky position on iOS */
    .navbar,
    .header {
        position: -webkit-sticky;
        position: sticky;
    }
}

/* ============================================
   ANDROID SPECIFIC FIXES
   ============================================ */
@media screen and (-webkit-min-device-pixel-ratio: 0) {

    /* Prevent text inflation on Android */
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}

/* ============================================
   ACCESSIBILITY - REDUCE MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */
@media (prefers-contrast: high) {

    .card,
    .option-card,
    .menu-card {
        border: 2px solid currentColor !important;
    }

    button,
    .btn {
        border: 2px solid currentColor !important;
    }

    input,
    textarea,
    select {
        border: 2px solid currentColor !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {

    /* Hide navigation and non-essential elements */
    .navbar,
    .quick-links,
    .back-button,
    button {
        display: none !important;
    }

    /* Remove backgrounds and shadows */
    body {
        background: white !important;
        color: black !important;
    }

    .container {
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }

    /* Ensure proper page breaks */
    .card,
    .option-card {
        page-break-inside: avoid;
    }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (hover: none) and (pointer: coarse) {

    /* Remove hover effects on touch devices */
    .card:hover,
    .option-card:hover,
    .menu-card:hover {
        transform: none !important;
    }

    /* Use active state instead */
    .card:active,
    .option-card:active,
    .menu-card:active {
        transform: scale(0.98) !important;
        opacity: 0.9 !important;
    }

    /* Larger click targets */
    a,
    button,
    .btn,
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 48px;
        min-width: 48px;
    }
}

/* ============================================
   DARK MODE SUPPORT (future-proofing)
   ============================================ */
@media (prefers-color-scheme: dark) {

    /* Already dark by default, but ensure consistency */
    body {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
        color: #ffffff !important;
    }
}

/* ============================================
   SAFE AREA INSETS (iPhone X+, notch support)
   ============================================ */
@supports (padding: max(0px)) {
    body {
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
        padding-top: max(20px, env(safe-area-inset-top));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    .navbar {
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
    }
}

/* ============================================
   FIX COMMON MOBILE ISSUES
   ============================================ */

/* Prevent horizontal scroll */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Fix viewport height on mobile (address bar issue) */
body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

/* Improve button appearance on iOS */
button,
input[type="button"],
input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 8px;
}

/* Fix text rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Prevent double-tap zoom */
a,
button {
    touch-action: manipulation;
}

/* Fix flexbox on older mobile browsers */
.flex,
[class*="flex"] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}