/**
 * ==========================================================================
 * CORE LAYOUT — SINGLE SOURCE OF TRUTH
 * ==========================================================================
 *
 * ╔═══════════════════════════════════════════════════════════════════════╗
 * ║                         ⚠️  CRITICAL WARNING  ⚠️                       ║
 * ╠═══════════════════════════════════════════════════════════════════════╣
 * ║  THIS IS THE ONLY FILE AUTHORIZED TO DEFINE LAYOUT STRUCTURE.         ║
 * ║                                                                       ║
 * ║  NO OTHER CSS FILE may define the following classes:                  ║
 * ║    • .app-layout                                                      ║
 * ║    • .main-content                                                    ║
 * ║    • .content-wrapper                                                 ║
 * ║    • .frontend-sidebar (positioning only — visual styles elsewhere)   ║
 * ║    • .sidebar-collapsed states affecting main content                 ║
 * ║                                                                       ║
 * ║  If you need layout overrides, use /css/shared/overrides.css with     ║
 * ║  documented justification. DO NOT duplicate definitions elsewhere.    ║
 * ╚═══════════════════════════════════════════════════════════════════════╝
 *
 * LAYOUT ARCHITECTURE:
 * ┌─────────────────────────────────────────────────────────────────────┐
 * │ <html data-theme="dark|light">                                      │
 * ├─────────────────────────────────────────────────────────────────────┤
 * │ ┌───────────────────┐ ┌───────────────────────────────────────────┐ │
 * │ │ .frontend-sidebar │ │ .main-content                             │ │
 * │ │                   │ │ ┌───────────────────────────────────────┐ │ │
 * │ │ width:            │ │ │ .content-wrapper                      │ │ │
 * │ │ var(--sidebar-    │ │ │ max-width: var(--content-max-width)   │ │ │
 * │ │      width)       │ │ │ margin: 0 auto                        │ │ │
 * │ │                   │ │ │                                       │ │ │
 * │ │ @media <992px:    │ │ │ [Page-specific content]               │ │ │
 * │ │ display: none     │ │ │                                       │ │ │
 * │ │                   │ │ └───────────────────────────────────────┘ │ │
 * │ │                   │ │ margin-left: var(--sidebar-width)         │ │
 * │ │                   │ │ @media <992px: margin-left: 0             │ │
 * │ └───────────────────┘ └───────────────────────────────────────────┘ │
 * └─────────────────────────────────────────────────────────────────────┘
 *
 * CSS LOAD ORDER (this file loads after variables.css):
 *   1. /css/base/reset.css
 *   2. /css/variables.css (design tokens)
 *   3. /css/base/theme-variables.css
 *   4. /css/layouts/core-layout.css (THIS FILE)
 *   5. /css/components/*.css
 *   6. /css/pages/*.css
 *
 * RESPONSIVE BREAKPOINTS:
 *   • Desktop: ≥992px (sidebar visible, main content offset)
 *   • Mobile:  <992px (sidebar hidden, main content full width)
 *
 * ZERO BOOTSTRAP. ZERO TAILWIND. PURE CSS WITH FLEXBOX/GRID.
 *
 * @project    ContentFlow / HoloSuite Industries
 * @version    1.0.0
 * @requires   /css/variables.css
 * @see        .kiro/specs/blade-css-architecture-rebuild/design.md
 */


/* ==========================================================================
   1. APP LAYOUT — Root Application Container
   ========================================================================== */

/**
 * Base application layout container.
 * Uses flexbox for flexible height distribution.
 * Background color responds to theme via CSS custom properties.
 */
