/**
 * Mobile Responsive CSS - Google Mobile-Friendly Test Fixes
 *
 * This file addresses common mobile accessibility and responsiveness issues
 * to ensure the site passes Google's Mobile-Friendly Test.
 *
 * Issues addressed:
 * - Horizontal scrolling prevention
 * - Touch target sizing (44px minimum per iOS HIG)
 * - Font size for inputs (16px minimum to prevent iOS zoom)
 * - Viewport and container constraints
 */

/* ==========================================================================
   Base Mobile Fixes - Prevent Horizontal Scrolling
   ========================================================================== */

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

/* Ensure all containers respect viewport width */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent any element from exceeding viewport */
img,
video,
iframe,
embed,
object,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

/* Tables must scroll horizontally if needed */
table {
    max-width: 100%;
}

/* Auto-wrap tables in scrollable container on mobile */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Ensure table cells don't break layout */
    td, th {
        white-space: nowrap;
        padding: 8px 12px;
    }

    /* Tables inside specific containers */
    .table-responsive,
    .data-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -12px;
        padding: 0 12px;
    }
}

/* Pre and code blocks should scroll */
pre,
code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ==========================================================================
   Form Input Fixes - Prevent iOS Zoom on Focus
   ========================================================================== */

/* iOS zooms the page when input font-size is less than 16px */
input,
select,
textarea,
button {
    font-size: 16px;
}

/* Ensure form elements have proper sizing on mobile */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea {
        font-size: 16px !important;
        padding: 12px 14px;
        border-radius: 8px;
        -webkit-appearance: none;
        appearance: none;
    }

    /* Make select dropdowns mobile-friendly */
    select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 36px;
    }
}

/* ==========================================================================
   Touch Target Sizes - iOS HIG requires 44x44px minimum
   ========================================================================== */

