/* Mekari Pixel Icon token adapter — PHP/native JavaScript implementation.
 * Docs: https://docs.mekari.design/components/icon.html
 * sm=16px, md=20px, custom lg=24px. Outlines on a 24x24 grid.
 * It supersedes icon-accessibility.css's broad 20/24px minimums without resizing illustrations.
 */
:root {
 --talnt-icon-sm: 18px;
 --talnt-icon-md: 20px;
 --talnt-icon-lg: 24px;
 --talnt-icon-nav: 22px;
 --talnt-icon-default: var(--mk-colors-gray-600,#626b79);
 --talnt-icon-active: var(--mk-colors-blue-500,#0768EB);
 --talnt-icon-danger: var(--mk-colors-red-500,#c83e39);
}
html body svg[data-pixel-icon="true"] {
 --talnt-icon-size:var(--talnt-icon-md);
 display:inline-block;
 width:var(--talnt-icon-size) !important;
 height:var(--talnt-icon-size) !important;
 min-width:var(--talnt-icon-size) !important;
 min-height:var(--talnt-icon-size) !important;
 max-width:var(--talnt-icon-size) !important;
 max-height:var(--talnt-icon-size) !important;
 box-sizing:border-box;
 vertical-align:middle;
 flex:0 0 var(--talnt-icon-size);
 color:inherit;
 stroke-linecap:round;
 stroke-linejoin:round;
 overflow:visible;
}
html body svg[data-pixel-icon="true"][data-pixel-icon-size="sm"] {--talnt-icon-size:var(--talnt-icon-sm)}
html body svg[data-pixel-icon="true"][data-pixel-icon-size="md"] {--talnt-icon-size:var(--talnt-icon-md)}
html body svg[data-pixel-icon="true"][data-pixel-icon-size="lg"] {--talnt-icon-size:var(--talnt-icon-lg)}
html body svg[data-pixel-icon="true"][data-pixel-icon-size="nav"] {--talnt-icon-size:var(--talnt-icon-nav)}
html body svg[data-pixel-icon="true"][data-pixel-icon-variant="fill"] {stroke:none;fill:currentColor;}
/* Keep all idle nav icons neutral, only the active/aria-current navigation has blue. */
html body .jf-admin-sidebar nav a:not(.active):not([aria-current="page"]) svg[data-pixel-icon],
html body .jf-dash-sidebar nav a:not(.active):not([aria-current="page"]) svg[data-pixel-icon],
html body .jf-settings-sidebar nav a:not(.active):not([aria-current="page"]) svg[data-pixel-icon],
html body .jf-dash-mobile-nav a:not(.active):not([aria-current="page"]) svg[data-pixel-icon] {
 color:var(--talnt-icon-default)!important;
}
html body .jf-admin-sidebar nav a.active svg[data-pixel-icon],
html body .jf-admin-sidebar nav a[aria-current="page"] svg[data-pixel-icon],
html body .jf-dash-sidebar nav a.active svg[data-pixel-icon],
html body .jf-dash-sidebar nav a[aria-current="page"] svg[data-pixel-icon],
html body .jf-settings-sidebar nav a.active svg[data-pixel-icon],
html body .jf-settings-sidebar nav a[aria-current="page"] svg[data-pixel-icon],
html body .jf-dash-mobile-nav a.active svg[data-pixel-icon] {
 color:var(--talnt-icon-active)!important;
}
/* Status icons follow their semantic variant, independent of navigation state. */
html body [role="alert"] svg[data-pixel-icon], html body [data-pixel-icon-tone="danger"] svg[data-pixel-icon] {color:inherit;}
/* Icon Button retains the already tested 32/40px target; only the glyph gets normalized. */
html body [data-pixel-icon-button="true"] svg[data-pixel-icon="true"]{vertical-align:middle;pointer-events:none;}
@media (forced-colors:active){html body svg[data-pixel-icon="true"]{color:CanvasText;}}

/* UI alignment — only text/icon control surfaces, not select menus or illustrations. */
html body :is(.jf-admin-sidebar nav a,.jf-dash-sidebar nav a,.jf-settings-sidebar nav a,
 .jf-dash-mobile-nav a,.jf-user-dropdown a,.jf-admin-account-menu a,
 .jf-nav-user,.jf-admin-user-trigger,.nav-text-action) {
 align-items:center;column-gap:10px;
}
html body :is(.jf-admin-sidebar,.jf-dash-sidebar,.jf-settings-sidebar,.jf-dash-mobile-nav)
 :is(a,button) > :is(span,svg[data-pixel-icon]) {align-self:center;}
html body :is(.jf-user-dd-icon,.nav-action-icon,.nav-chevron,.jf-admin-user-chevron)
 {display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;}
html body :is(.jf-user-dd-icon,.nav-action-icon) {min-width:24px;min-height:24px;}
html body :is(.nav-chevron,.jf-admin-user-chevron) svg[data-pixel-icon] {
 --talnt-icon-size:20px;vertical-align:middle;
}
html body :is(.jf-user-dropdown,.jf-admin-account-menu) a svg[data-pixel-icon] {align-self:center;}
html body :is(button,a):not([data-pixel-icon-button="true"]) > svg[data-pixel-icon] {
 vertical-align:-.14em;flex-shrink:0;
}
html body .px-modal .px-modal__header :is(svg[data-pixel-icon],.modal-ico),
html body .px-modal .px-modal__footer svg[data-pixel-icon] {vertical-align:middle;flex-shrink:0;}

/* v3 disclosure contract: icon shape depends on ARIA state, never on label content.
   Account menu indicator has no SVG node that an old normalizer can turn into a building. */
html body .jf-user-menu .nav-chevron,
html body .jf-admin-user-trigger .jf-admin-user-chevron {
 display:inline-flex !important; align-items:center !important; justify-content:center !important;
 width:22px !important; height:22px !important; min-width:22px !important;
 flex:0 0 22px !important; line-height:1 !important; color:var(--talnt-icon-default);
}
html body .jf-user-menu .nav-chevron .px-account-chevron,
html body .jf-admin-user-trigger .jf-admin-user-chevron .px-account-chevron {
 display:block; box-sizing:border-box; width:11px; height:11px;
 border:solid currentColor; border-width:0 2px 2px 0; border-radius:1px;
 transform:translateY(-3px) rotate(45deg); pointer-events:none;
}
html body .jf-user-menu .nav-chevron,
html body .jf-admin-user-trigger .jf-admin-user-chevron {transition:transform .18s ease;}
html body .jf-user-menu.is-open .nav-chevron,
html body .jf-admin-user-trigger[aria-expanded="true"] .jf-admin-user-chevron {transform:rotate(180deg);}
html body .filter-chevron-v062 svg[data-pixel-icon-role="disclosure"] {
 --talnt-icon-size:20px;
 vertical-align:middle;
}