.app-layout {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    width: 100%;
    background: var(--body-bg, #0c0c1e);
    color: var(--text-color, #f0f0fa);
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    line-height: var(--leading-normal, 1.5);
}

/**
 * Vertical layout variant for pages without sidebar.
 * Used for auth pages, landing pages, etc.
 */
.app-layout--vertical {
    flex-direction: column;
}


/* ==========================================================================
   2. MAIN CONTENT — Primary Content Area
   ========================================================================== */

/**
 * Main content area positioned to the right of the sidebar.
 * margin-left creates space for the fixed sidebar.
 * Transitions smoothly when sidebar collapses.
 *
 * IMPORTANT: This is the ONLY definition of .main-content allowed.
 * All other files must NOT define this class.
 */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width, 260px);
    min-height: 100vh;
    padding: var(--space-5, 1.25rem);
    background: var(--body-bg, #0c0c1e);
    transition: margin-left var(--transition-base, 200ms ease);
    position: relative;
    overflow-x: hidden;
}

/**
 * Main content without sidebar (auth pages, landing pages).
 * Full width with no left margin.
 */
.main-content--no-sidebar {
    margin-left: 0;
}

/**
 * Main content with narrow padding for dense layouts.
 */
.main-content--compact {
    padding: var(--space-3, 0.75rem);
}

/**
 * Main content with larger padding for spacious layouts.
 */
.main-content--spacious {
    padding: var(--space-8, 2rem);
}


/* ==========================================================================
   3. CONTENT WRAPPER — Centered Content Container
   ========================================================================== */

/**
 * Centering wrapper for page content.
 * max-width constrains content for readability.
 * margin: 0 auto centers the content horizontally.
 *
 * IMPORTANT: This replaces Bootstrap's .container and .container-fluid.
 * Use this class for all content that needs centered, constrained width.
 */
.content-wrapper {
    max-width: var(--content-max-width, 1400px);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: var(--space-4, 1rem);
    padding-right: var(--space-4, 1rem);
}

/**
 * Full-width content wrapper (no max-width constraint).
 * Use for dashboards, tables, or content that benefits from full width.
 */
.content-wrapper--full {
    max-width: none;
}

/**
 * Narrow content wrapper for forms, articles, settings pages.
 */
.content-wrapper--narrow {
    max-width: 800px;
}

/**
 * Wide content wrapper for media galleries, grid layouts.
 */
.content-wrapper--wide {
    max-width: 1600px;
}

/**
 * Extra-wide content wrapper for admin dashboards.
 */
.content-wrapper--extra-wide {
    max-width: 1920px;
}


/* ==========================================================================
   4. FRONTEND SIDEBAR — Fixed Sidebar Positioning
   ========================================================================== */

/**
 * Sidebar positioning rules only.
 * Visual styling (colors, typography) is in /css/layouts/frontend-sidebar.css
 *
 * The sidebar is fixed to the left, full height.
 * Width is controlled by --sidebar-width custom property.
 */
.frontend-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width, 260px);
    height: 100vh;
    z-index: var(--z-sticky, 200);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width var(--transition-base, 200ms ease),
                transform var(--transition-base, 200ms ease);
}


/* ==========================================================================
   5. SIDEBAR COLLAPSED STATE
   ========================================================================== */

/**
 * When sidebar is collapsed (mini mode):
 * - Sidebar width shrinks to collapsed width
 * - Main content margin adjusts accordingly
 * - Content reflows to use available space
 */
.sidebar-collapsed .frontend-sidebar {
    width: var(--sidebar-collapsed-width, 64px);
}

.sidebar-collapsed .main-content {
    margin-left: var(--sidebar-collapsed-width, 64px);
}

/**
 * Alternative: body-level collapsed class.
 * Some implementations apply this to <body> instead of a wrapper.
 */
body.sidebar-collapsed .frontend-sidebar {
    width: var(--sidebar-collapsed-width, 64px);
}

body.sidebar-collapsed .main-content {
    margin-left: var(--sidebar-collapsed-width, 64px);
}


/* ==========================================================================
   6. MOBILE RESPONSIVE — Breakpoint: <992px
   ========================================================================== */

/**
 * Mobile layout adjustments.
 * Sidebar is hidden by default (slides off-screen).
 * Main content takes full width.
 */
@media (max-width: 991px) {
    /**
     * Main content on mobile:
     * - No left margin (sidebar hidden)
     * - Reduced padding for smaller screens
     * - Full viewport width
     */
    .main-content {
        margin-left: 0;
        padding: var(--space-3, 0.75rem);
        width: 100%;
    }

    /**
     * Sidebar hidden on mobile by default.
     * transform: translateX(-100%) slides it off-screen.
     * Add .show class via JavaScript to reveal.
     */
    .frontend-sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width, 260px);
        box-shadow: none;
    }

    /**
     * Show sidebar on mobile (triggered by menu toggle).
     * Sidebar slides in from left with shadow.
     */
    .frontend-sidebar.show,
    .sidebar-open .frontend-sidebar {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
    }

    /**
     * Content wrapper padding adjustments for mobile.
     */
    .content-wrapper {
        padding-left: var(--space-3, 0.75rem);
        padding-right: var(--space-3, 0.75rem);
    }

    /**
     * Collapsed state has no effect on mobile.
     * Sidebar is either fully visible or hidden.
     */
    .sidebar-collapsed .main-content,
    body.sidebar-collapsed .main-content {
        margin-left: 0;
    }

    .sidebar-collapsed .frontend-sidebar,
    body.sidebar-collapsed .frontend-sidebar {
        width: var(--sidebar-width, 260px);
        transform: translateX(-100%);
    }
}


