/* Makes a DevExtreme grid and a Bootstrap table look like the same product.
 *
 * LOADED AFTER dx.material.teal.light.css, and that ordering is the whole point — site.css is linked
 * before the page's Head section, so it loses to the theme and cannot do this job. _DxTheme.cshtml keeps
 * the two in the right order.
 *
 * WHY EACH SELECTOR IS NAMED RATHER THAN A VARIABLE OVERRIDDEN: the vendored theme declares
 * --dx-color-primary and never reads it. `var(--dx-color-` appears zero times in the file against 138
 * literal #009688, so setting the variable achieves nothing and each visible rule has to be addressed.
 *
 * Measured before and after, on the same two screens:
 *
 *                    Bootstrap table        DevExtreme grid (before)
 *   font             system-ui              Roboto
 *   size             16px                   14px
 *   row height       39px                   48px
 *   row border       0.8px #dee2e6          0.8px #e0e0e0
 *
 * The border colours already agreed. The rest is below, and the grid moves to the table rather than the
 * other way round: ten of the app's tables already look like this and four grids do not.
 */

/* Typeface and colour come from the page, not from the theme's own Roboto stack. */
.dx-widget,
.dx-widget input,
.dx-widget textarea {
    font-family: var(--bs-body-font-family);
}

.dx-datagrid {
    color: var(--bs-body-color);
}

/* SIZE IS SET ON THE CELLS, not on .dx-datagrid: the theme sizes its cells directly, so a rule on the
   container is inherited-then-overridden and the grid stays at 14px next to 16px tables. */
.dx-datagrid .dx-datagrid-headers td,
.dx-datagrid .dx-datagrid-rowsview td {
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
}

/* Density, to Bootstrap's .table-sm — .25rem, the same value the ten tables use. The theme's 14px gives
   a 48px row against their 39px. Headers keep a little more room because they carry the sort indicator
   and the filter icon. */
.dx-datagrid .dx-datagrid-rowsview td {
    padding-top: .25rem;
    padding-bottom: .25rem;
}

