/* ─────────────────────────────────────────────────────────────────────
   Silk icons → FontAwesome glyphs (Triton + Onyx only)

   Ext.NET's Icon="Add" / "Star" / "Help" / etc. generates two things:
     1. a CSS class on the icon span: e.g. .icon-add
     2. an injected (!important) rule: .icon-add { background-image:
        url("/icons/add-png/ext.axd"); }

   This file overrides those bg-image rules with FontAwesome glyphs
   rendered via the icon span's ::before, so existing markup keeps
   working but the rendered icon is crisp at any zoom, scalable, and
   recolorable through `color`.

   All rules are nested under :is(.x-theme-onyx, .x-theme-triton) for
   two reasons:
     1. Scope — the file is loaded only for these themes anyway, but
        the nesting documents that intent in source.
     2. Specificity — Ext.NET's injected bg-image rule has !important
        at specificity (0,1,0); unprefixed .icon-add would tie and
        lose to source order. The nested form composes to (0,2,0)
        which beats Ext.NET's !important.

   Requires CSS nesting (Chrome 112+, Firefox 117+, Safari 16.5+).
   ───────────────────────────────────────────────────────────────────── */

:is(.x-theme-onyx, .x-theme-triton) {

    /* Wipe Ext.NET's injected background-image for every mapped icon — but NOT on
       <img> icon carriers. Ext.NET Labels render Icon="..." as <img class="x-label-icon
       icon-*">; an <img> is a replaced element that can't show the ::before glyph below,
       so excluding it here lets the <img> keep Ext.NET's own per-icon Silk PNG and stay
       visible in Triton/Onyx — generic across every Label icon, no per-icon rule. The
       :is()-wrapped list + :not() keeps specificity above Ext.NET's injected !important. */
    :is(.icon-accept, .icon-add, .icon-anchor, .icon-arrowdown,
    .icon-arrowleft, .icon-arrowrefresh, .icon-arrowright, .icon-arrowundo,
    .icon-arrowup, .icon-attach, .icon-basket, .icon-bellerror,
    .icon-book, .icon-box, .icon-brick, .icon-bricks,
    .icon-building, .icon-bulletgo, .icon-calculator, .icon-cancel,
    .icon-cart, .icon-chartbar, .icon-chartline, .icon-clipboard,
    .icon-clock, .icon-cog, .icon-cogedit, .icon-coins,
    .icon-comment, .icon-comments, .icon-computer, .icon-connect,
    .icon-controlplay, .icon-controlpower, .icon-controlstop, .icon-cross,
    .icon-database, .icon-delete, .icon-disk, .icon-doorin,
    .icon-error, .icon-errorgo, .icon-exclamation,
    .icon-feed, .icon-find,
    .icon-flagblack, .icon-flagblue, .icon-flaggreen, .icon-flaggrey,
    .icon-flagred, .icon-flagwhite, .icon-flagyellow,
    .icon-folder, .icon-group,
    .icon-help, .icon-hourglass, .icon-house, .icon-information,
    .icon-key, .icon-lightning, .icon-link, .icon-lock,
    .icon-lockopen, .icon-lorry, .icon-magnifier, .icon-mail, .icon-map,
    .icon-money, .icon-neighbourhood, .icon-newspaper, .icon-outline,
    .icon-package, .icon-pageexcel, .icon-pencil, .icon-phone,
    .icon-rainbow, .icon-report, .icon-star, .icon-stop,
    .icon-table, .icon-tag, .icon-tagblue, .icon-telephone,
    .icon-thumbdown, .icon-thumbup, .icon-tick, .icon-time,
    .icon-transmit, .icon-user, .icon-useradd, .icon-userdelete,
    .icon-vcard, .icon-weathersun, .icon-world, .icon-wrench):not(img.x-label-icon)
    {
        background-image: none !important;
    }

    /* Shared layout for the ::before glyph carrier. The Ext.NET icon span
       is sized to whatever the host expects (16px in buttons, larger in
       menus, smaller in close-buttons, etc.). We render the FA glyph as
       an inline-flex box that fills the slot and centers content via
       flexbox — vertically-centered in any font / context, color inherited
       so the glyph tints with the surrounding text. */
    .icon-accept::before, .icon-add::before, .icon-anchor::before, .icon-arrowdown::before,
    .icon-arrowleft::before, .icon-arrowrefresh::before, .icon-arrowright::before, .icon-arrowundo::before,
    .icon-arrowup::before, .icon-attach::before, .icon-basket::before, .icon-bellerror::before,
    .icon-book::before, .icon-box::before, .icon-brick::before, .icon-bricks::before,
    .icon-building::before, .icon-bulletgo::before, .icon-calculator::before, .icon-cancel::before,
    .icon-cart::before, .icon-chartbar::before, .icon-chartline::before, .icon-clipboard::before,
    .icon-clock::before, .icon-cog::before, .icon-cogedit::before, .icon-coins::before,
    .icon-comment::before, .icon-comments::before, .icon-computer::before, .icon-connect::before,
    .icon-controlplay::before, .icon-controlpower::before, .icon-controlstop::before, .icon-cross::before,
    .icon-database::before, .icon-delete::before, .icon-disk::before, .icon-doorin::before,
    .icon-error::before, .icon-errorgo::before, .icon-exclamation::before,
    .icon-feed::before, .icon-find::before,
    .icon-flagblack::before, .icon-flagblue::before, .icon-flaggreen::before, .icon-flaggrey::before,
    .icon-flagred::before, .icon-flagwhite::before, .icon-flagyellow::before,
    .icon-folder::before, .icon-group::before,
    .icon-help::before, .icon-hourglass::before, .icon-house::before, .icon-information::before,
    .icon-key::before, .icon-lightning::before, .icon-link::before, .icon-lock::before,
    .icon-lockopen::before, .icon-lorry::before, .icon-magnifier::before, .icon-mail::before, .icon-map::before,
    .icon-money::before, .icon-neighbourhood::before, .icon-newspaper::before, .icon-outline::before,
    .icon-package::before, .icon-pageexcel::before, .icon-pencil::before, .icon-phone::before,
    .icon-rainbow::before, .icon-report::before, .icon-star::before, .icon-stop::before,
    .icon-table::before, .icon-tag::before, .icon-tagblue::before, .icon-telephone::before,
    .icon-thumbdown::before, .icon-thumbup::before, .icon-tick::before, .icon-time::before,
    .icon-transmit::before, .icon-user::before, .icon-useradd::before, .icon-userdelete::before,
    .icon-vcard::before, .icon-weathersun::before, .icon-world::before, .icon-wrench::before
    {
        font-family: FontAwesome;
        color: inherit;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        vertical-align: middle;
    }

    /* Buttons: center the glyph carrier geometrically (flexbox) instead of letting the
       vertical-align:middle above place it. "middle" anchors the carrier to the host
       font's baseline + ½ x-height (Open Sans, large descent), a fractional pixel that
       snaps to the device-pixel grid differently per zoom — so the glyph looked centered
       at 100% (DPR 1.25) but rode to the bottom at 90% (DPR 1.125, in active use). Flex
       centering is font-metric- and DPR-independent. The carrier is height:100% of the
       fixed icon slot, so align-items:center resolves to a zero offset that holds at any
       zoom. Composes to (0,3,0) via the :is() wrapper, beating the base
       .x-btn-icon > .x-btn-icon-el { display:block } in onyx-all_1.css; flex items ignore
       vertical-align, so the rule above stays inert here and unchanged everywhere else. */
    .x-btn-icon > .x-btn-icon-el {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Pure geometric centering reads ~0.4px high at 100% zoom (the glyph's optical centre
       sits slightly above its em-box centre). This empirical sub-pixel nudge re-centers it
       so it reads as centered at both 90% and 100% — the consistent-across-zoom compromise;
       no single static offset is pixel-perfect at every DPR. */
    .x-btn-icon > .x-btn-icon-el::before {
        transform: translateY(0.4px);
    }

    /* Window / panel / fieldset header title icons (.x-title-icon) are the same story as the
       buttons above: the base theme gives the icon box display:inline-block and the shared
       ::before adds vertical-align:middle, so the glyph is placed by the host font's baseline +
       ½ x-height inside the box — the DPR-fragile path. Live metrics (DPR 1.25) proved the icon
       box is already pixel-centered against the title text (equal centreY); only the glyph ink
       rode off-centre. Flex-center the carrier so the glyph centres geometrically, mirroring the
       button fix. Composes to (0,2,0) via the :is() wrapper, beating the base
       .x-title-icon { display:inline-block } at (0,1,0); the wrap (table-cell / table-row) owns
       the icon-to-text gap and any top/bottom/rotated layout, so this only re-centres the glyph. */
    .x-title-icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .x-title-icon::before {
        transform: translateY(1.5px);
    }

    /* Combo dropdown items put the icon class on the full-width row
       (<div class="icon-combo-item {IconCls}">{text}</div>), not on a 16px
       slot, so the width:100% rule above would flex-center the glyph in the
       middle of the row. The base .icon-combo-item rule reserves a 24px left
       gutter for the icon (padding-left:24px; background at 3px) — pin the
       glyph into that gutter so it sits left of the text, matching the Silk
       PNG it replaces. Applies to every glyph used in a combo item (e.g. the
       project/ticket priority flags and the alert-severity flags). */
    .icon-combo-item {
        position: relative;
    }
    .icon-combo-item::before {
        position: absolute;
        left: 3px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
    }

    /* ── Glyph mappings (Silk Icon → FontAwesome codepoint) ───────── */

    .icon-accept::before   { content: "\f00c"; color: var(--app-success); } /* fa-check — green tick */
    .icon-add::before      { content: "\f067"; transform: translateY(1px); } /* fa-plus */
    .icon-anchor::before   { content: "\f13d"; } /* fa-anchor */
    .icon-arrowdown::before   { content: "\f063"; } /* fa-arrow-down */
    .icon-arrowleft::before   { content: "\f060"; } /* fa-arrow-left */
    .icon-arrowrefresh::before   { content: "\f021"; } /* fa-refresh */
    .icon-arrowright::before   { content: "\f061"; } /* fa-arrow-right */
    .icon-arrowundo::before   { content: "\f0e2"; } /* fa-undo */
    .icon-arrowup::before  { content: "\f062"; } /* fa-arrow-up */
    .icon-attach::before   { content: "\f0c6"; } /* fa-paperclip */
    .icon-basket::before   { content: "\f291"; } /* fa-shopping-basket */
    .icon-bellerror::before   { content: "\f0f3"; } /* fa-bell */
    .icon-book::before     { content: "\f02d"; } /* fa-book */
    .icon-box::before      { content: "\f1b2"; } /* fa-cube */
    .icon-brick::before    { content: "\f009"; } /* fa-th-large */
    .icon-bricks::before   { content: "\f00a"; } /* fa-th */
    .icon-building::before { content: "\f1ad"; } /* fa-building */
    .icon-bulletgo::before { content: "\f061"; } /* fa-arrow-right */
    .icon-calculator::before { content: "\f1ec"; } /* fa-calculator */
    .icon-cancel::before   { content: "\f05e"; color: var(--app-danger); } /* fa-ban — red */
    .icon-cart::before     { content: "\f07a"; } /* fa-shopping-cart */
    .icon-chartbar::before { content: "\f080"; } /* fa-bar-chart */
    .icon-chartline::before { content: "\f201"; } /* fa-line-chart */
    .icon-clipboard::before { content: "\f0ea"; } /* fa-clipboard */
    .icon-clock::before    { content: "\f017"; } /* fa-clock-o */
    .icon-cog::before      { content: "\f013"; } /* fa-cog */
    .icon-cogedit::before  { content: "\f013"; } /* fa-cog */
    .icon-coins::before    { content: "\f51e"; } /* fa-coins */
    .icon-comment::before  { content: "\f075"; } /* fa-comment */
    .icon-comments::before { content: "\f086"; } /* fa-comments */
    .icon-computer::before { content: "\f108"; } /* fa-desktop */
    .icon-connect::before  { content: "\f1e6"; } /* fa-plug */
    .icon-controlplay::before  { content: "\f04b"; } /* fa-play */
    .icon-controlpower::before  { content: "\f011"; } /* fa-power-off */
    .icon-controlstop::before  { content: "\f04d"; } /* fa-stop */
    .icon-cross::before    { content: "\f00d"; } /* fa-times */
    .icon-database::before { content: "\f1c0"; } /* fa-database */
    .icon-delete::before   { content: "\f00d"; color: var(--app-danger); transform: translateY(-1px); } /* fa-times — red cross, nudged 1px up to align visually */
    .icon-disk::before     { content: "\f0c7"; color: var(--app-accent); } /* fa-save — accent tint, theme-aware via fallback */
    .icon-doorin::before   { content: "\f090"; } /* fa-sign-in */
    .icon-error::before    { content: "\f071"; } /* fa-exclamation-triangle */
    .icon-errorgo::before  { content: "\f071"; } /* fa-exclamation-triangle */
    .icon-exclamation::before    { content: "\f06a"; color: var(--onyx-danger); } /* fa-exclamation-circle */
    .icon-feed::before     { content: "\f09e"; } /* fa-rss */
    .icon-find::before     { content: "\f002"; } /* fa-search */
    /* Colour-priority flags (Silk flag_{colour}). FA Free ships only the
       solid flag glyph (\f024 fa-flag), so the colour — which is the whole
       point of these icons (priority / severity / status) — is carried by
       `color` rather than by distinct glyphs. White and grey use neutral
       tints so they stay legible on both the light Triton grids and the
       dark Onyx surfaces; black inherits the surrounding text colour. */
    .icon-flagred::before    { content: "\f024"; color: var(--app-danger); }  /* fa-flag — red */
    .icon-flaggreen::before  { content: "\f024"; color: var(--app-success); } /* fa-flag — green */
    .icon-flagblue::before   { content: "\f024"; color: var(--app-primary); } /* fa-flag — blue */
    .icon-flagyellow::before { content: "\f024"; color: var(--app-warning-strong); } /* fa-flag — golden */
    .icon-flaggrey::before   { content: "\f024"; color: #6c757d; } /* fa-flag — muted grey */
    .icon-flagwhite::before  { content: "\f024"; color: #b9bec4; } /* fa-flag — pale (low/none) */
    .icon-flagblack::before  { content: "\f024"; color: #333333; } /* fa-flag — near-black */
    .icon-folder::before   { content: "\f07b"; } /* fa-folder */
    .icon-group::before    { content: "\f0c0"; } /* fa-users */
    .icon-help::before     { content: "\f059"; } /* fa-question-circle */
    .icon-hourglass::before     { content: "\f254"; } /* fa-hourglass */
    .icon-house::before    { content: "\f015"; } /* fa-home */
    .icon-information::before    { content: "\f05a"; } /* fa-info-circle */
    .icon-key::before      { content: "\f084"; } /* fa-key */
    .icon-lightning::before      { content: "\f0e7"; } /* fa-bolt */
    .icon-link::before     { content: "\f0c1"; } /* fa-link */
    .icon-lock::before     { content: "\f023"; } /* fa-lock */
    .icon-lockopen::before { content: "\f09c"; } /* fa-unlock */
    .icon-lorry::before    { content: "\f0d1"; } /* fa-truck */
    .icon-magnifier::before    { content: "\f002"; } /* fa-search */
    .icon-mail::before     { content: "\f0e0"; } /* fa-envelope */
    .icon-map::before      { content: "\f279"; } /* fa-map */
    .icon-money::before    { content: "\f0d6"; transform: translateX(-1px); } /* fa-money — wide glyph, nudged 1px left so its right edge isn't clipped */
    img[src$="/money-png/ext.axd"] { transform: translateX(-1px); } /* money Silk PNG (16px raster) clipped by its ~15px overflow:hidden column-header carrier; nudged 1px left so the shave is even on both sides instead of only the right */
    .icon-neighbourhood::before    { content: "\f0c0"; } /* fa-users */
    .icon-newspaper::before    { content: "\f1ea"; } /* fa-newspaper-o */
    .icon-outline::before  { content: "\f03a"; } /* fa-list */
    .icon-package::before  { content: "\f466"; } /* fa-box (FA5) — distinct from icon-box's fa-cube */
    .icon-pageexcel::before  { content: "\f1c3"; } /* fa-file-excel-o */
    .icon-pencil::before   { content: "\f040"; } /* fa-pencil */
    .icon-phone::before    { content: "\f095"; } /* fa-phone */
    .icon-rainbow::before  { content: "\f1fc"; } /* fa-paint-brush */
    .icon-report::before   { content: "\f0f6"; } /* fa-file-text-o */
    .icon-star::before     { content: "\f005"; } /* fa-star — keep in sync with .x-tool-star in BasePage.css (Navigation star Tool) */
    .icon-stop::before     { content: "\f28d"; color: var(--onyx-danger); } /* fa-stop-circle */
    .icon-table::before    { content: "\f0ce"; } /* fa-table */
    .icon-tag::before      { content: "\f02b"; } /* fa-tag */
    .icon-tagblue::before  { content: "\f02b"; } /* fa-tag */
    .icon-telephone::before  { content: "\f095"; } /* fa-phone */
    .icon-thumbdown::before  { content: "\f165"; } /* fa-thumbs-down */
    .icon-thumbup::before  { content: "\f164"; } /* fa-thumbs-up */
    .icon-tick::before     { content: "\f00c"; color: var(--app-success); } /* fa-check — green tick */
    .icon-time::before     { content: "\f017"; } /* fa-clock-o */
    .icon-transmit::before { content: "\f1eb"; } /* fa-wifi */
    .icon-user::before     { content: "\f007"; } /* fa-user */
    .icon-useradd::before  { content: "\f234"; } /* fa-user-plus */
    .icon-userdelete::before  { content: "\f235"; } /* fa-user-times */
    .icon-vcard::before    { content: "\f2bb"; } /* fa-address-card */
    .icon-weathersun::before    { content: "\f185"; } /* fa-sun-o */
    .icon-world::before    { content: "\f0ac"; } /* fa-globe */
    .icon-wrench::before   { content: "\f0ad"; } /* fa-wrench */

    /* Inside any danger-themed chrome — Window or Panel header, Toolbar,
       Button (in all three scales), system-message banner, etc. — the
       four danger-coloured icons above would match the surrounding red
       background and vanish. Fall back to inherited colour so the icon
       picks up the chrome's foreground instead.
       The attribute-wildcard selectors catch every concrete class Ext.NET
       emits for the "danger" variant of a given control family without
       enumerating each one. */
    :is(
        [class*="header-danger"],
        [class*="toolbar-danger"],
        [class*="btn-danger"]
    ) :is(
        .icon-cancel,
        .icon-delete,
        .icon-exclamation,
        .icon-stop
    )::before {
        color: inherit;
    }

    /* Mirror of the danger override above, for the success variant: the green
       accept/tick glyphs read green-on-green inside success-themed chrome
       (button / header / toolbar) and vanish. Pin them to the shared light text
       colour so they stay visible; accept/tick on neutral surfaces keep the
       semantic green. (Like the danger rule this applies in both themes — under
       Triton --onyx-uipack-text-color is undefined, so the glyph inherits the
       chrome's own light foreground.) */
    :is(
        [class*="header-success"],
        [class*="toolbar-success"],
        [class*="btn-success"]
    ) :is(
        .icon-accept,
        .icon-tick
    )::before {
        color: var(--onyx-uipack-text-color);
    }

    /* ── FA5-only glyph overrides ───────────────────────────────────────
       A handful of approved mappings reach for codepoints that don't
       exist in the FA4 webfont Triton bundles (basket → shopping-basket,
       coins, envelope-open, stop-circle, address-card). FA5 Free Solid
       is already loaded globally via BasePage.cs (font-awesome.css), so
       we just retarget those rules at its font-family + weight 900. */
    .icon-basket::before,
    .icon-coins::before,
    .icon-package::before,
    .icon-stop::before,
    .icon-vcard::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
    }

    /* ── FieldTrigger Icon="Simple*" custom triggers → FontAwesome glyphs ──
       These are NOT Silk .icon-* spans. They are Ext.NET FieldTrigger icons set
       in code-behind via Icon = TriggerIcon.SimplePlus / SimpleMinus / SimpleGet.
       For neptune/crisp/triton themes, Trigger.js getIcon() registers a per-icon
       rule, e.g.
         .x-form-simpleplus-trigger { background-image:
            url(/extnet/resources/images/triggerfield/neptune/simple-plus-png/ext.axd); }
       pointing at a 5-state (110x22) horizontal PNG sprite embedded in
       Ext.Net.dll. We wipe that bitmap and draw a crisp FA glyph in ::before,
       same approach as the Silk icons above.

       Specificity note: extnet-all.css carries
         .x-form-trigger-triton.x-form-trigger-default:before { content: none }
       (0,2,1) — the rule that suppresses the native glyph so the PNG shows.
       Qualifying our ::before with the base .x-form-trigger class lifts us to
       (0,3,1) so the glyph wins. The element keeps .x-form-trigger-default
       (font:16px/30px FontAwesome) + base text-align:center, so the glyph
       centers like the native combo arrow — same pattern as .assigntome-trigger
       in EmployeeSelectionComboBox.css.

       Where they appear:
       - SimplePlus / SimpleMinus — the "Select all" / "Deselect all" triggers on
         the MultiCombo report parameters (ReportViewer.aspx.cs).
       - SimpleGet — the employee combo "assign to me" trigger. Under the real
         Triton theme EmployeeComboBox.cs uses IconCls="assigntome-trigger"
         (fa-user, via EmployeeSelectionComboBox.css) instead. Under Onyx that
         path does NOT run: ResManager.ThemePath forces the server-side
         ResManager.Theme to None (see BasePage.SetExtTheme), so the
         "Theme == Onyx" check is false and it falls back to TriggerIcon.SimpleGet
         — the green-star PNG. We map .x-form-simpleget-trigger to the same fa-user
         glyph so Onyx's "assign to me" matches Triton's. (Harmless under Triton,
         which never emits this class.)

       Note: DropDownField status filters (OfferList, InvoiceList, ShopThroughput,
       WikiList, PurchaseOrderList, OrderReturnList) used to set
       TriggerIcon="SimpleArrowDown"; that attribute was removed so they fall back
       to the native ComboBox arrow trigger — no glyph rule needed here. */
    .x-form-trigger.x-form-simpleplus-trigger,
    .x-form-trigger.x-form-simpleminus-trigger,
    .x-form-trigger.x-form-simpleget-trigger {
        background-image: none !important;
        font-family: FontAwesome;
        font-size: 16px;
    }
    .x-form-trigger.x-form-simpleplus-trigger::before  { content: "\f067"; } /* fa-plus  — "select all"        */
    .x-form-trigger.x-form-simpleminus-trigger::before { content: "\f068"; } /* fa-minus — "deselect all"      */
    .x-form-trigger.x-form-simpleget-trigger::before   { content: "\f007"; } /* fa-user  — Onyx "assign to me" */
}