:root {
    /* Mirion brand (mirion.com) — shared across light/dark */
    --mirion-navy: #0c1f33;
    --mirion-industrial: #3d5266;
    --mirion-link: #006199;
    --mirion-link-soft: #3d9cc9;
    --mirion-orange: #e16b2a;

    --mcots-mirion-orange: var(--mirion-orange);
    --mcots-topbar-height: 58px;
    --mcots-sidebar-width: 17rem; /* ~272px @ 16px root; grows with --mcots-font-scale */
    --mcots-topbar-btn-radius: 5px;
    --mcots-topbar-btn-font-size: var(--mcots-font-base, 0.875rem);
    --mcots-topbar-btn-font-weight: 400;
    --mcots-app-login-gap: 0.3rem;
    --mcots-nav-icon-tds-filter: brightness(0.52);
    --mcots-nav-active-tds-filter: brightness(0.48);

    /* Light mode (default) — Mirion.com-inspired shell */
    --mcots-topbar: #ffffff;
    --mcots-topbar-border: #e2e8ee;
    --mcots-sidebar: #f8fafb;
    --mcots-sidebar-border: #e2e8ee;
    --mcots-bg: #f4f7f9;
    --mcots-surface: #ffffff;
    --mcots-surface-soft: #f0f3f6;

    --mcots-text: var(--mirion-navy);
    --mcots-text-soft: var(--mirion-industrial);
    --mcots-text-muted: rgba(61, 82, 102, 0.65);
    --mcots-text-dim: rgba(12, 31, 51, 0.82);
    --mcots-chevron: rgba(12, 31, 51, 0.55);
    --mcots-border: rgba(12, 31, 51, 0.1);
    --mcots-border-strong: rgba(12, 31, 51, 0.16);
    --mcots-submenu-rail: rgba(12, 31, 51, 0.14);

    --mcots-accent: var(--mirion-link);
    --mcots-nav-active-bg: rgba(225, 107, 42, 0.12);
    --mcots-nav-active-bg-hover: rgba(225, 107, 42, 0.2);
    --mcots-nav-active-icon: var(--mirion-navy);
    --mcots-nav-hover-bg: rgba(12, 31, 51, 0.06);
    --mcots-nav-hover-border: rgba(12, 31, 51, 0.06);

    --mcots-brand-title-color: var(--mirion-navy);
    --mcots-brand-subtitle-color: rgba(61, 82, 102, 0.75);
    --mcots-footer-bg: rgba(255, 255, 255, 0.65);
    --mcots-footer-text: rgba(61, 82, 102, 0.7);
    --mcots-footer-brand-color: var(--mirion-navy);
    --mcots-footer-version-color: var(--mirion-industrial);
    --mcots-footer-inset: transparent;

    --mcots-control-bg: transparent;
    --mcots-control-border: rgba(12, 31, 51, 0.28);
    --mcots-control-color: var(--mirion-navy);
    --mcots-control-hover-bg: rgba(12, 31, 51, 0.06);
    --mcots-control-hover-border: rgba(12, 31, 51, 0.4);
    --mcots-control-hover-color: var(--mirion-navy);
    --mcots-hamburger-line: var(--mirion-navy);
    --mcots-home-link-hover: rgba(12, 31, 51, 0.06);

    --mcots-sign-in-color: var(--mirion-navy);
    --mcots-sign-in-border: rgba(12, 31, 51, 0.35);
    --mcots-sign-in-hover-bg: rgba(12, 31, 51, 0.06);

    --mcots-input-bg: #ffffff;
    --mcots-input-color: var(--mirion-navy);
    --mcots-input-border: rgba(12, 31, 51, 0.2);
    --mcots-radius-sm: 4px;
    --mcots-radius-md: .5rem;
    --mcots-modal-radius: 12px;
    --mcots-control-radius: var(--mcots-radius-sm);
    --mcots-table-radius: var(--mcots-radius-sm);
    --mcots-shell-border: var(--mcots-topbar-border);
    --mcots-card-radius: 12px;
    --mcots-card-shadow: none;
    --mcots-card-border: var(--mcots-shell-border);
    --mcots-card-divider: var(--mcots-shell-border);
    --mcots-topmenubar-dropdown-bg: #ffffff;
    --mcots-modal-bg: var(--mcots-surface);
    --mcots-modal-header-bg: var(--mcots-surface-soft);
    --mcots-modal-backdrop: rgba(12, 31, 51, 0.45);

    /* Module kit tokens (shared contract with Blazor Theme) */
    --mcots-accent-soft: rgba(0, 97, 153, 0.14);
    --mcots-accent-softer: rgba(0, 97, 153, 0.08);
    --mcots-focus-ring: 0 0 0 .2rem rgba(225, 107, 42, 0.28);
    --mcots-danger: var(--mcots-error);
    --mcots-badge-bg: #eef1f4;
    --mcots-badge-border: #d4dbe3;
    --mcots-badge-text: var(--mcots-text-soft);
    --mcots-segment-track: var(--mcots-surface-soft);
    --mcots-segment-active-bg: var(--mcots-accent);
    --mcots-segment-active-text: #ffffff;
    --mcots-disabled-bg: #e8eef2;
    --mcots-disabled-border: #cfd8e0;

    /* Type scale (kit + shell). Values are rem; --mcots-font-scale bumps root on large screens. */
    --mcots-font-scale: 1;
    --mcots-font-2xs: 0.675rem;       /* was 0.625 + 0.05 */
    --mcots-font-2xs-plus: 0.70625rem;
    --mcots-font-xs: 0.7375rem;
    --mcots-font-sm: 0.8rem;
    --mcots-font-sm-plus: 0.83125rem;
    --mcots-font-md: 0.8625rem;
    --mcots-font-base: 0.925rem;
    --mcots-font-lg: 0.9875rem;
    --mcots-font-xl: 1.425rem;
    --mcots-font-2xl: 1.675rem;
    --mcots-font-title: 1.4rem;
    --mcots-font-display: 1.7rem;

    --mcots-card-body-padding: 1.25rem;
    --mcots-card-cap-padding-y: 0.65rem;
    --mcots-card-cap-padding-x: 1.25rem;
    --mcots-card-header-bg: #ffffff;
    --mcots-card-header-color: var(--mirion-navy);
    --mcots-card-footer-bg: #ffffff;
    --mcots-card-footer-color: var(--mcots-text-soft);
    --mcots-card-title-color: var(--mirion-navy);
    --mcots-card-subtitle-color: var(--mirion-industrial);
    --mcots-btn-secondary-bg: #e8eef2;
    --mcots-btn-secondary-border: #cfd8e0;
    --mcots-btn-secondary-color: var(--mirion-navy);
    --mcots-link-color: var(--mirion-link);
    --mcots-link-hover-color: var(--mirion-link-soft);

    --mcots-grid-header-bg: var(--mcots-surface-soft);
    --mcots-grid-header-color: var(--mcots-text-soft);
    --mcots-grid-row-bg: var(--mcots-surface);
    --mcots-grid-row-alt-bg: #f8fafb;
    --mcots-grid-border: var(--mcots-shell-border);
    --mcots-grid-row-color: var(--mcots-text);
    --mcots-grid-row-hover-bg: #f0f3f6;
    --mcots-row-selected-bg: rgba(225, 107, 42, 0.08);
    --mcots-row-selected-alt-bg: rgba(225, 107, 42, 0.10);
    --mcots-row-selected-color: var(--mcots-text);
    --mcots-row-selected-rail: var(--mcots-mirion-orange);
    --mcots-cell-selected-bg: rgba(225, 107, 42, 0.06);
    --mcots-tab-inactive: var(--mcots-text-soft);
    --mcots-tab-active: var(--mcots-text);
    --mcots-tab-hover-bg: rgba(12, 31, 51, 0.04);
    --mcots-tab-hover-border: transparent;
    --mcots-tab-active-border: var(--mcots-shell-border);
    --mcots-tab-active-radius: var(--mcots-radius-sm) var(--mcots-radius-sm) 0 0;
    --mcots-tab-indicator: var(--mirion-orange);
    --mcots-chart-label: var(--mcots-text-soft);
    --mcots-chart-axis-line: var(--mcots-border-strong);
    --mcots-chart-grid-line: var(--mcots-border);

    --mcots-notify-zero-bg: rgba(12, 31, 51, 0.08);
    --mcots-notify-zero-color: var(--mirion-industrial);
    --mcots-notify-zero-border: rgba(12, 31, 51, 0.15);
    --mcots-pencil-active-bg: rgba(0, 97, 153, 0.12);
    --mcots-pencil-active-border: rgba(0, 97, 153, 0.35);

    /* Syncfusion grid selected row/cell — soft tint (light) */
    --mcots-row-selected-bg: rgba(225, 107, 42, 0.10);
    --mcots-row-selected-alt-bg: rgba(225, 107, 42, 0.14);
    --mcots-cell-selected-bg: rgba(225, 107, 42, 0.08);
    --mcots-row-selected-rail: var(--mcots-mirion-orange);

    --mcots-scrollbar-track: rgba(12, 31, 51, 0.06);
    --mcots-scrollbar-thumb: rgba(12, 31, 51, 0.28);
    --mcots-scrollbar-thumb-hover: rgba(12, 31, 51, 0.42);

    /* Legacy aliases used in rules below */
    --mcots-chevron-on-dark: var(--mcots-chevron);
    --mcots-border-on-dark: var(--mcots-border);
    --mcots-border-on-dark-strong: var(--mcots-border-strong);

    /* Accounting/dashboard modules (--acct-* in module scoped styles) */
    --acct-bg: var(--mcots-surface);
    --acct-border: var(--mcots-card-border);
    --acct-text: var(--mcots-text);
    --acct-muted: var(--mcots-text-soft);
    --acct-overlay: var(--mcots-modal-backdrop);
    --acct-notbill-bg: var(--mcots-surface-soft);
    --acct-overdue: var(--mcots-error);

    /* Semantic palette — sourced from Dashboard KPI icons + notification badges.
       Shared across ALL modules for consistent status/indicator colors. */
    --mcots-success: #2f7d69;
    --mcots-success-soft: rgba(47, 125, 105, 0.12);
    --mcots-warning: #b06000;
    --mcots-warning-soft: rgba(255, 165, 0, 0.14);
    --mcots-info: #1a73e8;
    --mcots-info-soft: rgba(26, 115, 232, 0.12);
    --mcots-error: #d93025;
    --mcots-error-soft: rgba(217, 48, 37, 0.10);
    --mcots-neutral: #6c7a92;
    --mcots-neutral-soft: rgba(108, 122, 146, 0.12);

    /* KPI accent colors — for data viz, icons, charts */
    --mcots-kpi-revenue: #5f9f7a;
    --mcots-kpi-ready: #2f7d69;
    --mcots-kpi-estimate: #b39a63;
    --mcots-kpi-awaiting: #3f6d8f;
    --mcots-kpi-active: #6c7a92;
    --mcots-kpi-total: #4a7fd4;

    /* Accounting module semantic aliases */
    --acct-success: var(--mcots-success);
    --acct-success-soft: var(--mcots-success-soft);
    --acct-warning: var(--mcots-warning);
    --acct-warning-soft: var(--mcots-warning-soft);
    --acct-info: var(--mcots-info);
    --acct-info-soft: var(--mcots-info-soft);
    --acct-error: var(--mcots-error);
    --acct-error-soft: var(--mcots-error-soft);
    --acct-neutral: var(--mcots-neutral);
    --acct-neutral-soft: var(--mcots-neutral-soft);
    --acct-surface-soft: var(--mcots-surface-soft);
    --acct-accent: var(--mcots-accent);
}

/* Dark mode — liquid-glass black shell (html/body.darkMode via DarkModeService) */
html.darkMode,
html[data-bs-theme="dark"],
body.darkMode,
body[data-bs-theme="dark"] {
    /* Brighter Mirion orange for CTAs / pager / tabs on black glass */
    --mirion-orange: #f08c4a;
    --mcots-mirion-orange: var(--mirion-orange);

    --mcots-nav-icon-tds-filter: brightness(1.05) opacity(0.5);
    --mcots-nav-active-tds-filter: brightness(1.05) opacity(0.88);

    --mcots-topbar: rgba(10, 10, 10, 0.88);
    --mcots-topbar-border: rgba(255, 255, 255, 0.12);
    --mcots-sidebar: rgba(10, 10, 10, 0.88);
    --mcots-sidebar-border: rgba(255, 255, 255, 0.12);
    --mcots-bg: #080808;
    --mcots-surface: rgba(255, 255, 255, 0.05);
    --mcots-surface-soft: rgba(255, 255, 255, 0.08);

    --mcots-text: #f4f4f4;
    --mcots-text-soft: rgba(255, 255, 255, 0.58);
    --mcots-text-muted: rgba(255, 255, 255, 0.45);
    --mcots-text-dim: rgba(255, 255, 255, 0.72);
    --mcots-chevron: rgba(255, 255, 255, 0.38);
    --mcots-border: rgba(255, 255, 255, 0.12);
    --mcots-border-strong: rgba(255, 255, 255, 0.14);
    --mcots-submenu-rail: rgba(255, 255, 255, 0.14);

    --mcots-nav-active-bg: rgba(255, 255, 255, 0.1);
    --mcots-nav-active-bg-hover: rgba(255, 255, 255, 0.14);
    --mcots-nav-active-icon: rgba(255, 255, 255, 0.92);
    --mcots-nav-hover-bg: rgba(255, 255, 255, 0.05);
    --mcots-nav-hover-border: transparent;

    --mcots-brand-title-color: #ffffff;
    --mcots-brand-subtitle-color: rgba(255, 255, 255, 0.55);
    --mcots-footer-bg: rgba(0, 0, 0, 0.35);
    --mcots-footer-text: rgba(255, 255, 255, 0.45);
    --mcots-footer-brand-color: rgba(255, 255, 255, 0.92);
    --mcots-footer-version-color: rgba(255, 255, 255, 0.45);
    --mcots-footer-inset: transparent;

    --mcots-control-bg: rgba(255, 255, 255, 0.06);
    --mcots-control-border: rgba(255, 255, 255, 0.14);
    --mcots-control-color: rgba(255, 255, 255, 0.92);
    --mcots-control-hover-bg: rgba(255, 255, 255, 0.1);
    --mcots-control-hover-border: rgba(255, 255, 255, 0.22);
    --mcots-control-hover-color: #ffffff;
    --mcots-hamburger-line: #f4f4f4;
    --mcots-home-link-hover: rgba(255, 255, 255, 0.06);

    --mcots-sign-in-color: #f4f4f4;
    --mcots-sign-in-border: rgba(255, 255, 255, 0.35);
    --mcots-sign-in-hover-bg: rgba(255, 255, 255, 0.1);

    --mcots-input-bg: #1a1a1a;
    --mcots-input-color: #f4f4f4;
    --mcots-input-border: rgba(255, 255, 255, 0.18);
    --mcots-shell-border: rgba(255, 255, 255, 0.12);
    --mcots-card-radius: 12px;
    --mcots-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --mcots-card-border: rgba(255, 255, 255, 0.12);
    --mcots-card-divider: rgba(255, 255, 255, 0.12);
    --mcots-topmenubar-dropdown-bg: #141414;
    --mcots-modal-bg: #141414;
    --mcots-modal-header-bg: #1a1a1a;
    --mcots-modal-backdrop: rgba(0, 0, 0, 0.62);
    --mcots-card-header-bg: rgba(255, 255, 255, 0.06);
    --mcots-card-header-color: #f4f4f4;
    --mcots-card-footer-bg: rgba(255, 255, 255, 0.05);
    --mcots-card-footer-color: var(--mcots-text-soft);
    --mcots-card-title-color: #f4f4f4;
    --mcots-card-subtitle-color: var(--mcots-text-soft);
    --mcots-btn-secondary-bg: #2a2a2a;
    --mcots-btn-secondary-border: #3a3a3a;
    --mcots-btn-secondary-color: #f4f4f4;
    --mcots-link-color: var(--mirion-link-soft);
    --mcots-link-hover-color: #ffffff;

    --mcots-grid-header-bg: rgba(255, 255, 255, 0.06);
    --mcots-grid-header-color: var(--mcots-text-soft);
    --mcots-grid-row-bg: rgba(255, 255, 255, 0.03);
    --mcots-grid-row-alt-bg: rgba(255, 255, 255, 0.05);
    --mcots-grid-border: rgba(255, 255, 255, 0.12);
    --mcots-grid-row-color: var(--mcots-text);
    --mcots-grid-row-hover-bg: rgba(255, 255, 255, 0.08);
    --mcots-tab-inactive: var(--mcots-text-soft);
    --mcots-tab-active: var(--mcots-text);
    --mcots-tab-hover-bg: rgba(255, 255, 255, 0.05);
    --mcots-tab-hover-border: transparent;
    --mcots-tab-active-border: var(--mcots-border-strong);
    --mcots-tab-active-radius: var(--mcots-radius-sm) var(--mcots-radius-sm) 0 0;
    --mcots-tab-indicator: var(--mirion-orange);
    --mcots-chart-label: rgba(244, 244, 244, 0.92);
    --mcots-chart-axis-line: var(--mcots-border-strong);
    --mcots-chart-grid-line: rgba(255, 255, 255, 0.045);

    --mcots-notify-zero-bg: rgba(255, 255, 255, 0.18);
    --mcots-notify-zero-color: rgba(255, 255, 255, 0.85);
    --mcots-notify-zero-border: rgba(255, 255, 255, 0.28);
    --mcots-pencil-active-bg: rgba(61, 156, 201, 0.22);
    --mcots-pencil-active-border: rgba(61, 156, 201, 0.45);

    /* Syncfusion grid selected row/cell — near-black glass (not navy) */
    --mcots-row-selected-bg: #1f1f1f;
    --mcots-row-selected-alt-bg: #252525;
    --mcots-cell-selected-bg: #1a1a1a;
    --mcots-row-selected-rail: var(--mcots-mirion-orange);

    --mcots-chevron-on-dark: var(--mcots-chevron);
    --mcots-border-on-dark: var(--mcots-border);
    --mcots-border-on-dark-strong: var(--mcots-border-strong);

    --mcots-scrollbar-track: rgba(0, 0, 0, 0.45);
    --mcots-scrollbar-thumb: rgba(255, 255, 255, 0.28);
    --mcots-scrollbar-thumb-hover: rgba(255, 255, 255, 0.42);

    /* Accounting module (--acct-* in module scoped styles) */
    --acct-bg: var(--mcots-surface);
    --acct-border: var(--mcots-shell-border);
    --acct-text: var(--mcots-text);
    --acct-muted: var(--mcots-text-soft);
    --acct-overlay: var(--mcots-modal-backdrop);
    --acct-notbill-bg: var(--mcots-surface-soft);
    --acct-overdue: var(--mcots-error);

    /* Semantic palette dark overrides — from Dashboard dark mode badges */
    --mcots-success: #58c5a5;
    --mcots-success-soft: rgba(47, 125, 105, 0.22);
    --mcots-warning: #f4d27c;
    --mcots-warning-soft: rgba(255, 165, 0, 0.20);
    --mcots-info: #9ac2f3;
    --mcots-info-soft: rgba(26, 115, 232, 0.22);
    --mcots-error: #f2a6a0;
    --mcots-error-soft: rgba(217, 48, 37, 0.22);
    --mcots-neutral: #9aa6b8;
    --mcots-neutral-soft: rgba(154, 166, 184, 0.16);

    /* Module kit tokens (dark) */
    --mcots-accent-soft: rgba(61, 156, 201, 0.28);
    --mcots-accent-softer: rgba(61, 156, 201, 0.14);
    --mcots-focus-ring: 0 0 0 .2rem rgba(240, 140, 74, 0.35);
    --mcots-danger: var(--mcots-error);
    --mcots-badge-bg: rgba(255, 255, 255, 0.08);
    --mcots-badge-border: rgba(255, 255, 255, 0.16);
    --mcots-badge-text: var(--mcots-text-soft);
    --mcots-segment-track: rgba(255, 255, 255, 0.06);
    --mcots-segment-active-bg: var(--mcots-accent);
    --mcots-segment-active-text: #ffffff;
    --mcots-disabled-bg: rgba(255, 255, 255, 0.06);
    --mcots-disabled-border: rgba(255, 255, 255, 0.14);
}

html {
    /* Scales rem-based kit/theme type on large displays (see --mcots-font-scale). */
    font-size: calc(100% * var(--mcots-font-scale, 1));
}

