/**
 * Barex theme tokens — single source of truth (Figma MAIN-SETTING node 105-858).
 * Consumed by layout/components via var(--barex-*). Do not change theme JS logic.
 */

:root {
    --barex-surface: #ffffff;
    --barex-secondary-surface: #fafafa;
    --barex-condensed-menu-surface: #fafafa;
    --barex-divider: #e3e3e3;
    --barex-border: #dee2e6;
    --barex-text-primary: #454954;
    --barex-text-secondary: #696b6a;
    --barex-primary: #594ae2;
    --barex-primary-005: rgba(89, 74, 226, 0.05);
    --barex-btn-disabled-bg: #cccccc;
    /* Sidenav palette (always defined — used with data-menu-color, not only data-bs-theme) */
    --barex-sidenav-bg-light: #fafafa;
    --barex-sidenav-bg-menu-light: #ffffff;
    --barex-sidenav-bg-dark: #090913;
    --barex-sidenav-menu-dark: #0d0d17;
    --barex-menu-item-bg-dark: #191827;
    --barex-sidenav-menu-text: #454954;
    --barex-sidenav-menu-text-muted: #696b6a;
    --barex-sidenav-divider-dark: rgba(230, 234, 242, 0.12);
    --barex-sidenav-active-bg-dark: rgba(255, 255, 255, 0.06);
    --barex-sidenav-active-border-dark: rgba(230, 234, 242, 0.15);
    --barex-topbar-bg-light: #ffffff;
    --barex-topbar-bg-dark: #090913;
    /* TopBar «رنگ پس‌زمینه داشته باشد» — بله (brand); خیر follows data-topbar-color light/dark */
    --barex-topbar-colored-bg: #fafafa;
    --barex-topbar-colored-bg-dark: var(--barex-sidebar-surface-dark);
    --barex-topbar-text-on-light: #454954;
    --barex-topbar-text-on-dark: #c0c6d2;
    --barex-topbar-search-bg: #ffffff;
    --barex-topbar-search-border: #e6e6e6;
    --barex-topbar-search-kbd-bg: #f9f9f9;
    --barex-topbar-search-text: #464646;
    --barex-topbar-search-muted: #696b6a;
    --barex-settings-nav-bg: #ffffff;
    --barex-settings-content-bg: #ffffff;
    --barex-nav-active-bg-light: #ffffff;
    --barex-nav-active-border-light: #e3e3e3;
    --barex-bc-sep: #c0c0c0;
    --bx-topbar-bg: var(--barex-topbar-bg-light);
    /* EX sidebar — raw palette (light page theme defaults) */
    --barex-sidebar-surface-default: #fafafa;
    --barex-sidebar-surface-light: #ffffff;
    --barex-sidebar-surface-dark: #0d0d17;
    --barex-bg-items-default: #ffffff;
    --barex-bg-items-light: #ffffff;
    --barex-bg-items-dark: #191827;
    --barex-text-primary-sidebar-dark: #c0c6d2;
    --barex-text-scondary-sidebar-dark: #a8afb9;
    --barex-divider-sidebar-dark: #1d1d27;
    --barex-border-sidebar-dark: #414755;
    /* EX sidebar — active aliases (inherit to TopBar / SideNav) */
    --barex-sidebar-surface-active: var(--barex-sidebar-surface-default);
    --barex-bg-items-active: var(--barex-bg-items-default);
    --barex-sidebar-text-primary-active: var(--barex-text-primary);
    --barex-sidebar-text-secondary-active: var(--barex-text-secondary);
    --barex-sidebar-divider-active: var(--barex-divider);
    --barex-sidebar-border-active: var(--barex-border);
    /* Page body when menu appearance is brand (پیش‌فرض) */
    --barex-brand-page-body: #ffffff;
}

