/* =============================================================================
   TCW Syncfusion Bridge (Plan 43-05)
   =============================================================================
   Purpose:
     Map Syncfusion Blazor component classes (.e-*) to TCW chassis + swatch
     tokens so every Syncfusion control rendered in TCW inherits the active
     tenant's --tcw-canvas / --tcw-accent-1 / --tcw-font-* automatically.

   Cascade contract (per 43-RESEARCH.md line 64):
     1. tcw-tokens.css        — chassis primitives + semantic tokens (locked)
     2. swatches/<slug>.css   — 6 swatch bundles declaring --tcw-canvas etc.
     3. fonts/<slug>.css      — 3 font systems declaring --tcw-font-*
     4. Syncfusion bootstrap5.css   — vendor theme (hard-coded #0d6efd etc.)
     5. syncfusion-bridge.css       — THIS FILE — overrides vendor selectors
     6. app.css               — page-level / component-level CSS

   IMPORTANT — implementation note:
     Syncfusion's Bootstrap5 theme v33 ships SCSS-compiled CSS with hard-coded
     hex values; --e-* runtime variables do NOT exist in this theme. A pure
     :root { --e-primary: var(--tcw-accent-1); } bridge would resolve to
     undefined and have zero effect. We therefore override Syncfusion's own
     class selectors (.e-btn.e-primary, .e-grid .e-headercell, ...) and route
     them through TCW tokens. !important is required only where the vendor
     selector chain out-specifies ours.

   Scope (verified by 43-05 reconnaissance — 17 Sf components used):
     SfButton, SfCard, SfCheckBox, SfComboBox, SfDateTimePicker, SfDialog,
     SfDropDownList, SfGrid, SfNumericTextBox, SfRichTextEditor, SfStepper,
     SfSwitch, SfTab, SfTextArea, SfTextBox, SfToast, SfUploader

   Adding new mappings:
     1. Identify the Syncfusion .e-* class chain for the new component (use
        DevTools on the rendered control).
     2. Map color/spacing/typography properties through var(--tcw-*) tokens.
     3. NEVER hard-code hex values; every value flows through tokens.
     4. Add a corresponding assertion in
        TotalConventionWorkshop.Tests/DesignTokens/SyncfusionBridgeTests.cs.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Foundation — apply TCW typography + canvas to every Syncfusion control wrapper.
   `.e-control` is the root class every Sf component carries.
   ----------------------------------------------------------------------------- */
.e-control,
.e-control-wrapper {
    font-family: var(--tcw-font-body);
    font-size: var(--tcw-font-size-base);
    color: var(--tcw-text-primary, inherit);
}

/* -----------------------------------------------------------------------------
   SfButton — .e-btn variants (primary / success / warning / danger / outline).
   The primary variant is the most common surface for accent-1 expression.
   ----------------------------------------------------------------------------- */
.e-btn,
.e-css.e-btn {
    font-family: var(--tcw-font-body);
    border-radius: var(--tcw-radius-subtle);
}

.e-btn.e-primary,
.e-css.e-btn.e-primary {
    background-color: var(--tcw-accent-1);
    border-color: var(--tcw-accent-1);
    color: var(--tcw-text-on-accent);
}

.e-btn.e-primary:hover,
.e-btn.e-primary:focus,
.e-css.e-btn.e-primary:hover,
.e-css.e-btn.e-primary:focus {
    background-color: var(--tcw-accent-2);
    border-color: var(--tcw-accent-2);
    color: var(--tcw-text-on-accent);
}

.e-btn.e-success,
.e-css.e-btn.e-success {
    background-color: var(--tcw-status-confirmed);
    border-color: var(--tcw-status-confirmed);
    color: var(--tcw-text-on-accent);
}

.e-btn.e-warning,
.e-css.e-btn.e-warning {
    background-color: var(--tcw-status-tickets-low);
    border-color: var(--tcw-status-tickets-low);
    color: var(--tcw-text-on-accent);
}

.e-btn.e-danger,
.e-css.e-btn.e-danger {
    background-color: var(--tcw-status-sold-out);
    border-color: var(--tcw-status-sold-out);
    color: var(--tcw-text-on-accent);
}

.e-btn.e-outline.e-primary,
.e-css.e-btn.e-outline.e-primary {
    /* 43-08 R3: foreground text uses text-primary (WCAG-validated against canvas
       on every swatch); border still carries the accent. */
    color: var(--tcw-text-primary, inherit);
    border-color: var(--tcw-accent-1);
    background-color: transparent;
}

