/* BFF-specific theme overrides — loaded after tv-theme.css. The shared post-theme layer (e-icons
   inheritance, scrollbars, brand primary family, data-theme dark fallback, sidebar/dialog z-index)
   moved to _content/TSO.TimeView.Shared.Components/tv-theme.css. */

/* =========================================================================
   AI Chat component CSS variables

   These names are kept (AiChat.razor.css alone references them ~86 times) but their values now
   resolve through the Tier-1 palette / Syncfusion theme variables instead of being a second
   hardcoded palette. That also removes the body[data-theme="dark"] duplicate below: data-theme is
   only ever "light" or "dark" (App.razor collapses high contrast onto one of the two), so the old
   branch left the high-contrast theme rendering light-theme greys.
   ========================================================================= */

:root {
    --color-bg-surface: var(--tv-surface);
    --color-bg-surface-alt: var(--tv-surface-alt);
    --color-border: var(--tv-color-border);
    --color-border-light: color-mix(in srgb, var(--tv-color-border) 50%, transparent);
    --color-text-primary: var(--color-sf-content-text-color, currentColor);
    --color-text-secondary: var(--tv-color-text-secondary);
    --color-bg-hover: var(--tv-color-hover);
    --color-primary: var(--tv-accent);
    --color-primary-dark: color-mix(in srgb, var(--tv-accent) 80%, black);
    --color-primary-light: color-mix(in srgb, var(--tv-accent) 10%, transparent);
    --color-code-bg: var(--tv-code-surface);
    --color-code-block-bg: var(--tv-code-block-surface);
    --color-code-block-text: var(--tv-code-block-text);
    --color-table-header-bg: color-mix(in srgb, currentColor 5%, transparent);
    --color-table-row-alt: color-mix(in srgb, currentColor 3%, transparent);
}

/* =========================================================================:
   Global Reusable Components - Theme Aware
   ============================================================================ */

/* Section Header - used throughout the application for consistent section titles */
.section-header {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px 0;
    border-bottom: 1px solid currentColor;
    padding-bottom: 8px;
}

/* High contrast mode support */
@media (forced-colors: active) {
    .section-header {
        color: CanvasText;
        border-bottom-color: CanvasText;
    }
}

/* =========================================================================
   EntityList - hide Syncfusion's built-in pager
   =========================================================================
   The grid uses a custom pager rendered in the TopBar (page input, prev/next
   buttons, page-size dropdown). The built-in .e-gridpager is redundant and
   must be hidden via global CSS — Blazor CSS isolation's ::deep does not
   reach into third-party component subtrees like SfGrid's rendered DOM.
   ========================================================================= */
.tv-entity-grid-wrapper .e-gridpager {
    display: none !important;
}

/* =========================================================================
   EntityList - group drop area
   =========================================================================
   Syncfusion renders .e-groupdroparea into the grid's own DOM subtree;
   Blazor scoped CSS cannot reach it, so styling lives here alongside the
   pager override above.
   ========================================================================= */
.tv-entity-grid-wrapper .e-groupdroparea {
    padding: var(--tv-space-2) var(--tv-space-3);
    font-size: var(--tv-text-body);
}