/*
 * Ayrito shared theme contract
 *
 * This is the final visual layer loaded by the application bases.  Keep
 * colours, contrast and common component rules here; page templates should
 * only describe content and state, never duplicate the palette.
 */
:root {
    color-scheme: light;
    --ui-page: #f4f7fb;
    --ui-surface: #ffffff;
    --ui-surface-2: #f8fafc;
    --ui-surface-3: #eef3f8;
    --ui-border: #dce5ef;
    --ui-text: #182337;
    --ui-text-strong: #101828;
    --ui-muted: #66758b;
    --ui-placeholder: #8b98aa;
    --ui-primary: #2373f4;
    --ui-primary-hover: #155cd4;
    --ui-primary-soft: rgba(35, 115, 244, .10);
    --ui-success: #168a63;
    --ui-success-soft: rgba(22, 138, 99, .12);
    --ui-warning: #a96500;
    --ui-warning-soft: rgba(245, 174, 62, .16);
    --ui-danger: #c33d55;
    --ui-danger-soft: rgba(195, 61, 85, .12);
    --ui-info: #1174a8;
    --ui-info-soft: rgba(17, 116, 168, .12);
    --ui-overlay: rgba(11, 20, 38, .58);
    --ui-shadow: 0 10px 28px rgba(25, 45, 80, .08);
    --ui-shadow-lg: 0 20px 48px rgba(25, 45, 80, .13);
    --ui-radius: 12px;
    --ui-radius-sm: 8px;

    /* Compatibility aliases: feature CSS can use one stable contract. */
    --app-bg: var(--ui-page);
    --app-surface: var(--ui-surface);
    --app-surface-muted: var(--ui-surface-2);
    --app-sidebar: var(--ui-surface);
    --app-sidebar-text: var(--ui-text);
    --app-sidebar-muted: var(--ui-muted);
    --app-sidebar-hover: var(--ui-primary-soft);
    --app-border: var(--ui-border);
    --app-text: var(--ui-text);
    --app-muted: var(--ui-muted);
    --app-primary: var(--ui-primary);
    --app-primary-hover: var(--ui-primary-hover);
    --app-primary-soft: var(--ui-primary-soft);
    --app-gold: #d18b20;
    --app-topbar: var(--ui-surface);
    --app-topbar-text: var(--ui-text);
    --bs-body-bg: var(--ui-page);
    --bs-body-color: var(--ui-text);
    --bs-border-color: var(--ui-border);
    --bs-link-color: var(--ui-primary);
    --bs-link-hover-color: var(--ui-primary-hover);
}

[data-bs-theme='dark'] {
    color-scheme: dark;
    --ui-page: #0f1728;
    --ui-surface: #182338;
    --ui-surface-2: #202d45;
    --ui-surface-3: #293752;
    --ui-border: #344764;
    --ui-text: #e9eff8;
    --ui-text-strong: #f8fbff;
    --ui-muted: #a9b7ca;
    --ui-placeholder: #8e9db2;
    --ui-primary: #76a8ff;
    --ui-primary-hover: #9ac0ff;
    --ui-primary-soft: rgba(118, 168, 255, .16);
    --ui-success: #5ed3aa;
    --ui-success-soft: rgba(94, 211, 170, .16);
    --ui-warning: #ffd06e;
    --ui-warning-soft: rgba(255, 208, 110, .16);
    --ui-danger: #ff9dad;
    --ui-danger-soft: rgba(255, 157, 173, .16);
    --ui-info: #72c7ee;
    --ui-info-soft: rgba(114, 199, 238, .16);
    --ui-overlay: rgba(3, 8, 18, .72);
    --ui-shadow: 0 12px 32px rgba(0, 0, 0, .22);
    --ui-shadow-lg: 0 22px 52px rgba(0, 0, 0, .34);

    --app-bg: var(--ui-page);
    --app-surface: var(--ui-surface);
    --app-surface-muted: var(--ui-surface-2);
    --app-sidebar: #121c30;
    --app-sidebar-text: var(--ui-text-strong);
    --app-sidebar-muted: var(--ui-muted);
    --app-sidebar-hover: var(--ui-primary-soft);
    --app-border: var(--ui-border);
    --app-text: var(--ui-text);
    --app-muted: var(--ui-muted);
    --app-primary: var(--ui-primary);
    --app-primary-hover: var(--ui-primary-hover);
    --app-primary-soft: var(--ui-primary-soft);
    --app-gold: #ffd06e;
    --app-topbar: #121c30;
    --app-topbar-text: var(--ui-text-strong);
    --bs-body-bg: var(--ui-page);
    --bs-body-color: var(--ui-text);
    --bs-border-color: var(--ui-border);
    --bs-link-color: var(--ui-primary);
    --bs-link-hover-color: var(--ui-primary-hover);
}

html,
body {
    min-width: 320px;
    background-color: var(--ui-page) !important;
    color: var(--ui-text) !important;
}

body,
button,
input,
select,
textarea {
    font-family: Vazirmatn, Tahoma, Arial, sans-serif;
}

a { color: var(--ui-primary); }
a:hover { color: var(--ui-primary-hover); }