/* -----------------------------------------------------------------------------
   SfCard — surface element, maps to riser layer.
   ----------------------------------------------------------------------------- */
.e-card {
    background-color: var(--tcw-riser);
    color: var(--tcw-text-primary, inherit);
    border-radius: var(--tcw-radius-comfortable);
    font-family: var(--tcw-font-body);
}

/* -----------------------------------------------------------------------------
   SfTextBox / SfNumericTextBox / SfTextArea / SfDropDownList / SfComboBox /
   SfDateTimePicker — input families share the .e-input-group wrapper.
   ----------------------------------------------------------------------------- */
.e-input-group,
.e-float-input,
.e-input-group.e-control-wrapper {
    background-color: var(--tcw-spotlight);
    border-radius: var(--tcw-radius-subtle);
    font-family: var(--tcw-font-body);
}

.e-input-group input.e-input,
.e-float-input input,
.e-input-group.e-control-wrapper input.e-input {
    color: var(--tcw-text-primary, inherit);
    font-family: var(--tcw-font-body);
    background: transparent;
}

.e-input-group:not(.e-error).e-input-focus,
.e-float-input.e-input-focus {
    border-color: var(--tcw-accent-1);
}

.e-float-input label.e-float-text,
.e-input-group label.e-float-text {
    color: var(--tcw-text-secondary, inherit);
}

/* -----------------------------------------------------------------------------
   SfGrid — data grid surface + accent on headers / selection.
   ----------------------------------------------------------------------------- */
.e-grid {
    background-color: var(--tcw-canvas);
    color: var(--tcw-text-primary, inherit);
    font-family: var(--tcw-font-body);
    border-radius: var(--tcw-radius-subtle);
}

.e-grid .e-gridheader,
.e-grid .e-headercell {
    background-color: var(--tcw-riser);
    color: var(--tcw-text-primary, inherit);
    font-family: var(--tcw-font-body);
}

.e-grid .e-row {
    background-color: var(--tcw-canvas);
}

.e-grid .e-row.e-altrow {
    background-color: var(--tcw-riser);
}

.e-grid .e-row.e-rowselected,
.e-grid .e-row.e-rowselected .e-rowcell {
    background-color: var(--tcw-accent-1);
    color: var(--tcw-text-on-accent);
}

.e-grid .e-toolbar {
    background-color: var(--tcw-riser);
}

/* -----------------------------------------------------------------------------
   SfTab — tab navigation; active tab indicator is the swatch accent.
   ----------------------------------------------------------------------------- */
.e-tab .e-tab-header {
    background-color: var(--tcw-riser);
    font-family: var(--tcw-font-body);
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    color: var(--tcw-text-secondary, inherit);
}

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    /* 43-08 R3: tab text uses text-primary; active state is signaled by the
       accent-colored indicator bar (.e-indicator) below. */
    color: var(--tcw-text-primary, inherit);
    font-weight: 600;
}

.e-tab .e-tab-header .e-indicator {
    background-color: var(--tcw-accent-1);
}

.e-tab .e-content {
    background-color: var(--tcw-canvas);
    color: var(--tcw-text-primary, inherit);
}

/* -----------------------------------------------------------------------------
   SfDialog — modal surface.
   ----------------------------------------------------------------------------- */
.e-dialog {
    background-color: var(--tcw-riser);
    color: var(--tcw-text-primary, inherit);
    border-radius: var(--tcw-radius-comfortable);
    font-family: var(--tcw-font-body);
}

.e-dialog .e-dlg-header,
.e-dialog .e-dlg-header-content {
    background-color: var(--tcw-riser);
    color: var(--tcw-text-primary, inherit);
    font-family: var(--tcw-font-display);
}

.e-dialog .e-footer-content {
    background-color: var(--tcw-riser);
}

.e-dlg-overlay {
    background-color: rgba(0, 0, 0, 0.6);
}

/* -----------------------------------------------------------------------------
   SfCheckBox / SfSwitch — selection controls; checked state uses accent-1.
   ----------------------------------------------------------------------------- */
.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--tcw-accent-1);
    border-color: var(--tcw-accent-1);
    color: var(--tcw-text-on-accent);
}

.e-switch-wrapper .e-switch-inner.e-switch-active,
.e-css.e-switch-wrapper .e-switch-inner.e-switch-active {
    background-color: var(--tcw-accent-1);
    border-color: var(--tcw-accent-1);
}

