/*
 * InnovaMetric design tokens — the single source of color for the product.
 * Components reference var(--im-*) only; nothing below .main-content should hardcode a color.
 *
 * Visual language: Vuexy-style admin (Oct 2026). Light = white cards on a pale blue-gray page;
 * dark = navy page with slightly lighter navy cards. Every text/background pair keeps WCAG AA
 * (>= 4.5:1); white text on --im-primary stays >= 4.5:1 in both themes.
 *
 * The DevExpress theme is pointed at these tokens by devexpress-tokens.css (generated), and
 * Bootstrap/Skote variables are remapped below — scoped to .main-content so the sidebar's own
 * styles are untouched.
 */

:root {
    --im-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --im-primary: #1976D2;          /* brand, primary button, active tab/filter, "organic" series */
    --im-primary-dark: #1565C0;     /* hover/pressed of primary */
    --im-primary-tint: #E8F2FC;     /* info chips, soft heatmap cells, hover rows */
    --im-primary-disabled: #9CC3EE;
    --im-btn-disabled-bg: #E9EBF1;
    --im-btn-disabled-color: #9AA0B4;
    --im-btn-disabled-border: #E9EBF1;
    --im-accent-text: #1976D2;      /* primary used as text/links/focus rings on the surface */
    --im-accent-text-hover: #0D5CB0;
    --im-secondary: #F1F3F8;        /* table headers, empty states, subtle fills */
    --im-success: #1F9D55;          /* "paid" series, positive sentiment, success button */
    --im-success-text: #17783F;     /* positive deltas */
    --im-danger: #D92D20;           /* negative deltas, alerts, danger button */
    --im-danger-fill: #D92D20;      /* danger button fill (text on it is white) */
    --im-warning: #E8720C;          /* warning button / badges */
    --im-info: #0891B2;             /* info button / badges */
    --im-slate: #6B7389;            /* secondary button */
    --im-dark: #2F3349;             /* dark button */
    --im-neutral: #C5CAD8;          /* neutral sentiment fill */
    --im-ink: #2F3349;              /* primary text */
    --im-muted: #6E7488;            /* secondary text (4.7:1 on white) */
    --im-border: #E3E6EE;           /* card borders */
    --im-surface: #FFFFFF;          /* cards */
    --im-on-primary: #FFFFFF;       /* text on --im-primary */

    /* Sequential blue scale (heatmaps, intensity), lightest -> darkest. */
    --im-scale-0: #EAF3FE;
    --im-scale-1: #C5DEFA;
    --im-scale-2: #8FBDF3;
    --im-scale-3: #4E93E6;
    --im-scale-4: #1976D2;
    --im-scale-5: #0D4A94;
    /* Text on each scale step (>= 4.5:1). */
    --im-scale-ink-0: #2F3349;
    --im-scale-ink-1: #2F3349;
    --im-scale-ink-2: #2F3349;
    --im-scale-ink-3: #0B1B33;
    --im-scale-ink-4: #FFFFFF;
    --im-scale-ink-5: #FFFFFF;

    --im-radius-card: 8px;
    --im-card-shadow: 0 2px 8px 0 rgba(47, 51, 73, 0.10);
    --im-radius-control: 6px;
    --im-btn-shadow-alpha: 40%;
    --im-focus-ring: 0 0 0 3px color-mix(in srgb, var(--im-accent-text) 35%, transparent);
    --im-touch-target: 44px;
    /* ---- Home / shell (sidebar, top bar, launcher cards) ---- */
    --im-page-bg: #F5F6FA;
    --im-card-border: #E9EBF2;
    --im-card-padding: 24px;
    --im-radius-lg: 10px;
    --im-divider: #EDEFF5;
    --im-icon-bg: #E8F2FC;          /* icon tile behind the line icons */
    --im-chevron: #6E7488;
    --im-muted-strong: #4A4F66;     /* detail lists */
    --im-limit-text: #B42318;       /* exceeded plan limit link */
    --im-pill-bg: #EDEFF5;          /* Beta / Partial */
    --im-pill-text: #565B73;
    --im-addon-bg: #E8F2FC;
    --im-addon-text: #1565C0;
    --im-nav-bg: #FFFFFF;
    --im-nav-text: #2F3349;
    --im-nav-sub-text: #4A4F66;
    --im-nav-muted: #7B8197;
    --im-nav-active-bg: #1976D2;
    --im-nav-hover-bg: #F1F3F8;
    --im-topbar-height: 64px;
    --im-sidebar-width: 240px;
}

