/* =========================================================================
   DevExtreme DataGrid house style.

   Loaded once from _Layout, after dx.light.css, so every grid in the app
   picks it up — present and future. Nothing here should ever need copying
   into a view; that is how the loading indicator ended up correct on 22
   pages and missing from 35.

   Three levels, and they are additive rather than alternatives:

     (base)          "Refined" — brand header, quiet zebra, 31px rows.
                     Applies to every grid automatically.
     .ie-grid-panel  "Panel"   — wraps a grid in a card with a toolbar.
                     Opt in on operations screens.
     .ie-dense       "Console" — 26px rows. A modifier on either of the
                     above, set per user rather than per page.

   Palette is the product's: #300c45 logo purple, rgb(190,150,226) lavender,
   #4a2a63 secondary. Semantic colours match the health panel so the two
   surfaces agree about what red means.
   ========================================================================= */

:root {
    --ie-grid-brand: #300c45;
    --ie-grid-brand-2: #4a2a63;
    --ie-grid-accent: rgba(190,150,226,0.22);
    --ie-grid-accent-strong: rgba(190,150,226,0.42);

    --ie-grid-surface: #ffffff;
    --ie-grid-surface-2: #f7f5f9;
    --ie-grid-rule: #e5dfeb;
    --ie-grid-rule-strong: #cfc5d9;
    --ie-grid-ink: #241d2b;
    --ie-grid-ink-2: #5d5468;
    --ie-grid-ink-3: #8b8295;

    --ie-ok: #2e7d32;
    --ie-ok-wash: #e9f3ea;
    --ie-warn: #b06f00;
    --ie-warn-wash: #fdf6e9;
    --ie-crit: #c0392b;
    --ie-crit-wash: #fbebe9;

    /* Row padding is the density knob. .ie-dense overrides just this.

       pad-x stays modest on purpose. Cell width in a table is content-box, so
       horizontal padding is ADDED to whatever width a column asks for — at 14px
       a side, a .Width(16) icon column needs 44px and its content gets clipped.
       That shipped on 16 August and cut the read-mail icon off the left of every
       email grid. Narrow columns get an explicit override below; 10px is the
       most the general case can safely carry. */
    --ie-grid-pad-y: 6px;
    --ie-grid-pad-x: 10px;
    --ie-grid-pad-x-narrow: 3px;
    --ie-grid-font: 13.5px;

    --ie-grid-radius: 10px;
    --ie-grid-shadow: 0 1px 2px rgba(48,12,69,.06), 0 1px 3px rgba(48,12,69,.05);
    --ie-grid-shadow-md: 0 2px 4px rgba(48,12,69,.05), 0 8px 24px rgba(48,12,69,.08);
}

/* -------------------------------------------------------------------------
   Base — "Refined"
   ------------------------------------------------------------------------- */

.dx-datagrid {
    font-size: var(--ie-grid-font);
    color: var(--ie-grid-ink);
    background-color: var(--ie-grid-surface);
}

/* The container. DevExtreme draws its own 1px box when ShowBorders is on;
   soften it into a card instead of a wire cage. */
.dx-datagrid-borders > .dx-datagrid-headers,
.dx-datagrid-borders > .dx-datagrid-rowsview,
.dx-datagrid-borders > .dx-datagrid-total-footer {
    border-left: none;
    border-right: none;
}

.dx-widget.dx-datagrid,
.dx-datagrid-borders {
    border-radius: var(--ie-grid-radius);
    overflow: hidden;
    border: 1px solid var(--ie-grid-rule);
    box-shadow: var(--ie-grid-shadow);
}

/* ---- header ----

   The purple has to be painted on the cells as well as the container.
   dx.light.css sets `background-color:#fff` on `.dx-datagrid-headers` and the
   grid stacks a content wrapper and a table inside it, any of which can carry
   its own ground. Colouring only the container left white header text sitting
   on a light band — unreadable, and exactly what shipped on 16 August.
   Paint every layer, and let the filter row explicitly reset itself below. */
.dx-datagrid .dx-datagrid-headers,
.dx-datagrid .dx-datagrid-headers .dx-datagrid-content,
.dx-datagrid .dx-datagrid-headers .dx-datagrid-table,
.dx-datagrid .dx-datagrid-headers .dx-header-row,
.dx-datagrid .dx-datagrid-headers .dx-header-row > td {
    background-color: var(--ie-grid-brand);
    color: #fff;
    border-bottom: none;
}

    .dx-datagrid .dx-datagrid-headers .dx-header-row > td {
        font-size: 11px;
        font-weight: 650;
        letter-spacing: .07em;
        text-transform: uppercase;
        padding: 8px var(--ie-grid-pad-x);
        vertical-align: middle;
    }

