/*
 * Procurement war room
 *
 * The dashboard still injects its legacy layout CSS at render time. This
 * stylesheet deliberately scopes the small set of necessary !important
 * overrides to .wr-root (plus war-room-only overlays) so every visual role is
 * resolved from the shared --ui-* theme contract at paint time.
 */

body.app-shell .wr-root {
    --wr-canvas: var(--ui-canvas);
    --wr-surface: var(--ui-surface);
    --wr-surface-muted: var(--ui-surface-muted);
    --wr-surface-raised: var(--ui-surface-raised);
    --wr-text: var(--ui-text);
    --wr-text-muted: var(--ui-text-muted);
    --wr-text-faint: var(--ui-text-faint);
    --wr-border: var(--ui-border);
    --wr-border-soft: var(--ui-border-soft);
    --wr-action: var(--ui-action);
    --wr-action-hover: var(--ui-action-hover);
    --wr-on-action: var(--ui-on-action);
    --wr-action-soft: color-mix(in srgb, var(--ui-action) 12%, var(--ui-surface));
    --wr-action-border: color-mix(in srgb, var(--ui-action) 45%, var(--ui-border));
    --wr-success: color-mix(in srgb, var(--ui-success) 82%, var(--ui-action));
    --wr-success-solid: var(--ui-success-solid);
    --wr-success-soft: color-mix(in srgb, var(--ui-success-soft) 86%, var(--ui-action) 14%);
    --wr-warning: color-mix(in srgb, var(--ui-warning) 82%, var(--ui-action));
    --wr-warning-soft: color-mix(in srgb, var(--ui-warning-soft) 86%, var(--ui-action) 14%);
    --wr-danger: color-mix(in srgb, var(--ui-danger) 84%, var(--ui-action));
    --wr-danger-soft: color-mix(in srgb, var(--ui-danger-soft) 88%, var(--ui-action) 12%);
    --wr-info: color-mix(in srgb, var(--ui-info) 78%, var(--ui-action));
    --wr-info-soft: color-mix(in srgb, var(--ui-info-soft) 84%, var(--ui-action) 16%);
    --wr-series-a: var(--wr-action);
    --wr-series-b: var(--wr-info);
    --wr-series-c: var(--wr-warning);
    --wr-gutter: clamp(0.75rem, 0.45rem + 1vw, 1.5rem);

    min-width: 0;
    background: var(--wr-canvas) !important;
    color: var(--wr-text) !important;
    font-family: var(--ui-font-body) !important;
}

body.app-shell .wr-root * {
    box-sizing: border-box;
}

body.app-shell .wr-root > .px-6 {
    padding-inline: var(--wr-gutter) !important;
}

/* ---------- Flat operational surfaces ---------- */