html,
body {
    margin: 0;
    background-color: var(--mcots-bg);
    color: var(--mcots-text);
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Large monitors: grow the whole rem type system without per-module CSS. */
@media (min-width: 1800px) {
    :root {
        --mcots-font-scale: 1.06;
        --mcots-sidebar-width: 17.5rem;
    }
}

@media (min-width: 2200px) {
    :root {
        --mcots-font-scale: 1.12;
        --mcots-sidebar-width: 18.5rem;
    }
}

@media (min-width: 2500px) {
    :root {
        --mcots-font-scale: 1.18;
        --mcots-sidebar-width: 19.5rem;
    }
}

html.darkMode,
html[data-bs-theme="dark"],
body.darkMode,
body[data-bs-theme="dark"] {
    background-color: var(--mcots-bg) !important;
}

/* Navy trap — beat any leftover rgb(26,77,114) / navy shell on the document */
html[data-mcots-theme="true"].darkMode,
html[data-mcots-theme="true"][data-bs-theme="dark"],
html[data-mcots-theme="true"].darkMode body,
html[data-mcots-theme="true"][data-bs-theme="dark"] body,
html[data-mcots-theme="true"] body.darkMode,
html[data-mcots-theme="true"] body[data-bs-theme="dark"] {
    background: #080808 !important;
    background-color: #080808 !important;
    background-image: none !important;
    color: var(--mcots-text);
}

/* Document does not scroll; scrollbar lives in .mcots-main-scroll */
html[data-mcots-theme="true"],
html[data-mcots-theme="true"] body {
    height: 100%;
    overflow: hidden;
}

html[data-mcots-theme="true"] main {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

html[data-mcots-theme="true"] main > .mcots-topbar {
    flex: 0 0 auto;
}

.mcots-layout {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    background: var(--mcots-bg);
    position: relative;

    /* Bootstrap — slight radius, shell borders like topbar/sidebar */
    --bs-border-radius: var(--mcots-radius-sm);
    --bs-border-radius-sm: var(--mcots-radius-sm);
    --bs-border-radius-lg: var(--mcots-radius-sm);
    --bs-border-radius-xl: var(--mcots-radius-sm);
    --bs-border-radius-xxl: var(--mcots-radius-sm);
    --bs-card-bg: var(--mcots-surface);
    --bs-card-color: var(--mcots-text);
    --bs-card-border-color: var(--mcots-card-border);
    --bs-card-border-width: 1px;
    --bs-card-border-radius: var(--mcots-card-radius);
    --bs-card-box-shadow: var(--mcots-card-shadow);
    --bs-card-cap-bg: var(--mcots-card-header-bg);
    --bs-card-cap-color: var(--mcots-card-header-color);
    --bs-card-cap-padding-y: var(--mcots-card-cap-padding-y);
    --bs-card-cap-padding-x: var(--mcots-card-cap-padding-x);
    --bs-card-spacer-y: var(--mcots-card-body-padding);
    --bs-card-spacer-x: var(--mcots-card-body-padding);
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-inner-border-radius: var(--mcots-radius-sm);
    --bs-border-color: var(--mcots-card-border);
}

.mcots-sidebar {
    width: var(--mcots-sidebar-width, 17rem);
    background: var(--mcots-sidebar);
    color: var(--mcots-text);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    position: fixed;
    left: 0;
    top: var(--mcots-topbar-height);
    height: calc(100vh - var(--mcots-topbar-height));
    overflow: hidden;
    border-right: 1px solid var(--mcots-sidebar-border);
    transition: transform 150ms ease, width 150ms ease;
    /* Above main content only; portaled modals (body) use 1050+ */
    z-index: 2;
}

/* Override BlazorTheme calc heights; grid row gives SimpleBar a fixed viewport */
.mcots-sidebar.sidebar-menu .main-menu {
    height: auto !important;
    min-height: 0;
    overflow-x: visible;
    overflow-y: hidden;
    position: relative;
}

/* Bottom scroll fade above footer — short, subtle edge only */
.mcots-sidebar.sidebar-menu .main-menu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1rem;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in srgb, var(--mcots-sidebar) 30%, transparent) 75%,
        var(--mcots-sidebar) 100%
    );
}

.mcots-sidebar .mm-wrapper[data-simplebar] {
    height: 100%;
    width: 100%;
    min-height: 0;
}

.mcots-sidebar .mm-wrapper[data-simplebar] .simplebar-wrapper,
.mcots-sidebar .mm-wrapper[data-simplebar] .simplebar-mask,
.mcots-sidebar .mm-wrapper[data-simplebar] .simplebar-offset {
    height: 100%;
}

.mcots-sidebar .menu-inner {
    height: auto !important;
    overflow: visible !important;
}

/* Hide scrollbar only — do not override SimpleBar overflow (breaks wheel scroll) */
.mcots-sidebar .mm-wrapper .simplebar-content-wrapper {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mcots-sidebar .mm-wrapper .simplebar-content-wrapper::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Sidebar footer — sits directly under nav (no flex gap) */
.mcots-sidebar-footer.menu-bottom {
    flex: 0 0 auto;
    flex-shrink: 0;
    margin: 0.35rem 0.65rem 0.65rem;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.mcots-sidebar-footer-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--mcots-sidebar-border);
    border-radius: var(--mcots-topbar-btn-radius);
    background: var(--mcots-footer-bg);
    width: 100%;
    box-sizing: border-box;
}

.mcots-sidebar-footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 0;
}

.mcots-sidebar-footer-brand {
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mcots-footer-brand-color);
    line-height: 1.2;
}

.mcots-sidebar-footer-version {
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--mcots-footer-version-color);
    line-height: 1.3;
}

button.mcots-sidebar-footer-updates {
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--mcots-footer-version-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    line-height: 0;
    transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

button.mcots-sidebar-footer-updates:hover,
button.mcots-sidebar-footer-updates:focus-visible {
    color: var(--mirion-orange, #e16b2a);
    border-color: rgba(225, 107, 42, 0.35);
    background: rgba(225, 107, 42, 0.08);
    outline: none;
}

.mcots-sidebar-footer-updates-icon {
    display: block;
    width: 19px;
    height: 19px;
}

.mcots-sidebar-footer-updates-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mirion-orange, #e16b2a);
    border: 1.5px solid var(--mcots-footer-bg, #fff);
    box-shadow: 0 0 0 1px rgba(225, 107, 42, 0.25);
    pointer-events: none;
}

body.darkMode button.mcots-sidebar-footer-updates {
    color: rgba(217, 232, 244, 0.7);
}

body.darkMode button.mcots-sidebar-footer-updates:hover,
body.darkMode button.mcots-sidebar-footer-updates:focus-visible {
    color: #d46a30;
    border-color: rgba(196, 95, 40, 0.4);
    background: rgba(196, 95, 40, 0.14);
}

body.darkMode .mcots-sidebar-footer-updates-dot {
    background: #d46a30;
    border-color: rgba(12, 31, 51, 0.85);
}

.mcots-sidebar.is-collapsed {
    transform: translateX(-100%);
}

/* Desktop (≥1365): sbar_collapsed = hidden — same as BlazorTheme */
.sbar_collapsed .mcots-sidebar {
    transform: translateX(-100%);
}

.mcots-sidebar-menu {
    padding: 0.75rem 0.625rem 0.75rem 0.7rem;
}

.mcots-main {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    background: var(--mcots-bg);
    margin-left: var(--mcots-sidebar-width, 17rem);
    transition: margin-left 150ms ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mcots-main-scroll {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mcots-main-scroll > .mcots-content {
    min-width: 0;
    padding-bottom: 1.25rem;
    /* Match left gutter (.mcots-content 0.75rem) — do not stack a taller top band */
    padding-top: 0.75rem;
}

/* Scrollbar styling — main content pane + Syncfusion grids */
.mcots-layout .mcots-main .mcots-main-scroll,
.mcots-layout .mcots-main .e-grid .e-gridcontent,
.mcots-layout .mcots-main .e-grid .e-content {
    scrollbar-width: thin;
    scrollbar-color: var(--mcots-scrollbar-thumb) var(--mcots-scrollbar-track);
}

.mcots-layout .mcots-main .mcots-main-scroll::-webkit-scrollbar,
.mcots-layout .mcots-main .e-grid .e-gridcontent::-webkit-scrollbar,
.mcots-layout .mcots-main .e-grid .e-content::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.mcots-layout .mcots-main .mcots-main-scroll::-webkit-scrollbar-track,
.mcots-layout .mcots-main .e-grid .e-gridcontent::-webkit-scrollbar-track,
.mcots-layout .mcots-main .e-grid .e-content::-webkit-scrollbar-track {
    background: var(--mcots-scrollbar-track);
}

.mcots-layout .mcots-main .mcots-main-scroll::-webkit-scrollbar-thumb,
.mcots-layout .mcots-main .e-grid .e-gridcontent::-webkit-scrollbar-thumb,
.mcots-layout .mcots-main .e-grid .e-content::-webkit-scrollbar-thumb {
    background-color: var(--mcots-scrollbar-thumb);
    border-radius: 5px;
}

.mcots-layout .mcots-main .mcots-main-scroll::-webkit-scrollbar-thumb:hover,
.mcots-layout .mcots-main .e-grid .e-gridcontent::-webkit-scrollbar-thumb:hover,
.mcots-layout .mcots-main .e-grid .e-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--mcots-scrollbar-thumb-hover);
}

.mcots-sidebar.is-collapsed + .mcots-main {
    margin-left: 0;
}

.sbar_collapsed .mcots-main {
    margin-left: 0;
}

/* Top menu bar — topbar extension box in content area; submenus expand from it (not floating) */
.mcots-main .mcots-topmenubar {
    flex: 0 0 auto;
    position: relative;
    top: auto;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: var(--mcots-topbar);
    color: var(--mcots-text);
    border-bottom: 1px solid var(--mcots-topbar-border);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
    z-index: 20;
}

body.darkMode .mcots-main .mcots-topmenubar {
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.mcots-main .mcots-topmenubar.is-closed {
    display: none;
}

.mcots-main .mcots-topmenubar.is-open {
    display: block;
}

.mcots-topmenubar__list,
.mcots-topmenubar__dropdown {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mcots-topmenubar__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.mcots-topmenubar__item {
    position: relative;
    flex: 1 1 0;
    min-width: 7rem;
    max-width: 100%;
}

.mcots-topmenubar__list > .mcots-topmenubar__item + .mcots-topmenubar__item {
    border-left: 1px solid var(--mcots-topbar-border);
}

.mcots-topmenubar__trigger {
    width: 100%;
    min-height: 2.35rem;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--mcots-text);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.mcots-topmenubar__trigger:hover,
.mcots-topmenubar__item.has-children:hover > .mcots-topmenubar__trigger,
.mcots-topmenubar__item.has-children:focus-within > .mcots-topmenubar__trigger {
    background: var(--mcots-nav-hover-bg);
    color: var(--mcots-text);
}

.mcots-topmenubar__item.has-children:hover > .mcots-topmenubar__trigger,
.mcots-topmenubar__item.has-children:focus-within > .mcots-topmenubar__trigger {
    background: var(--mcots-nav-hover-bg);
}

.mcots-topmenubar__trigger.is-disabled,
.mcots-topmenubar__item.is-disabled > .mcots-topmenubar__trigger {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Submenu indicators — CSS chevrons (no icon font / rotation) */
.mcots-topmenubar__indicator {
    display: inline-block;
    flex-shrink: 0;
    box-sizing: border-box;
    opacity: 0.55;
    transition: opacity 0.12s ease, border-color 0.12s ease;
}

.mcots-topmenubar__indicator--down {
    width: 0.42rem;
    height: 0.42rem;
    margin-top: -0.12rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.mcots-topmenubar__indicator--right {
    width: 0.38rem;
    height: 0.38rem;
    margin-left: 0.65rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
}

.mcots-topmenubar__item.has-children:hover > .mcots-topmenubar__trigger .mcots-topmenubar__indicator,
.mcots-topmenubar__item.has-children:focus-within > .mcots-topmenubar__trigger .mcots-topmenubar__indicator {
    opacity: 0.95;
}

.mcots-topmenubar__dropdown .mcots-topmenubar__item.has-children > .mcots-topmenubar__trigger {
    justify-content: space-between;
    gap: 0.75rem;
}

.mcots-topmenubar__dropdown .mcots-topmenubar__item.has-children > .mcots-topmenubar__trigger .mcots-topmenubar__indicator--right {
    margin-left: auto;
}

/* Dropdown rows always use a right-pointing chevron (never down) */
.mcots-topmenubar__dropdown .mcots-topmenubar__indicator,
.mcots-topmenubar__dropdown .mcots-topmenubar__indicator--down,
.mcots-topmenubar__dropdown .mcots-topmenubar__indicator--right {
    width: 0.38rem;
    height: 0.38rem;
    margin-top: 0;
    margin-left: auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
}

/* Hover bridge — keeps submenu open while moving off the trigger */
.mcots-topmenubar__item.has-children::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.5rem;
}

.mcots-topmenubar__dropdown .mcots-topmenubar__item.has-children::after {
    top: 0;
    bottom: 0;
    left: 100%;
    right: auto;
    width: 0.5rem;
    height: auto;
}

/* Submenu panel — grows down from the topbar box (attached, no float shadow) */
.mcots-topmenubar__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    width: auto;
    min-width: calc(100% + 2px);
    max-width: none;
    margin: 0;
    padding: 0.2rem 0;
    background: var(--mcots-topmenubar-dropdown-bg);
    color: var(--mcots-text);
    border: 1px solid var(--mcots-topbar-border);
    border-top: none;
    border-radius: 0;
    box-shadow: none;
    z-index: 30;
}

body:not(.darkMode) .mcots-topmenubar__dropdown,
body:not(.darkMode) .mcots-topmenubar__dropdown--nested {
    background: #ffffff;
    box-shadow: 0 1px 0 var(--mcots-topbar-border);
}

body.darkMode .mcots-topmenubar__dropdown,
body.darkMode .mcots-topmenubar__dropdown--nested {
    background: var(--mcots-topmenubar-dropdown-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.mcots-topmenubar__item.has-children:hover > .mcots-topmenubar__dropdown,
.mcots-topmenubar__item.has-children:focus-within > .mcots-topmenubar__dropdown {
    display: block;
}

.mcots-topmenubar__dropdown .mcots-topmenubar__item {
    flex: none;
    min-width: 0;
    width: 100%;
}

.mcots-topmenubar__dropdown .mcots-topmenubar__trigger {
    justify-content: flex-start;
    text-align: left;
    padding: 0.5rem 0.85rem;
    border-radius: 0;
    min-height: 2.125rem;
    font-weight: 400;
    font-size: 0.8125rem;
    background: transparent;
}

.mcots-topmenubar__dropdown .mcots-topmenubar__trigger:hover {
    background: var(--mcots-nav-hover-bg);
    color: var(--mcots-text);
}

.mcots-topmenubar__dropdown--nested {
    top: -1px;
    left: 100%;
    right: auto;
    min-width: 12rem;
    width: max-content;
    max-width: min(18rem, 80vw);
    margin: 0;
    border-top: 1px solid var(--mcots-topbar-border);
    border-right: 1px solid var(--mcots-topbar-border);
    border-bottom: 1px solid var(--mcots-topbar-border);
    border-left: 1px solid var(--mcots-topbar-border);
    border-radius: 0;
    background: var(--mcots-topmenubar-dropdown-bg);
    box-shadow: none;
}

.mcots-topmenubar__dropdown .mcots-topmenubar__item.has-children:hover > .mcots-topmenubar__dropdown--nested,
.mcots-topmenubar__dropdown .mcots-topmenubar__item.has-children:focus-within > .mcots-topmenubar__dropdown--nested {
    display: block;
}

.mcots-topmenubar__separator {
    height: 1px;
    margin: 0.2rem 0.65rem;
    background: var(--mcots-topbar-border);
    list-style: none;
}

.mcots-topbar .mcots-topmenu-toggle {
    height: 34px;
    min-height: 34px;
    min-width: 34px;
    padding: 0 0.65rem !important;
    border-radius: var(--mcots-topbar-btn-radius) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--mcots-control-bg) !important;
    color: var(--mcots-control-color) !important;
    border: 1px solid var(--mcots-control-border) !important;
    box-shadow: none !important;
}

.mcots-topbar .mcots-topmenu-toggle:hover:not(:disabled),
.mcots-topbar .mcots-topmenu-toggle:focus-visible,
.mcots-topbar .mcots-topmenu-toggle.is-open {
    background: var(--mcots-control-hover-bg) !important;
    border-color: var(--mcots-control-hover-border) !important;
    color: var(--mcots-control-hover-color) !important;
}

.mcots-topbar {
    position: sticky;
    top: 0;
    /* Above .mcots-topmenubar (20) and sidebar so header dropdowns stay usable */
    z-index: 100;
    overflow: visible;
    background: var(--mcots-topbar);
    border-bottom: 1px solid var(--mcots-topbar-border);
    min-height: var(--mcots-topbar-height);
    padding: 0.35rem 0.9rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.mcots-topbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 1 auto;
    min-width: 0;
}

.mcots-topbar-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.mcots-topbar-home-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    border-radius: 4px;
    transition: background-color 0.12s ease;
}

.mcots-topbar-home-link:hover {
    background: var(--mcots-home-link-hover);
    color: inherit;
    text-decoration: none;
}

.mcots-topbar-home-link:focus-visible {
    outline: 2px solid var(--mcots-accent);
    outline-offset: 2px;
}

.mcots-env-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 1.125rem;
    padding: 0 0.45rem;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
    vertical-align: middle;
    /* Status chip — not interactive (do not read as a toggle) */
    pointer-events: none;
    user-select: none;
    cursor: default;
}

.mcots-env-badge__label {
    display: block;
    line-height: 1;
    letter-spacing: 0.06em;
    /* Letter-spacing adds trailing space; pull back so DEV looks centered */
    margin-right: -0.06em;
    transform: translateY(0.5px);
}

.mcots-env-badge--dev {
    color: #0c1f33;
    background: #7dd3fc;
    border-color: rgba(12, 31, 51, 0.18);
    box-shadow: none;
}

.mcots-env-badge--demo {
    color: #ffffff;
    background: var(--mirion-orange);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: none;
}

/* Dark mode: label blends into the pill — solid orange chip, no visible text */
body.darkMode .mcots-env-badge--demo {
    color: transparent;
}

body.darkMode .mcots-env-badge--dev {
    color: #e0f2fe;
    background: rgba(56, 189, 248, 0.28);
    border-color: rgba(125, 211, 252, 0.45);
}

.mcots-env-badge--stg {
    color: #0c1f33;
    background: #f0c14b;
    border-color: rgba(12, 31, 51, 0.2);
}

.mcots-brand-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1;
}

.mcots-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.mcots-brand-icon .mcots-brand-logo-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
}

.mcots-brand-name {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--mcots-brand-title-color);
    letter-spacing: 0.03em;
}

.mcots-brand-sub {
    margin-top: 0.1rem;
    font-size: 0.56rem;
    color: var(--mcots-brand-subtitle-color);
    letter-spacing: 0.12em;
}

.mcots-topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    position: relative;
}

/* Edit (pencil) + admin (gear) — Oqtane ControlPanel; kept out of crowded action list */
.mcots-admin-panel-root {
    display: inline-flex;
    align-items: center;
    gap: var(--mcots-app-login-gap);
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.mcots-admin-panel-root .btn-control-panel-resp,
.mcots-admin-panel-root .btn-pencil-resp {
    display: none !important;
}

.mcots-action-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    width: max-content;
    margin-left: auto;
    overflow: visible;
}

.mcots-action-item {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: visible;
    flex-shrink: 0;
}

.mcots-action-item > *:not(.offcanvas) {
    display: inline-flex;
}

/* Space between Sign In / Demo / Entra — gap on Oqtane’s .app-login wrapper (siblings are <button>s + hidden <li>) */
.mcots-topbar .mcots-action-item span.app-login {
    display: inline-flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mcots-app-login-gap);
    column-gap: var(--mcots-app-login-gap);
    row-gap: 10px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.mcots-sidebar-toggle {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    border-color: var(--mcots-control-border) !important;
}

.mcots-sidebar-toggle:focus {
    box-shadow: 0 0 0 2px rgba(0, 97, 153, 0.35) !important;
}

.mcots-hamburger-line {
    width: 14px;
    height: 1.8px;
    background: var(--mcots-hamburger-line);
    border-radius: 20px;
    transition: transform 130ms ease, opacity 130ms ease;
}

.mcots-sidebar-toggle.is-collapsed .mcots-hamburger-line:nth-child(1) {
    transform: translateY(4.8px) rotate(45deg);
}

.mcots-sidebar-toggle.is-collapsed .mcots-hamburger-line:nth-child(2) {
    opacity: 0;
}

.mcots-sidebar-toggle.is-collapsed .mcots-hamburger-line:nth-child(3) {
    transform: translateY(-4.8px) rotate(-45deg);
}

.mcots-content {
    padding: 0.75rem;
}

.app-menu .nav-item {
    font-size: 0.78rem;
    margin-bottom: 0.14rem;
    list-style: none;
}

.app-menu .nav-item a {
    border-radius: 5px;
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.15;
    padding: 0.35rem 0.55rem;
    color: var(--mcots-text);
    text-decoration: none;
    transition: background-color 120ms ease;
    border: 1px solid transparent;
    position: relative;
    font-size: var(--mcots-font-base, 0.875rem);
    font-weight: 400;
}

.app-menu .nav-item a.active {
    background: var(--mcots-nav-active-bg);
    border: 1px solid transparent;
    border-left: 3px solid var(--mcots-mirion-orange);
    color: var(--mcots-text);
}

.app-menu .nav-item a.active i:not(.tds-icon),
.app-menu .nav-item a.active .oi,
.app-menu .nav-item a.active svg {
    color: var(--mcots-nav-active-icon);
}

.app-menu .nav-item a.active .tds-icon::before {
    filter: var(--mcots-nav-active-tds-filter);
}

.app-menu .nav-item a:hover {
    background: var(--mcots-nav-hover-bg);
    border-color: var(--mcots-nav-hover-border);
}

.app-menu .nav-link .oi {
    width: 0.95rem;
    font-size: 0.78rem;
    margin-right: 0.45rem;
}

/* Sidebar menu points - Mirion/Blazor inspired */
.mcots-sidebar-menu .app-menu ul,
.mcots-sidebar-menu .metismenu {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: visible;
}

/* Darker TDS icons in sidebar (overrides global icons.css brightness(0.8)) */
.mcots-sidebar-menu .tds-icon::before {
    filter: var(--mcots-nav-icon-tds-filter);
}

.mcots-sidebar-menu .app-menu > ul > li,
.mcots-sidebar-menu .metismenu > li {
    margin-bottom: 0.2rem;
}

.mcots-sidebar-menu .metismenu li {
    list-style: none;
}

.mcots-sidebar-menu .metismenu li a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--mcots-text);
    font-size: var(--mcots-font-base, 0.875rem);
    font-weight: 400;
    text-decoration: none;
    min-height: 2rem;
    padding: 0.35rem 0.55rem;
    border-radius: 5px;
    border: 1px solid transparent;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.metismenu li a i {
    margin-right: 15px;
    flex-shrink: 0;
}

/* Spacing for non-<i> icons (Open Iconic / SVG) */
.mcots-sidebar-menu .metismenu li a .oi,
.mcots-sidebar-menu .metismenu li a svg {
    margin-right: 0.55rem;
    flex-shrink: 0;
}

.mcots-sidebar-menu .metismenu li a span {
    margin-left: 0.05rem;
}

/* Nested app-menu links only — metismenu submenus use ul.subItem rules below */
.mcots-sidebar-menu .app-menu ul li a:hover {
    background: var(--mcots-nav-hover-bg);
    border-color: var(--mcots-nav-hover-border);
}

