/**
 * AG Grid Custom Styles
 * 
 * Custom styles for the AG Grid implementation using the ui-grid custom element.
 * These styles should be concatenated into the main CSS file for production.
 */
.ag-horizontal-left-spacer,
.ag-horizontal-right-spacer {
    overflow-x: auto;
}

/* AG Grid cell styling */
/*div[role='gridcell'] {*/
/*    line-height: 1.4;*/
/*    max-width: fit-content; !* if you comment this out it breaks the popout cell editor *!*/
/*}*/

/** Global rules like this should never be used.  This is not maintainable.*/
/* override this max width when displaying the cell editor */
/*div[role='gridcell']:has(.ag-cell-edit-wrapper) {*/
/*    max-width: fit-content;*/
/*}*/

/* Override line-height for checkbox cells to ensure proper vertical centering */
div[role='gridcell']:has(.ag-checkbox-with-label) {
    line-height: normal;
}

/* ui-grid custom element - must be block-level for proper AG Grid initialization */
/* Custom elements default to display: inline, which causes layout and initialization issues */
/* Setting display: block ensures proper block formatting context and reliable grid rendering */
ui-grid {
    display: block;
    width: 100%;
    height: 100%;
    /*overflow-y: visible !important;*/
}


/* App wide focus rule in css/v6-skin.css
   ( input:focus { outline: 2px solid var(--iq-color-blue-primary) } ) also bleeds onto
   AG Grid's own built in inputs, the filter inputs for every filter type (date-only,
   number, text, and the set/multi mini-filter search), floating filters, and cell
   editors.*/
.ag-root-wrapper .ag-input-field-input:focus,
.ag-popup .ag-input-field-input:focus {
    outline: none;
}

/* Radio Group Renderer - Prevent stretching when column width increases */
.ag-cell .ag-radio-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100%;
}

.ag-cell .ag-radio-group {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: max-content !important;   /* shrink-wrap */
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

.ag-cell .ag-radio-group > label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    width: auto !important;          /* bloque les styles globaux */
    justify-content: flex-start !important;
}

/* Checkbox With Label Renderer - Ensure vertical centering */
.ag-cell .ag-cell-wrapper .ag-checkbox-with-label,
.ag-cell .ag-cell-value .ag-checkbox-with-label,
div[role='gridcell'] .ag-checkbox-with-label {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure cell wrapper also centers content */
.ag-cell-wrapper:has(.ag-checkbox-with-label) {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* ============================================
   Containment — app form styles must not size AG Grid toggle inputs
   ============================================
   AG Grid renders a checkbox/radio as a styled WRAPPER (draws the visible box +
   tick) with a real <input appearance:none> laid OVER it purely to capture clicks.
   Because appearance:none strips the input's intrinsic size, its hit-area comes
   entirely from CSS width/height. The app's global, element-selector form rules in
   css/v6-skin.css leak into the grid and win over AG Grid's class-based theme rules:
       input[type="checkbox"]            { width: 14px }            (works by accident)
       .editForm input[type="checkbox"]  { width: auto; height: 2rem }
   Inside any `.editForm` panel the input then collapses to ~2px, so clicks land
   next to (not on) the visible box and the checkbox can't be ticked/unticked.

   Re-assert AG Grid's intended invisible-overlay geometry for its OWN toggle inputs.
   Matched via the input's two stable AG classes (.ag-input-field-input +
   .ag-checkbox-input / .ag-radio-button-input) inside their wrapper — specificity
   (0,3,1), which beats `.editForm input[type="checkbox"]` (0,2,1) WITHOUT relying on
   stylesheet order, the (dynamically-named) theme class, or !important. Applies to
   every grid and every context: cells, header select-all, set-filter lists, tool
   panel, popups. New grids/columns are covered automatically — nothing per-page. */
.ag-checkbox-input-wrapper input.ag-input-field-input.ag-checkbox-input,
.ag-radio-button-input-wrapper input.ag-input-field-input.ag-radio-button-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

/* Locked/disabled checkboxes (e.g. LOCK_WHEN_CHECKED) must not show the pointer
   cursor — the rule above sets it unconditionally on the transparent overlay
   input, so reset it here for the disabled state. */
.ag-checkbox-input-wrapper input.ag-input-field-input.ag-checkbox-input:disabled,
.ag-radio-button-input-wrapper input.ag-input-field-input.ag-radio-button-input:disabled {
    cursor: not-allowed;
}

/* ============================================
   Dirty State / Modified Cell Styling
   Using IQI brand colors - TEST/TEMPORARY - to be replaced with final design system colors
   ============================================ */

/* Modified cell - subtle background with accent border */
.ag-cell.ag-cell-modified {
    background-color: #EFF6FF!important;
    border-left: 3px solid #3B82F6 !important;
    /*position: relative;*/
}

/* Optional: Add a subtle indicator dot in the top-right corner */
.ag-cell.ag-cell-modified::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    background-color: #3B82F6;
    border-radius: 50%;
    pointer-events: none;
}