html[data-bs-theme="dark"] {
    --barex-surface: #090913;
    --barex-secondary-surface: #191827;
    --barex-condensed-menu-surface: #090913;
    --barex-divider: #1d1d27;
    --barex-border: #414755;
    --barex-text-primary: #c0c6d2;
    --barex-text-secondary: #a8afb9;
    --barex-primary: #6143fa;
    --barex-primary-005: rgba(97, 67, 250, 0.05);
    --barex-menu-item-bg: #191827;
    --barex-settings-nav-bg: #090913;
    --barex-settings-content-bg: #090913;
    --barex-nav-active-bg-dark: rgba(255, 255, 255, 0.06);
    --barex-nav-active-border-dark: rgba(230, 234, 242, 0.15);
    --barex-divider-faint: rgba(230, 234, 242, 0.12);
    --bx-topbar-bg: var(--barex-topbar-bg-dark);
    --barex-topbar-search-bg: #191827;
    --barex-topbar-search-border: #414755;
    --barex-topbar-search-kbd-bg: #0d0d17;
    --barex-topbar-search-text: #c0c6d2;
    --barex-topbar-search-muted: #a8afb9;
    --barex-sidebar-surface-default: #090913;
    --barex-sidebar-surface-light: #090913;
    --barex-bg-items-default: #191827;
    --barex-bg-items-light: #191827;
    --barex-topbar-colored-bg: var(--barex-topbar-colored-bg-dark);
    --barex-brand-page-body: var(--barex-sidebar-surface-dark);
}

/* EX sidebar — active aliases per theme × menu appearance */
html[data-menu-color="brand"][data-bs-theme="light"] {
    --barex-sidebar-surface-active: var(--barex-sidebar-surface-default);
    --barex-bg-items-active: var(--barex-bg-items-default);
    --barex-sidebar-text-primary-active: var(--barex-text-primary);
    --barex-sidebar-text-secondary-active: var(--barex-text-secondary);
    --barex-sidebar-divider-active: var(--barex-divider);
    --barex-sidebar-border-active: var(--barex-border);
}

html[data-menu-color="brand"][data-bs-theme="dark"] {
    --barex-sidebar-surface-active: var(--barex-sidebar-surface-default);
    --barex-bg-items-active: var(--barex-bg-items-default);
    --barex-sidebar-text-primary-active: var(--barex-text-primary);
    --barex-sidebar-text-secondary-active: var(--barex-text-secondary);
    --barex-sidebar-divider-active: var(--barex-divider);
    --barex-sidebar-border-active: var(--barex-border);

    /* Page body — dark theme + ظاهر پیش‌فرض (brand) */
    --barex-body-bg: var(--barex-sidebar-surface-dark);
    --barex-body-bg-rgb: 13, 13, 23;
}

html[data-menu-color="light"][data-bs-theme="light"] {
    --barex-sidebar-surface-active: var(--barex-sidebar-surface-light);
    --barex-bg-items-active: var(--barex-bg-items-light);
    --barex-sidebar-text-primary-active: var(--barex-text-primary);
    --barex-sidebar-text-secondary-active: var(--barex-text-secondary);
    --barex-sidebar-divider-active: var(--barex-divider);
    --barex-sidebar-border-active: var(--barex-border);
}

html[data-menu-color="light"][data-bs-theme="dark"] {
    --barex-sidebar-surface-active: var(--barex-sidebar-surface-light);
    --barex-bg-items-active: var(--barex-bg-items-light);
    --barex-sidebar-text-primary-active: var(--barex-text-primary);
    --barex-sidebar-text-secondary-active: var(--barex-text-secondary);
    --barex-sidebar-divider-active: var(--barex-divider);
    --barex-sidebar-border-active: var(--barex-border);
}

html[data-menu-color="dark"] {
    --barex-sidebar-surface-active: var(--barex-sidebar-surface-dark);
    --barex-bg-items-active: var(--barex-bg-items-dark);
    --barex-sidebar-text-primary-active: var(--barex-text-primary-sidebar-dark);
    --barex-sidebar-text-secondary-active: var(--barex-text-scondary-sidebar-dark);
    --barex-sidebar-divider-active: var(--barex-divider-sidebar-dark);
    --barex-sidebar-border-active: var(--barex-border-sidebar-dark);
}

/* Menu appearance (data-menu-color) — independent of page theme */
html[data-menu-color="dark"] {
    --barex-sidenav-menu-text: var(--barex-text-primary-sidebar-dark);
    --barex-sidenav-menu-text-muted: var(--barex-text-scondary-sidebar-dark);
}

html[data-menu-color="dark"] .sidenav-menu {
    --barex-text-primary: var(--barex-text-primary-sidebar-dark);
    --barex-text-secondary: var(--barex-text-scondary-sidebar-dark);
}

