/* Mail-domain component styles.
 *
 * Expressed against Bootstrap's --bs-* custom properties so light and dark mode follow the
 * data-bs-theme attribute with no extra rules. */

/* ---------------------------------------------------------------- three-pane reader */

.mail-reader {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr) minmax(0, 40%);
    gap: var(--nexeriq-space-4);
    /* Stretch the columns to equal height and fill the space between the page header and the footer,
       so the list and reading pane are tall panes (with their own scroll) rather than a short strip
       floating in an empty page. */
    align-items: stretch;
    min-height: calc(100dvh - 15rem);
}

/* Webmail hides the in-page folder rail (its folders live in the shell sidebar), so the reader is a
   two-column list + reading pane. */
.mail-reader--no-rail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
}

/* Drawer mode (webmail): the message opens in the shell's right-bar drawer, so the reader is just the
   full-width list. The compound selector outranks the responsive .mail-reader / .mail-reader--no-rail
   column rules at every breakpoint, so no per-breakpoint override is needed. */
.mail-reader.mail-reader--drawer {
    grid-template-columns: minmax(0, 1fr);
}

/* The message body sits inside the drawer's own panel, so drop the reading card's border/shadow to
   avoid a box-in-a-box. */
.mail-drawer-reading .mail-reading-pane {
    border: 0;
    box-shadow: none;
    background: transparent;
}

/* Pages hosted inside the shell drawer (compose and the mailbox tools) are already named by the
   drawer's own header, so the page's heading would say the same thing twice. Hide it; the body
   starts at the top of the panel. The pages keep the heading when visited as real routes. */
.mail-settings-drawer-content .app-page > .page-heading {
    display: none;
}

/* Each column manages its own overflow instead of stretching the whole page. */
.mail-reader-folders,
.mail-reader-list,
.mail-reader-pane {
    min-height: 0;
}

.mail-reader-pane {
    display: flex;
    flex-direction: column;
}

/* The reading-pane card fills its column, and its body flexes so the "Select a message" empty state
   centres in the whole pane rather than sitting as a small box at the top. */
.mail-reader-pane > .mail-reading-pane {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.mail-reader-pane > .mail-reading-pane > .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* The empty "Select a message" state centres in the tall pane; a real message body sits at the top
   and scrolls. */
.mail-reader-pane > .mail-reading-pane > .card-body > .app-state-info {
    margin: auto;
}

/* The reading pane's toolbar: Back (small screens only) on the left, Previous/Next on the right. */
.mail-pane-toolbar {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-2);
    margin-bottom: var(--nexeriq-space-2);
}

.mail-pane-steps {
    display: flex;
    gap: var(--nexeriq-space-1);
    margin-left: auto;
}

/* The back button is only meaningful in the small-screen drawer; on a wide screen the pane is a
   permanent column, so hide it there. */
.mail-reader-back {
    display: none;
}

/* Between medium and large the reading pane still sits beside the list (folders + list + pane),
   just at a wider list share. */
@media (max-width: 1199.98px) {
    .mail-reader {
        grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 40%);
    }

    /* Keep the no-rail reader at two columns here; without this the 3-column rule above wins by
       source order and leaves an empty 10rem gap where the (hidden) rail would be. */
    .mail-reader--no-rail {
        grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
    }
}

/* On a phone/tablet it is one column: the folder rail becomes a horizontal strip above the list.
   Opening a message slides the reading pane in over the list as a drawer, rather than pushing the
   list off the bottom of a tall scroll. */
@media (max-width: 820px) {
    .mail-reader {
        grid-template-columns: minmax(0, 1fr);
    }

    .mail-folder-list-items {
        display: flex;
        flex-wrap: wrap;
        gap: var(--nexeriq-space-1);
    }

    /* The pane is off-screen to the right until a message is open. */
    .mail-reader-pane {
        position: fixed;
        inset: 0;
        z-index: 1045;
        margin: 0;
        padding: var(--nexeriq-space-3);
        background: var(--bs-body-bg);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.2s ease-in-out;
        visibility: hidden;
    }

    .mail-reader--reading .mail-reader-pane {
        transform: translateX(0);
        visibility: visible;
    }

    .mail-reader-back {
        display: inline-flex;
        align-items: center;
        gap: var(--nexeriq-space-2);
        margin-bottom: var(--nexeriq-space-2);
        padding: var(--nexeriq-space-1) var(--nexeriq-space-half);
        border: 0;
        background: transparent;
        color: var(--bs-primary);
        font-weight: 600;
    }
}

/* Respect a reduced-motion preference: no slide, just show/hide. */
@media (prefers-reduced-motion: reduce) {
    .mail-reader-pane {
        transition: none;
    }
}

/* Buttons line up with the input, one label's height below the top of the row. */
.mail-reader-search {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--nexeriq-space-2);
    margin-bottom: var(--nexeriq-space-3);
}

.mail-reader-search > .btn {
    margin-top: var(--nexeriq-space-8);
}

.mail-reader-search-field {
    flex: 1 1 12rem;
    min-width: 12rem;
}

.mail-reader-search .app-field + .app-field {
    margin-top: 0;
}

/* ---- personal settings (DM-838): A3 sections, row panels ---- */

/* A settings section (Figma A3): a card at a readable 720 px, its title and one-line description in the header,
   the action on the header's trailing side, the fields stacked one per row, caption above. The Portal's own
   settings pages use .portal-form-section from portal.css; these pages live in Web.Shared, which does not
   reach that stylesheet's rules by name, so the same measure is stated here. Lists keep the full width. */
.mail-form-section {
    max-width: 45rem;
}

/* On a phone AppCard stacks its header, but Bootstrap's !important alignment utilities on the header row win and
   centre the title with the action on the far side. A3 at 390 keeps both on the leading edge. */
@media (max-width: 575.98px) {
    .mail-form-section .app-card-header-row {
        align-items: stretch !important;
    }

    .mail-form-section .app-card-header-row > div:last-child {
        justify-content: flex-start !important;
    }
}

/* Read-only facts in a section or a row panel: caption, then value. */
.mail-form-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--nexeriq-space-2) var(--nexeriq-space-4);
    margin: 0;
}

.mail-form-facts dt {
    font-weight: 600;
}

.mail-form-facts dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Host names and ports read as values, not as Bootstrap's pink inline code, which fails AA contrast on a card. */
.mail-form-facts code {
    color: var(--nexeriq-text);
}

/* A list row's facts and actions in the right bar (below 768 px a row opens them). */
.mail-row-actions {
    display: flex;
    flex-direction: column;
    gap: var(--nexeriq-space-4);
    padding: var(--nexeriq-space-4);
}

.mail-row-actions:focus-visible,
.mail-settings-list:focus-visible {
    outline: 2px solid var(--nexeriq-focus);
    outline-offset: -2px;
}