/* Row with modified cells - subtle row background */
.ag-row.ag-row-has-modified {
    background-color: var(--iq-color-grey-10, #f4f5f7) !important;
}

/* Hover state for modified cells */
/*.ag-cell.ag-cell-modified:hover {*/
/*    background-color: #3B82F6 !important;*/
/*}*/

/* Flash override: when a modified cell is mid-flash, let AG Grid's flash
   background win over the persistent dirty background. Existing rule uses
   !important - so adding important here. The Dirty state is going to change so keeping important for now.
   Specificity decides — matching .ag-cell-modified here
   raises this rule to (0,3,0) which beats the persistent (0,2,0). */
.ag-cell.ag-cell-modified.ag-cell-data-changed {
    background-color: var(--ag-value-change-value-highlight-background-color) !important;
}

.ag-cell.ag-cell-modified.ag-cell-data-changed-animation {
    background-color: #EFF6FF !important; /** Used #EFF6FF instead of ag's default background color to avoid white background delay, can change this if required **/
}

/* ============================================
   Text Alignment Classes
   Support for column-level text alignment
   Works for both text content and flexbox renderers (radio buttons, checkboxes, etc.)
   Applies to both cells and headers
   ============================================ */

/* Text alignment for text content (cells) */
.ag-cell.ag-cell-align-left,
.ag-cell.ag-cell-align-start {
    text-align: left !important;
}

.ag-cell.ag-cell-align-center {
    text-align: center !important;
}

.ag-cell.ag-cell-align-right,
.ag-cell.ag-cell-align-end {
    text-align: right !important;
}

/* Text alignment for headers */
.ag-header-cell.ag-cell-align-left,
.ag-header-cell.ag-cell-align-start {
    text-align: left !important;
}

.ag-header-cell.ag-cell-align-center {
    text-align: center !important;
}

.ag-header-cell.ag-cell-align-right,
.ag-header-cell.ag-cell-align-end {
    text-align: right !important;
}

/* Flexbox alignment for cell wrapper (AG Grid's default structure) */
.ag-cell.ag-cell-align-left .ag-cell-wrapper,
.ag-cell.ag-cell-align-start .ag-cell-wrapper {
    justify-content: flex-start !important;
}

.ag-cell.ag-cell-align-center .ag-cell-wrapper {
    justify-content: center !important;
}

.ag-cell.ag-cell-align-right .ag-cell-wrapper,
.ag-cell.ag-cell-align-end .ag-cell-wrapper {
    justify-content: flex-end !important;
}

/* Flexbox alignment for header wrapper */
.ag-header-cell.ag-cell-align-left .ag-header-cell-label,
.ag-header-cell.ag-cell-align-start .ag-header-cell-label {
    justify-content: flex-start !important;
}

.ag-header-cell.ag-cell-align-center .ag-header-cell-label {
    justify-content: center !important;
}

.ag-header-cell.ag-cell-align-right .ag-header-cell-label,
.ag-header-cell.ag-cell-align-end .ag-header-cell-label {
    justify-content: flex-end !important;
}

/* Override alignment for radio buttons - respect their existing flex structure */
.ag-cell.ag-cell-align-center .ag-radio-cell {
    justify-content: center !important;
}

.ag-cell.ag-cell-align-right .ag-radio-cell,
.ag-cell.ag-cell-align-end .ag-radio-cell {
    justify-content: flex-end !important;
}

.ag-cell.ag-cell-align-center .ag-radio-group {
    justify-content: center !important;
}

.ag-cell.ag-cell-align-right .ag-radio-group,
.ag-cell.ag-cell-align-end .ag-radio-group {
    justify-content: flex-end !important;
}

/* Override alignment for checkboxes with label - respect their existing flex structure */
.ag-cell.ag-cell-align-center .ag-checkbox-with-label {
    justify-content: center !important;
}

.ag-cell.ag-cell-align-right .ag-checkbox-with-label,
.ag-cell.ag-cell-align-end .ag-checkbox-with-label {
    justify-content: flex-end !important;
}
/* ============================================
   End of AG Grid Custom Styles
   ============================================ */

/*
   Fill Column Popup
   All -iq- classes use AG Grid CSS variables with safe fallback values so the
   popup follows theme changes automatically.
*/

.-iq-header-fill-trigger {
    display: flex;
    align-self: center;
}

/* Positioning shell */
.-iq-fill-column-popup {
    position: absolute;
    z-index: 10000;
    min-width: 240px;
    display: none;
    overflow: visible;
    /* Single typography source for the whole popup. Mounted on <body>, so without
       this every `font: inherit` child would pull the app's body font instead of the
       grid theme. Children inherit from here, matching the grid that opened the popup. */
    font-family: var(--ag-font-family, sans-serif);
    font-size: var(--ag-font-size, 13px);
}


.-iq-fill-column-title {
    /* font-size inherited from .-iq-fill-column-popup (grid theme) — single source */
    color: var(--ag-foreground-color, #333);
    padding: var(--ag-widget-container-vertical-padding, 12px)
    var(--ag-widget-container-horizontal-padding, 12px)
    0;
}

.-iq-fill-column-input-slot {
    padding: var(--ag-widget-container-vertical-padding, 8px)
    var(--ag-widget-container-horizontal-padding, 12px);
    overflow: visible;
}

/* Adds horizontal padding and gap; ag-filter-apply-panel provides flex + justify-end */
.-iq-fill-column-apply-panel {
    gap: var(--ag-widget-horizontal-spacing, 8px);
    overflow: visible; /* allow focus ring to bleed outside */
    padding-left: var(--ag-widget-container-horizontal-padding, 12px);
    padding-right: var(--ag-widget-container-horizontal-padding, 12px);
    padding-bottom: var(--ag-widget-container-vertical-padding, 10px);
}

/* Cancel / Apply carry AG Grid's utility classes (ag-button ag-standard-button). Because the popup
   now copies the grid's FULL theme class set (see openPopupForColumn), the theme styles .ag-standard-button
   itself — base look + hover/active/disabled/focus, all from --ag-button-* tokens. So -iq-fill-btn is purely
   ADDITIVE: it only layers the design deltas (bold labels + more compact padding than the theme's default).
   Scoped under .-iq-fill-column-popup so its (0,2,0) specificity beats the theme's :where()-scoped rule (0,1,0). */
.-iq-fill-column-popup .-iq-fill-btn {
    font-weight: 600;
    padding: calc(var(--ag-spacing, 8px) * 0.5) calc(var(--ag-spacing, 8px) * 1.5);
}

.-iq-fill-column-divider {
    border-top: var(--ag-borders-critical, solid 1px) var(--ag-border-color, #e5e7eb);
}

.-iq-fill-column-clear-btn {
    display: flex;
    align-items: center;
    gap: var(--ag-widget-horizontal-spacing, 6px);
    width: 100%;
    padding: var(--ag-widget-container-vertical-padding, 10px)
    var(--ag-widget-container-horizontal-padding, 12px);
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--ag-foreground-color, #333);
    text-align: left;
}

/* hover + focus share the same pale fill */
.-iq-fill-column-clear-btn:hover,
.-iq-fill-column-clear-btn:focus-visible {
    background-color: var(--ag-row-hover-color, rgba(33, 150, 243, 0.12));
}

/* Focus ring: IDENTICAL to the Cancel/Apply buttons — same token, same outer ring (not inset)
   so the focus design is consistent across all the popup's controls. */
.-iq-fill-column-clear-btn:focus-visible {
    outline: none;
    box-shadow: var(--ag-focus-shadow, 0 0 0 3px color-mix(in srgb, transparent, var(--ag-accent-color, #2196f3) 50%));
}

/* Shared input field — matches ag-picker-field-wrapper look */
.-iq-fill-input {
    width: 100%;
    min-height: var(--ag-list-item-height, 28px);
    padding: calc(var(--ag-grid-size, 8px) * 0.5) var(--ag-grid-size, 8px);
    border: var(--ag-borders, solid 1px) var(--ag-input-border-color, #ccc);
    border-radius: var(--ag-border-radius, 3px);
    background-color: var(--ag-background-color, #fff);
    color: var(--ag-foreground-color, #333);
    font: inherit;
    box-sizing: border-box;
}

.-iq-fill-input:focus {
    outline: none;
    border-color: var(--ag-input-focus-border-color, #2196f3);
    box-shadow: var(--ag-focus-shadow);
}

.-iq-fill-input:disabled {
    color: var(--ag-disabled-foreground-color);
    background-color: var(--ag-input-disabled-background-color);
    border-color: var(--ag-input-disabled-border-color);
    cursor: not-allowed;
}

/* Loading placeholder shown before async options resolve */
.-iq-fill-async-loading {
    color: var(--ag-disabled-foreground-color, #666);
}

/* Container for a VirtualSelect host element */
.-iq-fill-vs-host {
    width: 100%;
}

/* Radio group */
.-iq-fill-radio-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--ag-widget-horizontal-spacing, 6px);
    padding: calc(var(--ag-grid-size, 8px) * 0.5) 0;
}

.-iq-fill-radio-row {
    display: flex;
    gap: calc(var(--ag-grid-size, 8px) * 0.75);
    cursor: pointer;
    user-select: none;
}

/* Checkbox-with-label input */
.-iq-fill-checkbox-label {
    display: flex;
    gap: calc(var(--ag-grid-size, 8px) * 0.75);
    padding: calc(var(--ag-grid-size, 8px) * 0.5) 0;
    cursor: pointer;
    user-select: none;
}

/* Native (boolean) checkbox input — no in-cell label, unlike -iq-fill-checkbox-label above */
.-iq-fill-native-checkbox {
    display: flex;
    padding: calc(var(--ag-grid-size, 8px) * 0.5) 0;
    cursor: pointer;
    user-select: none;
}

/*  Virtual Select theme overrides */
/* Scoped to the fill popup input slot so they don't have a knock on effect onto other VS instances */

.-iq-fill-column-input-slot .vscomp-wrapper {
    font-family: var(--ag-font-family, serif), serif;
    font-size: var(--ag-font-size, 14px);
    color: var(--ag-foreground-color, #333);
}

.-iq-fill-column-input-slot .vscomp-toggle-button {
    background-color: var(--ag-background-color, #fff);
    border: var(--ag-borders, solid 1px) var(--ag-input-border-color, #ddd);
    border-radius: var(--ag-border-radius, 3px);
    color: var(--ag-foreground-color, #333);
}

.-iq-fill-column-input-slot .vscomp-wrapper.focused .vscomp-toggle-button,
.-iq-fill-column-input-slot .vscomp-wrapper:focus .vscomp-toggle-button,
.-iq-fill-column-input-slot .vscomp-wrapper.open .vscomp-toggle-button {
    border-color: var(--ag-input-focus-border-color, #2196f3);
    box-shadow: var(--ag-focus-shadow);
}

.-iq-fill-column-input-slot .vscomp-arrow::after {
    border-bottom-color: var(--ag-secondary-foreground-color, #333);
    border-right-color: var(--ag-secondary-foreground-color, #333);
}

.-iq-fill-column-input-slot .vscomp-dropbox {
    background-color: var(--ag-background-color, #fff);
    border: var(--ag-borders, solid 1px) var(--ag-border-color, #ddd);
    border-radius: var(--ag-border-radius, 3px);
    box-shadow: var(--ag-card-shadow, 0 1px 4px 1px rgba(186, 191, 199, 0.4));
}

.-iq-fill-column-input-slot .vscomp-option {
    height: var(--ag-list-item-height, 36px);
    color: var(--ag-foreground-color, #333);
}

.-iq-fill-column-input-slot .vscomp-option.selected {
    background-color: var(--ag-selected-row-background-color, #eee);
}

.-iq-fill-column-input-slot .vscomp-option.focused {
    background-color: var(--ag-row-hover-color, #ccc);
}

.-iq-fill-column-input-slot .vscomp-search-container {
    border-bottom-color: var(--ag-border-color, #ddd);
}

.-iq-fill-column-input-slot .vscomp-search-input {
    background-color: var(--ag-background-color, #fff);
    color: var(--ag-foreground-color, #333);
    /* Follow the popup's single typography source (grid theme) instead of the
       VirtualSelect default - covers the typed text. */
    font: inherit;
}

/* Placeholder is styled separately by VirtualSelect; align it to the same source. */
.-iq-fill-column-input-slot .vscomp-search-input::placeholder {
    font: inherit;
}

.-iq-fill-column-input-slot .vscomp-clear-icon::before,
.-iq-fill-column-input-slot .vscomp-clear-icon::after {
    background-color: var(--ag-secondary-foreground-color, #999);
}

.-iq-fill-column-input-slot .vscomp-value-tag {
    background-color: var(--ag-chip-background-color);
    border-color: var(--ag-chip-border-color);
    color: var(--ag-foreground-color);
}

.-iq-fill-column-input-slot .checkbox-icon::after {
    border-color: var(--ag-checkbox-unchecked-color, #888);
}

/* Checked state for both VS checkboxes in the fill popup */
.-iq-fill-column-input-slot .vscomp-wrapper .checkbox-icon.checked::after,
.-iq-fill-column-input-slot .vscomp-wrapper.multiple .vscomp-option.selected .checkbox-icon::after {
    transform: none;
    width: 100%;
    height: 100%;
    border: 1px solid var(--ag-checkbox-checked-color, #2196f3);
    background-color: var(--ag-checkbox-checked-color, #2196f3);
    border-radius: var(--ag-checkbox-border-radius, 2px);
    content: "\2713"; /* U+2713 check mark, renders in any font */
    color: var(--ag-background-color, #333);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    box-sizing: border-box;
    gap: calc(var(--ag-grid-size, 8px) * 0.75);
    padding: calc(var(--ag-grid-size, 8px) * 0.5) 0;
}

/* Row-disabled cells (added by custom JS like removeAssocDisableRadio.js):
 * block pointer events on the interactive children only, NOT on the cell
 * itself — the cell must remain hoverable so AG Grid's tooltip can fire.
 * The `!important` on cursor is needed because some renderers (e.g.
 * radioGroupRenderer) set `cursor: pointer` as an inline style on their
 * labels, which would otherwise win on specificity. */
.iq-cell-row-disabled > * {
    pointer-events: none;
}

.iq-cell-row-disabled,
.iq-cell-row-disabled * {
    cursor: not-allowed !important;
}
.ag-popup .ag-popup-child {
    z-index: 10000;
}

/* TODO:: Remove these changes once select dropdown use cases are finalised -------
 * Editable single-select cue
 *
 * Native Rich Select draws nothing in the closed cell, so an editable select
 * looks the same as read-only text. The .iq-select-editable class (added via
 * createNativeSelectCellEditorConfig's showEditableIndicator option) styles
 * the resting cell as a select input — a bordered box with a dropdown chevron
 * — so the column visibly reads as editable. The border turns blue while the
 * cell is focused, like a focused input. Presentational only; the editor and
 * popover behaviour are unchanged.
 * ------------------------------------------------------------------------- */

/* Chevron drawn as a background image (not ::after) so it doesn't collide
   with the modified-cell dot, which uses ::after. */
.ag-cell.iq-select-editable {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* The bordered box, inset from the cell edges so it reads as a control
   sitting inside the cell rather than a full-bleed border. */
.ag-cell.iq-select-editable::before {
    content: '';
    position: absolute;
    top: 4px;
    right: 6px;
    bottom: 4px;
    left: 6px;
    border: var(--iq-border-width-100, 1px) solid var(--iq-border-color-default, #c4c4c4);
    border-radius: var(--iq-border-radius-sm, 4px);
    pointer-events: none;
}

/* Focused cell — blue border, mirroring a focused input. */
.ag-cell.iq-select-editable.ag-cell-focus::before {
    border-color: var(--iq-color-blue-primary, #2563eb);
}

/* Keep the label text clear of the chevron. */
.ag-cell.iq-select-editable .ag-cell-value,
.ag-cell.iq-select-editable .ag-cell-wrapper {
    padding-right: 22px;
}

/* Shared date + time input widget (utils/dateTimeInput.js) — used by the datetime
   filter and the Fill Column popup. */
.iq-datetime-input {
    display: flex;
    align-items: center;
    gap: var(--iq-space-100, 8px);
    width: 100%;
}

.iq-datetime-input__date {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

.iq-datetime-input__time {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}

.iq-datetime-input__date:focus,
.iq-datetime-input__time:focus {
    outline: none;
    border-color: var(--ag-input-focus-border-color, #2196f3);
    box-shadow: var(--ag-focus-shadow);
}

.-iq-fill-column-popup .iq-datetime-input__date,
.-iq-fill-column-popup .iq-datetime-input__time {
    padding-inline-start: var(--ag-input-padding-start, 0.5rem);
}

/* ============================================================================
   Legend + coloured cells  (software/js/ag-grid/features/colourKey/)
   ----------------------------------------------------------------------------
   Structure only, styled from AG Grid theme variables (--ag-*) with safe
   fallbacks so it follows theme changes — same approach as the Fill Column popup.

   The colours themselves are per-client DATA, injected at runtime as
   --iq-legend-* custom properties (see the legend feature's model), NOT theme
   values. The near-white ring reads --ag-border-color so it too follows the theme.

   .iq-legend is self-styled so the legend renderer looks right in ANY host
   (sidebar today, below-grid / popover tomorrow); .iq-legend-panel only adds
   the scroll behaviour needed inside a tool panel.
   ============================================================================ */

/* AG Grid's .ag-tool-panel-content is a flex row, so the host must claim the full
   width or it shrinks to the widest chip and leaves a gap on the right. */
.iq-legend-panel {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

.iq-legend {
    box-sizing: border-box;
    padding: var(--ag-widget-container-vertical-padding, 12px)
             var(--ag-widget-container-horizontal-padding, 12px);
    font-family: var(--ag-font-family, sans-serif);
    font-size: var(--ag-font-size, 13px);
    color: var(--ag-foreground-color, #333);
}

.iq-legend__empty {
    margin: 0;
    font-style: italic;
    line-height: 1.4;
    color: var(--ag-secondary-foreground-color, #666);
}

.iq-legend__group {
    margin-bottom: calc(var(--ag-grid-size, 8px) * 2.5);
}

.iq-legend__group-title {
    margin: 0 0 var(--ag-grid-size, 8px);
    padding-bottom: calc(var(--ag-grid-size, 8px) * 0.5);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ag-secondary-foreground-color, #555);
    border-bottom: var(--ag-borders, solid 1px) var(--ag-border-color, #e2e2e2);
}

.iq-legend__items {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ag-grid-size, 8px) * 0.75);
}

/* Each chip is a full-width swatch: the whole row IS the key, matching the sheet.
   bg / fg / ring are injected per item from the legend map (data, not theme). */
.iq-legend__chip {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-height: calc(var(--ag-grid-size, 8px) * 3);
    padding: calc(var(--ag-grid-size, 8px) * 0.5) calc(var(--ag-grid-size, 8px) * 1.25);
    border-radius: var(--ag-border-radius, 3px);
    font-weight: 600;
    line-height: 1.2;
    background-color: var(--iq-legend-bg, transparent);
    color: var(--iq-legend-fg, inherit);
    box-shadow: inset 0 0 0 1px var(--iq-legend-ring, transparent);
}

/* Coloured grid cell — applied via cellClassRules only when the row has a code.
   !important beats the theme's row / zebra / hover background. */
.iq-legend-cell {
    background-color: var(--iq-legend-bg, transparent) !important;
    color: var(--iq-legend-fg, inherit);
}