html[data-menu-color="brand"][data-bs-theme="dark"] .sidenav-menu {
    --barex-text-primary: #c0c6d2;
    --barex-text-secondary: #a8afb9;
}

/* Align Osen menu variables with Barex tokens (fallback when scoped CSS does not win) */
:root[data-menu-color="light"] {
    --barex-menu-bg: var(--barex-sidebar-surface-light);
    --barex-menu-item-color: #6c757d;
    --barex-menu-item-hover-color: var(--barex-primary);
    --barex-menu-item-hover-bg: rgba(89, 74, 226, 0.1);
    --barex-menu-item-active-color: var(--barex-primary);
    --barex-menu-item-active-bg: rgba(89, 74, 226, 0.1);
}

:root[data-menu-color="dark"] {
    --barex-menu-bg: var(--barex-sidebar-surface-dark);
    --barex-menu-item-color: #c0c6d2;
    --barex-menu-item-hover-color: #c0c6d2;
    --barex-menu-item-hover-bg: var(--barex-menu-item-bg-dark);
    --barex-menu-item-active-color: #c0c6d2;
    --barex-menu-item-active-bg: var(--barex-menu-item-bg-dark);
}

:root[data-menu-color="brand"][data-bs-theme="light"] {
    --barex-menu-bg: var(--barex-sidebar-surface-default);
    --barex-menu-item-color: var(--barex-text-primary);
    --barex-menu-item-hover-color: var(--barex-primary);
    --barex-menu-item-hover-bg: rgba(89, 74, 226, 0.1);
    --barex-menu-item-active-color: var(--barex-primary);
    --barex-menu-item-active-bg: rgba(89, 74, 226, 0.1);
}

:root[data-menu-color="brand"][data-bs-theme="dark"] {
    --barex-menu-bg: var(--barex-sidebar-surface-default);
    --barex-menu-item-color: #c0c6d2;
    --barex-menu-item-hover-color: #c0c6d2;
    --barex-menu-item-hover-bg: var(--barex-menu-item-bg-dark);
    --barex-menu-item-active-color: #c0c6d2;
    --barex-menu-item-active-bg: var(--barex-menu-item-bg-dark);
}

:root[data-bs-theme="dark"][data-menu-color="light"] {
    --barex-menu-bg: var(--barex-sidebar-surface-light);
    --barex-menu-item-color: #c0c6d2;
    --barex-menu-item-hover-color: #c0c6d2;
    --barex-menu-item-hover-bg: var(--barex-menu-item-bg-dark);
    --barex-menu-item-active-color: #c0c6d2;
    --barex-menu-item-active-bg: var(--barex-menu-item-bg-dark);
}

:root[data-bs-theme="dark"][data-menu-color="brand"] {
    --barex-menu-bg: var(--barex-sidebar-surface-default);
    --barex-menu-item-color: #c0c6d2;
    --barex-menu-item-hover-color: #c0c6d2;
    --barex-menu-item-hover-bg: var(--barex-menu-item-bg-dark);
    --barex-menu-item-active-color: #c0c6d2;
    --barex-menu-item-active-bg: var(--barex-menu-item-bg-dark);
}

/* Sidenav surfaces — driven by --barex-sidebar-surface-active */
html:not([data-layout="topnav"]) .sidenav-menu {
    background: var(--barex-sidebar-surface-active) !important;
    background-image: none !important;
}

/* Condensed icon wells */
html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .sidenav-menu {
    --sidenav-main-icon-well-bg: var(--barex-bg-items-active);
    --sidenav-main-icon-well-border: var(--barex-sidebar-border-active);
}

/* Sidebar brand toggle (expanded) */
html:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit {
    background: var(--barex-bg-items-active) !important;
    border: 1px solid var(--barex-sidebar-border-active) !important;
    border-radius: 12px;
    color: var(--barex-sidebar-text-primary-active);
}

/* TopBar toggle (condensed) — default follows sidebar tokens */
html:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit {
    background: var(--barex-bg-items-active) !important;
    border: 1px solid var(--barex-sidebar-border-active) !important;
    border-color: var(--barex-sidebar-border-active) !important;
    color: var(--barex-sidebar-text-primary-active);
}

