/* ============================================
   Rame Design System - Dark Mode Tokens
   ============================================
   Overrides for dark theme compatibility
   ============================================ */

/* Dark mode - using data-rame-theme attribute set by themeDetector.js */
[data-rame-theme="dark"],
.rame-dark {
    /* ========================================
       COLOR PALETTE - Primary (adjusted for dark)
       ======================================== */
    --rame-primary: #3b9eff;
    --rame-primary-hover: #60b0ff;
    --rame-primary-dark: #2d8ae6;
    --rame-primary-light: #1a3a5c;
    --rame-primary-lighter: #1a2d42;

    /* ========================================
       COLOR PALETTE - Success
       ======================================== */
    --rame-success: #2ecc71;
    --rame-success-hover: #3ae07f;
    --rame-success-dark: #27ae60;
    --rame-success-light: #1a3d2a;
    --rame-success-lighter: #1a3025;

    /* ========================================
       COLOR PALETTE - Accent (Teal/Green)
       ======================================== */
    --rame-accent: #00c9a7;
    --rame-accent-hover: #00b896;
    --rame-accent-dark: #00a77d;

    /* ========================================
       COLOR PALETTE - Semantic (adjusted for dark backgrounds)
       ======================================== */
    --rame-error: #ff6b6b;
    --rame-error-light: #3d2020;
    --rame-error-border: #5a3030;
    --rame-error-text: #ff8a8a;

    --rame-warning: #ffb347;
    --rame-warning-light: #3d3020;
    --rame-warning-lighter: #3d3520;
    --rame-warning-border: #5a4530;
    --rame-warning-text: #ffc978;
    --rame-warning-dark: #e6a23c;

    --rame-info: #5bc0de;
    --rame-info-light: #1a2d3d;
    --rame-info-lighter: #1a3040;
    --rame-info-border: #2a4050;
    --rame-info-text: #7dd3f0;

    /* ========================================
       COLOR PALETTE - Neutrals (Text) - HIGH CONTRAST
       ======================================== */
    --rame-text-primary: #f0f0f0;
    --rame-text-secondary: #c8c8c8;
    --rame-text-tertiary: #a0a0a0;
    --rame-text-muted: #888888;
    --rame-text-chat: #f0f0f0;
    --rame-text-meta: #a8a8a8;

    /* ========================================
       COLOR PALETTE - Backgrounds
       ======================================== */
    --rame-bg-primary: #1e1e1e;
    --rame-bg-secondary: #282828;
    --rame-bg-tertiary: #333333;
    --rame-bg-chat: #1a1a1a;
    --rame-bg-hover: #3a3a3a;
    --rame-bg-input: #2a2a2a;

    /* ========================================
       COLOR PALETTE - Borders
       ======================================== */
    --rame-border-light: #404040;
    --rame-border-medium: #505050;
    --rame-border-dark: #606060;
    --rame-border-focus: var(--rame-primary);

    /* ========================================
       COLOR PALETTE - Scrollbar
       ======================================== */
    --rame-scrollbar-thumb: #555555;
    --rame-scrollbar-thumb-hover: #666666;
    --rame-scrollbar-track: transparent;

    /* ========================================
       COLOR PALETTE - Status Indicators
       ======================================== */
    --rame-status-online: #4ade80;
    --rame-status-sent: #6dd5f0;
    --rame-status-pending: var(--rame-text-muted);
    --rame-status-failed: var(--rame-error);

    /* ========================================
       COLOR PALETTE - Message Bubbles (CRITICAL FOR CHAT)
       ======================================== */
    --rame-message-sent-bg: #005c4b;
    --rame-message-received-bg: #2a2a2a;
    --rame-message-status-sent: #6dd5f0;

    /* ========================================
       SHADOWS (adjusted for dark)
       ======================================== */
    --rame-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --rame-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --rame-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
    --rame-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.6);
    --rame-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.7);
    --rame-shadow-message: 0 1px 0.5px rgba(0, 0, 0, 0.3);

    /* Focus shadows */
    --rame-shadow-focus-primary: 0 0 0 3px rgba(59, 158, 255, 0.3);
    --rame-shadow-focus-success: 0 0 0 2px rgba(46, 204, 113, 0.3);

    /* Colored shadows */
    --rame-shadow-primary: 0 2px 8px rgba(59, 158, 255, 0.4);
    --rame-shadow-success: 0 2px 8px rgba(46, 204, 113, 0.4);
    --rame-shadow-error: 0 2px 8px rgba(255, 107, 107, 0.4);
}

