/* ============================================================================
   Main Stylesheet - Modular CSS Architecture
   Book RAG Application

   This file imports all modular CSS files in the correct order.
   Refactored for maintainability, mobile-first responsiveness, and theme independence.

   Architecture:
   1. Core (variables, reset, typography, utilities)
   2. Themes (light, dark, ocean, custom)
   3. Layout (grid, header, sidebar)
   4. Components (buttons, forms, cards, modals, loading, chat, messages)
   5. Features (citations, scenarios, boardroom)
   ============================================================================ */

/* ============================================================================
   CORE STYLES
   ============================================================================ */
@import url('css/core/variables.css');
@import url('css/core/reset.css');
@import url('css/core/typography.css');
@import url('css/core/utilities.css');

/* ============================================================================
   THEME STYLES
   ============================================================================ */
@import url('css/themes/theme-base.css');
@import url('css/themes/theme-dark.css');
@import url('css/themes/theme-ocean.css');
@import url('css/themes/theme-eskom.css');
@import url('css/themes/theme-deeppurple.css');

/* ============================================================================
   LAYOUT STYLES
   ============================================================================ */
@import url('css/layout/grid.css');
@import url('css/layout/header.css');
@import url('css/layout/sidebar.css');

/* ============================================================================
   COMPONENT STYLES
   ============================================================================ */
@import url('css/components/buttons.css');
@import url('css/components/forms.css');
@import url('css/components/cards.css');
@import url('css/components/modals.css');
@import url('css/components/loading.css');
@import url('css/components/chat.css');
@import url('css/components/messages.css');

/* ============================================================================
   FEATURE STYLES
   ============================================================================ */
@import url('css/features/citations.css');
@import url('css/features/scenarios.css');
@import url('css/features/boardroom.css');

/* ============================================================================
   LEGACY / TEMPORARY OVERRIDES
   Add any temporary overrides or legacy styles here that need to be refactored
   ============================================================================ */

/* Prompt tag (from original) */
.prompt-tag {
    background: #e9ecef;
    padding: 4px 8px;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    color: #495057;
}

/* CTA section (welcome page) */
.welcome-container .cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .collapsible,
    .assistant-chip,
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */
@media print {
    .top-banner,
    .side-menu,
    .side-helper-panel,
    .chat-footer,
    .settings-toggle,
    .new_chatbtn,
    .new_chatbtn2,
    .delete-book-btn,
    .edit-btn,
    .deleteconv-btn {
        display: none !important;
    }

    .chat-container,
    .chat-body,
    #messages {
        overflow: visible !important;
        height: auto !important;
    }

    .message {
        page-break-inside: avoid;
    }
}