/* desktop.css - Desktop Layout and Responsive Design */

/* CRITICAL: Desktop Container must ALWAYS be visible */
.desktop-container {
    display: flex !important; /* Override any hiding from other stylesheets */
    flex-direction: column;
    height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
    background-color: var(--background-color);
}

/* Desktop Header */
.desktop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--card-background);
    flex-shrink: 0;
}

.desktop-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.header-info {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Main Content Layout */
.desktop-main {
    display: grid;
    grid-template-columns: 1fr 400px;
    grid-template-rows: 1fr auto; /* Two rows: content, then bottom controls */
    flex: 1;
    overflow: hidden;
    gap: 1px;
    background-color: var(--border-color);
}

.puzzle-viewer {
    grid-row: 1; /* Top row - main content */
    grid-column: 1;
    background-color: var(--background-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.control-buttons {
    grid-row: 2;
    grid-column: 1;
}

.puzzle-grid {
    grid-row: 1 / 3;
    grid-column: 2;
}

/* Left Panel - Puzzle Viewer */
.puzzle-viewer {
    overflow: hidden !important; /* Prevent any scroll, force fit */
}

.puzzle-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 40px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.puzzle-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.puzzle-counter {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.puzzle-rating {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-secondary);
}

.color-indicator {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid var(--border-color);
}

/* Update to .chessboard-container in desktop.css */
.chessboard-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(10px, 5vmin, 40px); /* Dynamic: min 10px, scales with viewport min dimension, max 40px */
    position: relative;
}

/* Control Buttons - Match grid navigation exactly */
.control-buttons {
    grid-row: 2; /* Bottom row - controls */
    grid-column: 1;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background-color: var(--background-color);
}

/* Right Panel - Puzzle Grid */
.puzzle-grid {
    grid-row: 1 / 3; /* Spans both rows */
    grid-column: 2;
    background-color: var(--card-background);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.grid-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.grid-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Puzzle Previews Grid */
.puzzle-previews {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-content: start;
    grid-auto-rows: min-content;
}

.puzzle-previews::-webkit-scrollbar {
    width: 8px;
}

.puzzle-previews::-webkit-scrollbar-track {
    background: var(--background-color);
    border-radius: 4px;
}

.puzzle-previews::-webkit-scrollbar-thumb {
    background: var(--button-grey);
    border-radius: 4px;
}

.puzzle-previews::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Grid Navigation */
.grid-navigation {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* Responsive Breakpoints */

/* Large Desktop (1200px+) */
/* Cap max board size on ultra-large screens */
@media (min-width: 1200px) {
    .chessboard {
        max-width: 800px;
        max-height: 800px;
    }
}

/* Ensure no overflow in viewer */
.puzzle-viewer {
    overflow-y: auto; /* Allow scroll if somehow too tall (fallback) */
}

/* Force controls to not overlap unnecessarily */
.control-buttons {
    position: relative !important; /* Override any sticky if not needed */
    z-index: 10;
}

/* Medium Desktop (1024px - 1199px) */
@media (max-width: 1199px) {
    .desktop-header {
        padding: 16px 32px;
    }
    
    .desktop-header h1 {
        font-size: 24px;
    }
    
    .puzzle-header {
        padding: 16px 32px;
    }
    
    .chessboard-container {
        padding: 30px;
    }
    
    .control-buttons {
        padding: 20px 32px;
        gap: 16px;
    }
    
    .puzzle-previews {
        padding: 16px;
        gap: 12px;
    }
}

/* Small Desktop/Large Tablet (768px - 1023px) */
/* Tablet Portrait (769px - 1023px) */
@media (max-width: 1023px) and (orientation: portrait) {
    .desktop-main {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto; /* Changed from 1fr auto */
        gap: 0;
    }
    
    /* Key fix: Make puzzle viewer take available space but not overflow */
    .puzzle-viewer {
        display: flex;
        flex-direction: column;
        min-height: 0; /* Critical: allows flexbox to shrink */
        overflow: visible;
    }
    
    /* Ensure chessboard container can shrink */
    .chessboard-container {
        flex: 1;
        min-height: 0; /* Critical: allows flexbox to shrink */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 16px;
    }
    
    /* Make sure chessboard doesn't overflow */
    .chessboard {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
    }
    
    .puzzle-grid {
        max-height: 280px; /* Increased from 300px */
        min-height: 280px;
        overflow-y: auto;
    }
    
    .puzzle-previews {
        grid-template-columns: repeat(6, 1fr);
        padding: 12px;
        gap: 8px;
        align-content: start;
    }
    
    .puzzle-preview {
        aspect-ratio: 1;
        padding: 6px;
    }
    
    .puzzle-preview-info {
        padding: 4px;
    }
    
    .puzzle-preview-rating {
        font-size: 10px;
    }
    
    /* Reduce header/footer spacing to give more room to chessboard */
    .puzzle-header {
        padding: 12px 24px;
    }
    
    .control-buttons {
        padding: 12px 24px;
    }
}

/* Tablet Portrait (769px - 1023px) */
@media (max-width: 1023px) and (orientation: portrait) {
    .desktop-main {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }
    
    .puzzle-grid {
        max-height: 300px;
    }
    
    .puzzle-previews {
        grid-template-columns: repeat(6, 1fr);
        padding: 16px;
        gap: 8px;
    }
    
    .puzzle-preview {
        aspect-ratio: 1;
        padding: 8px;
    }
    
    .puzzle-preview-info {
        padding: 4px;
    }
    
    .puzzle-preview-rating {
        font-size: 10px;
    }
}

/* FIXED: Keep desktop layout visible at small tablet sizes (481px - 768px) */
/* ==========================================================================
   Narrow tablets / foldables / Surface Duo portrait (481–768 px)
   Single-column desktop layout with constrained board + bottom grid
   ========================================================================== */
@media (max-width: 768px) and (min-width: 481px) {

    .desktop-container {
        display: flex !important;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;           /* prevent body scroll bleed */
    }

    .desktop-main {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;   /* header-area | flexible board | fixed bottom grid */
        flex: 1;                    /* take all remaining height after header */
        overflow: hidden;
        gap: 0;
    }

    .puzzle-viewer {
        display: flex;
        flex-direction: column;
        min-height: 0;              /* critical: allow shrinking */
        overflow: hidden;
    }

    .puzzle-header {
        padding: 12px 20px;
        flex-shrink: 0;
    }

    .chessboard-container {
        flex: 1 1 0%;               /* grow, but start from 0 and don't over-expand */
        min-height: 0;
        padding: 12px 16px 16px;    /* slightly less aggressive padding */
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;           /* clip anything trying to escape */
    }

    /* Force square board that NEVER overflows vertically */
    .chessboard {
        width: auto !important;
        height: auto !important;
        max-width:  100% !important;
        max-height: 100% !important;           /* ← this is the key change */
        aspect-ratio: 1 / 1;
        object-fit: contain;
        /* Helps with canvas rendering quality */
        image-rendering: crisp-edges;
    }

    .control-buttons {
        padding: 12px 20px;
        gap: 12px;
        flex-shrink: 0;
    }

    .control-btn {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    /* Bottom grid – fixed/tight height so it can't be pushed off-screen */
    .puzzle-grid {
        flex-shrink: 0;
        max-height: 260px;           /* tune between 220–300 px after testing */
        min-height: 220px;
        overflow-y: auto;
        background: var(--card-background);
    }

    .puzzle-previews {
        grid-template-columns: repeat(5, 1fr);  /* 4–6 depending on exact width */
        gap: 8px;
        padding: 12px 16px;
        align-content: start;
    }

    .puzzle-preview {
        padding: 6px;
    }

    .puzzle-preview-rating {
        font-size: 10px;
    }

    .grid-navigation {
        padding: 10px 16px;
    }
}


/* FIXED: Keep desktop layout for mobile landscape and small screens (up to 480px) */
@media (max-width: 480px) {
    .desktop-container {
        display: flex !important;
        height: 100vh;
        overflow: hidden;
    }
    
    .desktop-main {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto; /* Changed to auto auto */
        overflow: hidden;
    }
    
    .desktop-header {
        padding: 10px 12px;
    }
    
    .desktop-header h1 {
        font-size: 16px;
    }
    
    .header-info {
        gap: 10px;
    }
    
    .date-display {
        font-size: 11px;
    }
    
    .puzzle-header {
        padding: 8px 12px;
    }
    
    .puzzle-counter {
        font-size: 14px;
    }
    
    .puzzle-rating {
        font-size: 12px;
    }
    
    .puzzle-viewer {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0; /* Critical for flexbox shrinking */
    }
    
    .chessboard-container {
        flex: 1;
        min-height: 0; /* Critical for flexbox shrinking */
        padding: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* CRITICAL: Force square aspect ratio */
    .chessboard {
        max-width: calc(100vw - 16px); /* Account for padding */
        max-height: calc(100vh - 380px); /* Header + controls + puzzle grid */
        width: auto !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        object-fit: contain;
    }
    
    .control-buttons {
        padding: 8px 12px;
        gap: 6px;
    }
    
    .control-btn {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }
    
    .puzzle-grid {
        max-height: 180px;
        min-height: 180px;
        overflow-y: auto;
    }
    
    .puzzle-previews {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        padding: 8px;
    }
    
    .puzzle-preview {
        padding: 3px;
    }
    
    .puzzle-preview-info {
        padding: 2px;
    }
    
    .puzzle-preview-rating {
        font-size: 8px;
    }
    
    .grid-navigation {
        padding: 6px 10px;
        gap: 6px;
    }
    
    .nav-btn {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
}

/* SEO Content - Always below the app at all sizes, never overlapping */
.seo-content {
    display: block !important;
    width: 100%;
    margin-top: 20px; /* Clear separation from app */
    position: relative; /* Ensure it's in document flow, not overlapping */
}

/* Large Monitor (1400px+) */
@media (min-width: 1400px) {
    .desktop-main {
        grid-template-columns: 1fr 500px;
    }
    
    .puzzle-previews {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    .chessboard-container {
        padding: 60px;
    }
    
    .control-buttons {
        gap: 24px;
    }
    
    .control-btn {
        width: 52px;
        height: 52px;
        font-size: 24px;
    }
}

/* Ultra-wide (1600px+) */
@media (min-width: 1600px) {
    .desktop-container {
        max-width: 1600px;
    }
    
    .desktop-main {
        grid-template-columns: 1fr 550px;
    }
    
    .puzzle-previews {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .chessboard {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print Styles for Desktop */
@media print {
    .desktop-header,
    .control-buttons,
    .grid-navigation {
        display: none;
    }
    
    .desktop-main {
        display: block;
    }
    
    .puzzle-viewer {
        page-break-inside: avoid;
    }
    
    .puzzle-grid {
        display: none;
    }
}

/* Dark/Light Mode Adjustments */
@media (prefers-color-scheme: light) {
    /* Light mode overrides would go here if implementing light theme */
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .puzzle-preview {
        transition: none;
    }
    
    .control-btn {
        transition: none;
    }
}

/* High Contrast */
@media (prefers-contrast: high) {
    .desktop-header,
    .puzzle-header {
        border-bottom-width: 2px;
    }
    
    .puzzle-grid {
        border-left-width: 2px;
    }
    
    .grid-header,
    .control-buttons {
        border-top-width: 2px;
    }
}

/* Focus Management for Desktop */
.desktop-container *:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Keyboard Navigation Styles */
.keyboard-navigation .puzzle-preview:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(247, 148, 89, 0.3);
}

.keyboard-navigation .control-btn:focus {
    box-shadow: 0 0 0 2px rgba(247, 148, 89, 0.3);
}

/* Loading States for Desktop */
.puzzle-viewer.loading .chessboard-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.puzzle-viewer.loading .chessboard {
    display: none;
}

.puzzle-grid.loading .puzzle-previews {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Error States */
.puzzle-viewer.error .chessboard-container {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--error-color);
    text-align: center;
}

.puzzle-grid.error .puzzle-previews {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--error-color);
    text-align: center;
    padding: 40px;
}

/* Animation Enhancements */
.puzzle-preview {
    animation-delay: calc(var(--index, 0) * 50ms);
}

.control-btn {
    position: relative;
    overflow: hidden;
}

.control-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.control-btn:active::after {
    width: 100%;
    height: 100%;
}
/* desktop.css - Add these media queries at the bottom */

/* For viewports shorter than 900px (common on 13-inch laptops) */
@media (max-height: 900px) {
    .puzzle-header {
        padding: 15px 30px; /* Reduced from 20px 40px */
    }
    
    .chessboard-container {
        padding: clamp(10px, 5vmin, 20px); /* Adjusted for shorter heights */
    }
    
    .control-buttons {
        padding: 20px 30px; /* Reduced from 30px 40px */
    }
    
    .grid-header {
        padding: 15px 20px; /* Reduced from 20px 24px */
    }
    
    .puzzle-previews {
        padding: 15px; /* Reduced from 20px */
        gap: 12px; /* Reduced from 16px */
    }
    
    .grid-navigation {
        padding: 12px 20px; /* Reduced from 16px 24px */
    }
}

/* For even shorter viewports (e.g., <800px, like with browser toolbars) */
@media (max-height: 800px) {
    .desktop-header {
        padding: 15px 30px; /* Reduced from 20px 40px */
    }
    
    .puzzle-header {
        padding: 10px 20px;
    }
    
    .chessboard-container {
        padding: clamp(5px, 3vmin, 10px); /* Further reduced for very short */
    }
    
    .control-buttons {
        padding: 10px 20px;
        gap: 12px; /* Reduced from 20px */
    }
    
    .control-btn {
        width: 40px; /* Smaller buttons to save space */
        height: 40px;
        font-size: 18px; /* Adjust icon size */
    }
    
    .puzzle-previews {
        grid-template-columns: repeat(2, 1fr); /* Switch to 2 columns for better fit */
        gap: 10px;
        padding: 10px;
    }
}

/* Add to desktop.css - Hide previews and full-width board in portrait mode */
@media (orientation: portrait) and (min-width: 769px) {
    .desktop-main {
        grid-template-columns: 1fr !important;
    }
    
    .puzzle-grid,
    #puzzlePreviews,
    .grid-header,
    .grid-navigation {
        display: none !important;
    }
    
    .puzzle-viewer {
        width: 100%;
        max-width: none;
    }
    
    .chessboard-container {
        padding: clamp(10px, 5vmin, 40px);
    }
}