/**
 * WinBolo.net Responsive Styles
 * All Media Queries Consolidated
 */

/* ============================================
   Max Width: 768px (Tablet and Mobile)
   ============================================ */
@media (max-width: 768px) {
    /* Header */
    .menu-toggle {
        display: block;
    }
    
    .header-content {
        flex-wrap: wrap;
    }
    
    .header-actions {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }
    
    .theme-toggle {
        width: 36px;
        height: 36px;
    }
    
    .theme-toggle-icon {
        width: 18px;
        height: 18px;
    }
    
    /* Main Container */
    .main-container {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
    
    .sidebar {
        display: none;
    }
    
    .sidebar.active {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        background: var(--bg-white);
        z-index: 1001;
        overflow-y: auto;
        box-shadow: var(--shadow-lg);
    }
    
    .mobile-nav-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }
    
    .mobile-nav-overlay.active {
        display: block;
    }
    
    /* Map Collections */
    .map-details-card {
        grid-template-columns: 1fr;
    }
    
    .map-folders-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    
    .map-gallery {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
    
    .map-details-list {
        grid-template-columns: 1fr;
        gap: 0.25rem 0;
    }
    
    .map-details-list dt {
        margin-top: 0.5rem;
    }
    
    .map-info-card {
        grid-template-columns: 1fr;
    }
    
    .map-preview-container {
        margin-bottom: 1rem;
    }
    
    .map-preview-image {
        width: 100%;
        max-width: 255px;
        height: auto;
    }
    
    /* Map Search */
    .search-type-group {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .search-or {
        margin: 0.5rem 0;
    }
    
    .map-search-form input[type="text"],
    .map-search-form select {
        max-width: 100%;
    }
    
    .search-submit {
        max-width: 100%;
    }
    
    /* Player Info */
    .player-header-card {
        flex-direction: column;
        text-align: center;
    }
    
    .player-status {
        justify-content: center;
    }
    
    .detail-item {
        grid-template-columns: 1fr;
    }
    
    .detail-label {
        margin-bottom: 0.25rem;
    }
    
    .active-game-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .game-actions {
        margin-left: 0;
    }
    
    .messenger-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .messenger-actions {
        margin-left: 0;
        margin-top: 0.25rem;
    }
    
    .map-info-item {
        flex-direction: column;
    }
    
    .stats-table {
        font-size: 0.8rem;
    }
    
    .stats-table th,
    .stats-table td {
        padding: 0.5rem 0.25rem;
    }
    
    /* Games */
    .game-server-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .game-server-address {
        width: 100%;
    }
    
    .game-server-actions {
        margin-left: 0;
        margin-top: 0.5rem;
        width: 100%;
        justify-content: flex-start;
    }
    
    .game-server-time {
        width: 100%;
        margin-top: 0.5rem;
    }
    
    .game-server-body {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .info-row {
        grid-template-columns: 1fr;
    }
    
    .details-grid {
        grid-template-columns: 1fr;
    }
    
    .filter-table {
        display: block;
    }
    
    .filter-table tr {
        display: block;
        margin-bottom: 0.75rem;
    }
    
    .filter-table td {
        display: block;
        padding: 0.25rem 0;
    }
    
    .filter-table select {
        width: 100%;
        min-width: auto;
    }
    
    .filter-table input[type="submit"],
    .filter-table input[type="button"] {
        width: 100%;
        margin-top: 0.25rem;
    }
    
    /* Diary */
    .diary-game-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .diary-game-server {
        width: 100%;
    }
    
    .diary-game-server .btn {
        margin-left: auto;
    }
    
    .diary-game-info {
        grid-template-columns: 1fr;
    }
    
    .diary-game-rating {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .pagination-links {
        gap: 0.2rem;
    }
    
    .pagination-link,
    .pagination-current {
        min-width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }
    
    /* Game Log */
    .gamelog-tabs {
        flex-direction: column;
    }
    
    .tab-link {
        justify-content: flex-start;
    }
    
    .gamelog-content {
        padding: 1rem;
    }
    
    .events-timeline {
        padding-left: 1rem;
        margin-left: 0.25rem;
    }
    
    .event-marker {
        left: -1.75rem;
    }
    
    .comment-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .comment-meta {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .rating-input-group {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .rating-slider {
        width: 100%;
        max-width: 200px;
    }
    
    .file-info-body {
        grid-template-columns: 1fr;
    }
    
    .download-section {
        padding: 1rem;
    }
    
    .btn-download {
        width: 100%;
        justify-content: center;
    }
    
    /* Forums */
    .forum-container {
        padding: 1rem;
    }
    
    .forum-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .forum-header h1 {
        font-size: 1.25rem;
    }
    
    .forum-table th,
    .forum-table td {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
    
    .forum-name-col {
        width: auto;
    }
    
    .forum-stats-col {
        display: none;
    }
    
    .forum-lastpost-col {
        width: auto;
    }
    
    .post-container {
        flex-direction: column;
    }
    
    .post-author {
        width: 100%;
        min-width: auto;
        border-right: none;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .author-stats {
        margin: 0;
    }
    
    .forum-footer-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .forum-footer-actions .forum-button,
    .forum-footer-actions .forum-button-secondary {
        text-align: center;
    }
    
    .forum-search-inline {
        width: 100%;
        margin-left: 0;
        margin-top: 0.5rem;
    }
    
    .forum-search-inline-input {
        flex: 1;
        width: auto;
    }
    
    .forum-search-inline-input:focus {
        width: auto;
    }
    
    /* Search */
    .search-form .search-input-group {
        flex-direction: column;
    }
    
    .search-button {
        width: 100%;
    }
    
    .search-options {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .search-option-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .search-select {
        width: 100%;
    }
    
    .search-result-header {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .search-result-time {
        margin-left: 0;
    }
    
    /* Footer */
    .footer {
        padding: 0.6rem 1rem;
        margin-top: 1rem;
    }
    
    .footer-content {
        font-size: 0.8rem;
        gap: 0.35rem;
    }
    
    .generation-time {
        font-size: 0.75rem;
    }
}

/* ============================================
   Max Width: 600px (BBCode Toolbar)
   ============================================ */
@media (max-width: 600px) {
    .bbcode-toolbar {
        gap: 4px;
        padding: 6px;
    }
    
    .bbcode-toolbar-group {
        padding-right: 6px;
    }
    
    .bbcode-btn {
        min-width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .bbcode-select {
        height: 28px;
        font-size: 12px;
    }
    
    .bbcode-preview-container {
        margin-top: 8px;
    }
    
    .bbcode-preview-header {
        padding: 6px 10px;
    }
    
    .bbcode-preview-content {
        padding: 10px;
    }
}

/* ============================================
   Max Width: 576px (Small Mobile)
   ============================================ */
@media (max-width: 576px) {
    /* Forms */
    .form-page {
        max-width: 100%;
    }
    
    .styled-form input[type="text"],
    .styled-form input[type="email"],
    .styled-form input[type="password"] {
        padding: 0.625rem 0.875rem;
    }
    
    .btn {
        width: 100%;
        padding: 0.875rem 1.5rem;
    }
    
    /* Stats Tables */
    .stats-table th,
    .stats-table td {
        padding: 0.5rem 0.5rem;
        font-size: 0.85rem;
    }
    
    .stats-rankings-table {
        font-size: 0.85rem;
    }
    
    .stats-rankings-table th,
    .stats-rankings-table td {
        padding: 0.5rem 0.75rem;
    }
    
    .stats-rankings-table th.rank-col,
    .stats-rankings-table td.rank-col {
        width: 40px;
    }
    
    .stats-rankings-table th.score-col,
    .stats-rankings-table td.score-col {
        width: 70px;
    }
    
    /* Map Add Review */
    .map-add-review-section .comment-form-table td {
        display: block;
        padding: 0.5rem 0;
    }
    
    .map-add-review-section .comment-form-table select {
        width: 100%;
    }
    
    .map-add-review-section .submit-button {
        width: 100%;
    }
    
    /* What If Form */
    .form-row-main {
        flex-direction: column;
        align-items: stretch;
    }
    
    .form-vs {
        text-align: center;
        padding: 0.5rem 0;
    }
    
    .form-row-options {
        flex-direction: column;
    }
    
    .whatif-form .form-actions {
        text-align: center;
    }
    
    .whatif-form .btn {
        width: 100%;
    }
}