/* Subtle surface tint used by panels/info-boxes app-wide (SectionCardComponent
   header-less panels, mail-alias/AI boxes, diag panels, etc.). Referenced in
   many places but previously undefined -> rendered transparent. Map it to
   Bootstrap's tertiary background so it is theme-aware and actually fills. */
:root {
    --emma-surface-subtle: var(--bs-tertiary-bg);
    /* Mail-group left-stripe colours (alternating per email). */
    --emma-mailgroup-a: #4a90d9;
    --emma-mailgroup-b: #e07c3a;
}

/* .emma-icon defaults to var(--bs-primary); inside a Primary DxButton that's
   primary-on-primary. currentColor lets the mask inherit the button text color
   so the icon stays visible on every button variant. */
.dxbl-btn .emma-icon,
.dxbl-toolbar-item .emma-icon,
.dxbl-toolbar-text-btn .emma-icon {
    background-color: currentColor;
}

.main-view-wrapper {
    height: 100%;
    padding: 0 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Full-height variant: the app shell gives height:100% no defined height, so the wrapper must be viewport-bound for flex:1 content to fill to the bottom. Needs an intact flex chain -- use LoadingContainerComponent with PositionTarget, not the default mode. */
.main-view-wrapper.view-bounded {
    height: calc(100vh - 60px);
    overflow-y: auto;
}

/* Grid as a flex child: takes the rest of the card/column with an internal scrollbar. */
.grid-fill {
    flex: 1 1 0;
    min-height: 200px;
}

.emma-col-clickable {
    border-bottom: 2px solid var(--bs-primary) !important;
}

/* Mail-group indicator: consecutive rows from the same email share a coloured
   left stripe (alternating a/b) so related documents read as one group. Uses
   box-shadow, not border-left: a <tr> border doesn't render in the table-based
   v26.1 grid (that's why the old inline-style version vanished), and inline
   styles also break under the strict CSP. Same technique as the focused-row
   stripe below; placed before it so an actually-focused row's stripe wins. */
.emma-mailgroup-a > td:first-child { box-shadow: inset 3px 0 0 0 var(--emma-mailgroup-a); }
.emma-mailgroup-b > td:first-child { box-shadow: inset 3px 0 0 0 var(--emma-mailgroup-b); }

/* Focused AND grouped row: show BOTH stripes side by side — the group colour on
   the inner 3px, the focus stripe on 3-6px — instead of focus overwriting the
   group. Higher specificity than either single rule, so it wins when both apply. */
.dxbl-grid-focused-row.emma-mailgroup-a > td:first-child { box-shadow: inset 3px 0 0 0 var(--emma-mailgroup-a), inset 6px 0 0 0 var(--bs-primary); }
.dxbl-grid-focused-row.emma-mailgroup-b > td:first-child { box-shadow: inset 3px 0 0 0 var(--emma-mailgroup-b), inset 6px 0 0 0 var(--bs-primary); }

/* A GridAction chip that carries a number instead of an icon (the mail grid's
   attachment count) gets the same square footprint — width + padding — as the
   icon-only GridAction buttons beside it (which apply this inline). Vertical
   metrics already match via chip-xs-lite, so this lines them up exactly. */
.chip.emma-chip.chip-grid-action.chip-xs-lite:not(.chip-icon-only) {
    min-width: 26px;
    padding-left: .35rem;
    padding-right: .35rem;
    justify-content: center;
}

/* Mail-details popup: scrollable document list with subtle row separators. */
.emma-maildetails-docs { max-height: 280px; overflow-y: auto; }
.emma-maildetails-doc { border-bottom: 1px solid var(--bs-border-color); }
.emma-maildetails-doc:last-child { border-bottom: none; }

.main-view-area {
    height: calc(100vh - 60px);
    overflow: hidden;
}
.pivot-view-area {
    height: calc(100vh - 130px);
    overflow: hidden;
}

.split-view-area {
    height: calc(50vh - 30px);
    overflow: hidden;
}
.emma-overlay {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.2);
    transition: opacity 0.15s ease, visibility 0.15s ease;
}
.emma-window-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.emma-window-grid-wrapper {
    flex: 1;
    min-height: 0;
    overflow: auto;
    margin-bottom: 7px;
}
.spaced-form-wrapper {
    width: 98%;
    height: auto;
    box-sizing: border-box;
    padding: 4px;
}
.emma-footer-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    border-top: 1px solid var(--bs-border-color, #ccc) !important;
    background-color: var(--bs-body-bg, #fff) !important;
}

.emma-footer-left,
.emma-footer-right {
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
}
/* Global DxChart theme fix — DevExpress SVG doesn't inherit body colors. */
dxbl-chart.dxbl-chart-root {
    color: var(--bs-body-color);
}
    dxbl-chart.dxbl-chart-root .dxbl-chart-title,
    dxbl-chart.dxbl-chart-root .dxbl-chart-legend-text {
        color: var(--bs-body-color) !important;
    }
    dxbl-chart.dxbl-chart-root svg.dxc-chart text {
        fill: var(--bs-body-color) !important;
    }
    dxbl-chart.dxbl-chart-root svg.dxc-chart .dxc-axes-group path,
    dxbl-chart.dxbl-chart-root svg.dxc-chart .dxc-axes-group line {
        stroke: var(--bs-border-color) !important;
        opacity: 1 !important;
    }
    dxbl-chart.dxbl-chart-root svg.dxc-chart .dxc-grids-group path,
    dxbl-chart.dxbl-chart-root svg.dxc-chart .dxc-grids-group line {
        stroke: var(--bs-border-color) !important;
        opacity: 1 !important;
    }
    dxbl-chart.dxbl-chart-root svg.dxc-chart .dxc-scroll-bar rect {
        fill: var(--bs-border-color) !important;
        opacity: 1 !important;
    }
    dxbl-chart.dxbl-chart-root .dxbl-chart-tooltip {
        color: var(--bs-body-color) !important;
    }
:root[data-bs-theme="light"] dxbl-chart.dxbl-chart-root svg.dxc-chart .dxc-grids-group path,
:root[data-bs-theme="light"] dxbl-chart.dxbl-chart-root svg.dxc-chart .dxc-grids-group line {
    stroke: var(--bs-gray-400) !important;
    opacity: 1 !important;
}
:root[data-bs-theme="light"] dxbl-chart.dxbl-chart-root svg.dxc-chart .dxc-axes-group path,
:root[data-bs-theme="light"] dxbl-chart.dxbl-chart-root svg.dxc-chart .dxc-axes-group line {
    stroke: var(--bs-gray-600) !important;
    opacity: 1 !important;
}
:root[data-bs-theme="light"] dxbl-chart.dxbl-chart-root svg.dxc-chart text {
    fill: var(--bs-gray-800) !important;
}


/* TagComponent mask-icon coloring — scoped to icons inside a TagComponent wrapper only. */

:root {
    --emma-tag-icon-neutral: rgba(17,24,39,.92);
}

    :root[data-bs-theme="dark"] {
        --emma-tag-icon-neutral: rgba(255,255,255,.92);
    }

:root {
    --emma-tag-icon-ac: rgba(17,24,39,.92);
}

    :root[data-bs-theme="dark"] {
        --emma-tag-icon-ac: rgba(255,255,255,.92);
    }

.chip.emma-chip.chip-info .tag-icon-autocontrast {
    --emma-tag-icon-ac: rgba(0,55,90,.92);
}

.chip.emma-chip.chip-info-strong .tag-icon-autocontrast {
    --emma-tag-icon-ac: rgba(0,40,75,.92);
}

.chip.emma-chip.chip-warn .tag-icon-autocontrast {
    --emma-tag-icon-ac: rgba(90,45,0,.92);
}

.chip.emma-chip.chip-warn-soft .tag-icon-autocontrast {
    --emma-tag-icon-ac: rgba(80,40,0,.92);
}

.chip.emma-chip.chip-success .tag-icon-autocontrast {
    --emma-tag-icon-ac: rgba(10,65,55,.92);
}

.chip.emma-chip.chip-success-soft .tag-icon-autocontrast {
    --emma-tag-icon-ac: rgba(15,70,35,.92);
}

.chip.emma-chip.chip-danger .tag-icon-autocontrast {
    --emma-tag-icon-ac: rgba(90,10,20,.92);
}

.chip.emma-chip.chip-danger-soft .tag-icon-autocontrast {
    --emma-tag-icon-ac: rgba(90,10,20,.92);
}

:root[data-bs-theme="dark"] .chip.emma-chip.chip-info .tag-icon-autocontrast {
    --emma-tag-icon-ac: rgba(235,247,255,.92);
}

:root[data-bs-theme="dark"] .chip.emma-chip.chip-info-strong .tag-icon-autocontrast {
    --emma-tag-icon-ac: rgba(235,247,255,.92);
}

:root[data-bs-theme="dark"] .chip.emma-chip.chip-warn .tag-icon-autocontrast {
    --emma-tag-icon-ac: rgba(255,245,235,.92);
}

:root[data-bs-theme="dark"] .chip.emma-chip.chip-warn-soft .tag-icon-autocontrast {
    --emma-tag-icon-ac: rgba(255,245,235,.92);
}

:root[data-bs-theme="dark"] .chip.emma-chip.chip-success .tag-icon-autocontrast {
    --emma-tag-icon-ac: rgba(235,255,250,.92);
}

:root[data-bs-theme="dark"] .chip.emma-chip.chip-success-soft .tag-icon-autocontrast {
    --emma-tag-icon-ac: rgba(240,255,245,.92);
}

:root[data-bs-theme="dark"] .chip.emma-chip.chip-danger .tag-icon-autocontrast {
    --emma-tag-icon-ac: rgba(255,235,238,.92);
}

:root[data-bs-theme="dark"] .chip.emma-chip.chip-danger-soft .tag-icon-autocontrast {
    --emma-tag-icon-ac: rgba(255,235,238,.92);
}

.tag-icon-neutral .tag-icon-mask {
    background-color: var(--emma-tag-icon-neutral) !important;
}

.tag-icon-autocontrast .tag-icon-mask {
    background-color: var(--emma-tag-icon-ac) !important;
}

/* --- DxGrid focused row: soft highlight (app-wide) ---------------------------------
   DevExpress paints the focused-row highlight as a ::before OVERLAY behind each cell
   (a solid berry colour at 90% opacity) — NOT via the cell background, so overriding
   `td { background }` has no visible effect. Soften that overlay to a light primary
   tint, keep text at its normal colour, and add a left accent bar: the active row
   stays obvious while chips/coloured text on it stay readable. !important beats the
   theme's (non-important) overlay for base/hover/selected states in one rule.
   Applies to EVERY DxGrid (no wrapper-class scope) so all pages — Main included — get
   it. Pages that intentionally want a heavier focus (e.g. AdminDocDesigner) set their
   own !important rule on the ROW, which shows through these transparent cells, so their
   look is preserved. Targets DevExpress internals — revisit on a major DX upgrade. */
.dxbl-grid-focused-row > td::before {
    background-color: rgba(var(--bs-primary-rgb), 1) !important;
    opacity: 0.12 !important;
}
/* Base AND hover states also paint a solid cell background on the focused row
   (var(--dxbl-grid-focus-frame-color) on hover) — force it transparent so only the
   soft ::before overlay (or a page's own row background) shows. Skip the fixed/sticky
   cell: it must stay opaque or scrolled content shows through it. */
.dxbl-grid-focused-row > td:not(.dxbl-grid-fixed-cell) {
    background-color: transparent !important;
}
.dxbl-grid-focused-row > td {
    color: inherit !important;
}
.dxbl-grid-focused-row > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--bs-primary);
}