.e-switch-wrapper .e-switch-on,
.e-css.e-switch-wrapper .e-switch-on {
    color: var(--tcw-text-on-accent);
}

/* -----------------------------------------------------------------------------
   SfStepper — multi-step progress; current step uses accent-1.
   ----------------------------------------------------------------------------- */
.e-stepper .e-step-container .e-step.e-step-active .e-indicator,
.e-stepper .e-step-container .e-step.e-step-active .e-step-label-container {
    /* 43-08 R3: label text uses text-primary; the indicator circle below
       carries the accent fill. */
    color: var(--tcw-text-primary, inherit);
    font-weight: 600;
}

.e-stepper .e-step-container .e-step.e-step-active .e-indicator {
    background-color: var(--tcw-accent-1);
    border-color: var(--tcw-accent-1);
    color: var(--tcw-text-on-accent);
}

/* -----------------------------------------------------------------------------
   SfToast — transient notifications; success/warning/danger map to status tokens.
   ----------------------------------------------------------------------------- */
.e-toast {
    background-color: var(--tcw-riser);
    color: var(--tcw-text-primary, inherit);
    border-radius: var(--tcw-radius-subtle);
    font-family: var(--tcw-font-body);
}

.e-toast.e-toast-success {
    background-color: var(--tcw-status-confirmed);
    color: var(--tcw-text-on-accent);
}

.e-toast.e-toast-warning {
    background-color: var(--tcw-status-tickets-low);
    color: var(--tcw-text-on-accent);
}

.e-toast.e-toast-danger {
    background-color: var(--tcw-status-sold-out);
    color: var(--tcw-text-on-accent);
}

/* -----------------------------------------------------------------------------
   SfRichTextEditor — editor toolbar + content area.
   ----------------------------------------------------------------------------- */
.e-richtexteditor {
    background-color: var(--tcw-canvas);
    color: var(--tcw-text-primary, inherit);
    border-radius: var(--tcw-radius-subtle);
    font-family: var(--tcw-font-body);
}

.e-richtexteditor .e-rte-toolbar,
.e-richtexteditor .e-toolbar {
    background-color: var(--tcw-riser);
}

.e-richtexteditor .e-rte-content,
.e-richtexteditor .e-content {
    background-color: var(--tcw-canvas);
    color: var(--tcw-text-primary, inherit);
    font-family: var(--tcw-font-body);
}

/* -----------------------------------------------------------------------------
   SfUploader — file upload drop zone + action buttons.
   ----------------------------------------------------------------------------- */
.e-upload {
    background-color: var(--tcw-riser);
    color: var(--tcw-text-primary, inherit);
    border-radius: var(--tcw-radius-subtle);
    font-family: var(--tcw-font-body);
}

.e-upload .e-upload-actions .e-btn.e-primary {
    background-color: var(--tcw-accent-1);
    border-color: var(--tcw-accent-1);
    color: var(--tcw-text-on-accent);
}

/* -----------------------------------------------------------------------------
   SfDropDownList / SfComboBox popup list — selected option uses accent-1.
   ----------------------------------------------------------------------------- */
.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-hover {
    background-color: var(--tcw-spotlight);
    color: var(--tcw-text-primary, inherit);
}

.e-dropdownbase .e-list-item.e-active {
    /* 43-08 R3: active list-item text uses text-primary on the spotlight
       surface set by the rule above; bold + spotlight bg signals selection. */
    color: var(--tcw-text-primary, inherit);
    font-weight: 600;
}

.e-popup.e-ddl,
.e-popup.e-combobox {
    background-color: var(--tcw-riser);
    color: var(--tcw-text-primary, inherit);
    border-radius: var(--tcw-radius-subtle);
    font-family: var(--tcw-font-body);
}

/* -----------------------------------------------------------------------------
   F44: SfMenu user dropdown overrides (plan 44-02)
   First use of SfMenu in TCW codebase. The dropdown portal renders outside the
   component shadow, so these rules must live in the global bridge CSS file.
   ----------------------------------------------------------------------------- */
.e-menu-wrapper {
    background-color: var(--tcw-riser) !important;
    border: 1px solid var(--tcw-border-default) !important;
    border-radius: var(--tcw-radius-subtle) !important;
    box-shadow: 0 4px 12px var(--tcw-border-default) !important;
}

