/* AskLex.eu - Theme CSS Custom Properties
 * Defines color variables for light and dark themes
 * Works with Bootstrap 5.3+ data-bs-theme attribute
 */

/* ========================================
   LIGHT THEME (Default)
   ======================================== */
:root,
[data-bs-theme="light"] {
    /* Background colors */
    --cw-bg-primary: #ffffff;
    --cw-bg-secondary: #f8f9fa;
    --cw-bg-tertiary: #e9ecef;

    /* Text colors */
    --cw-text-primary: #212529;
    --cw-text-secondary: #6c757d;
    --cw-text-muted: #6c757d;

    /* Border colors */
    --cw-border-color: #dee2e6;

    /* Chat message colors */
    --cw-chat-user-bg: #0d6efd;
    --cw-chat-user-text: #ffffff;
    --cw-chat-assistant-bg: #f8f9fa;
    --cw-chat-assistant-text: #212529;
    --cw-chat-assistant-border: #dee2e6;

    /* Drop zone colors */
    --cw-dropzone-border: #dee2e6;
    --cw-dropzone-bg: #f8f9fa;
    --cw-dropzone-hover-border: #0d6efd;
    --cw-dropzone-hover-bg: #e7f1ff;
    --cw-dropzone-drag-bg: #cfe2ff;
    --cw-dropzone-success-border: #198754;
    --cw-dropzone-success-bg: #d1e7dd;

    /* Icon colors */
    --cw-icon-color: #6c757d;
    --cw-icon-hover-color: #0d6efd;
    --cw-icon-success-color: #198754;

    /* Card and component colors */
    --cw-card-bg: #ffffff;
    --cw-card-border: rgba(0, 0, 0, 0.125);

    /* Selected file background */
    --cw-selected-file-bg: #e7f1ff;
}

/* ========================================
   DARK THEME
   ======================================== */
[data-bs-theme="dark"] {
    /* Background colors */
    --cw-bg-primary: #212529;
    --cw-bg-secondary: #343a40;
    --cw-bg-tertiary: #495057;

    /* Text colors */
    --cw-text-primary: #dee2e6;
    --cw-text-secondary: #adb5bd;
    --cw-text-muted: #6c757d;

    /* Border colors */
    --cw-border-color: #495057;

    /* Chat message colors */
    --cw-chat-user-bg: #0d6efd;
    --cw-chat-user-text: #ffffff;
    --cw-chat-assistant-bg: #343a40;
    --cw-chat-assistant-text: #dee2e6;
    --cw-chat-assistant-border: #495057;

    /* Drop zone colors */
    --cw-dropzone-border: #495057;
    --cw-dropzone-bg: #343a40;
    --cw-dropzone-hover-border: #0d6efd;
    --cw-dropzone-hover-bg: #1a3a52;
    --cw-dropzone-drag-bg: #2c5282;
    --cw-dropzone-success-border: #198754;
    --cw-dropzone-success-bg: #1a4731;

    /* Icon colors */
    --cw-icon-color: #adb5bd;
    --cw-icon-hover-color: #6ea8fe;
    --cw-icon-success-color: #75b798;

    /* Card and component colors */
    --cw-card-bg: #212529;
    --cw-card-border: #495057;

    /* Selected file background */
    --cw-selected-file-bg: #1a3a52;
}

/* ========================================
   SMOOTH TRANSITIONS
   Applied to elements that change colors when theme switches
   ======================================== */
body,
.card,
.navbar,
.drop-zone,
.chat-message,
.bg-light,
.text-muted,
[class*="bg-"],
[class*="text-"] {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease;
}

/* ========================================
   CHAT MESSAGE STYLES
   ======================================== */
.chat-message {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.chat-message-user {
    background-color: var(--cw-chat-user-bg) !important;
    color: var(--cw-chat-user-text) !important;
}

.chat-message-assistant {
    background-color: var(--cw-chat-assistant-bg) !important;
    color: var(--cw-chat-assistant-text) !important;
    border: 1px solid var(--cw-chat-assistant-border);
}

/* ========================================
   DROP ZONE STYLES
   ======================================== */
.drop-zone {
    border: 2px dashed var(--cw-dropzone-border);
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--cw-dropzone-bg);
    position: relative;
}

.drop-zone:hover {
    border-color: var(--cw-dropzone-hover-border);
    background-color: var(--cw-dropzone-hover-bg);
}

.drop-zone.drag-over {
    border-color: var(--cw-dropzone-hover-border);
    background-color: var(--cw-dropzone-drag-bg);
    transform: scale(1.01);
}

.drop-zone-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.drop-zone-icon {
    font-size: 3rem;
    color: var(--cw-icon-color);
    margin-bottom: 0.5rem;
}

.drop-zone:hover .drop-zone-icon,
.drop-zone.drag-over .drop-zone-icon {
    color: var(--cw-icon-hover-color);
}

.drop-zone-text {
    margin-bottom: 0.25rem;
    font-weight: 500;
    color: var(--cw-text-primary);
}

.drop-zone-hint {
    margin-bottom: 0;
    font-size: 0.875rem;
    color: var(--cw-text-secondary);
}

.selected-file {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--cw-selected-file-bg);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
}

.selected-file i {
    color: var(--cw-icon-hover-color);
    margin-right: 0.5rem;
}

.drop-zone.has-file {
    border-color: var(--cw-dropzone-success-border);
    background-color: var(--cw-dropzone-success-bg);
}

.drop-zone.has-file .drop-zone-icon {
    color: var(--cw-icon-success-color);
}

/* ========================================
   THEME TOGGLE BUTTON
   ======================================== */
#theme-toggle {
    background: transparent;
    border: none;
    padding: 0.375rem 0.75rem;
    font-size: 1.25rem;
    cursor: pointer;
}

#theme-toggle:hover {
    opacity: 0.8;
}

#theme-toggle i {
    transition: transform 0.3s ease;
}

#theme-toggle:hover i {
    transform: scale(1.1);
}