.webmail-import-port-field {
    max-width: 10rem;
}

.webmail-import-progress {
    width: 100%;
}

/* ---- side-pane pages: calendar, contact books ---- */

.mail-side-pane {
    flex: 0 0 16rem;
    min-width: 12rem;
}

.mail-main-pane {
    flex: 1 1 22rem;
    min-width: 0;
}

/* NexerIQ/Overline: a small uppercase label over a group of items. */
.mail-overline {
    display: block;
    text-transform: uppercase;
    font-size: var(--nexeriq-type-overline-size);
    line-height: var(--nexeriq-type-overline-line-height);
    font-weight: var(--nexeriq-type-overline-weight);
    letter-spacing: var(--nexeriq-type-overline-letter-spacing);
    color: var(--bs-secondary-color);
}

.mail-clickable-label {
    cursor: pointer;
    min-width: 0;
}

.calendar-swatch {
    display: inline-block;
    flex: 0 0 auto;
    width: var(--nexeriq-space-3);
    height: var(--nexeriq-space-3);
    border-radius: 50%;
    background: var(--calendar-color, var(--bs-secondary-color));
}

/* ---- webmail: calendar page (DM-836, Figma P7 / M5) ---- */

/* Mini month + calendar list beside the views from md up; one column on a phone, where the side column is in the
   right bar instead (its Calendars button). */
.calendar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nexeriq-space-4);
    align-items: start;
}

.calendar-side {
    display: none;
}

.calendar-main {
    min-width: 0;
}

@media (min-width: 768px) {
    .calendar-layout {
        grid-template-columns: 17rem minmax(0, 1fr);
    }

    .calendar-side {
        display: flex;
        flex-direction: column;
        gap: var(--nexeriq-space-4);
    }
}

.calendar-side-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nexeriq-space-2);
}

/* The page's own toolbar drives the grid (it also drives the agenda, which the grid's toolbar cannot), so the
   grid's built-in toolbar would be a second, disagreeing set of the same controls. AppScheduler has no switch for
   it yet; this hides it until it does. Coupled to DevExpress's internal class name: CalendarSchedulerToolbarCoupling-
   Tests fails if the restored DevExpress.Blazor stops shipping it. display:none also takes the toolbar's buttons out
   of the Tab order. */
.calendar-scheduler .dxbl-sc-tb-wrapper {
    display: none;
}

/* The mini month shades what the main view shows; today keeps a ring so it is findable in any week. */
.calendar-mini-month .calendar-mini-in-range {
    /* The calendar's weekend tint does not keep its contrast on the shading, so shaded days use body text. */
    color: var(--bs-body-color);
    background: var(--nexeriq-primary-subtle);
    border-radius: var(--nexeriq-radius-sm);
}

.calendar-mini-month .calendar-mini-today {
    box-shadow: inset 0 0 0 var(--bs-border-width) var(--nexeriq-primary);
    border-radius: 50%;
}

.calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nexeriq-space-2);
    margin-bottom: var(--nexeriq-space-3);
}

.calendar-toolbar-nav,
.calendar-toolbar-end,
.calendar-views {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nexeriq-space-2);
}

.calendar-period {
    flex: 1 1 auto;
    margin: 0 0 0 var(--nexeriq-space-2);
    font-size: var(--nexeriq-type-heading-size);
    line-height: var(--nexeriq-type-heading-line-height);
    font-weight: var(--nexeriq-type-heading-weight);
}

/* Icon-only toolbar buttons on a phone meet the 44 px tap target the phone frames use. */
.calendar-icon-button {
    min-width: 2.75rem;
    min-height: 2.75rem;
}

/* A phone: the arrows, Today and the Calendars button on one row, the period under them. */
@media (max-width: 767.98px) {
    .calendar-period {
        flex: 1 1 100%;
        order: 3;
        margin: 0;
        font-size: var(--nexeriq-type-body-strong-size);
    }

    .calendar-toolbar button {
        min-height: 2.75rem;
    }
}

/* AppScheduler/DayHeader on a phone: the week strip. */
.calendar-week-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin: 0 calc(-1 * var(--nexeriq-space-3)) var(--nexeriq-space-3);
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.calendar-week-strip-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nexeriq-space-1);
    min-height: 3.5rem;
    padding: var(--nexeriq-space-2) 0;
    border: 0;
    background: transparent;
    color: var(--bs-body-color);
}

.calendar-week-strip-day.is-weekend {
    background: var(--bs-tertiary-bg);
}

.calendar-week-strip-weekday {
    font-size: var(--nexeriq-type-caption-size);
    color: var(--bs-secondary-color);
}

.calendar-week-strip-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-weight: var(--nexeriq-type-body-strong-weight);
}

.calendar-week-strip-day.is-today .calendar-week-strip-weekday {
    color: var(--nexeriq-primary-text);
}

.calendar-week-strip-day.is-today .calendar-week-strip-date {
    background: var(--nexeriq-primary);
    color: var(--nexeriq-on-primary);
}

.calendar-week-strip-day.is-selected:not(.is-today) .calendar-week-strip-date {
    box-shadow: inset 0 0 0 var(--bs-border-width) var(--nexeriq-primary);
}

.calendar-week-strip-day:focus-visible {
    outline: 2px solid var(--nexeriq-focus);
    outline-offset: -2px;
}

/* AppScheduler/Appointment Kind=Agenda: colour bar, time, subject. */
.calendar-agenda-day + .calendar-agenda-day {
    margin-top: var(--nexeriq-space-3);
}

.calendar-agenda-heading {
    margin: 0 0 var(--nexeriq-space-1);
}

.calendar-agenda-heading:focus {
    outline: none;
}

.calendar-agenda-heading:focus-visible {
    outline: 2px solid var(--nexeriq-focus);
}

.calendar-agenda-none {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: var(--nexeriq-type-small-size);
}

.calendar-agenda-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.calendar-agenda-row {
    display: grid;
    grid-template-columns: var(--nexeriq-space-1) 6.5rem minmax(0, 1fr);
    align-items: center;
    column-gap: var(--nexeriq-space-3);
    width: 100%;
    min-height: 2.75rem;
    padding: var(--nexeriq-space-1) var(--nexeriq-space-2) var(--nexeriq-space-1) 0;
    border: 0;
    border-radius: var(--nexeriq-radius-sm);
    background: transparent;
    color: var(--bs-body-color);
    text-align: start;
}

.calendar-agenda-row:hover {
    background: var(--nexeriq-hover);
}

/* Secondary text keeps 4.5:1 on the hover tint only as body text. */
.calendar-agenda-row:hover .calendar-agenda-time {
    color: var(--bs-body-color);
}

.calendar-agenda-row:focus-visible {
    outline: 2px solid var(--nexeriq-focus);
    outline-offset: -2px;
}