body.app-shell .wr-root .wr-glass {
    border-color: var(--wr-border) !important;
    border-radius: var(--ui-radius-md) !important;
    background: var(--wr-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

body.app-shell .wr-root :is(h3, h4, h5, .wr-chart-title, .wr-kpi-value) {
    color: var(--wr-text) !important;
}

body.app-shell .wr-root :is(.wr-kpi-label, .wr-kpi-sub, .wr-quick-label) {
    color: var(--wr-text-muted) !important;
}

/* ---------- Command bar ---------- */

body.app-shell .wr-root .wr-toolbar {
    position: sticky;
    top: 0;
    z-index: 120;
    display: grid !important;
    grid-template-columns: auto minmax(15rem, 1fr) auto;
    gap: var(--ui-space-3) !important;
    padding: 0.75rem var(--wr-gutter) !important;
    border-color: var(--wr-border) !important;
    background: color-mix(in srgb, var(--wr-surface) 96%, transparent) !important;
    box-shadow: 0 1px 0 var(--wr-border-soft);
    backdrop-filter: blur(10px);
}

body.app-shell .wr-root :is(.wr-toolbar-left, .wr-toolbar-center, .wr-toolbar-right) {
    gap: var(--ui-space-2) !important;
    min-width: 0;
}

body.app-shell .wr-root .wr-toolbar h3 {
    margin: 0;
    font-size: var(--ui-text-lg) !important;
    letter-spacing: -0.02em;
}

body.app-shell .wr-root :is(.wr-btn, #wr-guide-main-btn, #wr-tour-start-btn) {
    min-height: 2.25rem !important;
    border: 1px solid var(--wr-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--wr-surface-muted) !important;
    background-image: none !important;
    color: var(--wr-text) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    transform: none !important;
}

body.app-shell .wr-root :is(.wr-btn, #wr-guide-main-btn, #wr-tour-start-btn):hover:not(:disabled) {
    border-color: var(--wr-action-border) !important;
    background: var(--wr-action-soft) !important;
    color: var(--wr-action) !important;
    box-shadow: none !important;
}

body.app-shell .wr-root :is(.wr-btn-active, #wr-search-go) {
    border-color: transparent !important;
    background: var(--wr-action) !important;
    color: var(--wr-on-action) !important;
}

body.app-shell .wr-root :is(.wr-btn-active, #wr-search-go):hover:not(:disabled) {
    background: var(--wr-action-hover) !important;
    color: var(--wr-on-action) !important;
}

body.app-shell .wr-root :is(
    .wr-scope-select,
    .wr-quick-select,
    .wr-search,
    .wr-cfp-search,
    .wr-filter-dropdown-search,
    .wr-af-date-input,
    .wr-single-select,
    .wr-bar-limit-select
) {
    border-color: var(--wr-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    background-color: var(--wr-surface-raised) !important;
    color: var(--wr-text) !important;
    box-shadow: none !important;
    transform: none !important;
}

body.app-shell .wr-root :is(.wr-scope-select, .wr-quick-select) {
    border-radius: var(--ui-radius-sm) !important;
    background-image: none !important;
}

body.app-shell .wr-root :is(.wr-search, .wr-cfp-search, .wr-filter-dropdown-search)::placeholder {
    color: var(--wr-text-faint) !important;
}

body.app-shell .wr-root .wr-search-combo {
    border-color: var(--wr-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--wr-surface-raised) !important;
    box-shadow: none !important;
}

body.app-shell .wr-root .wr-search-combo:focus-within {
    border-color: var(--wr-action) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 22%, transparent) !important;
}

body.app-shell .wr-root .wr-search-inline-switch {
    color: var(--wr-text-muted) !important;
}

body.app-shell .wr-root .wr-search-inline-switch:hover {
    background: var(--wr-action-soft) !important;
    color: var(--wr-action) !important;
}

body.app-shell .wr-root :is(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--wr-action) !important;
}

body.app-shell .wr-root .wr-search-inline-divider {
    background: var(--wr-border-soft) !important;
}

/* ---------- Comparison controls ---------- */

body.app-shell .wr-root .wr-compare-bar {
    gap: var(--ui-space-3) !important;
    border-color: var(--wr-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--wr-surface-muted) !important;
    box-shadow: none !important;
}

body.app-shell .wr-root :is(
    #wr-custom-range,
    [id^="wr-"][id$="-dropdown"],
    .wr-filter-dropdown,
    .wr-cfp-body
) {
    border-color: var(--wr-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--wr-surface-raised) !important;
    background-image: none !important;
    color: var(--wr-text) !important;
    box-shadow: var(--ui-shadow-float) !important;
    backdrop-filter: none !important;
}

body.app-shell .wr-root :is(
    #wr-month-apply,
    #wr-sample-field-apply,
    #wr-single-display-apply,
    #wr-single-condition-apply,
    #wr-fc-values-apply,
    .wr-dd-confirm
) {
    border-color: transparent !important;
    background: var(--wr-action) !important;
    background-image: none !important;
    color: var(--wr-on-action) !important;
    box-shadow: none !important;
}

body.app-shell .wr-root :is(
    [id$="-none"],
    [id$="-cancel"],
    .wr-dd-cancel,
    .wr-filter-tag button
) {
    color: var(--wr-danger) !important;
}

body.app-shell .wr-root :is(
    #wr-compare-a-month-btn,
    #wr-compare-a-month-dropdown
) {
    border-inline-start: 3px solid var(--wr-series-a) !important;
}

body.app-shell .wr-root :is(
    #wr-compare-month-btn,
    #wr-compare-month-dropdown
) {
    border-inline-start: 3px solid var(--wr-series-b) !important;
}

body.app-shell .wr-root :is(
    #wr-compare-c-month-btn,
    #wr-compare-c-month-dropdown
) {
    border-inline-start: 3px solid var(--wr-series-c) !important;
}

body.app-shell .wr-root :is(#wr-cmp-a-month-all, #wr-cmp-a-month-apply) {
    color: var(--wr-series-a) !important;
}

body.app-shell .wr-root #wr-cmp-a-month-apply {
    background: var(--wr-series-a) !important;
    color: var(--wr-on-action) !important;
}