/* DevExpress XAF Dark Theme Integration */
.dx-blazor[class*="dark"],
.dx-blazor.dx-theme-fluent-blue-dark,
.dx-blazor.dx-theme-blazing-berry,
.dx-blazor.dx-theme-blazing-dark {
    /* Map to DevExpress variables when available */
    --rame-primary: var(--dxbs-primary, #3b9eff);
    --rame-bg-primary: var(--dxbs-background, #1e1e1e);

    /* Inherit all dark mode tokens */
    --rame-text-primary: #f0f0f0;
    --rame-text-secondary: #c8c8c8;
    --rame-text-tertiary: #a0a0a0;
    --rame-text-muted: #888888;
    --rame-text-chat: #f0f0f0;
    --rame-text-meta: #a8a8a8;

    --rame-bg-secondary: #282828;
    --rame-bg-tertiary: #333333;
    --rame-bg-chat: #1a1a1a;
    --rame-bg-hover: #3a3a3a;
    --rame-bg-input: #2a2a2a;

    --rame-border-light: #404040;
    --rame-border-medium: #505050;
    --rame-border-dark: #606060;

    --rame-message-sent-bg: #005c4b;
    --rame-message-received-bg: #2a2a2a;

    /* Semantic colors for dark */
    --rame-error: #ff6b6b;
    --rame-error-light: #3d2020;
    --rame-error-text: #ff8a8a;

    --rame-warning: #ffb347;
    --rame-warning-light: #3d3020;
    --rame-warning-lighter: #3d3520;
    --rame-warning-text: #ffc978;

    --rame-info: #5bc0de;
    --rame-info-light: #1a2d3d;
    --rame-info-lighter: #1a3040;
    --rame-info-text: #7dd3f0;

    --rame-success: #2ecc71;
    --rame-success-light: #1a3d2a;
    --rame-success-lighter: #1a3025;

    --rame-accent: #00c9a7;
    --rame-accent-hover: #00b896;
    --rame-accent-dark: #00a77d;
}

/* Respect system preference when no explicit theme */
@media (prefers-color-scheme: dark) {
    :root:not([data-rame-theme]):not(.rame-light) {
        /* System prefers dark but app hasn't explicitly set theme */
        /* This is a fallback - primary detection is via themeDetector.js */
    }
}

/* ========================================
   GLOBAL DARK MODE - Confirmation Modal
   DxPopup renders outside component scope,
   so these styles must be global
   ======================================== */

[data-rame-theme="dark"] .confirm-modal {
    background: #282828;
}

[data-rame-theme="dark"] .confirm-modal__header {
    border-bottom-color: #505050;
}

[data-rame-theme="dark"] .confirm-modal__icon {
    background: #3d3020;
    color: #ffb347;
}

[data-rame-theme="dark"] .confirm-modal__title {
    color: #f0f0f0;
}

[data-rame-theme="dark"] .confirm-modal__subtitle {
    color: #c8c8c8;
}

[data-rame-theme="dark"] .confirm-modal__body p {
    color: #c8c8c8;
}

[data-rame-theme="dark"] .confirm-modal__actions {
    background: #333333;
    border-top-color: #505050;
}

/* Danger Button (Descartar) */
[data-rame-theme="dark"] .confirm-btn--danger {
    background: transparent;
    color: #ff6b6b;
    border-color: #5a3030;
}

[data-rame-theme="dark"] .confirm-btn--danger:hover {
    background: #3d2020;
    border-color: #7a4040;
    color: #ff8a8a;
}

/* Ghost Button (Seguir editando) */
[data-rame-theme="dark"] .confirm-btn--ghost {
    background: #282828;
    color: #e0e0e0;
    border-color: #505050;
}

[data-rame-theme="dark"] .confirm-btn--ghost:hover {
    background: #3a3a3a;
    border-color: #606060;
    color: #ffffff;
}

/* Primary Button (Guardar y salir) */
[data-rame-theme="dark"] .confirm-btn--primary {
    background: #3b9eff;
    color: #ffffff;
    border-color: #3b9eff;
}

[data-rame-theme="dark"] .confirm-btn--primary:hover {
    background: #60b0ff;
    border-color: #60b0ff;
    color: #ffffff;
}

[data-rame-theme="dark"] .confirm-exit-modal .dxbl-popup-content {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 25px 50px -12px rgba(0, 0, 0, 0.5);
}