.dx-datagrid .dx-datagrid-headers td {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

/* One row rule, in the tables' colour rather than the theme's near-identical grey — near-identical is
   what makes a mismatch look like a rendering fault rather than a decision. */
.dx-datagrid .dx-datagrid-rowsview .dx-row-lines > td {
    border-bottom-color: var(--bs-border-color);
}

/* A GRID THAT DRAWS ITS OWN ROWS PUTS THE ROW CLASSES ON A <tbody>.
 *
 * With `dataRowTemplate` DevExtreme creates one <tbody class="dx-row dx-data-row …"> per row and the
 * template appends a <tr> into it, so every theme rule written as `.dx-row-x > td` matches nothing — the
 * td is now a grandchild. The theme carries `> tr > td` twins for most of them and for exactly two it does
 * not: `.dx-datagrid .dx-row-lines > td` (the row separator) and `.dx-datagrid .dx-row-alt > td` (the
 * alternating shade). Without these the Savings grid renders as an undifferentiated block of rows.
 *
 * The separator takes the tables' border colour, like the rule above it. The shade is the theme's own
 * #f5f5f5, quoted rather than replaced: a hand-drawn row has to be indistinguishable from a generated one
 * on the two grids sitting on either side of it. */
.dx-datagrid .dx-row-lines > tr > td {
    border-bottom: 1px solid var(--bs-border-color);
}

.dx-datagrid .dx-row-alt > tr > td {
    background-color: #f5f5f5;
}

/* The theme SHOUTS its button labels: text-transform on .dx-button-text turns "Apply" into APPLY and
   "Send an invitation" into SEND AN INVITATION, next to Bootstrap buttons in sentence case. */
.dx-button .dx-button-text {
    text-transform: none;
}

/* And its tabs, for the same reason — "KEYS" and "REQUISITIONS RECEIVED" beside sentence-case headings. */
.dx-tab .dx-tab-text {
    text-transform: none;
}

/* One border radius across both systems. */
.dx-button,
.dx-texteditor,
.dx-datagrid-borders {
    border-radius: var(--bs-border-radius);
}

/* The grid's empty state is a seventh voice otherwise — its own size, its own colour, its own italic. */
.dx-datagrid .dx-datagrid-nodata {
    font: inherit;
    color: var(--bs-secondary-color);
}

/* A bounded popup has to scroll, or the bound just moves the clipping inside the dialog. The theme
   leaves .dx-popup-content overflowing, which is fine for the 460px single-field dialogs and is not
   fine for the invite form — two forms and a warning, taller than a laptop viewport. */
.dx-popup-content {
    overflow-y: auto;
}

/* ---- One accent, and it is the grids' (2026-09-11) ----
 *
 * Bootstrap's blue and DevExtreme's teal met on every page that had both, and the client chose teal. Bootstrap
 * reads its accent from variables, so they are pointed at teal here, where they win over bootstrap.min.css by
 * loading after it — and on [data-bs-theme=light] as well, because Bootstrap re-declares them there and the
 * navigation bar carries it.
 *
 * TEAL 700, NOT THE THEME'S 500, WHEREVER TEAL CARRIES TEXT. #009688 is 3.7:1 against white, below the 4.5:1
 * WCAG AA asks of text — a teal link on white and a white label on a teal button alike. #00796b is 5.3:1. The
 * theme's 500 stays where teal carries no text: a focused row's border, a checked box, the selected page.
 */
:root,
[data-bs-theme=light] {
    --bs-primary: #00796b;
    --bs-primary-rgb: 0, 121, 107;
    --bs-primary-text-emphasis: #004d40;
    --bs-primary-bg-subtle: #e0f2f1;
    --bs-primary-border-subtle: #80cbc4;
    --bs-link-color: #00796b;
    --bs-link-color-rgb: 0, 121, 107;
    --bs-link-hover-color: #004d40;
    --bs-link-hover-color-rgb: 0, 77, 64;
    --bs-focus-ring-color: rgba(0, 150, 136, .25);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: #00796b;
}

/* The theme's own primary button in the same 700, with hover, focus and press a step darker each — the theme's
   #006b61 and #00332e were a step darker than its 500. Scoped to contained: a text or outlined button is
   transparent, and a bare .dx-button-default rule here would fill it. */
.dx-button-mode-contained.dx-button-default {
    background-color: #00796b;
}

.dx-button-mode-contained.dx-button-default.dx-state-focused,
.dx-button-mode-contained.dx-button-default.dx-state-hover {
    background-color: #00695c;
}

.dx-button-mode-contained.dx-button-default.dx-state-active,
.dx-button-mode-contained.dx-button-default.dx-state-selected {
    background-color: #004d40;
}

.dx-button-mode-text.dx-button-default,
.dx-button-mode-text.dx-button-default .dx-icon,
.dx-button-mode-outlined.dx-button-default,
.dx-button-mode-outlined.dx-button-default .dx-icon {
    color: #00796b;
}

.dx-button-mode-outlined.dx-button-default {
    border-color: #00796b;
}

/* A confirmation toast (dx-controls.js [data-toast]) in green 800 — the theme's #8bc34a is 2.2:1 under its
   white words. */
.dx-toast-content.dx-toast-success {
    background-color: #2e7d32;
}

/* And a selected tab's word (the ERP page's tabs). Its underline carries no text and stays the theme's 500. */
.dx-tab.dx-tab-selected,
.dx-tab.dx-tab-selected .dx-icon {
    color: #00796b;
}

/* DANGER AND SUCCESS, FOR THE SAME REASON. The theme's #f44336 is 3.7:1 under a white label and its #8bc34a
   2.2:1; Material's red 700 is 5.0:1 and green 800 5.1:1. They reach buttons now that every button is a
   dxButton — Withdraw, Remove and the award's confirmation among them. */
.dx-button-mode-contained.dx-button-danger {
    background-color: #d32f2f;
}

.dx-button-mode-contained.dx-button-danger.dx-state-focused,
.dx-button-mode-contained.dx-button-danger.dx-state-hover {
    background-color: #c62828;
}

.dx-button-mode-contained.dx-button-danger.dx-state-active {
    background-color: #b71c1c;
}

.dx-button-mode-contained.dx-button-success {
    background-color: #2e7d32;
}

.dx-button-mode-contained.dx-button-success.dx-state-focused,
.dx-button-mode-contained.dx-button-success.dx-state-hover {
    background-color: #1b5e20;
}

.dx-button-mode-contained.dx-button-success.dx-state-active {
    background-color: #103d13;
}

.dx-button-mode-text.dx-button-danger,
.dx-button-mode-text.dx-button-danger .dx-icon,
.dx-button-mode-outlined.dx-button-danger,
.dx-button-mode-outlined.dx-button-danger .dx-icon {
    color: #d32f2f;
}

.dx-button-mode-outlined.dx-button-danger {
    border-color: #d32f2f;
}

.dx-button-mode-text.dx-button-success,
.dx-button-mode-text.dx-button-success .dx-icon,
.dx-button-mode-outlined.dx-button-success,
.dx-button-mode-outlined.dx-button-success .dx-icon {
    color: #2e7d32;
}

.dx-button-mode-outlined.dx-button-success {
    border-color: #2e7d32;
}

/* ---- The faces dx-controls.js gives a page's own controls ---- */

/* The page's own control, kept for what it does and hidden behind its face. */
.face-native {
    display: none !important;
}

/* A link in a dxButton's classes. Bootstrap underlines a link, and the theme never had to say otherwise. */
a.dx-button {
    text-decoration: none;
}

/* btn-sm, on a face — Bootstrap's small button against DevExtreme's 36px one. */
.dx-button.face-sm {
    height: 30px;
    min-width: 30px;
}

.dx-button.face-sm .dx-button-content {
    padding: 4px 10px;
}

.dx-button.face-sm.dx-button-has-icon:not(.dx-button-has-text) .dx-button-content {
    padding: 5px;
}

/* A monospace field keeps its face monospace: the rule at the top of this file hands every widget input the
   page's font, which is right for everything but a link somebody is meant to read and copy exactly. */
.dx-texteditor.font-monospace input {
    font-family: var(--bs-font-monospace);
}

/* A Bootstrap input group around a face: the box takes the group's width, as .form-control did, and the
   addon — the bid page's currency — sits inside the box as quiet text rather than as a grey tab beside it. */
.input-group > .dx-texteditor {
    flex: 1 1 auto;
    min-width: 0;
}

.dx-texteditor-container > .face-affix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background: none;
    color: rgba(0, 0, 0, .6);
    white-space: nowrap;
}

/* Tabs as wide as their words, left-aligned, as Bootstrap's were. The theme stretches every tab to fill the row,
   which turned two page sections into a pair of half-page bars, and no dxTabs option sizes them to content.
 *
 * THE TABS STOP GROWING; THE STRIP DOES NOT SHRINK. `width: fit-content` on the strip was the first version and
 * collapsed it to 0px — its wrapper is width:100% of it, a circular size — so the second tab drew outside a
 * zero-width box and a point on it hit the page behind. */
.dx-tabs.tabs-fit.dx-tabs-horizontal .dx-tab {
    flex-basis: auto;
}

/* A checkbox in Bootstrap's .form-check sits where the box it replaces sat. */
.form-check > .dx-checkbox {
    float: left;
    margin-left: -1.5em;
    margin-top: .1875rem;
}