/* ============================================
   NEXUS - Tema Yin-Yang
   Minimalista, descansado, para trabajo prolongado
   ============================================ */

/* ============================================
   YANG - Tema Oscuro (Default)
   Negro puro con acentos suaves
   ============================================ */
:root,
[data-theme="dark"],
.theme-dark {
    /* Fondo */
    --theme-bg-primary: #0A0A0A;
    --theme-bg-secondary: #111111;
    --theme-bg-surface: #161616;
    --theme-bg-elevated: #1C1C1C;

    /* Texto */
    --theme-text-primary: #F5F5F5;
    --theme-text-secondary: #A0A0A0;
    --theme-text-muted: #666666;

    /* Bordes y lineas */
    --theme-border: #2A2A2A;
    --theme-border-subtle: #1F1F1F;
    --theme-divider: #222222;

    /* Acentos - muy suaves, no saturados */
    --theme-accent: #808080;
    --theme-accent-hover: #999999;
    --theme-accent-active: #FFFFFF;

    /* Estados */
    --theme-success: #4A7A4A;
    --theme-warning: #8A7A3A;
    --theme-error: #7A4A4A;
    --theme-info: #4A5A7A;

    /* Sombras */
    --theme-shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
    --theme-shadow-md: 0 4px 6px rgba(0,0,0,0.4);
    --theme-shadow-lg: 0 10px 25px rgba(0,0,0,0.5);

    /* Transiciones */
    --theme-transition: 0.2s ease;

    /* Overlay para dialogs */
    --theme-overlay: rgba(0,0,0,0.7);
}

/* ============================================
   YIN - Tema Claro
   Blanco puro con acentos suaves
   ============================================ */
[data-theme="light"],
.theme-light {
    /* Fondo */
    --theme-bg-primary: #FFFFFF;
    --theme-bg-secondary: #FAFAFA;
    --theme-bg-surface: #F5F5F5;
    --theme-bg-elevated: #FFFFFF;

    /* Texto */
    --theme-text-primary: #1A1A1A;
    --theme-text-secondary: #666666;
    --theme-text-muted: #999999;

    /* Bordes y lineas */
    --theme-border: #E5E5E5;
    --theme-border-subtle: #EEEEEE;
    --theme-divider: #F0F0F0;

    /* Acentos - muy suaves, no saturados */
    --theme-accent: #666666;
    --theme-accent-hover: #444444;
    --theme-accent-active: #000000;

    /* Estados - desaturados para no cansar la vista */
    --theme-success: #6A9A6A;
    --theme-warning: #9A8A5A;
    --theme-error: #9A6A6A;
    --theme-info: #6A7A9A;

    /* Sombras */
    --theme-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --theme-shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --theme-shadow-lg: 0 10px 25px rgba(0,0,0,0.1);

    /* Overlay para dialogs */
    --theme-overlay: rgba(0,0,0,0.3);
}

/* ============================================
   Aplicar tema a elementos
   ============================================ */

/* Body y fondo general */
body.theme-dark,
body[data-theme="dark"] {
    background-color: var(--theme-bg-primary) !important;
    color: var(--theme-text-primary) !important;
}

body.theme-light,
body[data-theme="light"] {
    background-color: var(--theme-bg-primary) !important;
    color: var(--theme-text-primary) !important;
}

/* MudBlazor overrides para tema */
.theme-dark .mud-appbar,
[data-theme="dark"] .mud-appbar {
    background-color: var(--theme-bg-secondary) !important;
    border-bottom: 1px solid var(--theme-border) !important;
}

.theme-light .mud-appbar,
[data-theme="light"] .mud-appbar {
    background-color: var(--theme-bg-primary) !important;
    border-bottom: 1px solid var(--theme-border) !important;
    color: var(--theme-text-primary) !important;
}

/* Drawer */
.theme-dark .mud-drawer,
[data-theme="dark"] .mud-drawer {
    background-color: var(--theme-bg-secondary) !important;
    border-right: 1px solid var(--theme-border) !important;
}

.theme-light .mud-drawer,
[data-theme="light"] .mud-drawer {
    background-color: var(--theme-bg-secondary) !important;
    border-right: 1px solid var(--theme-border) !important;
}

/* Paper/Card */
.theme-dark .mud-paper,
[data-theme="dark"] .mud-paper {
    background-color: var(--theme-bg-surface) !important;
    border-color: var(--theme-border) !important;
}