body.app-shell .wr-root :is(#wr-cmp-month-all, #wr-cmp-month-apply) {
    color: var(--wr-series-b) !important;
}

body.app-shell .wr-root #wr-cmp-month-apply {
    background: var(--wr-series-b) !important;
    color: var(--wr-on-action) !important;
}

body.app-shell .wr-root :is(#wr-cmp-c-month-all, #wr-cmp-c-month-apply) {
    color: var(--wr-series-c) !important;
}

body.app-shell .wr-root #wr-cmp-c-month-apply {
    background: var(--wr-series-c) !important;
    color: var(--wr-on-action) !important;
}

body.app-shell .wr-root .wr-filter-tag {
    border-color: var(--wr-action-border) !important;
    background: var(--wr-action-soft) !important;
    color: var(--wr-action) !important;
    box-shadow: none !important;
    animation: none !important;
}

/* ---------- KPI strip ---------- */

body.app-shell .wr-root .wr-kpi {
    --wr-kpi-accent: var(--wr-action);
    padding: 1rem !important;
    border-block-start: 3px solid var(--wr-kpi-accent) !important;
    box-shadow: none !important;
    transform: none !important;
}

body.app-shell .wr-root .wr-kpi:hover {
    border-color: var(--wr-kpi-accent) !important;
    background: color-mix(in srgb, var(--wr-surface) 96%, var(--wr-kpi-accent)) !important;
    box-shadow: none !important;
    transform: none !important;
}

body.app-shell .wr-root .wr-kpi:has(#wr-kpi-order-count) {
    --wr-kpi-accent: var(--wr-info);
}

body.app-shell .wr-root .wr-kpi:has(#wr-kpi-approval-rate) {
    --wr-kpi-accent: var(--wr-success);
}

body.app-shell .wr-root .wr-kpi:has(#wr-kpi-top-vendor) {
    --wr-kpi-accent: var(--wr-warning);
}

body.app-shell .wr-root .wr-kpi:has(#wr-kpi-growth) {
    --wr-kpi-accent: var(--wr-success);
}

body.app-shell .wr-root .wr-kpi-icon {
    width: 2.25rem !important;
    height: 2.25rem !important;
    border-radius: var(--ui-radius-sm) !important;
    background: color-mix(in srgb, var(--wr-kpi-accent) 16%, var(--wr-surface)) !important;
}

body.app-shell .wr-root .wr-kpi-value {
    color: var(--wr-kpi-accent) !important;
    font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.8rem) !important;
    font-variant-numeric: tabular-nums;
}

body.app-shell .wr-root #wr-kpi-growth[style*="f87171"] {
    color: var(--wr-danger) !important;
}

body.app-shell .wr-root .wr-kpi-sub [style*="10b981"] {
    color: var(--wr-success) !important;
}

body.app-shell .wr-root .wr-kpi-sub [style*="f87171"] {
    color: var(--wr-danger) !important;
}

/* ---------- Advanced filters ---------- */

body.app-shell .wr-root .wr-adv-panel {
    padding: 0.75rem !important;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--wr-surface) !important;
    background-image: none !important;
}

body.app-shell .wr-root .wr-adv-panel::before {
    content: none !important;
}

body.app-shell .wr-root .wr-adv-title-btn {
    border-color: transparent !important;
    border-radius: var(--ui-radius-xs) !important;
    background: transparent !important;
    color: var(--wr-text) !important;
    box-shadow: none !important;
}

body.app-shell .wr-root .wr-adv-title-btn:hover {
    background: var(--wr-action-soft) !important;
    color: var(--wr-action) !important;
}

body.app-shell .wr-root .wr-adv-filter-body {
    border-color: var(--wr-border-soft) !important;
}

body.app-shell .wr-root .wr-adv-field label {
    color: var(--wr-text-muted) !important;
}

