/* ============================================
   Mobile Fixes CSS
   Comprehensive mobile responsiveness fixes
   for Blue Protocol Leaderboard
   ============================================ */

/* Base mobile resets */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    max-width: 100vw;
    overflow-x: hidden;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Table wrapper for horizontal scroll on mobile */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohide-scrollbar;
}

/* ========== Tablet & Small Desktop (max-width: 1024px) ========== */
@media (max-width: 1024px) {
    .main-content,
    .container,
    section {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .table-wrapper,
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100vw;
    }
}

/* ========== Mobile (max-width: 768px) ========== */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    /* Ensure tables scroll horizontally */
    .table-wrapper,
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
    }

    .table-wrapper table,
    .table-container table {
        min-width: 900px;
    }

    /* Fix table cell padding for mobile */
    .table-wrapper th,
    .table-wrapper td,
    .table-container th,
    .table-container td {
        padding: 0.5rem 0.4rem;
        font-size: 0.8rem;
    }

    /* Ensure form inputs are touch-friendly (prevents iOS zoom on focus) */
    .form-group input,
    .form-group select,
    .form-group textarea,
    .search-box input,
    .class-filter select,
    .auth-container input,
    .auth-container select {
        font-size: 16px;
        min-height: 44px;
    }

    /* Prevent content overflow */
    .main-content,
    main,
    .content,
    .container {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* ---- Hero section: tighter on mobile ---- */
    .hero {
        padding: 0.5rem 0.75rem;
    }

    .hero h1 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-size: 1.3rem !important;
        margin-bottom: 0.15rem;
    }

    .hero p {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }

    .hero-buttons {
        gap: 0.5rem;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        padding: 0.4rem 1rem !important;
        font-size: 0.8rem !important;
    }

    /* ---- Sidebar: collapse and compact on mobile ---- */
    .top-column-left {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
    }

    .top-column-left > .giveaway-countdown-tab {
        flex: 0 0 auto;
        min-width: 180px;
        max-width: 200px;
        margin-bottom: 0;
        padding: 0.5rem 0.75rem;
    }

    .top-column-left > .showcase-panel {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Make giveaway countdown tab compact */
    .giveaway-countdown-tab {
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.5rem;
    }

    .giveaway-countdown-tab-header {
        margin-bottom: 0.35rem;
    }

    .giveaway-countdown-tab-title {
        font-size: 0.8rem;
    }

    .giveaway-countdown-tab-timer {
        gap: 0.3rem;
    }

    .giveaway-countdown-tab-unit {
        padding: 0.2rem 0.35rem;
        min-width: 2.25rem;
    }

    .giveaway-countdown-tab-number {
        font-size: 0.9rem;
    }

    .giveaway-countdown-tab-label {
        font-size: 0.5rem;
    }

    /* Sidebar showcase panel: compact */
    .showcase-panel {
        margin-bottom: 0;
    }

    .showcase-panel-header {
        padding: 0.5rem 0.75rem;
        margin-bottom: 0;
    }

    .showcase-panel-header h3 {
        font-size: 0.8rem;
    }

    .top-two-column .showcase-gallery {
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .top-two-column .showcase-card-img {
        height: 100px;
    }

    .showcase-see-all {
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
    }

    /* ---- Live stats bar: horizontal compact row ---- */
    .live-stats-bar {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.4rem;
        margin-bottom: 0.5rem;
    }

    .live-stat-item {
        min-width: unset;
        width: 100%;
        padding: 0.4rem 0.5rem;
        gap: 0.35rem;
    }

    .live-stat-icon-wrap {
        width: 28px;
        height: 28px;
        border-radius: 0.35rem;
    }

    .live-stat-icon {
        font-size: 0.85rem;
    }

    .live-stat-number {
        font-size: 0.85rem;
    }

    .live-stat-label {
        font-size: 0.55rem;
        line-height: 1.15;
    }

    /* ---- Top 3 spotlight: horizontal row ---- */
    .top3-cards {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.4rem;
    }

    .top3-card {
        padding: 0.5rem;
    }

    .top3-spotlight-title {
        font-size: 0.7rem;
        margin-bottom: 0.35rem;
    }

    .top3-medal {
        font-size: 1rem;
    }

    .top3-name {
        font-size: 0.7rem;
    }

    .top3-class {
        font-size: 0.55rem;
    }

    .top3-stat {
        font-size: 0.75rem;
    }

    /* Fix filter/control sections */
    .leaderboard-controls {
        flex-direction: column;
        gap: 0.35rem;
        padding: 0.5rem;
    }

    .leaderboard-controls > * {
        width: 100%;
    }

    /* Fix tab navigation */
    .tabs,
    .tab-container,
    .nav-tabs,
    .admin-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        flex-wrap: nowrap;
        scrollbar-width: thin;
    }

    /* Admin tabs: ensure horizontal scroll works on mobile */
    .admin-tabs {
        gap: 0;
        padding-bottom: 2px;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .admin-tab-btn {
        padding: 0.5rem 0.65rem;
        font-size: 0.75rem;
        flex-shrink: 0;
    }

    .admin-tab-btn .tab-badge {
        font-size: 0.6rem;
        padding: 0.05rem 0.35rem;
        margin-left: 0.25rem;
    }

    /* Admin welcome banner: stack vertically on mobile */
    .admin-welcome {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
        gap: 0.75rem;
    }

    .admin-welcome-avatar {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .admin-welcome-info h2 {
        font-size: 1.2rem;
    }

    /* Admin stats grid: fit 2 columns on mobile */
    .admin-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .admin-stat-item {
        padding: 0.75rem 0.5rem;
    }

    .admin-stat-item .stat-number {
        font-size: 1.75rem;
    }

    .admin-stat-item .stat-icon {
        font-size: 1.25rem;
    }

    /* Admin section headers: wrap on mobile */
    .admin-section-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .admin-section-header h2 {
        font-size: 1rem;
    }

    /* Admin page title */
    #admin > h1 {
        font-size: 1.5rem;
    }

    /* Fix modal/popup width */
    .modal,
    .popup,
    .dialog,
    .edit-modal-overlay .edit-modal {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 1rem auto;
    }

    /* Fix showcase lightbox on mobile */
    .showcase-lightbox {
        padding: 0.5rem;
    }

    .showcase-lightbox-content {
        max-height: 90vh;
        max-height: 90dvh;
    }

    .showcase-lightbox-img {
        max-height: 50vh;
        max-height: 50dvh;
    }

    /* Fix grid layouts */
    .grid,
    .card-grid {
        grid-template-columns: 1fr;
    }

    /* Fix leaderboard page title */
    #leaderboard > h1 {
        font-size: 1.5rem;
    }

    /* ---- AI verification banner: compact ---- */
    .ai-verification-banner {
        flex-direction: column;
        text-align: center;
        padding: 0.75rem;
        gap: 0.35rem;
        margin: 0.5rem 0 !important;
    }

    .ai-verification-banner .ai-badge {
        align-self: center;
    }

    .ai-verification-banner .ai-icon {
        font-size: 1.25rem;
    }

    .ai-verification-banner .ai-text h4 {
        font-size: 0.85rem;
    }

    .ai-verification-banner .ai-text p {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    /* ---- Section dividers: reduce spacing ---- */
    .section-divider,
    hr.section-divider {
        margin: 0.75rem 0;
    }

    /* ---- Distribution section: compact ---- */
    .distribution-section {
        margin-top: 0.5rem;
    }

    .distribution-section h2 {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }

    .distribution-grid {
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .role-card {
        padding: 0.75rem;
    }

    .class-distribution-grid {
        gap: 0.5rem;
    }

    /* ---- Page headings: smaller on mobile ---- */
    .page > h1,
    #showcase-gallery > h1,
    #showcase-submit > h1,
    #about > h1,
    #feedback > h1,
    #giveaways .giveaway-hero h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Page description text under headings */
    .page > h1 + p,
    .page > p:first-of-type {
        margin-bottom: 1rem !important;
        font-size: 0.85rem;
    }

    /* ---- About page: reduce spacing ---- */
    #about .fade-in-section {
        padding: 1rem !important;
        margin-top: 1rem !important;
    }

    #about .fade-in-section > div[style*="display: flex"] {
        gap: 0.75rem;
    }

    #about .fade-in-section h2 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    #about .fade-in-section ul {
        margin-left: 1rem;
        line-height: 1.6;
    }

    #about .stat-card {
        padding: 0.75rem;
    }

    #about .stat-card > div:first-child {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* About: classes grid */
    #about div[style*="grid-template-columns"] {
        gap: 0.75rem !important;
    }

    /* About: FAQ section */
    #about div[style*="margin-top: 3rem"] {
        margin-top: 1.25rem !important;
    }

    #about > div[style*="margin-top: 3rem"] {
        margin-top: 1.25rem !important;
    }

    /* ---- Giveaway page: compact ---- */
    .giveaway-hero {
        margin-bottom: 1.25rem;
    }

    .giveaway-prize-banner {
        padding: 1.25rem !important;
        margin-bottom: 1.25rem;
    }

    .giveaway-prize-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .giveaway-prize-title {
        font-size: 1.2rem;
    }

    .giveaway-prize-amount {
        font-size: 1.6rem !important;
    }

    .giveaway-countdown-section {
        margin-bottom: 1.25rem;
    }

    .giveaway-countdown {
        gap: 0.5rem;
    }

    .giveaway-countdown-unit {
        padding: 0.75rem;
        min-width: 60px;
    }

    .giveaway-countdown-number {
        font-size: 1.5rem !important;
    }

    .giveaway-info-grid {
        gap: 0.75rem;
    }

    .giveaway-info-card {
        padding: 1rem;
    }

    .giveaway-winners-section {
        margin-top: 1rem;
    }

    .giveaway-winner-card {
        padding: 0.75rem;
    }

    .giveaway-waiting {
        padding: 1.5rem 0.75rem !important;
    }

    .giveaway-rules {
        padding: 1rem !important;
    }

    /* ---- Showcase pages: compact ---- */
    #showcase-gallery > p {
        margin-bottom: 1rem !important;
    }

    #showcase-gallery > div[style*="margin-bottom: 2rem"] {
        margin-bottom: 1rem !important;
    }

    /* ---- Submit page: compact ---- */
    .form-container {
        padding: 0.75rem;
    }

    .form-step-heading {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .screenshot-requirements {
        padding: 0.75rem;
    }

    .screenshot-requirements h4 {
        font-size: 0.8rem;
    }

    .screenshot-requirements ul {
        font-size: 0.78rem;
    }

    /* ---- Feedback page: compact ---- */
    #feedback .auth-container {
        padding: 1.5rem !important;
    }

    #feedback-login-prompt .auth-container {
        padding: 1.5rem !important;
    }

    /* ---- Blog page: compact ---- */
    .blog-grid {
        gap: 0.75rem;
    }

    .blog-card-image {
        height: 120px;
    }

    .blog-card-body {
        padding: 0.75rem;
    }

    /* ---- Internal links sections: compact ---- */
    .blog-internal-links {
        gap: 0.35rem;
    }

    div[style*="border-radius: 1rem"][style*="padding: 1rem"],
    div[style*="border-radius: 1rem"][style*="padding: 1.5rem"],
    div[style*="border-radius: 1rem"][style*="padding: 2rem"] {
        padding: 0.75rem !important;
    }

    /* ---- Footer: compact ---- */
    footer {
        margin-top: 0.75rem;
    }

    .footer-content {
        padding: 1rem 0.75rem;
        gap: 1rem;
    }

    .footer-section h3 {
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }

    .footer-bottom {
        padding: 0.75rem;
        font-size: 0.75rem;
    }

    /* ---- General spacing reductions ---- */
    .fade-in-section {
        margin-top: 0.75rem;
    }

    /* Expand list button area */
    #expand-list-container {
        margin-top: 0.75rem !important;
    }

    /* Hero tagline badge mobile */
    .hero-tagline-badge {
        font-size: 0.6rem;
        padding: 0.25rem 0.75rem;
        margin-bottom: 0.5rem;
    }

    /* Inline margin overrides for about page large gap sections */
    #about p[style*="margin-bottom: 3rem"] {
        margin-bottom: 1rem !important;
    }

    #about div[style*="margin-bottom: 3rem"] {
        margin-bottom: 1.25rem !important;
    }

    #about div[style*="gap: 1.5rem"] {
        gap: 0.75rem !important;
    }
}