.theme-light .mud-paper,
[data-theme="light"] .mud-paper {
    background-color: var(--theme-bg-elevated) !important;
    border-color: var(--theme-border) !important;
    box-shadow: var(--theme-shadow-sm) !important;
}

/* Dialog */
.theme-dark .mud-dialog,
[data-theme="dark"] .mud-dialog {
    background-color: var(--theme-bg-surface) !important;
    border: 1px solid var(--theme-border) !important;
}

.theme-light .mud-dialog,
[data-theme="light"] .mud-dialog {
    background-color: var(--theme-bg-elevated) !important;
    border: 1px solid var(--theme-border) !important;
    box-shadow: var(--theme-shadow-lg) !important;
}

/* Table */
.theme-dark .mud-table,
[data-theme="dark"] .mud-table {
    background-color: var(--theme-bg-surface) !important;
}

.theme-light .mud-table,
[data-theme="light"] .mud-table {
    background-color: var(--theme-bg-elevated) !important;
}

.theme-light .mud-table-row:hover,
[data-theme="light"] .mud-table-row:hover {
    background-color: var(--theme-bg-surface) !important;
}

/* Input fields */
.theme-dark .mud-input,
[data-theme="dark"] .mud-input {
    color: var(--theme-text-primary) !important;
}

.theme-light .mud-input,
[data-theme="light"] .mud-input {
    color: var(--theme-text-primary) !important;
}

.theme-light .mud-input-outlined .mud-input-outlined-border,
[data-theme="light"] .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--theme-border) !important;
}

/* Chips */
.theme-light .mud-chip,
[data-theme="light"] .mud-chip {
    background-color: var(--theme-bg-surface) !important;
    color: var(--theme-text-primary) !important;
}

/* Nav links */
.theme-dark .mud-nav-link,
[data-theme="dark"] .mud-nav-link {
    color: var(--theme-text-secondary) !important;
}

.theme-dark .mud-nav-link:hover,
[data-theme="dark"] .mud-nav-link:hover {
    background-color: var(--theme-bg-elevated) !important;
    color: var(--theme-text-primary) !important;
}

.theme-dark .mud-nav-link.active,
[data-theme="dark"] .mud-nav-link.active {
    background-color: var(--theme-bg-elevated) !important;
    color: var(--theme-text-primary) !important;
    border-right: 2px solid var(--theme-accent) !important;
}

.theme-light .mud-nav-link,
[data-theme="light"] .mud-nav-link {
    color: var(--theme-text-secondary) !important;
}

.theme-light .mud-nav-link:hover,
[data-theme="light"] .mud-nav-link:hover {
    background-color: var(--theme-bg-surface) !important;
    color: var(--theme-text-primary) !important;
}

.theme-light .mud-nav-link.active,
[data-theme="light"] .mud-nav-link.active {
    background-color: var(--theme-bg-surface) !important;
    color: var(--theme-text-primary) !important;
    border-right: 2px solid var(--theme-accent) !important;
}

/* Buttons - minimalistas */
.theme-dark .mud-button-filled,
[data-theme="dark"] .mud-button-filled {
    background-color: var(--theme-accent) !important;
    color: var(--theme-bg-primary) !important;
}

.theme-dark .mud-button-filled:hover,
[data-theme="dark"] .mud-button-filled:hover {
    background-color: var(--theme-accent-hover) !important;
}

.theme-light .mud-button-filled,
[data-theme="light"] .mud-button-filled {
    background-color: var(--theme-text-primary) !important;
    color: var(--theme-bg-primary) !important;
}

.theme-light .mud-button-outlined,
[data-theme="light"] .mud-button-outlined {
    border-color: var(--theme-border) !important;
    color: var(--theme-text-primary) !important;
}

/* Scrollbar para tema claro */
.theme-light::-webkit-scrollbar-track,
[data-theme="light"]::-webkit-scrollbar-track {
    background: var(--theme-bg-secondary);
}

.theme-light::-webkit-scrollbar-thumb,
[data-theme="light"]::-webkit-scrollbar-thumb {
    background: var(--theme-border);
}

/* ============================================
   Workspace specific overrides
   ============================================ */

/* Sessions panel */
.theme-dark .sessions-panel,
[data-theme="dark"] .sessions-panel {
    background-color: var(--theme-bg-secondary) !important;
    border-color: var(--theme-border) !important;
}

.theme-light .sessions-panel,
[data-theme="light"] .sessions-panel {
    background-color: var(--theme-bg-secondary) !important;
    border-color: var(--theme-border) !important;
}

