/*
   ═══════════════════════════════════════════════════════════════════════════════
   DEVEXPRESS THEME OVERRIDES - SafeStation Dark Theme
   ═══════════════════════════════════════════════════════════════════════════════

   APPROACH: Override CSS VARIABLES, not properties.

   DevExpress uses a variable cascade:
   --dxds-* (Design System) → --dxbl-* (Component) → CSS Properties

   By overriding variables, we:
   ✓ Work WITH DevExpress, not against it
   ✓ Let validation, focus, hover states work natively
   ✓ Stay upgrade-safe (no !important, no deep selectors)
   ✓ Have full control over our design

   Reference: DevExpress.Blazor.Themes.Fluent/scss/ds-themes/components/

   Last Updated: 2026-01-08
   ═══════════════════════════════════════════════════════════════════════════════
*/

/* ═══════════════════════════════════════════════════════════════════════════════
   1. DESIGN SYSTEM OVERRIDES (Global)
   ═══════════════════════════════════════════════════════════════════════════════
   These affect ALL DevExpress components that use these design tokens.
*/
:root {
    /* ─── Typography ─── */
    --dxds-font-family-sans-serif: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ─── Border Radius (softer corners) ─── */
    --dxds-border-radius-20: 4px;
    --dxds-border-radius-40: 6px;
    --dxds-border-radius-60: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2. TEXT EDIT / INPUT COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════════
   Affects: DxTextBox, DxMaskedInput, DxMemo
*/
.dxbl-text-edit {
    /* Background */
    --dxbl-text-edit-bg: rgba(51, 65, 85, 0.4);
    --dxbl-text-edit-disabled-bg: rgba(51, 65, 85, 0.2);
    --dxbl-text-edit-readonly-bg: rgba(51, 65, 85, 0.25);

    /* Border */
    --dxbl-text-edit-border-color: rgba(148, 163, 184, 0.2);
    --dxbl-text-edit-border-hovered-color: rgba(148, 163, 184, 0.35);
    --dxbl-text-edit-border-active-color: rgba(59, 130, 246, 0.5);

    /* Text */
    --dxbl-text-edit-color: #ffffff;
    --dxbl-text-edit-disabled-color: rgba(148, 163, 184, 0.5);
    --dxbl-text-edit-placeholder-color: rgba(148, 163, 184, 0.5);

    /* Focus underline */
    --dxbl-text-edit-underline-color: rgba(148, 163, 184, 0.3);
    --dxbl-text-edit-underline-focused-color: rgba(59, 130, 246, 0.8);
    --dxbl-text-edit-underline-hovered-color: rgba(148, 163, 184, 0.5);

    /* Validation colors - DevExpress uses these when .invalid/.valid.modified classes are added */
    /* See: DevExpress.Blazor.Themes.Fluent/scss/ds-themes/components/text-edit/states.scss */
    --dxbl-text-edit-validation-invalid-color: #ef4444;
    --dxbl-text-edit-validation-valid-color: #22c55e;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3. BUTTONS
   ═══════════════════════════════════════════════════════════════════════════════
*/
.dxbl-btn {
    --dxbl-btn-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Primary button */
.dxbl-btn-primary {
    --dxbl-btn-bg: #3b82f6;
    --dxbl-btn-hover-bg: #2563eb;
    --dxbl-btn-active-bg: #1d4ed8;
    --dxbl-btn-color: #ffffff;
}

/* Secondary/Outline button */
.dxbl-btn-secondary {
    --dxbl-btn-bg: rgba(51, 65, 85, 0.4);
    --dxbl-btn-hover-bg: rgba(51, 65, 85, 0.6);
    --dxbl-btn-border-color: rgba(148, 163, 184, 0.3);
    --dxbl-btn-color: #e2e8f0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   4. GRID
   ═══════════════════════════════════════════════════════════════════════════════
   Reference: DevExpress.Blazor.Themes.Fluent/scss/ds-themes/components/grid/variables.scss
*/
.dxbl-grid {
    /* Typography */
    --dxbl-grid-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --dxbl-grid-header-font-weight: 600;

    /* Colors */
    --dxbl-grid-bg: transparent;
    --dxbl-grid-color: #e2e8f0;
    --dxbl-grid-header-bg: transparent;
    --dxbl-grid-header-color: rgba(148, 163, 184, 0.85);
    --dxbl-grid-hover-bg: rgba(59, 130, 246, 0.06);
    --dxbl-grid-hover-color: #e2e8f0;
    --dxbl-grid-selection-bg: rgba(59, 130, 246, 0.15);
    --dxbl-grid-selection-color: #ffffff;
    --dxbl-grid-focus-bg: rgba(59, 130, 246, 0.1);
    --dxbl-grid-focus-color: #ffffff;

    /* Borders */
    --dxbl-grid-border-color: rgba(148, 163, 184, 0.12);
    --dxbl-grid-border-width: 0;

    /* Edit form */
    --dxbl-grid-edit-row-bg: rgba(15, 23, 42, 0.6);
    --dxbl-grid-edit-row-color: #e2e8f0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   5. PAGER
   ═══════════════════════════════════════════════════════════════════════════════
   Reference: DevExpress.Blazor.Themes.Fluent/scss/ds-themes/components/pager/variables.scss
*/
.dxbl-pager {
    /* Typography */
    --dxbl-pager-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --dxbl-pager-color: rgba(148, 163, 184, 0.85);

    /* Container */
    --dxbl-pager-bg: transparent;
    --dxbl-pager-border-color: rgba(148, 163, 184, 0.12);

    /* Page buttons */
    --dxbl-pager-page-btn-bg: transparent;
    --dxbl-pager-page-btn-color: rgba(148, 163, 184, 0.85);
    --dxbl-pager-page-btn-border-color: transparent;
    --dxbl-pager-page-btn-hover-bg: rgba(148, 163, 184, 0.1);
    --dxbl-pager-page-btn-hover-color: #e2e8f0;

    /* Active page */
    --dxbl-pager-active-page-btn-bg: rgba(59, 130, 246, 0.15);
    --dxbl-pager-active-page-btn-color: #3b82f6;
    --dxbl-pager-active-page-btn-border-color: transparent;

    /* Navigation buttons */
    --dxbl-pager-btn-bg: transparent;
    --dxbl-pager-btn-color: rgba(148, 163, 184, 0.85);
    --dxbl-pager-btn-border-color: transparent;
    --dxbl-pager-btn-hover-bg: rgba(148, 163, 184, 0.1);
    --dxbl-pager-btn-hover-color: #e2e8f0;
    --dxbl-pager-btn-disabled-color: rgba(148, 163, 184, 0.25);
    --dxbl-pager-btn-disabled-bg: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   6. POPUP / DROPDOWN MENUS
   ═══════════════════════════════════════════════════════════════════════════════
*/
.dxbl-popup {
    --dxbl-popup-bg: rgba(30, 41, 59, 0.95);
    --dxbl-popup-border-color: rgba(148, 163, 184, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   7. VALIDATION MESSAGE STYLING
   ═══════════════════════════════════════════════════════════════════════════════
   Simple property overrides for validation message text (not complex components).
*/
.dxbl-validation-message {
    color: #ef4444;
    font-size: 0.8rem;
    font-family: 'Montserrat', sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   8. FORM LAYOUT GROUP - TRANSPARENT BACKGROUND
   ═══════════════════════════════════════════════════════════════════════════════
   Remove the default gray/shaded background from DxFormLayoutGroup headers.
*/

/* Form Layout Group - transparent background */
.dxbl-fl-g {
    --dxbl-fl-g-bg: transparent;
    --dxbl-fl-g-header-bg: transparent;
    background: transparent !important;
    background-color: transparent !important;
}

/* Group Header - transparent with subtle bottom border */
.dxbl-fl-g-h {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.25) !important;
    padding: 0.5rem 0 !important;
    margin-bottom: 0.75rem !important;
}

/* Group Header Caption Text */
.dxbl-fl-g-h span,
.dxbl-fl-g-cpt {
    color: rgba(148, 163, 184, 0.9) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    background: transparent !important;
}

/* Group Body - transparent */
.dxbl-fl-g-b {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0.5rem 0 !important;
}

/* Expanded/Collapsed states */
.dxbl-fl-g-ec,
.dxbl-fl-g.dxbl-fl-g-ec {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}