/* ============================================
   Gyro Design System - Dark Mode Tokens ("Aero Night")
   ============================================
   The brand is dark-first, so this is where the
   published palette applies verbatim: Night as the
   ground, Gyro Blue and Set Teal at full strength,
   neutrals with the brand's blue cast instead of
   flat greys.
   ============================================ */

/* Dark mode - using data-rame-theme attribute set by themeDetector.js */
[data-rame-theme="dark"],
.rame-dark {
    /* ========================================
       COLOR PALETTE - Primary (Gyro Blue, full strength)
       ======================================== */
    --rame-primary: var(--gyro-blue, #4E9BF5);
    --rame-primary-hover: var(--gyro-blue-soft, #8FBEF9);
    --rame-primary-dark: #3B7FD0;
    /* Measured: the accent text sits ON this tint (badges, active nav items).
       At #1F3A5E that pair was 4.02:1 — under AA. One step darker is 5.15:1. */
    --rame-primary-light: #16293F;
    --rame-primary-lighter: #101E30;

    /* ========================================
       COLOR PALETTE - Success (Set Teal)
       ======================================== */
    --rame-success: var(--gyro-teal, #2CE0B4);
    --rame-success-hover: var(--gyro-teal-soft, #6BEBCC);
    --rame-success-dark: #1FB894;
    --rame-success-light: var(--gyro-teal-shade, #123A33);
    --rame-success-lighter: #0F2C27;

    /* ========================================
       COLOR PALETTE - Accent (Set Teal)
       ======================================== */
    --rame-accent: var(--gyro-teal, #2CE0B4);
    --rame-accent-hover: var(--gyro-teal-soft, #6BEBCC);
    --rame-accent-dark: #1FB894;

    /* ========================================
       COLOR PALETTE - Semantic (adjusted for dark backgrounds)
       ======================================== */
    --rame-error: var(--gyro-danger, #F2637B);
    --rame-error-light: #3A1820;   /* 5.14:1 against --rame-error; #4A2029 was 4.48 */
    --rame-error-border: #6B2F3B;
    --rame-error-text: var(--gyro-danger-soft, #F794A5);

    --rame-warning: var(--gyro-amber, #F5A623);
    --rame-warning-light: var(--gyro-amber-shade, #43331A);
    --rame-warning-lighter: #372A15;
    --rame-warning-border: #614A24;
    --rame-warning-text: var(--gyro-amber-soft, #F8C46B);
    --rame-warning-dark: #D18C10;

    --rame-info: var(--gyro-blue, #4E9BF5);
    --rame-info-light: var(--gyro-blue-shade, #1F3A5E);
    --rame-info-lighter: #16293F;
    --rame-info-border: #2C5386;
    --rame-info-text: var(--gyro-blue-soft, #8FBEF9);

    /* ========================================
       COLOR PALETTE - Neutrals (Text) - HIGH CONTRAST
       ======================================== */
    --rame-text-primary: var(--gyro-off, #F0F4FF);
    --rame-text-secondary: #B6C2D8;
    --rame-text-tertiary: #94A3BE;
    --rame-text-muted: var(--gyro-muted, #7A8BAA);
    --rame-text-chat: var(--gyro-off, #F0F4FF);
    --rame-text-meta: #9AA9C2;

    /* ========================================
       COLOR PALETTE - Backgrounds (Night + surfaces)
       ======================================== */
    /* Still dark in dark mode — it just lifts off the Night ground instead of
       sinking into it, so the panel stays readable as a distinct surface. */
    --rame-surface-inverse: var(--gyro-surface-3, #182140);
    --rame-surface-inverse-soft: #1C2749;
    --rame-on-inverse: var(--gyro-off, #F0F4FF);
    --rame-on-inverse-muted: #9AA9C2;
    --rame-placeholder-bg: #2A395F;

    --rame-bg-primary: var(--gyro-surface-1, #0E1424);
    --rame-bg-secondary: var(--gyro-surface-2, #131B30);
    --rame-bg-tertiary: var(--gyro-surface-3, #182140);
    --rame-bg-chat: var(--gyro-night, #0A0E1A);
    --rame-bg-hover: #1C2749;
    --rame-bg-input: var(--gyro-surface-2, #131B30);

    /* ========================================
       COLOR PALETTE - Borders
       ======================================== */
    --rame-border-light: var(--gyro-border, rgba(122, 139, 170, .16));
    --rame-border-medium: var(--gyro-border-strong, rgba(122, 139, 170, .32));
    --rame-border-dark: rgba(122, 139, 170, .48);
    --rame-border-focus: var(--rame-primary);

    /* ========================================
       COLOR PALETTE - Scrollbar
       ======================================== */
    --rame-scrollbar-thumb: rgba(122, 139, 170, .38);
    --rame-scrollbar-thumb-hover: rgba(122, 139, 170, .58);
    --rame-scrollbar-track: transparent;

    /* ========================================
       COLOR PALETTE - Status Indicators
       ======================================== */
    --rame-status-online: var(--gyro-teal, #2CE0B4);
    --rame-status-sent: var(--gyro-blue, #4E9BF5);
    --rame-status-pending: var(--rame-text-muted);
    --rame-status-failed: var(--rame-error);

    /* ========================================
       COLOR PALETTE - Workflow Designer block types
       ======================================== */
    --rame-block-trigger: var(--gyro-blue, #4E9BF5);
    --rame-block-trigger-end: #8FBEF9;
    --rame-block-action: var(--gyro-teal, #2CE0B4);
    --rame-block-action-end: #6BEBCC;
    --rame-block-condition: var(--gyro-amber, #F5A623);
    --rame-block-condition-end: #F8C46B;

    /* ========================================
       COLOR PALETTE - AI flow node categories
       ======================================== */
    --rame-flow-trigger: var(--gyro-blue, #4E9BF5);
    --rame-flow-llm: #8FBEF9;
    --rame-flow-knowledge: var(--gyro-teal, #2CE0B4);
    --rame-flow-control: var(--gyro-muted, #7A8BAA);
    --rame-flow-action: var(--gyro-amber, #F5A623);
    --rame-flow-terminal: #6BEBCC;

    /* ========================================
       COLOR PALETTE - Message Bubbles (CRITICAL FOR CHAT)
       ======================================== */
    --rame-message-sent-bg: #0F4F42;
    --rame-message-received-bg: var(--gyro-surface-2, #131B30);
    --rame-message-status-sent: var(--gyro-blue, #4E9BF5);

    /* ========================================
       SHADOWS (adjusted for dark)
       ======================================== */
    --color-shadow: rgba(0, 0, 0, 0.38);
    --color-shadow-strong: rgba(0, 0, 0, 0.55);

    --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(78, 155, 245, 0.35);
    --rame-shadow-focus-success: 0 0 0 2px rgba(44, 224, 180, 0.35);

    /* Colored shadows */
    --rame-shadow-primary: 0 2px 8px rgba(78, 155, 245, 0.40);
    --rame-shadow-success: 0 2px 8px rgba(44, 224, 180, 0.40);
    --rame-shadow-error: 0 2px 8px rgba(242, 99, 123, 0.40);
    --rame-shadow-brand: 0 8px 28px rgba(78, 155, 245, 0.35);
}

/* 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, #4E9BF5);
    --rame-bg-primary: var(--dxbs-background, #0E1424);

    /* Inherit all dark mode tokens */
    --rame-text-primary: var(--gyro-off, #F0F4FF);
    --rame-text-secondary: #B6C2D8;
    --rame-text-tertiary: #94A3BE;
    --rame-text-muted: var(--gyro-muted, #7A8BAA);
    --rame-text-chat: var(--gyro-off, #F0F4FF);
    --rame-text-meta: #9AA9C2;

    --rame-bg-secondary: var(--gyro-surface-2, #131B30);
    --rame-bg-tertiary: var(--gyro-surface-3, #182140);
    --rame-bg-chat: var(--gyro-night, #0A0E1A);
    --rame-bg-hover: #1C2749;
    --rame-bg-input: var(--gyro-surface-2, #131B30);

    --rame-border-light: var(--gyro-border, rgba(122, 139, 170, .16));
    --rame-border-medium: var(--gyro-border-strong, rgba(122, 139, 170, .32));
    --rame-border-dark: rgba(122, 139, 170, .48);

    --rame-message-sent-bg: #0F4F42;
    --rame-message-received-bg: var(--gyro-surface-2, #131B30);

    /* Semantic colors for dark */
    --rame-error: var(--gyro-danger, #F2637B);
    --rame-error-light: var(--gyro-danger-shade, #4A2029);
    --rame-error-text: var(--gyro-danger-soft, #F794A5);

    --rame-warning: var(--gyro-amber, #F5A623);
    --rame-warning-light: var(--gyro-amber-shade, #43331A);
    --rame-warning-lighter: #372A15;
    --rame-warning-text: var(--gyro-amber-soft, #F8C46B);

    --rame-info: var(--gyro-blue, #4E9BF5);
    --rame-info-light: var(--gyro-blue-shade, #1F3A5E);
    --rame-info-lighter: #16293F;
    --rame-info-text: var(--gyro-blue-soft, #8FBEF9);

    --rame-success: var(--gyro-teal, #2CE0B4);
    --rame-success-light: var(--gyro-teal-shade, #123A33);
    --rame-success-lighter: #0F2C27;

    --rame-accent: var(--gyro-teal, #2CE0B4);
    --rame-accent-hover: var(--gyro-teal-soft, #6BEBCC);
    --rame-accent-dark: #1FB894;
}

/* 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: var(--rame-bg-secondary, #131B30);
}

[data-rame-theme="dark"] .confirm-modal__header {
    border-bottom-color: var(--rame-border-medium, rgba(122, 139, 170, .32));
}

[data-rame-theme="dark"] .confirm-modal__icon {
    background: var(--rame-warning-light, #43331A);
    color: var(--rame-warning-text, #F8C46B);
}

[data-rame-theme="dark"] .confirm-modal__title {
    color: var(--rame-text-primary, #F0F4FF);
}

[data-rame-theme="dark"] .confirm-modal__subtitle {
    color: var(--rame-text-secondary, #B6C2D8);
}

[data-rame-theme="dark"] .confirm-modal__body p {
    color: var(--rame-text-secondary, #B6C2D8);
}

[data-rame-theme="dark"] .confirm-modal__actions {
    background: var(--rame-bg-tertiary, #182140);
    border-top-color: var(--rame-border-medium, rgba(122, 139, 170, .32));
}

/* Danger Button (Descartar) */
[data-rame-theme="dark"] .confirm-btn--danger {
    background: transparent;
    color: var(--rame-error, #F2637B);
    border-color: var(--rame-error-border, #6B2F3B);
}

[data-rame-theme="dark"] .confirm-btn--danger:hover {
    background: var(--rame-error-light, #4A2029);
    border-color: #8A3B4B;
    color: var(--rame-error-text, #F794A5);
}

/* Ghost Button (Seguir editando) */
[data-rame-theme="dark"] .confirm-btn--ghost {
    background: var(--rame-bg-secondary, #131B30);
    color: var(--rame-text-primary, #F0F4FF);
    border-color: var(--rame-border-medium, rgba(122, 139, 170, .32));
}

[data-rame-theme="dark"] .confirm-btn--ghost:hover {
    background: var(--rame-bg-hover, #1C2749);
    border-color: var(--rame-border-dark, rgba(122, 139, 170, .48));
    color: #ffffff;
}

/* Primary Button (Guardar y salir) */
[data-rame-theme="dark"] .confirm-btn--primary {
    background: var(--rame-primary, #4E9BF5);
    color: var(--gyro-night, #0A0E1A);
    border-color: var(--rame-primary, #4E9BF5);
}

[data-rame-theme="dark"] .confirm-btn--primary:hover {
    background: var(--rame-primary-hover, #8FBEF9);
    border-color: var(--rame-primary-hover, #8FBEF9);
    color: var(--gyro-night, #0A0E1A);
}

[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);
}