/* ==========================================================================
   7. MOBILE OVERLAY — Backdrop for Mobile Sidebar
   ========================================================================== */

/**
 * Semi-transparent overlay behind mobile sidebar.
 * Clicking it should close the sidebar (via JavaScript).
 */
.mobile-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-sticky, 200) - 1);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--transition-base, 200ms ease);
    pointer-events: none;
}

@media (max-width: 991px) {
    .mobile-sidebar-overlay {
        display: block;
    }

    .sidebar-open .mobile-sidebar-overlay,
    .frontend-sidebar.show ~ .mobile-sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }
}


/* ==========================================================================
   8. PAGE SECTIONS — Common Content Structures
   ========================================================================== */

/**
 * Page header section with title and optional actions.
 */
.page-header {
    margin-bottom: var(--space-6, 1.5rem);
    padding-bottom: var(--space-4, 1rem);
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

.page-title {
    margin: 0 0 var(--space-2, 0.5rem) 0;
    font-size: var(--text-2xl, 1.5rem);
    font-weight: var(--weight-bold, 700);
    color: var(--text-color, #f0f0fa);
    line-height: var(--leading-tight, 1.25);
}

.page-subtitle {
    margin: 0;
    font-size: var(--text-base, 1rem);
    color: var(--text-muted, #8888aa);
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
    margin-top: var(--space-4, 1rem);
}

/**
 * Page body — main content area.
 */
.page-body {
    flex: 1;
}

/**
 * Page footer — optional footer within main content.
 */
.page-footer {
    margin-top: var(--space-8, 2rem);
    padding-top: var(--space-4, 1rem);
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}


/* ==========================================================================
   9. LAYOUT GRIDS — Flexbox & CSS Grid Utilities
   ========================================================================== */

/**
 * Two-column layout with sidebar and main area.
 * Use for settings pages, profile with sidebar, etc.
 */
.layout-sidebar-main {
    display: flex;
    gap: var(--space-6, 1.5rem);
}

.layout-sidebar-main__sidebar {
    flex-shrink: 0;
    width: 280px;
}

.layout-sidebar-main__content {
    flex: 1;
    min-width: 0;
}

@media (max-width: 991px) {
    .layout-sidebar-main {
        flex-direction: column;
    }

    .layout-sidebar-main__sidebar {
        width: 100%;
    }
}

/**
 * Split layout — two equal columns.
 */
.layout-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6, 1.5rem);
}

@media (max-width: 767px) {
    .layout-split {
        grid-template-columns: 1fr;
    }
}

/**
 * Stack layout — vertical stacking with consistent gaps.
 */
.layout-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
}

.layout-stack--tight {
    gap: var(--space-2, 0.5rem);
}

.layout-stack--loose {
    gap: var(--space-6, 1.5rem);
}


/* ==========================================================================
   10. DARK THEME ADJUSTMENTS
   ========================================================================== */

/**
 * Dark theme layout adjustments.
 * Dark is default — these reinforce that.
 */
[data-theme="dark"] .main-content {
    background: var(--body-bg, #0c0c1e);
}

[data-theme="dark"] .page-header {
    border-bottom-color: var(--border-color, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .page-footer {
    border-top-color: var(--border-color, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .mobile-sidebar-overlay {
    background: rgba(0, 0, 0, 0.7);
}


/* ==========================================================================
   11. ACCESSIBILITY — Focus States, Skip Links
   ========================================================================== */

/**
 * Skip link for keyboard navigation.
 * Hidden by default, visible on focus.
 */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: var(--space-4, 1rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: var(--color-primary, #6366f1);
    color: var(--color-text-inverse, #ffffff);
    text-decoration: none;
    border-radius: var(--radius-lg, 8px);
    font-weight: var(--weight-medium, 500);
    z-index: var(--z-toast, 500);
    transition: top var(--transition-fast, 150ms ease);
}

.skip-to-content:focus {
    top: var(--space-4, 1rem);
    outline: 2px solid var(--color-primary, #6366f1);
    outline-offset: 2px;
}


/* ==========================================================================
   12. PRINT STYLES
   ========================================================================== */

@media print {
    .frontend-sidebar {
        display: none;
    }

    .main-content {
        margin-left: 0;
        padding: 0;
    }

    .content-wrapper {
        max-width: none;
        padding: 0;
    }

    .mobile-sidebar-overlay {
        display: none;
    }
}


/* ==========================================================================
   END OF FILE
   ========================================================================== */