/* ========== Small Mobile (max-width: 480px) ========== */
@media (max-width: 480px) {
    body {
        font-size: 13px;
    }

    /* Even tighter table cells on small screens */
    .table-wrapper th,
    .table-wrapper td,
    .table-container th,
    .table-container td {
        padding: 0.35rem 0.3rem;
        font-size: 0.75rem;
    }

    /* Stack elements vertically */
    .leaderboard-controls {
        padding: 0.35rem;
    }

    /* Fix footer on small mobile */
    footer {
        padding: 0.75rem 0.5rem;
        font-size: 0.8rem;
    }

    /* Fix leaderboard page title */
    #leaderboard > h1 {
        font-size: 1.25rem;
    }

    /* Admin tabs: even more compact on small phones */
    .admin-tab-btn {
        padding: 0.45rem 0.5rem;
        font-size: 0.7rem;
    }

    /* Admin stats grid: keep 2 columns on very small screens */
    .admin-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }

    .admin-stat-item .stat-number {
        font-size: 1.5rem;
    }

    .admin-stat-item .stat-label {
        font-size: 0.65rem;
    }

    /* Admin welcome */
    .admin-welcome {
        padding: 0.75rem;
    }

    .admin-welcome-info h2 {
        font-size: 1.1rem;
    }

    /* Admin page title */
    #admin > h1 {
        font-size: 1.25rem;
    }

    /* Hero even more compact */
    .hero {
        padding: 0.35rem 0.5rem;
    }

    .hero h1 {
        font-size: 1.15rem !important;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        padding: 0.35rem 0.75rem !important;
        font-size: 0.75rem !important;
    }

    /* Sidebar becomes stacked on very small screens */
    .top-column-left {
        flex-direction: column;
    }

    .top-column-left > .giveaway-countdown-tab {
        min-width: unset;
        max-width: none;
    }

    /* Live stats: 3 columns even tighter */
    .live-stat-item {
        padding: 0.3rem 0.4rem;
        gap: 0.25rem;
    }

    .live-stat-icon-wrap {
        width: 24px;
        height: 24px;
    }

    .live-stat-icon {
        font-size: 0.75rem;
    }

    .live-stat-number {
        font-size: 0.75rem;
    }

    .live-stat-label {
        font-size: 0.5rem;
    }

    /* Top 3: even tighter */
    .top3-card {
        padding: 0.35rem;
    }

    .top3-name {
        font-size: 0.6rem;
    }

    .top3-class {
        font-size: 0.5rem;
    }

    .top3-stat {
        font-size: 0.65rem;
    }

    .top3-medal {
        font-size: 0.85rem;
    }

    /* Page headings even smaller */
    .page > h1,
    #showcase-gallery > h1,
    #showcase-submit > h1,
    #about > h1,
    #feedback > h1,
    #giveaways .giveaway-hero h1 {
        font-size: 1.25rem !important;
    }

    /* Giveaway page tighter */
    .giveaway-prize-banner {
        padding: 1rem !important;
    }

    .giveaway-prize-icon {
        font-size: 1.75rem;
    }

    .giveaway-prize-title {
        font-size: 1rem;
    }

    .giveaway-prize-amount {
        font-size: 1.4rem !important;
    }

    .giveaway-countdown-unit {
        min-width: 55px;
        padding: 0.5rem;
    }

    .giveaway-countdown-number {
        font-size: 1.3rem !important;
    }

    /* About page stat cards smaller icons */
    #about .stat-card > div:first-child {
        font-size: 1.5rem !important;
        margin-bottom: 0.35rem !important;
    }

    /* Blog cards */
    .blog-card-image {
        height: 100px;
        font-size: 2.5rem;
    }

    /* Distribution */
    .distribution-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .role-card {
        padding: 0.6rem;
    }
}

/* ========== Touch Device Improvements ========== */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover-dependent styles that don't work on touch */
    .table-wrapper {
        scrollbar-width: thin;
    }
}

/* ========== Landscape Mobile ========== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding: 0.25rem 0.75rem;
    }

    .hero h1 {
        font-size: 1.2rem;
    }

    .live-stats-bar {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .top3-cards {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ========== Print ========== */
@media print {
    .table-wrapper {
        overflow: visible;
    }

    table {
        min-width: auto !important;
    }
}