[data-bs-theme="dark"] {
    --im-primary: #1976D2;
    --im-primary-dark: #2A86E4;     /* hover lightens on dark backgrounds */
    --im-primary-tint: #1F2D4A;
    --im-primary-disabled: #2A4A78;
    --im-btn-disabled-bg: #3A3F5A;
    --im-btn-disabled-color: #8087A3;
    --im-btn-disabled-border: #3A3F5A;
    --im-accent-text: #6DB3F8;
    --im-accent-text-hover: #A2CFFB;
    --im-secondary: #292D42;
    --im-success: #1F9D55;
    --im-success-text: #5FD08C;
    --im-danger: #F0605A;
    --im-danger-fill: #D92D20;
    --im-warning: #E8720C;
    --im-info: #0891B2;
    --im-slate: #7A819C;
    --im-dark: #5B5F86;
    --im-neutral: #6B7190;
    --im-ink: #E1E3F0;
    --im-muted: #A3A9C4;
    --im-border: #3F4461;
    --im-surface: #2F3349;
    --im-on-primary: #FFFFFF;
    --im-btn-shadow-alpha: 45%;

    --im-scale-0: #1F2D4A;
    --im-scale-1: #23406E;
    --im-scale-2: #2A5BA0;
    --im-scale-3: #3B7FD0;
    --im-scale-4: #6DB3F8;
    --im-scale-5: #A9D1FB;
    --im-scale-ink-0: #E1E3F0;
    --im-scale-ink-1: #E1E3F0;
    --im-scale-ink-2: #E1E3F0;
    --im-scale-ink-3: #FFFFFF;
    --im-scale-ink-4: #0F1B30;
    --im-scale-ink-5: #0F1B30;
    --im-page-bg: #25293C;
    --im-card-border: #3A3F5A;
    --im-card-shadow: 0 2px 8px 0 rgba(10, 12, 24, 0.35);
    --im-divider: #3A3F5A;
    --im-icon-bg: #1F2D4A;
    --im-chevron: #A3A9C4;
    --im-muted-strong: #C5C9DE;
    --im-limit-text: #F0605A;
    --im-pill-bg: #3A3F5A;
    --im-pill-text: #C5C9DE;
    --im-addon-bg: #1F2D4A;
    --im-addon-text: #6DB3F8;
    --im-nav-bg: #2F3349;
    --im-nav-text: #E1E3F0;
    --im-nav-sub-text: #C5C9DE;
    --im-nav-muted: #8F95B2;
    --im-nav-active-bg: #1976D2;
    --im-nav-hover-bg: #3A3F5A;
}

/* ---- Page background: only behind the authenticated app shell (not Landing/auth pages). ---- */
body:has(.main-content),
body:has(#layout-wrapper) {
    --bs-body-bg: var(--im-page-bg);
    background-color: var(--im-page-bg) !important;
}

[data-bs-theme="dark"] body:has(.main-content),
[data-bs-theme="dark"] body:has(#layout-wrapper) {
    --bs-body-bg: var(--im-page-bg);
    background-color: var(--im-page-bg) !important;
}

#layout-wrapper,
.main-content,
.main-content .page-content {
    background-color: var(--im-page-bg);
}

[data-bs-theme="dark"] #layout-wrapper,
[data-bs-theme="dark"] .main-content,
[data-bs-theme="dark"] .main-content .page-content {
    background-color: var(--im-page-bg);
}