body.app-shell .wr-root .wr-filter-select-btn {
    border-color: var(--wr-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--wr-surface-raised) !important;
    color: var(--wr-text) !important;
    box-shadow: none !important;
    transform: none !important;
}

body.app-shell .wr-root .wr-filter-select-btn:hover {
    border-color: var(--wr-action-border) !important;
    background: var(--wr-action-soft) !important;
}

body.app-shell .wr-root .wr-filter-dropdown :is(label, .wr-cfp-item) {
    color: var(--wr-text-muted) !important;
}

body.app-shell .wr-root :is(.wr-filter-dropdown label, .wr-cfp-item):hover {
    background: var(--wr-action-soft) !important;
    color: var(--wr-text) !important;
}

body.app-shell .wr-root :is(.wr-filter-tree-divider, .wr-filter-dropdown-footer, .wr-cfp) {
    border-color: var(--wr-border-soft) !important;
}

/* ---------- Chart workspace ---------- */

body.app-shell .wr-root #wr-chart-grid {
    gap: var(--ui-space-3) !important;
    padding-inline: var(--wr-gutter) !important;
}

body.app-shell .wr-root .wr-chart-card {
    min-width: 0;
    padding: 0.875rem !important;
    border-color: var(--wr-border) !important;
    border-radius: var(--ui-radius-md) !important;
    background: var(--wr-surface) !important;
    box-shadow: none !important;
}

body.app-shell .wr-root .wr-chart-card:hover {
    border-color: var(--wr-action-border) !important;
    box-shadow: none !important;
}

body.app-shell .wr-root .wr-chart-card-header {
    min-width: 0;
    padding-block-end: 0.55rem !important;
    border-block-end: 1px solid var(--wr-border-soft);
}

body.app-shell .wr-root .wr-drag-handle {
    color: var(--wr-text-faint) !important;
}

body.app-shell .wr-root .wr-chart-title {
    min-width: 7rem;
    color: var(--wr-text) !important;
    font-family: var(--ui-font-label);
    font-size: var(--ui-text-sm) !important;
}

body.app-shell .wr-root .wr-chart-tabs-row {
    gap: 0.25rem !important;
    padding: 0.45rem 0 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
}

body.app-shell .wr-root .wr-chart-card :is(
    .wr-product-sort-btn,
    .wr-group-mode-btn,
    .wr-bar-sort-btn,
    .wr-filter-btn,
    .wr-zoompan-btn,
    .wr-size-btn,
    .wr-align-btn,
    .wr-expand-btn,
    .wr-chart-tab,
    .wr-compare-chart-tab,
    .wr-compare-group-btn
) {
    border-color: var(--wr-border) !important;
    border-radius: var(--ui-radius-xs) !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--wr-text-muted) !important;
    box-shadow: none !important;
    transform: none !important;
}

body.app-shell .wr-root .wr-chart-card :is(
    .wr-product-sort-btn,
    .wr-group-mode-btn,
    .wr-bar-sort-btn,
    .wr-filter-btn,
    .wr-zoompan-btn,
    .wr-size-btn,
    .wr-align-btn,
    .wr-expand-btn,
    .wr-chart-tab,
    .wr-compare-chart-tab,
    .wr-compare-group-btn
):hover:not(:disabled) {
    border-color: var(--wr-action-border) !important;
    background: var(--wr-action-soft) !important;
    color: var(--wr-action) !important;
}

body.app-shell .wr-root .wr-chart-card :is(
    .wr-product-sort-btn.active,
    .wr-group-mode-btn.active,
    .wr-bar-sort-btn.active,
    .wr-chart-tab.active,
    .wr-zoompan-btn[data-active="1"],
    .wr-filter-btn[data-active="1"]
) {
    border-color: var(--wr-action-border) !important;
    background: var(--wr-action-soft) !important;
    color: var(--wr-action) !important;
    font-weight: 700 !important;
}

body.app-shell .wr-root .wr-chart-card :is(
    .wr-compare-chart-tab,
    .wr-compare-group-btn
)[style*="font-weight: 700"],
body.app-shell .wr-root .wr-chart-card :is(
    .wr-compare-chart-tab,
    .wr-compare-group-btn
)[style*="font-weight:700"] {
    border-color: var(--wr-action-border) !important;
    background: var(--wr-action-soft) !important;
    color: var(--wr-action) !important;
}