/* Light page theme + dark sidenav: TopBar toggle has no fill — border + dark icon on light topbar */
html[data-bs-theme="light"][data-menu-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit,
html[data-bs-theme="light"][data-menu-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:hover,
html[data-bs-theme="light"][data-menu-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:focus,
html[data-bs-theme="light"][data-menu-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:focus-visible {
    background: transparent !important;
    border-color: var(--barex-sidebar-border-active) !important;
    color: var(--barex-text-primary) !important;
}

html[data-bs-theme="light"][data-menu-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit i,
html[data-bs-theme="light"][data-menu-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:hover i,
html[data-bs-theme="light"][data-menu-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:focus i,
html[data-bs-theme="light"][data-menu-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:focus-visible i {
    color: var(--barex-text-primary) !important;
}

/* Light theme + dark sidenav only: SideNav toggle — white icon, border from sidebar tokens */
html[data-bs-theme="light"][data-menu-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit,
html[data-bs-theme="light"][data-menu-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:hover,
html[data-bs-theme="light"][data-menu-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:focus,
html[data-bs-theme="light"][data-menu-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:focus-visible {
    background: var(--barex-bg-items-active) !important;
    border: 1px solid var(--barex-sidebar-border-active) !important;
    border-color: var(--barex-sidebar-border-active) !important;
    color: #fff !important;
}

html[data-bs-theme="light"][data-menu-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit i,
html[data-bs-theme="light"][data-menu-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:hover i,
html[data-bs-theme="light"][data-menu-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:focus i,
html[data-bs-theme="light"][data-menu-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:focus-visible i {
    color: #fff !important;
}

/* Dark TopBar + dark SideNav: toggle border uses --barex-sidebar-border-active, white icon */
html[data-menu-color="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit,
html[data-menu-color="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit,
html[data-menu-color="dark"][data-topbar-color="brand"][data-bs-theme="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit,
html[data-menu-color="dark"][data-topbar-color="brand"][data-bs-theme="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="brand"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="brand"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit,
html[data-menu-color="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:hover,
html[data-menu-color="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:focus,
html[data-menu-color="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:focus-visible,
html[data-menu-color="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:hover,
html[data-menu-color="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:focus,
html[data-menu-color="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:focus-visible,
html[data-menu-color="dark"][data-topbar-color="brand"][data-bs-theme="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:hover,
html[data-menu-color="dark"][data-topbar-color="brand"][data-bs-theme="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:focus,
html[data-menu-color="dark"][data-topbar-color="brand"][data-bs-theme="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:focus-visible,
html[data-menu-color="dark"][data-topbar-color="brand"][data-bs-theme="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:hover,
html[data-menu-color="dark"][data-topbar-color="brand"][data-bs-theme="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:focus,
html[data-menu-color="dark"][data-topbar-color="brand"][data-bs-theme="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:focus-visible,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:hover,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:focus,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:focus-visible,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:hover,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:focus,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:focus-visible,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="brand"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:hover,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="brand"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:focus,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="brand"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:focus-visible,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="brand"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:hover,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="brand"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:focus,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="brand"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:focus-visible {
    background: var(--barex-bg-items-active) !important;
    border: 1px solid var(--barex-sidebar-border-active) !important;
    border-color: var(--barex-sidebar-border-active) !important;
    color: #fff !important;
}

html[data-menu-color="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit i,
html[data-menu-color="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit i,
html[data-menu-color="dark"][data-topbar-color="brand"][data-bs-theme="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit i,
html[data-menu-color="dark"][data-topbar-color="brand"][data-bs-theme="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit i,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit i,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit i,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="brand"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit i,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="brand"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit i,
html[data-menu-color="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:hover i,
html[data-menu-color="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:focus i,
html[data-menu-color="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:focus-visible i,
html[data-menu-color="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:hover i,
html[data-menu-color="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:focus i,
html[data-menu-color="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:focus-visible i,
html[data-menu-color="dark"][data-topbar-color="brand"][data-bs-theme="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:hover i,
html[data-menu-color="dark"][data-topbar-color="brand"][data-bs-theme="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:focus i,
html[data-menu-color="dark"][data-topbar-color="brand"][data-bs-theme="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:focus-visible i,
html[data-menu-color="dark"][data-topbar-color="brand"][data-bs-theme="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:hover i,
html[data-menu-color="dark"][data-topbar-color="brand"][data-bs-theme="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:focus i,
html[data-menu-color="dark"][data-topbar-color="brand"][data-bs-theme="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:focus-visible i,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:hover i,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:focus i,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:focus-visible i,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:hover i,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:focus i,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="dark"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:focus-visible i,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="brand"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:hover i,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="brand"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:focus i,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="brand"]:not([data-layout="topnav"]) .sidenav-menu .sidebar-brand .sidenav-toggle-button.topbar-toggle-hit:focus-visible i,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="brand"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:hover i,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="brand"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:focus i,
html[data-menu-color="brand"][data-bs-theme="dark"][data-topbar-color="brand"]:not([data-layout="topnav"]) .app-topbar .topbar-toggle-hit:focus-visible i {
    color: #fff !important;
}

/* SideNav logo: default PNG set; SVG set hidden unless dark sidenav or dark theme + light menu */
.sidenav-menu .logo .logo-set-default {
    display: block;
}

.sidenav-menu .logo .logo-set-dark-on-light,
.sidenav-menu .sidenav-logo-min .logo-img-dark-on-light {
    display: none !important;
}

/* Dark sidenav background: condensed → darkLOGO.svg, default → hdarkLOGO.svg */
html[data-menu-color="dark"] .sidenav-menu .logo .logo-set-default,
html[data-menu-color="dark"] .sidenav-menu .sidenav-logo-min .logo-img-default,
html[data-bs-theme="dark"][data-menu-color="brand"] .sidenav-menu .logo .logo-set-default,
html[data-bs-theme="dark"][data-menu-color="brand"] .sidenav-menu .sidenav-logo-min .logo-img-default {
    display: none !important;
}

html[data-menu-color="dark"] .sidenav-menu .logo .logo-set-dark-on-light,
html[data-bs-theme="dark"][data-menu-color="brand"] .sidenav-menu .logo .logo-set-dark-on-light {
    display: block !important;
}

html[data-menu-color="dark"] .sidenav-menu .sidenav-logo-min .logo-img-dark-on-light,
html[data-bs-theme="dark"][data-menu-color="brand"] .sidenav-menu .sidenav-logo-min .logo-img-dark-on-light {
    display: block !important;
}

/* Light page theme + light sidenav: PNG logos (logo.png / logomin.png) */
html[data-bs-theme="light"][data-menu-color="light"] .sidenav-menu .logo .logo-light {
    display: block !important;
}

html[data-bs-theme="light"][data-menu-color="light"] .sidenav-menu .logo .logo-dark {
    display: none !important;
}

html[data-bs-theme="light"][data-menu-color="light"] .sidenav-menu .logo .logo-set-dark-on-light,
html[data-bs-theme="light"][data-menu-color="light"] .sidenav-menu .sidenav-logo-min .logo-img-dark-on-light {
    display: none !important;
}

/* Dark page theme + light sidenav (ظاهر روشن): hdarkLOGO.svg / darkLOGO.svg */
html[data-bs-theme="dark"][data-menu-color="light"] .sidenav-menu .logo .logo-set-default,
html[data-bs-theme="dark"][data-menu-color="light"] .sidenav-menu .sidenav-logo-min .logo-img-default {
    display: none !important;
}

html[data-bs-theme="dark"][data-menu-color="light"] .sidenav-menu .logo .logo-set-dark-on-light {
    display: block !important;
}

html[data-bs-theme="dark"][data-menu-color="light"] .sidenav-menu .sidenav-logo-min .logo-img-dark-on-light {
    display: block !important;
}

/* TopBar: no fade on theme/color changes (keep sidenav margin transition only) */
.app-topbar {
    transition: margin-left 0.25s ease-in-out, margin-right 0.25s ease-in-out, margin-inline-start 0.25s ease-in-out, margin-inline-end 0.25s ease-in-out !important;
}

.app-topbar .topbar-menu,
.app-topbar .topbar-search-box,
.app-topbar .topbar-search-icon,
.app-topbar .topbar-search-input,
.app-topbar .topbar-search-kbd,
.app-topbar .topbar-link,
.app-topbar .topbar-bc-icon,
.app-topbar .topbar-bc-item,
.app-topbar .topbar-bc-sep,
.app-topbar .topbar-bc-divider,
.app-topbar .topbar-toggle-hit,
.app-topbar .sidenav-toggle-button {
    transition: none !important;
}

/* TopBar surfaces (attribute-driven; logic unchanged in theme-settings.js) */
html[data-topbar-color="light"] .app-topbar {
    background: var(--barex-topbar-bg-light) !important;
}

html[data-topbar-color="dark"] .app-topbar {
    background: var(--barex-topbar-bg-dark) !important;
}

html[data-topbar-color="brand"] .app-topbar {
    background: var(--barex-topbar-colored-bg) !important;
}

html[data-topbar-color="dark"] .app-topbar .topbar-bc-icon,
html[data-topbar-color="dark"] .app-topbar .topbar-bc-item,
html[data-topbar-color="dark"] .app-topbar .topbar-link {
    color: var(--barex-topbar-text-on-dark) !important;
}

html[data-topbar-color="brand"][data-bs-theme="light"] .app-topbar .topbar-bc-icon,
html[data-topbar-color="brand"][data-bs-theme="light"] .app-topbar .topbar-bc-item,
html[data-topbar-color="brand"][data-bs-theme="light"] .app-topbar .topbar-link,
html[data-topbar-color="light"] .app-topbar .topbar-bc-icon,
html[data-topbar-color="light"] .app-topbar .topbar-bc-item,
html[data-topbar-color="light"] .app-topbar .topbar-link {
    color: var(--barex-topbar-text-on-light) !important;
}

html[data-topbar-color="brand"][data-bs-theme="dark"] .app-topbar .topbar-bc-icon,
html[data-topbar-color="brand"][data-bs-theme="dark"] .app-topbar .topbar-bc-item,
html[data-topbar-color="brand"][data-bs-theme="dark"] .app-topbar .topbar-link {
    color: var(--barex-topbar-text-on-dark) !important;
}

/* TopBar search field (custom layout in TopBar.razor) */
.app-topbar .topbar-search-box {
    background: var(--barex-topbar-search-bg) !important;
    border: 1px solid var(--barex-topbar-search-border) !important;
    border-radius: 12px;
    gap: 8px;
    height: 40px;
    overflow: hidden;
    padding: 0 12px;
    width: 278px;
}

.app-topbar .topbar-search-icon {
    color: var(--barex-topbar-search-muted);
    font-size: 20px;
}

.app-topbar .topbar-search-input {
    color: var(--barex-topbar-search-text);
    direction: rtl;
    font-size: 14px;
    min-width: 0;
    outline: none;
    width: 100%;
}

.app-topbar .topbar-search-input::placeholder {
    color: var(--barex-topbar-search-muted);
}

.app-topbar .topbar-search-kbd {
    background: var(--barex-topbar-search-kbd-bg);
    border-radius: 8px;
    height: 24px;
    min-width: 52px;
    padding: 0 6px;
}

.app-topbar .topbar-search-kbd-text {
    color: var(--barex-topbar-search-muted);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    white-space: nowrap;
}

/* Colored topbar — light theme (#fafafa) keeps light search field */
html[data-bs-theme="light"][data-topbar-color="brand"] .app-topbar .topbar-search-box {
    --barex-topbar-search-bg: #ffffff;
    --barex-topbar-search-border: #e6e6e6;
    --barex-topbar-search-kbd-bg: #f9f9f9;
    --barex-topbar-search-text: #464646;
    --barex-topbar-search-muted: #696b6a;
}

/* Dark theme + colored topbar (#0d0d17): search uses dark tokens from html[data-bs-theme=dark] */

/* Mobile sidenav: ignore touches when closed; reduce ghost taps on menu toggle */
@media (max-width: 767.98px) {
    html[data-sidenav-size="full"]:not([data-layout="topnav"]) .sidenav-menu {
        pointer-events: none;
    }

    html[data-sidenav-size="default"]:not([data-layout="topnav"]) .sidenav-menu {
        pointer-events: auto;
    }

    html:not([data-layout="topnav"]) .sidenav-toggle-button.topbar-toggle-hit {
        touch-action: manipulation;
    }

    .highcharts-container,
    .highcharts-container svg,
    canvas[id$="Chart"] {
        touch-action: pan-y;
    }

    .highcharts-container.highcharts-no-touch-action {
        touch-action: pan-y !important;
    }
}