/**
 * BracketsFlex Mobile Responsive Styles
 */

/* Tablet */
@media (max-width: 1024px) {
    .header-content {
        gap: 15px;
    }

    .nav-btn {
        padding: 10px 15px;
        font-size: 0.9rem;
    }

    .bracket-grid {
        gap: 20px;
    }

    .region-bracket {
        gap: 15px;
    }

    .game {
        min-width: 160px;
    }

    .stat-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile menu button — hidden on desktop */
.mobile-menu-btn {
    display: none;
}

.mobile-nav {
    display: none;
}

/* Mobile */
@media (max-width: 768px) {
    /* Header */
    .header-content {
        flex-wrap: nowrap;
        height: 50px;
        padding: 0;
    }

    .logo {
        font-size: 1.1rem;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Hide desktop nav and user-info on mobile */
    #main-nav {
        display: none;
    }

    #user-info {
        display: none;
    }

    /* Show hamburger button */
    .mobile-menu-btn {
        display: block;
        background: none;
        border: none;
        font-size: 1.6rem;
        cursor: pointer;
        color: var(--text-color);
        padding: 8px 12px;
        line-height: 1;
    }

    /* Mobile dropdown nav */
    .mobile-nav {
        display: flex;
        flex-direction: column;
        background: var(--card-bg);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .mobile-nav.hidden {
        display: none;
    }

    .mobile-nav-btn {
        display: block;
        width: 100%;
        padding: 14px 20px;
        background: none;
        border: none;
        border-bottom: 1px solid var(--border-color);
        text-align: left;
        font-size: 1rem;
        color: var(--text-color);
        cursor: pointer;
    }

    .mobile-nav-btn:hover,
    .mobile-nav-btn.active {
        background: var(--primary-color);
        color: white;
    }

    .mobile-nav-btn.active {
        font-weight: 600;
    }

    .mobile-nav-actions {
        display: flex;
        gap: 10px;
        padding: 12px 20px;
        border-top: 1px solid var(--border-color);
    }

    #user-name {
        display: none;
    }

    /* Views */
    .view {
        padding: 10px;
    }

    .container {
        padding: 10px;
    }

    /* Login */
    .login-container {
        padding: 25px;
        margin: 10px;
    }

    /* Competition cards */
    #competition-list {
        grid-template-columns: 1fr;
    }

    /* Bracket */
    #bracket-container {
        min-height: 400px;
    }

    .bracket-controls {
        flex-wrap: wrap;
    }

    .bracket-controls select {
        flex: 1;
        min-width: 120px;
    }

    .bracket-grid {
        flex-direction: column;
        gap: 30px;
    }

    .region-bracket {
        gap: 15px;
    }

    .game {
        min-width: 160px;
    }

    /* Tables */
    table {
        font-size: 0.85rem;
    }

    th, td {
        padding: 8px 10px;
    }

    /* Leaderboard: horizontal scroll with sticky player column */
    #leaderboard-view .container {
        padding: 10px 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #leaderboard-table {
        white-space: nowrap;
    }

    #leaderboard-table th,
    #leaderboard-table td {
        padding: 8px 8px;
        font-size: 0.8rem;
    }

    /* Freeze player name column */
    #leaderboard-table th:nth-child(3),
    #leaderboard-table td:nth-child(3) {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--card-bg);
        box-shadow: 2px 0 4px rgba(0,0,0,0.08);
    }

    #leaderboard-table th:nth-child(3) {
        background: var(--bg-color);
        z-index: 3;
    }

    /* Hide rank and paid columns on mobile to save space */
    #leaderboard-table th:nth-child(1),
    #leaderboard-table td:nth-child(1),
    #leaderboard-table th:nth-child(2),
    #leaderboard-table td:nth-child(2) {
        display: none;
    }

    /* Stats */
    .stats-tabs, .admin-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .stats-tab, .admin-tab {
        white-space: nowrap;
        padding: 10px 15px;
    }

    .stat-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .stat-card {
        padding: 15px;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    /* Admin */
    #invite-form {
        flex-direction: column;
    }

    #invite-form input,
    #invite-form select,
    #invite-form button {
        width: 100%;
    }

    .import-actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* Pick panel */
    .pick-panel-content {
        padding: 20px;
        margin: 10px;
    }

    .pick-team {
        padding: 12px;
    }

    .pick-actions {
        flex-direction: column;
    }

    .pick-actions button {
        width: 100%;
    }

    /* Modal */
    .modal-content {
        margin: 10px;
        padding: 20px;
    }

    .winner-options button {
        padding: 15px;
    }

    /* Toast */
    #toast-container {
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    .toast {
        text-align: center;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .logo {
        font-size: 1rem;
    }

    .nav-btn {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .btn-primary, .btn-secondary, .btn-danger {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    /* Smaller stats cards */
    .stat-card {
        padding: 10px;
    }

    .stat-value {
        font-size: 1.3rem;
    }

    .stat-label {
        font-size: 0.8rem;
    }

    /* Game info */
    .game-info-teams {
        flex-direction: column;
        gap: 10px;
    }

    .info-team {
        width: 100%;
        text-align: center;
    }
}

/* Landscape phone */
@media (max-height: 500px) and (orientation: landscape) {
    #header {
        position: relative;
    }

    .login-container {
        padding: 20px;
    }

    #pick-panel {
        align-items: flex-start;
        overflow-y: auto;
    }

    .pick-panel-content {
        margin: 10px;
    }
}

/* Print styles */
@media print {
    #header,
    .bracket-controls,
    #pick-panel,
    #toast-container,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .admin-only {
        display: none !important;
    }

    body {
        background: white;
    }

    .view {
        padding: 0;
    }

    #bracket-container {
        overflow: visible;
    }

    #bracket {
        transform: none !important;
    }

    table {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #006400;
        --border-color: #000;
        --text-light: #333;
    }

    .game {
        border-width: 2px;
    }

    .team-slot {
        border-bottom-width: 2px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }

    .game.in-progress {
        animation: none;
        box-shadow: 0 0 0 2px var(--warning-color);
    }
}

/* Dark mode support (future) */
@media (prefers-color-scheme: dark) {
    /* Uncomment to enable dark mode
    :root {
        --text-color: #e0e0e0;
        --text-light: #aaa;
        --bg-color: #1a1a1a;
        --card-bg: #2d2d2d;
        --border-color: #444;
    }

    #login-view {
        background: linear-gradient(135deg, #1b5e20, #0d47a1);
    }
    */
}