/**
 * Premium Bonds Calculator - Mobile Responsiveness Fixes
 * Add this to the end of your main styles.css or include as separate file
 */

/* ========================================
   CRITICAL MOBILE FIXES
   ======================================== */

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

body {
    position: relative;
}

/* Ensure all containers respect viewport width */
* {
    max-width: 100%;
}

/* Fix box-sizing for all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ========================================
   HEADER & NAVIGATION - MOBILE
   ======================================== */

@media (max-width: 768px) {
    header {
        padding: 1rem !important;
    }
    
    .header-container {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        padding: 0 !important;
    }
    
    /* Mobile Navigation - Horizontal Scroll */
    nav {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }
    
    nav::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    
    nav a, nav .nav-button {
        white-space: nowrap;
        font-size: 0.875rem !important;
        padding: 0.5rem 1rem !important;
    }
    
    /* Ensure nav links don't wrap */
    .nav-links {
        display: flex;
        gap: 0.75rem;
        flex-wrap: nowrap;
        min-width: min-content;
    }
}

@media (max-width: 480px) {
    header {
        padding: 0.75rem !important;
    }
    
    .logo {
        font-size: 1.25rem !important;
    }
    
    .subtitle {
        font-size: 0.8rem !important;
    }
    
    nav a, nav .nav-button {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.75rem !important;
    }
}

/* ========================================
   MAIN CONTENT - MOBILE
   ======================================== */

@media (max-width: 768px) {
    main {
        padding: 1.5rem 1rem !important;
    }
}

@media (max-width: 480px) {
    main {
        padding: 1rem 0.75rem !important;
    }
}

/* ========================================
   CARDS & CONTAINERS - MOBILE
   ======================================== */