.e-menu-wrapper .e-menu-item {
    font-family: var(--tcw-font-body) !important;
    font-size: var(--tcw-font-size-sm) !important;
    color: var(--tcw-text-primary) !important;
    padding: var(--tcw-space-2) var(--tcw-space-4) !important;
}

.e-menu-wrapper .e-menu-item:hover,
.e-menu-wrapper .e-menu-item.e-focused {
    background-color: var(--tcw-spotlight) !important;
    color: var(--tcw-text-primary) !important;
}

/* -----------------------------------------------------------------------------
   F44: SfBreadcrumb overrides (future use — TcwBreadcrumb uses native HTML).
   Available for any future context where SfBreadcrumb is preferred.
   ----------------------------------------------------------------------------- */
.e-breadcrumb .e-breadcrumb-item {
    font-family: var(--tcw-font-mono) !important;
    font-size: var(--tcw-font-size-xs) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.e-breadcrumb .e-breadcrumb-text {
    color: var(--tcw-text-secondary) !important;
}

.e-breadcrumb .e-breadcrumb-text:hover {
    /* R3: hover text uses text-primary (WCAG-validated on light canvas swatches).
       Underline is the hover signal; accent-1 as foreground on light canvas fails contrast. */
    color: var(--tcw-text-primary) !important;
}

.e-breadcrumb .e-breadcrumb-separator {
    color: var(--tcw-text-secondary) !important;
    font-family: var(--tcw-font-mono) !important;
}

/* -----------------------------------------------------------------------------
   F44: SfDropDownList convention selector overrides (plan 44-04)
   The dropdown popup renders in a global portal — must target globally here.
   ----------------------------------------------------------------------------- */
.tcw-convention-selector-card .e-dropdownlist {
    font-family: var(--tcw-font-mono) !important;
    font-size: var(--tcw-font-size-sm) !important;
    background-color: var(--tcw-riser) !important;
    color: var(--tcw-text-primary) !important;
    border-color: var(--tcw-border-default) !important;
}

.tcw-convention-selector-card .e-popup {
    background-color: var(--tcw-riser) !important;
    border: 1px solid var(--tcw-border-default) !important;
    border-radius: var(--tcw-radius-subtle) !important;
}

.tcw-convention-selector-card .e-list-item {
    color: var(--tcw-text-primary) !important;
}

.tcw-convention-selector-card .e-list-item.e-hover,
.tcw-convention-selector-card .e-list-item.e-active {
    background-color: var(--tcw-spotlight) !important;
    color: var(--tcw-text-primary) !important;
}

/* -----------------------------------------------------------------------------
   F44: SfSidebar admin sidebar overrides (plan 44-04)
   ----------------------------------------------------------------------------- */
.e-sidebar.tcw-admin-sidebar {
    background-color: var(--tcw-riser) !important;
    border-right: 1px solid var(--tcw-border-default) !important;
}

/* -----------------------------------------------------------------------------
   47-04: SfQRCodeGenerator container overrides (Confirmation.razor QR card)
   First use of SfQRCodeGenerator in TCW. The exact Syncfusion-generated root
   class for the barcode/QR family was not confirmed via a live DOM render in
   this offline reconnaissance pass (grep of the shipped Syncfusion.Blazor.
   BarcodeGenerator 32.2.9 assembly + sf-barcode.min.js turned up no literal
   e-*/sf-* class string - the root class is likely built dynamically from the
   module name at runtime). Per the "never guess a selector" rule, the Riser
   background + comfortable radius required by 47-04 are applied instead to
   the AUTHORED wrapper (.tcw-qr-card in Confirmation.razor.css), which this
   file's author fully controls and has verified. If a future pass confirms
   the vendor's generated root class (e.g. via browser DevTools), add a
   targeted override here rather than guessing now.

   EXCEPTION (documented per 43-05's !important-exception precedent): the QR
   module's own dot/background rendering colors are NOT CSS-settable - they
   are set via the C# ForeColor/BackgroundColor component parameters on
   <SfQRCodeGenerator> in Confirmation.razor, because the component renders
   its matrix to a canvas/SVG surface that has no CSS custom-property hook.
   This is the one sanctioned literal-hex spot in 47-04's scope; see the
   inline comment beside <SfQRCodeGenerator> in Confirmation.razor.
   ----------------------------------------------------------------------------- */
.tcw-qr-card .e-control-wrapper {
    background-color: transparent;
}