body.app-shell .wr-root .wr-zoompan-btn[data-capable="0"] {
    border-color: var(--wr-border-soft) !important;
    color: var(--wr-text-faint) !important;
    opacity: 0.5 !important;
}

body.app-shell .wr-root .wr-bar-limit-wrap {
    border-color: var(--wr-border) !important;
    background: var(--wr-surface-muted) !important;
}

body.app-shell .wr-root .wr-bar-limit-label {
    color: var(--wr-text-muted) !important;
}

body.app-shell .wr-root .wr-chart-container {
    min-width: 0;
    max-width: 100%;
    background: var(--wr-surface) !important;
    isolation: isolate;
}

body.app-shell .wr-root #wr-chart-compare-selection-hint {
    border-color: var(--wr-border) !important;
    background: var(--wr-surface-muted) !important;
}

body.app-shell .wr-root :is(#wr-toggle-charts-btn, #wr-reset-layout) {
    border-color: var(--wr-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--wr-surface-muted) !important;
    color: var(--wr-text-muted) !important;
    box-shadow: none !important;
}

body.app-shell .wr-root :is(#wr-toggle-charts-btn, #wr-reset-layout):hover {
    border-color: var(--wr-action-border) !important;
    background: var(--wr-action-soft) !important;
    color: var(--wr-action) !important;
}

/* ---------- Drilldown and auxiliary surfaces ---------- */

body.app-shell .wr-root .wr-drilldown {
    border-color: var(--wr-border) !important;
    border-radius: var(--ui-radius-md) !important;
    background: var(--wr-surface) !important;
    color: var(--wr-text) !important;
    box-shadow: none !important;
}

body.app-shell .wr-root #wr-drilldown-title {
    color: var(--wr-action) !important;
}

body.app-shell .wr-root #wr-drilldown-content {
    overflow: auto;
    scrollbar-gutter: stable;
}

body.app-shell .wr-root .wr-drilldown :is(th, td) {
    border-color: var(--wr-border-soft) !important;
    color: var(--wr-text) !important;
}

body.app-shell .wr-root .wr-drilldown th {
    background: var(--wr-surface-muted) !important;
    color: var(--wr-text-muted) !important;
}

body.app-shell .wr-root .wr-drilldown tr:hover td {
    background: var(--wr-action-soft) !important;
}

body.app-shell :is(.wr-size-popup, .wr-align-popup, .wr-vis-popup) {
    border-color: var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--ui-surface-raised) !important;
    background-image: none !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-float) !important;
    backdrop-filter: none !important;
}

body.app-shell :is(.wr-size-popup .wr-size-option, .wr-align-popup .wr-align-option, .wr-vis-popup label) {
    background: transparent !important;
    color: var(--ui-text) !important;
}

body.app-shell :is(.wr-size-popup .wr-size-option, .wr-align-popup .wr-align-option, .wr-vis-popup label):hover {
    background: color-mix(in srgb, var(--ui-action) 12%, var(--ui-surface)) !important;
}

body.app-shell .wr-tour-highlight {
    border-radius: var(--ui-radius-sm) !important;
    box-shadow:
        0 0 0 4000px var(--ui-overlay),
        0 0 0 3px var(--ui-action) !important;
}

body.app-shell .wr-tour-highlight::after {
    content: none !important;
}

body.app-shell .wr-tour-tooltip {
    border-color: var(--ui-border) !important;
    border-radius: var(--ui-radius-md) !important;
    background: var(--ui-surface-raised) !important;
    background-image: none !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-float) !important;
    backdrop-filter: none !important;
}

body.app-shell .wr-tour-tooltip :is(.wr-tour-tooltip-header, .wr-tour-tooltip-body) {
    border-color: var(--ui-border-soft) !important;
    color: var(--ui-text) !important;
}

body.app-shell .wr-tour-step-badge,
body.app-shell .wr-tour-dot.active,
body.app-shell .wr-tour-btn-next {
    background: var(--ui-action) !important;
    background-image: none !important;
    color: var(--ui-on-action) !important;
    box-shadow: none !important;
}

body.app-shell .wr-tour-btn-finish {
    background: var(--wr-success-solid, var(--ui-success-solid)) !important;
    background-image: none !important;
    color: var(--ui-on-action) !important;
    box-shadow: none !important;
}