@media (max-width: 768px) {
    .card, .container, .chart-container {
        padding: 1.25rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {
    .card, .container, .chart-container {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
        border-radius: 8px !important;
    }
}

/* ========================================
   INVESTMENT INPUT - MOBILE
   ======================================== */

@media (max-width: 768px) {
    #investmentInput {
        padding: 1.5rem 1rem !important;
    }
    
    .input-wrapper {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .input.investment, .investment-input {
        min-width: 0 !important;
        width: 100% !important;
        font-size: 1.5rem !important;
        padding: 0.75rem 1rem 0.75rem 2.5rem !important;
    }
    
    .input-wrapper::before,
    .currency-symbol {
        font-size: 1.25rem !important;
        left: 1rem !important;
    }
}

@media (max-width: 480px) {
    .input.investment, .investment-input {
        font-size: 1.25rem !important;
        padding: 0.65rem 0.75rem 0.65rem 2rem !important;
    }
    
    .input-wrapper::before,
    .currency-symbol {
        font-size: 1rem !important;
        left: 0.75rem !important;
    }
}

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

@media (max-width: 768px) {
    .historical-inputs,
    .form-group {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .input-group {
        width: 100%;
    }
    
    .input {
        width: 100% !important;
        font-size: 1rem !important;
    }
}

/* ========================================
   TABLES - MOBILE (Horizontal Scroll)
   ======================================== */

@media (max-width: 768px) {
    /* Create scrollable container for tables */
    .table-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 1rem 0;
    }
    
    /* Add wrapper if not exists */
    .data-table,
    .stats-table,
    .period-breakdown,
    .frequency-table,
    .prize-breakdown {
        min-width: 600px; /* Minimum width before scrolling */
        font-size: 0.875rem !important;
    }
    
    .data-table th,
    .data-table td,
    .stats-table th,
    .stats-table td,
    .period-breakdown th,
    .period-breakdown td,
    .frequency-table th,
    .frequency-table td,
    .prize-breakdown th,
    .prize-breakdown td {
        padding: 0.5rem !important;
        font-size: 0.85rem !important;
        white-space: nowrap;
    }
    
    /* Add scroll indicator */
    .data-table::after,
    .stats-table::after,
    .period-breakdown::after {
        content: '→ Scroll for more';
        display: block;
        text-align: center;
        padding: 0.5rem;
        font-size: 0.75rem;
        color: var(--gray-500);
        font-style: italic;
    }
}

@media (max-width: 480px) {
    .data-table,
    .stats-table,
    .period-breakdown,
    .frequency-table,
    .prize-breakdown {
        min-width: 500px;
        font-size: 0.8rem !important;
    }
    
    .data-table th,
    .data-table td,
    .stats-table th,
    .stats-table td,
    .period-breakdown th,
    .period-breakdown td,
    .frequency-table th,
    .frequency-table td,
    .prize-breakdown th,
    .prize-breakdown td {
        padding: 0.4rem !important;
        font-size: 0.8rem !important;
    }
}

/* ========================================
   CHARTS - MOBILE
   ======================================== */

@media (max-width: 768px) {
    .chart-container {
        overflow: hidden;
    }
    
    .chart {
        width: 100% !important;
        height: auto !important;
        min-height: 250px;
    }
    
    .chart svg {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Ensure D3 charts are responsive */
    #monthlyChart,
    #annualChart {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    .chart {
        min-height: 200px;
    }
}

/* ========================================
   BUTTONS - MOBILE
   ======================================== */

@media (max-width: 768px) {
    .btn,
    button {
        width: 100%;
        padding: 0.75rem 1rem !important;
        font-size: 0.95rem !important;
    }
    
    .btn-group,
    .period-toggle,
    .toggle-group {
        width: 100%;
        flex-direction: column !important;
    }
    
    .btn-group .btn,
    .period-toggle button,
    .toggle-btn {
        width: 100% !important;
        border-radius: var(--border-radius) !important;
        border: 1px solid var(--gray-300) !important;
    }
}

/* ========================================
   FOOTER - MOBILE
   ======================================== */

@media (max-width: 768px) {
    footer {
        padding: 2rem 1rem !important;
    }
    
    .footer-container,
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        text-align: center !important;
    }
    
    .footer-links {
        justify-content: center !important;
        flex-wrap: wrap;
    }
    
    .footer-text {
        font-size: 0.875rem !important;
    }
}

@media (max-width: 480px) {
    footer {
        padding: 1.5rem 0.75rem !important;
    }
    
    .footer-text {
        font-size: 0.8rem !important;
    }
    
    .footer-links a {
        font-size: 0.8rem !important;
    }
}

/* ========================================
   FLOATING ELEMENTS - MOBILE
   ======================================== */

@media (max-width: 768px) {
    .support-btn,
    .coffeeButton {
        width: 48px !important;
        height: 48px !important;
        bottom: 1rem !important;
        right: 1rem !important;
    }
    
    #floatingFooter {
        bottom: 1rem !important;
        right: 1rem !important;
    }
}

@media (max-width: 480px) {
    .support-btn,
    .coffeeButton {
        width: 44px !important;
        height: 44px !important;
        bottom: 0.75rem !important;
        right: 0.75rem !important;
    }
}

/* ========================================
   TOOLTIPS - MOBILE
   ======================================== */

@media (max-width: 768px) {
    #chartTooltip,
    .tooltip,
    pbp-tooltip {
        max-width: 80vw !important;
        font-size: 0.8rem !important;
        padding: 0.5rem 0.75rem !important;
    }
}

/* ========================================
   LINKS & NAVIGATION SECTIONS - MOBILE
   ======================================== */

@media (max-width: 768px) {
    #links {
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100%;
    }
    
    #links a.nav {
        width: 100%;
        text-align: center;
        padding: 0.75rem 1rem !important;
    }
}

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

@media (max-width: 768px) {
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 1.35rem !important;
    }
    
    h3 {
        font-size: 1.1rem !important;
    }
    
    p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }
    
    .stat-value {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.2rem !important;
    }
    
    h3 {
        font-size: 1rem !important;
    }
    
    p {
        font-size: 0.9rem !important;
    }
}