.calendar-agenda-bar {
    align-self: stretch;
    border-radius: var(--nexeriq-radius-sm);
    background: var(--calendar-color, var(--nexeriq-primary));
}

.calendar-agenda-time {
    color: var(--bs-secondary-color);
    font-size: var(--nexeriq-type-small-size);
    white-space: nowrap;
}

.calendar-agenda-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Focus targets, not controls: an overlay takes the focus when it opens and the main column gets it back as a
   fallback, so neither draws a ring of its own. */
.calendar-main:focus,
.calendar-overlay:focus {
    outline: none;
}

/* The calendars panel in the right bar. */
.calendar-manage-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.calendar-manage-row {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-2);
    min-height: 2.75rem;
}

/* ---- Mail/FloatingAction (Figma 168:2034): phones only ---- */

.mail-floating-action-host {
    position: fixed;
    right: var(--nexeriq-space-4);
    bottom: var(--nexeriq-space-6);
    z-index: 1030;
}

.mail-floating-action-host .mail-floating-action {
    width: 3.5rem;
    height: 3.5rem;
    min-width: 3.5rem;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    box-shadow: var(--bs-box-shadow-lg);
}

/* Room under the last row so the button never covers it. */
.mail-floating-action-clearance {
    padding-bottom: calc(3.5rem + var(--nexeriq-space-6) + var(--nexeriq-space-2));
}

/* The desktop side of the work view's one phone breakpoint (MailViewport.PhoneMediaQuery, interim pending NEXER-1353). */
@media not all and (max-width: 767.98px) {
    .mail-floating-action-host {
        display: none;
    }

    .mail-floating-action-clearance {
        padding-bottom: 0;
    }
}

.mail-qr-plate {
    max-width: 15rem;
}

/* ---- webmail: calendar event drawer ---- */

.mail-calendar-event-drawer,
.mail-calendar-event-drawer .app-field,
.calendar-event-field {
    min-width: 0;
}

.calendar-event-tabs {
    margin-top: var(--nexeriq-space-4);
}

.calendar-event-tab-pane {
    min-width: 0;
    padding-top: var(--nexeriq-space-3);
}

.calendar-attendee-controls {
    margin-top: var(--nexeriq-space-1);
    margin-bottom: var(--nexeriq-space-2);
}

.calendar-attendee-list {
    display: grid;
    gap: var(--nexeriq-space-2);
}

.calendar-attendee-row,
.calendar-proposal-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: var(--nexeriq-space-2);
    min-width: 0;
}

.calendar-proposal-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: var(--nexeriq-space-1) 0;
}

.calendar-attendee-row > .btn,
.calendar-proposal-row > .btn {
    justify-self: end;
}

.calendar-attendee-add-button,
.calendar-event-command-button {
    min-width: 6.5rem;
}

.calendar-event-actions {
    padding-top: var(--nexeriq-space-1);
}

@media (max-width: 575.98px) {
    .calendar-attendee-row,
    .calendar-proposal-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* ---- settings: visual mailbox rules builder ---- */

.mail-rules-builder {
    display: grid;
    grid-template-columns: minmax(22rem, 0.95fr) minmax(26rem, 1.3fr);
    gap: var(--nexeriq-space-4);
    align-items: start;
}

.mail-rules-list,
.mail-rules-editor {
    min-width: 0;
}

.mail-rules-builder-drawer {
    grid-template-columns: minmax(0, 1fr);
}

.mail-rule-drawer {
    min-width: 0;
}

.mail-rule-editor-content {
    min-width: 0;
}

.mail-rules-toolbar,
.mail-rule-section-header,
.mail-rule-section-tools,
.mail-rule-action-header,
.mail-rule-order-buttons,
.mail-rule-webhook-toolbar,
.mail-rule-nested-header,
.mail-rule-nested-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nexeriq-space-2);
}

.mail-rules-toolbar,
.mail-rule-section-header,
.mail-rule-action-header,
.mail-rule-nested-header {
    justify-content: space-between;
}

.mail-rule-row-card {
    display: grid;
    gap: var(--nexeriq-space-1);
    min-width: 0;
}

.mail-rule-row-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--nexeriq-space-2);
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bs-body-color);
    font: inherit;
    font-weight: 600;
    text-align: left;
}

.mail-rule-row-title > span:first-child,
.mail-rule-row-summary,
.mail-rule-status {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mail-rule-row-summary,
.mail-rule-status {
    color: var(--bs-secondary-color);
    font-size: var(--nexeriq-type-body-size);
}

.mail-rule-form-grid,
.mail-rule-condition-row,
.mail-rule-webhook-create,
.mail-rule-range-editor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--nexeriq-space-3);
    align-items: end;
}

.mail-rule-summary-panel,
.mail-rule-section,
.mail-rule-nested-group,
.mail-rule-action-row {
    margin-top: var(--nexeriq-space-4);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--nexeriq-radius-md);
    padding: var(--nexeriq-space-4);
    background: var(--bs-body-bg);
}

.mail-rule-summary-panel {
    background: var(--bs-tertiary-bg);
}

.mail-rule-section-header > h3 {
    margin: 0;
    font-size: 1rem;
}

.mail-rule-section-header {
    align-items: flex-end;
}

.mail-rule-section-header-controls-only {
    justify-content: flex-start;
}

.mail-rule-section-header-controls-only .mail-rule-section-tools {
    width: 100%;
}

.mail-rule-section-tools {
    align-items: flex-end;
    gap: var(--nexeriq-space-2) var(--nexeriq-space-3);
}

.mail-rule-section-tools > .mail-rule-operator-select {
    flex: 0 1 12rem;
}

.mail-rule-advanced-check {
    min-height: 2.375rem;
    display: flex;
    align-items: center;
}

.mail-rule-form-grid > .app-field,
.mail-rule-condition-row > .app-field,
.mail-rule-section-tools > .app-field,
.mail-rule-action-header > .app-field,
.mail-rule-webhook-create > .app-field,
.mail-rule-range-editor > .app-field,
.mail-rule-value-editor > .app-field {
    margin-top: 0;
}

.mail-rule-condition-row,
.mail-rule-action-row {
    margin-top: var(--nexeriq-space-3);
}

.mail-rule-action-row > .mail-rule-value-editor {
    margin-top: var(--nexeriq-space-3);
}

.mail-rule-field,
.mail-rule-action-select,
.mail-rule-value-editor {
    min-width: 0;
}

.mail-rule-operator-select {
    min-width: 9rem;
}

.mail-rule-webhook-create {
    margin-top: var(--nexeriq-space-3);
    align-items: end;
}

.mail-rule-webhook-toolbar {
    margin-top: var(--nexeriq-space-3);
}

.mail-rule-webhook-create-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nexeriq-space-2);
}

.mail-rule-action-header {
    align-items: flex-end;
}

