/**
 * Mobile-First Responsive Styles for Robot Wars AI
 * Optimized for touch interactions and small screens
 */

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */
:root {
    --mobile-breakpoint: 768px;
    --tablet-breakpoint: 1024px;
    --desktop-breakpoint: 1280px;
    
    /* Touch-friendly sizing */
    --touch-target-min: 44px;
    --mobile-padding: 16px;
    --mobile-gap: 12px;
}

/* ============================================
   MOBILE UTILITIES
   ============================================ */

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

/* Show only on mobile */
.show-mobile {
    display: none !important;
}

@media (max-width: 768px) {
    .show-mobile {
        display: block !important;
    }
    
    .show-mobile-flex {
        display: flex !important;
    }
    
    .show-mobile-grid {
        display: grid !important;
    }
}

/* ============================================
   MOBILE LAYOUT
   ============================================ */

@media (max-width: 768px) {
    /* Full-width containers */
    .container {
        width: 100%;
        padding: var(--mobile-padding);
        max-width: none;
    }
    
    /* Stack columns */
    .row,
    .columns {
        flex-direction: column;
    }
    
    /* Full-width cards */
    .card,
    .panel {
        width: 100%;
        margin: var(--mobile-gap) 0;
    }
}

/* ============================================
   TOUCH-FRIENDLY BUTTONS
   ============================================ */

@media (max-width: 768px) {
    button,
    .btn,
    a.button {
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
        padding: 12px 20px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }
    
    /* Larger tap targets for icon buttons */
    .icon-button,
    button.icon-only {
        width: var(--touch-target-min);
        height: var(--touch-target-min);
        padding: 10px;
    }
    
    /* Remove hover states (no hover on touch) */
    button:hover,
    .btn:hover {
        transform: none;
    }
    
    /* Enhanced active/pressed state */
    button:active,
    .btn:active {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

/* ============================================
   MOBILE TYPOGRAPHY
   ============================================ */

@media (max-width: 768px) {
    html {
        font-size: 16px; /* Prevents iOS zoom */
    }
    
    h1 {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    h3 {
        font-size: 1.25rem;
        line-height: 1.4;
    }
    
    p, li {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    /* Prevent text from being too small */
    small {
        font-size: 0.875rem;
    }
}

/* ============================================
   MOBILE FORMS
   ============================================ */

@media (max-width: 768px) {
    input,
    textarea,
    select {
        font-size: 16px; /* Prevents iOS zoom */
        min-height: var(--touch-target-min);
        padding: 12px;
        width: 100%;
    }
    
    /* Stack form labels */
    label {
        display: block;
        margin-bottom: 8px;
    }
    
    /* Full-width form groups */
    .form-group {
        margin-bottom: var(--mobile-gap);
    }
    
    /* Number input steppers */
    input[type="number"] {
        -webkit-appearance: none;
        appearance: none;
    }
}

/* ============================================
   MOBILE MODALS & OVERLAYS
   ============================================ */

@media (max-width: 768px) {
    .modal,
    .overlay {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
        margin: 0;
    }
    
    .modal-content {
        padding: var(--mobile-padding);
        max-height: 100vh;
        overflow-y: auto;
    }
    
    /* Bottom sheet style modals */
    .modal.bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        height: auto;
        max-height: 80vh;
        border-radius: 16px 16px 0 0;
        animation: slideUp 0.3s ease-out;
    }
    
    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
}

/* ============================================
   MOBILE NAVIGATION
   ============================================ */

@media (max-width: 768px) {
    /* Hamburger menu */
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--touch-target-min);
        height: var(--touch-target-min);
        background: none;
        border: none;
        cursor: pointer;
    }
    
    /* Slide-out drawer */
    .mobile-drawer {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: var(--bg-secondary, #1a1a1a);
        transition: left 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
    }
    
    .mobile-drawer.open {
        left: 0;
    }
    
    .mobile-drawer-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 999;
    }
    
    .mobile-drawer-overlay.visible {
        opacity: 1;
        pointer-events: all;
    }
}

/* ============================================
   MOBILE TABLES
   ============================================ */

@media (max-width: 768px) {
    /* Card-style tables */
    table {
        display: block;
    }
    
    thead {
        display: none;
    }
    
    tbody {
        display: block;
    }
    
    tr {
        display: block;
        margin-bottom: var(--mobile-gap);
        border: 1px solid var(--border-color, #333);
        border-radius: 8px;
        padding: var(--mobile-padding);
    }
    
    td {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border: none;
    }
    
    td::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 12px;
    }
}

/* ============================================
   MOBILE SCROLLING
   ============================================ */

@media (max-width: 768px) {
    /* Smooth scrolling */
    * {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Horizontal scroll containers */
    .scroll-horizontal {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .scroll-horizontal::-webkit-scrollbar {
        display: none;
    }
}

/* ============================================
   MOBILE GESTURES
   ============================================ */

@media (max-width: 768px) {
    /* Swipeable items */
    .swipeable {
        touch-action: pan-y;
        user-select: none;
    }
    
    /* Pull to refresh indicator */
    .pull-to-refresh {
        position: absolute;
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s;
    }
    
    .pull-to-refresh.visible {
        opacity: 1;
    }
}

/* ============================================
   MOBILE SAFE AREAS (for notched devices)
   ============================================ */

@supports (padding: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        .safe-area-top {
            padding-top: env(safe-area-inset-top);
        }
        
        .safe-area-bottom {
            padding-bottom: env(safe-area-inset-bottom);
        }
        
        .safe-area-left {
            padding-left: env(safe-area-inset-left);
        }
        
        .safe-area-right {
            padding-right: env(safe-area-inset-right);
        }
        
        .safe-area-all {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }
    }
}

/* ============================================
   MOBILE PERFORMANCE
   ============================================ */

@media (max-width: 768px) {
    /* Hardware acceleration for animations */
    .animated {
        will-change: transform;
        transform: translateZ(0);
    }
    
    /* Reduce motion for accessibility */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* ============================================
   LANDSCAPE ORIENTATION
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
    /* Reduce vertical padding in landscape */
    .container {
        padding: 8px var(--mobile-padding);
    }
    
    /* Smaller headers in landscape */
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.25rem;
    }
}