/**
 * ExtJS 3 → Font Awesome 6 icon replacements
 *
 * ExtJS 3 applies iconCls in 3 ways:
 *   Buttons   → class on <button class="x-btn-text ICON_CLASS"> (background-image)
 *   Tabs      → class on <span class="x-tab-strip-text ICON_CLASS"> (background-image)
 *   Menus     → class on <img class="x-menu-item-icon ICON_CLASS"> (src blank.gif + bg)
 *   StatusBar → class on <span class="x-status-text ICON_CLASS"> (background-image)
 *
 * NOTE: ::before works on span/div/button but NOT on <img> elements.
 */

/* ════════════════════════════════════════════════════════════════
   1. TOOLBAR BUTTONS — class on <button class="x-btn-text ICON">
   FA icon already added to text: property in JS → just strip padding
   ════════════════════════════════════════════════════════════════ */
.x-btn-text[class*="icon-"],
.x-btn-text[class*="ai-icon-"] {
    background-image: none !important;
    padding-left: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   2. TAB ICONS — class on span.x-tab-strip-text.x-icon-subitem
   Override bg-image; FA replaces the expand.gif arrow
   ════════════════════════════════════════════════════════════════ */
.x-tab-strip-text.x-icon-subitem {
    background-image: none !important;
    padding-left: 2px !important; /* remove the 20px icon placeholder gap */
}
.x-tab-strip-text.x-icon-subitem::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f0c9'; /* fa-bars — generic nav indicator */
    font-size: 10px;
    color: #9aabb8;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════════
   3. STATUS BAR ICONS — class on span.x-status-text.ICON_CLASS
   ════════════════════════════════════════════════════════════════ */
.x-status-text.x-icon-status-ok,
.x-icon-status-ok {
    background-image: none !important;
    padding-left: 0 !important;
}
.x-status-text.x-icon-status-ok::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f058'; /* fa-circle-check */
    color: #44a244;
    font-size: 13px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
}

.x-status-text.x-icon-status-error,
.x-icon-status-error {
    background-image: none !important;
    padding-left: 0 !important;
}
.x-status-text.x-icon-status-error::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f057'; /* fa-circle-xmark */
    color: #c23030;
    font-size: 13px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════════
   4. MENU ITEM ICONS — class on img.x-menu-item-icon.ICON_CLASS
   ::before does NOT work on <img>, so: hide img + inject FA on
   the sibling span.x-menu-item-text via + selector
   ════════════════════════════════════════════════════════════════ */
img.x-menu-item-icon.icon-add,
img.x-menu-item-icon.icon-edit,
img.x-menu-item-icon.icon-delete,
img.x-menu-item-icon.icon-refresh,
img.x-menu-item-icon.icon-accept,
img.x-menu-item-icon.icon-move,
img.x-menu-item-icon.icon-link,
img.x-menu-item-icon.icon-view,
img.x-menu-item-icon.icon-status,
img.x-menu-item-icon.icon-download {
    display: none !important;
}

img.x-menu-item-icon.icon-add      + .x-menu-item-text::before,
img.x-menu-item-icon.icon-edit     + .x-menu-item-text::before,
img.x-menu-item-icon.icon-delete   + .x-menu-item-text::before,
img.x-menu-item-icon.icon-refresh  + .x-menu-item-text::before,
img.x-menu-item-icon.icon-accept   + .x-menu-item-text::before,
img.x-menu-item-icon.icon-move     + .x-menu-item-text::before,
img.x-menu-item-icon.icon-link     + .x-menu-item-text::before,
img.x-menu-item-icon.icon-view     + .x-menu-item-text::before,
img.x-menu-item-icon.icon-status   + .x-menu-item-text::before,
img.x-menu-item-icon.icon-download + .x-menu-item-text::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
    color: #555;
    display: inline-block;
    width: 18px;
    text-align: center;
    margin-right: 2px;
    vertical-align: middle;
}

img.x-menu-item-icon.icon-add      + .x-menu-item-text::before { content: '\f067'; } /* fa-plus */
img.x-menu-item-icon.icon-edit     + .x-menu-item-text::before { content: '\f304'; } /* fa-pen */
img.x-menu-item-icon.icon-delete   + .x-menu-item-text::before { content: '\f1f8'; } /* fa-trash */
img.x-menu-item-icon.icon-refresh  + .x-menu-item-text::before { content: '\f2f1'; } /* fa-rotate */
img.x-menu-item-icon.icon-accept   + .x-menu-item-text::before { content: '\f00c'; } /* fa-check */
img.x-menu-item-icon.icon-move     + .x-menu-item-text::before { content: '\f362'; } /* fa-right-left */
img.x-menu-item-icon.icon-link     + .x-menu-item-text::before { content: '\e1b3'; } /* fa-list-check */
img.x-menu-item-icon.icon-view     + .x-menu-item-text::before { content: '\f06e'; } /* fa-eye */
img.x-menu-item-icon.icon-status   + .x-menu-item-text::before { content: '\f192'; } /* fa-circle-dot */
img.x-menu-item-icon.icon-download + .x-menu-item-text::before { content: '\f019'; } /* fa-download */