/**
 * Three-Column Gaming Platform Layout - Mobile First
 * Base: Mobile (<480px) - Single column, stacked
 * 480px+: Enhanced mobile
 * 768px+: Tablet optimizations
 * 1024px+: Show left sidebar fixed
 * 1200px+: Show right sidebar, full three-column
 * 1440px+: Optimal desktop spacing
 */

/* ============================================
   BASE MOBILE STYLES (<480px)
   ============================================ */

/* Force dark background on hub pages - overrides any theme CSS */
body {
    background: linear-gradient(180deg, #0b0f1a 0%, #0f172a 100%);
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

.djc-hub-body {
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, #0b0f1a 0%, #0f172a 100%);
    color: rgba(255, 255, 255, 0.9);
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

:root {
    --djc-workspace-safe-padding-mobile: 12px;
    --djc-workspace-safe-padding-tablet: 20px;
    --djc-workspace-safe-padding-desktop: 24px;
}

/* Main layout wrapper */
.djc-hub-layout {
    margin-top: calc(var(--djc-topbar-height) + var(--djc-admin-bar-offset, 0px));
    padding: var(--djc-workspace-safe-padding-mobile);
    min-height: calc(100vh - var(--djc-topbar-height) - var(--djc-admin-bar-offset, 0px));
    width: 100%;
    box-sizing: border-box;
}

body.djc-gaming-page .djc-hub-layout {
    padding: 0 !important;
}

body.djc-game-active .djc-hub-layout {
    margin-top: calc(var(--djc-topbar-height) + var(--djc-admin-bar-offset, 0px));
    min-height: calc(100dvh - var(--djc-topbar-height) - var(--djc-admin-bar-offset, 0px));
    padding: 0 !important;
    overflow: hidden;
}

/* Sidebar overlay backdrop (mobile) */
.djc-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 950;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.djc-sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* ============================================
   ENHANCED MOBILE (480px+)
   ============================================ */

@media (min-width: 480px) {
    .djc-hub-layout {
        padding: 16px;
    }
}

/* ============================================
   TABLET (768px+)
   ============================================ */

@media (min-width: 768px) {
    .djc-hub-layout {
        margin-top: calc(var(--djc-topbar-height) + var(--djc-admin-bar-offset, 0px));
        margin-left: 0;
        margin-right: 0;
        padding: var(--djc-workspace-safe-padding-tablet);
        width: 100%;
    }

    body.djc-game-active .djc-hub-layout {
        margin-top: calc(var(--djc-topbar-height) + var(--djc-admin-bar-offset, 0px));
        margin-left: 0;
        width: 100%;
        padding: 0 0 5px;
        height: calc(100dvh - var(--djc-topbar-height) - var(--djc-admin-bar-offset, 0px));
        overflow: hidden;
    }
}

/* ============================================
   DESKTOP - LEFT SIDEBAR (1024px+)
   ============================================ */

@media (min-width: 1024px) {
    .djc-hub-layout {
        margin-left: var(--djc-left-sidebar-width);
        margin-right: var(--djc-right-sidebar-width);
        width: calc(100% - var(--djc-left-sidebar-width) - var(--djc-right-sidebar-width));
        padding: var(--djc-workspace-safe-padding-desktop);
    }
}

/* ============================================
   LARGE DESKTOP (1440px+)
   ============================================ */

@media (min-width: 1440px) {
    .djc-hub-layout {
        padding: 28px 32px;
    }
}

/* ============================================
   ULTRA-WIDE (1600px+) — full stretch between sidebars
   ============================================ */

@media (min-width: 1600px) {
    .djc-hub-layout {
        max-width: none;
        margin-left: var(--djc-left-sidebar-width);
        margin-right: var(--djc-right-sidebar-width);
        width: calc(100% - var(--djc-left-sidebar-width) - var(--djc-right-sidebar-width));
        padding: 28px 40px;
    }
}

/* Touch optimization — scoped to hub shell only */
.djc-hub-shell *,
.djc-hub-layout * {
    -webkit-tap-highlight-color: rgba(124, 92, 255, 0.2);
    touch-action: manipulation; /* Remove 300ms tap delay */
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
}