/* Global Boxed Layout System for LiquidityLens */
/* This CSS creates a consistent boxed layout across all pages */

:root {
    --max-content-width: 1400px;
    --content-padding: 2rem;
    --mobile-padding: 1rem;
    --boxed-bg-color: #0A0A0B;
    --content-bg-color: rgba(10, 10, 11, 0.98);
    --content-border-color: rgba(255, 255, 255, 0.05);
}

/* Global Box Layout Container */
.boxed-layout {
    min-height: 100vh;
    background: var(--boxed-bg-color);
    padding: 0;
    margin: 0;
}

/* Main Content Wrapper - No background, just container */
.boxed-wrapper {
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Apply to body for all pages */
body {
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #0A0A0B 0%, #0F0F10 50%, #0A0A0B 100%);
    background-attachment: fixed;
}

/* Loading screen stays full screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

/* Dashboard Specific - Full width container */
.dashboard-container {
    width: 100%;
    padding: 0;
    background: var(--bg-primary);
    min-height: 100vh;
}

/* Admin Panel Specific - Keep sidebar full height */
.admin-container {
    width: 100%;
    min-height: 100vh;
    background: transparent;
}

/* Main Website Pages */
main, .main-content {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 0;
}

/* Header/Navigation - Full Width */
header, nav, .navbar {
    width: 100%;
    position: relative;
    background: var(--bg-primary);
}

/* Fixed Headers - Full Width */
.fixed-header, .sticky-header {
    width: 100%;
    left: 0;
    right: 0;
    transform: none;
}

/* Hero Sections - Full Width (outside boxed wrapper) */
.hero, .hero-section {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    background: var(--bg-primary);
}

/* Sections - full width backgrounds, boxed content */
.boxed-wrapper section {
    width: 100%;
    position: relative;
}

/* Section containers - this is what gets boxed */
.boxed-wrapper section .container {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

/* Footer - Full width background, boxed content */
footer {
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
}

footer .container {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 2rem var(--content-padding);
}

/* Content Sections */
.content-section, .main-section {
    max-width: calc(var(--max-content-width) - 4rem);
    margin: 2rem auto;
    padding: 0 var(--content-padding);
}

/* Cards and Grids */
.cards-grid, .signals-grid, .plans-grid {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* Modals and Overlays - Keep Full Screen */
.modal, .overlay, .popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
}

/* Responsive Adjustments */
@media (max-width: 1600px) {
    :root {
        --max-content-width: 1280px;
    }
}

@media (max-width: 1440px) {
    :root {
        --max-content-width: 1200px;
    }
}

@media (max-width: 1280px) {
    :root {
        --max-content-width: 1100px;
        --content-padding: 1.5rem;
    }
}

@media (max-width: 1024px) {
    :root {
        --max-content-width: 100%;
        --content-padding: 1.5rem;
    }

    body {
        background: var(--boxed-bg-color);
    }
}

@media (max-width: 768px) {
    :root {
        --content-padding: 1rem;
    }

    section {
        padding-left: var(--mobile-padding);
        padding-right: var(--mobile-padding);
    }

    .content-section, .main-section {
        padding: 0 var(--mobile-padding);
    }
}

@media (max-width: 480px) {
    :root {
        --content-padding: 0.75rem;
        --mobile-padding: 0.75rem;
    }
}

/* Utility Classes for Boxed Layout */
.full-width-section {
    width: 100%;
    margin: 0;
}

.container-boxed {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
}

/* Ensure all containers are properly boxed */
.container {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

/* Dashboard wrapper removed - using dashboard-container instead */

/* Admin Layout - Full Width Container, Boxed Content */
.admin-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100%;
    background: var(--bg-primary);
}

/* Prevent scrollbar on dashboard pages */
.dashboard-container html,
.dashboard-container body {
    overflow: hidden !important;
}

/* Prevent horizontal scrollbar on other pages */
html {
    overflow-x: hidden;
    max-width: 100%;
}

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

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

/* Tables Responsive */
.table-container {
    max-width: 100%;
    overflow-x: auto;
}

/* Forms within boxed layout */
form {
    max-width: 100%;
}

/* Admin specific sections in boxes */
.admin-section,
.admin-grid,
.admin-form,
.admin-table-wrapper,
.users-section,
.signals-section,
.audit-section {
    max-width: var(--max-content-width);
    margin: 2rem auto;
    padding: 2rem;
    background: var(--content-bg-color);
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}

/* Dashboard sections also get boxes if needed */
.dashboard-section {
    margin-bottom: 2rem;
}

/* Animation for page load */
@keyframes fadeInBoxed {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.boxed-wrapper,
.admin-wrapper {
    animation: fadeInBoxed 0.5s ease-out;
}

/* Dashboard Specific Fixes */
.dashboard-container .sidebar {
    width: 260px;
    background: rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.dashboard-container .main-content {
    flex: 1;
    padding: 0;
    background: var(--bg-primary);
}

/* Dashboard content sections - removed duplicate styles */
/* These are now handled in dashboard-new.css */

/* Media query removed - handled in dashboard-new.css */

/* Dashboard cards and grids - boxed with background */
.stats-grid,
.signals-grid,
.courses-grid,
.subscription-section,
.profile-section,
.binance-settings {
    background: var(--content-bg-color);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

@media (max-width: 1024px) {
    .dashboard-container .main-content {
        max-width: 100%;
    }

    /* Admin nav goes to hamburger on mobile */
    .admin-nav {
        transform: translateX(-100%);
    }

    .admin-nav.active {
        transform: translateX(0);
    }

    .admin-main, .admin-container {
        margin-left: 0;
        width: 100%;
    }

    .admin-main .container,
    .admin-container .container {
        margin: 1rem;
        border-radius: 8px;
    }
}

/* Admin Panel Specific Fixes */
.admin-nav {
    position: fixed;
    left: 0;
    top: 0;
    width: 260px;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 1001;
}

.admin-main, .admin-container {
    margin-left: 260px;
    width: calc(100% - 260px);
    padding: 0;
    background: transparent;
}

.admin-main .container,
.admin-container .container {
    max-width: var(--max-content-width);
    margin: 2rem auto;
    padding: 2rem;
    background: var(--content-bg-color);
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}

/* Fix for wide tables */
.table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Fix for signal cards grid */
.signals-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

/* Ensure modals stay on top */
.modal, .popup, .overlay {
    z-index: 9999;
}

/* Fix for fixed elements */
.fixed-top, .sticky-top {
    max-width: var(--max-content-width);
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 1024px) {
    .fixed-top, .sticky-top {
        max-width: 100%;
        left: 0;
        transform: none;
    }
}