.mail-rule-tabs {
    margin-top: var(--nexeriq-space-4);
}

.mail-rule-tabs .tab-content {
    padding-top: var(--nexeriq-space-3) !important;
}

.mail-rule-tabs .mail-rule-section:first-child {
    margin-top: 0;
}

.mail-rule-template-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nexeriq-space-2);
    margin-top: var(--nexeriq-space-3);
}

@media (max-width: 1100px) {
    .mail-rules-builder {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .mail-rule-order-buttons,
    .mail-rule-section-tools {
        width: 100%;
        justify-content: flex-start;
    }

    .mail-rule-section-tools > .mail-rule-operator-select {
        flex-basis: 100%;
    }
}

/* The message grid scrolls inside its column rather than widening the page. */
.mail-reader-list {
    min-width: 0;
    overflow-x: auto;
}

/* ---- conversation (thread) view ---- */

.mail-list-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--nexeriq-space-2) var(--nexeriq-space-3);
    margin-bottom: var(--nexeriq-space-2);
}

/* The compact create-folder control shown in the toolbar when the folder rail is hidden. */
.mail-list-newfolder {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-2);
}

.mail-list-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--nexeriq-space-3);
    padding: var(--nexeriq-space-3) 0 var(--nexeriq-space-1);
}

/* ---- ribbon view types (Detail / Compact / Plain) ---- */

/* Detail view: the default, comfortable multi-column grid for everyday triage. */
.mail-grid-detail {
    --dxbl-grid-text-cell-padding-y: 0.625rem;
}

/* Compact view: same columns, tighter rows so more messages fit on screen. */
.mail-grid-compact {
    --dxbl-grid-text-cell-padding-y: 0.1875rem;
    font-size: var(--nexeriq-type-body-size);
    line-height: 1.2;
}

.mail-grid-compact .mail-sender-avatar {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    max-width: 1.5rem;
    max-height: 1.5rem;
    flex-basis: 1.5rem;
    font-size: var(--nexeriq-type-overline-size);
}

/* A sender cell: the resolved sender image beside the name, name truncating. */
.mail-sender {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-2);
    min-width: 0;
}

.mail-sender-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    max-width: 2rem;
    max-height: 2rem;
    overflow: hidden;
}

.mail-sender-avatar .avatar-title,
.mail-sender-avatar .app-icon-avatar-image,
.mail-sender-avatar img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.mail-sender-name {
    min-width: 0;
}

/* When the host wires OnSenderClick the name is a button that opens a contact card. It must read as
   the surrounding text, not a form button: no chrome until hovered/focused. */
button.mail-sender-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    max-width: 100%;
}

button.mail-sender-link:hover,
button.mail-sender-link:focus-visible {
    text-decoration: underline;
}

/* Plain view: an avatar beside a stacked subject-over-sender-and-date cell, like a classic list. */
.mail-grid-plain {
    --dxbl-grid-text-cell-padding-y: 0.375rem;
}

.mail-plain-row {
    display: flex;
    align-items: flex-start;
    gap: var(--nexeriq-space-3);
    line-height: 1.25;
    min-width: 0;
}

.mail-plain-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mail-plain-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.mail-plain-meta {
    font-size: var(--nexeriq-type-small-size);
}

/* The currently selected view type, highlighted in the ribbon. */
.app-ribbon-item-active {
    font-weight: 600;
    background-color: var(--bs-secondary-bg);
}

.mail-list-newfolder .form-control-sm,
.mail-list-newfolder .app-field {
    /* The folder-name box is an App editor wrapping a DevExpress input (DevOp.Blazor.Shared 0.4), so
       the width goes on its .app-field wrapper rather than on a .form-control it no longer renders. */
    width: 10rem;
}

/* The count badge beside a conversation's subject. */
.mail-thread-badge {
    display: inline-block;
    margin-left: var(--nexeriq-space-2);
    padding: 0 var(--nexeriq-space-2);
    border-radius: 1rem;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: var(--nexeriq-type-caption-size);
    font-variant-numeric: tabular-nums;
}

.mail-thread {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mail-thread-ai-summary {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: var(--nexeriq-space-3);
    margin-bottom: var(--nexeriq-space-3);
    background: var(--bs-tertiary-bg);
}

.mail-thread-ai-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nexeriq-space-3);
    margin-bottom: var(--nexeriq-space-2);
}

.mail-thread-ai-summary-label {
    display: block;
    font-weight: 600;
}

.mail-thread-ai-summary-time {
    display: block;
    font-size: var(--nexeriq-type-small-size);
}

.mail-thread-ai-summary-state,
.mail-thread-ai-summary-text {
    margin: 0;
}

.mail-thread-ai-summary-lists {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--nexeriq-space-3);
    margin-top: var(--nexeriq-space-3);
}

.mail-thread-ai-summary-lists h3 {
    font-size: var(--nexeriq-type-body-size);
    margin: 0 0 var(--nexeriq-space-1);
}

.mail-thread-ai-summary-lists ul {
    margin: 0;
    padding-left: var(--nexeriq-space-4);
}

.mail-thread-ai-summary-attachments,
.mail-thread-ai-summary-sources {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nexeriq-space-2);
    margin-top: var(--nexeriq-space-3);
}

.mail-thread-ai-source {
    display: inline-flex;
    align-items: center;
    gap: var(--nexeriq-space-1);
    max-width: 100%;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    padding: var(--nexeriq-space-1) var(--nexeriq-space-2);
    font-size: var(--nexeriq-type-small-size);
}

.mail-thread-ai-source:hover,
.mail-thread-ai-source:focus-visible {
    border-color: var(--bs-primary);
}

.mail-thread-item {
    border-top: var(--bs-border-width) solid var(--bs-border-color);
    padding: var(--nexeriq-space-2) 0;
}

.mail-thread-item:first-child {
    border-top: 0;
}

/* The collapsed one-line header for a message in a thread. */
.mail-thread-summary {
    display: flex;
    align-items: baseline;
    gap: var(--nexeriq-space-3);
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: var(--nexeriq-space-half) 0;
    color: var(--bs-body-color);
}

.mail-thread-from {
    font-weight: 600;
    flex: 0 0 auto;
}

.mail-thread-snippet {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-thread-date {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: var(--nexeriq-type-small-size);
}

.mail-thread-recipients {
    margin-bottom: var(--nexeriq-space-2);
}

.mail-thread-message-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--nexeriq-space-1);
    margin: var(--nexeriq-space-1) 0 var(--nexeriq-space-2);
}

/* ---- keyboard shortcut cheat sheet ---- */

.mail-shortcuts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--nexeriq-space-2) var(--nexeriq-space-4);
    margin: 0;
    align-items: baseline;
}

.mail-shortcuts dt {
    margin: 0;
    text-align: right;
}