/* ---- Bootstrap/Skote remap, content area only (the sidebar keeps its own variables). ---- */
.main-content {
    --bs-body-bg: var(--im-page-bg);
    --bs-primary: var(--im-primary);
    --bs-primary-rgb: 25, 118, 210;
    --bs-link-color: var(--im-accent-text);
    --bs-link-color-rgb: 25, 118, 210;
    --bs-link-hover-color: var(--im-accent-text-hover);
    --bs-body-color: var(--im-ink);
    --bs-emphasis-color: var(--im-ink);
    --bs-secondary-color: var(--im-muted);
    --bs-border-color: var(--im-border);
    --bs-card-bg: var(--im-surface);
    --bs-secondary-bg: var(--im-surface);
    --bs-tertiary-bg: var(--im-secondary);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .main-content {
    --bs-primary-rgb: 25, 118, 210;
    --bs-link-color-rgb: 109, 179, 248;
}

.main-content .text-muted {
    color: var(--im-muted) !important;
}

/* Plain links (no utility classes) follow the accent; app.css's template blue is overridden here. */
.main-content a:not([class]),
.main-content .btn-link {
    color: var(--im-accent-text);
}

.main-content a:not([class]):hover,
.main-content .btn-link:hover {
    color: var(--im-accent-text-hover);
}

/* Bootstrap primary buttons (legacy markup still using .btn-primary). */
.main-content .btn-primary {
    --bs-btn-color: var(--im-on-primary);
    --bs-btn-bg: var(--im-primary);
    --bs-btn-border-color: var(--im-primary);
    --bs-btn-hover-color: var(--im-on-primary);
    --bs-btn-hover-bg: var(--im-primary-dark);
    --bs-btn-hover-border-color: var(--im-primary-dark);
    --bs-btn-active-color: var(--im-on-primary);
    --bs-btn-active-bg: var(--im-primary-dark);
    --bs-btn-active-border-color: var(--im-primary-dark);
    --bs-btn-disabled-bg: var(--im-btn-disabled-bg);
    --bs-btn-disabled-border-color: var(--im-btn-disabled-border);
    --bs-btn-disabled-color: var(--im-btn-disabled-color);
    /* app.css sets these directly (template blue), so the variables alone don't win. */
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

.main-content .btn-primary:hover,
.main-content .btn-primary:active {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.main-content .btn-primary:disabled,
.main-content .btn-primary.disabled {
    background-color: var(--im-btn-disabled-bg) !important;
    color: var(--im-btn-disabled-color) !important;
    border-color: var(--im-btn-disabled-border) !important;
}

/* ---- Public landing page: same primary/link/button remap (it is not inside .main-content). ---- */
.landing-page {
    --bs-primary: var(--im-primary);
    --bs-primary-rgb: 25, 118, 210;
    --bs-link-color: var(--im-accent-text);
    --bs-link-color-rgb: 25, 118, 210;
    --bs-link-hover-color: var(--im-accent-text-hover);
}

.landing-page a:not([class]),
.landing-page .btn-link {
    color: var(--im-accent-text);
}

.landing-page a:not([class]):hover,
.landing-page .btn-link:hover {
    color: var(--im-accent-text-hover);
}

.landing-page .btn-primary {
    --bs-btn-color: var(--im-on-primary);
    --bs-btn-bg: var(--im-primary);
    --bs-btn-border-color: var(--im-primary);
    --bs-btn-hover-color: var(--im-on-primary);
    --bs-btn-hover-bg: var(--im-primary-dark);
    --bs-btn-hover-border-color: var(--im-primary-dark);
    --bs-btn-active-color: var(--im-on-primary);
    --bs-btn-active-bg: var(--im-primary-dark);
    --bs-btn-active-border-color: var(--im-primary-dark);
    --bs-btn-disabled-bg: var(--im-btn-disabled-bg);
    --bs-btn-disabled-border-color: var(--im-btn-disabled-border);
    --bs-btn-disabled-color: var(--im-btn-disabled-color);
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

.landing-page .btn-primary:hover,
.landing-page .btn-primary:active {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.landing-page .btn-primary:disabled,
.landing-page .btn-primary.disabled {
    background-color: var(--im-btn-disabled-bg) !important;
    color: var(--im-btn-disabled-color) !important;
    border-color: var(--im-btn-disabled-border) !important;
}

/* ---- Auth shell (Login, Register, Recover Password - outside .main-content). ---- */
.auth-shell {
    --bs-primary: var(--im-primary);
    --bs-primary-rgb: 25, 118, 210;
    --bs-link-color: var(--im-accent-text);
    --bs-link-color-rgb: 25, 118, 210;
    --bs-link-hover-color: var(--im-accent-text-hover);
}

.auth-shell .text-primary {
    color: var(--im-primary) !important;
}

.auth-shell a:not([class]),
.auth-shell .btn-link {
    color: var(--im-accent-text);
}

.auth-shell a:not([class]):hover,
.auth-shell .btn-link:hover {
    color: var(--im-accent-text-hover);
}

.auth-shell .btn-primary {
    --bs-btn-color: var(--im-on-primary);
    --bs-btn-bg: var(--im-primary);
    --bs-btn-border-color: var(--im-primary);
    --bs-btn-hover-color: var(--im-on-primary);
    --bs-btn-hover-bg: var(--im-primary-dark);
    --bs-btn-hover-border-color: var(--im-primary-dark);
    --bs-btn-active-color: var(--im-on-primary);
    --bs-btn-active-bg: var(--im-primary-dark);
    --bs-btn-active-border-color: var(--im-primary-dark);
    --bs-btn-disabled-bg: var(--im-btn-disabled-bg);
    --bs-btn-disabled-border-color: var(--im-btn-disabled-border);
    --bs-btn-disabled-color: var(--im-btn-disabled-color);
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

.auth-shell .btn-primary:hover,
.auth-shell .btn-primary:active {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.auth-shell .btn-primary:disabled,
.auth-shell .btn-primary.disabled {
    background-color: var(--im-btn-disabled-bg) !important;
    color: var(--im-btn-disabled-color) !important;
    border-color: var(--im-btn-disabled-border) !important;
}

/* Universal primary button guarantee: DxButton and .btn-primary match brand primary everywhere */
.dxbl-btn.dxbl-btn-primary,
.dxbl-btn.dxbl-btn-primary.dxbl-btn-contained,
.btn-primary {
    --bs-btn-color: var(--im-on-primary);
    --bs-btn-bg: var(--im-primary);
    --bs-btn-border-color: var(--im-primary);
    --bs-btn-hover-color: var(--im-on-primary);
    --bs-btn-hover-bg: var(--im-primary-dark);
    --bs-btn-hover-border-color: var(--im-primary-dark);
    --bs-btn-active-color: var(--im-on-primary);
    --bs-btn-active-bg: var(--im-primary-dark);
    --bs-btn-active-border-color: var(--im-primary-dark);
    --dxbl-btn-bg: var(--im-primary);
    --dxbl-btn-color: var(--im-on-primary);
    --dxbl-btn-border-color: var(--im-primary);
    --dxbl-btn-hover-bg: var(--im-primary-dark);
    --dxbl-btn-hover-color: var(--im-on-primary);
    --dxbl-btn-hover-border-color: var(--im-primary-dark);
    --dxbl-btn-active-bg: var(--im-primary-dark);
    --dxbl-btn-active-color: var(--im-on-primary);
    --dxbl-btn-active-border-color: var(--im-primary-dark);
}

.dxbl-btn.dxbl-btn-primary.dxbl-btn-contained:not(:disabled):not(.dxbl-disabled),
.btn-primary:not(:disabled):not(.disabled) {
    background-color: var(--im-primary) !important;
    border-color: var(--im-primary) !important;
    color: var(--im-on-primary) !important;
}

.dxbl-btn.dxbl-btn-primary.dxbl-btn-contained:not(:disabled):not(.dxbl-disabled):hover,
.dxbl-btn.dxbl-btn-primary.dxbl-btn-contained:not(:disabled):not(.dxbl-disabled):active,
.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--im-primary-dark) !important;
    border-color: var(--im-primary-dark) !important;
    color: var(--im-on-primary) !important;
}

/* ---- All disabled buttons across the app (DevExpress DxButton, Bootstrap .btn, native button) ---- */
button:disabled,
button.disabled,
button.dxbl-disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn,
.dxbl-btn:disabled,
.dxbl-btn.dxbl-disabled,
.dxbl-btn[disabled],
.btn[disabled],
[aria-disabled="true"].btn,
[aria-disabled="true"].dxbl-btn {
    --bs-btn-disabled-bg: var(--im-btn-disabled-bg);
    --bs-btn-disabled-color: var(--im-btn-disabled-color);
    --bs-btn-disabled-border-color: var(--im-btn-disabled-border);
    --bs-btn-disabled-opacity: 1;
    --dxbl-btn-bg: var(--im-btn-disabled-bg);
    --dxbl-btn-color: var(--im-btn-disabled-color);
    --dxbl-btn-border-color: var(--im-btn-disabled-border);
    --dxbl-btn-disabled-bg: var(--im-btn-disabled-bg);
    --dxbl-btn-disabled-color: var(--im-btn-disabled-color);
    --dxbl-btn-disabled-border-color: var(--im-btn-disabled-border);
    --dxbl-btn-caption-disabled-opacity: 1;
    --dxbl-btn-icon-disabled-opacity: 1;
    background: var(--im-btn-disabled-bg) !important;
    background-color: var(--im-btn-disabled-bg) !important;
    background-image: none !important;
    color: var(--im-btn-disabled-color) !important;
    border-color: var(--im-btn-disabled-bg) !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

button:disabled:hover,
button:disabled:active,
button:disabled:focus,
button.disabled:hover,
button.disabled:active,
button.disabled:focus,
button.dxbl-disabled:hover,
button.dxbl-disabled:active,
button.dxbl-disabled:focus,
.btn:disabled:hover,
.btn:disabled:active,
.btn:disabled:focus,
.btn.disabled:hover,
.btn.disabled:active,
.btn.disabled:focus,
.dxbl-btn:disabled:hover,
.dxbl-btn:disabled:active,
.dxbl-btn:disabled:focus,
.dxbl-btn.dxbl-disabled:hover,
.dxbl-btn.dxbl-disabled:active,
.dxbl-btn.dxbl-disabled:focus {
    background: var(--im-btn-disabled-bg) !important;
    background-color: var(--im-btn-disabled-bg) !important;
    color: var(--im-btn-disabled-color) !important;
    border-color: var(--im-btn-disabled-bg) !important;
    box-shadow: none !important;
}

button:disabled *,
button.disabled *,
button.dxbl-disabled *,
input[type="button"]:disabled *,
input[type="submit"]:disabled *,
input[type="reset"]:disabled *,
.btn:disabled *,
.btn.disabled *,
fieldset:disabled .btn *,
.dxbl-btn:disabled *,
.dxbl-btn.dxbl-disabled *,
.dxbl-btn[disabled] *,
.btn[disabled] *,
[aria-disabled="true"].btn *,
[aria-disabled="true"].dxbl-btn * {
    color: var(--im-btn-disabled-color) !important;
    opacity: 1 !important;
}

/* ---- Cards: --im-radius-card, 1px --im-card-border, --im-card-shadow ---- */
.card,
.card.shadow,
.card.shadow-sm,
.card.shadow-lg,
.main-content .card,
.main-content .card.shadow,
.main-content .card.shadow-sm,
.main-content .card.shadow-lg,
.auth-shell .card,
.landing-page .card,
.im-kpi,
.im-section,
.im-group,
.im-report-card,
.im-brand-card,
.wf-card,
.persona-detailed-card,
.asset-card,
.selected-asset-card,
.asset-picker-card {
    --bs-card-border-width: 1px;
    --bs-card-border-color: var(--im-card-border);
    --bs-card-border-radius: var(--im-radius-card);
    --bs-card-inner-border-radius: calc(var(--im-radius-card) - 1px);
    --bs-card-box-shadow: var(--im-card-shadow);
    border: 1px solid var(--im-card-border);
    border-radius: var(--im-radius-card);
    box-shadow: var(--im-card-shadow) !important;
}

/* Insight cards have no shadow */
.im-insight {
    box-shadow: none !important;
}

/* ---- Dark mode: cards keep the (deeper) token shadow; border from --im-card-border ---- */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card.shadow,
[data-bs-theme="dark"] .card.shadow-sm,
[data-bs-theme="dark"] .card.shadow-lg,
[data-bs-theme="dark"] .main-content .card,
[data-bs-theme="dark"] .main-content .card.shadow,
[data-bs-theme="dark"] .main-content .card.shadow-sm,
[data-bs-theme="dark"] .main-content .card.shadow-lg,
[data-bs-theme="dark"] .auth-shell .card,
[data-bs-theme="dark"] .landing-page .card,
[data-bs-theme="dark"] .im-kpi,
[data-bs-theme="dark"] .im-section,
[data-bs-theme="dark"] .im-group,
[data-bs-theme="dark"] .im-report-card,
[data-bs-theme="dark"] .im-brand-card,
[data-bs-theme="dark"] .wf-card,
[data-bs-theme="dark"] .persona-detailed-card,
[data-bs-theme="dark"] .asset-card,
[data-bs-theme="dark"] .selected-asset-card,
[data-bs-theme="dark"] .asset-picker-card,
[data-layout-mode="dark"] .card,
[data-layout-mode="dark"] .card.shadow,
[data-layout-mode="dark"] .card.shadow-sm,
[data-layout-mode="dark"] .card.shadow-lg,
[data-layout-mode="dark"] .main-content .card,
[data-layout-mode="dark"] .im-kpi,
[data-layout-mode="dark"] .im-section,
[data-layout-mode="dark"] .im-group,
[data-layout-mode="dark"] .im-report-card,
[data-layout-mode="dark"] .im-brand-card,
[data-layout-mode="dark"] .wf-card,
[data-layout-mode="dark"] .persona-detailed-card,
[data-layout-mode="dark"] .asset-card,
[data-layout-mode="dark"] .selected-asset-card,
[data-layout-mode="dark"] .asset-picker-card {
    --bs-card-border-width: 1px;
    --bs-card-border-color: var(--im-card-border);
    --bs-card-box-shadow: var(--im-card-shadow);
    border: 1px solid var(--im-card-border) !important;
    box-shadow: var(--im-card-shadow) !important;
}

/* ---- Focus visibility for keyboard users across the content area. ---- */
.main-content :focus-visible {
    outline: 2px solid var(--im-accent-text);
    outline-offset: 2px;
}

/* DevExpress editors draw their own focus state (border + underline); no extra outline box. */
.main-content [class*="dxbl-"] :focus-visible,
.main-content [class*="dxbl-"]:focus-visible {
    outline: none;
}

/* Visually hidden but available to screen readers. */
.im-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Delta colors shared by KPI cards, grids and insight cards. */
.im-delta-up { color: var(--im-success-text); }
.im-delta-down { color: var(--im-danger); }
.im-delta-flat { color: var(--im-muted); }

/* Shared loading placeholder for pages that prerender a skeleton (Home keeps its own scoped copy). */
.im-skeleton {
    border-radius: var(--im-radius-card);
    background: linear-gradient(90deg, var(--im-surface) 25%, var(--im-border) 37%, var(--im-surface) 63%);
    background-size: 400% 100%;
    animation: im-skeleton-pulse 1.4s ease infinite;
}

@keyframes im-skeleton-pulse {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .im-skeleton { animation: none; }
}

/* ---- DxGrid Cell Buttons: small compact sizing ---- */
.dxbl-grid td .dxbl-btn,
.dxbl-grid .dxbl-grid-table td .dxbl-btn,
.dxbl-grid-cell-content .dxbl-btn,
.dxbl-grid td button,
.dxbl-grid-cell-content button {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8125rem !important;
    min-height: unset !important;
    line-height: 1.25 !important;
}


/* ---- Typography ---- */
body,
.main-content,
.dxbl-btn,
.dxbl-text-edit,
[class*="dxbl-"],
[class*="dxbl-"] text,
.e-control,
.e-css {
    font-family: var(--im-font);
}

/* Bootstrap (Skote) reads these two; the weights 300-700 of Poppins are imported by assets/css/app.min.css. */
:root {
    --bs-body-font-family: var(--im-font);
    --bs-font-sans-serif: var(--im-font);
}

/* ---- Semantic action colors (contained only). One definition drives DxButton and Bootstrap .btn. ---- */
.main-content,
.landing-page,
.auth-shell {
    --bs-success: var(--im-success);
    --bs-success-rgb: 31, 157, 85;
    --bs-danger: var(--im-danger);
    --bs-warning: var(--im-warning);
    --bs-info: var(--im-info);
    --bs-secondary: var(--im-slate);
    --bs-dark: var(--im-dark);
}

.btn-secondary, .dxbl-btn.dxbl-btn-secondary.dxbl-btn-contained { --im-btn: var(--im-slate); }
.btn-success,   .dxbl-btn.dxbl-btn-success.dxbl-btn-contained   { --im-btn: var(--im-success); }
.btn-danger,    .dxbl-btn.dxbl-btn-danger.dxbl-btn-contained    { --im-btn: var(--im-danger-fill); }
.btn-warning,   .dxbl-btn.dxbl-btn-warning.dxbl-btn-contained   { --im-btn: var(--im-warning); }
.btn-info,      .dxbl-btn.dxbl-btn-info.dxbl-btn-contained      { --im-btn: var(--im-info); }
.btn-dark,      .dxbl-btn.dxbl-btn-dark.dxbl-btn-contained      { --im-btn: var(--im-dark); }
.btn-primary,   .dxbl-btn.dxbl-btn-primary.dxbl-btn-contained   { --im-btn: var(--im-primary); }

.btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark,
.dxbl-btn.dxbl-btn-secondary.dxbl-btn-contained,
.dxbl-btn.dxbl-btn-success.dxbl-btn-contained,
.dxbl-btn.dxbl-btn-danger.dxbl-btn-contained,
.dxbl-btn.dxbl-btn-warning.dxbl-btn-contained,
.dxbl-btn.dxbl-btn-info.dxbl-btn-contained,
.dxbl-btn.dxbl-btn-dark.dxbl-btn-contained {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--im-btn);
    --bs-btn-border-color: var(--im-btn);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--im-btn) 88%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--im-btn) 88%, #000);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--im-btn) 80%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--im-btn) 80%, #000);
    --dxbl-btn-bg: var(--im-btn);
    --dxbl-btn-color: #fff;
    --dxbl-btn-border-color: var(--im-btn);
    --dxbl-btn-hover-bg: color-mix(in srgb, var(--im-btn) 88%, #000);
    --dxbl-btn-hover-color: #fff;
    --dxbl-btn-hover-border-color: color-mix(in srgb, var(--im-btn) 88%, #000);
    --dxbl-btn-active-bg: color-mix(in srgb, var(--im-btn) 80%, #000);
    --dxbl-btn-active-color: #fff;
    --dxbl-btn-active-border-color: color-mix(in srgb, var(--im-btn) 80%, #000);
}

.btn-secondary:not(:disabled):not(.disabled), .btn-success:not(:disabled):not(.disabled),
.btn-danger:not(:disabled):not(.disabled), .btn-warning:not(:disabled):not(.disabled),
.btn-info:not(:disabled):not(.disabled), .btn-dark:not(:disabled):not(.disabled),
.dxbl-btn.dxbl-btn-secondary.dxbl-btn-contained:not(:disabled):not(.dxbl-disabled),
.dxbl-btn.dxbl-btn-success.dxbl-btn-contained:not(:disabled):not(.dxbl-disabled),
.dxbl-btn.dxbl-btn-danger.dxbl-btn-contained:not(:disabled):not(.dxbl-disabled),
.dxbl-btn.dxbl-btn-warning.dxbl-btn-contained:not(:disabled):not(.dxbl-disabled),
.dxbl-btn.dxbl-btn-info.dxbl-btn-contained:not(:disabled):not(.dxbl-disabled),
.dxbl-btn.dxbl-btn-dark.dxbl-btn-contained:not(:disabled):not(.dxbl-disabled) {
    background-color: var(--im-btn) !important;
    border-color: var(--im-btn) !important;
    color: #fff !important;
}

.btn-secondary:not(:disabled):not(.disabled):hover, .btn-success:not(:disabled):not(.disabled):hover,
.btn-danger:not(:disabled):not(.disabled):hover, .btn-warning:not(:disabled):not(.disabled):hover,
.btn-info:not(:disabled):not(.disabled):hover, .btn-dark:not(:disabled):not(.disabled):hover,
.dxbl-btn.dxbl-btn-secondary.dxbl-btn-contained:not(:disabled):not(.dxbl-disabled):hover,
.dxbl-btn.dxbl-btn-success.dxbl-btn-contained:not(:disabled):not(.dxbl-disabled):hover,
.dxbl-btn.dxbl-btn-danger.dxbl-btn-contained:not(:disabled):not(.dxbl-disabled):hover,
.dxbl-btn.dxbl-btn-warning.dxbl-btn-contained:not(:disabled):not(.dxbl-disabled):hover,
.dxbl-btn.dxbl-btn-info.dxbl-btn-contained:not(:disabled):not(.dxbl-disabled):hover,
.dxbl-btn.dxbl-btn-dark.dxbl-btn-contained:not(:disabled):not(.dxbl-disabled):hover {
    background-color: color-mix(in srgb, var(--im-btn) 88%, #000) !important;
    border-color: color-mix(in srgb, var(--im-btn) 88%, #000) !important;
}

/* Contained buttons: tinted drop shadow in the button's own color, radius from the token. */
.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark,
.dxbl-btn.dxbl-btn-contained {
    border-radius: var(--im-radius-control);
    font-weight: 500;
}

.btn-primary:not(:disabled):not(.disabled), .btn-secondary:not(:disabled):not(.disabled),
.btn-success:not(:disabled):not(.disabled), .btn-danger:not(:disabled):not(.disabled),
.btn-warning:not(:disabled):not(.disabled), .btn-info:not(:disabled):not(.disabled),
.btn-dark:not(:disabled):not(.disabled),
.dxbl-btn.dxbl-btn-contained:not(:disabled):not(.dxbl-disabled) {
    box-shadow: 0 2px 4px 0 color-mix(in srgb, var(--im-btn, var(--im-primary)) var(--im-btn-shadow-alpha), transparent);
}

.dxbl-btn.dxbl-btn-contained:not(:disabled):not(.dxbl-disabled):active,
.btn:not(:disabled):not(.disabled):active {
    box-shadow: none;
}

/* Optional pill shape (Vuexy "rounded"): add class .im-btn-pill. */
.im-btn-pill {
    border-radius: 999px !important;
}

/* ---- DevExpress dark mode: Fluent's own dark palette (class on <html>, see App.razor), tinted to our navy surfaces ---- */
[data-bs-theme="dark"] {
    --dxds-color-surface-neutral-default-rest: var(--im-surface);
    --dxds-color-surface-neutral-subdued-rest: var(--im-secondary);
    --dxds-color-border-neutral-default-rest: var(--im-border);
    --dxds-color-content-neutral-default-rest: var(--im-ink);
}

/* ---- Grids: header row on the subtle fill, small uppercase labels (Vuexy table look) ---- */
.dxbl-grid .dxbl-grid-table > thead > tr > th,
.dxbl-grid .dxbl-grid-header-row > th {
    /* The whole header cell carries the fill (and its borders match it), so no white frame shows around the label. */
    background-color: var(--im-secondary);
    border-color: var(--im-secondary);
    color: var(--im-ink);
}
.dxbl-grid .dxbl-grid-header-row .dxbl-grid-header-content {
    background-color: transparent;
    color: var(--im-ink);
}
.dxbl-grid .dxbl-grid-header-row .dxbl-grid-header-content {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.dxbl-grid .dxbl-grid-table tbody tr:hover > td { background-color: var(--im-primary-tint); }