/* Sort arrows and the column-chooser glyph have to survive the dark ground. */
.dx-datagrid-headers .dx-sort,
.dx-datagrid-headers .dx-header-filter {
    color: rgba(255,255,255,.72);
}

    .dx-datagrid-headers .dx-sort.dx-sort-up,
    .dx-datagrid-headers .dx-sort.dx-sort-down,
    .dx-datagrid-headers .dx-header-filter.dx-header-filter-empty:hover,
    .dx-datagrid-headers .dx-header-filter:hover {
        color: #fff;
    }

.dx-datagrid-headers .dx-header-row > td:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,.12);
}

/* ---- filter row: sits inside the header block, so it has to opt back out of
       the purple the rule above paints across every layer ---- */
.dx-datagrid .dx-datagrid-headers .dx-datagrid-filter-row,
.dx-datagrid .dx-datagrid-headers .dx-datagrid-filter-row > td {
    background-color: var(--ie-grid-surface-2);
    color: var(--ie-grid-ink);
}

    .dx-datagrid .dx-datagrid-headers .dx-datagrid-filter-row > td {
        padding: 4px 8px;
        border-top: 1px solid var(--ie-grid-rule-strong);
        text-transform: none;
        letter-spacing: normal;
        font-size: 12.5px;
        font-weight: 400;
    }

    .dx-datagrid-headers .dx-datagrid-filter-row .dx-editor-cell .dx-texteditor-input {
        color: var(--ie-grid-ink);
        font-size: 12.5px;
        padding: 3px 6px;
        min-height: 24px;
    }

/* ---- rows ---- */
.dx-datagrid-rowsview .dx-data-row > td {
    padding: var(--ie-grid-pad-y) var(--ie-grid-pad-x);
    border-bottom: 1px solid var(--ie-grid-rule);
    line-height: 1.35;
}

/* Narrow columns — icons, checkboxes, edit/delete buttons, group expanders.
   These are sized in the low tens of pixels, so the general padding would eat
   the whole cell. Matching on content (a lone img or the DevExtreme command
   classes) rather than on width, which CSS cannot see. */
.dx-datagrid .dx-datagrid-headers .dx-header-row > td.dx-command-select,
.dx-datagrid .dx-datagrid-headers .dx-header-row > td.dx-command-edit,
.dx-datagrid .dx-datagrid-headers .dx-header-row > td.dx-command-expand,
.dx-datagrid-rowsview .dx-data-row > td.dx-command-select,
.dx-datagrid-rowsview .dx-data-row > td.dx-command-edit,
.dx-datagrid-rowsview .dx-data-row > td.dx-command-expand,
.dx-datagrid-rowsview .dx-data-row > td:has(> img:only-child),
.dx-datagrid-rowsview .dx-data-row > td:has(> .dx-icon:only-child) {
    padding-left: var(--ie-grid-pad-x-narrow);
    padding-right: var(--ie-grid-pad-x-narrow);
}

.dx-datagrid-rowsview .dx-row-alt > td {
    background-color: var(--ie-grid-surface-2);
}

.dx-datagrid-rowsview .dx-data-row:hover > td,
.dx-datagrid-rowsview .dx-data-row.dx-state-hover > td {
    background-color: var(--ie-grid-accent);
}

.dx-datagrid-rowsview .dx-selection > td,
.dx-datagrid-rowsview .dx-selection:hover > td {
    background-color: var(--ie-grid-accent-strong);
    color: var(--ie-grid-ink);
}

/* Numbers line up or they are not worth putting in columns. */
.dx-datagrid .dx-datagrid-table td[class*="dx-col-"] {
    font-variant-numeric: tabular-nums;
}

/* ---- pager ---- */
.dx-datagrid-pager {
    border-top: 1px solid var(--ie-grid-rule);
    background-color: var(--ie-grid-surface);
}

/* -------------------------------------------------------------------------
   Density modifier — "Console"

   Only the padding tokens change, which is what keeps this a per-user
   setting rather than a second design. Put .ie-dense on any ancestor.
   ------------------------------------------------------------------------- */
.ie-dense {
    --ie-grid-pad-y: 3px;
    --ie-grid-pad-x: 8px;
    --ie-grid-font: 13px;
}

    .ie-dense .dx-datagrid-rowsview .dx-data-row > td {
        line-height: 1.3;
    }

/* -------------------------------------------------------------------------
   Panel wrapper — "Panel"

   Wrap a grid in <div class="ie-grid-panel"> with an .ie-grid-toolbar and
   the grid takes on the card, and drops its own border so the two do not
   double up.
   ------------------------------------------------------------------------- */
