/**
 * Fiscalia Design System - App Layout
 * Layout shell for authenticated/tool pages
 *
 * Uses: app-sidebar component
 * Pages: /chat, /sim, /reports, etc.
 */

/* ============================================
   APP LAYOUT SHELL
   ============================================ */
.layout-app {
    min-height: 100vh;
    display: flex;
    --sidebar-width: 288px;
    background: var(--bg-primary);
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */
.layout-app-main,
.main {
    position: absolute;
    left: var(--sidebar-width, 280px);
    right: 0;
    min-height: 100vh;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-primary);
}

/* Top-align for simulator view and scrollable content */
.main:has(#view-simulador.active),
.layout-app-main.align-top {
    align-items: flex-start;
}

/* ============================================
   MAIN CONTENT CONTAINER
   ============================================ */
.app-content {
    width: 100%;
    max-width: 1000px;
    padding: var(--space-lg);
}

.app-content-narrow {
    max-width: 700px;
}

.app-content-wide {
    max-width: 1200px;
}

.app-content-full {
    max-width: none;
}

/* ============================================
   APP PAGE HEADER
   ============================================ */
.app-header {
    margin-bottom: var(--space-lg);
}

.app-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.app-header-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.app-header-subtitle {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.app-header-actions {
    display: flex;
    gap: var(--space-sm);
}

/* ============================================
   SPLIT VIEW (for chat + sidebar panels)
   ============================================ */
.split-view {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.split-view-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.split-view-panel {
    width: 400px;
    flex-shrink: 0;
    border-left: 1px solid var(--border);
    background: var(--bg-sidebar);
    overflow-y: auto;
}

/* ============================================
   CENTERED CONTENT (for dashboard, welcome)
   ============================================ */
.centered-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-2xl);
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .layout-app-main,
    .main {
        left: 0 !important;
        margin-left: 0 !important;
    }

    .app-content {
        padding: var(--space-md);
    }

    .split-view {
        flex-direction: column;
    }

    .split-view-panel {
        width: 100%;
        height: 50%;
        border-left: none;
        border-top: 1px solid var(--border);
    }

    .app-header-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .app-header-actions {
        width: 100%;
    }
}