/* ============================================
   Unified app shell (Phase 5)
   ============================================ */

#app-root {
    min-height: 100vh;
}

.app-view {
    display: none;
    min-height: 100vh;
}

.app-view.active {
    display: block;
}

#view-solar.active {
    display: flex;
    flex-direction: column;
}

body.solar-build-mode .topbar-solar-simulate-panel {
    display: none !important;
}

body.solar-simulate-mode .topbar-solar-build-panel {
    display: none !important;
}

body.solar-build-mode #simStatsSection {
    display: none !important;
}

body.solar-simulate-mode #simStatsSection {
    display: block !important;
}

.app-view[hidden] {
    display: none !important;
}

.app-view-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 52px);
    padding: 2rem;
    text-align: center;
    color: var(--text-primary, #e1e8ed);
    font-family: system-ui, sans-serif;
}

.app-view-placeholder h1 {
    margin: 0 0 0.75rem;
    font-size: 1.5rem;
}

.app-view-placeholder p {
    margin: 0.25rem 0;
    color: var(--text-muted, #8899a6);
    max-width: 36rem;
}

.app-view-placeholder a {
    color: var(--clr-primary, #1da1f2);
}

.app-boot-error {
    padding: 2rem;
    color: #c0392b;
    font-family: sans-serif;
}

.app-view-chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    min-height: 52px;
    background: var(--bg-topbar, #15202b);
    border-bottom: 1px solid var(--border-subtle, #38444d);
}

.app-view-chrome-title {
    margin: 0;
    font-size: 1rem;
    white-space: nowrap;
    color: var(--text-primary, #e1e8ed);
    font-family: system-ui, sans-serif;
}

.app-view-chrome .mode-toggle {
    display: flex;
    gap: 4px;
}

/* Unified solar canvas view */
body[data-app-mode="solar-design"],
body[data-app-mode="solar-simulate"] {
    --clr-solar: #f0ad4e;
    --clr-solar-light: #ffc107;
    --clr-solar-dark: #e6971f;
    --clr-solar-rgb: 240, 173, 78;
}

body[data-app-mode="solar-design"] #view-solar > #topbar,
body[data-app-mode="solar-simulate"] #view-solar > #topbar {
    border-bottom-color: var(--clr-solar, #f0ad4e);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(var(--clr-solar-rgb, 240, 173, 78), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#view-solar {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

#view-solar .simulator-native-host {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #0f1419;
}