/* ========================================
   POKER TOOL - MOBILE RESPONSIVE STYLES
   ======================================== */

/* Base mobile styles already included in poker-core.css */
/* This file contains additional mobile-specific enhancements */

/* Enhanced mobile navigation */
@media (max-width: 768px) {
    .poker-nav-container {
        padding: 0 1rem;
    }
    
    .poker-logo {
        font-size: 1.5rem;
    }
    
    .poker-back-btn {
        font-size: 0.9rem;
        padding: 8px 12px;
    }
}

/* Mobile-first container adjustments */
@media (max-width: 768px) {
    .poker-container {
        padding: 15px;
        margin: 0.5rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    
    .poker-page-header h1 {
        font-size: 2em;
        line-height: 1.2;
    }
    
    .poker-page-header p {
        font-size: 1rem;
        line-height: 1.4;
    }
    
    .poker-academic-intro {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .poker-academic-intro h2 {
        font-size: 1.3em;
    }
    
    .poker-academic-intro p {
        font-size: 0.9rem;
        line-height: 1.5;
    }
}

/* Tool layout mobile adjustments */
@media (max-width: 768px) {
    .poker-tool-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .poker-input-section {
        padding: 15px;
    }
    
    .poker-input-section h3 {
        font-size: 1.2em;
        margin-bottom: 15px;
    }
}

/* Form elements mobile optimization */
@media (max-width: 768px) {
    .poker-input-group {
        margin-bottom: 15px;
    }
    
    .poker-input-group label {
        font-size: 0.9rem;
        margin-bottom: 5px;
    }
    
    .poker-input-group input,
    .poker-input-group select {
        padding: 12px;
        font-size: 1rem;
        border-radius: 6px;
    }
    
    .poker-grid-2 {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .poker-grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .poker-grid-auto {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* Button mobile styles */
@media (max-width: 768px) {
    .poker-btn {
        padding: 12px 16px;
        font-size: 0.9rem;
        min-height: 44px;
    }
    
    .poker-position-btn {
        padding: 8px 12px;
        font-size: 0.8rem;
        min-height: 40px;
    }
}

/* Card styling mobile */
@media (max-width: 768px) {
    .poker-card {
        padding: 6px 10px;
        font-size: 1rem;
    }
}

/* Results sections mobile */
@media (max-width: 768px) {
    .poker-strategy-results {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .poker-strategy-results h3 {
        font-size: 1.3em;
        margin-bottom: 20px;
    }
    
    .poker-range-display {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .poker-range-display h4 {
        font-size: 1.1em;
    }
    
    .poker-calculation-details {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .poker-calculation-details h4 {
        font-size: 1.1em;
    }
}

/* Status messages mobile */
@media (max-width: 768px) {
    .poker-status {
        padding: 10px;
        font-size: 0.9rem;
    }
}

/* Math formula mobile */
@media (max-width: 768px) {
    .poker-math-formula {
        padding: 8px;
        font-size: 0.8rem;
        overflow-x: auto;
    }
}

/* Table renderer mobile (poker position table) */
@media (max-width: 768px) {
    .enhanced-seat {
        width: 55px !important;
        height: 55px !important;
        font-size: 0.7rem !important;
    }
    
    .enhanced-seat div:first-child {
        font-size: 0.75rem !important;
    }
    
    .enhanced-seat div:last-child {
        font-size: 0.55rem !important;
    }
}

/* Small screens (480px and below) */
@media (max-width: 480px) {
    .poker-container {
        padding: 10px;
        margin: 0.25rem;
    }
    
    .poker-page-header h1 {
        font-size: 1.8em;
    }
    
    .poker-page-header p {
        font-size: 0.9rem;
    }
    
    .poker-academic-intro {
        padding: 15px;
    }
    
    .poker-academic-intro h2 {
        font-size: 1.2em;
    }
    
    .poker-academic-intro p {
        font-size: 0.8rem;
    }
    
    .poker-input-section {
        padding: 12px;
    }
    
    .poker-input-section h3 {
        font-size: 1.1em;
    }
    
    .poker-input-group input,
    .poker-input-group select {
        padding: 10px;
        font-size: 0.9rem;
    }
    
    .poker-btn {
        padding: 10px 14px;
        font-size: 0.8rem;
    }
    
    .poker-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Touch-friendly enhancements */
@media (hover: none) and (pointer: coarse) {
    .poker-input-group input,
    .poker-input-group select {
        min-height: 44px;
        padding: 12px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .poker-btn {
        min-height: 44px;
        padding: 12px 16px;
    }
    
    .poker-back-btn {
        min-height: 44px;
        padding: 12px 16px;
    }
    
    .poker-card {
        min-height: 44px;
        padding: 12px;
    }
    
    .enhanced-seat {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

/* Landscape mobile orientation */
@media (max-width: 768px) and (orientation: landscape) {
    .poker-page-header h1 {
        font-size: 1.8em;
    }
    
    .poker-page-header p {
        font-size: 0.9rem;
    }
    
    .poker-container {
        padding: 15px;
    }
    
    .poker-academic-intro {
        padding: 15px;
    }
}

/* Improve scrolling on mobile */
@media (max-width: 768px) {
    .poker-container {
        overflow-x: hidden;
    }
    
    .poker-math-formula {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Loading state mobile */
@media (max-width: 768px) {
    .poker-loading {
        width: 16px;
        height: 16px;
        border-width: 2px;
    }
}

/* Mobile-specific status message styles */
@media (max-width: 768px) {
    .poker-status-message {
        padding: 10px 12px;
        font-size: 0.9rem;
        border-radius: 6px;
    }
    
    .poker-status.info {
        background: rgba(33, 150, 243, 0.15);
    }
    
    .poker-status.success {
        background: rgba(76, 175, 80, 0.15);
    }
    
    .poker-status.warning {
        background: rgba(255, 152, 0, 0.15);
    }
    
    .poker-status.error {
        background: rgba(244, 67, 54, 0.15);
    }
}

/* Accessibility improvements for mobile */
@media (max-width: 768px) {
    .poker-input-group label {
        font-weight: 600;
        color: rgba(255, 255, 255, 0.95);
    }
    
    .poker-input-group input:focus,
    .poker-input-group select:focus {
        outline: 2px solid #4CAF50;
        outline-offset: 2px;
    }
    
    .poker-btn:focus {
        outline: 2px solid #4CAF50;
        outline-offset: 2px;
    }
}

/* Mobile footer adjustments */
@media (max-width: 768px) {
    .poker-footer {
        padding: 1.5rem 1rem;
    }
    
    .poker-footer p {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
}

/* Ensure table elements are responsive */
@media (max-width: 768px) {
    .poker-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .poker-table {
        min-width: 600px;
        font-size: 0.9rem;
    }
    
    .poker-table th,
    .poker-table td {
        padding: 8px;
        white-space: nowrap;
    }
}