/* 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: 1rem;
    /* 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;
}

/* 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: 0.5rem;
    margin-bottom: 0.5rem;
}

.mail-pane-steps {
    display: flex;
    gap: 0.25rem;
    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: 0.25rem;
    }

    /* 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: 0.75rem;
        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: 0.5rem;
        margin-bottom: 0.5rem;
        padding: 0.35rem 0.15rem;
        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: 0.5rem;
    margin-bottom: 0.75rem;
}

.mail-reader-search > .btn {
    margin-top: 2rem;
}

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

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

/* 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: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}

/* The compact create-folder control shown in the toolbar when the folder rail is hidden. */
.mail-list-newfolder {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

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

/* Compact view: same columns, tighter rows so more messages fit on screen. */
.mail-grid-compact td,
.mail-grid-compact th {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* A sender cell: the Gravatar avatar beside the name, name truncating. */
.mail-sender {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.mail-sender-avatar {
    flex: 0 0 auto;
}

.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-plain-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.3;
    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;
}

.mail-plain-meta {
    font-size: 0.8125rem;
}

/* 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 {
    width: 10rem;
}

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

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

.mail-thread-item {
    border-top: var(--bs-border-width) solid var(--bs-border-color);
    padding: 0.5rem 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: 0.75rem;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0.15rem 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: 0.8rem;
}

.mail-thread-recipients {
    margin-bottom: 0.5rem;
}

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

.mail-shortcuts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1rem;
    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: 0.8rem;
}

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

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

.mail-folder {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.55rem;
    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: 0.8rem;
    font-variant-numeric: tabular-nums;
}

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

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

.mail-folder-new {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: var(--bs-border-width) solid var(--bs-border-color);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.mail-folder-new .form-control {
    flex: 1 1 8rem;
    min-width: 0;
}

.mail-folder-new-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.35rem 0.55rem;
    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 0.25rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.mail-reading-pane-meta {
    margin-bottom: 0.5rem;
}

.mail-reading-pane-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

/* The body now holds sanitized message HTML, not a <pre> of stripped text. Contain it: mail from
   the wild sets its own widths, floats and font sizes, and without this it drags the layout around.
   overflow-wrap keeps a long unbroken URL from forcing a horizontal scrollbar. */
.mail-reading-pane-body {
    margin: 0;
    overflow-wrap: anywhere;
    font-family: inherit;
}

.mail-reading-pane-body img {
    max-width: 100%;
    height: auto;
}

/* A blocked remote image leaves an <img> with no src. Give it a placeholder box so the layout does
   not collapse and the reader can see something was withheld. */
.mail-reading-pane-body img:not([src]) {
    display: inline-block;
    min-width: 1.5rem;
    min-height: 1.5rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
}

.mail-reading-pane-body table {
    max-width: 100%;
}

.mail-images-bar {
    margin-bottom: 0.75rem;
}

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

.mail-attachments {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

.mail-attachment-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mail-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.7rem;
    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: 0.8rem;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- 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);
}

/* White on the brand orange measures 3.62:1 — below WCAG AA. Dark text on the same orange is
   4.75:1, which is the trick Bootstrap already uses for its warning buttons. */
.culture-option.is-active {
    background: var(--bs-primary);
    color: #14161a;
}

.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: 1.5rem;
    background: var(--bs-tertiary-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: 0.35rem;
    margin-bottom: 1rem;
}

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

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

.mail-auth-qualifier {
    margin-left: 0.1rem;
}