.ie-grid-panel {
    background: var(--ie-grid-surface);
    border: 1px solid var(--ie-grid-rule);
    border-radius: 12px;
    box-shadow: var(--ie-grid-shadow-md);
    overflow: hidden;
}

    .ie-grid-panel .dx-widget.dx-datagrid,
    .ie-grid-panel .dx-datagrid-borders {
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

.ie-grid-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 11px 16px;
    border-bottom: 1px solid var(--ie-grid-rule);
}

    .ie-grid-toolbar .ie-grid-title {
        font-weight: 640;
        font-size: 15.5px;
        color: var(--ie-grid-ink);
    }

    .ie-grid-toolbar .ie-grid-count {
        font-size: 12px;
        color: var(--ie-grid-ink-2);
        background: var(--ie-grid-surface-2);
        border: 1px solid var(--ie-grid-rule);
        padding: 1px 9px;
        border-radius: 20px;
        font-variant-numeric: tabular-nums;
    }

    .ie-grid-toolbar .ie-grid-actions {
        margin-left: auto;
        display: flex;
        gap: 8px;
        align-items: center;
    }

/* -------------------------------------------------------------------------
   Status pills and row emphasis

   Semantic colour is deliberately separate from the brand purple: purple is
   chrome, these three mean something. Use ie-cell-state() from grid.js to
   render one from a cell template.
   ------------------------------------------------------------------------- */
.ie-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 620;
    line-height: 1.5;
    padding: 1px 9px;
    border-radius: 20px;
    border: 1px solid transparent;
    white-space: nowrap;
}

    .ie-pill .ie-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

    .ie-pill.ok { color: var(--ie-ok); background: var(--ie-ok-wash); border-color: var(--ie-ok); }
    .ie-pill.warn { color: var(--ie-warn); background: var(--ie-warn-wash); border-color: var(--ie-warn); }
    .ie-pill.crit { color: var(--ie-crit); background: var(--ie-crit-wash); border-color: var(--ie-crit); }
    .ie-pill.muted { color: var(--ie-grid-ink-3); background: var(--ie-grid-surface-2); border-color: var(--ie-grid-rule-strong); }

/* The lighter alternative to a pill — same colours, a third of the weight. */
.ie-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 580;
}

    .ie-state .ie-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    .ie-state.ok { color: var(--ie-ok); }
    .ie-state.warn { color: var(--ie-warn); }
    .ie-state.crit { color: var(--ie-crit); }

/* A failed row carries a red edge as well as a red pill, so it is findable
   by shape when you are scrolling rather than reading. */
.dx-datagrid-rowsview .dx-data-row.ie-row-crit > td:first-child {
    box-shadow: inset 3px 0 0 var(--ie-crit);
}

.dx-datagrid-rowsview .dx-data-row.ie-row-warn > td:first-child {
    box-shadow: inset 3px 0 0 var(--ie-warn);
}

/* -------------------------------------------------------------------------
   Chart loading overlay

   DevExtreme charts render their own loading indicator as an SVG arc and offer
   no way to substitute an image — so `indicatorSrc` cannot reach them and the
   Home page's sentiment doughnuts kept showing the stock spinner while every
   other surface showed the logo. The charts' built-in indicator is switched
   off and this overlay stands in.
   ------------------------------------------------------------------------- */
.ie-chart-wrap {
    position: relative;
}

.ie-chart-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.65);
    z-index: 2;
    pointer-events: none;
}

    .ie-chart-loading img {
        width: 90px;
        height: auto;
    }

    .ie-chart-loading.ie-hidden {
        display: none;
    }

/* -------------------------------------------------------------------------
   Hub pages

   A hub's cards each hide themselves when the caller cannot reach the target,
   so a hub can legitimately end up with none — the Customers hub has nothing
   in it for a Platform Administrator. The sidebar omits such a group, so this
   is only reachable by typing the URL, but a blank page reads as broken.
   ------------------------------------------------------------------------- */
.ie-hub-empty {
    display: none;
    color: var(--ie-grid-ink-2);
    background: var(--ie-grid-surface-2);
    border: 1px solid var(--ie-grid-rule);
    border-radius: var(--ie-grid-radius);
    padding: 18px 20px;
}

.ie-hub-grid:not(:has(.ie-hub-card)) + .ie-hub-empty {
    display: block;
}

/* -------------------------------------------------------------------------
   Sizing

   Grids fill the page. Height was hardcoded in pixels in several views —
   Job History was .Height(600).Width(1200), set once and never revisited —
   which is why they stopped short of the bottom on every screen since.

   Put .ie-grid-fill on the grid's container to let it use the viewport.
   The floor keeps it usable on a laptop in landscape.
   ------------------------------------------------------------------------- */
.ie-grid-fill .dx-datagrid-rowsview {
    min-height: 240px;
}

.ie-grid-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    .ie-grid-page > h1,
    .ie-grid-page > h2,
    .ie-grid-page > h3 {
        margin: 0;
    }