/* Context panel */
.theme-dark .context-panel,
[data-theme="dark"] .context-panel {
    background-color: var(--theme-bg-secondary) !important;
    border-color: var(--theme-border) !important;
}

.theme-light .context-panel,
[data-theme="light"] .context-panel {
    background-color: var(--theme-bg-secondary) !important;
    border-color: var(--theme-border) !important;
}

/* Conversation panel */
.theme-dark .conversation-panel,
[data-theme="dark"] .conversation-panel {
    background-color: var(--theme-bg-primary) !important;
}

.theme-light .conversation-panel,
[data-theme="light"] .conversation-panel {
    background-color: var(--theme-bg-surface) !important;
}

/* Message bubbles */
.theme-dark .message-user,
[data-theme="dark"] .message-user {
    background-color: var(--theme-bg-elevated) !important;
    color: var(--theme-text-primary) !important;
    border: 1px solid var(--theme-border) !important;
}

.theme-dark .message-assistant,
[data-theme="dark"] .message-assistant {
    background-color: var(--theme-bg-surface) !important;
    border: 1px solid var(--theme-border) !important;
}

.theme-light .message-user,
[data-theme="light"] .message-user {
    background-color: var(--theme-text-primary) !important;
    color: var(--theme-bg-primary) !important;
}

.theme-light .message-assistant,
[data-theme="light"] .message-assistant {
    background-color: var(--theme-bg-elevated) !important;
    border: 1px solid var(--theme-border) !important;
    color: var(--theme-text-primary) !important;
}

/* Session tabs */
.theme-dark .session-tab,
[data-theme="dark"] .session-tab {
    border-color: var(--theme-border) !important;
}

.theme-dark .session-tab.active,
[data-theme="dark"] .session-tab.active {
    background-color: var(--theme-bg-elevated) !important;
    border-bottom-color: var(--theme-accent) !important;
}

.theme-light .session-tab,
[data-theme="light"] .session-tab {
    border-color: var(--theme-border) !important;
}

.theme-light .session-tab.active,
[data-theme="light"] .session-tab.active {
    background-color: var(--theme-bg-elevated) !important;
    border-bottom-color: var(--theme-accent) !important;
}

/* Input area */
.theme-dark .input-area,
[data-theme="dark"] .input-area {
    background-color: var(--theme-bg-secondary) !important;
    border-color: var(--theme-border) !important;
}

.theme-light .input-area,
[data-theme="light"] .input-area {
    background-color: var(--theme-bg-elevated) !important;
    border-color: var(--theme-border) !important;
}

/* Quick actions */
.theme-dark .quick-actions-panel,
[data-theme="dark"] .quick-actions-panel {
    background-color: var(--theme-bg-secondary) !important;
    border-color: var(--theme-border) !important;
}

.theme-light .quick-actions-panel,
[data-theme="light"] .quick-actions-panel {
    background-color: var(--theme-bg-secondary) !important;
    border-color: var(--theme-border) !important;
}

.theme-dark .quick-action-btn,
[data-theme="dark"] .quick-action-btn {
    background-color: var(--theme-bg-surface) !important;
    border-color: var(--theme-border) !important;
}

.theme-light .quick-action-btn,
[data-theme="light"] .quick-action-btn {
    background-color: var(--theme-bg-elevated) !important;
    border-color: var(--theme-border) !important;
}

/* ============================================
   Transitions suaves entre temas
   ============================================ */
body,
.mud-appbar,
.mud-drawer,
.mud-paper,
.mud-dialog,
.mud-table,
.mud-nav-link,
.sessions-panel,
.context-panel,
.conversation-panel,
.input-area,
.message-bubble,
.quick-actions-panel {
    transition:
        background-color var(--theme-transition),
        color var(--theme-transition),
        border-color var(--theme-transition),
        box-shadow var(--theme-transition);
}

/* ============================================
   Utilidades
   ============================================ */
.theme-toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--theme-transition);
    background: transparent;
    border: 1px solid var(--theme-border);
}

.theme-toggle-btn:hover {
    background-color: var(--theme-bg-elevated);
    border-color: var(--theme-accent);
}

.theme-toggle-icon {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.theme-dark .theme-toggle-icon,
[data-theme="dark"] .theme-toggle-icon {
    color: var(--theme-text-secondary);
}

.theme-light .theme-toggle-icon,
[data-theme="light"] .theme-toggle-icon {
    color: var(--theme-text-primary);
}