/* Common Bootstrap surfaces */
.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.list-group,
.list-group-item,
.accordion-item,
.toast,
.popover,
.tooltip-inner {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.list-group,
.accordion-item,
.toast,
.popover { box-shadow: var(--ui-shadow) !important; }

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.accordion-button,
.list-group-item {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

.accordion-button:not(.collapsed) {
    color: var(--ui-primary) !important;
    background-color: var(--ui-primary-soft) !important;
}

.form-control,
.form-select,
.input-group-text,
.form-control:disabled,
.form-control[readonly] {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
}

.form-control::placeholder,
textarea::placeholder { color: var(--ui-placeholder) !important; opacity: 1; }
.form-control:focus,
.form-select:focus {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 .2rem var(--ui-primary-soft) !important;
}

label,
.form-label,
.form-check-label { color: var(--ui-text) !important; }
.form-text,
.text-muted,
.text-secondary { color: var(--ui-muted) !important; }
.text-dark,
.text-black { color: var(--ui-text-strong) !important; }
.text-primary { color: var(--ui-primary) !important; }
.text-success { color: var(--ui-success) !important; }
.text-warning { color: var(--ui-warning) !important; }
.text-danger { color: var(--ui-danger) !important; }
.bg-white,
.bg-light,
.bg-body,
.table-light { background-color: var(--ui-surface-2) !important; color: var(--ui-text) !important; }
.border,
.border-top,
.border-end,
.border-bottom,
.border-start { border-color: var(--ui-border) !important; }

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ui-text);
    --bs-table-border-color: var(--ui-border);
    color: var(--ui-text) !important;
}
.table > :not(caption) > * > * { color: inherit; border-bottom-color: var(--ui-border) !important; }
.table thead th { color: var(--ui-muted) !important; background: var(--ui-surface-2) !important; }
.table-hover > tbody > tr:hover > * { color: var(--ui-text) !important; background: var(--ui-primary-soft) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { color: var(--ui-text); background-color: color-mix(in srgb, var(--ui-surface-2) 62%, transparent); }

.dropdown-item { color: var(--ui-text) !important; }
.dropdown-item:hover,
.dropdown-item:focus { color: var(--ui-text) !important; background-color: var(--ui-primary-soft) !important; }
.nav-tabs { border-color: var(--ui-border) !important; }
.nav-tabs .nav-link { color: var(--ui-muted); }
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active { color: var(--ui-primary); background: var(--ui-surface); border-color: var(--ui-border) var(--ui-border) var(--ui-surface); }
.pagination .page-link { color: var(--ui-primary); background: var(--ui-surface); border-color: var(--ui-border); }
.pagination .page-item.active .page-link { color: #fff; background: var(--ui-primary); border-color: var(--ui-primary); }
.btn-close { filter: none; }
[data-bs-theme='dark'] .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }

.alert-info { color: var(--ui-info) !important; background: var(--ui-info-soft) !important; border-color: color-mix(in srgb, var(--ui-info) 35%, var(--ui-border)) !important; }
.alert-success { color: var(--ui-success) !important; background: var(--ui-success-soft) !important; border-color: color-mix(in srgb, var(--ui-success) 35%, var(--ui-border)) !important; }
.alert-warning { color: var(--ui-warning) !important; background: var(--ui-warning-soft) !important; border-color: color-mix(in srgb, var(--ui-warning) 35%, var(--ui-border)) !important; }
.alert-danger { color: var(--ui-danger) !important; background: var(--ui-danger-soft) !important; border-color: color-mix(in srgb, var(--ui-danger) 35%, var(--ui-border)) !important; }

/* Fix the most common legacy hard-coded light surfaces when dark mode is on. */
[data-bs-theme='dark'] [style*='background:#fff'],
[data-bs-theme='dark'] [style*='background: #fff'],
[data-bs-theme='dark'] [style*='background:#ffffff'],
[data-bs-theme='dark'] [style*='background: #ffffff'],
[data-bs-theme='dark'] [style*='background:white'],
[data-bs-theme='dark'] [style*='background: white'],
[data-bs-theme='dark'] [style*='background-color:#fff'],
[data-bs-theme='dark'] [style*='background-color: #fff'],
[data-bs-theme='dark'] [style*='background-color:#ffffff'],
[data-bs-theme='dark'] [style*='background-color: #ffffff'],
[data-bs-theme='dark'] [style*='background-color:white'],
[data-bs-theme='dark'] [style*='background-color: white'] {
    background-color: var(--ui-surface) !important;
}

[data-bs-theme='dark'] [style*='background:#f8'],
[data-bs-theme='dark'] [style*='background: #f8'],
[data-bs-theme='dark'] [style*='background:#f9'],
[data-bs-theme='dark'] [style*='background: #f9'],
[data-bs-theme='dark'] [style*='background:#fdf'],
[data-bs-theme='dark'] [style*='background: #fdf'],
[data-bs-theme='dark'] [style*='background-color:#f8'],
[data-bs-theme='dark'] [style*='background-color: #f8'],
[data-bs-theme='dark'] [style*='background-color:#f9'],
[data-bs-theme='dark'] [style*='background-color: #f9'] {
    background-color: var(--ui-surface-2) !important;
}

[data-bs-theme='dark'] [style*='color:#333'],
[data-bs-theme='dark'] [style*='color: #333'],
[data-bs-theme='dark'] [style*='color:#666'],
[data-bs-theme='dark'] [style*='color: #666'],
[data-bs-theme='dark'] [style*='color:#64748b'],
[data-bs-theme='dark'] [style*='color: #64748b'],
[data-bs-theme='dark'] [style*='color:#202427'],
[data-bs-theme='dark'] [style*='color: #202427'] {
    color: var(--ui-text) !important;
}

/* Feature pages frequently use these neutral utility containers. */
[data-bs-theme='dark'] .bg-light-subtle,
[data-bs-theme='dark'] .bg-body-secondary,
[data-bs-theme='dark'] .bg-body-tertiary,
[data-bs-theme='dark'] .background-light,
[data-bs-theme='dark'] .surface,
[data-bs-theme='dark'] .panel,
[data-bs-theme='dark'] .form-section,
[data-bs-theme='dark'] .invoice-card,
[data-bs-theme='dark'] .inv1,
[data-bs-theme='dark'] .inv2,
[data-bs-theme='dark'] .inv3,
[data-bs-theme='dark'] .inv4 {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

/* Neutral feature-page surfaces that historically owned their own palette. */
[data-bs-theme='dark'] .invoice-row,
[data-bs-theme='dark'] .order-form,
[data-bs-theme='dark'] .order-calculator,
[data-bs-theme='dark'] .quick-category-option,
[data-bs-theme='dark'] .product-option,
[data-bs-theme='dark'] .variant-option,
[data-bs-theme='dark'] .form-card,
[data-bs-theme='dark'] .card-auth,
[data-bs-theme='dark'] .sheet,
[data-bs-theme='dark'] .box,
[data-bs-theme='dark'] .ai-card,
[data-bs-theme='dark'] .ai-link-row,
[data-bs-theme='dark'] .filter-card,
[data-bs-theme='dark'] .report-card,
[data-bs-theme='dark'] .section-card {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

[data-bs-theme='dark'] .modal-backdrop.show { opacity: .72; background-color: var(--ui-overlay); }
[data-bs-theme='dark'] ::selection { color: var(--ui-text-strong); background: var(--ui-primary-soft); }

/* The global install prompt must never cover dialog actions or an open drawer. */
body:has(.modal.show, .offcanvas.show) .pwa-install-prompt { display: none !important; }

/* Legacy reports use this action class without Bootstrap's button variants. */
.valex-app .btnb {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: .55rem 1.15rem;
    color: #fff !important;
    background: var(--ui-primary) !important;
    border: 1px solid var(--ui-primary) !important;
    border-radius: var(--ui-radius-sm) !important;
    font: inherit;
    font-size: .84rem;
    font-weight: 650;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.valex-app .btnb:hover,
.valex-app .btnb:focus-visible {
    color: #fff !important;
    background: var(--ui-primary-hover) !important;
    border-color: var(--ui-primary-hover) !important;
    box-shadow: 0 0 0 .2rem var(--ui-primary-soft) !important;
}

/* Public/auth screens can opt into the same contract without the dashboard shell. */
.theme-page {
    min-height: 100vh;
    color: var(--ui-text);
    background: var(--ui-page);
}
.theme-page .surface,
.theme-page .card { background-color: var(--ui-surface); border-color: var(--ui-border); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   Ayrito shell refinement
   Loaded last by the shared base. It intentionally owns only the application
   shell and shared components; feature pages keep their own content layout.
   ========================================================================== */
:root {
    --ay-primary: #2373f4;
    --ay-primary-hover: #155dd8;
    --ay-primary-soft: #eaf2ff;
    --ay-navy: #101828;
    --ay-navy-raised: #16233a;
    --ay-navy-muted: #aab8cc;
    --ay-page: #f5f7fb;
    --ay-surface: #ffffff;
    --ay-line: #dce4f0;
    --ay-text: #101828;
    --ay-copy: #667085;
    --ay-success: #12a675;
    --ay-warning: #e8a23c;
    --ay-danger: #e45454;
    --ay-space-1: 8px;
    --ay-space-2: 16px;
    --ay-space-3: 24px;
    --ay-space-4: 32px;
    --ay-radius: 14px;
    --ay-radius-sm: 9px;
    --ay-shadow: 0 5px 18px rgba(16, 24, 40, .06);
    --ay-shadow-raised: 0 14px 30px rgba(16, 24, 40, .10);

    --ui-page: var(--ay-page);
    --ui-surface: var(--ay-surface);
    --ui-surface-2: #f8fafc;
    --ui-surface-3: #eff4fa;
    --ui-border: var(--ay-line);
    --ui-text: var(--ay-text);
    --ui-text-strong: var(--ay-text);
    --ui-muted: var(--ay-copy);
    --ui-primary: var(--ay-primary);
    --ui-primary-hover: var(--ay-primary-hover);
    --ui-primary-soft: var(--ay-primary-soft);
    --ui-success: var(--ay-success);
    --ui-warning: var(--ay-warning);
    --ui-danger: var(--ay-danger);
    --ui-radius: var(--ay-radius);
    --ui-radius-sm: var(--ay-radius-sm);
    --ui-shadow: var(--ay-shadow);
    --ui-shadow-lg: var(--ay-shadow-raised);
    --ui-control-height: 44px;
    --ui-control-height-sm: 36px;

    --valex-page: var(--ay-page);
    --valex-panel: var(--ay-surface);
    --valex-panel-muted: #f8fafc;
    --valex-border: var(--ay-line);
    --valex-text: var(--ay-text);
    --valex-copy: var(--ay-copy);
    --valex-icon: var(--ay-copy);
    --valex-primary: var(--ay-primary);
    --valex-primary-deep: var(--ay-primary-hover);
    --valex-primary-soft: var(--ay-primary-soft);
    --valex-shadow: var(--ay-shadow);
    /* The header grid and the desktop rail read these same shell dimensions. */
    --valex-sidebar-width: 252px;
    --valex-header-height: 72px;
}

[data-bs-theme='dark'] {
    --ay-primary: #78a9ff;
    --ay-primary-hover: #a4c4ff;
    --ay-primary-soft: rgba(120, 169, 255, .17);
    --ay-navy: #0b1220;
    --ay-navy-raised: #121e32;
    --ay-navy-muted: #aebbd0;
    --ay-page: #0f1728;
    --ay-surface: #182338;
    --ay-line: #334662;
    --ay-text: #edf3fb;
    --ay-copy: #aebbd0;
    --ay-success: #58d2a6;
    --ay-warning: #f3c76e;
    --ay-danger: #ffa0aa;
    --ui-surface-2: #202d45;
    --ui-surface-3: #293752;
    --valex-panel-muted: #202d45;
}

/* Kanban keeps its nested surfaces dark as well; the light empty-state tint
   is intentionally replaced so an empty stage does not flash white. */
[data-bs-theme='dark'] .funnel-board-canvas .ft-column {
    background: #121d31 !important;
}
[data-bs-theme='dark'] .ft-column-empty {
    color: var(--ay-copy);
    background: rgba(32, 45, 69, .86);
    border-color: #405473;
}

html, body { min-width: 320px; background: var(--ay-page) !important; }
body, button, input, select, textarea { font-family: Vazirmatn, Tahoma, Arial, sans-serif !important; }
body { color: var(--ay-text); font-size: 14px; line-height: 1.75; }
.ayrito-skip-link { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 5000; padding: 8px 12px; color: #fff; background: var(--ay-primary); border-radius: var(--ay-radius-sm); }

.valex-shell, .valex-main { background: var(--ay-page) !important; }
.valex-sidebar {
    width: 252px !important;
    color: var(--ay-navy-muted) !important;
    background: linear-gradient(180deg, var(--ay-navy) 0%, #0d1727 100%) !important;
    border: 0 !important;
    box-shadow: none !important;
}
.valex-sidebar__scroll { padding: 16px 12px !important; scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.38) transparent; }
.valex-sidebar__scroll::-webkit-scrollbar { width: 6px; }
.valex-sidebar__scroll::-webkit-scrollbar-thumb { background: rgba(148,163,184,.38); border-radius: 999px; }
.sidebar-nav { padding: 0 !important; gap: 2px !important; }
.sidebar-nav .nav-link-custom,
.sidebar-nav .nav-parent > .nav-link-custom,
.sidebar-nav .nav-sub-item {
    min-height: 43px;
    margin: 0 !important;
    color: var(--ay-navy-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 9px !important;
    font-size: .84rem !important;
    font-weight: 560 !important;
    transition: color .16s ease, background .16s ease;
}
.sidebar-nav .nav-link-custom > i,
.sidebar-nav .nav-link-custom > svg,
.sidebar-nav .nav-parent > .nav-link-custom > i {
    width: 20px !important;
    height: auto !important;
    flex: 0 0 20px !important;
    color: #9db0c9 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 1.05rem !important;
    transform: none !important;
}
.sidebar-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.sidebar-nav .sidebar-icon,
.sidebar-nav .sidebar-chevron { display: block; fill: none; stroke: currentColor; }
.sidebar-nav .sidebar-chevron {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
    margin-inline-start: auto;
    color: #9db0c9 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    transition: transform .18s ease, color .18s ease;
}
.sidebar-nav .nav-parent.expanded > .nav-link-custom > .sidebar-chevron { transform: rotate(180deg); }
.sidebar-nav .nav-parent.expanded > .nav-link-custom > .sidebar-icon { color: #8cb8ff !important; }
.sidebar-nav .nav-link-custom:hover,
.sidebar-nav .nav-parent > .nav-link-custom:hover,
.sidebar-nav .nav-sub-item:hover { color: #f8fafc !important; background: rgba(255,255,255,.055) !important; }
.sidebar-nav .nav-link-custom.active,
.sidebar-nav .nav-sub-item.active {
    color: #fff !important;
    background: rgba(35, 115, 244, .16) !important;
    box-shadow: inset -3px 0 0 #69a2ff !important;
}
.sidebar-nav .nav-link-custom.active > i,
.sidebar-nav .nav-link-custom.active > svg { color: #8cb8ff !important; }
.sidebar-nav .nav-link-custom.active::before { display: none !important; }
.sidebar-nav .nav-parent.expanded > .nav-link-custom { color: #f8fafc !important; background: rgba(255,255,255,.04) !important; }
.sidebar-nav .nav-parent.expanded > .nav-link-custom > i { color: #8cb8ff !important; background: transparent !important; }
.sidebar-nav .sub-menu { margin: 3px 0 6px !important; padding: 3px 0 3px 0 !important; background: transparent !important; border-inline-start: 1px solid rgba(148,163,184,.20) !important; }
.sidebar-nav .nav-sub-item { min-height: 35px; padding-block: .4rem !important; padding-inline: .8rem !important; font-size: .77rem !important; }
.sidebar-nav .nav-sub-item { display: flex !important; align-items: center; gap: 8px; }
.sidebar-nav .nav-sub-item > span { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-nav .nav-sub-item.submenu-wrap-label > span { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.4; }
/*
 * Keep submenu icons independent from the hidden SVG symbol sprite.  Some
 * Chromium/PWA sessions skip rendering a <use> reference in this nested
 * context even though the same symbol works for top-level menu items.
 */
.sidebar-nav .nav-sub-item::before {
    content: '' !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    background-color: currentColor !important;
    -webkit-mask: var(--submenu-icon) center / contain no-repeat;
    mask: var(--submenu-icon) center / contain no-repeat;
}
.sidebar-nav .nav-sub-item {
    --submenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4v16m0-8h11m-4-4 4 4-4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-sub-item.submenu-icon-funnel {
    --submenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18l-7 8v5l-4 2v-7L3 5Z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-sub-item.submenu-icon-calendar {
    --submenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M7 3v4m10-4v4M3 10h18M8 14h3m-3 3h3m2-3h3m-3 3h3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-sub-item.submenu-icon-users {
    --submenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M3 20c.4-3.2 2.3-5 6-5s5.6 1.8 6 5M16 5.2a3 3 0 0 1 0 5.6M17 15c2.2.3 3.5 2 4 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-sub-item.submenu-icon-receipt {
    --submenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h14v18l-3-2-4 2-4-2-3 2V3Z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-sub-item.submenu-icon-tasks {
    --submenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='3' width='16' height='18' rx='2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='m8 12 2 2 4-4M8 7h8M8 17h5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-sub-item.submenu-icon-products {
    --submenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 8 4.5v9L12 21l-8-4.5v-9L12 3Z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='m4.5 7.7 7.5 4.2 7.5-4.2M12 12v9' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-sub-item.submenu-icon-wallet {
    --submenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h14a2 2 0 0 1 2 2v11H5a2 2 0 0 1-2-2V6a3 3 0 0 1 3-3h12v3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M15 13h5v4h-5a2 2 0 1 1 0-4Z' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-sub-item.submenu-icon-message {
    --submenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v11H8l-4 4V5Z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M8 9h8m-8 3h5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-sub-item.submenu-icon-chart {
    --submenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 19V5m0 14h17M7 15l3-4 3 2 5-6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-sub-item.submenu-icon-target {
    --submenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='%23000'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-sub-item.submenu-icon-form {
    --submenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='3' width='16' height='18' rx='2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8 7h8M8 11h2m3 0h3M8 15h2m3 0h3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-sub-item.submenu-icon-code {
    --submenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 7-5 5 5 5m6-10 5 5-5 5M14 4l-4 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-sub-item.submenu-icon-partner {
    --submenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M3 20c.5-3.3 2.5-5 6-5 2.2 0 3.8.7 4.8 2M16 8a3 3 0 1 0 0 6M15 15c3.5 0 5.1 1.7 6 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-sub-item.submenu-icon-settings {
    --submenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='m19 13 2 1-2 3-2-.8a8 8 0 0 1-2 1.2L14.7 20h-3.4l-.3-2.6a8 8 0 0 1-2-1.2L7 17l-2-3 2-1a8 8 0 0 1 0-2L5 10l2-3 2 .8a8 8 0 0 1 2-1.2L11.3 4h3.4l.3 2.6a8 8 0 0 1 2 1.2L19 7l2 3-2 1a8 8 0 0 1 0 2Z' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-sub-item.submenu-icon-sparkles {
    --submenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 1.4 4.6L18 9l-4.6 1.4L12 15l-1.4-4.6L6 9l4.6-1.4L12 3Z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-sub-item.submenu-icon-plus {
    --submenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-sub-item.submenu-icon-flow {
    --submenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='7' height='6' rx='1' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Crect x='14' y='14' width='7' height='6' rx='1' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M10 7h2a4 4 0 0 1 4 4v3' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-sub-item.submenu-icon-template {
    --submenu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='3' width='16' height='18' rx='2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8 7h8M8 11h8M8 15h5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-sub-item > .sidebar-sub-icon {
    display: none !important;
}
.nav-section-divider { margin: 12px 8px !important; background: rgba(148,163,184,.18) !important; }
.valex-sidebar__footer {
    margin: 12px !important;
    padding: 12px !important;
    color: var(--ay-navy-muted) !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(148,163,184,.14) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
}
.valex-sidebar__footer strong { color: #f8fafc !important; }
.valex-sidebar__footer-mark { color: #9fc2ff !important; background: rgba(35,115,244,.20) !important; box-shadow: none !important; }

/* The rail must shrink together with the shell.  The base stylesheet owns the
   toggle state, while this final theme layer owns the visual dimensions. */
@media (min-width: 992px) {
    .valex-sidebar-collapsed .valex-sidebar {
        flex-basis: 72px !important;
        width: 72px !important;
        min-width: 72px !important;
    }
    .valex-sidebar-collapsed .valex-sidebar__scroll { padding-inline: 8px !important; }
    .valex-sidebar-collapsed .sidebar-nav .nav-link-custom {
        justify-content: center;
        padding-inline: 0 !important;
        font-size: 0 !important;
    }
    .valex-sidebar-collapsed .sidebar-nav .nav-link-custom > .sidebar-icon {
        width: 22px !important;
        height: 22px !important;
        flex-basis: 22px !important;
    }
    .valex-sidebar-collapsed .nav-priority-items {
        width: 100%;
        align-items: stretch;
    }
    .valex-sidebar-collapsed .nav-priority-items > .nav-link-custom {
        display: flex !important;
        width: 100%;
        min-height: 46px;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .valex-sidebar-collapsed .nav-priority-items > .nav-link-custom > .sidebar-icon {
        display: block;
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px !important;
        margin: 0 auto;
    }
    .valex-sidebar-collapsed .sidebar-nav .nav-link-custom > span,
    .valex-sidebar-collapsed .sidebar-nav .sub-menu,
    .valex-sidebar-collapsed .sidebar-nav .sidebar-chevron,
    .valex-sidebar-collapsed .valex-sidebar__footer { display: none !important; }

}

/* Header tool order: profile copy stays RTL, but its avatar/chevron sequence
   must not be mirrored by the toolbar's RTL flex layout. */
.valex-profile-trigger { direction: ltr; }
.valex-profile-copy { direction: rtl; text-align: right; }

.valex-content { max-width: 1600px; padding: clamp(20px, 2vw, 32px) !important; }
.valex-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px !important;
    padding: clamp(16px, 1.65vw, 24px) !important;
    background: linear-gradient(112deg, var(--ay-surface) 0%, color-mix(in srgb, var(--ay-primary-soft) 56%, var(--ay-surface)) 100%) !important;
    border: 1px solid var(--ay-line) !important;
    border-radius: var(--ay-radius) !important;
    box-shadow: var(--ay-shadow) !important;
}
.valex-page-header__identity { display: flex; min-width: 0; align-items: center; gap: 12px; }
.valex-page-header__copy { min-width: 0; }
.valex-page-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* In RTL headers, keep the shared Back action after page-specific actions,
   which places it at the visual left edge. */
.valex-page-header__actions [data-history-back] { order: 10; }
.valex-page-header__icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 42px !important; height: 42px !important; color: var(--ay-primary) !important; background: var(--ay-primary-soft) !important; border-radius: 11px !important; }
.valex-page-header__title { font-size: clamp(1.28rem, 1.08rem + .4vw, 1.55rem) !important; font-weight: 760 !important; }
.valex-page-header__subtitle { display: block !important; margin: 4px 0 0 !important; color: var(--ay-copy) !important; font-size: .84rem !important; line-height: 1.65; }

.card, .modal-content, .dropdown-menu, .offcanvas, .accordion-item, .list-group { border-color: var(--ay-line) !important; border-radius: var(--ay-radius) !important; box-shadow: var(--ay-shadow) !important; }
.card { background: var(--ay-surface) !important; }
.card-header, .card-footer { padding: 16px 20px !important; background: transparent !important; border-color: var(--ay-line) !important; }
.card-body { padding: clamp(16px, 1.5vw, 24px) !important; }
.btn { min-height: 36px; border-radius: var(--ay-radius-sm) !important; font-size: .82rem; font-weight: 620; box-shadow: none !important; }
.btn-primary { --bs-btn-bg: var(--ay-primary); --bs-btn-border-color: var(--ay-primary); --bs-btn-hover-bg: var(--ay-primary-hover); --bs-btn-hover-border-color: var(--ay-primary-hover); }
.btn-success { --bs-btn-bg: var(--ay-success); --bs-btn-border-color: var(--ay-success); }
.btn-warning { --bs-btn-bg: var(--ay-warning); --bs-btn-border-color: var(--ay-warning); --bs-btn-color: #3f2b07; }
.btn-danger { --bs-btn-bg: var(--ay-danger); --bs-btn-border-color: var(--ay-danger); }
.btn-outline-secondary, .btn-light { color: var(--ay-text) !important; background: var(--ay-surface) !important; border-color: var(--ay-line) !important; }
/* Variant forms use this control to add another editable row: it is an action, not a success state. */
#addVariantBtn { color: #fff !important; background: var(--ay-primary) !important; border-color: var(--ay-primary) !important; }
#addVariantBtn:hover, #addVariantBtn:focus-visible { background: var(--ay-primary-hover) !important; border-color: var(--ay-primary-hover) !important; }
#resetBtn { color: var(--ay-text) !important; background: var(--ay-surface) !important; border-color: var(--ay-line) !important; }
.valex-page-header .btn-valex-primary,
.valex-page-header .valex-action--primary {
    color: #fff !important;
    background: var(--ay-primary) !important;
    border-color: var(--ay-primary) !important;
}
.valex-page-header .btn-valex-primary:hover,
.valex-page-header .btn-valex-primary:focus-visible,
.valex-page-header .valex-action--primary:hover,
.valex-page-header .valex-action--primary:focus-visible {
    color: #fff !important;
    background: var(--ay-primary-hover) !important;
    border-color: var(--ay-primary-hover) !important;
}
/* Legacy action aliases are ordinary navigation, so keep them neutral and visible. */
.valex-page-header .btn-valex-outline,
.valex-page-header .btn-valex-orange,
.valex-page-header .btn-valex-green,
.valex-page-header .btn-valex-purple,
.valex-page-header .btn-valex-teal,
.valex-page-header .valex-action--outline,
.valex-page-header .valex-action--orange,
.valex-page-header .valex-action--green,
.valex-page-header .valex-action--purple,
.valex-page-header .valex-action--teal {
    color: var(--ay-text) !important;
    background: var(--ay-surface) !important;
    border-color: var(--ay-line) !important;
}
.valex-page-header .btn-valex-outline:hover,
.valex-page-header .btn-valex-outline:focus-visible,
.valex-page-header .btn-valex-orange:hover,
.valex-page-header .btn-valex-orange:focus-visible,
.valex-page-header .btn-valex-green:hover,
.valex-page-header .btn-valex-green:focus-visible,
.valex-page-header .btn-valex-purple:hover,
.valex-page-header .btn-valex-purple:focus-visible,
.valex-page-header .btn-valex-teal:hover,
.valex-page-header .btn-valex-teal:focus-visible {
    color: var(--ay-primary) !important;
    background: var(--ay-primary-soft) !important;
    border-color: #a7c5ff !important;
}
.valex-page-header .btn-valex-danger,
.valex-page-header .valex-action--danger { color: #fff !important; background: var(--ay-danger) !important; border-color: var(--ay-danger) !important; }
.form-control, .form-select, .input-group-text { min-height: 44px !important; border-color: var(--ay-line) !important; border-radius: var(--ay-radius-sm) !important; font-size: .86rem !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--ay-primary) !important; box-shadow: 0 0 0 3px rgba(35,115,244,.18) !important; }
.table-responsive { border: 1px solid var(--ay-line); border-radius: var(--ay-radius-sm); }
.table > :not(caption) > * > * { padding: 12px 14px !important; vertical-align: middle; }
.table thead th { color: var(--ay-copy) !important; background: #f8fafc !important; font-size: .74rem; font-weight: 680; }
.table-hover > tbody > tr:hover > * { background: var(--ay-primary-soft) !important; }

.funnel-board-page { width: 100%; max-width: none !important; margin: 0 !important; }
.funnel-board-canvas {
    width: 100%;
    min-width: 0;
    direction: rtl;
    justify-content: flex-start;
    gap: 16px !important;
    padding: 2px 0 16px !important;
}
.funnel-board-canvas .ft-column {
    flex: 0 0 clamp(288px, 22vw, 328px);
    width: clamp(288px, 22vw, 328px);
    min-width: clamp(288px, 22vw, 328px);
    background: #f1f5f9 !important;
    border: 1px solid var(--ay-line) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}
.funnel-board-canvas .ft-column-head,
.funnel-board-canvas .ft-column:nth-child(n) .ft-column-head {
    min-height: 0 !important;
    padding: 10px 12px !important;
    background: var(--ay-surface) !important;
    border-top: 3px solid var(--ay-primary) !important;
    border-bottom: 1px solid var(--ay-line) !important;
}
.funnel-board-canvas .ft-column-count { min-width: 25px; padding: 3px 8px; color: var(--ay-primary) !important; background: var(--ay-primary-soft) !important; border-color: transparent !important; border-radius: 999px; }
.funnel-board-canvas .ft-column-body { padding: 10px !important; gap: 9px !important; background: transparent !important; }
.funnel-board-canvas .ft-card { padding: 12px !important; background: var(--ay-surface) !important; border: 1px solid var(--ay-line) !important; border-radius: 10px !important; box-shadow: 0 2px 6px rgba(16,24,40,.04) !important; }
.funnel-board-canvas .ft-card:hover { border-color: #a7c5ff !important; box-shadow: 0 8px 18px rgba(16,24,40,.08) !important; transform: translateY(-1px); }
.funnel-board-canvas .ft-deal-name { color: var(--ay-copy) !important; }
.ft-column-empty { display: grid; place-items: center; gap: 6px; min-height: 88px; padding: 14px; color: var(--ay-copy); text-align: center; background: rgba(255,255,255,.55); border: 1px dashed #cbd5e1; border-radius: 10px; font-size: .77rem; }
.ft-column-empty i { color: var(--ay-primary); font-size: 1.1rem; }
.funnel-stage-tools { padding: 10px 12px !important; background: var(--ay-surface) !important; border: 1px solid var(--ay-line) !important; border-radius: 11px !important; }
.funnel-stage-tools .stage-selection-actions { display: none; }
.funnel-stage-tools[data-selection-active='true'] .stage-selection-actions { display: inline-flex; }

/* Shared interaction and data-density polish for the CRM pages. */
.table thead th {
    color: var(--ay-copy) !important;
    background: var(--valex-panel-muted, #f8fafc) !important;
}
[data-bs-theme='dark'] .table thead th {
    color: var(--ay-copy) !important;
    background: var(--valex-panel-muted, #202d45) !important;
}
.table > :not(caption) > * > * {
    line-height: 1.55;
}
.table tbody tr {
    transition: background-color .16s ease;
}
.table-responsive {
    scrollbar-color: #98a6ba transparent;
    scrollbar-width: thin;
}
.table-responsive::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-thumb { background: #98a6ba; border-radius: 999px; }
[data-bs-theme='dark'] .table-responsive::-webkit-scrollbar-thumb { background: #627590; }
.table-top-scroll {
    height: 12px;
    margin-block: 0 6px;
    scrollbar-color: #98a6ba transparent;
}
.table-top-scroll::-webkit-scrollbar { height: 8px; }
.table-top-scroll::-webkit-scrollbar-thumb { background: #98a6ba; border-radius: 999px; }
[data-bs-theme='dark'] .table-top-scroll::-webkit-scrollbar-thumb { background: #627590; }
.table-top-scroll:focus-visible {
    outline: 2px solid var(--ay-primary);
    outline-offset: 2px;
}
.form-check-input {
    border-color: color-mix(in srgb, var(--ay-copy) 38%, var(--ay-line));
    cursor: pointer;
}
.form-check-input:checked {
    background-color: var(--ay-primary);
    border-color: var(--ay-primary);
}
.pagination .page-link {
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px !important;
}
.valex-content :where(.alert, .setup-field-guidance) {
    border-radius: var(--ay-radius-sm);
}
.valex-content :where(input, select, textarea, button, a):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--ay-primary) 72%, white);
    outline-offset: 2px;
}
.valex-content :where(.btn, .page-link, .nav-link-custom) {
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

@media (max-width: 767.98px) {
    .table > :not(caption) > * > * { padding: 10px 11px !important; }
    .table-top-scroll { height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .table tbody tr,
    .valex-content :where(.btn, .page-link, .nav-link-custom) { transition: none !important; }
}

@media (max-width: 991.98px) {
    .valex-header { min-height: 64px !important; }
    .valex-header__brand { min-width: auto; padding-inline-end: 0; background: transparent; border: 0; }
    .valex-mobile-sidebar { color: var(--ay-navy-muted) !important; background: var(--ay-navy) !important; }
    .valex-mobile-sidebar .offcanvas-header { background: var(--ay-navy-raised) !important; border-color: rgba(148,163,184,.18) !important; }
    .valex-mobile-sidebar .nav-link-custom > i { background: transparent !important; border: 0 !important; }
    .valex-mobile-sidebar .nav-link-custom.active { color: #fff !important; background: rgba(35,115,244,.16) !important; box-shadow: inset -3px 0 0 #69a2ff !important; }
    .valex-mobile-sidebar .nav-link-custom.active::before { display: none !important; }
}
@media (max-width: 767.98px) {
    .valex-header { padding-inline: 12px !important; }
    .valex-brand__name, .valex-search-trigger span, .valex-search-trigger kbd { display: none !important; }
    .valex-search-trigger { width: 38px !important; min-width: 38px; padding: 0 !important; justify-content: center; }
    .valex-search-trigger i { margin: 0 !important; }
    .valex-content { padding: 16px 12px 28px !important; }
    .valex-page-header { align-items: flex-start !important; flex-direction: column; gap: 12px; }
    .valex-page-header__actions { width: 100%; flex-wrap: wrap; }
    .funnel-board-canvas .ft-column { flex-basis: min(86vw, 320px); width: min(86vw, 320px); min-width: min(86vw, 320px); }
}

/* -------------------------------------------------------------------------
   Premium application header
   -------------------------------------------------------------------------
   The header is deliberately scoped to ``.valex-header`` so this final layer
   cannot restyle page cards, the sidebar, or legacy Bootstrap navigation.
*/
.valex-header {
    --header-bg: #101828;
    --header-surface: #1d2939;
    --header-text: #f9fafb;
    --header-muted: #aab8d0;
    --header-line: rgba(255, 255, 255, .08);
    --header-accent: #2373f4;
    display: grid !important;
    grid-template-columns: minmax(240px, 1fr) minmax(414px, 460px) minmax(240px, 1fr) !important;
    grid-template-rows: minmax(68px, 76px);
    align-items: center;
    min-height: 72px !important;
    padding: 0 clamp(16px, 2.4vw, 32px) !important;
    direction: ltr;
    color: var(--header-text) !important;
    background: var(--header-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--header-line) !important;
    box-shadow: 0 8px 24px rgba(5, 12, 24, .16) !important;
}
.valex-header__brand,
.valex-header__search,
.valex-header__tools {
    grid-row: 1;
    min-width: 0;
}
.valex-header__brand {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: stretch;
    min-width: 0;
    padding: 0;
    direction: ltr;
    background: transparent !important;
    border-inline-end: 0 !important;
}
.valex-brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    color: var(--header-text) !important;
    direction: rtl;
    text-decoration: none;
}
.valex-brand__name {
    color: var(--header-text) !important;
    font-family: Vazirmatn, Tahoma, sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -.035em !important;
    line-height: 1;
    white-space: nowrap;
}
.valex-header__search {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 0;
    direction: rtl;
}
.valex-search-trigger {
    display: flex !important;
    flex: 1 1 380px;
    width: auto;
    max-width: 420px;
    min-width: 0;
    min-height: 44px !important;
    align-items: center;
    gap: 11px;
    padding: 0 14px !important;
    color: var(--header-muted) !important;
    text-align: right;
    background: rgba(255, 255, 255, .055) !important;
    border: 1px solid var(--header-line) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.valex-search-trigger span { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.valex-search-trigger i { flex: 0 0 auto; margin: 0 !important; color: #89b6ff !important; font-size: 1rem !important; }
.valex-search-trigger kbd {
    flex: 0 0 auto;
    padding: 3px 7px !important;
    color: var(--header-muted) !important;
    background: rgba(255, 255, 255, .07) !important;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 6px !important;
    font: 600 .68rem Vazirmatn, sans-serif !important;
}
.valex-search-trigger:hover,
.valex-search-trigger:focus-visible {
    color: var(--header-text) !important;
    background: var(--header-surface) !important;
    border-color: rgba(35, 115, 244, .7) !important;
    box-shadow: 0 0 0 3px rgba(35, 115, 244, .17) !important;
    outline: 0;
}
.valex-header__tools {
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 0;
    direction: ltr;
}
.valex-header__tools .dropdown { display: inline-flex; align-items: center; }
.valex-header .valex-icon-btn {
    display: inline-grid !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    padding: 0 !important;
    place-items: center;
    color: var(--header-muted) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    font-size: 1.3rem !important;
    line-height: 1;
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.valex-header .valex-icon-btn:hover,
.valex-header .valex-icon-btn:focus-visible {
    color: #fff !important;
    background: rgba(255, 255, 255, .08) !important;
    border-color: var(--header-line) !important;
    outline: 0;
    transform: translateY(-1px);
}
.valex-header .valex-icon-btn:focus-visible,
.valex-search-trigger:focus-visible {
    box-shadow: 0 0 0 3px rgba(35, 115, 244, .22) !important;
}
.valex-pins-menu { min-width: 280px; }
.valex-header .valex-dropdown {
    color: var(--ui-text) !important;
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    box-shadow: 0 18px 40px rgba(5, 12, 24, .22) !important;
}
.valex-notification-dot { border-color: var(--header-bg) !important; }

@media (max-width: 1199.98px) and (min-width: 992px) {
    .valex-header { grid-template-columns: minmax(210px, 1fr) minmax(370px, 400px) minmax(210px, 1fr) !important; }
    .valex-header__tools { gap: 0; }
}
@media (max-width: 991.98px) {
    .valex-header {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 42vw) minmax(0, 1fr) !important;
        min-height: 68px !important;
        padding-inline: 14px !important;
    }
    .valex-header__brand { grid-column: 3; padding: 0; }
    .valex-header__search { grid-column: 2; display: flex !important; padding-inline: 0; }
    .valex-header__tools { grid-column: 1; gap: 1px; padding-inline: 0; }
    .valex-header__tools .valex-icon-btn { width: 40px !important; min-width: 40px; height: 40px !important; }
}
@media (max-width: 767.98px) {
    .valex-header {
        grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr) !important;
        min-height: 64px !important;
        padding-inline: 9px !important;
    }
    .valex-brand__name { display: inline !important; font-size: 1.12rem !important; letter-spacing: -.045em !important; }
    .valex-header__brand { gap: 3px; }
    .valex-header .valex-icon-btn { width: 40px !important; min-width: 40px; height: 40px !important; font-size: 1.15rem !important; }
    .valex-search-trigger { width: 40px !important; min-width: 40px; height: 40px; padding: 0 !important; justify-content: center; border-radius: 11px !important; }
    .valex-search-trigger span, .valex-search-trigger kbd { display: none !important; }
    .valex-search-trigger i { margin: 0 !important; font-size: 1.05rem !important; }
    .valex-header__tools .valex-icon-btn { width: 36px !important; min-width: 36px; }
    .valex-pins-menu { min-width: min(280px, calc(100vw - 24px)); }
}
@media (max-width: 390px) {
    .valex-header { padding-inline: 6px !important; }
    .valex-header__tools { gap: 0; }
    .valex-header__tools .valex-icon-btn { width: 34px !important; min-width: 34px; }
    .valex-header__brand { gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .valex-header .valex-icon-btn,
    .valex-search-trigger { transition: none !important; }
}

/* ========================================================================== 
   Ayrito Graphite & Champagne design system
   Shared shell and component contract. Keep feature markup/data untouched.
   ========================================================================== */
:root {
    color-scheme: light;

    --ayrito-header: #252C38;
    --ayrito-sidebar: #363E4B;
    --ayrito-sidebar-dark: #2B323D;
    --ayrito-primary: #A98B60;
    --ayrito-primary-light: #D6C2A1;
    --ayrito-primary-soft: #F3EADF;
    --ayrito-bg: #F5F3EF;
    --ayrito-surface: #FFFEFB;
    --ayrito-text: #202938;
    --ayrito-text-muted: #667085;
    --ayrito-border: #E7E1D7;
    --ayrito-success: #18A67E;
    --ayrito-warning: #D99A36;
    --ayrito-danger: #DC6268;
    --ayrito-info: #4388D3;
    --ayrito-radius-sm: 8px;
    --ayrito-radius-md: 12px;
    --ayrito-radius-lg: 16px;
    --ayrito-shadow-sm: 0 2px 8px rgba(32, 41, 56, .035);
    --ayrito-shadow-md: 0 6px 20px rgba(32, 41, 56, .055);
    --ayrito-shadow-lg: 0 12px 32px rgba(32, 41, 56, .08);
    --ayrito-transition: 180ms ease;

    --ay-primary: var(--ayrito-primary);
    --ay-primary-hover: #8E734B;
    --ay-primary-soft: var(--ayrito-primary-soft);
    --ay-navy: var(--ayrito-header);
    --ay-navy-raised: var(--ayrito-sidebar-dark);
    --ay-navy-muted: #D5D9DF;
    --ay-page: var(--ayrito-bg);
    --ay-surface: var(--ayrito-surface);
    --ay-line: var(--ayrito-border);
    --ay-text: var(--ayrito-text);
    --ay-copy: var(--ayrito-text-muted);
    --ay-success: var(--ayrito-success);
    --ay-warning: var(--ayrito-warning);
    --ay-danger: var(--ayrito-danger);
    --ay-radius: var(--ayrito-radius-lg);
    --ay-radius-sm: var(--ayrito-radius-sm);
    --ay-shadow: var(--ayrito-shadow-md);
    --ay-shadow-raised: var(--ayrito-shadow-lg);

    --ui-page: var(--ayrito-bg);
    --ui-surface: var(--ayrito-surface);
    --ui-surface-2: #FAF8F4;
    --ui-surface-3: #F3EEE6;
    --ui-border: var(--ayrito-border);
    --ui-text: var(--ayrito-text);
    --ui-text-strong: var(--ayrito-text);
    --ui-muted: var(--ayrito-text-muted);
    --ui-placeholder: #87909D;
    --ui-primary: var(--ayrito-primary);
    --ui-primary-hover: #8E734B;
    --ui-primary-soft: var(--ayrito-primary-soft);
    --ui-success: var(--ayrito-success);
    --ui-warning: var(--ayrito-warning);
    --ui-danger: var(--ayrito-danger);
    --ui-info: var(--ayrito-info);
    --ui-radius: var(--ayrito-radius-md);
    --ui-radius-sm: var(--ayrito-radius-sm);
    --ui-shadow: var(--ayrito-shadow-md);
    --ui-shadow-lg: var(--ayrito-shadow-lg);

    --valex-page: var(--ayrito-bg);
    --valex-panel: var(--ayrito-surface);
    --valex-panel-muted: #FAF8F4;
    --valex-border: var(--ayrito-border);
    --valex-text: var(--ayrito-text);
    --valex-copy: var(--ayrito-text-muted);
    --valex-icon: #B8A27F;
    --valex-primary: var(--ayrito-primary);
    --valex-primary-deep: #8E734B;
    --valex-primary-soft: var(--ayrito-primary-soft);
    --valex-shadow: var(--ayrito-shadow-md);
    --valex-sidebar-width: 264px;
    --valex-header-height: 74px;

    --app-bg: var(--ayrito-bg);
    --app-surface: var(--ayrito-surface);
    --app-surface-muted: #FAF8F4;
    --app-sidebar: var(--ayrito-sidebar);
    --app-sidebar-text: #F7F4EE;
    --app-sidebar-muted: #C2C8D0;
    --app-sidebar-hover: rgba(214, 194, 161, .12);
    --app-border: var(--ayrito-border);
    --app-text: var(--ayrito-text);
    --app-muted: var(--ayrito-text-muted);
    --app-primary: var(--ayrito-primary);
    --app-primary-hover: #8E734B;
    --app-primary-soft: var(--ayrito-primary-soft);
    --app-gold: var(--ayrito-primary);
    --app-gold-soft: var(--ayrito-primary-soft);
    --app-topbar: var(--ayrito-header);
    --app-topbar-text: #F7F4EE;

    --bs-primary: var(--ayrito-primary);
    --bs-primary-rgb: 169, 139, 96;
    --bs-success: var(--ayrito-success);
    --bs-success-rgb: 24, 166, 126;
    --bs-warning: var(--ayrito-warning);
    --bs-warning-rgb: 217, 154, 54;
    --bs-danger: var(--ayrito-danger);
    --bs-danger-rgb: 220, 98, 104;
    --bs-info: var(--ayrito-info);
    --bs-body-bg: var(--ayrito-bg);
    --bs-body-color: var(--ayrito-text);
    --bs-border-color: var(--ayrito-border);
}

[data-bs-theme='dark'] {
    color-scheme: dark;
    --ayrito-header: #171C24;
    --ayrito-sidebar: #232A35;
    --ayrito-sidebar-dark: #1C222C;
    --ayrito-bg: #1D232D;
    --ayrito-surface: #29313D;
    --ayrito-text: #F2EEE7;
    --ayrito-text-muted: #B5BECA;
    --ayrito-border: #414955;
    --ay-primary: var(--ayrito-primary-light);
    --ay-primary-hover: #E0CFB5;
    --ay-primary-soft: #3D382F;
    --ay-navy: var(--ayrito-header);
    --ay-navy-raised: var(--ayrito-sidebar-dark);
    --ay-navy-muted: #C1C9D3;
    --ay-page: var(--ayrito-bg);
    --ay-surface: var(--ayrito-surface);
    --ay-line: var(--ayrito-border);
    --ay-text: var(--ayrito-text);
    --ay-copy: var(--ayrito-text-muted);
    --ay-shadow: 0 6px 20px rgba(0, 0, 0, .20);
    --ay-shadow-raised: 0 12px 32px rgba(0, 0, 0, .28);
    --ui-page: var(--ayrito-bg);
    --ui-surface: var(--ayrito-surface);
    --ui-surface-2: #323B48;
    --ui-surface-3: #394452;
    --ui-border: var(--ayrito-border);
    --ui-text: var(--ayrito-text);
    --ui-text-strong: #FFFDF8;
    --ui-muted: var(--ayrito-text-muted);
    --ui-placeholder: #9BA6B3;
    --ui-primary: var(--ayrito-primary-light);
    --ui-primary-hover: #E0CFB5;
    --ui-primary-soft: #3D382F;
    --ui-success: #56D6AD;
    --ui-warning: #F0BB61;
    --ui-danger: #F18B91;
    --ui-info: #7DB4EC;
    --valex-page: var(--ayrito-bg);
    --valex-panel: var(--ayrito-surface);
    --valex-panel-muted: #323B48;
    --valex-border: var(--ayrito-border);
    --valex-text: var(--ayrito-text);
    --valex-copy: var(--ayrito-text-muted);
    --valex-icon: var(--ayrito-primary-light);
    --valex-primary: var(--ayrito-primary-light);
    --valex-primary-deep: #E0CFB5;
    --valex-primary-soft: #3D382F;
    --app-bg: var(--ayrito-bg);
    --app-surface: var(--ayrito-surface);
    --app-surface-muted: #323B48;
    --app-sidebar: var(--ayrito-sidebar);
    --app-sidebar-text: #F2EEE7;
    --app-sidebar-muted: #B5BECA;
    --app-sidebar-hover: rgba(214, 194, 161, .12);
    --app-border: var(--ayrito-border);
    --app-text: var(--ayrito-text);
    --app-muted: var(--ayrito-text-muted);
    --app-primary: var(--ayrito-primary-light);
    --app-primary-hover: #E0CFB5;
    --app-primary-soft: #3D382F;
    --app-gold: var(--ayrito-primary-light);
    --app-gold-soft: #3D382F;
    --app-topbar: var(--ayrito-header);
    --app-topbar-text: #F2EEE7;
    --bs-primary: var(--ayrito-primary-light);
    --bs-success: #56D6AD;
    --bs-warning: #F0BB61;
    --bs-danger: #F18B91;
    --bs-info: #7DB4EC;
    --bs-body-bg: var(--ayrito-bg);
    --bs-body-color: var(--ayrito-text);
    --bs-border-color: var(--ayrito-border);
}

html, body { background: var(--ayrito-bg) !important; color: var(--ayrito-text) !important; }
body.valex-app { overflow-x: hidden; }

/* Header: brand on the right, one sidebar control beside search, tools on the left. */
.valex-header {
    --header-bg: var(--ayrito-header);
    --header-surface: #303846;
    --header-text: #F7F4EE;
    --header-muted: #B9C0C9;
    --header-line: rgba(243, 234, 223, .14);
    --header-accent: var(--ayrito-primary-light);
    grid-template-columns: minmax(240px, 1fr) minmax(390px, 520px) minmax(240px, 1fr) !important;
    min-height: 74px !important;
    padding: 0 clamp(16px, 2.4vw, 32px) !important;
    color: var(--header-text) !important;
    background: linear-gradient(112deg, #252C38 0%, #2B323D 100%) !important;
    border-bottom: 1px solid rgba(243, 234, 223, .12) !important;
    box-shadow: 0 6px 18px rgba(22, 27, 36, .16) !important;
}
.valex-header__brand {
    grid-column: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
    min-width: 0 !important;
    padding: 0 !important;
    direction: rtl !important;
    background: transparent !important;
    border: 0 !important;
}
.valex-brand { gap: 10px; }
.valex-brand__symbol {
    display: inline-grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    color: var(--ayrito-primary-light);
    background: rgba(214, 194, 161, .13);
    border: 1px solid rgba(214, 194, 161, .42);
    border-radius: 11px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: 1.03rem;
}
.valex-brand__name { color: #F7F4EE !important; font-size: 25px !important; font-weight: 750 !important; letter-spacing: -.045em !important; }
.valex-header__search { gap: 10px; }
.valex-sidebar-toggle { order: 1; }
.valex-search-trigger { order: 2; }
.valex-header .valex-icon-btn,
.valex-header .valex-sidebar-toggle {
    min-width: 44px !important;
    width: 44px !important;
    height: 44px !important;
    color: var(--header-muted) !important;
    border-radius: 11px !important;
}
.valex-header .valex-sidebar-toggle { border: 1px solid transparent !important; }
.valex-header .valex-sidebar-toggle:hover,
.valex-header .valex-sidebar-toggle:focus-visible {
    color: var(--header-text) !important;
    background: rgba(214, 194, 161, .13) !important;
    border-color: rgba(214, 194, 161, .24) !important;
}
.valex-search-trigger {
    max-width: none;
    min-height: 44px !important;
    color: var(--header-muted) !important;
    background: rgba(255, 255, 255, .065) !important;
    border-color: rgba(243, 234, 223, .15) !important;
    border-radius: var(--ayrito-radius-md) !important;
}
.valex-search-trigger i { color: var(--ayrito-primary-light) !important; }
.valex-search-trigger kbd { color: #D7D0C5 !important; background: rgba(214, 194, 161, .12) !important; border-color: rgba(214, 194, 161, .20) !important; }
.valex-search-trigger:hover,
.valex-search-trigger:focus-visible {
    color: var(--header-text) !important;
    background: var(--header-surface) !important;
    border-color: var(--ayrito-primary-light) !important;
    box-shadow: 0 0 0 3px rgba(214, 194, 161, .16) !important;
}
.valex-header .valex-icon-btn:hover,
.valex-header .valex-icon-btn:focus-visible { color: var(--header-text) !important; background: rgba(214, 194, 161, .12) !important; border-color: rgba(214, 194, 161, .20) !important; }
.valex-header .valex-icon-btn:focus-visible,
.valex-search-trigger:focus-visible,
.valex-sidebar-toggle:focus-visible { outline: 2px solid var(--ayrito-primary-light) !important; outline-offset: 2px; }

/* Sidebar and its active state. */
.valex-sidebar,
.valex-mobile-sidebar { color: #C8CDD5 !important; background: var(--ayrito-sidebar) !important; }
.valex-sidebar { border-inline-start: 1px solid rgba(243, 234, 223, .10) !important; }
.valex-sidebar__scroll { padding: 18px 14px !important; scrollbar-color: rgba(214, 194, 161, .42) transparent; }
.sidebar-nav .nav-link-custom,
.sidebar-nav .nav-parent > .nav-link-custom,
.sidebar-nav .nav-sub-item { color: #C8CDD5 !important; border-radius: 10px !important; }
.sidebar-nav .nav-link-custom > i,
.sidebar-nav .nav-link-custom > svg,
.sidebar-nav .nav-parent > .nav-link-custom > i { color: #D0B88E !important; }
.sidebar-nav .nav-link-custom:hover,
.sidebar-nav .nav-parent > .nav-link-custom:hover,
.sidebar-nav .nav-sub-item:hover { color: #FFFDF8 !important; background: rgba(214, 194, 161, .10) !important; }
.sidebar-nav .nav-link-custom.active,
.sidebar-nav .nav-sub-item.active {
    color: #252C38 !important;
    background: var(--ayrito-primary-light) !important;
    box-shadow: inset -3px 0 0 #8E734B, 0 4px 12px rgba(20, 24, 32, .12) !important;
}
.sidebar-nav .nav-link-custom.active > i,
.sidebar-nav .nav-link-custom.active > svg,
.sidebar-nav .nav-sub-item.active::before { color: #252C38 !important; }
.sidebar-nav .nav-parent.expanded > .nav-link-custom { color: #FFFDF8 !important; background: rgba(43, 50, 61, .72) !important; }
.sidebar-nav .nav-parent.expanded > .nav-link-custom > .sidebar-icon { color: var(--ayrito-primary-light) !important; }
.sidebar-nav .sub-menu { border-inline-start-color: rgba(214, 194, 161, .26) !important; background: transparent !important; }
.sidebar-nav .nav-sub-item { color: #C1C7D0 !important; }
.sidebar-nav .nav-sub-item:hover { color: #FFFDF8 !important; background: rgba(214, 194, 161, .08) !important; box-shadow: none !important; }
.sidebar-nav .nav-section-divider { background: rgba(243, 234, 223, .14) !important; }
.valex-sidebar__footer { color: #C1C7D0 !important; background: var(--ayrito-sidebar-dark) !important; border-color: rgba(214, 194, 161, .18) !important; }
.valex-sidebar__footer strong { color: #FFFDF8 !important; }
.valex-sidebar__footer-mark { color: #252C38 !important; background: var(--ayrito-primary-light) !important; }
.valex-mobile-sidebar { --bs-offcanvas-width: min(310px, 88vw); box-shadow: 10px 0 30px rgba(16, 20, 27, .28); }
.valex-mobile-sidebar .offcanvas-header { background: var(--ayrito-sidebar-dark) !important; border-bottom-color: rgba(243, 234, 223, .12) !important; }
.valex-mobile-sidebar .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }

/* Main surfaces and shared controls. */
.valex-main, .valex-shell { background: var(--ayrito-bg) !important; }
.valex-content { max-width: 1600px; padding: clamp(20px, 2.2vw, 34px) !important; }
.valex-page-header { background: var(--ayrito-surface) !important; border-color: var(--ayrito-border) !important; border-radius: var(--ayrito-radius-lg) !important; box-shadow: var(--ayrito-shadow-sm) !important; }
.valex-page-header__icon { color: var(--ayrito-primary) !important; background: var(--ayrito-primary-soft) !important; }
.card, .modal-content, .dropdown-menu, .offcanvas, .accordion-item, .list-group { color: var(--ayrito-text) !important; background: var(--ayrito-surface) !important; border-color: var(--ayrito-border) !important; border-radius: var(--ayrito-radius-lg) !important; box-shadow: var(--ayrito-shadow-sm) !important; }
.card-header, .card-footer, .modal-header, .modal-footer { background: transparent !important; border-color: var(--ayrito-border) !important; }
.btn { min-height: 40px; border-radius: var(--ayrito-radius-sm) !important; }
.btn-primary { color: #252C38 !important; --bs-btn-bg: var(--ayrito-primary); --bs-btn-border-color: var(--ayrito-primary); --bs-btn-hover-bg: #8E734B; --bs-btn-hover-border-color: #8E734B; --bs-btn-active-bg: #806542; --bs-btn-active-border-color: #806542; }
.btn-outline-primary { color: #8E734B !important; --bs-btn-border-color: #C4AD88; --bs-btn-hover-color: #252C38; --bs-btn-hover-bg: var(--ayrito-primary-light); --bs-btn-hover-border-color: var(--ayrito-primary-light); }
.btn-success { --bs-btn-bg: var(--ayrito-success); --bs-btn-border-color: var(--ayrito-success); }
.btn-warning { --bs-btn-bg: var(--ayrito-warning); --bs-btn-border-color: var(--ayrito-warning); }
.btn-danger { --bs-btn-bg: var(--ayrito-danger); --bs-btn-border-color: var(--ayrito-danger); }
.form-control, .form-select, .input-group-text { min-height: 44px !important; color: var(--ayrito-text) !important; background: var(--ayrito-surface) !important; border-color: var(--ayrito-border) !important; border-radius: var(--ayrito-radius-sm) !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--ayrito-primary) !important; box-shadow: 0 0 0 3px rgba(169, 139, 96, .18) !important; }
.table thead th { color: var(--ayrito-text-muted) !important; background: #FAF8F4 !important; }
.table-hover > tbody > tr:hover > * { color: var(--ayrito-text) !important; background: var(--ayrito-primary-soft) !important; }
.dropdown-item:hover, .dropdown-item:focus { color: var(--ayrito-text) !important; background: var(--ayrito-primary-soft) !important; }
.pagination .page-link { color: #8E734B; background: var(--ayrito-surface); border-color: var(--ayrito-border); }
.pagination .page-item.active .page-link { color: #252C38; background: var(--ayrito-primary); border-color: var(--ayrito-primary); }
.text-primary, .link-primary { color: #8E734B !important; }
.text-warning { color: #A87320 !important; }
.bg-primary { background-color: var(--ayrito-primary) !important; }
.bg-primary.bg-opacity-10 { background-color: var(--ayrito-primary-soft) !important; }

/* Dark surfaces stay layered, rather than collapsing to black. */
[data-bs-theme='dark'] .table thead th { background: #323B48 !important; }
[data-bs-theme='dark'] .form-control, [data-bs-theme='dark'] .form-select, [data-bs-theme='dark'] .input-group-text { background: #323B48 !important; }
[data-bs-theme='dark'] .btn-outline-primary { color: var(--ayrito-primary-light) !important; }
[data-bs-theme='dark'] .text-warning { color: #F0BB61 !important; }
[data-bs-theme='dark'] .valex-page-header { background: #29313D !important; }

@media (max-width: 1199.98px) and (min-width: 992px) {
    .valex-header { grid-template-columns: minmax(210px, 1fr) minmax(360px, 430px) minmax(210px, 1fr) !important; }
}
@media (max-width: 991.98px) {
    .valex-header { grid-template-columns: minmax(0, 1fr) minmax(220px, 42vw) minmax(0, 1fr) !important; min-height: 68px !important; }
    .valex-header__brand { justify-content: space-between !important; }
    .valex-header .valex-sidebar-toggle { display: inline-grid !important; visibility: visible !important; opacity: 1 !important; }
    .valex-brand__symbol { width: 34px; height: 34px; flex-basis: 34px; }
    .valex-sidebar { display: none !important; }
}
@media (max-width: 767.98px) {
    .valex-header { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr) !important; min-height: 64px !important; padding-inline: 8px !important; }
    .valex-brand { gap: 7px; }
    .valex-brand__symbol { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; font-size: .9rem; }
    .valex-brand__name { font-size: 1.14rem !important; }
    .valex-header__search { gap: 8px; }
    .valex-header .valex-icon-btn, .valex-header .valex-sidebar-toggle, .valex-search-trigger { width: 44px !important; min-width: 44px !important; height: 44px !important; }
    .valex-search-trigger { padding: 0 !important; justify-content: center; }
    .valex-search-trigger span, .valex-search-trigger kbd { display: none !important; }
    .valex-search-trigger i { margin: 0 !important; }
    .valex-header__tools .valex-icon-btn { width: 38px !important; min-width: 38px !important; height: 40px !important; }
    .valex-content { padding: 16px 12px 28px !important; }
}
@media (max-width: 390px) {
    .valex-header { padding-inline: 5px !important; }
    .valex-header__tools .valex-icon-btn { width: 35px !important; min-width: 35px !important; }
}

/* ========================================================================== 
   Ayrito blue shell: reference-aligned header and sidebar
   The page markup and navigation tree remain shared; this final layer only
   owns the chrome so feature pages keep their existing contracts.
   ========================================================================== */
:root {
    --ay-header-start: #123d84;
    --ay-header-middle: #1350a7;
    --ay-header-end: #0b2b61;
    --ay-sidebar-top: #0d2a5c;
    --ay-sidebar-middle: #133f87;
    --ay-sidebar-bottom: #092550;
    --ay-sidebar-active: #235cc0;
    --ay-sidebar-active-hover: #2c6dd8;
    --ay-header-muted: #d0dffd;
    --ay-header-line: rgba(255,255,255,.12);
    --ay-sidebar-width: 260px;
    --ay-sidebar-collapsed-width: 76px;
    --ay-shell-radius: 12px;
}

[data-bs-theme='dark'] {
    --ay-header-start: #0b1e44;
    --ay-header-middle: #123b7a;
    --ay-header-end: #071a3b;
    --ay-sidebar-top: #081a3b;
    --ay-sidebar-middle: #0e2f68;
    --ay-sidebar-bottom: #06142f;
    --ay-sidebar-active: #1e58b5;
    --ay-sidebar-active-hover: #2b6cd5;
    --ay-header-muted: #c1d2ef;
    --ay-header-line: rgba(255,255,255,.14);
}

.valex-header {
    direction: ltr;
    grid-template-columns: minmax(300px, 1fr) minmax(390px, 610px) minmax(280px, 1fr) !important;
    min-height: 72px !important;
    height: 72px;
    padding: 0 clamp(14px, 2vw, 28px) !important;
    background: linear-gradient(100deg, var(--ay-header-start) 0%, var(--ay-header-middle) 52%, var(--ay-header-end) 100%) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ay-header-line) !important;
    box-shadow: 0 8px 22px rgba(7, 32, 79, .18) !important;
}
.valex-header__brand {
    grid-column: 3 !important;
    justify-content: flex-end !important;
    gap: 10px;
    direction: ltr !important;
    border: 0 !important;
}
.valex-brand { direction: rtl; gap: 0; }
.valex-brand__name { color: #fff !important; font-size: clamp(1.65rem, 2vw, 2rem) !important; font-weight: 850 !important; letter-spacing: -.06em !important; }
.valex-header__search {
    grid-column: 2 !important;
    justify-content: center;
    padding-inline: 12px !important;
    direction: rtl;
}
.valex-search-trigger {
    width: min(100%, 610px);
    height: 46px !important;
    color: var(--ay-header-muted) !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.valex-search-trigger span { text-align: right; }
.valex-search-trigger i { color: #9fc5ff !important; }
.valex-search-trigger kbd { color: #d9e5fb !important; background: rgba(255,255,255,.10) !important; }
.valex-search-trigger:hover,
.valex-search-trigger:focus-visible { color: #fff !important; background: rgba(255,255,255,.15) !important; border-color: rgba(159,197,255,.75) !important; box-shadow: 0 0 0 3px rgba(159,197,255,.14) !important; }
.valex-header__tools {
    grid-column: 1 !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    padding: 0 !important;
    direction: rtl !important;
}
.valex-header .valex-icon-btn,
.valex-header .valex-sidebar-toggle { color: #b9ccec !important; border-radius: 10px !important; }
.valex-header .valex-icon-btn:hover,
.valex-header .valex-icon-btn:focus-visible,
.valex-header .valex-sidebar-toggle:hover,
.valex-header .valex-sidebar-toggle:focus-visible { color: #fff !important; background: rgba(255,255,255,.12) !important; border-color: rgba(159,197,255,.25) !important; }
.valex-header__divider { width: 1px; height: 30px; margin-inline: 7px 5px; background: rgba(255,255,255,.18); }
.valex-profile-trigger { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 3px 6px 3px 9px; color: #fff; background: transparent; border: 1px solid transparent; border-radius: 12px; font: inherit; text-align: right; }
.valex-profile-trigger:hover, .valex-profile-trigger:focus-visible { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.14); }
.valex-profile-copy { display: grid; min-width: 88px; gap: 0; line-height: 1.45; }
.valex-profile-copy strong { color: #fff; font-size: .78rem; font-weight: 750; white-space: nowrap; }
.valex-profile-copy small { color: #c4d4ef; font-size: .68rem; white-space: nowrap; }
.valex-profile-chevron { color: #c4d4ef; font-size: .7rem; }
.valex-avatar { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; overflow: hidden; padding: 0; background: #dceaff; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,.16); }
.valex-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.valex-profile-menu { min-width: 250px; }
.valex-profile-menu__identity { display: grid; gap: 2px; padding: 8px 10px; }
.valex-profile-menu__identity strong { color: var(--ay-text); font-size: .85rem; }
.valex-profile-menu__identity small { color: var(--ay-copy); font-size: .72rem; direction: ltr; text-align: right; }
.valex-profile-menu .dropdown-item { display: flex; align-items: center; gap: 8px; }
.valex-profile-menu .dropdown-item i { width: 18px; text-align: center; }
.valex-notifications-menu { min-width: 310px; }
.valex-notifications-list { max-height: 330px; overflow-y: auto; }
.valex-notification-item { display: block; padding: 9px 10px; color: var(--ay-text); border-radius: 8px; text-decoration: none; }
.valex-notification-item:hover { color: var(--ay-text); background: var(--ay-primary-soft); }
.valex-notification-item strong, .valex-notification-item small { display: block; }
.valex-notification-item strong { font-size: .76rem; }
.valex-notification-item small { margin-top: 2px; color: var(--ay-copy); font-size: .68rem; }
.valex-notification-dot { top: 1px !important; right: 0 !important; min-width: 17px; height: 17px; background: #ed4b61 !important; border: 2px solid var(--ay-header-middle) !important; }

.valex-sidebar {
    flex-basis: var(--ay-sidebar-width) !important;
    width: var(--ay-sidebar-width) !important;
    min-width: var(--ay-sidebar-width) !important;
    margin-block-start: -3px !important;
    height: calc(100vh - var(--valex-header-height) + 3px) !important;
    background: linear-gradient(180deg, var(--ay-sidebar-top) 0%, var(--ay-sidebar-middle) 52%, var(--ay-sidebar-bottom) 100%) !important;
    border-inline-start: 1px solid rgba(255,255,255,.10) !important;
    border-inline-end: 0 !important;
    box-shadow: -8px 0 26px rgba(8, 27, 63, .18) !important;
}
.valex-sidebar__scroll { padding: 26px 14px 18px !important; scrollbar-color: rgba(159,197,255,.42) transparent; }
.sidebar-nav .nav-link-custom,
.sidebar-nav .nav-parent > .nav-link-custom,
.sidebar-nav .nav-sub-item { color: #dce8fc !important; border-radius: 11px !important; }
.sidebar-nav .nav-link-custom > i,
.sidebar-nav .nav-link-custom > svg,
.sidebar-nav .nav-parent > .nav-link-custom > i { color: #a9c6f5 !important; }
.sidebar-nav .nav-link-custom:hover,
.sidebar-nav .nav-parent > .nav-link-custom:hover,
.sidebar-nav .nav-sub-item:hover { color: #fff !important; background: rgba(255,255,255,.075) !important; }
.sidebar-nav .nav-link-custom.active,
.sidebar-nav .nav-sub-item.active { color: #fff !important; background: var(--ay-sidebar-active) !important; box-shadow: inset -3px 0 0 #8dbaff, 0 5px 14px rgba(2, 13, 39, .16) !important; }
.sidebar-nav .nav-link-custom.active > i,
.sidebar-nav .nav-link-custom.active > svg,
.sidebar-nav .nav-parent.expanded > .nav-link-custom > .sidebar-icon { color: #b5d2ff !important; }
.sidebar-nav .nav-parent.expanded > .nav-link-custom { color: #fff !important; background: rgba(255,255,255,.055) !important; }
.sidebar-nav .sub-menu { border-inline-start-color: rgba(159,197,255,.28) !important; }
.sidebar-nav .nav-section-divider { background: rgba(255,255,255,.16) !important; }
.valex-sidebar__footer { color: #c4d4ef !important; background: rgba(255,255,255,.055) !important; border-color: rgba(159,197,255,.16) !important; }
.valex-sidebar__footer strong { color: #fff !important; }
.valex-sidebar__footer-mark { color: #b8d3ff !important; background: rgba(35,115,244,.34) !important; }

@media (min-width: 992px) {
    .valex-sidebar { top: calc(var(--valex-header-height) - 3px) !important; }
    .valex-sidebar-collapsed .valex-sidebar { flex-basis: var(--ay-sidebar-collapsed-width) !important; width: var(--ay-sidebar-collapsed-width) !important; min-width: var(--ay-sidebar-collapsed-width) !important; }
    .valex-sidebar-collapsed .valex-sidebar__scroll { padding-inline: 8px !important; }
}

@media (max-width: 1199.98px) and (min-width: 992px) {
    .valex-header { grid-template-columns: minmax(260px, 1fr) minmax(340px, 500px) minmax(250px, 1fr) !important; }
    .valex-profile-copy { display: none; }
}

@media (max-width: 991.98px) {
    .valex-header { grid-template-columns: minmax(240px, 1fr) minmax(0, 1fr) !important; height: 68px; min-height: 68px !important; }
    .valex-header__brand { grid-column: 2 !important; }
    .valex-header__search { display: none; }
    .valex-header__tools { grid-column: 1 !important; }
    .valex-header__tools > .valex-profile-dropdown,
    .valex-header__tools > .valex-header__divider,
    .valex-header__tools > .valex-notifications-dropdown,
    .valex-header__tools > button:nth-child(1),
    .valex-header__tools > button:nth-child(2) { display: none !important; }
    .valex-header__tools .valex-icon-btn { width: 40px !important; min-width: 40px !important; height: 40px !important; }
    .valex-header__brand .valex-brand__name { font-size: 1.55rem !important; }
    .valex-sidebar { display: none !important; }
    .valex-mobile-sidebar { background: linear-gradient(180deg, var(--ay-sidebar-top), var(--ay-sidebar-bottom)) !important; }
    .valex-mobile-sidebar .offcanvas-header { background: rgba(255,255,255,.04) !important; border-bottom-color: rgba(255,255,255,.12) !important; }
    .valex-mobile-sidebar .valex-brand__name { color: #fff !important; }
    .valex-mobile-sidebar .btn-close { filter: invert(1) grayscale(1) brightness(2); }
    .valex-mobile-sidebar .sidebar-nav .nav-link-custom { color: #dce8fc !important; }
    .valex-mobile-sidebar .sidebar-nav .nav-link-custom.active { color: #fff !important; background: var(--ay-sidebar-active) !important; }
}

@media (max-width: 575.98px) {
    .valex-header { padding-inline: 8px !important; }
    .valex-header__tools { gap: 0 !important; }
    .valex-header__tools .valex-icon-btn { width: 36px !important; min-width: 36px !important; }
    .valex-header__brand .valex-brand__name { font-size: 1.35rem !important; }
    .valex-header__brand .valex-sidebar-toggle { width: 40px !important; min-width: 40px !important; }
}

/*
 * Collapsed desktop navigation
 *
 * Keep the rail compact while retaining access to the permission-aware nested
 * items under "بیشتر".  The submenu opens towards the content area (left in
 * RTL) so it never escapes the viewport from the right-hand sidebar.
 */
@media (min-width: 992px) {
    .valex-sidebar-collapsed .valex-sidebar .nav-parent { position: relative; }
    .valex-sidebar-collapsed .valex-sidebar .nav-parent.expanded > .sub-menu {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: calc(100% + 8px);
        z-index: 1060;
        display: block !important;
        width: 238px;
        max-height: min(70vh, 560px);
        margin: 0 !important;
        padding: 8px !important;
        overflow-y: auto;
        color: #dce8fc;
        background: linear-gradient(180deg, var(--ay-sidebar-top) 0%, var(--ay-sidebar-bottom) 100%) !important;
        border: 1px solid rgba(159, 197, 255, .22) !important;
        border-radius: 12px !important;
        box-shadow: -12px 16px 30px rgba(8, 27, 63, .28) !important;
    }
    .valex-sidebar-collapsed .valex-sidebar .nav-parent.expanded > .sub-menu .nav-link-custom,
    .valex-sidebar-collapsed .valex-sidebar .nav-parent.expanded > .sub-menu .nav-sub-item {
        justify-content: flex-start !important;
        min-height: 42px;
        padding-inline: 10px !important;
        font-size: .81rem !important;
    }
    .valex-sidebar-collapsed .valex-sidebar .nav-parent.expanded > .sub-menu .nav-link-custom > span,
    .valex-sidebar-collapsed .valex-sidebar .nav-parent.expanded > .sub-menu .nav-sub-item > span,
    .valex-sidebar-collapsed .valex-sidebar .nav-parent.expanded > .sub-menu .sidebar-chevron {
        display: block !important;
    }
    .valex-sidebar-collapsed .valex-sidebar .nav-parent.expanded > .sub-menu .sidebar-chevron {
        display: block !important;
        margin-inline-start: auto;
    }
    .valex-sidebar-collapsed .valex-sidebar .nav-parent.expanded > .sub-menu .sub-menu {
        position: static;
        display: none !important;
        width: auto;
        max-height: none;
        margin: 4px 0 4px !important;
        padding: 4px 0 !important;
        background: rgba(255, 255, 255, .045) !important;
        border: 0 !important;
        border-inline-start: 1px solid rgba(159, 197, 255, .28) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .valex-sidebar-collapsed .valex-sidebar .nav-parent.expanded > .sub-menu .nav-parent.expanded > .sub-menu {
        display: block !important;
    }
}

/* Pin the utility cluster to the left edge. Its visual left-to-right order is
   user → notifications → theme → pins → full screen, so RTL reading is the
   requested full-screen → … → user. */
.valex-header__tools {
    direction: ltr !important;
    justify-self: start !important;
    justify-content: flex-start !important;
}
.valex-header__tools .valex-profile-dropdown { order: 1; }
.valex-header__tools .valex-header__divider { order: 2; }
.valex-header__tools .valex-notifications-dropdown { order: 3; }
.valex-header__tools #valex-theme-toggle { order: 4; }
.valex-header__tools .valex-pins-dropdown { order: 5; }
.valex-header__tools #valex-fullscreen { order: 6; }

/* -------------------------------------------------------------------------
   Unified page colour system

   Navigation intentionally stays navy; content surfaces use a light blue
   canvas and semantic accents so status, actions and information are easy to
   scan without turning every control blue.
   ------------------------------------------------------------------------- */
:root {
    --ay-page: #f3f7fc;
    --ay-surface: #ffffff;
    --ay-surface-soft: #f8fbff;
    --ay-line: #dce7f4;
    --ay-text: #132b4f;
    --ay-copy: #60779a;
    --ay-primary: #2373f4;
    --ay-primary-hover: #155fd4;
    --ay-primary-soft: #e7f0ff;
    --ay-indigo: #7055cf;
    --ay-indigo-soft: #f0edff;
    --ay-success: #16a77a;
    --ay-success-soft: #e6f8f1;
    --ay-warning: #e18b24;
    --ay-warning-soft: #fff4e3;
    --ay-danger: #df5c68;
    --ay-danger-soft: #ffedf0;
    --ay-info: #1686b8;
    --ay-info-soft: #e6f6fc;
    --ay-shadow: 0 10px 28px rgba(36, 77, 135, .08);

    /* Legacy feature styles consume these aliases. */
    --ayrito-bg: var(--ay-page);
    --ayrito-surface: var(--ay-surface);
    --ayrito-text: var(--ay-text);
    --ayrito-text-muted: var(--ay-copy);
    --ayrito-border: var(--ay-line);
    --ayrito-primary: var(--ay-primary);
    --ayrito-primary-light: #b9d4ff;
    --ayrito-primary-soft: var(--ay-primary-soft);
    --ayrito-success: var(--ay-success);
    --ayrito-warning: var(--ay-warning);
    --ayrito-danger: var(--ay-danger);
}

body, .valex-main, .valex-shell { background: var(--ay-page) !important; }
.valex-page-header { background: linear-gradient(135deg, #fff 0%, #f2f7ff 100%) !important; }
.card, .modal-content, .dropdown-menu, .offcanvas, .accordion-item, .list-group,
.dashboard-panel, .dashboard-kpi { border-color: var(--ay-line) !important; box-shadow: var(--ay-shadow) !important; }
.card, .modal-content, .dropdown-menu, .accordion-item, .list-group,
.dashboard-panel, .dashboard-kpi { background: var(--ay-surface) !important; }
.table thead th { color: var(--ay-copy) !important; background: var(--ay-surface-soft) !important; }
.table-hover > tbody > tr:hover > * { background: var(--ay-primary-soft) !important; }
.btn-primary { color: #fff !important; --bs-btn-bg: var(--ay-primary); --bs-btn-border-color: var(--ay-primary); --bs-btn-hover-bg: var(--ay-primary-hover); --bs-btn-hover-border-color: var(--ay-primary-hover); }
.btn-success { --bs-btn-bg: var(--ay-success); --bs-btn-border-color: var(--ay-success); }
.btn-warning { --bs-btn-bg: var(--ay-warning); --bs-btn-border-color: var(--ay-warning); --bs-btn-color: #513006; }
.btn-danger { --bs-btn-bg: var(--ay-danger); --bs-btn-border-color: var(--ay-danger); }
.btn-info { --bs-btn-bg: var(--ay-info); --bs-btn-border-color: var(--ay-info); }
.text-primary, .link-primary { color: var(--ay-primary) !important; }
.text-success { color: var(--ay-success) !important; }
.text-warning { color: var(--ay-warning) !important; }
.text-danger { color: var(--ay-danger) !important; }
.bg-primary.bg-opacity-10 { background-color: var(--ay-primary-soft) !important; }
.bg-success.bg-opacity-10 { background-color: var(--ay-success-soft) !important; }
.bg-warning.bg-opacity-10 { background-color: var(--ay-warning-soft) !important; }
.bg-danger.bg-opacity-10 { background-color: var(--ay-danger-soft) !important; }

[data-bs-theme='dark'] {
    --ay-page: #101c31;
    --ay-surface: #172943;
    --ay-surface-soft: #1d3352;
    --ay-line: #2a466b;
    --ay-text: #eff6ff;
    --ay-copy: #a9bfdd;
    --ay-primary: #78adff;
    --ay-primary-hover: #a6c8ff;
    --ay-primary-soft: rgba(120, 173, 255, .16);
    --ay-indigo: #b6a6ff;
    --ay-indigo-soft: rgba(182, 166, 255, .16);
    --ay-success: #56d2a5;
    --ay-success-soft: rgba(86, 210, 165, .16);
    --ay-warning: #f4c56d;
    --ay-warning-soft: rgba(244, 197, 109, .16);
    --ay-danger: #ffa3ad;
    --ay-danger-soft: rgba(255, 163, 173, .16);
    --ay-info: #6ac7ed;
    --ay-info-soft: rgba(106, 199, 237, .16);
    --ayrito-primary-light: #92bbff;
}
[data-bs-theme='dark'] body, [data-bs-theme='dark'] .valex-main,
[data-bs-theme='dark'] .valex-shell { background: var(--ay-page) !important; }
[data-bs-theme='dark'] .valex-page-header,
[data-bs-theme='dark'] .card, [data-bs-theme='dark'] .modal-content,
[data-bs-theme='dark'] .dropdown-menu, [data-bs-theme='dark'] .accordion-item,
[data-bs-theme='dark'] .list-group, [data-bs-theme='dark'] .dashboard-panel,
[data-bs-theme='dark'] .dashboard-kpi { background: var(--ay-surface) !important; border-color: var(--ay-line) !important; }
[data-bs-theme='dark'] .table thead th { background: var(--ay-surface-soft) !important; }

/* Semantic actions need a distinct, polished hover state instead of the
   generic Bootstrap darkening.  The colour remains recognisable and the
   shadow supplies feedback without a distracting jump. */
.btn-success,
.btn-danger {
    transition: background-color .18s ease, border-color .18s ease,
        box-shadow .18s ease, transform .18s ease;
}
.btn-success:hover,
.btn-success:focus-visible {
    color: #e6fff4 !important;
    background: #0d8d66 !important;
    border-color: #0d8d66 !important;
    box-shadow: 0 7px 16px rgba(22, 167, 122, .24) !important;
    transform: translateY(-1px);
}
.btn-danger:hover,
.btn-danger:focus-visible {
    color: #fff0f2 !important;
    background: #c94758 !important;
    border-color: #c94758 !important;
    box-shadow: 0 7px 16px rgba(223, 92, 104, .24) !important;
    transform: translateY(-1px);
}
.btn-success:focus-visible,
.btn-danger:focus-visible { outline: 0; }
.btn-success:hover *, .btn-success:focus-visible * { color: #e6fff4 !important; }
.btn-danger:hover *, .btn-danger:focus-visible * { color: #fff0f2 !important; }

/* Outline status buttons are used for filter shortcuts throughout the panel.
   Feature-page rules often set their resting text colour, so the interactive
   colour must be explicit and important here. */
.btn-outline-success:hover,
.btn-outline-success:focus-visible {
    color: #e6fff4 !important;
    background: #0d8d66 !important;
    border-color: #0d8d66 !important;
    box-shadow: 0 7px 16px rgba(22, 167, 122, .22) !important;
    transform: translateY(-1px);
}
.btn-outline-danger:hover,
.btn-outline-danger:focus-visible {
    color: #fff0f2 !important;
    background: #c94758 !important;
    border-color: #c94758 !important;
    box-shadow: 0 7px 16px rgba(223, 92, 104, .22) !important;
    transform: translateY(-1px);
}
.btn-outline-success:hover *, .btn-outline-success:focus-visible * { color: #e6fff4 !important; }
.btn-outline-danger:hover *, .btn-outline-danger:focus-visible * { color: #fff0f2 !important; }

/* The performance report is analytical navigation, so use an indigo accent
   distinct from create/edit actions and keep its label/icon in sync. */
.btn-performance {
    color: var(--ay-indigo) !important;
    background: var(--ay-indigo-soft) !important;
    border-color: color-mix(in srgb, var(--ay-indigo) 42%, transparent) !important;
    transition: background-color .18s ease, border-color .18s ease,
        box-shadow .18s ease, color .18s ease, transform .18s ease;
}
.valex-page-header .btn-performance:hover,
.valex-page-header .btn-performance:focus-visible,
.btn-performance:hover,
.btn-performance:focus-visible {
    color: #f8f6ff !important;
    background: #5c43b5 !important;
    border-color: #5c43b5 !important;
    box-shadow: 0 7px 16px rgba(112, 85, 207, .26) !important;
    transform: translateY(-1px);
}
.btn-performance:hover *, .btn-performance:focus-visible * { color: #f8f6ff !important; }
@media (prefers-reduced-motion: reduce) {
    .btn-success, .btn-danger { transition: none; }
    .btn-success:hover, .btn-success:focus-visible,
    .btn-danger:hover, .btn-danger:focus-visible,
    .btn-outline-success:hover, .btn-outline-success:focus-visible,
    .btn-outline-danger:hover, .btn-outline-danger:focus-visible,
    .btn-performance:hover, .btn-performance:focus-visible { transform: none; }
}

/*
   System-wide interaction contract
   -------------------------------
   Legacy pages use a mixture of Bootstrap and Valex action classes.  Keep
   their hover feedback consistent: every actionable colour changes both its
   surface and every label/icon it contains.  This block deliberately lives
   last so a page-local resting style cannot leave the hover label unreadable.
*/
.valex-app .btn-primary,
.valex-app .btn-secondary,
.valex-app .btn-warning,
.valex-app .btn-info,
.valex-app .btn-outline-primary,
.valex-app .btn-outline-secondary,
.valex-app .btn-outline-warning,
.valex-app .btn-outline-info,
.valex-app .btn-light {
    transition: color .18s ease, background-color .18s ease, border-color .18s ease,
        box-shadow .18s ease, transform .18s ease;
}

.valex-app .btn-primary:hover,
.valex-app .btn-primary:focus-visible {
    color: #f5f9ff !important;
    background: #155fd4 !important;
    border-color: #155fd4 !important;
    box-shadow: 0 7px 16px rgba(35, 115, 244, .24) !important;
    transform: translateY(-1px);
}
.valex-app .btn-secondary:hover,
.valex-app .btn-secondary:focus-visible {
    color: #f7faff !important;
    background: #405776 !important;
    border-color: #405776 !important;
    box-shadow: 0 7px 16px rgba(64, 87, 118, .2) !important;
    transform: translateY(-1px);
}
.valex-app .btn-warning:hover,
.valex-app .btn-warning:focus-visible {
    color: #fff9ed !important;
    background: #b96f12 !important;
    border-color: #b96f12 !important;
    box-shadow: 0 7px 16px rgba(225, 139, 36, .22) !important;
    transform: translateY(-1px);
}
.valex-app .btn-info:hover,
.valex-app .btn-info:focus-visible {
    color: #f2fbff !important;
    background: #0d6e9a !important;
    border-color: #0d6e9a !important;
    box-shadow: 0 7px 16px rgba(22, 134, 184, .22) !important;
    transform: translateY(-1px);
}
.valex-app .btn-outline-primary:hover,
.valex-app .btn-outline-primary:focus-visible {
    color: #f5f9ff !important;
    background: #155fd4 !important;
    border-color: #155fd4 !important;
    box-shadow: 0 7px 16px rgba(35, 115, 244, .22) !important;
    transform: translateY(-1px);
}
.valex-app .btn-outline-secondary:hover,
.valex-app .btn-outline-secondary:focus-visible,
.valex-app .btn-light:hover,
.valex-app .btn-light:focus-visible {
    color: #233a58 !important;
    background: #e6eef8 !important;
    border-color: #9ab0cb !important;
    box-shadow: 0 7px 16px rgba(64, 87, 118, .14) !important;
    transform: translateY(-1px);
}
.valex-app .btn-outline-warning:hover,
.valex-app .btn-outline-warning:focus-visible {
    color: #fff9ed !important;
    background: #b96f12 !important;
    border-color: #b96f12 !important;
    box-shadow: 0 7px 16px rgba(225, 139, 36, .2) !important;
    transform: translateY(-1px);
}
.valex-app .btn-outline-info:hover,
.valex-app .btn-outline-info:focus-visible {
    color: #f2fbff !important;
    background: #0d6e9a !important;
    border-color: #0d6e9a !important;
    box-shadow: 0 7px 16px rgba(22, 134, 184, .2) !important;
    transform: translateY(-1px);
}
/* Bootstrap's dark outline keeps a dark label in dark mode unless overridden. */
[data-bs-theme='dark'] .valex-app .btn-outline-dark {
    --bs-btn-color: var(--ui-text);
    --bs-btn-border-color: var(--ui-muted);
    --bs-btn-hover-color: var(--ui-text-strong);
    --bs-btn-hover-bg: var(--ui-surface-3);
    --bs-btn-hover-border-color: var(--ui-muted);
    --bs-btn-active-color: var(--ui-text-strong);
    --bs-btn-active-bg: var(--ui-surface-3);
    --bs-btn-active-border-color: var(--ui-muted);
    --bs-btn-disabled-color: var(--ui-muted);
    --bs-btn-disabled-border-color: var(--ui-muted);
}

.valex-app .btn-dark:hover,
.valex-app .btn-dark:focus-visible,
.valex-app .btn-outline-dark:hover,
.valex-app .btn-outline-dark:focus-visible {
    color: #f7faff !important;
    background: #1c304b !important;
    border-color: #1c304b !important;
    box-shadow: 0 7px 16px rgba(16, 40, 72, .24) !important;
    transform: translateY(-1px);
}
.valex-app .btn-outline-light:hover,
.valex-app .btn-outline-light:focus-visible {
    color: #203752 !important;
    background: #f2f7ff !important;
    border-color: #f2f7ff !important;
    box-shadow: 0 7px 16px rgba(224, 235, 249, .2) !important;
    transform: translateY(-1px);
}
.valex-app .btn-primary:hover *, .valex-app .btn-primary:focus-visible *,
.valex-app .btn-secondary:hover *, .valex-app .btn-secondary:focus-visible *,
.valex-app .btn-warning:hover *, .valex-app .btn-warning:focus-visible *,
.valex-app .btn-info:hover *, .valex-app .btn-info:focus-visible *,
.valex-app .btn-outline-primary:hover *, .valex-app .btn-outline-primary:focus-visible *,
.valex-app .btn-outline-warning:hover *, .valex-app .btn-outline-warning:focus-visible *,
.valex-app .btn-outline-info:hover *, .valex-app .btn-outline-info:focus-visible * { color: inherit !important; }
.valex-app .btn-outline-secondary:hover *, .valex-app .btn-outline-secondary:focus-visible *,
.valex-app .btn-light:hover *, .valex-app .btn-light:focus-visible * { color: #233a58 !important; }
/* Icons and nested labels must never retain a stale page-level colour. */
.valex-app .btn:not(.btn-close):hover > :is(i, svg, span),
.valex-app .btn:not(.btn-close):focus-visible > :is(i, svg, span) { color: inherit !important; }

/* Header actions retain distinct meanings instead of becoming a row of blue controls. */
.valex-app .btn-valex-primary:hover, .valex-app .btn-valex-primary:focus-visible,
.valex-app .valex-action--primary:hover, .valex-app .valex-action--primary:focus-visible {
    color: #f5f9ff !important; background: #155fd4 !important; border-color: #155fd4 !important;
    box-shadow: 0 7px 16px rgba(35, 115, 244, .24) !important; transform: translateY(-1px);
}
.valex-app .btn-valex-green:hover, .valex-app .btn-valex-green:focus-visible,
.valex-app .valex-action--green:hover, .valex-app .valex-action--green:focus-visible {
    color: #e6fff4 !important; background: #0d8d66 !important; border-color: #0d8d66 !important;
    box-shadow: 0 7px 16px rgba(22, 167, 122, .24) !important; transform: translateY(-1px);
}
.valex-app .btn-valex-orange:hover, .valex-app .btn-valex-orange:focus-visible,
.valex-app .valex-action--orange:hover, .valex-app .valex-action--orange:focus-visible {
    color: #fff9ed !important; background: #b96f12 !important; border-color: #b96f12 !important;
    box-shadow: 0 7px 16px rgba(225, 139, 36, .22) !important; transform: translateY(-1px);
}
.valex-app .btn-valex-purple:hover, .valex-app .btn-valex-purple:focus-visible,
.valex-app .valex-action--purple:hover, .valex-app .valex-action--purple:focus-visible {
    color: #f8f6ff !important; background: #5c43b5 !important; border-color: #5c43b5 !important;
    box-shadow: 0 7px 16px rgba(112, 85, 207, .24) !important; transform: translateY(-1px);
}
.valex-app .btn-valex-teal:hover, .valex-app .btn-valex-teal:focus-visible,
.valex-app .valex-action--teal:hover, .valex-app .valex-action--teal:focus-visible {
    color: #f2fbff !important; background: #0d6e9a !important; border-color: #0d6e9a !important;
    box-shadow: 0 7px 16px rgba(22, 134, 184, .22) !important; transform: translateY(-1px);
}
.valex-app .btn-valex-danger:hover, .valex-app .btn-valex-danger:focus-visible,
.valex-app .valex-action--danger:hover, .valex-app .valex-action--danger:focus-visible {
    color: #fff0f2 !important; background: #c94758 !important; border-color: #c94758 !important;
    box-shadow: 0 7px 16px rgba(223, 92, 104, .24) !important; transform: translateY(-1px);
}
.valex-app .btn-valex-outline:not(.btn-performance):hover,
.valex-app .btn-valex-outline:not(.btn-performance):focus-visible,
.valex-app .valex-action--outline:hover, .valex-app .valex-action--outline:focus-visible {
    color: #155fd4 !important; background: #e9f1ff !important; border-color: #9abcf8 !important;
    box-shadow: 0 7px 16px rgba(35, 115, 244, .14) !important; transform: translateY(-1px);
}
.valex-app .btn-valex-primary:hover *, .valex-app .btn-valex-primary:focus-visible *,
.valex-app .btn-valex-green:hover *, .valex-app .btn-valex-green:focus-visible *,
.valex-app .btn-valex-orange:hover *, .valex-app .btn-valex-orange:focus-visible *,
.valex-app .btn-valex-purple:hover *, .valex-app .btn-valex-purple:focus-visible *,
.valex-app .btn-valex-teal:hover *, .valex-app .btn-valex-teal:focus-visible *,
.valex-app .btn-valex-danger:hover *, .valex-app .btn-valex-danger:focus-visible *,
.valex-app .valex-action--primary:hover *, .valex-app .valex-action--primary:focus-visible *,
.valex-app .valex-action--green:hover *, .valex-app .valex-action--green:focus-visible *,
.valex-app .valex-action--orange:hover *, .valex-app .valex-action--orange:focus-visible *,
.valex-app .valex-action--purple:hover *, .valex-app .valex-action--purple:focus-visible *,
.valex-app .valex-action--teal:hover *, .valex-app .valex-action--teal:focus-visible *,
.valex-app .btn-valex-danger:hover *, .valex-app .btn-valex-danger:focus-visible * { color: inherit !important; }

.valex-app .btn:focus-visible,
.valex-app [role='button']:focus-visible { outline: 3px solid rgba(35, 115, 244, .34); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .valex-app .btn, .valex-app .btn:hover, .valex-app .btn:focus-visible { transition: none; transform: none; }
}

/* Keep the mobile menu control visible and easy to spot above the header. */
@media (max-width: 991.98px) {
    .valex-header__brand {
        overflow: visible !important;
        min-width: 0 !important;
    }

    .valex-header__brand .valex-sidebar-toggle {
        display: inline-grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative;
        z-index: 2;
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        color: #fff !important;
        background: rgba(255, 255, 255, .14) !important;
        border: 1px solid rgba(255, 255, 255, .34) !important;
        border-radius: 11px !important;
    }

    .valex-header__brand .valex-sidebar-toggle:hover,
    .valex-header__brand .valex-sidebar-toggle:focus-visible {
        color: #fff !important;
        background: rgba(255, 255, 255, .23) !important;
        border-color: rgba(255, 255, 255, .60) !important;
    }

    .valex-header__brand .valex-sidebar-toggle i {
        display: block !important;
        font-size: 1.35rem !important;
        line-height: 1;
    }
}

@media (max-width: 575.98px) {
    .valex-header__brand .valex-sidebar-toggle {
        flex-basis: 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
    }
}

/* ============================================================================
   Central panel theme controls

   Edit these values to change the shared look of the management panel. The
   shared base loads this file after page-level styles, so these tokens are the
   final source for common colours and Bootstrap components across panel pages.
   ============================================================================ */
:root {
    --panel-page: #f5f7fb;
    --panel-surface: #ffffff;
    --panel-surface-muted: #f8fafc;
    --panel-border: #dce4f0;
    --panel-text: #101828;
    --panel-muted: #667085;
    --panel-primary: #2373f4;
    --panel-primary-hover: #155dd8;
    --panel-primary-soft: #eaf2ff;
    --panel-success: #12a675;
    --panel-warning: #e8a23c;
    --panel-danger: #e45454;
    --panel-radius: 14px;
    --panel-radius-control: 9px;
    --panel-shadow: 0 5px 18px rgba(16, 24, 40, .06);

    --ay-page: var(--panel-page);
    --ay-surface: var(--panel-surface);
    --ay-line: var(--panel-border);
    --ay-text: var(--panel-text);
    --ay-copy: var(--panel-muted);
    --ay-primary: var(--panel-primary);
    --ay-primary-hover: var(--panel-primary-hover);
    --ay-primary-soft: var(--panel-primary-soft);
    --ay-success: var(--panel-success);
    --ay-warning: var(--panel-warning);
    --ay-danger: var(--panel-danger);
    --ay-radius: var(--panel-radius);
    --ay-radius-sm: var(--panel-radius-control);
    --ay-shadow: var(--panel-shadow);
}

[data-bs-theme='dark'] {
    --panel-page: #0f1728;
    --panel-surface: #182338;
    --panel-surface-muted: #202d45;
    --panel-border: #334662;
    --panel-text: #edf3fb;
    --panel-muted: #aebbd0;
    --panel-primary: #78a9ff;
    --panel-primary-hover: #a4c4ff;
    --panel-primary-soft: rgba(120, 169, 255, .17);
    --panel-success: #58d2a6;
    --panel-warning: #f3c76e;
    --panel-danger: #ffa0aa;
    --panel-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}

.valex-app {
    color: var(--panel-text) !important;
    background: var(--panel-page) !important;
}

.valex-app .card,
.valex-app .modal-content,
.valex-app .dropdown-menu,
.valex-app .offcanvas,
.valex-app .accordion-item,
.valex-app .list-group {
    color: var(--panel-text) !important;
    background-color: var(--panel-surface) !important;
    border-color: var(--panel-border) !important;
    border-radius: var(--panel-radius) !important;
    box-shadow: var(--panel-shadow) !important;
}

.valex-app .form-control,
.valex-app .form-select,
.valex-app .input-group-text {
    color: var(--panel-text) !important;
    background-color: var(--panel-surface) !important;
    border-color: var(--panel-border) !important;
    border-radius: var(--panel-radius-control) !important;
}

.valex-app .table {
    --bs-table-color: var(--panel-text);
    --bs-table-border-color: var(--panel-border);
}

.valex-app .table thead th {
    color: var(--panel-muted) !important;
    background-color: var(--panel-surface-muted) !important;
}

.valex-app .btn-primary {
    --bs-btn-bg: var(--panel-primary);
    --bs-btn-border-color: var(--panel-primary);
    --bs-btn-hover-bg: var(--panel-primary-hover);
    --bs-btn-hover-border-color: var(--panel-primary-hover);
}

.valex-app .btn-outline-primary {
    --bs-btn-color: var(--panel-primary);
    --bs-btn-border-color: var(--panel-primary);
    color: var(--panel-primary) !important;
    border-color: var(--panel-primary) !important;
}

.valex-app .btn-success {
    --bs-btn-bg: var(--panel-success);
    --bs-btn-border-color: var(--panel-success);
}

.valex-app .btn-warning {
    --bs-btn-bg: var(--panel-warning);
    --bs-btn-border-color: var(--panel-warning);
}

.valex-app .btn-danger {
    --bs-btn-bg: var(--panel-danger);
    --bs-btn-border-color: var(--panel-danger);
}

/*
   Final responsive header contract
   Keep header sizing and breakpoint behavior here so older theme layers above
   cannot shrink touch targets or hide account and notification access.
*/
.valex-header .valex-icon-btn,
.valex-header .valex-sidebar-toggle,
.valex-header .valex-profile-trigger {
    min-width: 44px !important;
    min-height: 44px !important;
}

.valex-header .valex-icon-btn,
.valex-header .valex-sidebar-toggle {
    width: 44px !important;
    height: 44px !important;
}

.valex-header__tools {
    gap: 6px !important;
}

.valex-mobile-more-dropdown {
    display: none !important;
}

.valex-mobile-search-trigger { display: none !important; }

@media (max-width: 991.98px) {
    .valex-header {
        height: auto !important;
        min-height: 106px !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-rows: 52px 46px !important;
        row-gap: 4px;
        align-content: center;
        padding-block: 4px !important;
    }

    .valex-header__brand { grid-column: 2 !important; grid-row: 1 !important; }
    .valex-header__tools { grid-column: 1 !important; grid-row: 1 !important; gap: 2px !important; overflow: visible; }
    .valex-header__search { display: flex !important; grid-column: 1 / -1 !important; grid-row: 2 !important; min-width: 0; padding: 0 !important; }
    .valex-header__search .valex-search-trigger { width: 100% !important; max-width: none !important; min-height: 44px !important; height: 44px !important; justify-content: flex-start; padding-inline: 12px !important; }
    .valex-header__search .valex-search-trigger span { display: block !important; }
    .valex-header__search .valex-search-trigger kbd { display: none !important; }

    .valex-header__tools > .valex-profile-dropdown,
    .valex-header__tools > .valex-notifications-dropdown {
        display: inline-flex !important;
        align-items: center;
    }

    .valex-header__tools > .valex-header__divider {
        display: none !important;
    }

    .valex-header__tools .valex-profile-trigger {
        width: 44px !important;
        height: 44px !important;
        justify-content: center;
        padding: 0 !important;
    }

    .valex-header__tools .valex-profile-copy,
    .valex-header__tools .valex-profile-chevron {
        display: none !important;
    }

    .valex-header__tools .valex-avatar {
        display: grid;
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }
}

@media (max-width: 575.98px) {
    .valex-header {
        min-height: 60px !important;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) !important;
        grid-template-rows: 52px !important;
        row-gap: 0;
    }
    .valex-header__tools { gap: 0 !important; }
    .valex-header__search { display: none !important; }
    .valex-header__tools > button.valex-mobile-search-trigger { display: inline-grid !important; order: 3 !important; }

    .valex-header__tools #valex-fullscreen,
    .valex-header__tools #valex-theme-toggle,
    .valex-header__tools .valex-pins-dropdown {
        display: none !important;
    }

    .valex-header__tools .valex-mobile-more-dropdown {
        display: inline-flex !important;
        align-items: center;
        order: 4 !important;
    }

    .valex-header__tools > .valex-profile-dropdown { order: 1 !important; }
    .valex-header__tools > .valex-notifications-dropdown { order: 2 !important; }
    .valex-notifications-menu { min-width: min(310px, calc(100vw - 24px)); max-width: calc(100vw - 24px); }

    .valex-mobile-more-menu { min-width: min(240px, calc(100vw - 24px)); }
}

@media (min-width: 576px) {
    .valex-header .valex-header__tools > button.valex-mobile-search-trigger {
        display: none !important;
    }
}


/* Keep dense task lists readable without making each record feel like a card. */
.valex-app .ft-task-page .ft-tasks-table > thead th {
    padding: 11px 10px !important;
    color: var(--panel-muted) !important;
    background: var(--panel-surface-muted) !important;
    white-space: nowrap;
}
.valex-app .ft-task-page .ft-tasks-table > tbody > tr > td {
    padding: 10px !important;
    line-height: 1.55;
}
.valex-app .ft-task-page .ft-tasks-table > tbody > tr:nth-child(even) > * {
    background-color: color-mix(in srgb, var(--panel-surface-muted) 54%, transparent);
}
.valex-app .ft-task-page .ft-tasks-table > tbody > tr:hover > * {
    background-color: var(--panel-primary-soft) !important;
}
.valex-app .ft-task-page .ft-tasks-table .ft-cell-title { min-width: 170px; max-width: 250px; }
.valex-app .ft-task-page .ft-tasks-table .ft-cell-funnel { min-width: 150px; max-width: 220px; }
.valex-app .ft-task-page .ft-tasks-table .ft-cell-note { min-width: 215px; }
.valex-app .ft-task-page .ft-tasks-table .btn { min-height: 32px; border-radius: 7px !important; }
@media (max-width: 767.98px) {
    .valex-app .ft-task-page .ft-tasks-table > tbody > tr > td { padding: 9px 8px !important; }
}

/* Actionable setup notices shown above forms when a required list has no values. */
.setup-field-alerts {
    display: grid;
    gap: .75rem;
}
.setup-field-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    color: #7a4a00;
    background: linear-gradient(115deg, #fff8e7 0%, #fffdf7 100%);
    border: 1px solid #f4d18a;
    border-radius: 1rem;
    box-shadow: 0 8px 20px rgba(136, 90, 0, .08);
}
.setup-field-alert__icon {
    display: inline-grid;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    flex: 0 0 auto;
    color: #a76100;
    font-size: 1.2rem;
    background: #ffedbf;
    border-radius: .85rem;
}
.setup-field-alert__details {
    display: grid;
    gap: .2rem;
    min-width: 0;
}
.setup-field-alert__title { color: #754600; font-size: .92rem; }
.setup-field-alert__message { color: #8b5a13; font-size: .88rem; }
.setup-field-alert__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-height: 2.45rem;
    padding: .5rem .85rem;
    color: #6f4300;
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    background: #ffd778;
    border: 1px solid #eabc54;
    border-radius: .65rem;
    transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.setup-field-alert__button:hover,
.setup-field-alert__button:focus-visible {
    color: #5d3900;
    background: #ffcb54;
    box-shadow: 0 4px 12px rgba(151, 96, 0, .18);
    transform: translateY(-1px);
}
[data-bs-theme='dark'] .setup-field-alert {
    color: #ffd98c;
    background: linear-gradient(115deg, #3b2e16 0%, #2e2619 100%);
    border-color: #705523;
    box-shadow: none;
}
[data-bs-theme='dark'] .setup-field-alert__icon { color: #ffcf69; background: #574019; }
[data-bs-theme='dark'] .setup-field-alert__title { color: #ffdc94; }
[data-bs-theme='dark'] .setup-field-alert__message { color: #e7c787; }
[data-bs-theme='dark'] .setup-field-alert__button { color: #3e2a00; background: #f3bd47; border-color: #f3bd47; }
@media (max-width: 575.98px) {
    .setup-field-alert {
        grid-template-columns: auto minmax(0, 1fr);
        gap: .75rem;
        padding: .85rem;
    }
    .setup-field-alert__button { grid-column: 1 / -1; width: 100%; }
}

/* Expanded desktop sidebar: keep the "More" menu beside the rail, not in its flow. */
.sidebar-more-flyout {
    position: fixed !important;
    z-index: 1060 !important;
    display: block !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 14px 12px !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #dce8fc;
    background: linear-gradient(180deg, var(--ay-sidebar-top) 0%, var(--ay-sidebar-bottom) 100%) !important;
    border: 1px solid rgba(159, 197, 255, .22) !important;
    border-radius: 0 !important;
    box-shadow: -12px 16px 30px rgba(8, 27, 63, .28) !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(159,197,255,.42) transparent;
}
.sidebar-more-flyout > .nav-parent { position: static !important; }
.sidebar-more-flyout .nav-link-custom,
.sidebar-more-flyout .nav-sub-item {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    min-height: 42px;
    padding: 8px 10px !important;
    color: #dce8fc !important;
    border-radius: 9px !important;
    font-size: .81rem !important;
    text-decoration: none;
}
.sidebar-more-flyout .nav-link-custom > span,
.sidebar-more-flyout .nav-sub-item > span,
.sidebar-more-flyout .sidebar-chevron { display: block !important; }
.sidebar-more-flyout .nav-link-custom > i,
.sidebar-more-flyout .nav-link-custom > svg { color: #a9c6f5 !important; }
.sidebar-more-flyout .nav-link-custom > .sidebar-icon {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    fill: none !important;
    stroke: currentColor !important;
}
.sidebar-more-flyout .nav-link-custom > .sidebar-chevron {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
}
.sidebar-more-flyout .nav-link-custom:hover,
.sidebar-more-flyout .nav-sub-item:hover,
.sidebar-more-flyout .nav-parent.expanded > .nav-link-custom {
    color: #fff !important;
    background: rgba(255,255,255,.075) !important;
}
.sidebar-more-flyout .sidebar-chevron { margin-inline-start: auto; }
.sidebar-more-flyout .sub-menu {
    position: static !important;
    width: auto !important;
    max-height: none !important;
    margin: 4px 0 !important;
    padding: 4px 0 !important;
    background: rgba(255,255,255,.045) !important;
    border: 0 !important;
    border-inline-start: 1px solid rgba(159,197,255,.28) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.sidebar-more-flyout .sub-menu:not(.show) { display: none !important; }
.sidebar-more-flyout .sub-menu.show { display: block !important; }
.sidebar-more-flyout .nav-sub-item::before {
    content: '' !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    background-color: currentColor !important;
    -webkit-mask: var(--submenu-icon) center / contain no-repeat;
    mask: var(--submenu-icon) center / contain no-repeat;
}
.sidebar-more-flyout .nav-sub-item > .sidebar-sub-icon { display: none !important; }
.valex-sidebar .nav-more > .nav-link-custom > .sidebar-chevron {
    transform: rotate(90deg) !important;
}
@media (max-width: 991.98px) {
    .sidebar-more-flyout { display: none !important; }
}
@media (min-width: 992px) {
    /* Reserve a real second sidebar column instead of covering page content. */
    body.valex-more-open .valex-main {
        margin-inline-start: var(--sidebar-more-width, 344px);
        transition: margin-inline-start .22s ease;
    }
}