/* Fixes for the Triton-derived themes — Triton and Onyx.
   Most rules are widget-level structural fixes that apply identically to both.
   Color-divergent rules have a separate Onyx override right below the Triton rule. */

.x-theme-triton .x-textfield-icon,
.x-theme-onyx .x-textfield-icon {
    top: 7px;
}

/* The left field-glyph (.x-textfield-icon's ::before — e.g. the customer-picker
   fa-user) has no colour of its own, so it inherits the #404040 panel-body text
   colour: too dark, and heavier than the grey trigger icons beside it. Mute it to
   match. Triton only — under Onyx the dark theme already lifts the inherited
   colour to a light value, so no override is needed there. */
.x-theme-triton .x-textfield-icon {
    color: #919191;
}

.x-theme-triton .x-textfield-icon-input,
.x-theme-triton textarea.x-textfield-icon-input,
.x-theme-onyx .x-textfield-icon-input,
.x-theme-onyx textarea.x-textfield-icon-input {
    padding-left: 25px;
}

/* Field validation indicator (IndicatorIcon — e.g. the red BulletRed error marker).
   Several bugs surface only on the Triton-derived themes, all from the icon-font
   migration: the icon is now a flowed ::before glyph instead of the Silk background-image,
   but Ext.NET's JS still styles .x-field-indicator for the old image.
   (1) Horizontal gap: the JS sets padding-left:18px inline (the image was painted at the
       far left via background-position and ignored padding; the glyph flows after it),
       shoving the glyph ~18px right of the input. Replace it with a small gap.
   (2) Vertical: the base extnet-all rule pins the icon at top:0 / padding-top:4px, tuned to
       neptune's short input; on Triton/Onyx's taller fields it floats too high. Stretch the
       box to the full cell height and flex-centre so it aligns with the input, any field type.
   (3) Clipped glyph / crowding the next field: the JS auto-fits the indicator cell width to
       the glyph alone, but the base left:2px then shifts the absolute box past that cell's
       right edge — spilling into the next field and clipping the glyph. Anchor at left:0,
       add right-side room, and stop the glyph shrinking if the cell lands a hair narrow.
   Legacy themes keep their left-anchored PNG and need no fix. */
:is(.x-theme-triton, .x-theme-onyx) .x-field-indicator {
    top: 0;
    bottom: 0;
    left: 0; /* base left:2px overflows the auto-fitted cell on the right (see note 3) */
    height: auto;
    padding-top: 0;
    padding-left: 3px !important; /* small gap from the input; replaces the inline padding-left:18px */
    padding-right: 4px; /* room so the glyph isn't clipped on the right / pushed into the next field */
    display: flex;
    align-items: center;
}

:is(.x-theme-triton, .x-theme-onyx) .x-field-indicator::before {
    flex-shrink: 0; /* never clip the glyph if the auto-fitted cell width is a hair too narrow */
}

.x-theme-triton .cell-imagecommand-cell,
.x-theme-onyx .cell-imagecommand-cell {
    vertical-align: middle;
}

.x-theme-triton .row-imagecommand-cell,
.x-theme-onyx .row-imagecommand-cell {
    vertical-align: middle;
}

.x-theme-triton .row-imagecommand,
.x-theme-onyx .row-imagecommand {
    margin: 3px 5px 0 0;
}

/* This can be removed after upgrade to Ext.NET 4.2.0 */
.x-theme-triton .x-infopanel-header .x-title-text {
    color: #404040;
}

.x-theme-onyx .x-infopanel-header .x-title-text {
    color: var(--onyx-fg);
}

/* Onyx: the embedded Triton theme paints static toolbar text (.x-toolbar-text — e.g. the
   PagingToolbar's "Page / of N / 1-N of N") a dark #6a6a6a, which is unreadable on Onyx's
   dark bar. The toolbar's buttons already use --onyx-fg; match the static text to them.
   (Triton keeps the default grey — it reads fine on its light bar.) */
.x-theme-onyx .x-toolbar-text {
    color: var(--onyx-fg);
}

.x-theme-triton .x-mcombo-item-unchecked,
.x-theme-triton .x-mcombo-item-checked,
.x-theme-onyx .x-mcombo-item-unchecked,
.x-theme-onyx .x-mcombo-item-checked {
    background-position: 1px 6px;
}

/* Load mask — strip the panel chrome and replace the 16px loading.gif
   with a crisp FA "circle-notch" spinner rendered via ::before, large
   and continuously spinning. Same look across Onyx and Triton; the
   spinner colour falls back to a neutral mid-gray on Triton where
   --onyx-fg is undefined. */
