/* Bryntum v7 shared overrides (post 6.3.1 -> 7.3.4 migration, 2026-08).
   v7 themes are CSS-variable driven: they no longer bake in a font, and form
   field borders live on a pseudo-element of .b-field-inner controlled by
   --b-text-field-* variables — element-level border overrides do nothing.
   Cross-page Bryntum styling belongs HERE, not copy-pasted per template. */

/* v6 material forced Roboto on all Bryntum widgets (grid.material.css bundled
   the Roboto 300/400/500/700 faces); v7 inherits the page font. Keep the
   familiar Roboto look (Roboto is already loaded by the layout). */
.b-widget {
    font-family: Roboto, "Open Sans", sans-serif;
}

/* SELECTOR NOTE: material3-light.css declares its variables twice — on
   :root:not(.b-nothing) AND on .b-bryntum:not(.b-nothing) — and Widget's
   defaultCls puts .b-bryntum on EVERY widget's own element. A variable set on
   the widget element always beats one inherited from :root (proximity, not
   specificity), so a plain :root override of anything in the theme's
   .b-bryntum block silently does nothing. Overrides must therefore also
   target the widget elements themselves: .b-bryntum.b-bryntum is (0,3,0),
   out-gunning the theme's (0,2,0) regardless of stylesheet order. The :root
   leg keeps covering variables the theme only defines at :root. */
:root:not(.b-nothing),
.b-bryntum.b-bryntum:not(.b-nothing) {
    /* Focus/hover accent for all Bryntum form fields (filter bars, toolbars,
       cell editors). Replaces the dead per-template
       `.b-field-inner:focus-within { border-color: #428BCA }` copies. */
    --b-text-field-focus-border-color: #428BCA;
    --b-text-field-hover-border-color: #9ec5e4;

    /* v6 themes set no widget text colour (widgets inherited the page's
       #333333 from components.css). v7 defaults to --b-text-1 (near-black),
       which reads noticeably darker. */
    --b-widget-color: #333333;
    --b-list-item-color: #616161;

    /* Menus (e.g. the "Set Follow-up / Assign Task" caret dropdowns on the
       Orders/Quotes grids). v6 material rendered a white menu with #616161
       item text/icons and a #eeeeee focus state; v7 material3 uses
       near-black text on a primary-tinted panel. Menus float in the float
       root outside any grid container, so this cannot be scoped per grid. */
    --b-menu-background: #ffffff;
    --b-menu-item-color: #616161;
    --b-menu-item-hover-color: #616161;
    --b-menu-item-focus-color: #616161;
    --b-menu-item-hover-icon-color: #616161;
    --b-menu-item-focus-icon-color: #616161;
    --b-menu-item-hover-background: #eeeeee;
    --b-menu-item-focus-background: #eeeeee;
}

/* Semantic colour classes (b-red / b-green / b-orange).
   v6's material theme defined these; v7 dropped them entirely — no theme
   declares them any more — so `cls: 'b-red'` on a button rendered as a plain
   neutral pill and error toasts looked identical to success toasts. Re-added
   here under the names the templates already use, in the app's Bootstrap
   palette so they match the `btn-danger`/`btn-success` buttons rendered in
   grid cells alongside them.

   NOTE the `color` CONFIG is dead in v7: it is stored on the widget but never
   reaches the element (Checkbox's `updateColor` is commented out in the
   bundle, and Toast has no `color` config at all). Only `cls` applies a class,
   which is why the templates now pass `cls: 'b-red'` rather than `color:`.

   SELECTOR NOTE: the class is tripled to reach (0,5,0). The per-page
   `.<page-container> .b-toolbar .b-button:hover` greys are (0,4,0) and live in
   an inline <style> that loads AFTER this file, so anything less than (0,5,0)
   loses the tie and the button turns grey on hover. Verified against
   companydetail.html's rule. */
.b-button.b-button.b-button.b-red,
.b-toast.b-red {
    background: #d9534f !important;
    border-color: #c9302c !important;
    color: #fff !important;
}
.b-button.b-button.b-button.b-red:hover {
    background: #c9302c !important;
}
.b-button.b-button.b-button.b-green,
.b-toast.b-green {
    background: #5cb85c !important;
    border-color: #4cae4c !important;
    color: #fff !important;
}
.b-button.b-button.b-button.b-green:hover {
    background: #449d44 !important;
}
.b-button.b-button.b-button.b-orange,
.b-toast.b-orange {
    background: #f0ad4e !important;
    border-color: #eea236 !important;
    color: #fff !important;
}
.b-button.b-button.b-button.b-orange:hover {
    background: #ec971f !important;
}
/* Label + icon inherit the button foreground rather than the theme's primary
   colour, which is near-invisible on these backgrounds. The toast progress bar
   is a background, not text, so it needs the theme variable instead. */
.b-button.b-button.b-button.b-red .b-button-label,
.b-button.b-button.b-button.b-green .b-button-label,
.b-button.b-button.b-button.b-orange .b-button-label,
.b-button.b-button.b-button.b-red i,
.b-button.b-button.b-button.b-green i,
.b-button.b-button.b-button.b-orange i {
    color: inherit !important;
}
.b-toast.b-red,
.b-toast.b-green,
.b-toast.b-orange {
    --b-toast-progress-color: rgba(255, 255, 255, 0.7);
}