/**
 * Main Stylesheet - MCC AI Codex
 * VS Code Dark Theme
 * 
 * Import order:
 * 1. Variables (design tokens)
 * 2. Base (reset, typography)
 * 3. Layout (page structure)
 * 4. Components (reusable UI)
 * 5. Sidebar (workspace, conversations, files)
 * 6. Chat (messages, streaming)
 * 7. Core (admin interface)
 */

@import url('variables.css');
@import url('base.css');
@import url('layout.css');
@import url('components.css');
@import url('sidebar.css');
@import url('chat.css');
@import url('persona.css');
@import url('mermaid.css');

/* ===== UTILITY CLASSES ===== */

/* Spacing utilities */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-xs); }
.mt-2 { margin-top: var(--space-sm); }
.mt-3 { margin-top: var(--space-md); }
.mt-4 { margin-top: var(--space-lg); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-xs); }
.mb-2 { margin-bottom: var(--space-sm); }
.mb-3 { margin-bottom: var(--space-md); }
.mb-4 { margin-bottom: var(--space-lg); }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-xs); }
.p-2 { padding: var(--space-sm); }
.p-3 { padding: var(--space-md); }
.p-4 { padding: var(--space-lg); }

/* Text utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-inverse { color: var(--color-text-inverse); }
.text-accent { color: var(--color-accent-primary); }

.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }

.font-mono { font-family: var(--font-family-mono); }

/* Display utilities */
.hidden { display: none; }
.flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-center { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.gap-1 { gap: var(--space-xs); }
.gap-2 { gap: var(--space-sm); }
.gap-3 { gap: var(--space-md); }
.gap-4 { gap: var(--space-lg); }

/* ===== RESPONSIVE OVERRIDES (if needed later) ===== */

@media (max-width: 1024px) {
    :root {
        --sidebar-width: 240px;
    }
}

@media (max-width: 768px) {
    :root {
        --sidebar-width: 200px;
        --space-xl: 16px;
    }
    
    .sidebar {
        position: absolute;
        height: 100%;
        z-index: var(--z-dropdown);
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    .sidebar,
    .codex-header,
    .chat-input-container,
    button {
        display: none;
    }
    
    .chat-messages {
        padding: 0;
    }
}