@media (max-width: 768px) {
    /* All interactive elements should have minimum touch target */
    a,
    button,
    [role="button"],
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    input[type="checkbox"],
    input[type="radio"],
    .btn,
    .button,
    .link,
    .nav-link,
    .menu-item {
        min-height: 44px;
        min-width: 44px;
    }

    /* Ensure buttons have enough padding */
    button,
    .btn,
    .button,
    input[type="submit"],
    input[type="button"] {
        padding: 12px 16px;
    }

    /* Navigation links should have enough spacing */
    nav a,
    .nav-link,
    .menu-item a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 12px;
    }

    /* Close buttons should be easily tappable */
    .close,
    .close-btn,
    [aria-label="Close"],
    [aria-label="close"],
    .modal-close,
    .dialog-close {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Checkbox and radio labels */
    label {
        display: flex;
        align-items: center;
        min-height: 44px;
        gap: 10px;
    }

    /* Icon buttons */
    .icon-btn,
    .btn-icon,
    button[aria-label] {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
}

/* ==========================================================================
   Container Constraints
   ========================================================================== */

.container,
.wrapper,
.content,
main,
section,
article,
header,
footer,
aside,
nav {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Ensure fixed/absolute elements don't cause overflow */
[style*="position: fixed"],
[style*="position: absolute"] {
    max-width: 100vw;
}

/* ==========================================================================
   Mobile-Specific Responsive Breakpoints
   ========================================================================== */

/* Small mobile (iPhone SE, older Android) */
@media (max-width: 375px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    /* Reduce padding on very small screens */
    .container,
    .content,
    main {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Standard mobile (iPhone 12/13/14, most Android) */
@media (max-width: 480px) {
    /* Stack flex items vertically */
    .flex-row-mobile {
        flex-direction: column;
    }

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

    /* Hide elements marked for desktop only */
    .desktop-only {
        display: none !important;
    }
}

/* Tablet and up */
@media (min-width: 481px) {
    /* Hide elements marked for mobile only */
    .mobile-only {
        display: none !important;
    }
}

/* Tablet */
@media (min-width: 481px) and (max-width: 768px) {
    .tablet-only {
        display: block;
    }
}

/* ==========================================================================
   Modal and Dialog Fixes
   ========================================================================== */

@media (max-width: 768px) {
    /* Modals should be full-screen or bottom sheet on mobile */
    .modal,
    .dialog,
    [role="dialog"] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 100vw;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    /* Bottom sheet style for smaller modals */
    .modal--bottom-sheet,
    .bottom-sheet {
        top: auto;
        border-radius: 16px 16px 0 0;
        max-height: 90vh;
    }

    /* Modal content scrollable */
    .modal-body,
    .modal-content,
    .dialog-body,
    .dialog-content {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==========================================================================
   Table Responsiveness
   ========================================================================== */

@media (max-width: 768px) {
    /* Wrap tables in scrollable container */
    .table-responsive,
    .table-scroll {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 16px;
    }

    /* Ensure table doesn't shrink too much */
    .table-responsive table,
    .table-scroll table {
        min-width: 600px;
    }

    /* Alternative: Stack table rows vertically */
    .table-stack {
        display: block;
    }

    .table-stack thead {
        display: none;
    }

    .table-stack tbody,
    .table-stack tr,
    .table-stack td {
        display: block;
        width: 100%;
    }

    .table-stack tr {
        margin-bottom: 16px;
        padding: 12px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
    }

    .table-stack td {
        padding: 8px 0;
        border: none;
    }

    .table-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        display: block;
        margin-bottom: 4px;
        color: #a8b0b8; /* Improved contrast from #888 */
        font-size: 12px;
        text-transform: uppercase;
    }
}

/* ==========================================================================
   Safe Area Padding (for notched phones)
   ========================================================================== */

@supports (padding-top: env(safe-area-inset-top)) {
    /* Header spacing for notch */
    header,
    .header,
    .top-bar,
    .navbar {
        padding-top: env(safe-area-inset-top);
    }

    /* Footer spacing for home indicator */
    footer,
    .footer,
    .bottom-bar,
    .bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Left/right safe areas for landscape */
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ==========================================================================
   Text Readability on Mobile
   ========================================================================== */

@media (max-width: 768px) {
    /* Ensure readable line length */
    p,
    li,
    .text-content {
        max-width: 100%;
        line-height: 1.6;
    }

    /* Larger tap targets for inline links */
    p a,
    li a,
    .text-content a {
        padding: 4px 0;
    }

    /* Prevent text from being too small */
    body {
        font-size: max(16px, 1rem);
    }

    /* Ensure headings scale properly */
    h1 {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }

    h2 {
        font-size: clamp(1.25rem, 5vw, 2rem);
    }

    h3 {
        font-size: clamp(1.1rem, 4vw, 1.5rem);
    }
}

/* ==========================================================================
   Horizontal Scroll Indicators (for scrollable tables)
   ========================================================================== */

.scroll-indicator {
    position: relative;
}

.scroll-indicator::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.3));
    pointer-events: none;
}

.scroll-indicator.scrolled-end::after {
    display: none;
}

/* ==========================================================================
   Animation Performance on Mobile
   ========================================================================== */

@media (max-width: 768px) {
    /* Reduce animations on mobile for performance */
    .reduce-motion,
    .animated {
        animation-duration: 0.2s !important;
    }

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

/* ==========================================================================
   Additional Touch Target Fixes (Issue #007)
   ========================================================================== */

@media (max-width: 768px) {
    /* Footer links - ensure adequate touch area */
    footer a,
    .footer a,
    .footer-link,
    .footer-links a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 10px 12px;
    }

    /* Social media icons */
    .social-link,
    .social-icon,
    [class*="social"] a,
    a[href*="twitter"],
    a[href*="discord"],
    a[href*="telegram"],
    a[href*="github"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
    }

    /* Dropdown toggles */
    .dropdown-toggle,
    .dropdown-trigger,
    [data-toggle="dropdown"],
    select {
        min-height: 44px;
        padding: 10px 16px;
    }

    /* Tab buttons */
    .tab,
    .tab-btn,
    [role="tab"],
    .tabs button,
    .tab-list button {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 16px;
    }

    /* Pagination */
    .pagination a,
    .pagination button,
    .page-link,
    .page-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Accordion/Collapsible headers */
    .accordion-header,
    .collapsible-header,
    [data-toggle="collapse"],
    .expandable-header {
        min-height: 48px;
        padding: 12px 16px;
        cursor: pointer;
    }

    /* Card action buttons */
    .card-action,
    .card-btn,
    .card a,
    .market-card a {
        min-height: 44px;
        padding: 10px;
    }

    /* Trade buttons - critical UI */
    .buy-btn,
    .sell-btn,
    .trade-btn,
    [class*="buy"],
    [class*="sell"] {
        min-height: 48px;
        min-width: 80px;
        padding: 12px 20px;
    }

    /* Wallet connect button */
    .wallet-btn,
    .connect-wallet,
    #connectBtn,
    [id*="connect"],
    [class*="connect-wallet"] {
        min-height: 48px;
        padding: 12px 20px;
    }

    /* Search inputs and buttons */
    .search-btn,
    .search-submit,
    input[type="search"] + button {
        min-width: 44px;
        min-height: 44px;
    }

    /* Toggle switches */
    .toggle,
    .switch,
    [role="switch"] {
        min-width: 50px;
        min-height: 30px;
    }

    /* Rating/Star buttons */
    .star-btn,
    .rating-star,
    .favorite-btn,
    .bookmark-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
    }

    /* Notification badges - make parent clickable */
    .notification-badge,
    .badge {
        pointer-events: none;
    }

    .notification-badge-wrapper,
    [class*="notification"] {
        min-width: 44px;
        min-height: 44px;
        position: relative;
    }

    /* Back/Navigation buttons */
    .back-btn,
    .nav-back,
    [aria-label="Back"],
    [aria-label="Go back"] {
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
    }

    /* Menu items in dropdowns */
    .menu-item,
    .dropdown-item,
    [role="menuitem"] {
        min-height: 44px;
        padding: 12px 16px;
        display: flex;
        align-items: center;
    }

    /* Slider/Range inputs thumb */
    input[type="range"] {
        height: 44px;
    }

    input[type="range"]::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }

    input[type="range"]::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }

    /* Chips/Tags */
    .chip,
    .tag,
    .badge-clickable {
        min-height: 32px;
        padding: 6px 12px;
    }

    /* Help/Info icons */
    .help-icon,
    .info-icon,
    .tooltip-trigger,
    [data-tooltip] {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}



/* ============================================ */
/* MOBILE FIXES (Auto-generated)               */
/* ============================================ */


/* Fix: ISSUE-003 - Bottom Navigation Overlaps Home Indicator
 * Improve mobile spacing for better touch interaction
 */
@media (max-width: 768px) {
    .bottom-nav, nav[class*="bottom"] {
        padding: 12px 16px;
        margin-bottom: 8px;
    }
}



/* ============================================ */
/* MOBILE FIXES (Auto-generated)               */
/* ============================================ */


/* Fix: ISSUE-008 - Low Contrast on Secondary Text
 * Improve color contrast for WCAG AA compliance
 */
.text-secondary, .muted {
    color: #1f2937; /* Dark text for better contrast */
}

/* Dark mode adjustment */
@media (prefers-color-scheme: dark) {
    .text-secondary, .muted {
        color: #f3f4f6; /* Light text for dark backgrounds */
    }
}