.mail-shortcuts dd {
    margin: 0;
    color: var(--bs-secondary-color);
}

.mail-shortcuts kbd {
    font-size: var(--nexeriq-type-small-size);
}

/* ---------------------------------------------------------------- folder rail */

.mail-folder-list-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mail-folder {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-2);
    width: 100%;
    padding: var(--nexeriq-space-2) var(--nexeriq-space-2);
    border: 0;
    border-radius: var(--bs-border-radius-sm);
    background: transparent;
    color: var(--bs-body-color);
    text-align: left;
}

/* The name takes the slack so the count pins to the right edge. */
.mail-folder .mail-folder-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-folder > i {
    width: 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
    flex: 0 0 auto;
}

.mail-folder.is-active > i {
    color: inherit;
}

.mail-folder:hover {
    background: var(--bs-secondary-bg);
}

.mail-folder.is-active {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-emphasis-color);
    font-weight: 600;
}

/* The rail is keyboard-navigable, so the focused folder must be visible. */
.mail-folder:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.mail-folder-count {
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
    font-size: var(--nexeriq-type-small-size);
    font-variant-numeric: tabular-nums;
}

.mail-folder.is-active .mail-folder-count {
    color: inherit;
}

/* ---- create-folder affordance ---- */

.mail-folder-new {
    margin-top: var(--nexeriq-space-2);
    padding-top: var(--nexeriq-space-2);
    border-top: var(--bs-border-width) solid var(--bs-border-color);
    display: flex;
    flex-wrap: wrap;
    gap: var(--nexeriq-space-1);
    align-items: center;
}

.mail-folder-new .form-control,
.mail-folder-new > .app-field {
    /* The App editor's .app-field wrapper is the flex item since DevOp.Blazor.Shared 0.4 moved the
       input onto a DevExpress editor; the .form-control selector is kept for any raw input. */
    flex: 1 1 8rem;
    min-width: 0;
}

.mail-folder-new-trigger {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-2);
    width: 100%;
    padding: var(--nexeriq-space-1) var(--nexeriq-space-2);
    border: 0;
    border-radius: var(--bs-border-radius-sm);
    background: transparent;
    color: var(--bs-secondary-color);
    text-align: left;
}

.mail-folder-new-trigger:hover {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* ---------------------------------------------------------------- reading pane */

.mail-reading-pane-subject {
    margin: 0 0 var(--nexeriq-space-1);
    font-size: 1.05rem;
    font-weight: 600;
}

.mail-reading-pane-meta {
    margin-bottom: var(--nexeriq-space-2);
}

.mail-reading-pane-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nexeriq-space-1);
    margin-bottom: var(--nexeriq-space-2);
}

/* The message body renders inside a sandboxed iframe (MailBodyFrame, DM-330) so a sanitizer bypass
   cannot run script in the app origin. mail-body-frame.js auto-sizes the frame to its content; the
   content styling (width containment, blocked-image placeholder, white canvas) lives inside the frame
   document, not here. */
.mail-body-frame {
    display: block;
    width: 100%;
    border: 0;
    margin: 0;
    color-scheme: light;
    background: Canvas;
}

.mail-reading-pane-body {
    margin: 0;
}

.mail-images-bar {
    margin-bottom: var(--nexeriq-space-3);
}

.mail-body-view-toggle {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 var(--nexeriq-space-2);
}

.mail-message-headers {
    max-height: min(60vh, 42rem);
    margin: 0;
    padding: var(--nexeriq-space-3);
    overflow: auto;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-size: var(--nexeriq-type-small-size);
    line-height: 1.45;
    white-space: pre;
}

/* ---------------------------------------------------------------- attachments */

.mail-attachments {
    margin-top: var(--nexeriq-space-4);
    padding-top: var(--nexeriq-space-3);
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

.mail-attachment-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nexeriq-space-2);
}

.mail-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--nexeriq-space-2);
    padding: var(--nexeriq-space-2) var(--nexeriq-space-3);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    text-decoration: none;
    max-width: 100%;
}

a.mail-attachment-chip:hover {
    border-color: var(--bs-primary);
    background: var(--bs-tertiary-bg);
}

.mail-attachment-chip-static {
    opacity: 0.75;
}

.mail-attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 16rem;
}

.mail-attachment-size {
    font-size: var(--nexeriq-type-small-size);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- domain health card (DM-835)

   Mail/DomainHealthCard (Figma 112:1567) and its Check rows (112:1410). The icon colour repeats the badge;
   the badge text carries the meaning. */

.mail-domain-health {
    display: flex;
    flex-direction: column;
    gap: var(--nexeriq-space-3);
    padding: var(--nexeriq-space-4);
    background: var(--nexeriq-surface);
    border: 1px solid var(--nexeriq-border);
    border-radius: var(--nexeriq-radius-lg);
    min-width: 0;
}

.mail-domain-health-header,
.mail-domain-health-footer {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-2);
    min-width: 0;
}

.mail-domain-health-header > i {
    color: var(--nexeriq-text);
    width: 16px;
    text-align: center;
}

.mail-domain-health-name {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: var(--nexeriq-type-heading-size);
    line-height: var(--nexeriq-type-heading-line-height);
    font-weight: var(--nexeriq-type-heading-weight);
    color: var(--nexeriq-text);
}

.mail-domain-health-checks {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mail-domain-health-check {
    display: flex;
    align-items: flex-start;
    gap: var(--nexeriq-space-2);
    padding: var(--nexeriq-space-2) 0;
    border-bottom: 1px solid var(--nexeriq-border);
}

.mail-domain-health-icon {
    flex: 0 0 16px;
    margin-top: 2px;
    text-align: center;
    color: var(--nexeriq-muted);
}

.mail-domain-health-check[data-status="pass"] .mail-domain-health-icon {
    color: var(--nexeriq-success-text);
}

.mail-domain-health-check[data-status="review"] .mail-domain-health-icon {
    color: var(--nexeriq-warning);
}

.mail-domain-health-check[data-status="fail"] .mail-domain-health-icon {
    color: var(--nexeriq-danger-text);
}

.mail-domain-health-text {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--nexeriq-space-half);
    min-width: 0;
}

.mail-domain-health-label {
    font-size: var(--nexeriq-type-body-strong-size);
    line-height: var(--nexeriq-type-body-strong-line-height);
    font-weight: var(--nexeriq-type-body-strong-weight);
    color: var(--nexeriq-text);
}

.mail-domain-health-detail {
    overflow-wrap: anywhere;
    font-size: var(--nexeriq-type-small-size);
    line-height: var(--nexeriq-type-small-line-height);
    color: var(--nexeriq-text-secondary);
}

.mail-domain-health-checked {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--nexeriq-type-caption-size);
    line-height: var(--nexeriq-type-caption-line-height);
    color: var(--nexeriq-muted);
}

