/*
=========================================================
Market UI v2 - Core DOM Contracts
Path: public/assets/marketv2/core/base.css

Purpose:
Keeps browser-level UI contracts stable across all V2 components.

Rules:
- No direct color literals for component states
- No page-specific or component-local state palettes
- No theme or preset logic
=========================================================
*/

[hidden] {
    display: none !important;
}

html,
body,
.m-layout {
    font-family:
        "Segoe UI",
        "Noto Sans Arabic",
        Tahoma,
        Arial,
        sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
=========================================================
Market UI v2 - Design Contract Tokens

These tokens are the shared visual contract for repeated UI
families. Component variables may specialize them, but must not
invent independent heights, radii, gaps, focus widths, or icon
scales for the same component family.

Keeping this layer in base.css avoids adding another network file
while giving all V2 components one upstream source of truth.
=========================================================
*/

:root {
    /* Field Contract */
    --m-field-height-sm: calc(var(--m-theme-form-control-height, 42px) - 8px);
    --m-field-height-md: var(--m-theme-form-control-height, 42px);
    --m-field-height-lg: calc(var(--m-theme-form-control-height, 42px) + 6px);

    --m-field-radius-sm: var(--m-theme-radius-sm, 6px);
    --m-field-radius-md: var(--m-theme-form-radius, var(--m-theme-radius-md, 8px));
    --m-field-radius-lg: var(--m-theme-radius-lg, 8px);

    --m-field-padding-x-sm: 12px;
    --m-field-padding-x-md: var(--m-theme-form-padding-x, 14px);
    --m-field-padding-x-lg: 18px;

    --m-field-gap-sm: 6px;
    --m-field-gap-md: 8px;
    --m-field-gap-lg: 10px;
    --m-field-label-gap: 6px;
    --m-field-help-gap: 6px;

    --m-field-font-size-sm: 13px;
    --m-field-font-size-md: 14px;
    --m-field-font-size-lg: 15px;
    --m-field-label-font-size: 13px;
    --m-field-label-font-weight: 700;
    --m-field-label-line-height: 1.4;
    --m-field-help-font-size: 12px;
    --m-field-help-line-height: 1.45;

    --m-field-icon-size-sm: 16px;
    --m-field-icon-size-md: 18px;
    --m-field-icon-size-lg: 20px;
    --m-field-clear-hit-size: 28px;

    --m-field-border-width: var(--m-theme-field-border-width, 1px);
    --m-field-focus-width: var(--m-theme-field-focus-width, 2px);
    --m-field-focus-shadow: 0 0 0 var(--m-field-focus-width) var(--m-context-focus-ring, rgba(37, 99, 235, 0.18));
    --m-field-transition-fast: 0.15s ease;
    --m-field-transition-base: 0.2s ease;

    --m-field-choice-box-size-sm: 16px;
    --m-field-choice-box-size-md: 18px;
    --m-field-choice-box-size-lg: 20px;
    --m-field-choice-check-icon-size: 11px;
    --m-field-choice-group-segment-padding: 4px;
    --m-field-choice-group-option-height-sm: var(--m-field-height-sm);
    --m-field-choice-group-option-height-md: var(--m-field-height-md);
    --m-field-choice-group-option-height-lg: var(--m-field-height-lg);

    --m-field-verification-box-size: 48px;
    --m-field-verification-box-radius: var(--m-field-radius-lg);

    /* Button Contract */
    --m-button-height-sm: calc(var(--m-theme-button-height, 40px) - 8px);
    --m-button-height-md: var(--m-theme-button-height, 40px);
    --m-button-height-lg: calc(var(--m-theme-button-height, 40px) + 6px);

    --m-button-padding-x-sm: calc(var(--m-theme-button-padding-x, 16px) - 3px);
    --m-button-padding-x-md: var(--m-theme-button-padding-x, 16px);
    --m-button-padding-x-lg: calc(var(--m-theme-button-padding-x, 16px) + 4px);

    --m-button-radius-sm: var(--m-theme-radius-sm, 6px);
    --m-button-radius-md: var(--m-theme-button-radius, 8px);
    --m-button-radius-lg: var(--m-theme-radius-lg, 8px);
    --m-button-radius-pill: 999px;
    --m-button-radius-square: var(--m-button-radius-md);

    --m-button-font-size-sm: 13px;
    --m-button-font-size-md: 14px;
    --m-button-font-size-lg: 15px;
    --m-button-font-weight: var(--m-theme-button-font-weight, 700);
    --m-button-line-height: 1;

    --m-button-gap-sm: 6px;
    --m-button-gap-md: 8px;
    --m-button-gap-lg: 8px;
    --m-button-icon-size: 1em;
    --m-button-icon-only-size-sm: 34px;
    --m-button-icon-only-size-md: 40px;
    --m-button-icon-only-size-lg: 46px;
    --m-button-spinner-size-sm: 12px;
    --m-button-spinner-size-md: 14px;
    --m-button-spinner-size-lg: 16px;

    --m-button-border-width: var(--m-theme-button-border-width, 1px);
    --m-button-focus-width: var(--m-theme-button-focus-width, 3px);
    --m-button-focus-shadow: 0 0 0 var(--m-button-focus-width) var(--m-context-focus-ring, rgba(37, 99, 235, 0.18));
    --m-button-transition-fast: 90ms ease;
    --m-button-transition-base: 140ms ease;
    --m-button-transition-slow: 180ms ease;

    /* State / Status Visual Contract */
    --m-state-border-width: var(--m-theme-border-width, 1px);
    --m-state-accent-width: 3px;
    --m-state-hover-ring-width: 1px;
    --m-state-active-ring-width: 2px;
    --m-state-selected-ring-width: 2px;
    --m-state-focus-width: 2px;
    --m-state-focus-offset: 3px;
    --m-state-radius: var(--m-theme-radius-md, 8px);
    --m-state-hover-translate-y: -1px;
    --m-state-transition-fast: 120ms ease;
    --m-state-transition-base: 160ms ease;
    --m-state-transition-shadow: 180ms ease;

    /* Dialog Contract */
    --m-dialog-z-index: 1220;
    --m-dialog-backdrop-bg: var(--m-context-overlay, rgba(15, 23, 42, 0.42));
    --m-dialog-width-xs: 360px;
    --m-dialog-width-sm: 460px;
    --m-dialog-width-md: 600px;
    --m-dialog-width-lg: 760px;
    --m-dialog-width-xl: 920px;
    --m-dialog-width-full: 100vw;
    --m-dialog-radius: 8px;
    --m-dialog-radius-modal: 14px;
    --m-dialog-padding-sm: 16px;
    --m-dialog-padding-md: 18px;
    --m-dialog-padding-lg: 22px;
    --m-dialog-padding-mobile: 14px;
    --m-dialog-edge-safe-space: 10px;
    --m-dialog-edge-safe-space-mobile: 6px;
    --m-dialog-scrollbar-gutter: stable;
    --m-dialog-header-gap: 10px;
    --m-dialog-gutter: 14px;
    --m-dialog-section-gap: var(--m-dialog-gutter);
    --m-dialog-section-radius: var(--m-state-radius);
    --m-dialog-section-padding: 10px;
    --m-dialog-section-border: var(--m-context-border-subtle);
    --m-dialog-section-bg: var(--m-context-surface-soft);
    --m-dialog-section-hover-bg: var(--m-context-state-hover-bg);
    --m-dialog-section-hover-border: var(--m-context-state-hover-border);
    --m-dialog-section-active-bg: var(--m-context-state-active-bg);
    --m-dialog-section-active-border: var(--m-context-state-active-border);
    --m-dialog-section-shadow-hover: var(--m-context-shadow-hover);
    --m-dialog-section-shadow-active: var(--m-context-shadow-active);
    --m-dialog-title-font-size: 18px;
    --m-dialog-title-font-weight: 800;
    --m-dialog-subtitle-font-size: 13px;
    --m-dialog-close-size: 36px;
    --m-dialog-close-radius: 10px;
    --m-dialog-close-icon-size: 18px;
    --m-dialog-border-width: var(--m-theme-dialog-border-width, 1px);
    --m-dialog-actions-gap: 10px;
    --m-dialog-status-dot-size: 8px;
    --m-dialog-focus-width: 2px;
    --m-dialog-focus-shadow: 0 0 0 var(--m-dialog-focus-width) var(--m-context-focus-ring, rgba(37, 99, 235, 0.18));
    --m-dialog-transition-duration: 170ms;
    --m-dialog-transition-easing: ease;

    /* Table Contract */
    --m-table-contract-radius: var(--m-theme-table-radius, 8px);
    --m-table-contract-border-width: var(--m-theme-border-width, 1px);
    --m-table-contract-header-height: var(--m-theme-table-header-min-height, 46px);
    --m-table-contract-row-height: var(--m-theme-table-row-min-height, 52px);
    --m-table-contract-row-height-compact: var(--m-theme-table-row-min-height-compact, 44px);
    --m-table-contract-row-height-comfortable: var(--m-theme-table-row-min-height-comfortable, 60px);
    --m-table-contract-cell-padding-x: var(--m-theme-table-cell-padding-x, 14px);
    --m-table-contract-cell-padding-y: var(--m-theme-table-cell-padding-y, 10px);
    --m-table-contract-font-size: 14px;
    --m-table-contract-header-font-size: 12px;
    --m-table-contract-header-font-weight: 700;
    --m-table-contract-line-height: 1.45;
    --m-table-contract-checkbox-size: var(--m-field-choice-box-size-md);
    --m-table-contract-action-gap: 8px;

    /* Filter Contract */
    --m-filter-contract-panel-gap: var(--space-4, 16px);
    --m-filter-contract-panel-gap-compact: var(--space-3, 12px);
    --m-filter-contract-padding-y: var(--m-theme-filters-padding-y, var(--m-theme-card-padding-y, var(--space-4, 16px)));
    --m-filter-contract-padding-x: var(--m-theme-filters-padding-x, var(--m-theme-card-padding-x, var(--space-5, 20px)));
    --m-filter-contract-header-gap: var(--space-3, 12px);
    --m-filter-contract-header-min-height: var(--m-field-height-md);
    --m-filter-contract-grid-gap-x: var(--m-theme-filters-grid-gap, var(--space-4, 16px));
    --m-filter-contract-grid-gap-y: var(--m-theme-filters-grid-gap, var(--space-3, 12px));
    --m-filter-contract-actions-gap: var(--space-3, 12px);
    --m-filter-contract-field-label-gap: var(--m-field-label-gap);
}

[data-m-state],
.m-state-surface {
    --m-state-bg: var(--m-context-surface);
    --m-state-bg-soft: var(--m-context-surface-soft);
    --m-state-hover-bg: var(--m-context-state-hover-bg);
    --m-state-active-bg: var(--m-context-state-active-bg);
    --m-state-selected-bg: var(--m-context-state-selected-bg);

    --m-state-border: var(--m-context-border);
    --m-state-border-soft: var(--m-context-border-soft);
    --m-state-hover-border: var(--m-context-state-hover-border);
    --m-state-active-border: var(--m-context-state-active-border);
    --m-state-selected-border: var(--m-context-state-selected-border);

    --m-state-accent: var(--m-context-accent-color);
    --m-state-accent-hover: var(--m-context-accent-color-hover);
    --m-state-accent-active: var(--m-context-accent-color-active);
    --m-state-accent-soft: var(--m-context-accent-soft);
    --m-state-accent-soft-strong: var(--m-context-accent-soft-strong);

    --m-state-text: var(--m-context-text);
    --m-state-text-strong: var(--m-context-text-strong);
    --m-state-text-muted: var(--m-context-text-muted);

    --m-state-icon: var(--m-state-accent);
    --m-state-icon-bg: var(--m-state-accent-soft);
    --m-state-icon-border: var(--m-state-accent-soft-strong);

    --m-state-shadow: var(--m-context-shadow);
    --m-state-shadow-hover: var(--m-context-shadow-hover);
    --m-state-shadow-active: var(--m-context-shadow-active);
    --m-state-focus-ring: var(--m-context-focus-ring);
}

[data-m-state][data-color="c1"],
[data-m-state][data-accent="c1"],
.m-state-surface[data-color="c1"],
.m-state-surface[data-accent="c1"] {
    --m-state-hover-bg: var(--m-slot-c1-accent-soft);
    --m-state-active-bg: var(--m-slot-c1-accent-soft-strong);
    --m-state-selected-bg: var(--m-slot-c1-accent-soft-strong);
    --m-state-hover-border: var(--m-slot-c1-border-strong);
    --m-state-active-border: var(--m-slot-c1-border-strong);
    --m-state-selected-border: var(--m-slot-c1-border-strong);
    --m-state-accent: var(--m-slot-c1-accent);
    --m-state-accent-hover: var(--m-color-c1-hover);
    --m-state-accent-active: var(--m-color-c1-active);
    --m-state-accent-soft: var(--m-slot-c1-accent-soft);
    --m-state-accent-soft-strong: var(--m-slot-c1-accent-soft-strong);
    --m-state-icon: var(--m-slot-c1-icon-color);
}

[data-m-state][data-color="c2"],
[data-m-state][data-accent="c2"],
.m-state-surface[data-color="c2"],
.m-state-surface[data-accent="c2"] {
    --m-state-hover-bg: var(--m-slot-c2-accent-soft);
    --m-state-active-bg: var(--m-slot-c2-accent-soft-strong);
    --m-state-selected-bg: var(--m-slot-c2-accent-soft-strong);
    --m-state-hover-border: var(--m-slot-c2-border-strong);
    --m-state-active-border: var(--m-slot-c2-border-strong);
    --m-state-selected-border: var(--m-slot-c2-border-strong);
    --m-state-accent: var(--m-slot-c2-accent);
    --m-state-accent-hover: var(--m-color-c2-hover);
    --m-state-accent-active: var(--m-color-c2-active);
    --m-state-accent-soft: var(--m-slot-c2-accent-soft);
    --m-state-accent-soft-strong: var(--m-slot-c2-accent-soft-strong);
    --m-state-icon: var(--m-slot-c2-icon-color);
}

[data-m-state][data-color="c3"],
[data-m-state][data-accent="c3"],
.m-state-surface[data-color="c3"],
.m-state-surface[data-accent="c3"] {
    --m-state-hover-bg: var(--m-slot-c3-accent-soft);
    --m-state-active-bg: var(--m-slot-c3-accent-soft-strong);
    --m-state-selected-bg: var(--m-slot-c3-accent-soft-strong);
    --m-state-hover-border: var(--m-slot-c3-border-strong);
    --m-state-active-border: var(--m-slot-c3-border-strong);
    --m-state-selected-border: var(--m-slot-c3-border-strong);
    --m-state-accent: var(--m-slot-c3-accent);
    --m-state-accent-hover: var(--m-color-c3-hover);
    --m-state-accent-active: var(--m-color-c3-active);
    --m-state-accent-soft: var(--m-slot-c3-accent-soft);
    --m-state-accent-soft-strong: var(--m-slot-c3-accent-soft-strong);
    --m-state-icon: var(--m-slot-c3-icon-color);
}

[data-m-state][data-color="c4"],
[data-m-state][data-accent="c4"],
.m-state-surface[data-color="c4"],
.m-state-surface[data-accent="c4"] {
    --m-state-hover-bg: var(--m-slot-c4-accent-soft);
    --m-state-active-bg: var(--m-slot-c4-accent-soft-strong);
    --m-state-selected-bg: var(--m-slot-c4-accent-soft-strong);
    --m-state-hover-border: var(--m-slot-c4-border-strong);
    --m-state-active-border: var(--m-slot-c4-border-strong);
    --m-state-selected-border: var(--m-slot-c4-border-strong);
    --m-state-accent: var(--m-slot-c4-accent);
    --m-state-accent-hover: var(--m-color-c4-hover);
    --m-state-accent-active: var(--m-color-c4-active);
    --m-state-accent-soft: var(--m-slot-c4-accent-soft);
    --m-state-accent-soft-strong: var(--m-slot-c4-accent-soft-strong);
    --m-state-icon: var(--m-slot-c4-icon-color);
}

[data-m-state][data-color="c5"],
[data-m-state][data-accent="c5"],
.m-state-surface[data-color="c5"],
.m-state-surface[data-accent="c5"] {
    --m-state-hover-bg: var(--m-slot-c5-accent-soft);
    --m-state-active-bg: var(--m-slot-c5-accent-soft-strong);
    --m-state-selected-bg: var(--m-slot-c5-accent-soft-strong);
    --m-state-hover-border: var(--m-slot-c5-border-strong);
    --m-state-active-border: var(--m-slot-c5-border-strong);
    --m-state-selected-border: var(--m-slot-c5-border-strong);
    --m-state-accent: var(--m-slot-c5-accent);
    --m-state-accent-hover: var(--m-color-c5-hover);
    --m-state-accent-active: var(--m-color-c5-active);
    --m-state-accent-soft: var(--m-slot-c5-accent-soft);
    --m-state-accent-soft-strong: var(--m-slot-c5-accent-soft-strong);
    --m-state-icon: var(--m-slot-c5-icon-color);
}

[data-m-state][data-color="c6"],
[data-m-state][data-accent="c6"],
.m-state-surface[data-color="c6"],
.m-state-surface[data-accent="c6"] {
    --m-state-hover-bg: var(--m-slot-c6-accent-soft);
    --m-state-active-bg: var(--m-slot-c6-accent-soft-strong);
    --m-state-selected-bg: var(--m-slot-c6-accent-soft-strong);
    --m-state-hover-border: var(--m-slot-c6-border-strong);
    --m-state-active-border: var(--m-slot-c6-border-strong);
    --m-state-selected-border: var(--m-slot-c6-border-strong);
    --m-state-accent: var(--m-slot-c6-accent);
    --m-state-accent-hover: var(--m-color-c6-hover);
    --m-state-accent-active: var(--m-color-c6-active);
    --m-state-accent-soft: var(--m-slot-c6-accent-soft);
    --m-state-accent-soft-strong: var(--m-slot-c6-accent-soft-strong);
    --m-state-icon: var(--m-slot-c6-icon-color);
}

[data-m-state][data-color="c7"],
[data-m-state][data-accent="c7"],
.m-state-surface[data-color="c7"],
.m-state-surface[data-accent="c7"] {
    --m-state-hover-bg: var(--m-slot-c7-accent-soft);
    --m-state-active-bg: var(--m-slot-c7-accent-soft-strong);
    --m-state-selected-bg: var(--m-slot-c7-accent-soft-strong);
    --m-state-hover-border: var(--m-slot-c7-border-strong);
    --m-state-active-border: var(--m-slot-c7-border-strong);
    --m-state-selected-border: var(--m-slot-c7-border-strong);
    --m-state-accent: var(--m-slot-c7-accent);
    --m-state-accent-hover: var(--m-color-c7-hover);
    --m-state-accent-active: var(--m-color-c7-active);
    --m-state-accent-soft: var(--m-slot-c7-accent-soft);
    --m-state-accent-soft-strong: var(--m-slot-c7-accent-soft-strong);
    --m-state-icon: var(--m-slot-c7-icon-color);
}

[data-m-state][data-color="c8"],
[data-m-state][data-accent="c8"],
.m-state-surface[data-color="c8"],
.m-state-surface[data-accent="c8"] {
    --m-state-hover-bg: var(--m-slot-c8-accent-soft);
    --m-state-active-bg: var(--m-slot-c8-accent-soft-strong);
    --m-state-selected-bg: var(--m-slot-c8-accent-soft-strong);
    --m-state-hover-border: var(--m-slot-c8-border-strong);
    --m-state-active-border: var(--m-slot-c8-border-strong);
    --m-state-selected-border: var(--m-slot-c8-border-strong);
    --m-state-accent: var(--m-slot-c8-accent);
    --m-state-accent-hover: var(--m-color-c8-hover);
    --m-state-accent-active: var(--m-color-c8-active);
    --m-state-accent-soft: var(--m-slot-c8-accent-soft);
    --m-state-accent-soft-strong: var(--m-slot-c8-accent-soft-strong);
    --m-state-icon: var(--m-slot-c8-icon-color);
}

[data-m-state][data-color="c9"],
[data-m-state][data-accent="c9"],
.m-state-surface[data-color="c9"],
.m-state-surface[data-accent="c9"] {
    --m-state-hover-bg: var(--m-slot-c9-accent-soft);
    --m-state-active-bg: var(--m-slot-c9-accent-soft-strong);
    --m-state-selected-bg: var(--m-slot-c9-accent-soft-strong);
    --m-state-hover-border: var(--m-slot-c9-border-strong);
    --m-state-active-border: var(--m-slot-c9-border-strong);
    --m-state-selected-border: var(--m-slot-c9-border-strong);
    --m-state-accent: var(--m-slot-c9-accent);
    --m-state-accent-hover: var(--m-color-c9-hover);
    --m-state-accent-active: var(--m-color-c9-active);
    --m-state-accent-soft: var(--m-slot-c9-accent-soft);
    --m-state-accent-soft-strong: var(--m-slot-c9-accent-soft-strong);
    --m-state-icon: var(--m-slot-c9-icon-color);
}

[data-m-state][data-color="c10"],
[data-m-state][data-accent="c10"],
.m-state-surface[data-color="c10"],
.m-state-surface[data-accent="c10"] {
    --m-state-hover-bg: var(--m-slot-c10-accent-soft);
    --m-state-active-bg: var(--m-slot-c10-accent-soft-strong);
    --m-state-selected-bg: var(--m-slot-c10-accent-soft-strong);
    --m-state-hover-border: var(--m-slot-c10-border-strong);
    --m-state-active-border: var(--m-slot-c10-border-strong);
    --m-state-selected-border: var(--m-slot-c10-border-strong);
    --m-state-accent: var(--m-slot-c10-accent);
    --m-state-accent-hover: var(--m-color-c10-hover);
    --m-state-accent-active: var(--m-color-c10-active);
    --m-state-accent-soft: var(--m-slot-c10-accent-soft);
    --m-state-accent-soft-strong: var(--m-slot-c10-accent-soft-strong);
    --m-state-icon: var(--m-slot-c10-icon-color);
}

[data-m-state].is-clickable,
[data-m-state]:where(a, button, [role="button"], [tabindex]:not([tabindex="-1"])),
.m-state-surface.is-clickable,
.m-state-surface:where(a, button, [role="button"], [tabindex]:not([tabindex="-1"])) {
    transition:
        background-color var(--m-state-transition-base),
        border-color var(--m-state-transition-base),
        box-shadow var(--m-state-transition-shadow),
        transform var(--m-state-transition-fast);
}

[data-m-state].is-clickable:hover:not(:disabled):not(.is-disabled):not([aria-disabled="true"]),
[data-m-state]:where(a, button, [role="button"], [tabindex]:not([tabindex="-1"])):hover:not(:disabled):not(.is-disabled):not([aria-disabled="true"]),
.m-state-surface.is-clickable:hover:not(:disabled):not(.is-disabled):not([aria-disabled="true"]),
.m-state-surface:where(a, button, [role="button"], [tabindex]:not([tabindex="-1"])):hover:not(:disabled):not(.is-disabled):not([aria-disabled="true"]) {
    background: var(--m-state-hover-bg);
    border-color: var(--m-state-hover-border);
    box-shadow:
        var(--m-state-shadow-hover),
        inset 0 0 0 var(--m-state-hover-ring-width) var(--m-state-hover-border);
    transform: translateY(var(--m-state-hover-translate-y));
}

[data-m-state].is-clickable:focus-visible,
[data-m-state]:where(a, button, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible,
.m-state-surface.is-clickable:focus-visible,
.m-state-surface:where(a, button, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
    background: var(--m-state-hover-bg);
    border-color: var(--m-state-hover-border);
    box-shadow:
        var(--m-state-shadow-hover),
        inset 0 0 0 var(--m-state-hover-ring-width) var(--m-state-hover-border);
    outline: var(--m-state-focus-width) solid var(--m-state-focus-ring);
    outline-offset: var(--m-state-focus-offset);
}

[data-m-state].is-active,
[data-m-state].is-selected,
[data-m-state][aria-current="page"],
[data-m-state][aria-selected="true"],
[data-m-state][data-state-active="true"],
[data-m-state][data-state-selected="true"],
.m-state-surface.is-active,
.m-state-surface.is-selected,
.m-state-surface[aria-current="page"],
.m-state-surface[aria-selected="true"],
.m-state-surface[data-state-active="true"],
.m-state-surface[data-state-selected="true"] {
    background: var(--m-state-active-bg);
    border-color: var(--m-state-active-border);
    box-shadow:
        var(--m-state-shadow-active),
        inset 0 0 0 var(--m-state-active-ring-width) var(--m-state-active-border);
    color: var(--m-state-text-strong);
}

[data-m-state].is-selected,
[data-m-state][aria-selected="true"],
[data-m-state][data-state-selected="true"],
.m-state-surface.is-selected,
.m-state-surface[aria-selected="true"],
.m-state-surface[data-state-selected="true"] {
    background: var(--m-state-selected-bg);
    border-color: var(--m-state-selected-border);
    box-shadow:
        var(--m-state-shadow-active),
        inset 0 0 0 var(--m-state-selected-ring-width) var(--m-state-selected-border);
}

[data-m-state].has-state-accent::before,
.m-state-surface.has-state-accent::before {
    background: var(--m-state-accent);
    opacity: 1;
}

[data-m-state] .m-state-icon,
.m-state-surface .m-state-icon {
    background: var(--m-state-icon-bg);
    border-color: var(--m-state-icon-border);
    color: var(--m-state-icon);
}

@media (max-width: 991px) {
    :root {
        --m-field-height-md: var(--m-theme-form-control-height-tablet, var(--m-theme-form-control-height, 40px));
        --m-field-padding-x-md: var(--m-theme-form-padding-x-tablet, var(--m-theme-form-padding-x, 13px));

        --m-button-height-md: var(--m-theme-button-height-tablet, var(--m-theme-button-height, 38px));
        --m-button-padding-x-md: var(--m-theme-button-padding-x-tablet, var(--m-theme-button-padding-x, 14px));

        --m-table-contract-row-height: var(--m-theme-table-row-min-height-tablet, var(--m-theme-table-row-min-height, 52px));
        --m-table-contract-cell-padding-x: var(--m-theme-table-cell-padding-x-tablet, var(--m-theme-table-cell-padding-x, 14px));
        --m-table-contract-cell-padding-y: var(--m-theme-table-cell-padding-y-tablet, var(--m-theme-table-cell-padding-y, 10px));
    }
}

@media (max-width: 767px) {
    :root {
        --m-field-height-md: var(--m-theme-form-control-height-mobile, var(--m-theme-form-control-height, 38px));
        --m-field-padding-x-md: var(--m-theme-form-padding-x-mobile, var(--m-theme-form-padding-x, 12px));

        --m-button-height-md: var(--m-theme-button-height-mobile, var(--m-theme-button-height, 36px));
        --m-button-padding-x-md: var(--m-theme-button-padding-x-mobile, var(--m-theme-button-padding-x, 12px));

        --m-table-contract-row-height: var(--m-theme-table-row-min-height-mobile, var(--m-theme-table-row-min-height, 48px));
        --m-table-contract-cell-padding-x: var(--m-theme-table-cell-padding-x-mobile, var(--m-theme-table-cell-padding-x, 12px));
        --m-table-contract-cell-padding-y: var(--m-theme-table-cell-padding-y-mobile, var(--m-theme-table-cell-padding-y, 8px));
    }
}