:is(.x-theme-onyx, .x-theme-triton) .x-mask-msg {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

:is(.x-theme-onyx, .x-theme-triton) .x-mask-msg-inner {
    padding: 0;
    background-color: transparent;
    color: var(--onyx-fg, #bccfe1);
    font-size: 0; /* hide the "Loading…" label */
    line-height: 0;
}

:is(.x-theme-onyx, .x-theme-triton) .x-mask-msg-text {
    padding: 0;
    background-image: none;
    width: 48px;
    height: 48px;
}

    :is(.x-theme-onyx, .x-theme-triton) .x-mask-msg-text::before {
        content: "\f1ce"; /* fa-circle-notch */
        font-family: FontAwesome;
        font-size: 40px;
        line-height: 48px;
        color: var(--onyx-fg, #bccfe1);
        display: block;
        text-align: center;
        /* Reuse the global fa-spin keyframes (font-awesome.css), shared with
           .sc-processing-spinner in BasePage.css — one spin source of truth. */
        animation: fa-spin 2s linear infinite;
    }

/* OrderDetail fulfilment priority — "Very high" is rendered with Icon.FlagBlack
   (GetFulfilmentPriorityDefaultIcon), which is the near-black flag everywhere
   else. Black was a poor choice for the most urgent level: give it a real,
   vivid red — above "High", which already uses the danger red #d9534f. Scoped
   to the fulfilment-priority cycle button + its very-high menu item
   (.fulfilment-prio) so the global Icon.FlagBlack glyph is left untouched.
   Applies to both glyph themes; other themes keep their Silk black-flag PNG
   (there is no recoloured glyph there).

   Two selector shapes are needed: the descendant form covers OrderDetail's
   cycle button + menu item and OrderTypeDetail's combo field (the icon sits in
   a child element of .fulfilment-prio); the compound form covers the combo
   dropdown item, where icon-flagblack and .fulfilment-prio land on the same
   <div class="icon-combo-item fulfilment-prio icon-flagblack"> element. */
:is(.x-theme-onyx, .x-theme-triton) .fulfilment-prio .icon-flagblack::before,
:is(.x-theme-onyx, .x-theme-triton) .fulfilment-prio.icon-flagblack::before {
    color: #e60000;
}

/* Disk (Save) glyph carries an accent/primary tint; on a Triton default-small
   button it should read like the other default-small button icons instead, so pin
   it to that #f0f0f0. (Onyx default-small icons already use --onyx-fg.) */
.x-theme-triton .x-btn-icon-el-default-small.icon-disk::before {
    color: #f0f0f0;
}

/* TagLabel per-tag icons (CategoryField + TagColumn grid cells) are rendered as ::before
   glyphs by the icon-font migration, replacing the Silk background-image icons. Because the
   tag text sits in a block-level .x-taglabel-item-text div, the inline-flex glyph can't
   share its line and wraps onto its own line above the text, doubling the item height.
   Ext.NET's base taglabel CSS already reserves a 25px left gutter and a 5px icon offset on
   .x-taglabel-item-icon, so pin the glyph there: the item is position: relative, and
   height: 100% + align-items: center (from the base glyph rule) keep it vertically centred
   beside the text. Other themes keep their layout-free background-image icons and need no fix. */
:is(.x-theme-onyx, .x-theme-triton) .x-taglabel-item-icon::before {
    position: absolute;
    left: 5px;
    top: 0;
}

/* Collapsible FieldSet collapse toggle (the box-with-minus glyph) sits ~2px above
   the title's centre: both Triton and Onyx give .x-fieldset-header-tool-default
   margin-top:2px (tuned to the old 15px sprite), and the glyph reads high against
   the 16px title. The toggle and the title are both float:left, so vertical-align
   is a no-op and only margin-top moves it — nudge it down 2px onto the title centre.
   (Measured on Onyx: toggle box-centre −330.5 vs title centre −329.0 → +2px lands
   it essentially dead-centre.) */
:is(.x-theme-triton, .x-theme-onyx) .x-fieldset-header-tool-default {
    margin-top: 4px;
}

/* A checkbox/radio with no box label can carry its descriptive text in a sibling
   .x-field-note (e.g. "(enables order import; not scheduled)"). The note keeps the
   default 5px top gap — tuned for a note sitting *below* a field — so beside the
   18px checkbox box it rides ~3px high. The box label (.x-form-cb-label) uses
   margin-top:8px, i.e. exactly where text sits next to this checkbox, so match the
   note to it: it then centres on the box. Scoped to .x-form-cb-wrap so notes under
   ordinary fields keep their 5px gap. */
:is(.x-theme-triton, .x-theme-onyx) .x-form-cb-wrap .x-field-note {
    margin-top: 7px;
}

/* Validation tip — the exclamation icon was pinned to the top
   (background-position 1px 1px), so on a single-line message it rides high
   above the text. Centre it vertically. Applies to both Triton and Onyx; the
   Onyx tip colour / surface / arrow changes live in onyx-all_1.css instead. */
:is(.x-theme-triton, .x-theme-onyx) .x-tip-body-form-invalid {
    background-position: 1px 3px;
}