/* ---------------------------------------------------------------- culture selector */

.culture-selector {
    display: inline-flex;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

.culture-option {
    padding: 0.25rem 0.55rem;
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.6;
}

.culture-option + .culture-option {
    border-left: var(--bs-border-width) solid var(--bs-border-color);
}

.culture-option:hover {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* DM-817: the selector now sits in the avatar menu beside the theme options, and is marked the same way:
   the platform's subtle primary with its text tone, a pair the token profile keeps at AA in both themes. */
.culture-option.is-active {
    background: var(--nexeriq-primary-subtle);
    color: var(--nexeriq-primary-text);
}

.culture-option:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}


/* ------------------------------------------------------------------ sign-in card

   Both hosts sign a user in, and both do it outside the shell on EmptyLayout, so the card that
   holds the form lives here rather than once in each app's stylesheet. Admin.Web and Web both
   link this file. */

.mail-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: var(--nexeriq-space-6);
    background: var(--nexeriq-bg);
}

/* Velex cards carry no border, and in dark mode the card surface is the same colour as the page.
   Off the shell there is no other chrome to separate them, so the card draws its own edge. */
.mail-auth-card {
    width: 100%;
    max-width: 24rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    box-shadow: var(--bs-box-shadow-lg);
}

.mail-auth-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nexeriq-space-1);
    margin-bottom: var(--nexeriq-space-4);
}

.mail-brand-lockup {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
}

.mail-brand-lockup-image {
    width: min(13rem, 100%);
    height: auto;
}

/* The lockup ships a light and a dark artwork; show the one that matches data-bs-theme. */
.mail-brand-light {
    display: inline-block;
}

.mail-brand-dark {
    display: none;
}

[data-bs-theme="dark"] .mail-brand-light {
    display: none;
}

[data-bs-theme="dark"] .mail-brand-dark {
    display: inline-block;
}

.mail-auth-qualifier {
    margin-left: var(--nexeriq-space-half);
}

/* The password sign-in is admin break-glass (mailbox users use SSO), so it lives behind a native
   <details> disclosure — no Blazor circuit, so it works on the static login page. The summary reads as a
   quiet secondary action beneath the primary account button, not a second button competing with it. */
.mail-auth-password {
    margin-top: var(--nexeriq-space-1);
    border-top: var(--bs-border-width) solid var(--bs-border-color);
    padding-top: var(--nexeriq-space-3);
}

.mail-auth-password > summary {
    cursor: pointer;
    list-style: none; /* drop the default disclosure triangle; the centered label is the affordance */
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: var(--nexeriq-type-body-size);
    padding: var(--nexeriq-space-1) 0;
    user-select: none;
}

.mail-auth-password > summary::-webkit-details-marker {
    display: none;
}

.mail-auth-password > summary:hover,
.mail-auth-password > summary:focus-visible {
    color: var(--bs-body-color);
    text-decoration: underline;
}

.mail-auth-password[open] > summary {
    margin-bottom: var(--nexeriq-space-2);
}

/* ------------------------------------------------------ managed compose signature */

.webmail-managed-signature {
    display: grid;
    gap: var(--nexeriq-space-3);
}

.webmail-managed-signature-panel {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--nexeriq-radius-md);
    padding: var(--nexeriq-space-4);
    background: var(--bs-body-bg);
}

.webmail-quoted-history {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--nexeriq-radius-md);
    padding: var(--nexeriq-space-4);
    background: var(--bs-tertiary-bg);
}

.webmail-managed-signature-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nexeriq-space-3);
    margin-bottom: var(--nexeriq-space-3);
    color: var(--bs-secondary-color);
}

/* The section title keeps body contrast: on the quoted history's tertiary background the secondary colour is 4.3:1
   (axe, DM-841 reply evidence); the detail beside it stays secondary. */
.webmail-managed-signature-header > strong {
    color: var(--bs-body-color);
}

.webmail-signature-preview {
    display: block;
    width: 100%;
    min-height: 8rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--nexeriq-radius-sm);
    color-scheme: light;
    background: Canvas;
}

.webmail-signature-select {
    max-width: 28rem;
}

/* ================================================================ DM-837 contacts: begin (P8 / M6 / M7) */

/* P8: the book list beside the grid. Below 768 px the list gives way to the book picker (M6). */
.contacts-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nexeriq-space-4);
}

.contacts-books {
    display: none;
}

.contacts-main {
    min-width: 0;
}

.contacts-book-picker {
    margin-bottom: var(--nexeriq-space-2);
}

@media (min-width: 768px) {
    .contacts-layout {
        grid-template-columns: 14rem minmax(0, 1fr);
    }

    .contacts-books {
        display: block;
    }

    .contacts-book-picker {
        display: none;
    }
}

.contacts-book-group + .contacts-book-group {
    margin-top: var(--nexeriq-space-3);
}

/* NexerIQ/Overline, as .mail-overline. */
.contacts-book-scope {
    margin: 0 0 var(--nexeriq-space-1);
    padding: 0 var(--nexeriq-space-2);
    text-transform: uppercase;
    font-size: var(--nexeriq-type-overline-size);
    line-height: var(--nexeriq-type-overline-line-height);
    font-weight: var(--nexeriq-type-overline-weight);
    letter-spacing: var(--nexeriq-type-overline-letter-spacing);
    color: var(--bs-secondary-color);
}

.contacts-book-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The same row as the folder rail (.mail-folder): name takes the slack, the count pins right. */
.contacts-book {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-2);
    width: 100%;
    min-height: 2rem;
    padding: var(--nexeriq-space-1) var(--nexeriq-space-2);
    border: 0;
    border-radius: var(--bs-border-radius-sm);
    background: transparent;
    color: var(--bs-body-color);
    text-align: left;
}

.contacts-book > i {
    width: 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
    flex: 0 0 auto;
}

.contacts-book-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contacts-book-count {
    flex: 0 0 auto;
    padding: 0 var(--nexeriq-space-2);
    border-radius: var(--nexeriq-radius-sm);
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: var(--nexeriq-type-small-size);
    font-variant-numeric: tabular-nums;
}

.contacts-book:hover {
    background: var(--bs-secondary-bg);
}

.contacts-book.is-active {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 600;
}

.contacts-book.is-active > i {
    color: inherit;
}

.contacts-book:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

/* The name opens the contact in the table; a list row is its own open button, so there it is text. */
/* 24 px tall at least: WCAG 2.2 target size (2.5.8). */
.contacts-name-link {
    min-height: 1.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-link-color);
    text-align: left;
}

.contacts-name-link:hover {
    color: var(--bs-link-hover-color);
    text-decoration: underline;
}

.contacts-name-text {
    display: none;
}

.app-grid-mobile-row .contacts-name-link {
    display: none;
}

.app-grid-mobile-row .contacts-name-text {
    display: inline;
}