/* Top-level group labels */
.mcots-sidebar-menu .app-menu > ul > li > span,
.mcots-sidebar-menu .metismenu > li > span,
.mcots-sidebar-menu .mcots-sidebar-group-label {
    display: block;
    padding: 0.28rem 0.55rem 0.22rem;
    color: var(--mcots-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.56rem;
    font-weight: 600;
}

.mcots-sidebar-menu .mcots-sidebar-group-header {
    list-style: none;
    margin-top: 0.65rem;
    pointer-events: none;
}

.mcots-sidebar-menu .metismenu > li.mcots-sidebar-group-header:first-child {
    margin-top: 0.15rem;
}

.mcots-sidebar-menu .mcots-sidebar-group-header .mcots-sidebar-group-label {
    padding-top: 0.35rem;
    padding-bottom: 0.3rem;
}

/* submenu container — layout only here; max-height lives on ul.subItem so .expanded can win (see below) */
.mcots-sidebar-menu .app-menu ul ul,
.mcots-sidebar-menu .metismenu ul {
    margin: 0.08rem 0 0.25rem 1.22rem;
    padding-left: 0.48rem;
    border-left: 1px solid var(--mcots-submenu-rail);
}

/* Oqtane vertical menu: collapsible submenus use ul.subItem + .expanded from Blazor */
.mcots-sidebar-menu .metismenu ul.subItem {
    max-height: 0;
    overflow: hidden;
    transition: max-height 260ms ease;
}

.mcots-sidebar-menu .metismenu ul.subItem.expanded,
.mcots-sidebar-menu .metismenu li.sidebar-top-link.active > ul.subItem {
    max-height: 600px;
}

.mcots-sidebar-menu .metismenu > li > ul > li {
    margin-bottom: 0.14rem;
}

.mcots-sidebar-menu .app-menu ul ul li a,
.mcots-sidebar-menu .metismenu ul li a {
    min-height: 1.75rem;
    font-size: var(--mcots-font-base, 0.875rem);
    font-weight: 400;
    padding: 0.28rem 0.48rem;
    color: var(--mcots-text-dim);
}

/* Submenu (.subItem): hover only on the <a> (not separate icon/text pills); active row still brightens on hover */
.mcots-sidebar-menu .metismenu ul.subItem > li > a {
    border: 1px solid transparent;
    border-radius: 5px;
    transition: background-color 120ms ease, border-color 120ms ease;
}

/* Active submenu — orange rail via ::before so scroll clip does not cut it off */
.mcots-sidebar-menu .metismenu ul.subItem > li.active > a,
.mcots-sidebar-menu .metismenu ul.subItem > li.open > a,
.mcots-sidebar-menu .metismenu ul.subItem > li.show > a {
    background: var(--mcots-nav-active-bg);
    border: 1px solid transparent;
    position: relative;
    overflow: visible;
}

.mcots-sidebar-menu .metismenu ul.subItem > li.active > a::before,
.mcots-sidebar-menu .metismenu ul.subItem > li.open > a::before,
.mcots-sidebar-menu .metismenu ul.subItem > li.show > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2rem;
    bottom: 0.2rem;
    width: 3px;
    background: var(--mcots-mirion-orange);
    border-radius: 0 2px 2px 0;
    pointer-events: none;
}

.mcots-sidebar-menu .metismenu ul.subItem > li.active > a i:not(.tds-icon),
.mcots-sidebar-menu .metismenu ul.subItem > li.active > a .oi,
.mcots-sidebar-menu .metismenu ul.subItem > li.active > a svg,
.mcots-sidebar-menu .metismenu ul.subItem > li.open > a i:not(.tds-icon),
.mcots-sidebar-menu .metismenu ul.subItem > li.open > a .oi,
.mcots-sidebar-menu .metismenu ul.subItem > li.open > a svg,
.mcots-sidebar-menu .metismenu ul.subItem > li.show > a i:not(.tds-icon),
.mcots-sidebar-menu .metismenu ul.subItem > li.show > a .oi,
.mcots-sidebar-menu .metismenu ul.subItem > li.show > a svg {
    color: var(--mcots-nav-active-icon);
}

.mcots-sidebar-menu .metismenu ul.subItem > li.active > a .tds-icon::before,
.mcots-sidebar-menu .metismenu ul.subItem > li.open > a .tds-icon::before,
.mcots-sidebar-menu .metismenu ul.subItem > li.show > a .tds-icon::before {
    filter: var(--mcots-nav-active-tds-filter);
}

.mcots-sidebar-menu .metismenu ul.subItem > li > a:hover {
    background: var(--mcots-nav-hover-bg);
    border-color: var(--mcots-nav-hover-border);
    color: var(--mcots-text);
}

.mcots-sidebar-menu .metismenu ul.subItem > li.active > a:hover,
.mcots-sidebar-menu .metismenu ul.subItem > li.open > a:hover {
    background: var(--mcots-nav-active-bg-hover);
}

/* dropdown caret / toggles on parent items */
.mcots-sidebar-menu .app-menu li:has(ul) > a::after,
.mcots-sidebar-menu .metismenu li:has(ul) > a::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--mcots-chevron);
    border-bottom: 1.5px solid var(--mcots-chevron);
    transform: rotate(-45deg);
    margin-left: 0.5rem;
    transition: transform 120ms ease;
}

.mcots-sidebar-menu .app-menu li.active:has(ul) > a::after,
.mcots-sidebar-menu .app-menu li.show:has(ul) > a::after,
.mcots-sidebar-menu .app-menu li.open:has(ul) > a::after,
.mcots-sidebar-menu .metismenu li.active:has(ul) > a::after,
.mcots-sidebar-menu .metismenu li.show:has(ul) > a::after,
.mcots-sidebar-menu .metismenu li.open:has(ul) > a::after {
    transform: rotate(45deg);
}

/* Blazor vertical menu row: link + chevron toggle */
.mcots-sidebar-menu .sidebar-top-link > div.d-flex {
    border-radius: 5px;
    margin-bottom: 0.15rem;
    padding-right: 0.12rem;
    gap: 0.2rem;
    transition: background-color 120ms ease;
}

/* Top-level row: single highlight (pointer on row or w-100 link — not double from li a:hover) */
.mcots-sidebar-menu .metismenu > li.sidebar-top-link > div.d-flex:hover {
    background: var(--mcots-nav-hover-bg);
}

.mcots-sidebar-menu .metismenu > li.sidebar-top-link > div.d-flex a {
    background: transparent;
    border-color: transparent;
}

.mcots-sidebar-menu .metismenu > li.sidebar-top-link.active > div.d-flex {
    background: var(--mcots-nav-active-bg);
    box-shadow: none;
    position: relative;
    overflow: visible;
}

.mcots-sidebar-menu .metismenu > li.sidebar-top-link.active > div.d-flex::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2rem;
    bottom: 0.2rem;
    width: 3px;
    background: var(--mcots-mirion-orange);
    border-radius: 0 2px 2px 0;
    pointer-events: none;
    z-index: 1;
}

/* Active row must still brighten on hover (.active alone would override :hover otherwise) */
.mcots-sidebar-menu .metismenu > li.sidebar-top-link.active > div.d-flex:hover {
    background: var(--mcots-nav-active-bg-hover);
}

/* Brighter page icon on active top-level row only (not the expand chevron) */
.mcots-sidebar-menu .metismenu > li.sidebar-top-link.active > div.d-flex > a i:not(.tds-icon),
.mcots-sidebar-menu .metismenu > li.sidebar-top-link.active > div.d-flex > a .oi,
.mcots-sidebar-menu .metismenu > li.sidebar-top-link.active > div.d-flex > a svg {
    color: var(--mcots-nav-active-icon);
}

.mcots-sidebar-menu .metismenu > li.sidebar-top-link.active > div.d-flex > a .tds-icon::before {
    filter: var(--mcots-nav-active-tds-filter);
}

.mcots-sidebar-menu .collIconTap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
    padding: 0.2rem 0.1rem 0.2rem 0.2rem;
    border-radius: 4px;
    flex-shrink: 0;
}

.subItem {
    list-style-type: none;
    border-left: 1px solid var(--mcots-submenu-rail);
    margin-left: 1.1rem;
    padding-left: 0.35rem;
}

.collIconTap {
    cursor: pointer;
    transition: transform 0.3s ease, color 0.15s ease;
}

.rotateIcon {
    transform: rotate(90deg);
}

.container,
.container-fluid {
    max-width: 100%;
}

/* ── Bootstrap cards (main content) ── */
.mcots-main .card,
.mcots-main .module-card {
    background: var(--mcots-surface) !important;
    color: var(--mcots-text) !important;
    border: 1px solid var(--mcots-card-border) !important;
    outline: none !important;
    border-radius: var(--mcots-card-radius) !important;
    box-shadow: var(--mcots-card-shadow) !important;
    margin-bottom: 1rem;
    overflow: hidden;
}

.mcots-main .card-header,
.mcots-main .module-card .card-header {
    background: var(--mcots-card-header-bg) !important;
    color: var(--mcots-card-header-color) !important;
    border-bottom: 1px solid var(--mcots-card-divider) !important;
    border-radius: 0 !important;
    padding: var(--mcots-card-cap-padding-y) var(--mcots-card-cap-padding-x);
    font-weight: 500;
    font-size: 0.9375rem;
}

.mcots-main .card-footer,
.mcots-main .module-card .card-footer {
    background: var(--mcots-card-footer-bg) !important;
    color: var(--mcots-card-footer-color) !important;
    border-top: 1px solid var(--mcots-card-divider) !important;
    padding: var(--mcots-card-cap-padding-y) var(--mcots-card-cap-padding-x);
}

.mcots-main .card-body,
.mcots-main .module-card .card-body {
    padding: var(--mcots-card-body-padding);
    background: transparent !important;
    color: var(--mcots-text) !important;
}

.mcots-main .card-title {
    color: var(--mcots-card-title-color);
    font-weight: 500;
    font-size: 1.0625rem;
    margin-bottom: 0.35rem;
}

.mcots-main .card-subtitle {
    color: var(--mcots-card-subtitle-color);
    font-size: 0.875rem;
}

.mcots-main .card-text {
    color: var(--mcots-text-soft);
}

.mcots-main .text-muted {
    color: var(--mcots-text-soft) !important;
}

.mcots-main .card-link {
    color: var(--mcots-link-color);
}

.mcots-main .card-link:hover {
    color: var(--mcots-link-hover-color);
}

/* Module scoped styles sometimes override card borders in dark mode */
body.darkMode .mcots-layout .mcots-main .card,
body.darkMode .mcots-layout .mcots-main .dark-light-mode-bg,
body.darkMode .mcots-layout .mcots-main .shadow.rounded {
    border-color: var(--mcots-card-border) !important;
}

.mcots-main .card-img-top {
    border-top-left-radius: var(--mcots-card-radius);
    border-top-right-radius: var(--mcots-card-radius);
}

.mcots-main .card > .list-group {
    border-color: var(--mcots-card-divider);
}

.mcots-main .card > .list-group:first-child {
    border-top-width: 0;
    border-top-left-radius: var(--mcots-card-radius);
    border-top-right-radius: var(--mcots-card-radius);
}

.mcots-main .card > .list-group:last-child {
    border-bottom-width: 0;
    border-bottom-left-radius: var(--mcots-card-radius);
    border-bottom-right-radius: var(--mcots-card-radius);
}

.mcots-main .list-group-item {
    background: var(--mcots-surface);
    color: var(--mcots-text);
    border-color: var(--mcots-card-divider);
}

/* Module container chrome (BlazorTheme-style wrappers) */
.mcots-main .module-card .module-header,
.mcots-main .module-card .header-title {
    color: var(--mcots-card-header-color);
}

.mcots-main .module-card hr.horizontal-line {
    border-color: var(--mcots-card-divider);
    opacity: 1;
    margin: 0.75rem 0;
}

/* Match BlazorTheme defaults; keep specificity low so module-local
   .module-header { display:none; } can still override when needed. */