body.app-shell .wr-fullscreen-overlay {
    background: color-mix(in srgb, var(--ui-overlay) 92%, transparent) !important;
    color: var(--ui-text) !important;
}

body.app-shell .wr-fullscreen-overlay :is(.wr-fullscreen-close, #wr-fullscreen-toolbar) {
    border-color: var(--ui-border) !important;
    background: var(--ui-surface-raised) !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
}

body.app-shell .wr-fullscreen-overlay #wr-fs-apply {
    border-color: transparent !important;
    background: var(--ui-action) !important;
    background-image: none !important;
    color: var(--ui-on-action) !important;
}

body.app-shell .wr-fullscreen-overlay #wr-fs-clear {
    border-color: var(--ui-border) !important;
    background: var(--ui-surface-muted) !important;
    color: var(--ui-text) !important;
}

/* ---------- Responsive density ---------- */

@media (max-width: 74.999rem) {
    body.app-shell .wr-root .wr-toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    body.app-shell .wr-root .wr-toolbar-left {
        flex: 1 1 100%;
        overflow-x: auto;
        padding-block-end: 0.2rem;
    }

    body.app-shell .wr-root .wr-toolbar-center {
        justify-content: flex-start !important;
    }
}

@media (min-width: 48rem) and (max-width: 63.999rem) {
    body.app-shell .wr-root .wr-chart-card[data-col-span="3"] {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 47.999rem) {
    body.app-shell .wr-root {
        --wr-gutter: 0.7rem;
    }

    body.app-shell .wr-root .wr-toolbar {
        position: relative;
        align-items: stretch !important;
        padding-block: 0.65rem !important;
    }

    body.app-shell .wr-root .wr-toolbar-left {
        flex-wrap: nowrap !important;
        width: 100%;
        scrollbar-width: thin;
    }

    body.app-shell .wr-root .wr-toolbar-left > * {
        flex: 0 0 auto;
    }

    body.app-shell .wr-root .wr-toolbar-center,
    body.app-shell .wr-root .wr-toolbar-right {
        width: 100%;
    }

    body.app-shell .wr-root .wr-toolbar-center {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body.app-shell .wr-root .wr-toolbar-right {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.app-shell .wr-root .wr-search-combo {
        width: 100% !important;
        min-width: 0 !important;
    }

    body.app-shell .wr-root .wr-compare-bar {
        align-items: stretch !important;
    }

    body.app-shell .wr-root .wr-compare-bar > div:not(.hidden) {
        width: 100%;
    }

    body.app-shell .wr-root .wr-compare-bar .wr-search {
        min-width: 0 !important;
        width: 100% !important;
    }

    body.app-shell .wr-root #wr-chart-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.app-shell .wr-root .wr-chart-card {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    body.app-shell .wr-root .wr-chart-card-header {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-block-end: 0.65rem !important;
    }

    body.app-shell .wr-root .wr-chart-card-header > * {
        flex: 0 0 auto;
    }

    body.app-shell .wr-root .wr-chart-title {
        flex: 1 0 9rem !important;
    }

    body.app-shell .wr-root .wr-chart-container {
        height: 18rem !important;
        min-height: 18rem !important;
    }

    body.app-shell .wr-root .wr-drilldown {
        padding: 0.75rem !important;
    }

    body.app-shell .wr-tour-tooltip {
        width: calc(100vw - 1.5rem) !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

@media (pointer: coarse) {
    body.app-shell .wr-root :is(
        .wr-btn,
        .wr-filter-select-btn,
        .wr-chart-tab,
        .wr-compare-chart-tab,
        .wr-compare-group-btn,
        .wr-filter-btn,
        .wr-size-btn,
        .wr-align-btn,
        .wr-expand-btn
    ) {
        min-height: 2.25rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.app-shell .wr-root *,
    body.app-shell .wr-root *::before,
    body.app-shell .wr-root *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition-duration: 1ms !important;
    }
}

@media (forced-colors: active) {
    body.app-shell .wr-root :is(.wr-glass, .wr-chart-card, .wr-kpi, .wr-compare-bar) {
        border: 1px solid CanvasText !important;
    }

    body.app-shell .wr-root :is(.wr-btn-active, #wr-search-go) {
        background: Highlight !important;
        color: HighlightText !important;
    }
}