/* The contact in the right bar: identity, actions, then AppGrid/Card/Term rows. */
.contacts-detail {
    display: flex;
    flex-direction: column;
    gap: var(--nexeriq-space-4);
    padding: var(--nexeriq-space-4);
}

.contacts-detail-identity {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-3);
}

.contacts-detail-name {
    margin: 0;
    font-size: var(--nexeriq-type-title-size);
    line-height: var(--nexeriq-type-title-line-height);
    font-weight: var(--nexeriq-type-title-weight);
    overflow-wrap: anywhere;
}

.contacts-detail-role {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: var(--nexeriq-type-small-size);
}

.contacts-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nexeriq-space-2);
}

/* M7: the actions share the width evenly on a phone. */
@media (max-width: 767.98px) {
    .contacts-detail-actions > * {
        flex: 1 1 0;
    }
}

.contacts-detail-terms {
    display: flex;
    flex-direction: column;
    gap: var(--nexeriq-space-3);
    margin: 0;
}

.contacts-term dt {
    margin: 0;
    text-transform: uppercase;
    font-size: var(--nexeriq-type-overline-size);
    line-height: var(--nexeriq-type-overline-line-height);
    font-weight: var(--nexeriq-type-overline-weight);
    letter-spacing: var(--nexeriq-type-overline-letter-spacing);
    color: var(--bs-secondary-color);
}

.contacts-term dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.contacts-term dd > a {
    display: block;
    min-height: 1.5rem;
    line-height: 1.5rem;
}

/* M6 has no page heading: the top bar already names the area and the book picker names the book. The h1
   stays for assistive technology. */
