/**
 * LAYOUT GRID - @TRIXX.OF
 * Local: /assets/css/layout-grid.css
 */

/* Configuração Base do Viewport */
#app-viewport {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    background: var(--bg-main);
}

/* Container Principal (Dashboard) */
.dash-container {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Grid de Ações (Novo Vídeo / Editar Foto) */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Seções de Lista (Recentes) */
.section-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.horizontal-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none; /* Firefox */
}

.horizontal-scroll::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Layout do Editor (Timeline e Player) */
.editor-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.player-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-area {
    height: 320px;
    display: flex;
    flex-direction: column;
}

/* Espaçamentos Globais */
.p-20 { padding: 20px; }
.m-b-10 { margin-bottom: 10px; }