:where(.mcots-main) :where(.module-header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

:where(.mcots-main) :where(.module-header) :where(.header-title) {
    display: block;
    margin: 0;
    color: var(--mcots-card-title-color);
    font-weight: 600;
}

:where(.mcots-main) :where(.module-header) :where(.module-actions) {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Login module panel (Admin/Login) */
.mcots-main .Oqtane-Modules-Admin-Login {
    width: min(100%, 26rem) !important;
    margin: 1.25rem auto !important;
    background: var(--mcots-surface) !important;
    border: 1px solid var(--mcots-card-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(12, 31, 51, 0.08) !important;
}

body.darkMode .mcots-main .Oqtane-Modules-Admin-Login {
    background: color-mix(in srgb, var(--mcots-surface) 92%, #0a1a28 8%) !important;
    border-color: var(--mcots-topbar-border) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32) !important;
}

.mcots-main .Oqtane-Modules-Admin-Login .control-label,
.mcots-main .Oqtane-Modules-Admin-Login label {
    color: var(--mcots-text-soft) !important;
    font-weight: 500;
}

.mcots-main .Oqtane-Modules-Admin-Login .form-control {
    background: var(--mcots-input-bg) !important;
    color: var(--mcots-input-color) !important;
    border: 1px solid var(--mcots-input-border) !important;
}

.mcots-main .Oqtane-Modules-Admin-Login .form-control::placeholder {
    color: var(--mcots-text-muted) !important;
    opacity: 1;
}

.mcots-main .Oqtane-Modules-Admin-Login .input-group > .btn {
    background: var(--mcots-control-bg) !important;
    color: var(--mcots-control-color) !important;
    border-color: var(--mcots-input-border) !important;
}

.mcots-main .Oqtane-Modules-Admin-Login .input-group > .btn:hover,
.mcots-main .Oqtane-Modules-Admin-Login .input-group > .btn:focus {
    background: var(--mcots-control-hover-bg) !important;
    color: var(--mcots-control-hover-color) !important;
    border-color: var(--mcots-control-hover-border) !important;
}

.mcots-main .Oqtane-Modules-Admin-Login a {
    color: var(--mcots-link-color) !important;
}

.mcots-main .Oqtane-Modules-Admin-Login a:hover {
    color: var(--mcots-link-hover-color) !important;
}

.mcots-main .Oqtane-Modules-Admin-Login .btn-secondary {
    background: var(--mcots-btn-secondary-bg) !important;
    border-color: var(--mcots-btn-secondary-border) !important;
    color: var(--mcots-btn-secondary-color) !important;
}

/* Panel sections used across TDS modules (replaces per-module #fff / #212529 blocks) */
.mcots-main .dark-light-mode-bg {
    background: var(--mcots-surface) !important;
    color: var(--mcots-text) !important;
    border: 1px solid var(--mcots-card-border) !important;
    border-radius: var(--mcots-card-radius) !important;
    box-shadow: var(--mcots-card-shadow) !important;
}

.mcots-main .shadow.rounded {
    box-shadow: none !important;
    border: 1px solid var(--mcots-card-border) !important;
    border-radius: var(--mcots-card-radius) !important;
}

/* Accordion cards */
.mcots-main .accordion-item {
    background: var(--mcots-surface);
    color: var(--mcots-text);
    border-color: var(--mcots-card-divider);
}

.mcots-main .accordion-button {
    background: var(--mcots-card-header-bg);
    color: var(--mcots-card-header-color);
    box-shadow: none;
}

.mcots-main .accordion-button:not(.collapsed) {
    background: var(--mcots-card-header-bg);
    color: var(--mcots-card-header-color);
    box-shadow: inset 0 -1px 0 var(--mcots-card-divider);
}

.mcots-main .accordion-button:focus {
    border-color: var(--mcots-accent);
    box-shadow: 0 0 0 0.2rem rgba(0, 97, 153, 0.2);
}

.mcots-main .accordion-body {
    background: var(--mcots-surface);
    color: var(--mcots-text);
}

/* Syncfusion accordion (e-accordion) */
.mcots-main .e-accordion,
.mcots-main .e-accordion .e-acrdn-item,
.mcots-main .e-accordion .e-acrdn-panel,
.mcots-main .e-accordion .e-acrdn-content {
    background: var(--mcots-surface) !important;
    color: var(--mcots-text) !important;
    border-color: var(--mcots-card-divider) !important;
}

.mcots-main .e-accordion .e-acrdn-item {
    border: 1px solid var(--mcots-card-divider) !important;
    border-radius: var(--mcots-radius-sm) !important;
    margin-bottom: 0.35rem;
    overflow: hidden;
}

.mcots-main .e-accordion .e-acrdn-item .e-acrdn-header {
    background: var(--mcots-card-header-bg) !important;
    color: var(--mcots-card-header-color) !important;
    border: 0 !important;
}

.mcots-main .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content,
.mcots-main .e-accordion .e-acrdn-item .e-acrdn-header .e-icons {
    color: inherit !important;
}

.mcots-main .e-accordion .e-acrdn-item .e-acrdn-header:hover,
.mcots-main .e-accordion .e-acrdn-item.e-select .e-acrdn-header,
.mcots-main .e-accordion .e-acrdn-item.e-selected .e-acrdn-header,
.mcots-main .e-accordion .e-acrdn-item.e-expand-state > .e-acrdn-header {
    background: var(--mcots-nav-hover-bg) !important;
    color: var(--mcots-text) !important;
}

.mcots-main .e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content {
    background: var(--mcots-surface) !important;
    color: var(--mcots-text) !important;
    border-top: 1px solid var(--mcots-card-divider) !important;
}

/* Database Management accordion table rows/items */
.mcots-main .e-accordion .e-acrdn-content .item {
    color: var(--mcots-text) !important;
    border-radius: var(--mcots-radius-sm);
    padding: 0.25rem 0.4rem;
}

.mcots-main .e-accordion .e-acrdn-content .item:hover {
    background: var(--mcots-nav-hover-bg) !important;
    color: var(--mcots-text) !important;
}

.mcots-main .e-accordion .e-acrdn-content .clicked,
.mcots-main .e-accordion .e-acrdn-content .item .clicked {
    color: var(--mcots-nav-active-icon) !important;
    background: var(--mcots-nav-active-bg) !important;
    border-radius: var(--mcots-radius-sm);
    display: block;
}

/* Syncfusion cards */
.mcots-main .e-card {
    background: var(--mcots-surface) !important;
    color: var(--mcots-text) !important;
    border: 1px solid var(--mcots-card-border) !important;
    border-radius: var(--mcots-card-radius) !important;
    box-shadow: var(--mcots-card-shadow) !important;
}

.mcots-main .e-card .e-card-header {
    background: var(--mcots-card-header-bg) !important;
    color: var(--mcots-card-header-color) !important;
    border-bottom: 1px solid var(--mcots-card-divider) !important;
}

.mcots-main .e-card .e-card-actions {
    background: var(--mcots-card-footer-bg) !important;
    color: var(--mcots-card-footer-color) !important;
    border-top: 1px solid var(--mcots-card-divider) !important;
}

.mcots-main .e-card .e-card-content,
.mcots-main .e-card .e-card-content * {
    color: inherit;
}

.table,
.e-grid,
.e-panel {
    background: var(--mcots-surface) !important;
    color: var(--mcots-text) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: var(--mcots-table-radius) !important;
}

.table > :not(caption) > * > *,
.table th,
.table td {
    background: transparent !important;
    color: var(--mcots-text) !important;
    border-color: var(--mcots-border-on-dark) !important;
    box-shadow: none;
}

/* Bootstrap fields — Syncfusion composites use a single wrapper border (below) */
.form-control,
.form-select {
    background: var(--mcots-input-bg) !important;
    color: var(--mcots-input-color) !important;
    border: 1px solid var(--mcots-shell-border) !important;
    box-shadow: none !important;
    border-radius: var(--mcots-control-radius) !important;
}

/* Avoid double border: wrapper carries the shell border, not inner .e-input */
.mcots-layout .e-input-group.e-control-wrapper .e-input,
.mcots-layout .e-input-group.e-control-wrapper input.e-input,
.mcots-layout .e-input-group.e-control-wrapper textarea.e-input,
.mcots-layout .e-float-input.e-control-wrapper .e-input,
.mcots-layout .e-ddl.e-input-group.e-control-wrapper .e-input,
.mcots-layout .e-multiselect.e-input-group.e-control-wrapper .e-input,
.mcots-layout .e-datepicker.e-input-group.e-control-wrapper .e-input,
.mcots-layout .e-date-wrapper.e-control-wrapper .e-input,
.mcots-layout .e-numerictextbox.e-input-group.e-control-wrapper .e-input,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-input-group.e-control-wrapper .e-input,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-input-group.e-control-wrapper input.e-input,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-ddl.e-input-group.e-control-wrapper .e-input,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-input-group.e-control-wrapper.e-date-wrapper input.e-input,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-input-group.e-control-wrapper.e-ddl input.e-input,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-datepicker.e-input-group.e-control-wrapper .e-input {
    background: transparent !important;
    color: var(--mcots-input-color) !important;
    -webkit-text-fill-color: var(--mcots-input-color) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;
    border-radius: 0 !important;
}

.mcots-layout .e-input-group:not(.e-control-wrapper),
body:has(.mcots-layout) [class$="-modal-wrap"] .e-input-group:not(.e-control-wrapper) {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.form-control::placeholder {
    color: var(--mcots-text-soft);
}

/* Slight radius: Bootstrap + Syncfusion inputs/dropdowns in main content */
.mcots-layout .mcots-main .form-control,
.mcots-layout .mcots-main .form-select,
.mcots-layout .mcots-main .input-group,
.mcots-layout .mcots-main .input-group > .form-control,
.mcots-layout .mcots-main .input-group > .btn,
.mcots-layout .mcots-main .e-input-group,
.mcots-layout .mcots-main .e-input-group.e-control-wrapper,
.mcots-layout .mcots-main .e-float-input.e-control-wrapper,
.mcots-layout .mcots-main .e-ddl.e-input-group,
.mcots-layout .mcots-main .e-ddl.e-input-group.e-control-wrapper,
.mcots-layout .mcots-main .e-multiselect.e-input-group,
.mcots-layout .mcots-main .e-textbox,
.mcots-layout .mcots-main input.e-input,
.mcots-layout .mcots-main .e-input-group input,
.mcots-layout .mcots-main .e-input-group .e-input-group-icon,
.mcots-layout .mcots-main .e-ddl .e-input-group-icon,
.mcots-layout .mcots-main .e-ddl .e-input,
.mcots-layout .mcots-main .e-control-wrapper:not(.e-btn):not(.e-chip),
.mcots-layout .modal .form-control,
.mcots-layout .modal .form-select,
.mcots-layout .modal .e-input-group,
.mcots-layout .modal .e-input-group.e-control-wrapper,
.mcots-layout .modal .e-ddl.e-input-group,
.mcots-layout .modal .e-ddl.e-input-group.e-control-wrapper,
.mcots-layout .e-dialog .form-control,
.mcots-layout .e-dialog .e-input-group,
.mcots-layout .e-dialog .e-input-group.e-control-wrapper,
.mcots-layout .e-dialog .e-ddl.e-input-group,
.mcots-layout .e-dialog .e-ddl.e-input-group.e-control-wrapper,
body:has(.mcots-layout) .modal .form-control,
body:has(.mcots-layout) .modal .form-select,
body:has(.mcots-layout) .modal .e-input-group,
body:has(.mcots-layout) .modal .e-input-group.e-control-wrapper,
body:has(.mcots-layout) .modal .e-ddl.e-input-group,
body:has(.mcots-layout) .modal .e-ddl.e-input-group.e-control-wrapper,
body:has(.mcots-layout) .e-dialog .form-control,
body:has(.mcots-layout) .e-dialog .e-input-group,
body:has(.mcots-layout) .e-dialog .e-input-group.e-control-wrapper,
body:has(.mcots-layout) .e-dialog .e-ddl.e-input-group,
body:has(.mcots-layout) .e-dialog .e-ddl.e-input-group.e-control-wrapper {
    border-radius: var(--mcots-control-radius) !important;
}

.mcots-layout .mcots-main .input-group > .form-control,
.mcots-layout .mcots-main .input-group > .btn {
    border: 1px solid var(--mcots-shell-border) !important;
}

/* All form controls under MCOTS layout — slight radius */
.mcots-layout input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.mcots-layout select,
.mcots-layout textarea,
.mcots-layout .form-control,
.mcots-layout .form-select,
.mcots-layout .input-group-text,
.mcots-layout .e-control-wrapper:not(.e-btn):not(.e-chip),
.mcots-layout .e-input,
.mcots-layout .e-input-group,
.mcots-layout .e-ddl,
.mcots-layout .e-dropdownbase,
.mcots-layout .e-datepicker,
.mcots-layout .e-datetimepicker,
.mcots-layout .e-numerictextbox,
.mcots-layout .e-multiselect,
.mcots-layout .e-textbox,
body:has(.mcots-layout) .modal input:not([type="checkbox"]):not([type="radio"]),
body:has(.mcots-layout) .modal select,
body:has(.mcots-layout) .modal textarea,
body:has(.mcots-layout) .modal .form-control,
body:has(.mcots-layout) .modal .form-select,
body:has(.mcots-layout) .modal .e-control-wrapper:not(.e-btn),
body:has(.mcots-layout) .modal .e-input-group,
body:has(.mcots-layout) .e-dialog .e-control-wrapper:not(.e-btn),
body:has(.mcots-layout) .e-dialog .e-input-group {
    border-radius: var(--mcots-control-radius) !important;
}

/* Syncfusion: border on wrapper (shell style); inner field borderless to avoid double line */
.mcots-layout .mcots-main .e-input-group.e-control-wrapper,
.mcots-layout .mcots-main .e-ddl.e-input-group.e-control-wrapper,
.mcots-layout .mcots-main .e-float-input.e-control-wrapper,
.mcots-layout .mcots-main .e-multiselect.e-input-group.e-control-wrapper,
.mcots-layout .mcots-main .e-datepicker.e-input-group.e-control-wrapper,
.mcots-layout .mcots-main .e-input-group.e-control-wrapper.e-date-wrapper,
.mcots-layout .mcots-main .e-input-group.e-control-wrapper.e-ddl,
.mcots-layout .mcots-main .e-numerictextbox.e-input-group.e-control-wrapper,
.mcots-layout .modal .e-input-group.e-control-wrapper,
.mcots-layout .modal .e-ddl.e-input-group.e-control-wrapper,
.mcots-layout .modal .e-datepicker.e-input-group.e-control-wrapper,
.mcots-layout .e-dialog .e-input-group.e-control-wrapper,
.mcots-layout .e-dialog .e-ddl.e-input-group.e-control-wrapper,
body:has(.mcots-layout) .modal .e-input-group.e-control-wrapper,
body:has(.mcots-layout) .modal .e-ddl.e-input-group.e-control-wrapper,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-input-group.e-control-wrapper,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-ddl.e-input-group.e-control-wrapper,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-datepicker.e-input-group.e-control-wrapper,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-float-input.e-control-wrapper,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-multiselect.e-input-group.e-control-wrapper,
body:has(.mcots-layout) .e-dialog .e-input-group.e-control-wrapper,
body:has(.mcots-layout) .e-dialog .e-ddl.e-input-group.e-control-wrapper {
    background: var(--mcots-input-bg) !important;
    border: 1px solid var(--mcots-shell-border) !important;
    box-shadow: none !important;
    border-radius: var(--mcots-control-radius) !important;
}

.mcots-layout .mcots-main .e-input-group .e-input-group-icon,
.mcots-layout .mcots-main .e-ddl .e-input-group-icon,
.mcots-layout .mcots-main .e-datepicker .e-input-group-icon,
.mcots-layout .modal .e-input-group .e-input-group-icon,
.mcots-layout .modal .e-ddl .e-input-group-icon,
.mcots-layout .modal .e-datepicker .e-input-group-icon,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-input-group .e-input-group-icon,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-ddl .e-input-group-icon,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-datepicker .e-input-group-icon,
body:has(.mcots-layout) .e-dialog .e-input-group .e-input-group-icon,
body:has(.mcots-layout) .e-dialog .e-ddl .e-input-group-icon {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--mcots-text-soft) !important;
}

.mcots-layout .mcots-main .e-input-group.e-control-wrapper:hover,
.mcots-layout .mcots-main .e-input-group.e-control-wrapper.e-input-focus,
.mcots-layout .mcots-main .e-ddl.e-input-group.e-control-wrapper:hover,
.mcots-layout .mcots-main .e-ddl.e-input-group.e-control-wrapper.e-input-focus,
.mcots-layout .mcots-main .e-datepicker.e-input-group.e-control-wrapper:hover,
.mcots-layout .mcots-main .e-datepicker.e-input-group.e-control-wrapper.e-input-focus,
.mcots-layout .modal .e-input-group.e-control-wrapper:hover,
.mcots-layout .modal .e-input-group.e-control-wrapper.e-input-focus,
.mcots-layout .modal .e-ddl.e-input-group.e-control-wrapper:hover,
.mcots-layout .modal .e-ddl.e-input-group.e-control-wrapper.e-input-focus,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-input-group.e-control-wrapper:hover,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-input-group.e-control-wrapper.e-input-focus,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-ddl.e-input-group.e-control-wrapper:hover,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-ddl.e-input-group.e-control-wrapper.e-input-focus,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-datepicker.e-input-group.e-control-wrapper:hover,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-datepicker.e-input-group.e-control-wrapper.e-input-focus,
body:has(.mcots-layout) .e-dialog .e-input-group.e-control-wrapper:hover,
body:has(.mcots-layout) .e-dialog .e-input-group.e-control-wrapper.e-input-focus,
body:has(.mcots-layout) .e-dialog .e-ddl.e-input-group.e-control-wrapper:hover,
body:has(.mcots-layout) .e-dialog .e-ddl.e-input-group.e-control-wrapper.e-input-focus {
    border: 1px solid var(--mcots-shell-border) !important;
    box-shadow: none !important;
}

/* Slight radius: data tables / Syncfusion grids */
.mcots-layout .mcots-main .table,
.mcots-layout .mcots-main .e-grid,
.mcots-layout .mcots-main .e-grid .e-gridcontent,
.mcots-layout .mcots-main .e-grid .e-table,
.mcots-layout .mcots-main .e-gridheader,
.mcots-layout .mcots-main .e-gridpager,
.mcots-layout .mcots-main .e-grid .e-pager .e-numericitem,
.mcots-layout .mcots-main .e-grid .e-pager .e-next,
.mcots-layout .mcots-main .e-grid .e-pager .e-prev,
.mcots-layout .mcots-main .e-grid .e-pager .e-first,
.mcots-layout .mcots-main .e-grid .e-pager .e-last {
    border-radius: var(--mcots-table-radius) !important;
}

/* Syncfusion grids — shell palette (headers, rows, pager) */
.mcots-layout .mcots-main .e-grid .e-gridheader,
.mcots-layout .mcots-main .e-grid .e-headercontent,
.mcots-layout .mcots-main .e-grid .e-headercell,
.mcots-layout .mcots-main .e-grid .e-detailheadercell,
.mcots-layout .mcots-main .e-grid .e-stackedheadercell,
.mcots-layout .mcots-main .e-grid span.e-headertext {
    background: var(--mcots-grid-header-bg) !important;
    color: var(--mcots-grid-header-color) !important;
    border-color: var(--mcots-grid-border) !important;
}

.mcots-layout .mcots-main .e-grid .e-gridcontent,
.mcots-layout .mcots-main .e-grid .e-content {
    background: var(--mcots-grid-row-bg) !important;
}

.mcots-layout .mcots-main .e-grid .e-rowcell,
.mcots-layout .mcots-main .e-grid .e-groupcaption,
.mcots-layout .mcots-main .e-grid .e-indentcell,
.mcots-layout .mcots-main .e-grid .e-recordpluscollapse,
.mcots-layout .mcots-main .e-grid .e-recordplusexpand {
    background: var(--mcots-grid-row-bg) !important;
    color: var(--mcots-grid-row-color) !important;
    border-color: var(--mcots-grid-border) !important;
}

.mcots-layout .mcots-main .e-grid .e-altrow .e-rowcell {
    background: var(--mcots-grid-row-alt-bg) !important;
}

/* Grid row hover — override Syncfusion bootstrap5-dark white/light hover */
.mcots-layout .mcots-main .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-selectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
.mcots-layout .mcots-main .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-selectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
.mcots-layout .mcots-main .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-selectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
.mcots-layout .mcots-main .e-grid .e-row:hover .e-rowcell:not(.e-selectionbackground),
.mcots-layout .mcots-main .e-grid .e-altrow:hover .e-rowcell:not(.e-selectionbackground) {
    background: var(--mcots-grid-row-hover-bg) !important;
    color: var(--mcots-grid-row-color) !important;
}

/* Syncfusion grid — selected row/cell: single consistent color, no rail, no shadow */
.mcots-layout .mcots-main .e-grid .e-row.e-active,
.mcots-layout .mcots-main .e-grid .e-row.e-active .e-rowcell,
.mcots-layout .mcots-main .e-grid .e-altrow.e-active .e-rowcell,
.mcots-layout .mcots-main .e-grid .e-rowcell.e-active,
.mcots-layout .mcots-main .e-grid .e-rowcell.e-selectionbackground,
.mcots-layout .mcots-main .e-grid .e-rowcell.e-cellselectionbackground {
    background: var(--mcots-row-selected-bg) !important;
    color: var(--mcots-grid-row-color) !important;
}

/* Empty-row ("No records to display") — match shell palette */
.mcots-layout .mcots-main .e-grid .e-emptyrow,
.mcots-layout .mcots-main .e-grid .e-emptyrow > td {
    background: var(--mcots-grid-row-bg) !important;
    color: var(--mcots-text-soft) !important;
    border-color: var(--mcots-grid-border) !important;
    text-align: center;
    font-style: italic;
    font-size: var(--mcots-font-sm, 0.75rem);
    padding: 1.25rem 0.5rem !important;
    letter-spacing: 0.02em;
}

/* Sort + filter header icons (light mode: soft, dark mode: brighter) */
.mcots-layout .mcots-main .e-grid .e-headercell .e-sortfilterdiv,
.mcots-layout .mcots-main .e-grid .e-headercell .e-filtermenudiv {
    color: var(--mcots-text-soft);
}

body.darkMode .mcots-layout .mcots-main .e-grid .e-headercell .e-sortfilterdiv,
body.darkMode .mcots-layout .mcots-main .e-grid .e-headercell .e-filtermenudiv,
body.darkMode .mcots-layout .mcots-main .e-grid .e-headercell .e-icon-filter,
body.darkMode .mcots-layout .mcots-main .e-grid .e-headercell .e-icon-ascending,
body.darkMode .mcots-layout .mcots-main .e-grid .e-headercell .e-icon-descending {
    color: #b8d2ea !important;
    filter: brightness(1.15);
}

body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid .e-headercell .e-sortfilterdiv,
body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid .e-headercell .e-filtermenudiv,
body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid .e-headercell .e-icon-filter,
body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid .e-headercell .e-icon-ascending,
body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid .e-headercell .e-icon-descending {
    color: #b8d2ea !important;
}

/* Syncfusion filter bar cells: prevent white background in dark mode */
body.darkMode .mcots-layout .mcots-main .e-grid .e-filterbarcell,
body.darkMode .mcots-layout .mcots-main .e-grid .e-filterbarcelldisabled {
    background: var(--mcots-grid-row-bg) !important;
    color: var(--mcots-grid-row-color) !important;
    border-color: var(--mcots-grid-border) !important;
}

body.darkMode .mcots-layout .mcots-main .e-grid .e-gridheader .e-filterbarcell .e-frozen-default-cursor {
    border-left-color: var(--mcots-grid-border) !important;
    border-right-color: var(--mcots-grid-border) !important;
}

body.darkMode .mcots-layout .mcots-main .e-grid .e-gridheader .e-headercell .e-frozen-default-cursor {
    border-left-color: var(--mcots-grid-border) !important;
}

body.darkMode .mcots-layout .mcots-main .e-grid.e-resize-lines .e-headercell .e-rhandler {
    border-right-color: var(--mcots-grid-border) !important;
}

.mcots-layout .mcots-main .e-grid .e-gridpager,
.mcots-layout .mcots-main .e-grid .e-pager {
    background: var(--mcots-grid-header-bg) !important;
    color: var(--mcots-grid-row-color) !important;
    border-color: var(--mcots-grid-border) !important;
}

/* Kit records-card footers: match card surface (white in light), not header grey */
.mcots-layout .mcots-main .tds-records-card .e-grid .e-gridpager,
.mcots-layout .mcots-main .tds-records-card .e-grid .e-pager,
.mcots-layout .mcots-main .tds-records-card .e-pager,
.mcots-layout .mcots-main .tds-records-card .e-gridpager {
    background: var(--mcots-surface, #fff) !important;
}

.mcots-layout .mcots-main .e-grid .e-pager .e-numericitem,
.mcots-layout .mcots-main .e-grid .e-pager .e-currentitem,
.mcots-layout .mcots-main .e-grid .e-pager .e-next,
.mcots-layout .mcots-main .e-grid .e-pager .e-prev,
.mcots-layout .mcots-main .e-grid .e-pager .e-first,
.mcots-layout .mcots-main .e-grid .e-pager .e-last,
.mcots-layout .mcots-main .e-grid .e-pager .e-parentmsgbar,
.mcots-layout .mcots-main .e-grid .e-pager .e-pagercontainer {
    background: transparent !important;
    color: var(--mcots-grid-row-color) !important;
    border-color: var(--mcots-grid-border) !important;
}

/* Group drop area (grid grouping strip) */
.mcots-layout .mcots-main .e-grid .e-groupdroparea,
.mcots-layout .mcots-main .e-grid .e-groupdroparea .e-grouptext,
.mcots-layout .mcots-main .e-grid .e-groupdroparea .e-ungroupbutton,
.mcots-layout .mcots-main .e-grid .e-groupdroparea .e-icons {
    background: var(--mcots-grid-header-bg) !important;
    color: var(--mcots-grid-header-color) !important;
    border-color: var(--mcots-grid-border) !important;
}

.mcots-layout .mcots-main .e-grid .e-groupdroparea:hover {
    background: color-mix(in srgb, var(--mcots-grid-header-bg) 82%, var(--mcots-nav-hover-bg) 18%) !important;
}

/* Syncfusion toolbar */
.mcots-layout .mcots-main .e-toolbar,
.mcots-layout .mcots-main .e-toolbar .e-toolbar-items,
.mcots-layout .mcots-main .e-toolbar .e-toolbar-item,
.mcots-layout .mcots-main .e-toolbar .e-tbar-btn {
    background: var(--mcots-grid-header-bg) !important;
    color: var(--mcots-grid-header-color) !important;
    border-color: var(--mcots-grid-border) !important;
}

.mcots-layout .mcots-main .e-toolbar .e-toolbar-item .e-tbar-btn:hover,
.mcots-layout .mcots-main .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
    background: var(--mcots-nav-hover-bg) !important;
    color: var(--mcots-text) !important;
}

/* Pager (all states, not only base strip). Records-card overridden above to surface. */
.mcots-layout .mcots-main .e-pager,
.mcots-layout .mcots-main .e-gridpager {
    background: var(--mcots-grid-header-bg) !important;
    color: var(--mcots-grid-row-color) !important;
    border-color: var(--mcots-grid-border) !important;
}

.mcots-layout .mcots-main .tds-records-card .e-pager,
.mcots-layout .mcots-main .tds-records-card .e-gridpager {
    background: var(--mcots-surface, #fff) !important;
}

.mcots-layout .mcots-main .e-grid .e-pager .e-first,
.mcots-layout .mcots-main .e-grid .e-pager .e-prev,
.mcots-layout .mcots-main .e-grid .e-pager .e-next,
.mcots-layout .mcots-main .e-grid .e-pager .e-last,
.mcots-layout .mcots-main .e-grid .e-pager .e-numericitem,
.mcots-layout .mcots-main .e-grid .e-pager .e-currentitem,
.mcots-layout .mcots-main .e-grid .e-pager .e-pp,
.mcots-layout .mcots-main .e-grid .e-pager .e-np,
.mcots-layout .mcots-main .e-grid .e-pager .e-parentmsgbar,
.mcots-layout .mcots-main .e-grid .e-pager .e-pagesizes,
.mcots-layout .mcots-main .e-grid .e-pager .e-pagerdropdown {
    color: var(--mcots-grid-row-color) !important;
    border-color: var(--mcots-grid-border) !important;
}

.mcots-layout .mcots-main .e-pager .e-first,
.mcots-layout .mcots-main .e-pager .e-prev,
.mcots-layout .mcots-main .e-pager .e-next,
.mcots-layout .mcots-main .e-pager .e-last,
.mcots-layout .mcots-main .e-pager .e-numericitem,
.mcots-layout .mcots-main .e-pager .e-currentitem,
.mcots-layout .mcots-main .e-pager .e-pp,
.mcots-layout .mcots-main .e-pager .e-np,
.mcots-layout .mcots-main .e-pager .e-parentmsgbar,
.mcots-layout .mcots-main .e-pager .e-pagesizes,
.mcots-layout .mcots-main .e-pager .e-pagercontainer,
.mcots-layout .mcots-main .e-pager .e-pagerdropdown {
    color: var(--mcots-grid-row-color) !important;
    border-color: var(--mcots-grid-border) !important;
    background: transparent !important;
}

.mcots-layout .mcots-main .e-grid .e-pager .e-numericitem:hover,
.mcots-layout .mcots-main .e-grid .e-pager .e-first:not(.e-disable):hover,
.mcots-layout .mcots-main .e-grid .e-pager .e-prev:not(.e-disable):hover,
.mcots-layout .mcots-main .e-grid .e-pager .e-next:not(.e-disable):hover,
.mcots-layout .mcots-main .e-grid .e-pager .e-last:not(.e-disable):hover {
    background: var(--mcots-nav-hover-bg) !important;
    color: var(--mcots-text) !important;
}

.mcots-layout .mcots-main .e-pager .e-numericitem:hover,
.mcots-layout .mcots-main .e-pager .e-first:not(.e-disable):hover,
.mcots-layout .mcots-main .e-pager .e-prev:not(.e-disable):hover,
.mcots-layout .mcots-main .e-pager .e-next:not(.e-disable):hover,
.mcots-layout .mcots-main .e-pager .e-last:not(.e-disable):hover {
    background: var(--mcots-nav-hover-bg) !important;
    color: var(--mcots-text) !important;
}

.mcots-layout .mcots-main .e-grid .e-pager .e-currentitem {
    background: var(--mcots-nav-active-bg) !important;
    color: var(--mcots-nav-active-icon) !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.mcots-layout .mcots-main .e-pager .e-currentitem {
    background: var(--mcots-nav-active-bg) !important;
    color: var(--mcots-nav-active-icon) !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Syncfusion tabs — inactive tabs use muted text, not link blue */
.mcots-layout .mcots-main .e-tab .e-tab-header,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-items,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-hscroll-content {
    background: transparent !important;
    border-color: var(--mcots-shell-border) !important;
}

.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item {
    background: transparent !important;
    border-color: transparent !important;
}

.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item .e-tab-text,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item .e-tab-icon {
    color: var(--mcots-tab-inactive) !important;
}

.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Inactive tab — subtle hover only */
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap:hover,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap:focus {
    background: var(--mcots-tab-hover-bg) !important;
    border-color: var(--mcots-tab-hover-border) !important;
    border-radius: var(--mcots-radius-sm) var(--mcots-radius-sm) 0 0 !important;
}

.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap:hover .e-tab-text,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap:hover .e-tab-icon,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap:focus .e-tab-text,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap:focus .e-tab-icon {
    color: var(--mcots-tab-active) !important;
}

/* Active tab — framed outline (restored); hover must match resting active state */
.mcots-layout .mcots-main .e-tab .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item.e-active,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-items .e-toolbar-item.e-active,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item.e-active:hover,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-items .e-toolbar-item.e-active:hover {
    background: transparent !important;
    border: 1px solid var(--mcots-tab-active-border) !important;
    border-radius: var(--mcots-tab-active-radius) !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item.e-active:hover .e-tab-wrap,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus-visible {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item.e-active .e-text-wrap,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-text-wrap,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-text-wrap {
    background: transparent !important;
}

.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-text,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-icon,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-text,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-icon,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-icon,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item.e-active:hover .e-tab-text,
.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item.e-active:hover .e-tab-icon {
    color: var(--mcots-tab-active) !important;
}

.mcots-layout .mcots-main .e-tab .e-tab-header .e-toolbar-item .e-ripple-element {
    display: none !important;
}

.mcots-layout .mcots-main .e-tab .e-indicator {
    background: var(--mcots-tab-indicator) !important;
}

.mcots-layout .mcots-main .e-tab .e-content {
    background: transparent !important;
    color: var(--mcots-text) !important;
}

/* Syncfusion charts — axis, legend, title labels (SVG + HTML legends in main) */
.mcots-layout .mcots-main .e-chart .e-axis-label,
.mcots-layout .mcots-main .e-chart .e-axis-title,
.mcots-layout .mcots-main .e-chart .e-chart-title,
.mcots-layout .mcots-main .e-chart .e-legend-text,
.mcots-layout .mcots-main .e-chart svg text,
.mcots-layout .mcots-main .e-accumulationchart .e-legend-text,
.mcots-layout .mcots-main .e-accumulationchart .e-title,
.mcots-layout .mcots-main .e-accumulationchart svg text,
.mcots-layout .mcots-main .revenue-legend,
.mcots-layout .mcots-main .receivables-legend,
.mcots-layout .mcots-main .receivables-legend .aging-row,
.mcots-layout .mcots-main .aging-row {
    fill: var(--mcots-chart-label) !important;
    color: var(--mcots-chart-label) !important;
}

body.darkMode .mcots-layout .mcots-main .e-chart .e-axis-label,
body.darkMode .mcots-layout .mcots-main .e-chart .e-axis-title,
body.darkMode .mcots-layout .mcots-main .e-chart svg text,
body.darkMode .mcots-layout .mcots-main .e-accumulationchart .e-legend-text,
body.darkMode .mcots-layout .mcots-main .e-accumulationchart svg text,
body.darkMode .mcots-layout .mcots-main .revenue-legend,
body.darkMode .mcots-layout .mcots-main .receivables-legend,
body.darkMode .mcots-layout .mcots-main .receivables-legend .aging-row,
body.darkMode .mcots-layout .mcots-main .aging-row {
    fill: var(--mcots-chart-label) !important;
    color: var(--mcots-chart-label) !important;
}

.mcots-layout .mcots-main .e-chart .e-chart-background,
.mcots-layout .mcots-main .e-accumulationchart .e-accumulation-chart-background {
    fill: transparent !important;
}

.mcots-layout .mcots-main .e-chart .e-major-grid-line,
.mcots-layout .mcots-main .e-chart .e-minor-grid-line,
.mcots-layout .mcots-main .e-chart .e-axis-line,
.mcots-layout .mcots-main .e-chart .e-major-tick-line,
.mcots-layout .mcots-main .e-chart .e-minor-tick-line {
    stroke: var(--mcots-chart-grid-line) !important;
}

.mcots-layout .mcots-main .e-chart-tooltip,
.mcots-layout .mcots-main .e-accumulationchart .e-tooltip-wrap {
    background: var(--mcots-surface) !important;
    color: var(--mcots-text) !important;
    border: 1px solid var(--mcots-shell-border) !important;
}

/* ─── Modals (Bootstrap + Syncfusion SfDialog) ─── */

/* Bootstrap modal content */
.mcots-layout .modal-content,
body:has(.mcots-layout) .modal-content {
    background: var(--mcots-modal-bg) !important;
    color: var(--mcots-text) !important;
    border: 1px solid var(--mcots-card-border) !important;
    border-radius: var(--mcots-modal-radius) !important;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22) !important;
}

/* Bootstrap modal header */
.mcots-layout .modal-header,
body:has(.mcots-layout) .modal-header {
    background: var(--mcots-modal-header-bg) !important;
    border-bottom: 1px solid var(--mcots-card-divider) !important;
    padding: 18px 20px !important;
    border-radius: var(--mcots-modal-radius) var(--mcots-modal-radius) 0 0 !important;
}

/* Bootstrap modal footer */
.mcots-layout .modal-footer,
body:has(.mcots-layout) .modal-footer {
    background: var(--mcots-modal-header-bg) !important;
    border-top: 1px solid var(--mcots-card-divider) !important;
    padding: 12px 20px !important;
}

/* Bootstrap modal body */
.mcots-layout .modal-body,
body:has(.mcots-layout) .modal-body {
    background: var(--mcots-modal-bg) !important;
}

/* Bootstrap modal backdrop */
.mcots-layout .modal-backdrop.show,
body:has(.mcots-layout) .modal-backdrop.show {
    background-color: var(--mcots-modal-backdrop) !important;
}

/* Modal titles */
.mcots-layout .modal-title,
body:has(.mcots-layout) .modal-title {
    font-size: var(--mcots-font-xl, 1.375rem) !important;
    font-weight: 700 !important;
    color: var(--mcots-text) !important;
}

/* Form labels inside modals */
.mcots-layout .modal-content .form-label,
body:has(.mcots-layout) .modal-content .form-label {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: var(--mcots-text-soft) !important;
    margin-bottom: 6px !important;
}

/* Required asterisk */
.mcots-layout .modal-content .required-asterisk,
body:has(.mcots-layout) .modal-content .required-asterisk {
    color: var(--mcots-error) !important;
    font-weight: 700 !important;
}

/* Modal close button */
body.darkMode .mcots-layout .btn-close,
body.darkMode body:has(.mcots-layout) .btn-close {
    filter: invert(1) grayscale(1);
    opacity: 0.85;
}

/* Primary save button — matches PeopleManagement .btn-save-close */
.mcots-layout .modal-footer .btn-primary,
body:has(.mcots-layout) .modal-footer .btn-primary {
    background: var(--mcots-modal-header-bg) !important;
    border: 1px solid var(--mcots-control-border) !important;
    color: var(--mcots-text) !important;
    font-weight: 600 !important;
}

/* ─── Syncfusion SfDialog (PeopleManagement style) ─── */
.mcots-layout .e-dlg.e-dialog,
body:has(.mcots-layout) .e-dlg.e-dialog {
    background: var(--mcots-modal-bg) !important;
    border: 1px solid var(--mcots-card-border) !important;
    border-radius: var(--mcots-modal-radius) !important;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22) !important;
}

.mcots-layout .e-dlg .e-dlg-header-content,
body:has(.mcots-layout) .e-dlg .e-dlg-header-content {
    background: var(--mcots-modal-header-bg) !important;
    border-bottom: 1px solid var(--mcots-card-divider) !important;
    padding: 18px 20px !important;
    border-radius: var(--mcots-modal-radius) var(--mcots-modal-radius) 0 0 !important;
}

.mcots-layout .e-dlg .e-dlg-content,
body:has(.mcots-layout) .e-dlg .e-dlg-content {
    background: var(--mcots-modal-bg) !important;
    color: var(--mcots-text) !important;
}

.mcots-layout .e-dlg .e-footer-content,
body:has(.mcots-layout) .e-dlg .e-footer-content {
    background: var(--mcots-modal-header-bg) !important;
    border-top: 1px solid var(--mcots-card-divider) !important;
    padding: 12px 20px !important;
}

/* Dark mode — SfDialog */
body.darkMode .mcots-layout .e-dlg .e-btn.e-dlg-closeicon-btn,
body.darkMode body:has(.mcots-layout) .e-dlg .e-btn.e-dlg-closeicon-btn {
    color: var(--mcots-text) !important;
    background: transparent !important;
    border-color: transparent !important;
}

/* ── Form labels, help text, fieldsets inside modals / offcanvas / Syncfusion dialogs ── */

/* Bootstrap form labels — scoped to modal containers */
.mcots-layout .modal .control-label,
body:has(.mcots-layout) .modal .control-label,
body:has(.mcots-layout) [class$="-modal-wrap"] .control-label,
body:has(.mcots-layout) .e-dialog .control-label,
.mcots-layout .offcanvas .control-label,
body:has(.mcots-layout) .offcanvas .control-label,
body:has(.mcots-layout) [class$="-modal-wrap"] label,
body:has(.mcots-layout) .e-dialog label,
body:has(.mcots-layout) [class$="-modal-wrap"] .form-label,
body:has(.mcots-layout) .e-dialog .form-label,
body:has(.mcots-layout) [class$="-modal-wrap"] .col-form-label,
body:has(.mcots-layout) .e-dialog .col-form-label,
body:has(.mcots-layout) [class$="-modal-wrap"] .control-label,
body:has(.mcots-layout) .e-dialog .control-label,
.mcots-layout .offcanvas label,
.mcots-layout .offcanvas .form-label,
.mcots-layout .offcanvas .col-form-label,
body:has(.mcots-layout) #addForm .control-label,
body:has(.mcots-layout) #addForm label,
body:has(.mcots-layout) #addForm .form-label,
body:has(.mcots-layout) #addForm .col-form-label {
    color: var(--mcots-text) !important;
}

/* Help text / muted text inside modals and offcanvas */
body:has(.mcots-layout) .modal .text-muted,
body:has(.mcots-layout) .modal .form-text,
body:has(.mcots-layout) [class$="-modal-wrap"] .text-muted,
body:has(.mcots-layout) [class$="-modal-wrap"] .form-text,
body:has(.mcots-layout) .e-dialog .text-muted,
body:has(.mcots-layout) .e-dialog .form-text,
.mcots-layout .offcanvas .text-muted,
.mcots-layout .offcanvas .form-text,
body:has(.mcots-layout) #addForm .text-muted,
body:has(.mcots-layout) #addForm .form-text {
    color: var(--mcots-text-soft) !important;
}

/* Fieldset / hr / horizontal rules inside modals and offcanvas */
.mcots-layout .modal fieldset,
body:has(.mcots-layout) .modal fieldset,
body:has(.mcots-layout) [class$="-modal-wrap"] fieldset,
body:has(.mcots-layout) .e-dialog fieldset,
.mcots-layout .offcanvas fieldset,
body:has(.mcots-layout) #addForm fieldset {
    border-color: var(--mcots-shell-border) !important;
}

.mcots-layout .modal hr,
body:has(.mcots-layout) .modal hr,
body:has(.mcots-layout) [class$="-modal-wrap"] hr,
body:has(.mcots-layout) .e-dialog hr,
.mcots-layout .offcanvas hr,
body:has(.mcots-layout) #addForm hr {
    border-color: var(--mcots-shell-border) !important;
    opacity: 0.6;
}

/* Syncfusion dialog content text — ensure readable against modal bg */
body:has(.mcots-layout) .e-dialog .e-content,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-content {
    color: var(--mcots-text) !important;
}

/* Syncfusion dialog close icon — light + dark */
body:has(.mcots-layout) .e-dialog .e-btn.e-dlg-closeicon-btn,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-btn.e-dlg-closeicon-btn {
    color: var(--mcots-text-soft) !important;
}

body.darkMode .mcots-layout .e-dialog .e-btn.e-dlg-closeicon-btn,
body.darkMode:has(.mcots-layout) .e-dialog .e-btn.e-dlg-closeicon-btn,
body.darkMode:has(.mcots-layout) [class$="-modal-wrap"] .e-btn.e-dlg-closeicon-btn {
    color: var(--mcots-text) !important;
}

/* Offcanvas close button (Bootstrap X) */
body:has(.mcots-layout) .offcanvas .btn-close {
    filter: invert(0.3);
}

body.darkMode:has(.mcots-layout) .offcanvas .btn-close {
    filter: invert(1) grayscale(1);
    opacity: 0.85;
}

/* Full-viewport overlays — portaled to body by mcots-theme.js (above sidebar 2 / topbar 10) */
body > [class$="-modal-wrap"],
body > [class$="-help-backdrop"],
body > .account-modal-wrap,
body > .invoice-modal-wrap,
body > .product-modal-wrap,
body > .product-default-pricing-modal-wrap,
body > .volume-pricing-modal-wrap,
body > .invoice-wizard-modal-wrap,
body > .invoice-status-help-backdrop,
body > .app-admin-modal,
body > .app-actiondialog {
    z-index: 1050 !important;
}

body > .product-default-pricing-modal-wrap {
    z-index: 1065 !important;
}

body > .product-modal-wrap.is-stacked-back {
    z-index: 1050 !important;
}

body.mcots-overlay-open {
    overflow: hidden;
}

body > .modal-backdrop {
    z-index: 1045 !important;
}

body > .e-dlg-overlay,
body > .e-overlay.e-popup-open {
    z-index: 1045 !important;
}

body > .e-dialog.e-popup {
    z-index: 1050 !important;
}

/* Syncfusion grid filter popups — render at body level, need to float above dashboard */
body > .e-filter-popup.e-popup,
body > .e-flmenu.e-popup,
body > .e-col-menu.e-popup {
    z-index: 1060 !important;
}

/* Syncfusion dropdown popups in dark mode (rendered at body level).
   Must be opaque — never glass --mcots-surface (see-through over content). */
body.darkMode.mcots-shell-active .e-popup.e-control.e-popup-open,
body.darkMode:has(.mcots-layout) .e-popup.e-control.e-popup-open,
body.darkMode.mcots-shell-active .e-dropdownbase.e-popup,
body.darkMode:has(.mcots-layout) .e-dropdownbase.e-popup,
body.darkMode.mcots-shell-active .e-popup-wrapper.e-popup-open,
body.darkMode:has(.mcots-layout) .e-popup-wrapper.e-popup-open,
body.darkMode.mcots-shell-active .e-ddl.e-popup,
body.darkMode:has(.mcots-layout) .e-ddl.e-popup,
body.darkMode.mcots-shell-active .e-datepicker.e-popup,
body.darkMode:has(.mcots-layout) .e-datepicker.e-popup {
    background: var(--mcots-modal-bg, #141414) !important;
    background-color: var(--mcots-modal-bg, #141414) !important;
    color: var(--mcots-text) !important;
    border: 1px solid var(--mcots-shell-border) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
}

body.darkMode.mcots-shell-active .e-popup .e-content,
body.darkMode:has(.mcots-layout) .e-popup .e-content,
body.darkMode.mcots-shell-active .e-popup .e-list-parent,
body.darkMode:has(.mcots-layout) .e-popup .e-list-parent {
    background: var(--mcots-modal-bg, #141414) !important;
    background-color: var(--mcots-modal-bg, #141414) !important;
    color: var(--mcots-text) !important;
}

body.darkMode.mcots-shell-active .e-popup .e-list-item,
body.darkMode:has(.mcots-layout) .e-popup .e-list-item,
body.darkMode.mcots-shell-active .e-popup .e-list-item .e-list-text,
body.darkMode:has(.mcots-layout) .e-popup .e-list-item .e-list-text {
    color: var(--mcots-text) !important;
    background: transparent !important;
}

body.darkMode.mcots-shell-active .e-popup .e-list-item.e-hover,
body.darkMode:has(.mcots-layout) .e-popup .e-list-item.e-hover,
body.darkMode.mcots-shell-active .e-popup .e-list-item:hover,
body.darkMode:has(.mcots-layout) .e-popup .e-list-item:hover {
    background: var(--mcots-nav-hover-bg) !important;
    color: var(--mcots-text) !important;
}

body.darkMode.mcots-shell-active .e-popup .e-list-item.e-active,
body.darkMode:has(.mcots-layout) .e-popup .e-list-item.e-active,
body.darkMode.mcots-shell-active .e-popup .e-list-item.e-selected,
body.darkMode:has(.mcots-layout) .e-popup .e-list-item.e-selected,
body.darkMode.mcots-shell-active .e-popup .e-list-item.e-item-focus,
body.darkMode:has(.mcots-layout) .e-popup .e-list-item.e-item-focus {
    background: var(--mcots-nav-active-bg) !important;
    color: var(--mcots-nav-active-icon) !important;
}

body.darkMode.mcots-shell-active .e-popup .e-list-group-item,
body.darkMode:has(.mcots-layout) .e-popup .e-list-group-item,
body.darkMode.mcots-shell-active .e-popup .e-fixed-head,
body.darkMode:has(.mcots-layout) .e-popup .e-fixed-head {
    background: var(--mcots-card-header-bg) !important;
    color: var(--mcots-text-soft) !important;
    border-color: var(--mcots-card-divider) !important;
}

body.darkMode.mcots-shell-active .e-popup .e-input-group,
body.darkMode:has(.mcots-layout) .e-popup .e-input-group,
body.darkMode.mcots-shell-active .e-popup input.e-input,
body.darkMode:has(.mcots-layout) .e-popup input.e-input {
    background: var(--mcots-input-bg) !important;
    color: var(--mcots-input-color) !important;
    border-color: var(--mcots-shell-border) !important;
}

body.darkMode.mcots-shell-active .e-popup .e-input-group-icon,
body.darkMode:has(.mcots-layout) .e-popup .e-input-group-icon,
body.darkMode.mcots-shell-active .e-popup .e-ddl-icon,
body.darkMode:has(.mcots-layout) .e-popup .e-ddl-icon {
    color: var(--mcots-text-soft) !important;
}

/* Syncfusion grid filter popups (Excel + Menu) — rendered at body level.
   Both .e-filter-popup (Excel checkbox list) and .e-flmenu (Menu dialog). */
body.darkMode.mcots-shell-active .e-filter-popup,
body.darkMode:has(.mcots-layout) .e-filter-popup,
body.darkMode.mcots-shell-active .e-flmenu.e-popup,
body.darkMode:has(.mcots-layout) .e-flmenu.e-popup,
body.darkMode.mcots-shell-active .e-col-menu.e-popup,
body.darkMode:has(.mcots-layout) .e-col-menu.e-popup {
    background: var(--mcots-modal-bg, #141414) !important;
    background-color: var(--mcots-modal-bg, #141414) !important;
    color: var(--mcots-text) !important;
    border-color: var(--mcots-grid-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
}

body.darkMode.mcots-shell-active .e-filter-popup .e-filter-parent,
body.darkMode:has(.mcots-layout) .e-filter-popup .e-filter-parent,
body.darkMode.mcots-shell-active .e-flmenu .e-flmenu-head,
body.darkMode:has(.mcots-layout) .e-flmenu .e-flmenu-head,
body.darkMode.mcots-shell-active .e-flmenu .e-flmenu-input,
body.darkMode:has(.mcots-layout) .e-flmenu .e-flmenu-input,
body.darkMode.mcots-shell-active .e-col-menu .e-header,
body.darkMode:has(.mcots-layout) .e-col-menu .e-header {
    background: var(--mcots-modal-header-bg, #1a1a1a) !important;
    background-color: var(--mcots-modal-header-bg, #1a1a1a) !important;
    color: var(--mcots-text-soft) !important;
    border-color: var(--mcots-grid-border) !important;
}

body.darkMode.mcots-shell-active .e-filter-popup .e-checkboxlist .e-chk-hidden + .e-chk-frame-wrap .e-chk-frame,
body.darkMode:has(.mcots-layout) .e-filter-popup .e-checkboxlist .e-chk-hidden + .e-chk-frame-wrap .e-chk-frame {
    border-color: var(--mcots-text-soft) !important;
    background: var(--mcots-input-bg) !important;
}

body.darkMode.mcots-shell-active .e-filter-popup .e-checkboxlist .e-list-item,
body.darkMode:has(.mcots-layout) .e-filter-popup .e-checkboxlist .e-list-item,
body.darkMode.mcots-shell-active .e-filter-popup .e-search .e-input-group input,
body.darkMode:has(.mcots-layout) .e-filter-popup .e-search .e-input-group input,
body.darkMode.mcots-shell-active .e-filter-popup .e-btn,
body.darkMode:has(.mcots-layout) .e-filter-popup .e-btn,
body.darkMode.mcots-shell-active .e-flmenu .e-input-group input,
body.darkMode:has(.mcots-layout) .e-flmenu .e-input-group input,
body.darkMode.mcots-shell-active .e-flmenu .e-btn,
body.darkMode:has(.mcots-layout) .e-flmenu .e-btn {
    background: transparent !important;
    color: var(--mcots-text) !important;
}

body.darkMode.mcots-shell-active .e-filter-popup .e-checkboxlist .e-list-item.e-hover,
body.darkMode:has(.mcots-layout) .e-filter-popup .e-checkboxlist .e-list-item.e-hover,
body.darkMode.mcots-shell-active .e-filter-popup .e-checkboxlist .e-list-item:hover,
body.darkMode:has(.mcots-layout) .e-filter-popup .e-checkboxlist .e-list-item:hover {
    background: var(--mcots-nav-hover-bg) !important;
    color: var(--mcots-text) !important;
}

body.darkMode.mcots-shell-active .e-filter-popup input.e-input,
body.darkMode:has(.mcots-layout) .e-filter-popup input.e-input,
body.darkMode.mcots-shell-active .e-flmenu input.e-input,
body.darkMode:has(.mcots-layout) .e-flmenu input.e-input,
body.darkMode.mcots-shell-active .e-col-menu input.e-input,
body.darkMode:has(.mcots-layout) .e-col-menu input.e-input {
    background: var(--mcots-input-bg) !important;
    color: var(--mcots-input-color) !important;
    border-color: var(--mcots-grid-border) !important;
}

/* Filter popup footer buttons */
body.darkMode.mcots-shell-active .e-filter-popup .e-ftrbtn,
body.darkMode:has(.mcots-layout) .e-filter-popup .e-ftrbtn,
body.darkMode.mcots-shell-active .e-flmenu .e-flmenu-okbtn,
body.darkMode:has(.mcots-layout) .e-flmenu .e-flmenu-okbtn,
body.darkMode.mcots-shell-active .e-flmenu .e-flmenu-cancelbtn,
body.darkMode:has(.mcots-layout) .e-flmenu .e-flmenu-cancelbtn {
    background: var(--mcots-btn-secondary-bg) !important;
    color: var(--mcots-text) !important;
    border-color: var(--mcots-grid-border) !important;
}

/* Until portal runs, keep module modals above sidebar inside main */
.mcots-layout [class$="-modal-wrap"],
.mcots-layout [class$="-help-backdrop"],
.mcots-layout .account-modal-wrap,
.mcots-layout .invoice-modal-wrap,
.mcots-layout .invoice-status-help-backdrop,
.mcots-main .modal.fade.show.d-block {
    z-index: 1050 !important;
}

/* Accounting portaled modals — MCOTS blue palette (overrides module gray scoped tokens) */
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-modal-wrap,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .volume-pricing-modal-wrap,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .product-modal-wrap,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .product-default-pricing-modal-wrap,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-wizard-modal-wrap {
    --acct-bg: var(--mcots-surface) !important;
    --acct-border: var(--mcots-topbar-border) !important;
    --acct-text: var(--mcots-text) !important;
    --acct-muted: var(--mcots-text-soft) !important;
    --acct-overlay: var(--mcots-modal-backdrop) !important;
    --acct-notbill-bg: var(--mcots-surface-soft) !important;
    background-color: var(--mcots-modal-backdrop) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-modal-wrap .modal-content,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-modal-wrap .modal-body,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .volume-pricing-modal-wrap .modal-content,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .volume-pricing-modal-wrap .modal-body,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .product-modal-wrap .modal-content,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .product-modal-wrap .modal-body,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .product-default-pricing-modal-wrap .modal-content,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .product-default-pricing-modal-wrap .modal-body,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-wizard-modal-wrap .modal-content,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-wizard-modal-wrap .modal-body {
    background: var(--mcots-modal-bg) !important;
    color: var(--mcots-text) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-modal-wrap .modal-header,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-modal-wrap .modal-footer,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-modal-wrap .card-header,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .volume-pricing-modal-wrap .modal-header,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .volume-pricing-modal-wrap .modal-footer,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .product-modal-wrap .modal-header,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .product-modal-wrap .modal-footer,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .product-default-pricing-modal-wrap .modal-header,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .product-default-pricing-modal-wrap .modal-footer,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-wizard-modal-wrap .modal-header,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-wizard-modal-wrap .modal-footer,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-wizard-modal-wrap .card-header {
    background: var(--mcots-modal-header-bg) !important;
    color: var(--mcots-text) !important;
    border-color: var(--mcots-card-divider) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-wizard-modal-wrap .wizard-total-box,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-wizard-modal-wrap .wizard-notbill-panel {
    background: var(--mcots-surface-soft) !important;
    color: var(--mcots-text) !important;
    border-color: var(--mcots-card-divider) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .volume-pricing-modal-wrap .volume-pricing-legend,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .product-default-pricing-modal-wrap .product-default-pricing-legend {
    color: var(--mcots-text-soft) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .product-modal-wrap .form-label,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .product-default-pricing-modal-wrap .form-label,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .product-modal-wrap .text-muted,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .product-default-pricing-modal-wrap .text-muted {
    color: var(--mcots-text-soft) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .modal-footer .e-btn.e-outline,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .wizard-bottom-nav .e-btn.e-outline,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-modal-wrap .e-btn.e-outline,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-wizard-modal-wrap .e-btn.e-outline,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .volume-pricing-modal-wrap .e-btn.e-outline {
    background: var(--mcots-btn-secondary-bg) !important;
    border: 1px solid var(--mcots-btn-secondary-border) !important;
    color: var(--mcots-btn-secondary-color) !important;
    box-shadow: none !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .modal-footer .e-btn.e-outline:hover,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .wizard-bottom-nav .e-btn.e-outline:hover,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-wizard-modal-wrap .e-btn.e-outline:hover {
    background: var(--mcots-control-hover-bg) !important;
    border-color: var(--mcots-control-hover-border) !important;
    color: var(--mcots-control-hover-color) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .modal-footer .e-btn.e-flat,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .volume-pricing-modal-wrap .modal-footer .e-btn.e-flat {
    background: var(--mcots-btn-secondary-bg) !important;
    border: 1px solid var(--mcots-btn-secondary-border) !important;
    color: var(--mcots-btn-secondary-color) !important;
    box-shadow: none !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .modal-footer .e-btn.e-flat:hover,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .volume-pricing-modal-wrap .modal-footer .e-btn.e-flat:hover {
    background: var(--mcots-control-hover-bg) !important;
    border-color: var(--mcots-control-hover-border) !important;
    color: var(--mcots-control-hover-color) !important;
}

/* Invoice all / success — override module rule that groups e-success with gray e-outline */
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-wizard-modal-wrap .e-btn.e-success,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-btn.e-success {
    background: #16a34a !important;
    border: 1px solid #15803d !important;
    color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-wizard-modal-wrap .e-btn.e-success:hover,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-btn.e-success:hover {
    background: #15803d !important;
    border-color: #166534 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-wizard-modal-wrap .modal-footer .e-btn.e-primary {
    background: var(--mirion-link) !important;
    border-color: #005584 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-modal-wrap #accounting-invoice-report-viewer,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-modal-wrap .modal-body.p-0.d-flex.flex-column {
    background: var(--mcots-modal-bg) !important;
}

/* Invoice status help modal — same shell as other Accounting portaled modals */
.invoice-status-help-backdrop {
    position: fixed;
    inset: 0;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--mcots-modal-backdrop) !important;
}

.invoice-status-help-backdrop .invoice-status-help-modal {
    margin: 1.5rem auto;
    max-width: 32rem;
}

.invoice-status-help-backdrop .modal-content {
    background: var(--mcots-modal-bg) !important;
    color: var(--mcots-text) !important;
    border: none !important;
    border-radius: var(--mcots-radius-sm) !important;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22) !important;
}

.invoice-status-help-backdrop .modal-header {
    background: var(--mcots-modal-header-bg) !important;
    color: var(--mcots-text) !important;
    border-bottom: 1px solid var(--mcots-card-divider) !important;
}

.invoice-status-help-backdrop .modal-body {
    background: var(--mcots-modal-bg) !important;
    color: var(--mcots-text) !important;
    text-align: left !important;
}

.invoice-status-help-backdrop .modal-footer {
    background: var(--mcots-modal-header-bg) !important;
    color: var(--mcots-text) !important;
    border-top: 1px solid var(--mcots-card-divider) !important;
}

.invoice-status-help-backdrop .modal-title {
    color: var(--mcots-text) !important;
}

.invoice-status-help-backdrop .modal-body .invoice-status-help-row,
.invoice-status-help-backdrop .modal-body .invoice-status-help-row.mb-3 {
    display: grid;
    grid-template-columns: 5.75rem minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0;
    align-items: center;
    justify-items: start;
    text-align: left !important;
    margin-bottom: 0.5rem !important;
}

.invoice-status-help-backdrop .modal-body .invoice-status-help-row:last-child {
    margin-bottom: 0 !important;
}

.invoice-status-help-row .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    min-width: 5.75rem;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--mcots-font-xs, 0.6875rem);
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}

.invoice-status-help-row .small.text-muted {
    margin: 0;
    line-height: 1.4;
    text-align: left !important;
    justify-self: start;
    color: var(--mcots-text-soft) !important;
}

/* Invoice status badges — MCOTS (help modal + invoices grid) */
.mcots-layout .mcots-main .status-badge-invoice-open,
.invoice-status-help-backdrop .status-badge-invoice-open {
    background: #d97706 !important;
    color: #ffffff !important;
}

.mcots-layout .mcots-main .status-badge-invoice-paid,
.invoice-status-help-backdrop .status-badge-invoice-paid {
    background: #16a34a !important;
    color: #ffffff !important;
}

.mcots-layout .mcots-main .status-badge-invoice-draft,
.invoice-status-help-backdrop .status-badge-invoice-draft {
    background: #6b7280 !important;
    color: #ffffff !important;
}

.mcots-layout .mcots-main .status-badge-invoice-overdue,
.invoice-status-help-backdrop .status-badge-invoice-overdue {
    background: #b87a7a !important;
    color: #ffffff !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-status-help-backdrop {
    background-color: var(--mcots-modal-backdrop) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-status-help-backdrop .modal-content,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-status-help-backdrop .modal-body {
    background: var(--mcots-modal-bg) !important;
    color: var(--mcots-text) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-status-help-backdrop .modal-header,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-status-help-backdrop .modal-footer {
    background: var(--mcots-modal-header-bg) !important;
    color: var(--mcots-text) !important;
    border-color: var(--mcots-card-divider) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-status-help-backdrop .invoice-status-help-row .small.text-muted {
    color: var(--mcots-text-soft) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active .invoice-status-help-backdrop .status-badge-invoice-open,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active .mcots-layout .mcots-main .status-badge-invoice-open {
    background: #c2620a !important;
    color: #ffffff !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active .invoice-status-help-backdrop .status-badge-invoice-paid,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active .mcots-layout .mcots-main .status-badge-invoice-paid {
    background: #15803d !important;
    color: #ffffff !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active .invoice-status-help-backdrop .status-badge-invoice-draft,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active .mcots-layout .mcots-main .status-badge-invoice-draft {
    background: #4b5563 !important;
    color: #f3f4f6 !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active .invoice-status-help-backdrop .status-badge-invoice-overdue,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active .mcots-layout .mcots-main .status-badge-invoice-overdue {
    background: #9f5f5f !important;
    color: #ffffff !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-status-help-backdrop .modal-footer .e-btn.e-primary {
    background: var(--mirion-link) !important;
    border-color: #005584 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Modal scrollbars — match main content (portaled accounting modals) */
html[data-mcots-theme="true"] body > .invoice-modal-wrap .modal-body,
html[data-mcots-theme="true"] body > .volume-pricing-modal-wrap .modal-body,
html[data-mcots-theme="true"] body > .product-default-pricing-modal-wrap .modal-body,
html[data-mcots-theme="true"] body > .invoice-wizard-modal-wrap .modal-body,
html[data-mcots-theme="true"] body > .invoice-status-help-backdrop .modal-body,
html[data-mcots-theme="true"] body > [class$="-modal-wrap"] .modal-body {
    scrollbar-width: thin;
    scrollbar-color: var(--mcots-scrollbar-thumb) var(--mcots-scrollbar-track);
}

html[data-mcots-theme="true"] body > .invoice-modal-wrap .modal-body::-webkit-scrollbar,
html[data-mcots-theme="true"] body > .volume-pricing-modal-wrap .modal-body::-webkit-scrollbar,
html[data-mcots-theme="true"] body > .invoice-wizard-modal-wrap .modal-body::-webkit-scrollbar,
html[data-mcots-theme="true"] body > [class$="-modal-wrap"] .modal-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html[data-mcots-theme="true"] body > .invoice-modal-wrap .modal-body::-webkit-scrollbar-track,
html[data-mcots-theme="true"] body > .volume-pricing-modal-wrap .modal-body::-webkit-scrollbar-track,
html[data-mcots-theme="true"] body > .invoice-wizard-modal-wrap .modal-body::-webkit-scrollbar-track,
html[data-mcots-theme="true"] body > [class$="-modal-wrap"] .modal-body::-webkit-scrollbar-track {
    background: var(--mcots-scrollbar-track);
}

html[data-mcots-theme="true"] body > .invoice-modal-wrap .modal-body::-webkit-scrollbar-thumb,
html[data-mcots-theme="true"] body > .volume-pricing-modal-wrap .modal-body::-webkit-scrollbar-thumb,
html[data-mcots-theme="true"] body > .invoice-wizard-modal-wrap .modal-body::-webkit-scrollbar-thumb,
html[data-mcots-theme="true"] body > [class$="-modal-wrap"] .modal-body::-webkit-scrollbar-thumb {
    background-color: var(--mcots-scrollbar-thumb);
    border-radius: 5px;
}

html[data-mcots-theme="true"] body > .invoice-modal-wrap .modal-body::-webkit-scrollbar-thumb:hover,
html[data-mcots-theme="true"] body > .volume-pricing-modal-wrap .modal-body::-webkit-scrollbar-thumb:hover,
html[data-mcots-theme="true"] body > .invoice-wizard-modal-wrap .modal-body::-webkit-scrollbar-thumb:hover,
html[data-mcots-theme="true"] body > [class$="-modal-wrap"] .modal-body::-webkit-scrollbar-thumb:hover {
    background-color: var(--mcots-scrollbar-thumb-hover);
}

/* Syncfusion date pickers — field uses .e-date-wrapper (not .e-datepicker on the input) */
.mcots-layout .e-input-group.e-control-wrapper.e-date-wrapper,
.mcots-layout .e-datepicker.e-input-group.e-control-wrapper,
.mcots-layout .e-date-wrapper.e-control-wrapper,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-input-group.e-control-wrapper.e-date-wrapper,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-datepicker.e-input-group.e-control-wrapper,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-date-wrapper.e-control-wrapper {
    background: var(--mcots-input-bg) !important;
    border: 1px solid var(--mcots-shell-border) !important;
    color: var(--mcots-input-color) !important;
    box-shadow: none !important;
}

.mcots-layout .e-date-wrapper input.e-input ~ .e-input-group-icon,
.mcots-layout .e-input-group.e-date-wrapper input.e-input ~ .e-input-group-icon,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-date-wrapper input.e-input ~ .e-input-group-icon,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-input-group.e-date-wrapper input.e-input ~ .e-input-group-icon {
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
}

.mcots-layout .e-date-wrapper .e-input-group-icon.e-date-icon,
.mcots-layout .e-datepicker .e-input-group-icon.e-date-icon,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-date-wrapper .e-input-group-icon.e-date-icon,
body:has(.mcots-layout) [class$="-modal-wrap"] .e-datepicker .e-input-group-icon.e-date-icon {
    color: var(--mcots-text-soft) !important;
    background: transparent !important;
    border: none !important;
}

body.darkMode.mcots-shell-active .e-calendar,
body.darkMode:has(.mcots-layout) .e-calendar,
body.darkMode.mcots-shell-active .e-popup.e-calendar,
body.darkMode:has(.mcots-layout) .e-popup.e-calendar,
body.darkMode.mcots-shell-active .e-datepicker.e-popup .e-calendar,
body.darkMode:has(.mcots-layout) .e-datepicker.e-popup .e-calendar {
    background: var(--mcots-modal-bg, #141414) !important;
    background-color: var(--mcots-modal-bg, #141414) !important;
    color: var(--mcots-text) !important;
    border: 1px solid var(--mcots-shell-border) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
}

body.darkMode.mcots-shell-active .e-calendar .e-header,
body.darkMode:has(.mcots-layout) .e-calendar .e-header,
body.darkMode.mcots-shell-active .e-calendar .e-footer-container,
body.darkMode:has(.mcots-layout) .e-calendar .e-footer-container {
    background: var(--mcots-modal-header-bg, #1a1a1a) !important;
    background-color: var(--mcots-modal-header-bg, #1a1a1a) !important;
    color: var(--mcots-text) !important;
    border-color: var(--mcots-card-divider) !important;
}

body.darkMode.mcots-shell-active .e-calendar .e-title,
body.darkMode:has(.mcots-layout) .e-calendar .e-title,
body.darkMode.mcots-shell-active .e-calendar .e-day,
body.darkMode:has(.mcots-layout) .e-calendar .e-day,
body.darkMode.mcots-shell-active .e-calendar .e-week-number,
body.darkMode:has(.mcots-layout) .e-calendar .e-week-number {
    color: var(--mcots-text) !important;
}

body.darkMode.mcots-shell-active .e-calendar .e-week-header th,
body.darkMode:has(.mcots-layout) .e-calendar .e-week-header th {
    color: var(--mcots-text-soft) !important;
    border-color: var(--mcots-card-divider) !important;
}

body.darkMode.mcots-shell-active .e-calendar .e-content td,
body.darkMode:has(.mcots-layout) .e-calendar .e-content td {
    border-color: var(--mcots-card-divider) !important;
}

body.darkMode.mcots-shell-active .e-calendar .e-day:hover,
body.darkMode:has(.mcots-layout) .e-calendar .e-day:hover,
body.darkMode.mcots-shell-active .e-calendar .e-day.e-focused-date,
body.darkMode:has(.mcots-layout) .e-calendar .e-day.e-focused-date {
    background: var(--mcots-nav-hover-bg) !important;
    color: var(--mcots-text) !important;
}

body.darkMode.mcots-shell-active .e-calendar .e-day.e-selected,
body.darkMode:has(.mcots-layout) .e-calendar .e-day.e-selected,
body.darkMode.mcots-shell-active .e-calendar .e-day.e-today,
body.darkMode:has(.mcots-layout) .e-calendar .e-day.e-today {
    background: var(--mcots-nav-active-bg) !important;
    color: var(--mcots-nav-active-icon) !important;
}

body.darkMode.mcots-shell-active .e-calendar .e-btn,
body.darkMode:has(.mcots-layout) .e-calendar .e-btn {
    color: var(--mcots-link-color) !important;
}

body.darkMode.mcots-shell-active .e-calendar .e-icon-container,
body.darkMode:has(.mcots-layout) .e-calendar .e-icon-container {
    color: var(--mcots-text-soft) !important;
}

/* Portaled accounting modals — Syncfusion inputs (readable text, no white fields) */
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .form-label,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] label {
    color: var(--mcots-text-soft) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .text-muted,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .small.text-muted {
    color: var(--mcots-text-muted) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-control-wrapper,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-float-input.e-control-wrapper,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-multiselect.e-input-group.e-control-wrapper,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-control-wrapper.e-date-wrapper,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-control-wrapper.e-ddl,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-datepicker.e-input-group.e-control-wrapper,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-numerictextbox.e-input-group.e-control-wrapper,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-control-wrapper,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-control-wrapper.e-date-wrapper,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-control-wrapper.e-ddl {
    background: var(--mcots-input-bg) !important;
    border: 1px solid var(--mcots-shell-border) !important;
    color: var(--mcots-input-color) !important;
    box-shadow: none !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-control-wrapper.e-disabled,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-disabled,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-control-wrapper.e-ddl.e-disabled,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-control-wrapper input.e-input:disabled,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-control-wrapper input.e-input[readonly],
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-control-wrapper .e-input[readonly],
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-control-wrapper.e-disabled,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-control-wrapper.e-ddl.e-disabled,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-control-wrapper.e-disabled input.e-input,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-control-wrapper.e-ddl input.e-input[readonly] {
    background: var(--mcots-input-bg) !important;
    color: var(--mcots-text-soft) !important;
    -webkit-text-fill-color: var(--mcots-text-soft) !important;
    opacity: 1 !important;
    filter: none !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-control-wrapper input.e-input,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-control-wrapper .e-input,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-control-wrapper textarea.e-input,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-ddl.e-input-group.e-control-wrapper .e-input,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-control-wrapper.e-ddl input.e-input,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-control-wrapper.e-date-wrapper input.e-input,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-numerictextbox.e-input-group.e-control-wrapper input.e-input,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap input.e-input,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-control-wrapper input.e-input,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-control-wrapper .e-input,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-control-wrapper.e-ddl input.e-input,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-control-wrapper.e-date-wrapper input.e-input {
    background: transparent !important;
    color: var(--mcots-input-color) !important;
    -webkit-text-fill-color: var(--mcots-input-color) !important;
    border: none !important;
    border-right: none !important;
    box-shadow: none !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-control-wrapper input.e-input::placeholder,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-control-wrapper .e-input::placeholder {
    color: var(--mcots-text-muted) !important;
    opacity: 1;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-control-wrapper.e-input-focus,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-control-wrapper:hover,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-datepicker.e-input-group.e-control-wrapper.e-input-focus,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-ddl.e-input-group.e-control-wrapper.e-input-focus {
    border: 1px solid var(--mcots-control-hover-border) !important;
    box-shadow: none !important;
}

/* Date picker — single outer border (Syncfusion adds border-left on icon + border on input) */
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-control-wrapper.e-date-wrapper,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-control-wrapper.e-date-wrapper {
    overflow: hidden;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-date-wrapper .e-input-group-icon,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-date-wrapper .e-input-group-icon,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-date-wrapper input.e-input ~ .e-input-group-icon,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-date-wrapper input.e-input ~ .e-input-group-icon,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-date-wrapper input.e-input ~ .e-input-group-icon {
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--mcots-text-soft) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-input-group.e-control-wrapper .e-input-group-icon,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-ddl.e-input-group .e-input-group-icon,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-control-wrapper .e-input-group-icon,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-control-wrapper.e-ddl .e-ddl-icon {
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--mcots-text-soft) !important;
}

/* MCOTS does load bootstrap5-dark via app.js loadSyncfusionTheme — beat Syncfusion input colors */
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap input.e-input,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap textarea.e-input,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-control-wrapper,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-control-wrapper input,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-control-wrapper input.e-input {
    background-color: var(--mcots-input-bg) !important;
    color: var(--mcots-input-color) !important;
    -webkit-text-fill-color: var(--mcots-input-color) !important;
}

html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-control-wrapper input.e-input,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-control-wrapper.e-ddl input.e-input,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .e-input-group.e-control-wrapper.e-date-wrapper input.e-input {
    background-color: transparent !important;
}

html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .border-bottom .e-input-group.e-control-wrapper,
html[data-mcots-theme="true"] body.darkMode .invoice-wizard-modal-wrap .card-body .e-input-group.e-control-wrapper {
    background-color: var(--mcots-input-bg) !important;
}

/* Invoice wizard line table — inputs inside bootstrap table */
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-wizard-modal-wrap table .e-input-group.e-control-wrapper {
    background: var(--mcots-input-bg) !important;
    border: 1px solid var(--mcots-shell-border) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-wizard-modal-wrap table .e-input-group.e-control-wrapper input.e-input,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-wizard-modal-wrap table .e-input-group.e-control-wrapper .e-input {
    color: var(--mcots-input-color) !important;
    -webkit-text-fill-color: var(--mcots-input-color) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-wizard-modal-wrap table th,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-wizard-modal-wrap table td {
    color: var(--mcots-text) !important;
    border-color: var(--mcots-card-divider) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > .invoice-wizard-modal-wrap table thead th {
    background: var(--mcots-grid-header-bg) !important;
    color: var(--mcots-grid-header-color) !important;
}

/* Portaled modals — Syncfusion grids (volume pricing, etc.) */
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid .e-gridcontent,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid .e-content,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid .e-table {
    background: var(--mcots-grid-row-bg) !important;
    color: var(--mcots-grid-row-color) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid .e-gridheader,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid .e-headercontent,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid .e-headercell,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid span.e-headertext {
    background: var(--mcots-grid-header-bg) !important;
    color: var(--mcots-grid-header-color) !important;
    border-color: var(--mcots-grid-border) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid .e-rowcell,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid .e-groupcaption,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid .e-indentcell {
    background: var(--mcots-grid-row-bg) !important;
    color: var(--mcots-grid-row-color) !important;
    border-color: var(--mcots-grid-border) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid .e-emptyrow,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid .e-emptyrow > td {
    background: var(--mcots-grid-row-bg) !important;
    color: var(--mcots-text-soft) !important;
    border-color: var(--mcots-grid-border) !important;
    text-align: center;
    font-style: italic;
    font-size: var(--mcots-font-sm, 0.75rem);
    padding: 1.25rem 0.5rem !important;
    letter-spacing: 0.02em;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid .e-altrow .e-rowcell {
    background: var(--mcots-grid-row-alt-bg) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid.e-gridhover .e-row:hover .e-rowcell:not(.e-selectionbackground),
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid .e-row:hover .e-rowcell:not(.e-selectionbackground) {
    background: var(--mcots-grid-row-hover-bg) !important;
    color: var(--mcots-grid-row-color) !important;
}

/* Modal grid — selected row/cell: match in-page selection (portaled SfDialog is outside .mcots-main) */
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active [class*="-modal-wrap"] .e-grid .e-row.e-active,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active [class*="-modal-wrap"] .e-grid .e-row.e-active .e-rowcell,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active [class*="-modal-wrap"] .e-grid .e-altrow.e-active .e-rowcell,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active [class*="-modal-wrap"] .e-grid .e-rowcell.e-active,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active [class*="-modal-wrap"] .e-grid .e-rowcell.e-selectionbackground,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active [class*="-modal-wrap"] .e-grid .e-rowcell.e-cellselectionbackground {
    background: var(--mcots-row-selected-bg) !important;
    color: var(--mcots-grid-row-color) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .volume-badge-customer {
    background: rgba(61, 156, 201, 0.22) !important;
    color: #b8e4ff !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .volume-badge-default {
    background: var(--mcots-surface-soft) !important;
    color: var(--mcots-text-soft) !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .volume-badge-override {
    background: rgba(225, 107, 42, 0.2) !important;
    color: #f4c9a8 !important;
}

html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid .e-icons,
html[data-mcots-theme="true"] body.darkMode.mcots-shell-active > [class$="-modal-wrap"] .e-grid .e-btn.e-flat .e-icons {
    color: var(--mcots-text-soft) !important;
}

.mcots-layout .offcanvas,
body:has(.mcots-layout) .offcanvas,
#offcanvasControlPanel.offcanvas,
#addForm.offcanvas {
    background: var(--mcots-modal-bg) !important;
    color: var(--mcots-text) !important;
}

/* Left border for start panels, right border for end panels */
.mcots-layout .offcanvas-start,
body:has(.mcots-layout) .offcanvas-start,
#addForm.offcanvas.offcanvas-start {
    border-right: 1px solid var(--mcots-shell-border) !important;
}

.mcots-layout .offcanvas-end,
body:has(.mcots-layout) .offcanvas-end,
#addForm.offcanvas.offcanvas-end {
    border-left: 1px solid var(--mcots-shell-border) !important;
}

body > #offcanvasControlPanel.offcanvas {
    z-index: 1060 !important;
}

body > .offcanvas-backdrop {
    z-index: 1055 !important;
}

/* Open Iconic glyphs on admin/edit controls */
.mcots-admin-panel-root .btn-pencil .oi,
.mcots-admin-panel-root .btn-control-panel .oi {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    line-height: 1;
    font-size: 1rem;
}

.mcots-layout .offcanvas-header,
body:has(.mcots-layout) .offcanvas-header {
    background: var(--mcots-modal-header-bg) !important;
    color: var(--mcots-text) !important;
    border-bottom: 1px solid var(--mcots-card-divider) !important;
}

.mcots-layout .offcanvas-header .offcanvas-title,
body:has(.mcots-layout) .offcanvas-header .offcanvas-title,
body:has(.mcots-layout) .offcanvas .offcanvas-title {
    color: var(--mcots-text) !important;
}

.mcots-layout .offcanvas-body,
body:has(.mcots-layout) .offcanvas-body {
    background: var(--mcots-modal-bg) !important;
    color: var(--mcots-text) !important;
}

.mcots-layout .e-dialog.e-popup,
body:has(.mcots-layout) .e-dialog.e-popup {
    background: var(--mcots-modal-bg) !important;
    color: var(--mcots-text) !important;
    border: none !important;
    border-radius: var(--mcots-modal-radius) !important;
    overflow: hidden !important;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.28) !important;
}

.mcots-layout .e-dialog .e-dlg-header-content,
body:has(.mcots-layout) .e-dialog .e-dlg-header-content {
    background: var(--mcots-modal-header-bg) !important;
    color: var(--mcots-text) !important;
    border-bottom: 1px solid var(--mcots-card-divider) !important;
}

.mcots-layout .e-dialog .e-dlg-header,
body:has(.mcots-layout) .e-dialog .e-dlg-header {
    color: var(--mcots-text) !important;
}

.mcots-layout .e-dialog .e-dlg-content,
body:has(.mcots-layout) .e-dialog .e-dlg-content {
    background: var(--mcots-modal-bg) !important;
    color: var(--mcots-text) !important;
}

.mcots-layout .e-dialog .e-footer-content,
body:has(.mcots-layout) .e-dialog .e-footer-content {
    background: var(--mcots-modal-header-bg) !important;
    color: var(--mcots-text) !important;
    border-top: 1px solid var(--mcots-card-divider) !important;
}

.mcots-layout .e-dialog .e-btn.e-dlg-closeicon-btn,
body:has(.mcots-layout) .e-dialog .e-btn.e-dlg-closeicon-btn {
    color: var(--mcots-text) !important;
}

.btn-primary,
.e-btn.e-primary {
    background: var(--mirion-link) !important;
    border-color: #005584 !important;
    color: #ffffff !important;
}

.btn-secondary {
    background: var(--mcots-btn-secondary-bg) !important;
    border-color: var(--mcots-btn-secondary-border) !important;
    color: var(--mcots-btn-secondary-color) !important;
}

.mcots-layout .btn-outline-secondary,
.mcots-topbar .btn-outline-secondary,
.mcots-admin-panel-root .btn-outline-secondary {
    --bs-btn-color: var(--mcots-control-color);
    --bs-btn-border-color: var(--mcots-control-border);
    --bs-btn-hover-color: var(--mcots-control-hover-color);
    --bs-btn-hover-bg: var(--mcots-control-hover-bg);
    --bs-btn-hover-border-color: var(--mcots-control-hover-border);
    --bs-btn-active-color: var(--mcots-control-hover-color);
    --bs-btn-active-bg: var(--mcots-control-hover-bg);
    --bs-btn-active-border-color: var(--mcots-control-hover-border);
    --bs-btn-focus-shadow-rgb: 0, 97, 153;
    color: var(--mcots-control-color) !important;
    border-color: var(--mcots-control-border) !important;
    background: var(--mcots-control-bg) !important;
    box-shadow: none !important;
}

.mcots-layout .btn-outline-secondary:hover,
.mcots-layout .btn-outline-secondary:focus,
.mcots-layout .btn-outline-secondary:active,
.mcots-layout .btn-outline-secondary.active,
.mcots-topbar .btn-outline-secondary:hover,
.mcots-topbar .btn-outline-secondary:focus,
.mcots-topbar .btn-outline-secondary:active,
.mcots-topbar .btn-outline-secondary.active,
.mcots-admin-panel-root .btn-outline-secondary:hover,
.mcots-admin-panel-root .btn-outline-secondary:focus,
.mcots-admin-panel-root .btn-outline-secondary:active,
.mcots-admin-panel-root .btn-outline-secondary.active {
    background: var(--mcots-control-hover-bg) !important;
    border-color: var(--mcots-control-hover-border) !important;
    color: var(--mcots-control-hover-color) !important;
    box-shadow: none !important;
}

/* Links in main content only — sidebar/topbar use shell text colors, not link blue */
.mcots-layout .mcots-main a:not(.e-tab-wrap):not(.e-btn):not(.dropdown-item):not(.card-link),
.mcots-layout .mcots-main .nav-link {
    color: var(--mcots-link-color);
}

.mcots-layout .mcots-main a:not(.e-tab-wrap):not(.e-btn):not(.dropdown-item):not(.card-link):hover,
.mcots-layout .mcots-main .nav-link:hover {
    color: var(--mcots-link-hover-color);
}

/* Sidebar navigation — never link blue */
.mcots-sidebar a,
.mcots-sidebar-menu a,
.mcots-sidebar .app-menu .nav-item a,
.mcots-sidebar-menu .metismenu li a,
.mcots-sidebar-menu .metismenu > li.sidebar-top-link > div.d-flex > a {
    color: var(--mcots-text) !important;
    text-decoration: none !important;
}

.mcots-sidebar-menu .app-menu ul ul li a,
.mcots-sidebar-menu .metismenu ul li a {
    color: var(--mcots-text-dim) !important;
}

.mcots-sidebar .app-menu .nav-item a:hover,
.mcots-sidebar-menu .metismenu li a:hover,
.mcots-sidebar-menu .metismenu ul.subItem > li > a:hover {
    color: var(--mcots-text) !important;
}

.mcots-sidebar .app-menu .nav-item a.active,
.mcots-sidebar-menu .metismenu ul.subItem > li.active > a,
.mcots-sidebar-menu .metismenu ul.subItem > li.open > a,
.mcots-sidebar-menu .metismenu ul.subItem > li.show > a {
    color: var(--mcots-text) !important;
}

div.app-moduleactions a.dropdown-toggle,
div.app-moduleactions div.dropdown-menu {
    color: #08253f;
}

/* Avoid duplicate auth/admin actions from responsive markup on desktop */
.sign-in-button-resp,
.login-demo-button-resp,
.login-entra-button-resp,
.logout-button-resp,
.btn-pencil-resp,
.btn-control-panel-resp {
    display: none !important;
}

/* Control panel action group: icon buttons only on desktop */
.mcots-admin-panel-root:has(.btn-pencil),
.mcots-admin-panel-root:has(.btn-control-panel),
.mcots-topbar .mcots-action-item:has(.btn-pencil),
.mcots-topbar .mcots-action-item:has(.btn-control-panel) {
    display: inline-flex;
    align-items: center;
    gap: var(--mcots-app-login-gap);
}

/* Topbar auth: minimal outline controls, shared rhythm */
.mcots-topbar .app-login .sign-in-button,
.mcots-topbar .app-login .login-demo-button,
.mcots-topbar .app-login .login-entra-button {
    width: auto !important;
    min-width: auto !important;
    max-width: 18rem;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem;
    font-size: var(--mcots-topbar-btn-font-size) !important;
    font-weight: var(--mcots-topbar-btn-font-weight) !important;
    line-height: 1 !important;
    padding: 0 0.95rem !important;
    border-radius: 5px !important;
    letter-spacing: 0.02em;
    box-shadow: none !important;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    -webkit-font-smoothing: antialiased;
}

/* Topbar auth buttons */
.mcots-topbar .app-login .sign-in-button {
    background: var(--mcots-control-bg) !important;
    color: var(--mcots-sign-in-color) !important;
    border: 1px solid var(--mcots-sign-in-border) !important;
}

.mcots-topbar .app-login .sign-in-button:hover:not(:disabled) {
    background: var(--mcots-sign-in-hover-bg) !important;
    border-color: var(--mcots-control-hover-border) !important;
    color: var(--mcots-control-hover-color) !important;
}

.mcots-topbar .app-login .sign-in-button:focus-visible {
    outline: 2px solid var(--mcots-accent);
    outline-offset: 2px;
}

/* External IdP */
.mcots-topbar .app-login .login-entra-button {
    background: var(--mcots-control-bg) !important;
    color: var(--mcots-control-color) !important;
    border: 1px solid var(--mcots-control-border) !important;
}

.mcots-topbar .app-login .login-entra-button:hover:not(:disabled) {
    background: var(--mcots-control-hover-bg) !important;
    border-color: var(--mcots-control-hover-border) !important;
    color: var(--mcots-control-hover-color) !important;
}

.mcots-topbar .app-login .login-entra-button:focus-visible {
    outline: 2px solid var(--mcots-accent);
    outline-offset: 2px;
}

.mcots-topbar .app-login .login-entra-button img {
    height: 17px !important;
    width: auto !important;
    margin-right: 0 !important;
    vertical-align: middle !important;
    opacity: 0.95;
}

/* Demo */
.mcots-topbar .app-login .login-demo-button {
    background: var(--mcots-control-bg) !important;
    color: var(--mcots-control-color) !important;
    border: 1px solid var(--mcots-control-border) !important;
}

.mcots-topbar .app-login .login-demo-button:hover:not(:disabled) {
    background: var(--mcots-control-hover-bg) !important;
    border-color: var(--mcots-control-hover-border) !important;
    color: var(--mcots-control-hover-color) !important;
}

/* Topbar square icon controls */
.mcots-topbar .mcots-topbar-icon-btn,
.mcots-topbar .mcots-notifications-btn,
.mcots-topbar .mcots-theme-toggle,
.mcots-admin-panel-root .btn-pencil.btn,
.mcots-admin-panel-root .btn-control-panel.btn,
.mcots-topbar .mcots-action-item .btn-pencil.btn,
.mcots-topbar .mcots-action-item .btn-control-panel.btn,
.mcots-topbar .app-login .logout-button {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: var(--mcots-topbar-btn-radius) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    background: var(--mcots-control-bg) !important;
    color: var(--mcots-control-color) !important;
    border: 1px solid var(--mcots-control-border) !important;
    box-shadow: none !important;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.mcots-admin-panel-root .btn-pencil.btn span,
.mcots-admin-panel-root .btn-control-panel.btn span,
.mcots-topbar .mcots-action-item .btn-pencil.btn span,
.mcots-topbar .mcots-action-item .btn-control-panel.btn span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mcots-topbar .mcots-topbar-icon-btn:hover:not(:disabled),
.mcots-topbar .mcots-notifications-btn:hover:not(:disabled),
.mcots-topbar .mcots-theme-toggle:hover:not(:disabled),
.mcots-admin-panel-root .btn-pencil.btn:hover:not(:disabled),
.mcots-admin-panel-root .btn-control-panel.btn:hover:not(:disabled),
.mcots-topbar .mcots-action-item .btn-pencil.btn:hover:not(:disabled),
.mcots-topbar .mcots-action-item .btn-control-panel.btn:hover:not(:disabled),
.mcots-topbar .app-login .logout-button:hover:not(:disabled) {
    background: var(--mcots-control-hover-bg) !important;
    border-color: var(--mcots-control-hover-border) !important;
    color: var(--mcots-control-hover-color) !important;
}

.mcots-admin-panel-root .btn-pencil.btn.active,
.mcots-topbar .mcots-action-item .btn-pencil.btn.active {
    background: var(--mcots-pencil-active-bg) !important;
    border-color: var(--mcots-pencil-active-border) !important;
    color: var(--mcots-control-hover-color) !important;
}

.mcots-topbar .mcots-topbar-icon-btn i,
.mcots-topbar .app-login .logout-button i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Notifications bell */
.mcots-topbar .mcots-notifications-btn {
    position: relative;
    overflow: visible;
}

.mcots-topbar .mcots-notifications-btn:focus-visible,
.mcots-topbar .mcots-theme-toggle:focus-visible {
    outline: 2px solid var(--mcots-accent);
    outline-offset: 2px;
}

.mcots-topbar .mcots-notifications-btn i,
.mcots-topbar .mcots-theme-toggle i {
    font-size: 0.95rem;
    line-height: 1;
}

.mcots-topbar .mcots-notifications-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    pointer-events: none;
    box-sizing: border-box;
}

.mcots-topbar .mcots-notifications-badge.has-count {
    background: var(--mirion-orange);
    color: #ffffff;
}

.mcots-topbar .mcots-notifications-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    pointer-events: none;
    color: var(--mcots-text-muted) !important;
    border-color: var(--mcots-border) !important;
    background: var(--mcots-control-bg) !important;
}

.mcots-topbar .mcots-notifications-btn:disabled i {
    opacity: 0.85;
}

/* Logged-in account dropdown */
.mcots-user-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: transparent;
}

.mcots-topbar .mcots-action-item .mcots-user-menu {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
}

.mcots-topbar .mcots-action-item .mcots-user-menu.is-open {
    z-index: 1051;
}

.mcots-topbar:has(.mcots-user-menu.is-open) {
    overflow: visible;
    z-index: 1051;
}

.mcots-topbar .mcots-user-menu__trigger {
    height: 34px;
    min-height: 34px;
    padding: 0 0.75rem !important;
    border-radius: var(--mcots-topbar-btn-radius) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--mcots-topbar-btn-font-size) !important;
    font-weight: var(--mcots-topbar-btn-font-weight) !important;
    line-height: 1 !important;
    background: var(--mcots-control-bg) !important;
    color: var(--mcots-control-color) !important;
    border: 1px solid var(--mcots-control-border) !important;
    box-shadow: none !important;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.mcots-topbar .mcots-user-menu__trigger-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    height: 100%;
    line-height: 1;
}

.mcots-topbar .mcots-user-menu__icon {
    flex-shrink: 0;
    margin-right: 0.1rem;
}

.mcots-topbar .mcots-user-menu__trigger:hover:not(:disabled),
.mcots-topbar .mcots-user-menu__trigger:focus-visible,
.mcots-topbar .mcots-user-menu__trigger.is-open {
    background: var(--mcots-control-hover-bg) !important;
    border-color: var(--mcots-control-hover-border) !important;
    color: var(--mcots-control-hover-color) !important;
}

.mcots-topbar .mcots-user-menu__trigger:focus-visible {
    outline: 2px solid var(--mcots-accent);
    outline-offset: 2px;
}

.mcots-topbar .mcots-user-menu__trigger-inner .mcots-user-menu__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.95;
}

.mcots-topbar .mcots-user-menu__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    line-height: 1;
    opacity: 0.85;
    transition: transform 0.15s ease;
}

.mcots-topbar .mcots-user-menu.is-open .mcots-user-menu__chevron {
    transform: rotate(180deg);
}

.mcots-topbar .mcots-user-menu__name {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcots-topbar .mcots-user-menu__panel {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    min-width: 280px;
    margin-top: 0.35rem;
    padding: 0;
    border: 1px solid var(--mcots-shell-border);
    border-radius: var(--mcots-radius-sm);
    box-shadow: 0 8px 24px rgba(12, 31, 51, 0.12);
    background: var(--mcots-surface);
    color: var(--mcots-text);
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

body.darkMode .mcots-topbar .mcots-user-menu__panel {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.mcots-topbar .mcots-user-menu.is-open .mcots-user-menu__panel,
.mcots-topbar .mcots-user-menu__panel.is-open {
    display: block;
    pointer-events: auto;
}

/* No Bootstrap dropdown-menu link hover (blue) on account panel */
.mcots-topbar .mcots-user-menu__panel,
.mcots-topbar .mcots-user-menu__panel .mcots-user-menu__action {
    --bs-dropdown-link-active-bg: transparent;
    --bs-dropdown-link-active-color: var(--mcots-text);
    --bs-dropdown-link-hover-bg: var(--mcots-nav-hover-bg);
    --bs-dropdown-link-hover-color: var(--mcots-text);
}

.mcots-topbar .mcots-user-menu__header {
    padding: 0.9rem 1rem 0.85rem;
    background: var(--mcots-surface-soft);
    border-bottom: 1px solid var(--mcots-shell-border);
}

.mcots-topbar .mcots-user-menu__profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.mcots-topbar .mcots-user-menu__avatar {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mcots-topbar);
    color: var(--mcots-text);
    border: 1px solid var(--mcots-topbar-border);
    font-size: 0.95rem;
}

.mcots-topbar .mcots-user-menu__identity {
    min-width: 0;
    flex: 1 1 auto;
}

.mcots-topbar .mcots-user-menu__display-name {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--mcots-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcots-topbar .mcots-user-menu__email {
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--mcots-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcots-topbar .mcots-user-menu__actions {
    padding: 0.35rem;
}

.mcots-topbar .mcots-user-menu__action {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.75rem;
    border: none;
    border-radius: var(--mcots-radius-sm);
    background: transparent;
    color: var(--mcots-text);
    text-align: left;
    cursor: pointer
}

.mcots-topbar .mcots-user-menu__action:hover,
.mcots-topbar .mcots-user-menu__action:focus,
.mcots-topbar .mcots-user-menu__action:focus-visible {
    background: var(--mcots-nav-hover-bg) !important;
    color: var(--mcots-text) !important;
    outline: none;
    box-shadow: none;
}

.mcots-topbar .mcots-user-menu__action-icon {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mcots-radius-sm);
    background: var(--mcots-surface-soft);
    color: var(--mcots-text-soft);
    font-size: 0.85rem;
}

.mcots-topbar .mcots-user-menu__action:hover .mcots-user-menu__action-icon,
.mcots-topbar .mcots-user-menu__action:focus .mcots-user-menu__action-icon {
    background: var(--mcots-surface);
    color: var(--mcots-text);
}

.mcots-topbar .mcots-user-menu__action-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.mcots-topbar .mcots-user-menu__action-title {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    color: inherit;
}

.mcots-topbar .mcots-user-menu__action-subtitle {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--mcots-text-soft);
}

.mcots-topbar .mcots-user-menu__footer {
    padding: 0.35rem;
    border-top: 1px solid var(--mcots-shell-border);
    background: var(--mcots-surface-soft);
}

.mcots-topbar .mcots-user-menu__action--signout .mcots-user-menu__action-title {
    font-weight: 500;
}

.mcots-topbar .mcots-user-menu__action--signout:hover,
.mcots-topbar .mcots-user-menu__action--signout:focus-visible {
    background: var(--mcots-nav-hover-bg) !important;
    color: var(--mcots-text) !important;
}

/* Sign out lives in the account menu when McotsUserMenu is shown */
.mcots-topbar .mcots-action-item--auth .app-login .logout-button,
.mcots-topbar .mcots-action-item--auth .app-login .logout-button-resp {
    display: none !important;
}

.mcots-topbar .mcots-user-menu__register {
    font-size: var(--mcots-topbar-btn-font-size);
    font-weight: var(--mcots-topbar-btn-font-weight);
    padding: 0.38rem 0.95rem;
    border-radius: var(--mcots-topbar-btn-radius);
}

.mcots-topbar .mcots-action-item .mcots-user-menu + span.app-login,
.mcots-topbar .mcots-action-item .mcots-user-menu + .app-login {
    margin-left: 0;
}

.mcots-topbar .mcots-action-item--auth,
.mcots-topbar .mcots-action-item:has(.mcots-user-menu) {
    display: inline-flex;
    align-items: center;
    gap: var(--mcots-app-login-gap);
    flex-wrap: nowrap;
}

.mcots-topbar .mcots-action-item:has(.mcots-user-menu) span.app-login {
    display: inline-flex;
    gap: var(--mcots-app-login-gap);
    align-items: center;
}

@media (max-width: 1100px) {
    .mcots-brand-sub {
        display: none;
    }

    .mcots-brand-name {
        font-size: 0.76rem;
    }
}

/*
 * Desktop: neutralize leftover inline top/left from narrow-mode JS placement.
 * Without this, a menu opened at ≤1200px (e.g. Dosimetry) keeps top:92px and
 * opens away from the bar after returning to desktop hover.
 */
@media (min-width: 1201px) {
    .mcots-topmenubar__list > .mcots-topmenubar__item > .mcots-topmenubar__dropdown {
        top: 100% !important;
        left: -1px !important;
        right: -1px !important;
        position: absolute !important;
        width: auto !important;
        min-width: calc(100% + 2px) !important;
        max-width: none !important;
    }
}

/*
 * max-width 1200px: vertical accordion panel (no horizontal scroll).
 * Horizontal overflow-x:auto looked like a Windows scrollbar strip under the
 * topbar and fought dropdowns. Toggle (+) already opens the bar — stack items
 * full-width and expand children inline.
 */
@media (max-width: 1200px) {
    .mcots-main .mcots-topmenubar {
        overflow: visible;
        max-height: min(70vh, 32rem);
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .mcots-topmenubar__scroll {
        width: 100%;
        overflow: visible;
    }

    .mcots-topmenubar__list {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        width: 100%;
        min-width: 0;
    }

    .mcots-topmenubar__list > .mcots-topmenubar__item + .mcots-topmenubar__item {
        border-left: none;
        border-top: 1px solid var(--mcots-topbar-border);
    }

    .mcots-topmenubar__item {
        flex: 0 0 auto;
        min-width: 0;
        width: 100%;
        max-width: none;
    }

    .mcots-topmenubar__trigger {
        justify-content: flex-start;
        text-align: left;
        white-space: normal;
        min-height: 2.6rem;
        padding: 0.65rem 1rem;
        width: 100%;
    }

    .mcots-topmenubar__list > .mcots-topmenubar__item > .mcots-topmenubar__trigger .mcots-topmenubar__indicator {
        margin-left: auto;
    }

    .mcots-topmenubar__list > .mcots-topmenubar__item.has-children.is-open > .mcots-topmenubar__trigger .mcots-topmenubar__indicator--down {
        transform: rotate(225deg);
        margin-top: 0.15rem;
    }

    /* No hover flyouts — click accordion only */
    .mcots-topmenubar__list > .mcots-topmenubar__item.has-children:hover > .mcots-topmenubar__dropdown,
    .mcots-topmenubar__list > .mcots-topmenubar__item.has-children:focus-within > .mcots-topmenubar__dropdown {
        display: none;
    }

    .mcots-topmenubar__list > .mcots-topmenubar__item.has-children.is-open > .mcots-topmenubar__dropdown {
        display: block !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        border: none !important;
        border-top: 1px solid var(--mcots-topbar-border) !important;
        box-shadow: none !important;
        background: var(--mcots-surface-soft, #f3f5f7) !important;
        z-index: auto !important;
    }

    body.darkMode .mcots-topmenubar__list > .mcots-topmenubar__item.has-children.is-open > .mcots-topmenubar__dropdown {
        background: rgba(255, 255, 255, 0.04) !important;
    }

    .mcots-topmenubar__dropdown .mcots-topmenubar__trigger {
        justify-content: flex-start;
        text-align: left;
        padding: 0.55rem 1rem 0.55rem 1.35rem;
        min-height: 2.35rem;
        font-weight: 400;
    }

    /* Nested children also expand inline (no side flyout on small screens) */
    .mcots-topmenubar__dropdown .mcots-topmenubar__item.has-children:hover > .mcots-topmenubar__dropdown--nested,
    .mcots-topmenubar__dropdown .mcots-topmenubar__item.has-children:focus-within > .mcots-topmenubar__dropdown--nested {
        display: none;
    }

    .mcots-topmenubar__dropdown .mcots-topmenubar__item.has-children.is-open > .mcots-topmenubar__dropdown--nested {
        display: block !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .mcots-topmenubar__dropdown--nested .mcots-topmenubar__trigger {
        padding-left: 2rem;
    }

    .mcots-topmenubar__dropdown .mcots-topmenubar__item.has-children > .mcots-topmenubar__trigger .mcots-topmenubar__indicator--right {
        transform: rotate(45deg);
        margin-left: auto;
    }

    .mcots-topmenubar__dropdown .mcots-topmenubar__item.has-children.is-open > .mcots-topmenubar__trigger .mcots-topmenubar__indicator--right {
        transform: rotate(225deg);
        margin-top: 0.15rem;
    }
}

.mcots-topmenubar__scroll {
    display: block;
    width: 100%;
}

@media (max-width: 1364px) {
    /*
     * BlazorTheme parity (see Oqtane.Themes.BlazorTheme/Theme.css ≤1364):
     * - NO .sbar_collapsed → sidebar OFF-CANVAS (closed)
     * - WITH .sbar_collapsed → sidebar ON-SCREEN overlay (open)
     * Class meaning inverts vs desktop. Pure CSS — no resize JS.
     */
    .mcots-sidebar {
        position: fixed !important;
        top: var(--mcots-topbar-height);
        left: 0;
        width: min(320px, 92vw);
        height: calc(100vh - var(--mcots-topbar-height));
        z-index: 1100;
        transform: translateX(-105%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.25s ease, visibility 0.25s ease;
        overflow: hidden;
    }

    .sbar_collapsed .mcots-sidebar {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        overflow: hidden;
    }

    .mcots-main,
    .sbar_collapsed .mcots-main {
        margin-left: 0;
    }

    .mcots-topbar {
        position: sticky;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.35rem;
        padding: 0.3rem 0.55rem;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
    }

    .mcots-topbar:has(.mcots-user-menu.is-open) {
        overflow: visible;
        z-index: 1100;
    }

    .mcots-user-menu-overlay {
        z-index: 0;
    }

    .mcots-topbar .mcots-user-menu__panel {
        position: fixed;
        top: calc(var(--mcots-topbar-height) + 0.25rem);
        right: max(0.55rem, env(safe-area-inset-right, 0px));
        left: auto;
        margin-top: 0;
        min-width: min(280px, calc(100vw - 1.1rem));
        max-width: calc(100vw - 1.1rem);
        z-index: 1;
    }

    .mcots-topbar-left {
        flex: 0 0 auto;
        min-width: 0;
        justify-content: flex-start;
    }

    .mcots-topbar-right {
        flex: 0 0 auto;
        min-width: max-content;
        margin-left: auto;
        justify-content: flex-end;
        overflow: visible;
    }

    .mcots-action-list {
        width: max-content;
        gap: 0.35rem;
        overflow: visible;
        justify-content: flex-end;
        padding-bottom: 0;
    }

    .mcots-action-item {
        flex: 0 0 auto;
        overflow: visible;
    }

    /* ≤1200 accordion owns layout — don't force horizontal item widths here */
    .mcots-main .mcots-topmenubar.is-open {
        /* keep thin vertical scroll if the accordion is tall; never horizontal */
        overflow-x: hidden;
        overflow-y: auto;
    }

    .mcots-topmenubar__item {
        min-width: 0;
    }

    .mcots-topmenubar__trigger {
        font-size: 0.8125rem;
    }

    .mcots-topbar .mcots-action-item span.app-login {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        width: auto;
        gap: var(--mcots-app-login-gap);
    }

    .mcots-topbar .mcots-action-item--auth,
    .mcots-topbar .mcots-action-item:has(.mcots-user-menu) {
        flex-direction: row;
        flex-wrap: nowrap;
        width: auto;
    }

    .mcots-topbar .mcots-user-menu__trigger {
        width: auto;
        justify-content: center !important;
    }

    .mcots-topbar .mcots-user-menu__name {
        max-width: 6.5rem;
    }
}

@media (max-width: 992px) {
    .mcots-layout {
        flex-direction: column;
        min-height: auto;
    }
}

/* RESP-001: hide host pencil + cog on small screens (keep theme / + / bell / account) */
@media (max-width: 640px) {
    .mcots-admin-panel-root,
    .mcots-topbar .mcots-action-item:has(.btn-pencil),
    .mcots-topbar .mcots-action-item:has(.btn-control-panel),
    .mcots-topbar .btn-pencil,
    .mcots-topbar .btn-control-panel {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .mcots-brand-text {
        display: none;
    }

    .mcots-env-badge {
        display: none;
    }

    .mcots-topbar .mcots-user-menu__name,
    .mcots-topbar .mcots-user-menu__chevron {
        display: none;
    }

    .mcots-topbar .mcots-user-menu__trigger {
        width: 34px;
        min-width: 34px;
        padding: 0 !important;
    }

    .mcots-topbar .mcots-user-menu__trigger-inner {
        gap: 0;
    }

    .mcots-topbar .app-login .sign-in-button,
    .mcots-topbar .app-login .login-demo-button,
    .mcots-topbar .app-login .login-entra-button {
        height: 34px !important;
        padding: 0 0.65rem !important;
        line-height: 1 !important;
        font-size: 0.8125rem !important;
    }

    .mcots-topmenubar__item {
        min-width: 0;
    }

    .mcots-topmenubar__trigger {
        font-size: 0.8125rem;
        padding: 0.65rem 1rem;
    }
}

/* ── Wiki tag pills (Bootstrap .badge.rounded-pill) ─────────────────────────── */

/* Light mode — beat Bootstrap .bg-primary with !important on both bg + color */
.mcots-layout .mcots-main .badge.rounded-pill.bg-primary,
body:has(.mcots-layout) .badge.rounded-pill.bg-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.25rem 0.6rem !important;
    line-height: 1.4 !important;
    height: auto !important;
    background-color: var(--mcots-mirion-orange) !important;
    color: #ffffff !important;
    border: 1px solid var(--mcots-mirion-orange) !important;
    box-shadow: none !important;
    text-decoration: none;
}

.mcots-layout .mcots-main .badge.rounded-pill.bg-primary:hover,
body:has(.mcots-layout) .badge.rounded-pill.bg-primary:hover {
    background-color: color-mix(in srgb, var(--mcots-mirion-orange) 82%, #000000 18%) !important;
    color: #ffffff !important;
    border-color: color-mix(in srgb, var(--mcots-mirion-orange) 82%, #000000 18%) !important;
    text-decoration: none;
}

/* Dark mode — solid orange fill reads well against dark surface */
body.darkMode .mcots-layout .mcots-main .badge.rounded-pill.bg-primary,
body.darkMode:has(.mcots-layout) .badge.rounded-pill.bg-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.25rem 0.6rem !important;
    line-height: 1.4 !important;
    height: auto !important;
    background-color: var(--mcots-mirion-orange) !important;
    color: #ffffff !important;
    border: 1px solid var(--mcots-mirion-orange) !important;
    box-shadow: none !important;
}

body.darkMode .mcots-layout .mcots-main .badge.rounded-pill.bg-primary:hover,
body.darkMode:has(.mcots-layout) .badge.rounded-pill.bg-primary:hover {
    background-color: color-mix(in srgb, var(--mcots-mirion-orange) 82%, #000000 18%) !important;
    color: #ffffff !important;
    border-color: color-mix(in srgb, var(--mcots-mirion-orange) 82%, #000000 18%) !important;
    text-decoration: none;
}

/* MCOTS module title — reset-selection icon button (to the right of the title text) */
.mcots-title + .mcots-title-reset,
.mcots-reset-btn {
    line-height: 1;
    text-decoration: none;
    opacity: 0.6;
    color: var(--mcots-text-soft);
    transition: opacity 0.2s ease;
    vertical-align: middle;
    margin-left: 0.35rem;
}
.mcots-title + .mcots-title-reset:hover,
.mcots-reset-btn:hover { opacity: 1; color: var(--mcots-text-soft); }
.mcots-reset-btn .oi { transition: transform 0.6s ease-in-out; display: inline-block; font-size: 0.85em; }
.mcots-reset-btn:hover .oi { transform: rotate(360deg); }

/* ═══════════════════════════════════════════════════════════════
   Liquid-glass dark chrome (folded from approved live preview)
   Sidebar stays position: fixed. Keep FA chevrons. Do not glass-skin
   Syncfusion inputs / .shadow.rounded / toggles (causes weird bg).
   ═══════════════════════════════════════════════════════════════ */

body.darkMode .mcots-layout,
body.darkMode .mcots-main,
body.darkMode .mcots-main-scroll,
body.darkMode .mcots-content {
    background: transparent !important;
    background-color: transparent !important;
}

body.darkMode .mcots-topbar,
body.darkMode header.mcots-topbar,
body.darkMode .mcots-sidebar {
    background: rgba(10, 10, 10, 0.88) !important;
    background-color: rgba(10, 10, 10, 0.88) !important;
    backdrop-filter: blur(20px) saturate(1.15);
    -webkit-backdrop-filter: blur(20px) saturate(1.15);
    border-color: rgba(255, 255, 255, 0.12) !important;
}

body.darkMode .mcots-topbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.darkMode .mcots-sidebar {
    position: fixed !important;
    top: var(--mcots-topbar-height) !important;
    left: 0 !important;
}

/* Topbar icon buttons (NOT theme-toggle — leave that at base 34px rules) */
body.darkMode .mcots-topbar .mcots-topbar-icon-btn,
body.darkMode .mcots-topbar .mcots-notifications-btn,
body.darkMode .mcots-topbar .mcots-action-item .btn-pencil.btn,
body.darkMode .mcots-topbar .mcots-action-item .btn-control-panel.btn,
body.darkMode .mcots-topbar .app-login .logout-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* Sidebar labels — muted 14px / 400 */
body.darkMode .mcots-sidebar-menu .metismenu li a,
body.darkMode .mcots-sidebar-menu .app-menu .nav-item a,
body.darkMode .mcots-sidebar-menu a {
    font-size: var(--mcots-font-base, 0.875rem) !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.58) !important;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}

body.darkMode .mcots-sidebar-menu .metismenu ul.subItem > li > a {
    font-size: var(--mcots-font-md, 0.8125rem) !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

body.darkMode .mcots-sidebar-menu .mcots-sidebar-group-label,
body.darkMode .mcots-sidebar-menu .app-menu > ul > li > span,
body.darkMode .mcots-sidebar-menu .metismenu > li > span {
    font-size: 0.65rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    color: rgba(255, 255, 255, 0.32) !important;
}

body.darkMode .mcots-sidebar-menu .tds-icon::before {
    font-size: var(--mcots-font-xl, 1.375rem);
    width: 20px;
    height: 20px;
}

/* Single-row hover only (do NOT paint <a>:hover — that double-washes with d-flex:hover) */
body.darkMode .mcots-sidebar-menu .metismenu > li.sidebar-top-link > div.d-flex:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

body.darkMode .mcots-sidebar-menu .metismenu > li.sidebar-top-link > div.d-flex a:hover,
body.darkMode .mcots-sidebar-menu .metismenu > li.sidebar-top-link > div.d-flex a:focus,
body.darkMode .mcots-sidebar-menu .metismenu > li.sidebar-top-link > div.d-flex a:focus-visible {
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

body.darkMode .mcots-sidebar-menu .metismenu ul.subItem > li > a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Active nav — glass pill + silver ::before rail (keep FA chevron; no border-left shift) */
body.darkMode .mcots-sidebar-menu .metismenu > li.sidebar-top-link.active > div.d-flex {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)) !important;
    border-radius: 8px;
}

body.darkMode .mcots-sidebar-menu .metismenu > li.sidebar-top-link.active > div.d-flex:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)) !important;
}

body.darkMode .mcots-sidebar-menu .metismenu > li.sidebar-top-link.active > div.d-flex::before {
    display: block !important;
    content: "" !important;
    background: #d8d8d8 !important;
}

body.darkMode .mcots-sidebar-menu .metismenu > li.sidebar-top-link.active > div.d-flex > a {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 500 !important;
    background: transparent !important;
}

body.darkMode .mcots-sidebar-menu .metismenu ul.subItem > li.active > a,
body.darkMode .mcots-sidebar-menu .metismenu ul.subItem > li.open > a,
body.darkMode .mcots-sidebar-menu .metismenu ul.subItem > li.show > a {
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)) !important;
    border-radius: 8px;
    /* Light mode still uses border-left orange on some .nav-item.active — kill it in dark */
    border-left-color: transparent !important;
}

/* Submenu active rail must match top-level: silver, NOT Mirion orange (glass dark spec) */
body.darkMode .mcots-sidebar-menu .metismenu ul.subItem > li.active > a::before,
body.darkMode .mcots-sidebar-menu .metismenu ul.subItem > li.open > a::before,
body.darkMode .mcots-sidebar-menu .metismenu ul.subItem > li.show > a::before {
    display: block !important;
    content: "" !important;
    background: #d8d8d8 !important;
}

body.darkMode .mcots-sidebar-menu .metismenu ul.subItem > li.active > a .tds-icon::before,
body.darkMode .mcots-sidebar-menu .metismenu ul.subItem > li.open > a .tds-icon::before,
body.darkMode .mcots-sidebar-menu .metismenu ul.subItem > li.show > a .tds-icon::before {
    filter: brightness(1.05) opacity(0.92) !important;
}

body.darkMode .mcots-sidebar-menu .app-menu .nav-item a.active {
    color: rgba(255, 255, 255, 0.92) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)) !important;
    border-left-color: transparent !important;
    border-radius: 8px;
}

body.darkMode .mcots-sidebar-menu .app-menu .nav-item a.active .tds-icon::before {
    filter: brightness(1.05) opacity(0.92) !important;
}

/* Keep Font Awesome chevron — do not replace with CSS diamond */
body.darkMode .mcots-sidebar .collIconTap i {
    display: inline-block !important;
    color: var(--mcots-chevron, rgba(255, 255, 255, 0.38));
}

body.darkMode .mcots-sidebar .collIconTap::after {
    content: none !important;
    display: none !important;
}

body.darkMode .mcots-sidebar-menu a:focus,
body.darkMode .mcots-sidebar-menu a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Glass only on real page/module cards — NOT Syncfusion shells / .shadow.rounded */
body.darkMode .mcots-layout .mcots-main > .mcots-main-scroll .card.module-card,
body.darkMode .mcots-layout .mcots-main .dashboard-mcots .card,
body.darkMode .mcots-layout .mcots-main .tds-records-card,
body.darkMode .mcots-layout .mcots-main .tds-usage-card,
body.darkMode .mcots-layout .mcots-main .tds-kpi-shell {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--mcots-card-radius, 12px) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    overflow: hidden !important;
}

body.darkMode .mcots-layout .mcots-main .card > .card-header,
body.darkMode .mcots-layout .mcots-main .module-card > .card-header,
body.darkMode .mcots-layout .mcots-main .card > .card-footer,
body.darkMode .mcots-layout .mcots-main .module-card > .card-footer,
body.darkMode .dashboard-mcots .card > .card-header,
body.darkMode .dashboard-mcots .card-header.revenue-card-header {
    border-radius: 0 !important;
}

/* Syncfusion grids inside cards — flatten chrome so header/empty match body */
body.darkMode .mcots-layout .mcots-main .e-grid,
body.darkMode .mcots-layout .mcots-main .e-grid .e-gridheader,
body.darkMode .mcots-layout .mcots-main .e-grid .e-headercontent,
body.darkMode .mcots-layout .mcots-main .e-grid .e-gridcontent,
body.darkMode .mcots-layout .mcots-main .e-grid .e-content,
body.darkMode .mcots-layout .mcots-main .e-grid .e-table,
body.darkMode .mcots-layout .mcots-main .e-grid .e-headercell,
body.darkMode .mcots-layout .mcots-main .e-grid .e-rowcell,
body.darkMode .mcots-layout .mcots-main .e-grid .e-emptyrow,
body.darkMode .mcots-layout .mcots-main .e-grid .e-emptyrow td,
body.darkMode .mcots-layout .mcots-main .e-grid .e-emptycell {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.darkMode .mcots-layout .mcots-main .e-grid .e-headertext,
body.darkMode .mcots-layout .mcots-main .e-grid .e-headercelldiv {
    background: transparent !important;
    background-color: transparent !important;
}

/* Hide Oqtane module-header when dashboard supplies its own title */
body.darkMode .card.module-card:has(.dashboard-mcots) > .module-header,
body.darkMode .mcots-main .dashboard-mcots ~ .module-header {
    display: none !important;
}

/* Opaque modals / menus / Syncfusion popups — never glass see-through; above topbar */
body.darkMode .modal-content,
body.darkMode .e-dialog,
body.darkMode .e-dialog .e-dlg-header-content,
body.darkMode .e-dialog .e-dlg-content,
body.darkMode .mcots-topmenubar .dropdown-menu,
body.darkMode .mcots-topbar .mcots-user-menu__panel,
body.darkMode .e-popup.e-popup-open,
body.darkMode .e-popup-wrapper.e-popup-open,
body.darkMode .e-dropdownbase.e-popup,
body.darkMode .e-ddl.e-popup,
body.darkMode .e-datepicker.e-popup,
body.darkMode .e-calendar,
body.darkMode .e-filter-popup,
body.darkMode .e-flmenu.e-popup,
body.darkMode .e-col-menu.e-popup,
body.darkMode .mcots-topmenubar__dropdown,
body.darkMode .mcots-topmenubar__dropdown--nested {
    background: var(--mcots-modal-bg, #141414) !important;
    background-color: var(--mcots-modal-bg, #141414) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
}

body.darkMode .modal-header,
body.darkMode .e-dialog .e-dlg-header-content,
body.darkMode .e-calendar .e-header,
body.darkMode .e-calendar .e-footer-container {
    background-color: var(--mcots-modal-header-bg, #1a1a1a) !important;
}

body > .e-dlg-overlay,
body > .e-dialog.e-popup,
body > .e-dialog.su-updates-dialog {
    z-index: 2000 !important;
}

/* Charts — Syncfusion hardcoded grid strokes softened in tds-module-kit.css
   via --mcots-chart-grid-line (applies to all modules, light + dark). */

body.darkMode .dashboard-mcots .e-accumulationchart svg path[stroke="white"] {
    stroke: #101010 !important;
    stroke-width: 1px !important;
    filter: none !important;
}

body.darkMode .dashboard-mcots .e-chart svg path[stroke="#38a6ce"] {
    filter: drop-shadow(0 0 5px rgba(56, 166, 206, 0.55));
}

body.darkMode .dashboard-mcots .kpi-card::before {
    width: 3px !important;
}


/* Dashboard gutters — align with Accounting */
.mcots-content:has(.dashboard-mcots) {
    padding: 12px 30px !important;
}
.mcots-content:has(.dashboard-mcots) > .container,
.mcots-content:has(.dashboard-mcots) > .container > .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}