@media (max-width: 767.98px) {
    .contacts-page > .page-heading {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* Focus lands on these when a contact opens and when Escape closes it: landing spots, not controls. */
.contacts-main:focus,
.contacts-detail:focus {
    outline: none;
}

/* ================================================================ DM-837 contacts: end */

/* ================================================================ webmail work view (DM-834)

   Interim breakpoint, pending NEXER-1353 (AppViewport): every phone rule in this block is
   @media (max-width: 767.98px), the value MailViewport.PhoneMediaQuery names on the C# side. One width,
   so there is one thing to replace when AppViewport lands. */

/* ---------------------------------------------------------------- work sidebar (Figma Mail/WorkSidebar 143:2011) */

.main-nav .navbar-nav > .mail-work-sidebar-host {
    list-style: none;
    padding: 0 var(--nexeriq-space-3) var(--nexeriq-space-4);
}

.mail-work-sidebar-new {
    padding: var(--nexeriq-space-1) 0 var(--nexeriq-space-3);
}

.mail-work-sidebar-new .mail-work-sidebar-new-button {
    width: 100%;
    justify-content: center;
}

.mail-folder-heading {
    margin: var(--nexeriq-space-3) 0 var(--nexeriq-space-1);
    padding-inline-start: var(--nexeriq-space-3);
    color: var(--nexeriq-text-secondary);
    font-size: var(--nexeriq-type-overline-size);
    font-weight: var(--nexeriq-type-overline-weight);
    line-height: var(--nexeriq-type-overline-line-height);
    letter-spacing: var(--nexeriq-type-overline-letter-spacing);
    text-transform: uppercase;
}

.mail-shared-mailboxes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mail-shared-mailbox {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-2);
    min-height: 2rem;
    padding: 0 var(--nexeriq-space-3);
    border-radius: var(--nexeriq-radius-md);
    color: var(--nexeriq-text);
    text-decoration: none;
}

.mail-shared-mailbox > i {
    width: 1rem;
    color: var(--nexeriq-text-secondary);
    text-align: center;
}

.mail-shared-mailbox:hover {
    background: var(--nexeriq-hover);
    color: var(--nexeriq-text);
}

.mail-shared-mailbox.active {
    background: var(--nexeriq-primary-subtle);
    color: var(--nexeriq-primary-text);
}

.mail-shared-mailbox:focus-visible {
    outline: 2px solid var(--nexeriq-focus);
    outline-offset: -2px;
}

.mail-shared-mailbox-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The 56 px rail (Velex's narrow sidebar sizes, see mail-work-sidebar.js). AppAccordion's flyouts are absolutely
   positioned beside the rail, and Velex's simplebar clips everything inside the sidebar to its mask, so for this
   sidebar the simplebar layers stop clipping. The rail is three icons and a button, so nothing needs to scroll. */
.main-nav:has(.mail-work-sidebar--rail),
.main-nav:has(.mail-work-sidebar--rail) .scrollbar,
.main-nav:has(.mail-work-sidebar--rail) .simplebar-wrapper,
.main-nav:has(.mail-work-sidebar--rail) .simplebar-mask,
.main-nav:has(.mail-work-sidebar--rail) .simplebar-offset,
.main-nav:has(.mail-work-sidebar--rail) .simplebar-content-wrapper {
    overflow: visible !important;
}

.main-nav:has(.mail-work-sidebar--rail) .navbar-nav > .mail-work-sidebar-host {
    padding-inline: 0;
}

.mail-work-sidebar--rail .mail-work-sidebar-new {
    display: flex;
    justify-content: center;
}

.mail-work-sidebar--rail .mail-work-sidebar-new .mail-work-sidebar-new-button--icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    justify-content: center;
}

/* Velex widens its narrow sidebar on hover to show labels; the rail has none, so it keeps its width. */
html[data-menu-size="sm-hover"] .main-nav:has(.mail-work-sidebar--rail):hover {
    width: var(--bs-main-nav-width-sm, 4.5rem);
}

/* ---------------------------------------------------------------- reading pane (Mail/ReadingPane 165:2028) */

/* The phone-only bottom-bar buttons (Reply as primary, Archive, Delete) stay out of the desktop bar, where
   Reply is the small outline button and Archive and Delete live in More. */
.mail-reading-pane-actions .mail-action-phone {
    display: none;
}

@media (max-width: 767.98px) {
    /* M2: Reply (primary, the width that is left) · Archive · Delete · More, pinned to the bottom of the drawer. */
    .mail-reading-pane-actions .mail-action-desktop {
        display: none;
    }

    .mail-reading-pane-actions .mail-action-phone {
        display: inline-flex;
    }

    .mail-drawer-reading .mail-reading-pane-actions {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 2;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--nexeriq-space-2);
        margin: 0;
        padding: var(--nexeriq-space-3) var(--nexeriq-space-4);
        border-top: var(--bs-border-width) solid var(--nexeriq-border);
        background: var(--nexeriq-surface);
    }

    .mail-drawer-reading {
        padding-bottom: calc(2.75rem + 2 * var(--nexeriq-space-3));
    }

    .mail-reading-pane-actions .mail-action-phone-primary {
        flex: 1 1 auto;
        min-height: 2.75rem;
        justify-content: center;
    }

    .mail-reading-pane-actions .mail-action-phone-icon,
    .mail-reading-pane-actions .mail-action-more {
        min-width: 2.75rem;
        min-height: 2.75rem;
        justify-content: center;
    }

    /* More keeps its name for assistive technology but shows only the ellipsis, as in the frame. */
    .mail-reading-pane-actions .mail-action-more .dxbl-btn-caption {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .mail-reading-pane-actions .mail-action-more > svg {
        display: none;
    }

    /* A compact header: recipients on one line, attachments wrap. */
    .mail-drawer-reading .mail-reading-pane-header .small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------- compose (Mail/Compose 113:1706, ComposeMobile 157:2009) */

/* Inline header rows: the label beside its value, one hairline between rows, the editors borderless until they
   take focus. Help and error text sit under the value, in the value's column. */
.webmail-compose-fields {
    margin-bottom: var(--nexeriq-space-3);
}

.webmail-compose-fields .webmail-compose-row,
.webmail-compose-fields .app-field {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    align-items: center;
    column-gap: var(--nexeriq-space-3);
    margin: 0;
    padding: var(--nexeriq-space-1) 0;
    border-bottom: var(--bs-border-width) solid var(--nexeriq-border);
}

.webmail-compose-fields .webmail-compose-row > .form-label,
.webmail-compose-fields .app-field > .form-label {
    grid-column: 1;
    margin: 0;
    color: var(--nexeriq-text-secondary);
}

.webmail-compose-fields .webmail-compose-row > :not(.form-label),
.webmail-compose-fields .app-field > :not(.form-label) {
    grid-column: 2;
}

.webmail-compose-fields .app-field .dxbl-text-edit {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.webmail-compose-fields .app-field .dxbl-text-edit:focus-within {
    border-color: var(--nexeriq-focus);
}

.webmail-compose-to {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-2);
    border-bottom: var(--bs-border-width) solid var(--nexeriq-border);
}

.webmail-compose-to > .app-field {
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: 0;
}

.webmail-compose-to .webmail-compose-ccbcc {
    flex: none;
}

/* The body is the page: no frame, the label kept for assistive technology only. */
.webmail-compose-body > .form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.webmail-compose-body .dxbl-text-edit {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.webmail-compose-body .dxbl-text-edit:focus-within {
    border-color: var(--nexeriq-focus);
}

/* DM-841: the plain-text / formatting switch sits between Subject and the body, at the end of the row. */
.webmail-compose-format {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--nexeriq-space-2);
}

.webmail-compose-format:empty {
    display: none;
}

.webmail-compose-notices:empty {
    display: none;
}

@media (max-width: 767.98px) {
    .webmail-compose-format > .dxbl-btn {
        min-height: 2.75rem;
    }

    /* The phone frame (ComposeMobile 157:2009) puts the format bar under the body, above the footer. */
    .webmail-compose-editor .dxbl-html-editor {
        display: flex;
        flex-direction: column-reverse;
    }
}

@media (max-width: 767.98px) {
    /* The phone footer: Send stays first and full width so it is the obvious tap. */
    .webmail-compose-footer > .dxbl-btn {
        min-height: 2.75rem;
    }
}

/* ================================================================ webmail three panes (DM-840, frame P1/P6)

   Above the phone width webmail is P1: the shell's folders, a fixed list column of Mail/MessageRow rows, and
   the reading pane filling the rest. Desktop only, on the interim breakpoint's negation (MailViewport,
   NEXER-1353), so these rules never style a phone, even before the viewport script reports. It sits last in the file so
   it outranks the admin reader's older responsive rules (the 820 px overlay pane) by source order. */

@media not all and (max-width: 767.98px) {
    .mail-reader.mail-reader--panes {
        grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
        gap: 0;
        min-height: calc(100dvh - 12rem);
    }

    .mail-reader--panes > .mail-reader-list {
        border-right: var(--bs-border-width) solid var(--bs-border-color);
        padding-right: var(--nexeriq-space-3);
    }

    /* The pane is a permanent column here, never the small-screen overlay. */
    .mail-reader--panes > .mail-reader-pane {
        position: static;
        inset: auto;
        z-index: auto;
        padding: 0 0 0 var(--nexeriq-space-4);
        background: transparent;
        transform: none;
        visibility: visible;
        transition: none;
    }

    .mail-reader--panes .mail-reader-back {
        display: none;
    }

    /* The reading card sits flat in its column, as in the frame: no box inside the pane. */
    .mail-reader--panes > .mail-reader-pane > .mail-reading-pane {
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    /* One stacked column: its header would only say "Message". */
    .mail-reader--panes .mail-reader-list .dxbl-grid-header-row {
        display: none;
    }

    /* The view classes set the cell padding on the grid element itself, so the P1 rows override it there. */
    .mail-reader--panes .mail-reader-list .mail-grid-detail,
    .mail-reader--panes .mail-reader-list .mail-grid-compact {
        --dxbl-grid-text-cell-padding-y: var(--nexeriq-space-2);
    }
}

/* Below the phone width the pane is never shown in three-pane markup. That markup only exists there before the
   viewport script reports (a deep-linked message on first load); once it does, the message moves to the drawer. */
@media (max-width: 767.98px) {
    .mail-reader--panes > .mail-reader-pane {
        display: none;
    }
}

/* ---------------------------------------------------------------- Mail/MessageRow (Figma 111:1508) */

.mail-message-row {
    display: flex;
    flex-direction: column;
    gap: var(--nexeriq-space-half);
    min-width: 0;
    line-height: 1.3;
    font-weight: normal;
}

.mail-message-row-top {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-2);
    min-width: 0;
}

.mail-message-row-dot {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.mail-message-row--unread .mail-message-row-dot {
    background: var(--nexeriq-primary);
}

.mail-message-row-sender {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--bs-body-color);
}

.mail-message-row--unread .mail-message-row-sender,
.mail-message-row--unread .mail-message-row-subject {
    font-weight: var(--nexeriq-type-body-strong-weight);
}

.mail-message-row-icons {
    display: inline-flex;
    gap: var(--nexeriq-space-1);
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
}

.mail-message-row-flag {
    color: var(--bs-danger-text-emphasis);
}

.mail-message-row-time {
    flex: 0 0 auto;
    font-size: var(--nexeriq-type-small-size);
    color: var(--bs-secondary-color);
}

.mail-message-row--unread .mail-message-row-time {
    color: var(--nexeriq-primary-text);
}

.mail-message-row-subject {
    padding-left: calc(0.5rem + var(--nexeriq-space-2));
    color: var(--bs-body-color);
}

/* The contact-card name inside a row is its own control: a 24 px target (WCAG 2.5.8), not the text's line box. */
.mail-message-row .mail-sender-link {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
}