/* ========================================
   ALERTS & INFO PANELS - MOBILE
   ======================================== */

@media (max-width: 768px) {
    .alert,
    .info-panel,
    .promo-banner {
        padding: 1rem !important;
        font-size: 0.9rem !important;
    }
    
    .alert h3,
    .info-panel-title {
        font-size: 1rem !important;
    }
}

/* ========================================
   UPLOAD AREA - MOBILE (Checker page)
   ======================================== */

@media (max-width: 768px) {
    .upload-area {
        padding: 2rem 1rem !important;
    }
    
    .upload-icon {
        font-size: 2.5rem !important;
    }
}

@media (max-width: 480px) {
    .upload-area {
        padding: 1.5rem 0.75rem !important;
    }
    
    .upload-icon {
        font-size: 2rem !important;
    }
}

/* ========================================
   STAT CARDS - MOBILE
   ======================================== */

@media (max-width: 768px) {
    .stat-card,
    .draw-info-item {
        padding: 1rem !important;
    }
    
    .stat-label,
    .draw-info-label {
        font-size: 0.75rem !important;
    }
    
    .stat-value,
    .draw-info-value {
        font-size: 1.75rem !important;
    }
}

@media (max-width: 480px) {
    .stat-card,
    .draw-info-item {
        padding: 0.75rem !important;
    }
    
    .stat-value,
    .draw-info-value {
        font-size: 1.5rem !important;
    }
}

/* ========================================
   DRAW INFO GRID - MOBILE
   ======================================== */

@media (max-width: 768px) {
    .draw-info-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* ========================================
   PREVENT ZOOM ON INPUT FOCUS (iOS)
   ======================================== */

@media (max-width: 768px) {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    input[type="month"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
    }
}

/* ========================================
   CHECKER PAGE - MOBILE SPECIFIC
   ======================================== */

@media (max-width: 768px) {
    .month-result {
        padding: 1rem !important;
    }
    
    .filter-step {
        padding: 0.5rem !important;
        font-size: 0.85rem !important;
    }
    
    .high-value-banner {
        padding: 1rem !important;
    }
    
    .high-value-banner h2 {
        font-size: 1.25rem !important;
    }
    
    .badge-1k {
        font-size: 0.65rem !important;
        padding: 0.2rem 0.5rem !important;
    }
}

/* ========================================
   PROFESSIONAL DESIGN SPECIFIC - MOBILE
   ======================================== */

@media (max-width: 768px) {
    /* Glass morphism cards on mobile */
    .card {
        backdrop-filter: blur(8px) !important;
    }
    
    /* Gradient backgrounds */
    .promo-banner::before {
        display: none; /* Remove animation overlay on mobile for performance */
    }
}

/* ========================================
   LANDSCAPE MODE - SMALL SCREENS
   ======================================== */

@media (max-width: 768px) and (orientation: landscape) {
    header {
        padding: 0.75rem 1rem !important;
    }
    
    .logo {
        font-size: 1.1rem !important;
    }
    
    .subtitle {
        font-size: 0.75rem !important;
    }
    
    main {
        padding: 1rem !important;
    }
}

/* ========================================
   ACCESSIBILITY - MOBILE
   ======================================== */

@media (max-width: 768px) {
    /* Ensure touch targets are at least 44x44px */
    button,
    a,
    input[type="button"],
    input[type="submit"],
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Increase tap target spacing */
    nav a {
        margin: 0.25rem 0;
    }
}

/* ========================================
   SAFE AREA INSETS (iPhone X+)
   ======================================== */

@supports (padding: max(0px)) {
    header {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    
    main {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    
    footer {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-bottom: max(2rem, env(safe-area-inset-bottom));
    }
    
    .support-btn,
    .coffeeButton {
        right: max(1rem, env(safe-area-inset-right));
        bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS - MOBILE
   ======================================== */

@media (max-width: 768px) {
    /* Disable animations on mobile for better performance */
    .fade-in,
    .slide-in {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}