/**
 * Mobile Responsiveness Enhancements
 * Optimizes layout and interactions for mobile devices
 */

/* ===== MOBILE BREAKPOINTS ===== */
/* Small phones: < 480px */
/* Phones: 480px - 767px */
/* Tablets: 768px - 1024px */
/* Desktop: > 1024px */

/* ===== CRITICAL MOBILE FIXES - PREVENT FRAGMENTATION ===== */

/* Prevent horizontal overflow on all mobile devices */
@media (max-width: 1024px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative;
    }
    
    /* Constrain main container to viewport - OVERRIDE 0.75in padding */
    .main-container,
    body.page-active-picks .main-container,
    body.page-weekly-lineup .main-container,
    body.page-odds-market .main-container {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Fix layout gutter on mobile */
    :root {
        --layout-gutter: 16px !important;
    }
    
    /* Ensure main dashboard layout doesn't overflow */
    .main-dashboard-layout {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Fix navigation padding - OVERRIDE 0.75in padding */
    .brand-nav,
    body.page-active-picks .brand-nav,
    body.page-weekly-lineup .brand-nav,
    body.page-odds-market .brand-nav {
        padding-left: 12px !important;
        padding-right: 12px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* Constrain all fixed/absolute positioned elements */
    .back-to-top,
    .modal,
    .overlay,
    .notification-container {
        max-width: 100vw !important;
    }
    
    /* Prevent table from causing horizontal scroll */
    .table-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }
    
    /* Fix dashboard topline */
    .dashboard-topline {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure brand header doesn't overflow */
    .brand-header-inline {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Fix KPI tiles container */
    .kpi-tiles {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Prevent any element from exceeding viewport */
    * {
        max-width: 100vw !important;
    }
    
    /* Exception for table scroll container */
    .table-container,
    .picks-table {
        max-width: none !important;
    }
}

/* Additional fixes for small phones */
@media (max-width: 480px) {
    .main-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .brand-nav {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .dashboard-topline {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

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

@media (max-width: 767px) {
    .brand-nav {
        padding: 12px;
    }
    
    .nav-links {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .nav-link {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .nav-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .last-refresh {
        font-size: 11px;
    }
    
    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

/* ===== KPI TILES MOBILE ===== */

@media (max-width: 1024px) {
    .kpi-tiles {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 640px) {
    .kpi-tiles {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .kpi-tile {
        padding: 16px;
    }
    
    .kpi-label {
        font-size: 12px;
    }
    
    .kpi-value {
        font-size: 24px;
    }
    
    .kpi-subtext {
        font-size: 11px;
    }
}

/* ===== TABLE MOBILE ===== */

@media (max-width: 1024px) {
    .picks-table {
        font-size: 13px;
    }
    
    .picks-table th,
    .picks-table td {
        padding: 10px 8px;
    }
    
    /* Hide less critical columns on tablets */
    .picks-table th:nth-child(7), /* Result */
    .picks-table td:nth-child(7) {
        display: none;
    }
}

@media (max-width: 767px) {
    /* Stack table layout for mobile */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .picks-table {
        min-width: 600px; /* Allow horizontal scroll */
        font-size: 12px;
    }
    
    .picks-table th,
    .picks-table td {
        padding: 8px 6px;
    }
    
    /* Hide more columns on mobile */
    .picks-table th:nth-child(6), /* Boxscore */
    .picks-table td:nth-child(6),
    .picks-table th:nth-child(7), /* Result */
    .picks-table td:nth-child(7) {
        display: none;
    }
    
    /* Compact status badges */
    .status-badge {
        padding: 4px 8px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .picks-table {
        font-size: 11px;
    }
    
    /* Ultra compact for small phones */
    .picks-table th,
    .picks-table td {
        padding: 6px 4px;
    }
    
    /* Hide segment column too */
    .picks-table th:nth-child(5), /* Segment */
    .picks-table td:nth-child(5) {
        display: none;
    }
}

/* ===== ALTERNATIVE CARD VIEW FOR MOBILE ===== */

@media (max-width: 640px) {
    .picks-table.card-view {
        min-width: 0;
    }
    
    .picks-table.card-view thead {
        display: none;
    }
    
    .picks-table.card-view tbody {
        display: grid;
        gap: 12px;
    }
    
    .picks-table.card-view tr {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
        background: var(--color-bg-elevated);
        border: 1px solid var(--color-border);
        border-radius: 8px;
    }
    
    .picks-table.card-view td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border: none;
    }
    
    .picks-table.card-view td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-text-secondary);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
}

/* ===== FILTERS MOBILE ===== */

@media (max-width: 767px) {
    .unified-filter {
        padding: 12px;
    }
    
    .filter-header {
        padding: 12px;
    }
    
    .filter-body {
        padding: 12px;
    }
    
    .filter-options {
        grid-template-columns: 1fr;
    }
    
    .filter-checkbox-label {
        font-size: 13px;
        padding: 10px;
    }
}

/* ===== SPORTSBOOK CARDS MOBILE ===== */

@media (max-width: 767px) {
    .sportsbook-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .sportsbook-card {
        padding: 12px;
    }
    
    .sportsbook-name {
        font-size: 14px;
    }
    
    .sportsbook-meta-compact {
        font-size: 11px;
    }
    
    .credential-input-compact {
        font-size: 13px;
        padding: 8px 10px;
    }
}

/* ===== BUTTONS & CONTROLS MOBILE ===== */

@media (max-width: 640px) {
    button,
    .btn {
        min-height: 44px; /* iOS touch target recommendation */
        font-size: 14px;
    }
    
    .btn-sm {
        min-height: 36px;
        font-size: 12px;
    }
}

/* ===== MODAL & OVERLAY MOBILE ===== */

@media (max-width: 767px) {
    .modal,
    .overlay {
        padding: 0;
    }
    
    .modal-content {
        width: 100%;
        min-height: 100vh;
        border-radius: 0;
        margin: 0;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 16px;
    }
}

/* ===== TOOLBAR MOBILE ===== */

@media (max-width: 767px) {
    .filters-toolbar,
    .dashboard-toolbar,
    .main-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px;
    }
    
    .toolbar-section {
        justify-content: space-between;
    }
    
    .export-import-controls {
        width: 100%;
        justify-content: space-between;
    }
}

/* ===== DASHBOARD HEADER MOBILE ===== */

@media (max-width: 767px) {
    .dashboard-topline {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }
    
    .brand-header-inline {
        justify-content: center;
    }
    
    .brand-logo-small {
        width: 40px;
        height: 40px;
    }
    
    .brand-line-1 {
        font-size: 20px;
    }
    
    .brand-line-2 {
        font-size: 14px;
    }
}

/* ===== DATE TOGGLES MOBILE ===== */

@media (max-width: 640px) {
    .date-toggle-group {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .date-toggle-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* ===== PARLAY LEGS MOBILE ===== */

@media (max-width: 767px) {
    .parlay-legs-container {
        padding: 8px;
    }
    
    .compact-leg-table {
        font-size: 11px;
    }
    
    .compact-leg-table th,
    .compact-leg-table td {
        padding: 4px 6px;
    }
}

/* ===== BOXSCORE MOBILE ===== */

@media (max-width: 640px) {
    .boxscore-teams {
        font-size: 11px;
    }
    
    .boxscore-logo {
        width: 20px;
        height: 20px;
    }
    
    .boxscore-team-name {
        display: none; /* Hide team names, show only logos and scores */
    }
    
    .boxscore-team-record {
        font-size: 9px;
    }
}

/* ===== TOUCH IMPROVEMENTS ===== */

@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    button,
    .btn,
    a,
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover states on touch devices */
    .kpi-tile:hover {
        transform: none;
    }
    
    /* Improve scrolling */
    .table-container {
        -webkit-overflow-scrolling: touch;
    }
}

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

@media (max-width: 767px) and (orientation: landscape) {
    .dashboard-topline {
        flex-direction: row;
        padding: 12px;
    }
    
    .kpi-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== SAFE AREA INSETS (iOS notch support) ===== */

@supports (padding: env(safe-area-inset-top)) {
    .brand-nav {
        padding-top: env(safe-area-inset-top);
    }
    
    .notification-container {
        top: calc(20px + env(safe-area-inset-top));
        right: calc(20px + env(safe-area-inset-right));
    }
    
    .main-container {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
}